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

chore(): sass vars should use background

Browse Source
This commit is contained in:
Adam Bradley
2015-09-21 16:25:13 -05:00
parent 6d402a9428
commit 0a4e927312
12 changed files with 94 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/action-sheet/action-sheet.scss
View File

@ -7,8 +7,8 @@ $action-sheet-max-width: 520px !default;
$action-sheet-background-color: rgba(243,243,243,.95) !default;
$action-sheet-button-text-color: #007aff !default;
$action-sheet-options-bg-color: #f1f2f3 !default;
$action-sheet-options-bg-active-color: #e4e5e7 !default;
$action-sheet-options-background-color: #f1f2f3 !default;
$action-sheet-options-background-active-color: #e4e5e7 !default;
$action-sheet-options-text-color: #007aff !default;
$action-sheet-options-border-color: #d1d3d6 !default;
@ -62,7 +62,7 @@ action-sheet-wrapper {
box-shadow: none;
border-color: $action-sheet-options-border-color;
color: $action-sheet-options-text-color;
background: $action-sheet-options-bg-active-color;
background: $action-sheet-options-background-active-color;
}
}
@ -92,7 +92,7 @@ action-sheet-wrapper {
}
.action-sheet-options {
background: $action-sheet-options-bg-color;
background: $action-sheet-options-background-color;
}
.action-sheet-cancel button {

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

@ -11,8 +11,8 @@ $button-md-border-radius: 2px !default;
$button-md-animation-curve: cubic-bezier(0.4, 0, 0.2, 1) !default;
$button-md-transition-duration: 300ms !default;
$button-md-clear-hover-bg-color: rgba(158, 158, 158, 0.1);
$button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2);
$button-md-clear-hover-background-color: rgba(158, 158, 158, 0.1);
$button-md-clear-active-background-color: rgba(158, 158, 158, 0.2);
button,
@ -44,7 +44,7 @@ button,
box-shadow: none;
&.activated {
background-color: $button-md-clear-active-bg-color;
background-color: $button-md-clear-active-background-color;
}
}
@ -85,7 +85,7 @@ button,
&.enable-hover button[clear]:hover,
&.enable-hover [button][clear]:hover {
background-color: $button-md-clear-hover-bg-color;
background-color: $button-md-clear-hover-background-color;
}

8
ionic/components/checkbox/modes/ios.scss
View File

@ -3,9 +3,9 @@
// --------------------------------------------------
$checkbox-ios-icon-size: 21px !default;
$checkbox-ios-bg-color-off: $list-background-color !default;
$checkbox-ios-background-color-off: $list-background-color !default;
$checkbox-ios-border-color-off: $list-border-color !default;
$checkbox-ios-bg-color-on: color(primary) !default;
$checkbox-ios-background-color-on: color(primary) !default;
$checkbox-ios-border-color-on: color(primary) !default;
$checkbox-ios-checkmark-color-on: $background-color !default;
@ -13,7 +13,7 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
.checkbox {
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-ios-bg-color-on;
background-color: $checkbox-ios-background-color-on;
border-color: $checkbox-ios-border-color-on;
}
@ -38,7 +38,7 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
height: $checkbox-ios-icon-size;
border-radius: 50%;
border: 1px solid $checkbox-ios-border-color-off;
background-color: $checkbox-ios-bg-color-off;
background-color: $checkbox-ios-background-color-off;
}

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

@ -3,11 +3,11 @@
// --------------------------------------------------
$checkbox-md-icon-size: 16px !default;
$checkbox-md-bg-color-off: $list-background-color !default;
$checkbox-md-background-color-off: $list-background-color !default;
$checkbox-md-border-width: 2px !default;
$checkbox-md-border-radius: 2px !default;
$checkbox-md-border-color-off: darken($item-md-border-color, 40%) !default;
$checkbox-md-bg-color-on: color(primary) !default;
$checkbox-md-background-color-on: color(primary) !default;
$checkbox-md-border-color-on: color(primary) !default;
$checkbox-md-checkmark-color-on: $background-color !default;
@ -15,7 +15,7 @@ $checkbox-md-checkmark-color-on: $background-color !default;
.checkbox {
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-md-bg-color-on;
background-color: $checkbox-md-background-color-on;
border-color: $checkbox-md-border-color-on;
}
@ -40,7 +40,7 @@ $checkbox-md-checkmark-color-on: $background-color !default;
height: $checkbox-md-icon-size;
border-radius: $checkbox-md-border-radius;
border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
background-color: $checkbox-md-bg-color-off;
background-color: $checkbox-md-background-color-off;
}

4
ionic/components/item/modes/ios.scss
View File

@ -3,7 +3,7 @@
// --------------------------------------------------
$item-ios-border-color: $list-border-color !default;
$item-ios-activated-bg-color: #d9d9d9 !default;
$item-ios-activated-background-color: #d9d9d9 !default;
$item-ios-font-size: 1.6rem !default;
$item-ios-padding-top: 13px !default;
@ -57,7 +57,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
}
&.activated {
background-color: $item-ios-activated-bg-color;
background-color: $item-ios-activated-background-color;
}
}

4
ionic/components/item/modes/md.scss
View File

@ -3,7 +3,7 @@
// --------------------------------------------------
$item-md-border-color: grayscale(lighten($list-border-color, 8%)) !default;
$item-md-activated-bg-color: #f1f1f1 !default;
$item-md-activated-background-color: #f1f1f1 !default;
$item-md-font-size: 1.6rem !default;
$item-md-padding-top: 13px !default;
@ -61,7 +61,7 @@ $item-md-forward-icon-color: $item-md-border-color !default;
}
&.activated {
background-color: $item-md-activated-bg-color;
background-color: $item-md-activated-background-color;
}
}

4
ionic/components/modal/modal.scss
View File

@ -2,7 +2,7 @@
// Modals
// --------------------------------------------------
$modal-bg-color: #fff !default;
$modal-background-color: #fff !default;
$modal-inset-mode-break-point: 680px !default; // @media min-width
$modal-inset-mode-top: 20% !default;
@ -19,7 +19,7 @@ ion-modal {
overflow: hidden;
min-height: 100%;
width: 100%;
background-color: $modal-bg-color;
background-color: $modal-background-color;
transform: translate3d(0px, 100%, 0px);
&.show-overlay {

4
ionic/components/popup/modes/ios.scss
View File

@ -3,13 +3,13 @@
// --------------------------------------------------
$popup-ios-border-radius: 13px !default;
$popup-ios-bg-color: #f8f8f8 !default;
$popup-ios-background-color: #f8f8f8 !default;
$popup-ios-button-text-color: color(primary) !default;
popup-wrapper {
border-radius: $popup-ios-border-radius;
background-color: $popup-ios-bg-color;
background-color: $popup-ios-background-color;
}
.popup-head {

4
ionic/components/popup/modes/md.scss
View File

@ -3,12 +3,12 @@
// --------------------------------------------------
$popup-md-border-radius: 13px !default;
$popup-md-bg-color: #f8f8f8 !default;
$popup-md-background-color: #f8f8f8 !default;
popup-wrapper {
border-radius: $popup-md-border-radius;
background-color: $popup-md-bg-color;
background-color: $popup-md-background-color;
}
.popup-head {

12
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-radius: $switch-ios-height / 2 !default;
$switch-ios-off-bg-color: $list-background-color !default;
$switch-ios-off-background-color: $list-background-color !default;
$switch-ios-off-border-color: grayscale(lighten($list-border-color, 11%)) !default;
$switch-ios-on-bg-color: color(primary) !default;
$switch-ios-on-background-color: color(primary) !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-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-bg-color: $switch-ios-off-bg-color !default;
$switch-ios-handle-background-color: $switch-ios-off-background-color !default;
$switch-ios-transition-duration: 300ms !default;
@ -48,7 +48,7 @@ ion-switch {
&[aria-checked=true] .switch-icon {
// bg track, when checked
background-color: $switch-ios-on-bg-color;
background-color: $switch-ios-on-background-color;
}
@ -65,7 +65,7 @@ ion-switch {
bottom: $switch-ios-border-width;
border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-bg-color;
background-color: $switch-ios-off-background-color;
will-change: transform;
transform: scale3d(1, 1, 1);
@ -93,7 +93,7 @@ ion-switch {
height: $switch-ios-handle-height;
border-radius: $switch-ios-handle-radius;
background-color: $switch-ios-handle-bg-color;
background-color: $switch-ios-handle-background-color;
box-shadow: $switch-ios-handle-box-shadow;
will-change: transform, width, left;

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

4
ionic/components/tap-click/ripple.scss
View File

@ -2,7 +2,7 @@
// Material Design Ripple Effect
// --------------------------------------------------
$ripple-bg-color: white !default;
$ripple-background-color: #fff !default;
$ripple-animation-curve: cubic-bezier(0, 0, 0.2, 1) !default;
@ -12,7 +12,7 @@ md-ripple {
display: block;
border-radius: 50%;
background: $ripple-bg-color;
background: $ripple-background-color;
opacity: 0.3;
overflow: hidden;