From 0a4e927312dc0e2c94e56f8ce5ccdfb8972c2ccf Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 21 Sep 2015 16:25:13 -0500 Subject: [PATCH] chore(): sass vars should use `background` --- .../components/action-sheet/action-sheet.scss | 20 +++++------ ionic/components/button/modes/md.scss | 24 ++++++------- ionic/components/checkbox/modes/ios.scss | 8 ++--- ionic/components/checkbox/modes/md.scss | 8 ++--- ionic/components/item/modes/ios.scss | 32 ++++++++--------- ionic/components/item/modes/md.scss | 36 +++++++++---------- ionic/components/modal/modal.scss | 4 +-- ionic/components/popup/modes/ios.scss | 4 +-- ionic/components/popup/modes/md.scss | 4 +-- ionic/components/switch/modes/ios.scss | 12 +++---- ionic/components/switch/modes/md.scss | 30 ++++++++-------- ionic/components/tap-click/ripple.scss | 6 ++-- 12 files changed, 94 insertions(+), 94 deletions(-) diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss index 63be5a5e92..bdcf1c7d51 100644 --- a/ionic/components/action-sheet/action-sheet.scss +++ b/ionic/components/action-sheet/action-sheet.scss @@ -2,15 +2,15 @@ // Action Sheet // -------------------------------------------------- -$action-sheet-width: 100% !default; -$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-width: 100% !default; +$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-text-color: #007aff !default; -$action-sheet-options-border-color: #d1d3d6 !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; ion-action-sheet { @@ -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 { diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss index 060fa838c7..f7e83bd643 100644 --- a/ionic/components/button/modes/md.scss +++ b/ionic/components/button/modes/md.scss @@ -2,17 +2,17 @@ // Material Design Button // -------------------------------------------------- -$button-md-font-size: 1.4rem !default; -$button-md-min-height: 3.6rem !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-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-animation-curve: cubic-bezier(0.4, 0, 0.2, 1) !default; -$button-md-transition-duration: 300ms !default; +$button-md-font-size: 1.4rem !default; +$button-md-min-height: 3.6rem !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-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-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; } diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss index cf341cf7fa..5378853a2a 100644 --- a/ionic/components/checkbox/modes/ios.scss +++ b/ionic/components/checkbox/modes/ios.scss @@ -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; } diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss index f4b78dd0d4..cd6ded4f34 100644 --- a/ionic/components/checkbox/modes/md.scss +++ b/ionic/components/checkbox/modes/md.scss @@ -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; } diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index cfd3e3eab3..ac5640c7df 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -2,25 +2,25 @@ // iOS Item // -------------------------------------------------- -$item-ios-border-color: $list-border-color !default; -$item-ios-activated-bg-color: #d9d9d9 !default; -$item-ios-font-size: 1.6rem !default; +$item-ios-border-color: $list-border-color !default; +$item-ios-activated-background-color: #d9d9d9 !default; +$item-ios-font-size: 1.6rem !default; -$item-ios-padding-top: 13px !default; -$item-ios-padding-right: 16px !default; -$item-ios-padding-bottom: 14px !default; -$item-ios-padding-left: 16px !default; +$item-ios-padding-top: 13px !default; +$item-ios-padding-right: 16px !default; +$item-ios-padding-bottom: 14px !default; +$item-ios-padding-left: 16px !default; -$item-ios-padding-media-top: 10px !default; -$item-ios-padding-media-bottom: 10px !default; +$item-ios-padding-media-top: 10px !default; +$item-ios-padding-media-bottom: 10px !default; -$item-ios-padding-icon-top: 10px !default; -$item-ios-padding-icon-bottom: 10px !default; +$item-ios-padding-icon-top: 10px !default; +$item-ios-padding-icon-bottom: 10px !default; -$item-ios-avatar-size: 3.6rem !default; -$item-ios-thumbnail-size: 5.6rem !default; -$item-ios-note-color: darken($item-ios-border-color, 10%) !default; -$item-ios-forward-icon-color: $item-ios-border-color !default; +$item-ios-avatar-size: 3.6rem !default; +$item-ios-thumbnail-size: 5.6rem !default; +$item-ios-note-color: darken($item-ios-border-color, 10%) !default; +$item-ios-forward-icon-color: $item-ios-border-color !default; .list { @@ -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; } } diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index fbec5ff56a..d83645ac55 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -2,28 +2,28 @@ // Material Design Item // -------------------------------------------------- -$item-md-border-color: grayscale(lighten($list-border-color, 8%)) !default; -$item-md-activated-bg-color: #f1f1f1 !default; -$item-md-font-size: 1.6rem !default; +$item-md-border-color: grayscale(lighten($list-border-color, 8%)) !default; +$item-md-activated-background-color: #f1f1f1 !default; +$item-md-font-size: 1.6rem !default; -$item-md-padding-top: 13px !default; -$item-md-padding-right: 16px !default; -$item-md-padding-bottom: 13px !default; -$item-md-padding-left: 16px !default; +$item-md-padding-top: 13px !default; +$item-md-padding-right: 16px !default; +$item-md-padding-bottom: 13px !default; +$item-md-padding-left: 16px !default; -$item-md-padding-media-top: 9px !default; -$item-md-padding-media-bottom: 9px !default; +$item-md-padding-media-top: 9px !default; +$item-md-padding-media-bottom: 9px !default; -$item-md-padding-icon-top: 11px !default; -$item-md-padding-icon-bottom: 10px !default; +$item-md-padding-icon-top: 11px !default; +$item-md-padding-icon-bottom: 10px !default; -$item-md-body-text-font-size: 1.4rem !default; -$item-md-body-text-line-height: 1.5 !default; +$item-md-body-text-font-size: 1.4rem !default; +$item-md-body-text-line-height: 1.5 !default; -$item-md-avatar-size: 4rem !default; -$item-md-thumbnail-size: 8rem !default; -$item-md-note-color: darken($item-md-border-color, 10%) !default; -$item-md-forward-icon-color: $item-md-border-color !default; +$item-md-avatar-size: 4rem !default; +$item-md-thumbnail-size: 8rem !default; +$item-md-note-color: darken($item-md-border-color, 10%) !default; +$item-md-forward-icon-color: $item-md-border-color !default; .list { @@ -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; } } diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss index 164c53c38c..ca375a28b6 100644 --- a/ionic/components/modal/modal.scss +++ b/ionic/components/modal/modal.scss @@ -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 { diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss index abbed2fbfc..f05f6196dd 100644 --- a/ionic/components/popup/modes/ios.scss +++ b/ionic/components/popup/modes/ios.scss @@ -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 { diff --git a/ionic/components/popup/modes/md.scss b/ionic/components/popup/modes/md.scss index 9385a5f3bf..3a026e9592 100644 --- a/ionic/components/popup/modes/md.scss +++ b/ionic/components/popup/modes/md.scss @@ -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 { diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss index 687a7ba76f..fc07e2ee45 100644 --- a/ionic/components/switch/modes/ios.scss +++ b/ionic/components/switch/modes/ios.scss @@ -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; diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss index 4f029a4f50..bf67c8c78c 100644 --- a/ionic/components/switch/modes/md.scss +++ b/ionic/components/switch/modes/md.scss @@ -2,20 +2,20 @@ // 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-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-width: 36px !default; +$switch-md-track-height: 14px !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-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-width: 20px !default; +$switch-md-handle-height: 20px !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; +$switch-md-transition-duration: 300ms !default; ion-switch { @@ -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); } diff --git a/ionic/components/tap-click/ripple.scss b/ionic/components/tap-click/ripple.scss index e64e26b26a..e435a97680 100644 --- a/ionic/components/tap-click/ripple.scss +++ b/ionic/components/tap-click/ripple.scss @@ -2,8 +2,8 @@ // Material Design Ripple Effect // -------------------------------------------------- -$ripple-bg-color: white !default; -$ripple-animation-curve: cubic-bezier(0, 0, 0.2, 1) !default; +$ripple-background-color: #fff !default; +$ripple-animation-curve: cubic-bezier(0, 0, 0.2, 1) !default; md-ripple { @@ -12,7 +12,7 @@ md-ripple { display: block; border-radius: 50%; - background: $ripple-bg-color; + background: $ripple-background-color; opacity: 0.3; overflow: hidden;