From 022d873723735fc98586e8ebfcf1d66ae7405e0a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 4 Dec 2015 23:45:39 -0600 Subject: [PATCH] update item/list variable setup --- ionic/components/card/modes/md.scss | 2 +- ionic/components/checkbox/modes/md.scss | 4 +- ionic/components/item/modes/ios.scss | 9 +++-- ionic/components/item/modes/md.scss | 22 ++-------- ionic/components/list/modes/md.scss | 2 - ionic/components/radio/modes/md.scss | 2 +- ionic/components/switch/modes/md.scss | 2 +- ionic/themes/default.ios.scss | 37 +++++++++-------- ionic/themes/default.md.scss | 53 ++++++++++++------------- ionic/themes/default.scss | 8 ++-- 10 files changed, 62 insertions(+), 79 deletions(-) diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss index 43b1537ae7..4c7a2d22c0 100644 --- a/ionic/components/card/modes/md.scss +++ b/ionic/components/card/modes/md.scss @@ -62,7 +62,7 @@ ion-card { } .item { - font-size: $item-md-font-size; + font-size: $card-md-font-size; } .item-inner { diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss index f0df3b9a06..ca7067bc9c 100644 --- a/ionic/components/checkbox/modes/md.scss +++ b/ionic/components/checkbox/modes/md.scss @@ -8,7 +8,7 @@ $checkbox-md-icon-size: 16px !default; $checkbox-md-background-color-off: $list-md-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-border-color-off: darken($list-md-border-color, 40%) !default; $checkbox-md-background-color-on: map-get($colors-md, primary) !default; $checkbox-md-border-color-on: map-get($colors-md, primary) !default; $checkbox-md-checkmark-color-on: $background-md-color !default; @@ -21,7 +21,7 @@ ion-checkbox { } ion-item-content { - border-bottom: 1px solid $item-md-border-color; + border-bottom: 1px solid $list-md-border-color; margin: 0; padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0; } diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index ea92fe34f4..fa5c82242a 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -4,10 +4,11 @@ // iOS Item // -------------------------------------------------- +$item-ios-font-size: 1.6rem !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-detail-push-color: $item-ios-border-color !default; +$item-ios-note-color: darken($list-ios-border-color, 10%) !default; +$item-ios-detail-push-color: $list-ios-border-color !default; $item-ios-divider-bg: #f7f7f7 !default; $item-ios-divider-color: #222 !default; @@ -55,7 +56,7 @@ ion-note { .item.activated, a.item.activated, button.item.activated { - background-color: $item-ios-activated-background-color; + background-color: $list-ios-activated-background-color; transition-duration: 0ms; } @@ -67,7 +68,7 @@ button.item { .item-inner { padding-right: ($item-ios-padding-right / 2); - border-bottom: 1px solid $item-ios-border-color; + border-bottom: 1px solid $list-ios-border-color; } ion-item-content { diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 28a83da50c..a45526063d 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -4,27 +4,13 @@ // Material Design Item // -------------------------------------------------- -$item-md-border-color: grayscale(lighten($list-md-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-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-body-text-font-size: 1.4rem !default; $item-md-body-text-line-height: 1.5 !default; +$item-md-font-size: 1.6rem !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-note-color: darken($list-md-border-color, 10%) !default; $item-md-divider-bg: #fff !default; $item-md-divider-color: #222 !default; @@ -87,7 +73,7 @@ ion-note { } .item-inner { - border-bottom: 1px solid $item-md-border-color; + border-bottom: 1px solid $list-md-border-color; padding-right: ($item-md-padding-right / 2); } @@ -195,7 +181,7 @@ button.item { .item.activated, a.item.activated, button.item.activated { - background-color: $item-md-activated-background-color; + background-color: $list-md-activated-background-color; box-shadow: none; } diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss index b8b720a424..93ffcc7d5f 100644 --- a/ionic/components/list/modes/md.scss +++ b/ionic/components/list/modes/md.scss @@ -19,8 +19,6 @@ $list-md-header-padding: 16px $item-md-padding-right 16px $item-md-paddi $list-md-header-font-size: 1.4rem !default; $list-md-header-color: #858585 !default; -$list-md-border-color: $item-md-border-color !default; - /****************/ /* DEFAULT LIST */ diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss index 050b5804b8..43a1a39e6d 100644 --- a/ionic/components/radio/modes/md.scss +++ b/ionic/components/radio/modes/md.scss @@ -8,7 +8,7 @@ $radio-md-color-on: map-get($colors-md, primary) !default; $radio-md-icon-size: 16px !default; $radio-md-border-width: 2px !default; -$radio-md-color-off: darken($item-md-border-color, 40%) !default; +$radio-md-color-off: darken($list-md-border-color, 40%) !default; $radio-md-transition-duration: 280ms !default; $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss index e938bd48bd..92e61a56d6 100644 --- a/ionic/components/switch/modes/md.scss +++ b/ionic/components/switch/modes/md.scss @@ -8,7 +8,7 @@ $switch-md-active-color: map-get($colors-md, primary) !default; $switch-md-track-width: 36px !default; $switch-md-track-height: 14px !default; -$switch-md-track-background-color-off: $item-md-border-color !default; +$switch-md-track-background-color-off: $list-md-border-color !default; $switch-md-track-background-color-on: lighten($switch-md-active-color, 25%) !default; $switch-md-handle-width: 20px !default; diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss index 799dc2ff72..48e506710e 100644 --- a/ionic/themes/default.ios.scss +++ b/ionic/themes/default.ios.scss @@ -14,41 +14,40 @@ $colors-ios: ( ) !default; -$text-ios-color: $text-color !default; -$link-ios-color: map-get($colors-ios, primary) !default; -$background-ios-color: $background-color !default; -$subdued-text-ios-color: $subdued-text-color !default; - -$list-ios-text-color: $list-text-color !default; -$list-ios-background-color: $list-background-color !default; -$list-ios-border-color: $list-border-color !default; +$text-ios-color: $text-color !default; +$link-ios-color: map-get($colors-ios, primary) !default; +$background-ios-color: $background-color !default; +$subdued-text-ios-color: $subdued-text-color !default; // iOS Toolbar // -------------------------------------------------- -$toolbar-ios-background-color: $toolbar-background-color !default; -$toolbar-ios-border-color: $toolbar-border-color !default; -$toolbar-ios-text-color: $toolbar-text-color !default; -$toolbar-ios-active-color: $toolbar-active-color !default; -$toolbar-ios-inactive-color: $toolbar-inactive-color !default; +$toolbar-ios-background-color: $toolbar-background-color !default; +$toolbar-ios-border-color: $toolbar-border-color !default; +$toolbar-ios-text-color: $toolbar-text-color !default; +$toolbar-ios-active-color: $toolbar-active-color !default; +$toolbar-ios-inactive-color: $toolbar-inactive-color !default; + + +// iOS List +// -------------------------------------------------- + +$list-ios-text-color: $list-text-color !default; +$list-ios-border-color: $list-border-color !default; +$list-ios-background-color: $list-background-color !default; +$list-ios-activated-background-color: #d9d9d9 !default; // iOS Item // -------------------------------------------------- -$item-ios-border-color: $list-ios-border-color !default; -$item-ios-activated-background-color: #d9d9d9 !default; -$item-ios-font-size: 1.6rem !default; - $item-ios-padding-top: 12px !default; $item-ios-padding-right: 16px !default; $item-ios-padding-bottom: 13px !default; $item-ios-padding-left: 16px !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: 9px !default; diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss index c3ee7214e8..20cc7518a9 100644 --- a/ionic/themes/default.md.scss +++ b/ionic/themes/default.md.scss @@ -14,40 +14,39 @@ $colors-md: ( ) !default; -$text-md-color: $text-color !default; -$link-md-color: map-get($colors-md, primary) !default; -$background-md-color: $background-color !default; -$subdued-text-md-color: $subdued-text-color !default; - -$list-md-text-color: $list-text-color !default; -$list-md-background-color: $list-background-color !default; -$list-md-border-color: $list-border-color !default; +$text-md-color: $text-color !default; +$link-md-color: map-get($colors-md, primary) !default; +$background-md-color: $background-color !default; +$subdued-text-md-color: $subdued-text-color !default; // Material Design Toolbar // -------------------------------------------------- -$toolbar-md-background-color: $toolbar-background-color !default; -$toolbar-md-border-color: $toolbar-border-color !default; -$toolbar-md-text-color: $toolbar-text-color !default; -$toolbar-md-active-color: $toolbar-active-color !default; -$toolbar-md-inactive-color: $toolbar-inactive-color !default; +$toolbar-md-background-color: $toolbar-background-color !default; +$toolbar-md-border-color: $toolbar-border-color !default; +$toolbar-md-text-color: $toolbar-text-color !default; +$toolbar-md-active-color: $toolbar-active-color !default; +$toolbar-md-inactive-color: $toolbar-inactive-color !default; + + +// Material Design List +// -------------------------------------------------- + +$list-md-text-color: $list-text-color !default; +$list-md-border-color: $list-border-color !default; +$list-md-background-color: $list-background-color !default; +$list-md-activated-background-color: #f1f1f1 !default; // Material Design Item // -------------------------------------------------- -$item-md-border-color: $list-md-border-color !default; -$item-md-activated-background-color: #d9d9d9 !default; -$item-md-font-size: 1.6rem !default; - -$item-md-padding-top: 12px !default; -$item-md-padding-right: 16px !default; -$item-md-padding-bottom: 13px !default; -$item-md-padding-left: 16px !default; - -$item-md-padding-media-top: 10px !default; -$item-md-padding-media-bottom: 10px !default; - -$item-md-padding-icon-top: 10px !default; -$item-md-padding-icon-bottom: 9px !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-icon-top: 11px !default; +$item-md-padding-icon-bottom: 10px !default; diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss index d4f3fd9f63..fe5d25b38e 100644 --- a/ionic/themes/default.scss +++ b/ionic/themes/default.scss @@ -18,12 +18,12 @@ $link-color: map-get($colors, primary) !default; $background-color: #fff !default; $subdued-text-color: #666 !default; -$list-text-color: $text-color !default; -$list-background-color: $background-color !default; -$list-border-color: #c8c7cc !default; - $toolbar-background-color: #f8f8f8 !default; $toolbar-border-color: #b2b2b2 !default; $toolbar-text-color: $text-color !default; $toolbar-active-color: $link-color !default; $toolbar-inactive-color: #8c8c8c !default; + +$list-text-color: $text-color !default; +$list-background-color: $background-color !default; +$list-border-color: #c8c7cc !default;