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

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

@ -2,15 +2,15 @@
// Action Sheet // Action Sheet
// -------------------------------------------------- // --------------------------------------------------
$action-sheet-width: 100% !default; $action-sheet-width: 100% !default;
$action-sheet-max-width: 520px !default; $action-sheet-max-width: 520px !default;
$action-sheet-background-color: rgba(243,243,243,.95) !default; $action-sheet-background-color: rgba(243,243,243,.95) !default;
$action-sheet-button-text-color: #007aff !default; $action-sheet-button-text-color: #007aff !default;
$action-sheet-options-bg-color: #f1f2f3 !default; $action-sheet-options-background-color: #f1f2f3 !default;
$action-sheet-options-bg-active-color: #e4e5e7 !default; $action-sheet-options-background-active-color: #e4e5e7 !default;
$action-sheet-options-text-color: #007aff !default; $action-sheet-options-text-color: #007aff !default;
$action-sheet-options-border-color: #d1d3d6 !default; $action-sheet-options-border-color: #d1d3d6 !default;
ion-action-sheet { ion-action-sheet {
@ -62,7 +62,7 @@ action-sheet-wrapper {
box-shadow: none; box-shadow: none;
border-color: $action-sheet-options-border-color; border-color: $action-sheet-options-border-color;
color: $action-sheet-options-text-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 { .action-sheet-options {
background: $action-sheet-options-bg-color; background: $action-sheet-options-background-color;
} }
.action-sheet-cancel button { .action-sheet-cancel button {

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

@ -2,17 +2,17 @@
// Material Design Button // Material Design Button
// -------------------------------------------------- // --------------------------------------------------
$button-md-font-size: 1.4rem !default; $button-md-font-size: 1.4rem !default;
$button-md-min-height: 3.6rem !default; $button-md-min-height: 3.6rem !default;
$button-md-padding: 0 1.1em !default; $button-md-padding: 0 1.1em !default;
$button-md-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; $button-md-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;
$button-md-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default; $button-md-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
$button-md-border-radius: 2px !default; $button-md-border-radius: 2px !default;
$button-md-animation-curve: cubic-bezier(0.4, 0, 0.2, 1) !default; $button-md-animation-curve: cubic-bezier(0.4, 0, 0.2, 1) !default;
$button-md-transition-duration: 300ms !default; $button-md-transition-duration: 300ms !default;
$button-md-clear-hover-bg-color: rgba(158, 158, 158, 0.1); $button-md-clear-hover-background-color: rgba(158, 158, 158, 0.1);
$button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2); $button-md-clear-active-background-color: rgba(158, 158, 158, 0.2);
button, button,
@ -44,7 +44,7 @@ button,
box-shadow: none; box-shadow: none;
&.activated { &.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,
&.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-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-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-border-color-on: color(primary) !default;
$checkbox-ios-checkmark-color-on: $background-color !default; $checkbox-ios-checkmark-color-on: $background-color !default;
@ -13,7 +13,7 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
.checkbox { .checkbox {
&[aria-checked=true] .checkbox-icon { &[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; border-color: $checkbox-ios-border-color-on;
} }
@ -38,7 +38,7 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
height: $checkbox-ios-icon-size; height: $checkbox-ios-icon-size;
border-radius: 50%; border-radius: 50%;
border: 1px solid $checkbox-ios-border-color-off; 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-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-width: 2px !default;
$checkbox-md-border-radius: 2px !default; $checkbox-md-border-radius: 2px !default;
$checkbox-md-border-color-off: darken($item-md-border-color, 40%) !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-border-color-on: color(primary) !default;
$checkbox-md-checkmark-color-on: $background-color !default; $checkbox-md-checkmark-color-on: $background-color !default;
@ -15,7 +15,7 @@ $checkbox-md-checkmark-color-on: $background-color !default;
.checkbox { .checkbox {
&[aria-checked=true] .checkbox-icon { &[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; border-color: $checkbox-md-border-color-on;
} }
@ -40,7 +40,7 @@ $checkbox-md-checkmark-color-on: $background-color !default;
height: $checkbox-md-icon-size; height: $checkbox-md-icon-size;
border-radius: $checkbox-md-border-radius; border-radius: $checkbox-md-border-radius;
border: $checkbox-md-border-width solid $checkbox-md-border-color-off; 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;
} }

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

@ -2,25 +2,25 @@
// iOS Item // iOS Item
// -------------------------------------------------- // --------------------------------------------------
$item-ios-border-color: $list-border-color !default; $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-font-size: 1.6rem !default;
$item-ios-padding-top: 13px !default; $item-ios-padding-top: 13px !default;
$item-ios-padding-right: 16px !default; $item-ios-padding-right: 16px !default;
$item-ios-padding-bottom: 14px !default; $item-ios-padding-bottom: 14px !default;
$item-ios-padding-left: 16px !default; $item-ios-padding-left: 16px !default;
$item-ios-padding-media-top: 10px !default; $item-ios-padding-media-top: 10px !default;
$item-ios-padding-media-bottom: 10px !default; $item-ios-padding-media-bottom: 10px !default;
$item-ios-padding-icon-top: 10px !default; $item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 10px !default; $item-ios-padding-icon-bottom: 10px !default;
$item-ios-avatar-size: 3.6rem !default; $item-ios-avatar-size: 3.6rem !default;
$item-ios-thumbnail-size: 5.6rem !default; $item-ios-thumbnail-size: 5.6rem !default;
$item-ios-note-color: darken($item-ios-border-color, 10%) !default; $item-ios-note-color: darken($item-ios-border-color, 10%) !default;
$item-ios-forward-icon-color: $item-ios-border-color !default; $item-ios-forward-icon-color: $item-ios-border-color !default;
.list { .list {
@ -57,7 +57,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
} }
&.activated { &.activated {
background-color: $item-ios-activated-bg-color; background-color: $item-ios-activated-background-color;
} }
} }

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

@ -2,28 +2,28 @@
// Material Design Item // Material Design Item
// -------------------------------------------------- // --------------------------------------------------
$item-md-border-color: grayscale(lighten($list-border-color, 8%)) !default; $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-font-size: 1.6rem !default;
$item-md-padding-top: 13px !default; $item-md-padding-top: 13px !default;
$item-md-padding-right: 16px !default; $item-md-padding-right: 16px !default;
$item-md-padding-bottom: 13px !default; $item-md-padding-bottom: 13px !default;
$item-md-padding-left: 16px !default; $item-md-padding-left: 16px !default;
$item-md-padding-media-top: 9px !default; $item-md-padding-media-top: 9px !default;
$item-md-padding-media-bottom: 9px !default; $item-md-padding-media-bottom: 9px !default;
$item-md-padding-icon-top: 11px !default; $item-md-padding-icon-top: 11px !default;
$item-md-padding-icon-bottom: 10px !default; $item-md-padding-icon-bottom: 10px !default;
$item-md-body-text-font-size: 1.4rem !default; $item-md-body-text-font-size: 1.4rem !default;
$item-md-body-text-line-height: 1.5 !default; $item-md-body-text-line-height: 1.5 !default;
$item-md-avatar-size: 4rem !default; $item-md-avatar-size: 4rem !default;
$item-md-thumbnail-size: 8rem !default; $item-md-thumbnail-size: 8rem !default;
$item-md-note-color: darken($item-md-border-color, 10%) !default; $item-md-note-color: darken($item-md-border-color, 10%) !default;
$item-md-forward-icon-color: $item-md-border-color !default; $item-md-forward-icon-color: $item-md-border-color !default;
.list { .list {
@ -61,7 +61,7 @@ $item-md-forward-icon-color: $item-md-border-color !default;
} }
&.activated { &.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 // Modals
// -------------------------------------------------- // --------------------------------------------------
$modal-bg-color: #fff !default; $modal-background-color: #fff !default;
$modal-inset-mode-break-point: 680px !default; // @media min-width $modal-inset-mode-break-point: 680px !default; // @media min-width
$modal-inset-mode-top: 20% !default; $modal-inset-mode-top: 20% !default;
@ -19,7 +19,7 @@ ion-modal {
overflow: hidden; overflow: hidden;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
background-color: $modal-bg-color; background-color: $modal-background-color;
transform: translate3d(0px, 100%, 0px); transform: translate3d(0px, 100%, 0px);
&.show-overlay { &.show-overlay {

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

@ -3,13 +3,13 @@
// -------------------------------------------------- // --------------------------------------------------
$popup-ios-border-radius: 13px !default; $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-ios-button-text-color: color(primary) !default;
popup-wrapper { popup-wrapper {
border-radius: $popup-ios-border-radius; border-radius: $popup-ios-border-radius;
background-color: $popup-ios-bg-color; background-color: $popup-ios-background-color;
} }
.popup-head { .popup-head {

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

@ -3,12 +3,12 @@
// -------------------------------------------------- // --------------------------------------------------
$popup-md-border-radius: 13px !default; $popup-md-border-radius: 13px !default;
$popup-md-bg-color: #f8f8f8 !default; $popup-md-background-color: #f8f8f8 !default;
popup-wrapper { popup-wrapper {
border-radius: $popup-md-border-radius; border-radius: $popup-md-border-radius;
background-color: $popup-md-bg-color; background-color: $popup-md-background-color;
} }
.popup-head { .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-width: 2px !default;
$switch-ios-border-radius: $switch-ios-height / 2 !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-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-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-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; $switch-ios-transition-duration: 300ms !default;
@ -48,7 +48,7 @@ ion-switch {
&[aria-checked=true] .switch-icon { &[aria-checked=true] .switch-icon {
// bg track, when checked // 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; bottom: $switch-ios-border-width;
border-radius: $switch-ios-border-radius; border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-bg-color; background-color: $switch-ios-off-background-color;
will-change: transform; will-change: transform;
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
@ -93,7 +93,7 @@ ion-switch {
height: $switch-ios-handle-height; height: $switch-ios-handle-height;
border-radius: $switch-ios-handle-radius; 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; box-shadow: $switch-ios-handle-box-shadow;
will-change: transform, width, left; will-change: transform, width, left;

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

@ -2,20 +2,20 @@
// Material Design Switch // Material Design Switch
// -------------------------------------------------- // --------------------------------------------------
$switch-md-active-color: color(primary) !default; $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-bg-color: $item-md-border-color !default; $switch-md-track-off-background-color: $item-md-border-color !default;
$switch-md-track-on-bg-color: lighten($switch-md-active-color, 25%) !default; $switch-md-track-on-background-color: 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-bg-color: $background-color !default; $switch-md-handle-off-background-color: $background-color !default;
$switch-md-handle-on-bg-color: $switch-md-active-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-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;
ion-switch { ion-switch {
@ -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-bg-color; background-color: $switch-md-track-off-background-color;
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-bg-color; background-color: $switch-md-track-on-background-color;
} }
@ -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-bg-color; background-color: $switch-md-handle-off-background-color;
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-bg-color; background-color: $switch-md-handle-on-background-color;
transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0); transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
} }

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

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