feat(alert): add Sass variables for the radio/checkbox labels when ch…

…ecked closes #6289
ionic-team · May 20, 2016 · 9cc0dc7 · 9cc0dc7
1 parent 6b3e7ac
commit 9cc0dc7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
 // --------------------------------------------------