From 9cc0dc7239bdfd942df4cafb0dfd30b77e77af7a Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 20 May 2016 16:11:27 -0400 Subject: [PATCH] feat(alert): add Sass variables for the radio/checkbox labels when checked closes #6289 --- src/components/alert/alert.ios.scss | 22 ++++++++++++++++------ src/components/alert/alert.md.scss | 18 ++++++++++++++---- src/components/alert/alert.wp.scss | 16 ++++++++++++---- 3 files changed, 42 insertions(+), 14 deletions(-) diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss index 9a76a9ccf91..50a6761b72b 100644 --- a/src/components/alert/alert.ios.scss +++ b/src/components/alert/alert.ios.scss @@ -55,6 +55,7 @@ $alert-ios-button-main-font-weight: bold !default; $alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; $alert-ios-radio-label-padding: 13px !default; +$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; $alert-ios-radio-min-width: 30px !default; @@ -68,6 +69,7 @@ $alert-ios-radio-icon-border-color: $alert-ios-button-text-color !de $alert-ios-radio-icon-transform: rotate(45deg) !default; $alert-ios-checkbox-label-padding: 13px !default; +$alert-ios-checkbox-label-text-color-checked: initial !default; $alert-ios-checkbox-margin: 10px 6px 10px 16px !default; $alert-ios-checkbox-size: 21px !default; @@ -178,7 +180,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; } -// iOS Alert Radio +// iOS Alert Radio Label // -------------------------------------------------- .alert-radio-label { @@ -194,6 +196,15 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; white-space: nowrap; } + +// iOS Alert Radio Label: Checked +// -------------------------------------------------- + +.alert-radio[aria-checked=true] .alert-radio-label { + color: $alert-ios-radio-label-text-color-checked; +} + + // iOS Alert Radio Checkmark: Unchecked // ----------------------------------------- @@ -205,12 +216,8 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; min-width: $alert-ios-radio-min-width; } -.alert-radio[aria-checked=true] { - color: $alert-ios-button-text-color; -} - -// iOS Alert Radio Checkmark: Checked +// iOS Alert Radio Checked // ----------------------------------------- .alert-radio[aria-checked=true] .alert-radio-inner { @@ -244,6 +251,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; white-space: nowrap; } +.alert-checkbox[aria-checked=true] .alert-checkbox-label { + color: $alert-ios-checkbox-label-text-color-checked; +} // iOS Alert Checkbox Outer Circle: Unchecked // ----------------------------------------- diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss index 7c654afdb07..f465d0c0468 100644 --- a/src/components/alert/alert.md.scss +++ b/src/components/alert/alert.md.scss @@ -56,6 +56,7 @@ $alert-md-list-border-top: 1px solid $alert-md-input-border-c $alert-md-list-border-bottom: $alert-md-list-border-top !default; $alert-md-radio-label-padding: 13px 26px !default; +$alert-md-radio-label-text-color-checked: $alert-md-button-text-color !default; $alert-md-radio-top: 0 !default; $alert-md-radio-left: 13px !default; @@ -77,6 +78,7 @@ $alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; $alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; $alert-md-checkbox-label-padding: 13px 26px !default; +$alert-md-checkbox-label-text-color-checked: initial !default; $alert-md-checkbox-top: 0 !default; $alert-md-checkbox-left: 13px !default; @@ -241,15 +243,19 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; // --------------------------------------------------- .alert-radio[aria-checked=true] { - color: $alert-md-radio-border-color-on; + + .alert-radio-label { + color: $alert-md-radio-label-text-color-checked; + } .alert-radio-icon { border-color: $alert-md-radio-border-color-on; } -} -.alert-radio[aria-checked=true] .alert-radio-inner { - transform: $alert-md-radio-icon-transform-on; + .alert-radio-inner { + transform: $alert-md-radio-icon-transform-on; + } + } @@ -267,6 +273,10 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; white-space: nowrap; } +.alert-checkbox[aria-checked=true] .alert-checkbox-label { + color: $alert-md-checkbox-label-text-color-checked; +} + // Material Design Alert Checkbox Outline: Unchecked // -------------------------------------------------- diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss index ce00cb7403d..e71afe469a6 100644 --- a/src/components/alert/alert.wp.scss +++ b/src/components/alert/alert.wp.scss @@ -58,6 +58,7 @@ $alert-wp-radio-background: color($colors-wp, primary) !defau $alert-wp-radio-border-color: $input-wp-border-color !default; $alert-wp-radio-label-padding: 13px 26px !default; +$alert-wp-radio-label-text-color-checked: $alert-wp-button-text-color !default; $alert-wp-radio-top: 0 !default; $alert-wp-radio-left: 13px !default; @@ -75,6 +76,7 @@ $alert-wp-radio-icon-height: 8px !default; $alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !default; $alert-wp-checkbox-label-padding: 13px 26px !default; +$alert-wp-checkbox-label-text-color-checked: initial !default; $alert-wp-checkbox-top: 0 !default; $alert-wp-checkbox-left: 13px !default; @@ -245,15 +247,17 @@ ion-alert { // --------------------------------------------------- .alert-radio[aria-checked=true] { - color: $alert-wp-button-text-color; + .alert-radio-label { + color: $alert-wp-radio-label-text-color-checked; + } .alert-radio-icon { border-color: $alert-wp-radio-border-color; } -} -.alert-radio[aria-checked=true] .alert-radio-inner { - display: block; + .alert-radio-inner { + display: block; + } } @@ -271,6 +275,10 @@ ion-alert { white-space: nowrap; } +.alert-checkbox[aria-checked=true] .alert-checkbox-label { + color: $alert-wp-checkbox-label-text-color-checked; +} + // Windows Alert Checkbox Outline: Unchecked // --------------------------------------------------