javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(sass): move item variables to individual components

Browse Source
This commit is contained in:
Brandy Carney
2017-12-04 18:09:53 -05:00
parent 75424ba809
commit b6e09192c2
31 changed files with 203 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/checkbox/checkbox.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS Checkbox
// --------------------------------------------------

2
packages/core/src/components/checkbox/checkbox.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Checkbox
// --------------------------------------------------

2
packages/core/src/components/datetime/datetime.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS Datetime
// --------------------------------------------------

2
packages/core/src/components/datetime/datetime.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Datetime
// --------------------------------------------------

20
packages/core/src/components/input/input.ios.scss
View File

@ -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;

54
packages/core/src/components/input/input.ios.vars.scss
View File

@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
$input-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></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;

10
packages/core/src/components/input/input.md.scss
View File

@ -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;

54
packages/core/src/components/input/input.md.vars.scss
View File

@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
$input-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></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;

10
packages/core/src/components/input/test/basic/index.html
View File

@ -17,13 +17,17 @@
<ion-content>
<ion-list>
<ion-item>
<ion-label>Default</ion-label>
<ion-input></ion-input>
<ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
</ion-item>
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
</ion-item>
<ion-item>
<ion-label>Clear Input</ion-label>
<ion-input clear-input></ion-input>
<ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
</ion-item>
<ion-item>

2
packages/core/src/components/item-divider/item-divider.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS Item Divider
// --------------------------------------------------

2
packages/core/src/components/item-divider/item-divider.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Item Divider
// --------------------------------------------------

7
packages/core/src/components/item/item.ios.scss
View File

@ -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
// --------------------------------------------------

24
packages/core/src/components/item/item.ios.vars.scss
View File

@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></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;

5
packages/core/src/components/item/item.md.scss
View File

@ -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
// --------------------------------------------------

24
packages/core/src/components/item/item.md.vars.scss
View File

@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-md-detail-push-color}'/></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;

17
packages/core/src/components/label/label.ios.scss
View File

@ -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;

2
packages/core/src/components/label/label.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS Label
// --------------------------------------------------

6
packages/core/src/components/label/label.md.scss
View File

@ -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
// --------------------------------------------------

2
packages/core/src/components/list-header/list-header.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS List Header
// --------------------------------------------------

2
packages/core/src/components/list-header/list-header.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design List Header
// --------------------------------------------------

2
packages/core/src/components/radio/radio.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS Radio
// --------------------------------------------------

2
packages/core/src/components/radio/radio.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Radio
// --------------------------------------------------

2
packages/core/src/components/select/select.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS Select
// --------------------------------------------------

2
packages/core/src/components/select/select.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Select
// --------------------------------------------------

7
packages/core/src/components/thumbnail/test/basic/index.html
View File

@ -28,6 +28,13 @@
</ion-thumbnail>
<ion-label>Item Thumbnail</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
</ion-thumbnail>
<ion-label>Wide Thumbnail</ion-label>
</ion-item>
</ion-content>
</ion-page>
</ion-app>

2
packages/core/src/components/toggle/toggle.ios.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
@import "../item/item.ios.vars";
// iOS Toggle
// --------------------------------------------------

2
packages/core/src/components/toggle/toggle.md.vars.scss
View File

@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Toggle
// --------------------------------------------------

13
packages/core/src/themes/ionic.theme.dark.ios.scss
View File

@ -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
// --------------------------------------------------

8
packages/core/src/themes/ionic.theme.dark.md.scss
View File

@ -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;

13
packages/core/src/themes/ionic.theme.default.ios.scss
View File

@ -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;

13
packages/core/src/themes/ionic.theme.default.md.scss
View File

@ -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;