javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
closes #6289
This commit is contained in:
Brandy Carney
2016-05-20 16:11:27 -04:00
parent 6b3e7acedc
commit 9cc0dc7239
3 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/alert/alert.ios.scss
View File

@ -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
// -----------------------------------------

16
src/components/alert/alert.md.scss
View File

@ -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-inner {
transform: $alert-md-radio-icon-transform-on;
}
.alert-radio[aria-checked=true] .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
// --------------------------------------------------

14
src/components/alert/alert.wp.scss
View File

@ -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,16 +247,18 @@ 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 {
.alert-radio-inner {
display: block;
}
}
// Windows Alert Checkbox Label
@ -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
// --------------------------------------------------