From b6e09192c2dd87450ba9c1fd4edd317aa25bbb17 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 4 Dec 2017 18:09:53 -0500 Subject: [PATCH] refactor(sass): move item variables to individual components --- .../checkbox/checkbox.ios.vars.scss | 2 + .../components/checkbox/checkbox.md.vars.scss | 2 + .../datetime/datetime.ios.vars.scss | 2 + .../components/datetime/datetime.md.vars.scss | 2 + .../core/src/components/input/input.ios.scss | 20 ++++--- .../src/components/input/input.ios.vars.scss | 54 ++++++++++++++----- .../core/src/components/input/input.md.scss | 10 ++-- .../src/components/input/input.md.vars.scss | 54 ++++++++++++++----- .../components/input/test/basic/index.html | 10 ++-- .../item-divider/item-divider.ios.vars.scss | 2 + .../item-divider/item-divider.md.vars.scss | 2 + .../core/src/components/item/item.ios.scss | 7 ++- .../src/components/item/item.ios.vars.scss | 24 +++++++++ .../core/src/components/item/item.md.scss | 5 ++ .../src/components/item/item.md.vars.scss | 24 +++++++++ .../core/src/components/label/label.ios.scss | 17 ------ .../src/components/label/label.ios.vars.scss | 2 + .../core/src/components/label/label.md.scss | 6 +-- .../list-header/list-header.ios.vars.scss | 2 + .../list-header/list-header.md.vars.scss | 2 + .../src/components/radio/radio.ios.vars.scss | 2 + .../src/components/radio/radio.md.vars.scss | 2 + .../components/select/select.ios.vars.scss | 2 + .../src/components/select/select.md.vars.scss | 2 + .../thumbnail/test/basic/index.html | 7 +++ .../components/toggle/toggle.ios.vars.scss | 2 + .../src/components/toggle/toggle.md.vars.scss | 2 + .../core/src/themes/ionic.theme.dark.ios.scss | 13 ----- .../core/src/themes/ionic.theme.dark.md.scss | 8 --- .../src/themes/ionic.theme.default.ios.scss | 13 ----- .../src/themes/ionic.theme.default.md.scss | 13 ----- 31 files changed, 203 insertions(+), 112 deletions(-) diff --git a/packages/core/src/components/checkbox/checkbox.ios.vars.scss b/packages/core/src/components/checkbox/checkbox.ios.vars.scss index a85fbaa2a5..61b3b857af 100644 --- a/packages/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/packages/core/src/components/checkbox/checkbox.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS Checkbox // -------------------------------------------------- diff --git a/packages/core/src/components/checkbox/checkbox.md.vars.scss b/packages/core/src/components/checkbox/checkbox.md.vars.scss index 0c3e301156..da794afa30 100644 --- a/packages/core/src/components/checkbox/checkbox.md.vars.scss +++ b/packages/core/src/components/checkbox/checkbox.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design Checkbox // -------------------------------------------------- diff --git a/packages/core/src/components/datetime/datetime.ios.vars.scss b/packages/core/src/components/datetime/datetime.ios.vars.scss index 01f3239e71..dcdb07cfd0 100644 --- a/packages/core/src/components/datetime/datetime.ios.vars.scss +++ b/packages/core/src/components/datetime/datetime.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS Datetime // -------------------------------------------------- diff --git a/packages/core/src/components/datetime/datetime.md.vars.scss b/packages/core/src/components/datetime/datetime.md.vars.scss index 4994b281da..9843de3f1c 100644 --- a/packages/core/src/components/datetime/datetime.md.vars.scss +++ b/packages/core/src/components/datetime/datetime.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design Datetime // -------------------------------------------------- diff --git a/packages/core/src/components/input/input.ios.scss b/packages/core/src/components/input/input.ios.scss index 08aa7eceb4..bbf52152ac 100644 --- a/packages/core/src/components/input/input.ios.scss +++ b/packages/core/src/components/input/input.ios.scss @@ -16,8 +16,8 @@ // -------------------------------------------------- .input-ios .inset-input { - @include padding(($item-ios-padding-top / 2), ($item-ios-padding-end / 2), ($item-ios-padding-bottom / 2), ($item-ios-padding-start / 2)); - @include margin(($item-ios-padding-top / 2), $item-ios-padding-end, ($item-ios-padding-bottom / 2), 0); + @include padding($input-ios-inset-padding-top, $input-ios-inset-padding-end, $input-ios-inset-padding-bottom, $input-ios-inset-padding-start); + @include margin($input-ios-inset-margin-top, $input-ios-inset-margin-end, $input-ios-inset-margin-bottom, $input-ios-inset-margin-start); } @@ -102,20 +102,28 @@ @include padding(8px, null, 8px, 0); } +// iOS Input After Label +// -------------------------------------------------- + +.label-ios + ion-input .text-input, +.label-ios + ion-textarea .text-input, +.label-ios + .input + .cloned-input { + @include margin-horizontal($item-ios-padding-start, null); +} // iOS Clear Input Icon // -------------------------------------------------- -.input-ios[clearInput] { +.input-ios[clear-input] { position: relative; } -.input-ios[clearInput] .text-input { - @include padding-horizontal(null, $input-ios-input-clear-icon-width); +.input-ios[clear-input] .text-input { + @include padding-horizontal(null, ($input-ios-input-clear-icon-width + $item-ios-padding-end)); } .input-ios .text-input-clear-icon { - @include position-horizontal(null, ($item-ios-padding-end / 2)); + @include position-horizontal(null, 0); @include svg-background-image($input-ios-input-clear-icon-svg); width: $input-ios-input-clear-icon-width; diff --git a/packages/core/src/components/input/input.ios.vars.scss b/packages/core/src/components/input/input.ios.vars.scss index 20e7f0cb62..90f61a2f7c 100644 --- a/packages/core/src/components/input/input.ios.vars.scss +++ b/packages/core/src/components/input/input.ios.vars.scss @@ -1,46 +1,72 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS Input // -------------------------------------------------- /// @prop - Margin top of the input -$input-ios-margin-top: $item-ios-padding-top !default; +$input-ios-margin-top: $item-ios-padding-top !default; /// @prop - Margin end of the input -$input-ios-margin-end: ($item-ios-padding-end / 2) !default; +$input-ios-margin-end: ($item-ios-padding-end / 2) !default; /// @prop - Margin bottom of the input -$input-ios-margin-bottom: $item-ios-padding-bottom !default; +$input-ios-margin-bottom: $item-ios-padding-bottom !default; /// @prop - Margin start of the input -$input-ios-margin-start: 0 !default; +$input-ios-margin-start: 0 !default; + +/// @prop - Padding top of the inset input +$input-ios-inset-padding-top: ($item-ios-padding-top / 2) !default; + +/// @prop - Padding end of the inset input +$input-ios-inset-padding-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Padding bottom of the inset input +$input-ios-inset-padding-bottom: ($item-ios-padding-bottom / 2) !default; + +/// @prop - Padding start of the inset input +$input-ios-inset-padding-start: ($item-ios-padding-start / 2) !default; + +/// @prop - Margin top of the inset input +$input-ios-inset-margin-top: ($item-ios-padding-top / 2) !default; + +/// @prop - Margin end of the inset input +$input-ios-inset-margin-end: $item-ios-padding-end !default; + +/// @prop - Margin bottom of the inset input +$input-ios-inset-margin-bottom: ($item-ios-padding-bottom / 2) !default; + +/// @prop - Margin start of the inset input +$input-ios-inset-margin-start: 0 !default; /// @prop - Width of the icon used to clear the input -$input-ios-input-clear-icon-width: 30px !default; +$input-ios-input-clear-icon-width: 30px !default; /// @prop - Color of the icon used to clear the input -$input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default; +$input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default; /// @prop - Icon used to clear the input -$input-ios-input-clear-icon-svg: "" !default; +$input-ios-input-clear-icon-svg: "" !default; /// @prop - Size of the icon used to clear the input -$input-ios-input-clear-icon-size: 18px !default; +$input-ios-input-clear-icon-size: 18px !default; /// @prop - Show the focus highlight when the input has focus -$input-ios-show-focus-highlight: false !default; +$input-ios-show-focus-highlight: false !default; /// @prop - Show the valid highlight when it is valid and has a value -$input-ios-show-valid-highlight: $input-ios-show-focus-highlight !default; +$input-ios-show-valid-highlight: $input-ios-show-focus-highlight !default; /// @prop - Show the invalid highlight when it is invalid and has value -$input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default; +$input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default; /// @prop - Color of the input highlight -$input-ios-highlight-color: color($colors-ios, primary) !default; +$input-ios-highlight-color: color($colors-ios, primary) !default; /// @prop - Color of the input highlight when valid -$input-ios-highlight-color-valid: $input-highlight-color-valid !default; +$input-ios-highlight-color-valid: $input-highlight-color-valid !default; /// @prop - Color of the input highlight when invalid -$input-ios-highlight-color-invalid: $input-highlight-color-invalid !default; +$input-ios-highlight-color-invalid: $input-highlight-color-invalid !default; diff --git a/packages/core/src/components/input/input.md.scss b/packages/core/src/components/input/input.md.scss index 94f800746f..717a9f9c69 100644 --- a/packages/core/src/components/input/input.md.scss +++ b/packages/core/src/components/input/input.md.scss @@ -16,8 +16,8 @@ // -------------------------------------------------- .input-md .inset-input { - @include padding(($item-md-padding-top / 2), ($item-md-padding-end / 2), ($item-md-padding-bottom / 2), ($item-md-padding-start / 2)); - @include margin(($item-md-padding-top / 2), $item-md-padding-end, ($item-md-padding-bottom / 2), $item-md-padding-start); + @include padding($input-md-inset-padding-top, $input-md-inset-padding-end, $input-md-inset-padding-bottom, $input-md-inset-padding-start); + @include margin($input-md-inset-margin-top, $input-md-inset-margin-end, $input-md-inset-margin-bottom, $input-md-inset-margin-start); } @@ -102,16 +102,16 @@ // Material Design Clear Input Icon // -------------------------------------------------- -.input-md[clearInput] { +.input-md[clear-input] { position: relative; } -.input-md[clearInput] .text-input { +.input-md[clear-input] .text-input { @include padding-horizontal(null, $input-md-input-clear-icon-width); } .input-md .text-input-clear-icon { - @include position-horizontal(null, ($item-md-padding-end / 2)); + @include position-horizontal(null, 0); @include svg-background-image($input-md-input-clear-icon-svg); width: $input-md-input-clear-icon-width; diff --git a/packages/core/src/components/input/input.md.vars.scss b/packages/core/src/components/input/input.md.vars.scss index 412e88e767..1a85f10255 100644 --- a/packages/core/src/components/input/input.md.vars.scss +++ b/packages/core/src/components/input/input.md.vars.scss @@ -1,46 +1,72 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design Input // -------------------------------------------------- /// @prop - Margin top of the input -$input-md-margin-top: $item-md-padding-top !default; +$input-md-margin-top: $item-md-padding-top !default; /// @prop - Margin end of the input -$input-md-margin-end: ($item-md-padding-end / 2) !default; +$input-md-margin-end: ($item-md-padding-end / 2) !default; /// @prop - Margin bottom of the input -$input-md-margin-bottom: $item-md-padding-bottom !default; +$input-md-margin-bottom: $item-md-padding-bottom !default; /// @prop - Margin start of the input -$input-md-margin-start: ($item-md-padding-start / 2) !default; +$input-md-margin-start: ($item-md-padding-start / 2) !default; /// @prop - Width of the icon used to clear the input -$input-md-input-clear-icon-width: 30px !default; +$input-md-input-clear-icon-width: 30px !default; /// @prop - Color of the icon used to clear the input -$input-md-input-clear-icon-color: #5b5b5b !default; +$input-md-input-clear-icon-color: #5b5b5b !default; /// @prop - Icon used to clear the input -$input-md-input-clear-icon-svg: "" !default; +$input-md-input-clear-icon-svg: "" !default; /// @prop - Size of the icon used to clear the input -$input-md-input-clear-icon-size: 22px !default; +$input-md-input-clear-icon-size: 22px !default; /// @prop - Show the focus highlight when the input has focus -$input-md-show-focus-highlight: true !default; +$input-md-show-focus-highlight: true !default; /// @prop - Show the valid highlight when it is valid and has a value -$input-md-show-valid-highlight: $input-md-show-focus-highlight !default; +$input-md-show-valid-highlight: $input-md-show-focus-highlight !default; /// @prop - Show the invalid highlight when it is invalid and has value -$input-md-show-invalid-highlight: $input-md-show-focus-highlight !default; +$input-md-show-invalid-highlight: $input-md-show-focus-highlight !default; /// @prop - Color of the input highlight -$input-md-highlight-color: color($colors-md, primary) !default; +$input-md-highlight-color: color($colors-md, primary) !default; /// @prop - Color of the input highlight when valid -$input-md-highlight-color-valid: $input-highlight-color-valid !default; +$input-md-highlight-color-valid: $input-highlight-color-valid !default; /// @prop - Color of the input highlight when invalid -$input-md-highlight-color-invalid: $input-highlight-color-invalid !default; +$input-md-highlight-color-invalid: $input-highlight-color-invalid !default; + +/// @prop - Padding top of the inset input +$input-md-inset-padding-top: ($item-md-padding-top / 2) !default; + +/// @prop - Padding end of the inset input +$input-md-inset-padding-end: ($item-md-padding-end / 2) !default; + +/// @prop - Padding bottom of the inset input +$input-md-inset-padding-bottom: ($item-md-padding-bottom / 2) !default; + +/// @prop - Padding start of the inset input +$input-md-inset-padding-start: ($item-md-padding-start / 2) !default; + +/// @prop - Margin top of the inset input +$input-md-inset-margin-top: ($item-md-padding-top / 2) !default; + +/// @prop - Margin end of the inset input +$input-md-inset-margin-end: $item-md-padding-end !default; + +/// @prop - Margin bottom of the inset input +$input-md-inset-margin-bottom: ($item-md-padding-bottom / 2) !default; + +/// @prop - Margin start of the inset input +$input-md-inset-margin-start: $item-md-padding-start !default; diff --git a/packages/core/src/components/input/test/basic/index.html b/packages/core/src/components/input/test/basic/index.html index df22e6d747..837799a70c 100644 --- a/packages/core/src/components/input/test/basic/index.html +++ b/packages/core/src/components/input/test/basic/index.html @@ -17,13 +17,17 @@ - Default - + + + + + Default Label + Clear Input - + diff --git a/packages/core/src/components/item-divider/item-divider.ios.vars.scss b/packages/core/src/components/item-divider/item-divider.ios.vars.scss index 204b5c0623..f34889c3aa 100644 --- a/packages/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/packages/core/src/components/item-divider/item-divider.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS Item Divider // -------------------------------------------------- diff --git a/packages/core/src/components/item-divider/item-divider.md.vars.scss b/packages/core/src/components/item-divider/item-divider.md.vars.scss index 7a1eb89e73..bb67a4c031 100644 --- a/packages/core/src/components/item-divider/item-divider.md.vars.scss +++ b/packages/core/src/components/item-divider/item-divider.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design Item Divider // -------------------------------------------------- diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss index 2dbdea3c77..54b67fbafb 100644 --- a/packages/core/src/components/item/item.ios.scss +++ b/packages/core/src/components/item/item.ios.scss @@ -92,7 +92,6 @@ .item-ios ion-icon[slot="start"], .item-ios ion-icon[slot="end"] { @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0); - } .item-ios .item-button { @@ -117,6 +116,11 @@ @include margin(($item-ios-padding-end / 2)); } +.item-ios.item-label-stacked [slot="end"], +.item-ios.item-label-floating [slot="end"] { + @include margin($item-ios-padding-media-top - 2, null, $item-ios-padding-media-bottom - 2, null); +} + // iOS Item Avatar // -------------------------------------------------- @@ -126,6 +130,7 @@ height: $item-ios-avatar-height; } + // iOS Item Thumbnail // -------------------------------------------------- diff --git a/packages/core/src/components/item/item.ios.vars.scss b/packages/core/src/components/item/item.ios.vars.scss index 46060a068e..13477679d3 100644 --- a/packages/core/src/components/item/item.ios.vars.scss +++ b/packages/core/src/components/item/item.ios.vars.scss @@ -44,3 +44,27 @@ $item-ios-detail-push-color: $list-ios-border-color !default; /// @prop - Icon for the detail arrow $item-ios-detail-push-svg: "" !default; + +/// @prop - Padding top for the item content +$item-ios-padding-top: 11px !default; + +/// @prop - Padding end for the item content +$item-ios-padding-end: 16px !default; + +/// @prop - Padding bottom for the item content +$item-ios-padding-bottom: 11px !default; + +/// @prop - Padding start for the item content +$item-ios-padding-start: 16px !default; + +/// @prop - Padding top for the media content +$item-ios-padding-media-top: 8px !default; + +/// @prop - Padding bottom for the media content +$item-ios-padding-media-bottom: 8px !default; + +/// @prop - Padding top for the icon in an item +$item-ios-padding-icon-top: 9px !default; + +/// @prop - Padding bottom for the icon in an item +$item-ios-padding-icon-bottom: 8px !default; diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss index 93fe21b012..46e09f35ab 100644 --- a/packages/core/src/components/item/item.md.scss +++ b/packages/core/src/components/item/item.md.scss @@ -128,6 +128,11 @@ @include margin(($item-md-padding-end / 2)); } +.item-md.item-label-stacked [slot="end"], +.item-md.item-label-floating [slot="end"] { + @include margin($item-md-padding-media-top - 2, null, $item-md-padding-media-bottom - 2, null); +} + // Material Design Item Avatar // -------------------------------------------------- diff --git a/packages/core/src/components/item/item.md.vars.scss b/packages/core/src/components/item/item.md.vars.scss index 538808fc30..b60e77ccb0 100644 --- a/packages/core/src/components/item/item.md.vars.scss +++ b/packages/core/src/components/item/item.md.vars.scss @@ -35,3 +35,27 @@ $item-md-detail-push-color: $list-md-border-color !default; /// @prop - Icon for the detail arrow $item-md-detail-push-svg: "" !default; + +/// @prop - Padding top for the item content +$item-md-padding-top: 13px !default; + +/// @prop - Padding end for the item content +$item-md-padding-end: 16px !default; + +/// @prop - Padding bottom for the item content +$item-md-padding-bottom: 13px !default; + +/// @prop - Padding start for the item content +$item-md-padding-start: 16px !default; + +/// @prop - Padding top for the media content +$item-md-padding-media-top: 9px !default; + +/// @prop - Padding bottom for the media content +$item-md-padding-media-bottom: 9px !default; + +/// @prop - Padding top for the icon in an item +$item-md-padding-icon-top: 11px !default; + +/// @prop - Padding bottom for the icon in an item +$item-md-padding-icon-bottom: 10px !default; diff --git a/packages/core/src/components/label/label.ios.scss b/packages/core/src/components/label/label.ios.scss index d1ea478a97..36ec349da4 100644 --- a/packages/core/src/components/label/label.ios.scss +++ b/packages/core/src/components/label/label.ios.scss @@ -19,18 +19,6 @@ } -// iOS Input By Label -// -------------------------------------------------- - -.label-ios + ion-input .text-input, -.label-ios + ion-textarea .text-input, -.label-ios + .input + .cloned-input { - @include margin-horizontal($item-ios-padding-start, null); - - width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start}); -} - - // iOS Stacked & Floating Labels // -------------------------------------------------- @@ -53,11 +41,6 @@ @include transform(translate3d(0, 0, 0), scale(.8)); } -.item-ios.item-label-stacked [slot="end"], -.item-ios.item-label-floating [slot="end"] { - @include margin($item-ios-padding-media-top - 2, null, $item-ios-padding-media-bottom - 2, null); -} - .item-input-has-focus .label-ios[stacked], .item-input-has-focus .label-ios[floating] { color: $label-ios-text-color-focused; diff --git a/packages/core/src/components/label/label.ios.vars.scss b/packages/core/src/components/label/label.ios.vars.scss index 2cfb0acf30..511a2af314 100644 --- a/packages/core/src/components/label/label.ios.vars.scss +++ b/packages/core/src/components/label/label.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS Label // -------------------------------------------------- diff --git a/packages/core/src/components/label/label.md.scss b/packages/core/src/components/label/label.md.scss index be88853350..93c1a2256d 100644 --- a/packages/core/src/components/label/label.md.scss +++ b/packages/core/src/components/label/label.md.scss @@ -13,6 +13,7 @@ line-height: $label-md-text-wrap-line-height; } + // Material Design Default Label Inside An Input/Select Item // -------------------------------------------------- @@ -52,11 +53,6 @@ @include transform(translate3d(0, 0, 0), scale(.8)); } -.item-md.item-label-stacked [slot="end"], -.item-md.item-label-floating [slot="end"] { - @include margin($item-md-padding-media-top - 2, null, $item-md-padding-media-bottom - 2, null); -} - // Generate Material Design Label colors // -------------------------------------------------- diff --git a/packages/core/src/components/list-header/list-header.ios.vars.scss b/packages/core/src/components/list-header/list-header.ios.vars.scss index 9c07a397bd..5b86a891dc 100644 --- a/packages/core/src/components/list-header/list-header.ios.vars.scss +++ b/packages/core/src/components/list-header/list-header.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS List Header // -------------------------------------------------- diff --git a/packages/core/src/components/list-header/list-header.md.vars.scss b/packages/core/src/components/list-header/list-header.md.vars.scss index 9a47ef5424..a97a4bccd3 100644 --- a/packages/core/src/components/list-header/list-header.md.vars.scss +++ b/packages/core/src/components/list-header/list-header.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design List Header // -------------------------------------------------- diff --git a/packages/core/src/components/radio/radio.ios.vars.scss b/packages/core/src/components/radio/radio.ios.vars.scss index 0273c637c7..53b74b9f2d 100644 --- a/packages/core/src/components/radio/radio.ios.vars.scss +++ b/packages/core/src/components/radio/radio.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS Radio // -------------------------------------------------- diff --git a/packages/core/src/components/radio/radio.md.vars.scss b/packages/core/src/components/radio/radio.md.vars.scss index 08b25081f0..d5ec8245e5 100644 --- a/packages/core/src/components/radio/radio.md.vars.scss +++ b/packages/core/src/components/radio/radio.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design Radio // -------------------------------------------------- diff --git a/packages/core/src/components/select/select.ios.vars.scss b/packages/core/src/components/select/select.ios.vars.scss index 9cc7f69fee..e7090cee20 100644 --- a/packages/core/src/components/select/select.ios.vars.scss +++ b/packages/core/src/components/select/select.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS Select // -------------------------------------------------- diff --git a/packages/core/src/components/select/select.md.vars.scss b/packages/core/src/components/select/select.md.vars.scss index 55f403e676..ef11e9a789 100644 --- a/packages/core/src/components/select/select.md.vars.scss +++ b/packages/core/src/components/select/select.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design Select // -------------------------------------------------- diff --git a/packages/core/src/components/thumbnail/test/basic/index.html b/packages/core/src/components/thumbnail/test/basic/index.html index d740c61621..e34f0fb37b 100644 --- a/packages/core/src/components/thumbnail/test/basic/index.html +++ b/packages/core/src/components/thumbnail/test/basic/index.html @@ -28,6 +28,13 @@ Item Thumbnail + + + + + + Wide Thumbnail + diff --git a/packages/core/src/components/toggle/toggle.ios.vars.scss b/packages/core/src/components/toggle/toggle.ios.vars.scss index 4d70381789..071e7e96fe 100644 --- a/packages/core/src/components/toggle/toggle.ios.vars.scss +++ b/packages/core/src/components/toggle/toggle.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.ios.vars"; + // iOS Toggle // -------------------------------------------------- diff --git a/packages/core/src/components/toggle/toggle.md.vars.scss b/packages/core/src/components/toggle/toggle.md.vars.scss index b4e9fae42b..67f3aad494 100644 --- a/packages/core/src/components/toggle/toggle.md.vars.scss +++ b/packages/core/src/components/toggle/toggle.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design Toggle // -------------------------------------------------- diff --git a/packages/core/src/themes/ionic.theme.dark.ios.scss b/packages/core/src/themes/ionic.theme.dark.ios.scss index de931a9386..59913d204c 100644 --- a/packages/core/src/themes/ionic.theme.dark.ios.scss +++ b/packages/core/src/themes/ionic.theme.dark.ios.scss @@ -54,19 +54,6 @@ $item-ios-divider-background: #151515 !default; $item-ios-divider-color: $text-color !default; -// iOS Item -// -------------------------------------------------- - -$item-ios-padding-top: 11px !default; -$item-ios-padding-end: 16px !default; -$item-ios-padding-bottom: 11px !default; -$item-ios-padding-start: 16px !default; -$item-ios-padding-media-top: 10px !default; -$item-ios-padding-media-bottom: 10px !default; -$item-ios-padding-icon-top: 9px !default; -$item-ios-padding-icon-bottom: 8px !default; - - // iOS Toggle // -------------------------------------------------- diff --git a/packages/core/src/themes/ionic.theme.dark.md.scss b/packages/core/src/themes/ionic.theme.dark.md.scss index ea16860221..56cfc54ff0 100644 --- a/packages/core/src/themes/ionic.theme.dark.md.scss +++ b/packages/core/src/themes/ionic.theme.dark.md.scss @@ -53,14 +53,6 @@ $list-md-activated-background-color: #d9d9d9 !default; // Material Design Item // -------------------------------------------------- -$item-md-padding-top: 13px !default; -$item-md-padding-end: 16px !default; -$item-md-padding-bottom: 13px !default; -$item-md-padding-start: 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-divider-background: #151515 !default; $item-md-divider-color: #f4f4f4 !default; diff --git a/packages/core/src/themes/ionic.theme.default.ios.scss b/packages/core/src/themes/ionic.theme.default.ios.scss index e5a734d467..23ae30f0a9 100644 --- a/packages/core/src/themes/ionic.theme.default.ios.scss +++ b/packages/core/src/themes/ionic.theme.default.ios.scss @@ -46,16 +46,3 @@ $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-padding-top: 11px !default; -$item-ios-padding-end: 16px !default; -$item-ios-padding-bottom: 11px !default; -$item-ios-padding-start: 16px !default; -$item-ios-padding-media-top: 8px !default; -$item-ios-padding-media-bottom: 8px !default; -$item-ios-padding-icon-top: 9px !default; -$item-ios-padding-icon-bottom: 8px !default; diff --git a/packages/core/src/themes/ionic.theme.default.md.scss b/packages/core/src/themes/ionic.theme.default.md.scss index 91db8fea3b..f502d0097b 100644 --- a/packages/core/src/themes/ionic.theme.default.md.scss +++ b/packages/core/src/themes/ionic.theme.default.md.scss @@ -46,16 +46,3 @@ $list-md-text-color: $list-text-color !default; $list-md-border-color: #dedede !default; $list-md-background-color: $list-background-color !default; $list-md-activated-background-color: #f1f1f1 !default; - - -// Material Design Item -// -------------------------------------------------- - -$item-md-padding-top: 13px !default; -$item-md-padding-end: 16px !default; -$item-md-padding-bottom: 13px !default; -$item-md-padding-start: 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;