javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): update color and on/off sass var names

Browse Source
This commit is contained in:
Adam Bradley
2015-09-21 16:40:01 -05:00
parent 0a4e927312
commit 8073be459a
6 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/action-sheet/modes/ios.scss
View File

@ -15,7 +15,7 @@ $action-sheet-ios-title-font-size: 1.2rem !default;
$action-sheet-ios-button-text-color: #007aff !default; $action-sheet-ios-button-text-color: #007aff !default;
$action-sheet-ios-button-font-size: 2rem !default; $action-sheet-ios-button-font-size: 2rem !default;
$action-sheet-ios-background-active: #ebebeb !default; $action-sheet-ios-background-active-color: #ebebeb !default;
$action-sheet-ios-icon-font-size: 1.4em !default; $action-sheet-ios-icon-font-size: 1.4em !default;
@ -38,7 +38,7 @@ ion-action-sheet button {
background: transparent; background: transparent;
&.activated { &.activated {
background: $action-sheet-ios-background-active; background: $action-sheet-ios-background-active-color;
} }
} }

4
ionic/components/action-sheet/modes/md.scss
View File

@ -12,7 +12,7 @@ $action-sheet-md-title-padding: 1.9rem 1.6rem 1.7rem !default;
$action-sheet-md-button-text-color: #222 !default; $action-sheet-md-button-text-color: #222 !default;
$action-sheet-md-button-font-size: 1.6rem !default; $action-sheet-md-button-font-size: 1.6rem !default;
$action-sheet-md-background-active: #f1f1f1 !default; $action-sheet-md-background-active-color: #f1f1f1 !default;
$action-sheet-md-icon-font-size: 2.4rem !default; $action-sheet-md-icon-font-size: 2.4rem !default;
$action-sheet-md-icon-margin: 0 28px 0 0 !default; $action-sheet-md-icon-margin: 0 28px 0 0 !default;
@ -58,7 +58,7 @@ ion-action-sheet button {
min-height: $action-sheet-md-height; min-height: $action-sheet-md-height;
&.activated { &.activated {
background: $action-sheet-md-background-active; background: $action-sheet-md-background-active-color;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
} }

6
ionic/components/radio/modes/ios.scss
View File

@ -2,14 +2,14 @@
// iOS Radio // iOS Radio
// -------------------------------------------------- // --------------------------------------------------
$radio-ios-active-color: color(primary) !default; $radio-ios-color-on: color(primary) !default;
ion-radio { ion-radio {
&[aria-checked=true] .radio-icon:after { &[aria-checked=true] .radio-icon:after {
position: absolute; position: absolute;
border: 2px solid $radio-ios-active-color; border: 2px solid $radio-ios-color-on;
top: 3px; top: 3px;
left: 7px; left: 7px;
width: 4px; width: 4px;
@ -21,7 +21,7 @@ ion-radio {
} }
&[aria-checked=true] { &[aria-checked=true] {
color: $radio-ios-active-color; color: $radio-ios-color-on;
} }
} }

8
ionic/components/radio/modes/md.scss
View File

@ -2,7 +2,7 @@
// Material Design Radio // Material Design Radio
// -------------------------------------------------- // --------------------------------------------------
$radio-md-active-color: color(primary) !default; $radio-md-color-on: color(primary) !default;
$radio-md-icon-size: 16px !default; $radio-md-icon-size: 16px !default;
$radio-md-border-width: 2px !default; $radio-md-border-width: 2px !default;
@ -26,7 +26,7 @@ ion-radio {
} }
&[aria-checked=true] .radio-icon { &[aria-checked=true] .radio-icon {
border-color: $radio-md-active-color; border-color: $radio-md-color-on;
} }
.radio-icon:after { .radio-icon:after {
@ -35,7 +35,7 @@ ion-radio {
left: $radio-md-border-width; left: $radio-md-border-width;
width: $radio-md-icon-size / 2; width: $radio-md-icon-size / 2;
height: $radio-md-icon-size / 2; height: $radio-md-icon-size / 2;
background: $radio-md-active-color; background: $radio-md-color-on;
border-radius: 50%; border-radius: 50%;
content: ''; content: '';
transition: transform $radio-md-transition-duration $radio-md-transition-easing; transition: transform $radio-md-transition-duration $radio-md-transition-easing;
@ -47,7 +47,7 @@ ion-radio {
} }
&[aria-checked=true] { &[aria-checked=true] {
color: $radio-md-active-color; color: $radio-md-color-on;
} }
} }

14
ionic/components/switch/modes/ios.scss
View File

@ -7,17 +7,17 @@ $switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default; $switch-ios-border-width: 2px !default;
$switch-ios-border-radius: $switch-ios-height / 2 !default; $switch-ios-border-radius: $switch-ios-height / 2 !default;
$switch-ios-off-background-color: $list-background-color !default; $switch-ios-background-color-off: $list-background-color !default;
$switch-ios-off-border-color: grayscale(lighten($list-border-color, 11%)) !default; $switch-ios-border-color-off: grayscale(lighten($list-border-color, 11%)) !default;
$switch-ios-on-background-color: color(primary) !default; $switch-ios-background-color-on: color(primary) !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default; $switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default; $switch-ios-handle-height: $switch-ios-handle-width !default;
$switch-ios-handle-radius: $switch-ios-handle-height / 2 !default; $switch-ios-handle-radius: $switch-ios-handle-height / 2 !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default; $switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
$switch-ios-handle-background-color: $switch-ios-off-background-color !default; $switch-ios-handle-background-color: $switch-ios-background-color-off !default;
$switch-ios-transition-duration: 300ms !default; $switch-ios-transition-duration: 300ms !default;
@ -41,14 +41,14 @@ ion-switch {
border-radius: $switch-ios-border-radius; border-radius: $switch-ios-border-radius;
pointer-events: none; pointer-events: none;
background-color: $switch-ios-off-border-color; background-color: $switch-ios-border-color-off;
will-change: background-color; will-change: background-color;
transition: background-color $switch-ios-transition-duration; transition: background-color $switch-ios-transition-duration;
} }
&[aria-checked=true] .switch-icon { &[aria-checked=true] .switch-icon {
// bg track, when checked // bg track, when checked
background-color: $switch-ios-on-background-color; background-color: $switch-ios-background-color-on;
} }
@ -65,7 +65,7 @@ ion-switch {
bottom: $switch-ios-border-width; bottom: $switch-ios-border-width;
border-radius: $switch-ios-border-radius; border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-background-color; background-color: $switch-ios-background-color-off;
will-change: transform; will-change: transform;
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);

16
ionic/components/switch/modes/md.scss
View File

@ -6,13 +6,13 @@ $switch-md-active-color: color(primary) !default;
$switch-md-track-width: 36px !default; $switch-md-track-width: 36px !default;
$switch-md-track-height: 14px !default; $switch-md-track-height: 14px !default;
$switch-md-track-off-background-color: $item-md-border-color !default; $switch-md-track-background-color-off: $item-md-border-color !default;
$switch-md-track-on-background-color: lighten($switch-md-active-color, 25%) !default; $switch-md-track-background-color-on: lighten($switch-md-active-color, 25%) !default;
$switch-md-handle-width: 20px !default; $switch-md-handle-width: 20px !default;
$switch-md-handle-height: 20px !default; $switch-md-handle-height: 20px !default;
$switch-md-handle-off-background-color: $background-color !default; $switch-md-handle-background-color-off: $background-color !default;
$switch-md-handle-on-background-color: $switch-md-active-color !default; $switch-md-handle-background-color-on: $switch-md-active-color !default;
$switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default; $switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$switch-md-transition-duration: 300ms !default; $switch-md-transition-duration: 300ms !default;
@ -37,14 +37,14 @@ ion-switch {
pointer-events: none; pointer-events: none;
border-radius: $switch-md-track-height; border-radius: $switch-md-track-height;
background-color: $switch-md-track-off-background-color; background-color: $switch-md-track-background-color-off;
will-change: background-color; will-change: background-color;
transition: background-color $switch-md-transition-duration transition: background-color $switch-md-transition-duration
} }
&[aria-checked=true] .switch-icon { &[aria-checked=true] .switch-icon {
// bg track, when not checked // bg track, when not checked
background-color: $switch-md-track-on-background-color; background-color: $switch-md-track-background-color-on;
} }
@ -64,7 +64,7 @@ ion-switch {
border-radius: 50%; border-radius: 50%;
box-shadow: $switch-md-handle-box-shadow; box-shadow: $switch-md-handle-box-shadow;
background-color: $switch-md-handle-off-background-color; background-color: $switch-md-handle-background-color-off;
will-change: transform, background-color; will-change: transform, background-color;
transition-property: transform, background-color; transition-property: transform, background-color;
@ -73,7 +73,7 @@ ion-switch {
&[aria-checked=true] .switch-icon:after { &[aria-checked=true] .switch-icon:after {
// knob, when not checked // knob, when not checked
background-color: $switch-md-handle-on-background-color; background-color: $switch-md-handle-background-color-on;
transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0); transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
} }