diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index d5c25cf2394..7f8038edef8 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1,10 +1,25 @@
@charset "UTF-8";
/**
- * Mixins
+ * Button Mixins
* --------------------------------------------------
- * Useful utilities and mixins for SCSS files.
*/
-/*
+/**
+ * Bar Mixins
+ * --------------------------------------------------
+ */
+/**
+ * Tab Mixins
+ * --------------------------------------------------
+ */
+/**
+ * Item Mixins
+ * --------------------------------------------------
+ */
+/**
+ * Utility Mixins
+ * --------------------------------------------------
+ */
+/*!
Ionicons, v1.3.3
Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
https://twitter.com/helloimben https://twitter.com/ionicframework
@@ -2046,7 +2061,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
- border: 1px solid silver; }
+ border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@@ -3180,6 +3195,9 @@ a.subdued {
* --------------------------------------------------
*/
.item {
+ color: #444444;
+ background-color: white;
+ border-color: #dddddd;
position: relative;
z-index: 2;
display: block;
@@ -3187,11 +3205,15 @@ a.subdued {
padding: 15px;
border-width: 1px;
border-style: solid;
- border-color: #dddddd;
- background-color: white;
font-size: 16px;
- color: #666666;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+ .item.active, .item:active {
+ background-color: activeBgColor;
+ border-color: #cccccc; }
+ .item.active .item-content, .item:active .item-content {
+ background-color: #fafafa;
+ border-color: #cccccc;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item h2 {
margin: 0 0 4px 0;
font-size: 16px; }
@@ -3219,81 +3241,107 @@ a.subdued {
float: right; }
.item .badge + .badge {
margin-right: 5px; }
- .item.active, .item.active:hover, .item.active:focus {
- z-index: 2; }
- .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
- color: inherit; }
- .item.active {
+ .item.active, .item:active {
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-light {
color: #444444;
background-color: white;
- border-color: #444444; }
- .item.active .item-content {
- background-color: white;
- color: #444444; }
-
-.item-light.active {
- color: white;
- background-color: white;
- border-color: #444444; }
- .item-light.active .item-content {
- background-color: white;
- color: white; }
-
-.item-stable.active {
- color: white;
- background-color: #f8f8f8;
- border-color: #444444; }
- .item-stable.active .item-content {
+ border-color: #dddddd; }
+ .item.item-light.active, .item.item-light:active {
+ background-color: activeBgColor;
+ border-color: #cccccc; }
+ .item.item-light.active .item-content, .item.item-light:active .item-content {
+ background-color: #fafafa;
+ border-color: #cccccc;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-stable {
+ color: #444444;
background-color: #f8f8f8;
- color: white; }
-
-.item-positive.active {
- color: white;
- background-color: #4a87ee;
- border-color: #444444; }
- .item-positive.active .item-content {
+ border-color: #b2b2b2; }
+ .item.item-stable.active, .item.item-stable:active {
+ background-color: activeBgColor;
+ border-color: #a2a2a2; }
+ .item.item-stable.active .item-content, .item.item-stable:active .item-content {
+ background-color: #e5e5e5;
+ border-color: #a2a2a2;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-positive {
+ color: white;
background-color: #4a87ee;
- color: white; }
-
-.item-calm.active {
- color: white;
- background-color: #43cee6;
- border-color: #444444; }
- .item-calm.active .item-content {
+ border-color: #145dd7; }
+ .item.item-positive.active, .item.item-positive:active {
+ background-color: activeBgColor;
+ border-color: #145dd7; }
+ .item.item-positive.active .item-content, .item.item-positive:active .item-content {
+ background-color: #145dd7;
+ border-color: #145dd7;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-calm {
+ color: white;
background-color: #43cee6;
- color: white; }
-
-.item-balanced.active {
- color: white;
- background-color: #66cc33;
- border-color: #444444; }
- .item-balanced.active .item-content {
+ border-color: #1aaac3; }
+ .item.item-calm.active, .item.item-calm:active {
+ background-color: activeBgColor;
+ border-color: #1aaac3; }
+ .item.item-calm.active .item-content, .item.item-calm:active .item-content {
+ background-color: #1aaac3;
+ border-color: #1aaac3;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-assertive {
+ color: white;
+ background-color: #ef4e3a;
+ border-color: #cc2511; }
+ .item.item-assertive.active, .item.item-assertive:active {
+ background-color: activeBgColor;
+ border-color: #cc2511; }
+ .item.item-assertive.active .item-content, .item.item-assertive:active .item-content {
+ background-color: #cc2511;
+ border-color: #cc2511;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-balanced {
+ color: white;
background-color: #66cc33;
- color: white; }
-
-.item-energized.active {
- color: white;
- background-color: #f0b840;
- border-color: #444444; }
- .item-energized.active .item-content {
+ border-color: #478f24; }
+ .item.item-balanced.active, .item.item-balanced:active {
+ background-color: activeBgColor;
+ border-color: #478f24; }
+ .item.item-balanced.active .item-content, .item.item-balanced:active .item-content {
+ background-color: #478f24;
+ border-color: #478f24;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-energized {
+ color: white;
background-color: #f0b840;
- color: white; }
-
-.item-royal.active {
- color: white;
- background-color: #8a6de9;
- border-color: #444444; }
- .item-royal.active .item-content {
+ border-color: #d39511; }
+ .item.item-energized.active, .item.item-energized:active {
+ background-color: activeBgColor;
+ border-color: #d39511; }
+ .item.item-energized.active .item-content, .item.item-energized:active .item-content {
+ background-color: #d39511;
+ border-color: #d39511;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-royal {
+ color: white;
background-color: #8a6de9;
- color: white; }
-
-.item-dark.active {
- color: white;
- background-color: #444444;
- border-color: #444444; }
- .item-dark.active .item-content {
+ border-color: #552bdf; }
+ .item.item-royal.active, .item.item-royal:active {
+ background-color: activeBgColor;
+ border-color: #552bdf; }
+ .item.item-royal.active .item-content, .item.item-royal:active .item-content {
+ background-color: #552bdf;
+ border-color: #552bdf;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
+ .item.item-dark {
+ color: white;
background-color: #444444;
- color: white; }
+ border-color: #111111; }
+ .item.item-dark.active, .item.item-dark:active {
+ background-color: activeBgColor;
+ border-color: black; }
+ .item.item-dark.active .item-content, .item.item-dark:active .item-content {
+ background-color: #262626;
+ border-color: black;
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item,
.item h1,
@@ -3316,6 +3364,7 @@ a.subdued {
white-space: nowrap; }
a.item {
+ color: inherit;
text-decoration: none; }
a.item:hover, a.item:focus {
text-decoration: none; }
@@ -3345,7 +3394,6 @@ button.item.item-complex {
z-index: 2;
padding: 15px 40px 15px 15px;
border: none;
- background-color: white;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.item-text-wrap,
@@ -4100,7 +4148,7 @@ input[type="file"] {
line-height: 34px; }
select {
- border: 1px solid #cccccc;
+ border: 1px solid #ccc;
background-color: white; }
select[multiple],
@@ -4159,7 +4207,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%;
background: white;
content: ' ';
- transition: background-color 0.1s ease-in-out; }
+ transition: background-color .1s ease-in-out; }
/* the checkmark within the box */
.checkbox input:after {
@@ -4174,7 +4222,7 @@ input[type="checkbox"][readonly] {
border-right: 0;
content: ' ';
opacity: 0;
- transition: opacity 0.05s ease-in-out;
+ transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
@@ -4647,7 +4695,7 @@ input[type="range"] {
.button-icon:active, .button-icon.active {
background: none;
box-shadow: none;
- text-shadow: 0px 0px 10px white; }
+ text-shadow: 0px 0px 10px #fff; }
.padding > .button.block:first-child {
margin-top: 0; }
@@ -5158,7 +5206,7 @@ a.button {
* notice we purposely do not use words like "red" or "blue", but
* instead have colors which represent an emotion or generic theme.
*/
-.light {
+.light, a.light {
color: white; }
.light-bg {
@@ -5167,7 +5215,7 @@ a.button {
.light-border {
border-color: #dddddd; }
-.stable {
+.stable, a.stable {
color: #f8f8f8; }
.stable-bg {
@@ -5176,7 +5224,7 @@ a.button {
.stable-border {
border-color: #b2b2b2; }
-.positive {
+.positive, a.positive {
color: #4a87ee; }
.positive-bg {
@@ -5185,7 +5233,7 @@ a.button {
.positive-border {
border-color: #145dd7; }
-.calm {
+.calm, a.calm {
color: #43cee6; }
.calm-bg {
@@ -5194,7 +5242,7 @@ a.button {
.calm-border {
border-color: #1aaac3; }
-.assertive {
+.assertive, a.assertive {
color: #ef4e3a; }
.assertive-bg {
@@ -5203,7 +5251,7 @@ a.button {
.assertive-border {
border-color: #cc2511; }
-.balanced {
+.balanced, a.balanced {
color: #66cc33; }
.balanced-bg {
@@ -5212,7 +5260,7 @@ a.button {
.balanced-border {
border-color: #478f24; }
-.energized {
+.energized, a.energized {
color: #f0b840; }
.energized-bg {
@@ -5221,7 +5269,7 @@ a.button {
.energized-border {
border-color: #d39511; }
-.royal {
+.royal, a.royal {
color: #8a6de9; }
.royal-bg {
@@ -5230,7 +5278,7 @@ a.button {
.royal-border {
border-color: #552bdf; }
-.dark {
+.dark, a.dark {
color: #444444; }
.dark-bg {
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index e027d9919aa..41d2ed40e2f 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,8 +1,22 @@
-@charset "UTF-8";
/**
- * Mixins
+ * Button Mixins
+ * --------------------------------------------------
+ */
+/**
+ * Bar Mixins
+ * --------------------------------------------------
+ */
+/**
+ * Tab Mixins
+ * --------------------------------------------------
+ */
+/**
+ * Item Mixins
+ * --------------------------------------------------
+ */
+/**
+ * Utility Mixins
* --------------------------------------------------
- * Useful utilities and mixins for SCSS files.
*/
/**
* Nav controllers and header bar animations
@@ -124,7 +138,7 @@
right: 20px;
transition: 0.2s ease;
transition-property: left, right;
- transition-delay: 0s, 0.05s; }
+ transition-delay: 0s, .05s; }
.toggle :checked + .track {
/* When the toggle is "on" */
@@ -139,4 +153,4 @@
right: 0;
left: 20px;
-webkit-transform: none;
- transition-delay: 0.05s, 0s; }
+ transition-delay: .05s, 0s; }
diff --git a/scss/_form.scss b/scss/_form.scss
index 55ea3ca5c48..2bd16fb3925 100644
--- a/scss/_form.scss
+++ b/scss/_form.scss
@@ -104,7 +104,7 @@ textarea {
padding: 4px 8px 3px;
border: none;
background-color: $input-bg;
- box-shadow: inset 0 0 $item-border-width $item-border-color;
+ box-shadow: inset 0 0 $item-border-width $item-default-border;
}
.item-stacked-label input {
height: $line-height-computed + $font-size-base + 12px;
diff --git a/scss/_items.scss b/scss/_items.scss
index 2715b13388c..738955c1b12 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -5,6 +5,8 @@
*/
.item {
+ @include item-style($item-default-bg, $item-default-border, $item-default-text, $item-default-active-bg, $item-default-active-border);
+
position: relative;
z-index: 2; // Make sure the borders and stuff don't get hidden by children
@@ -14,12 +16,8 @@
padding: $item-padding;
border-width: $item-border-width;
- border-style: $item-border-style;
- border-color: $item-border-color;
- background-color: $list-bg;
- font-size: $list-font-size;
-
- color: $light-color;
+ border-style: solid;
+ font-size: $item-font-size;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
@@ -62,31 +60,42 @@
margin-right: 5px;
}
- // Active class on item itself, not parent
&.active,
- &.active:hover,
- &.active:focus {
- z-index: 2;
+ &:active {
+ box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
+ }
- // Force color to inherit for custom content
- .item-heading {
- color: inherit;
- }
+ // Different themes for list items
+ &.item-light {
+ @include item-style($item-light-bg, $item-light-border, $item-light-text, $item-light-active-bg, $item-light-active-border);
+ }
+ &.item-stable {
+ @include item-style($item-stable-bg, $item-stable-border, $item-stable-text, $item-stable-active-bg, $item-stable-active-border);
+ }
+ &.item-positive {
+ @include item-style($item-positive-bg, $item-positive-border, $item-positive-text, $item-positive-active-bg, $item-positive-active-border);
+ }
+ &.item-calm {
+ @include item-style($item-calm-bg, $item-calm-border, $item-calm-text, $item-calm-active-bg, $item-calm-active-border);
+ }
+ &.item-assertive {
+ @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text, $item-assertive-active-bg, $item-assertive-active-border);
+ }
+ &.item-balanced {
+ @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text, $item-balanced-active-bg, $item-balanced-active-border);
+ }
+ &.item-energized {
+ @include item-style($item-energized-bg, $item-energized-border, $item-energized-text, $item-energized-active-bg, $item-energized-active-border);
+ }
+ &.item-royal {
+ @include item-style($item-royal-bg, $item-royal-border, $item-royal-text, $item-royal-active-bg, $item-royal-active-border);
+ }
+ &.item-dark {
+ @include item-style($item-dark-bg, $item-dark-border, $item-dark-text, $item-dark-active-bg, $item-dark-active-border);
}
- @include item-style-active($light, $dark, $dark);
}
-// Different themes for list items
-.item-light { @include item-style-active($light, $dark, #fff); }
-.item-stable { @include item-style-active($stable, $dark, #fff); }
-.item-positive { @include item-style-active($positive, $dark, #fff); }
-.item-calm { @include item-style-active($calm, $dark, #fff); }
-.item-balanced { @include item-style-active($balanced, $dark, #fff); }
-.item-energized { @include item-style-active($energized, $dark, #fff); }
-.item-royal { @include item-style-active($royal, $dark, #fff); }
-.item-dark { @include item-style-active($dark, $dark, #fff); }
-
// Handle text overflow
.item,
.item h1,
@@ -111,6 +120,7 @@
// Linked list items
a.item {
+ color: inherit;
text-decoration: none;
&:hover,
@@ -148,7 +158,6 @@ button.item.item-complex {
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
border: none;
- background-color: $list-bg;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
}
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 417627be902..2ee540b5a6c 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -1,25 +1,24 @@
/**
- * Mixins
+ * Button Mixins
* --------------------------------------------------
- * Useful utilities and mixins for SCSS files.
*/
@mixin button-style($bgColor, $borderColor, $activeBgColor, $activeBorderColor, $color) {
color: $color;
- background-color: $bgColor;
- border-color: $borderColor;
+ background-color: $bgColor;
+ border-color: $borderColor;
// Give desktop users something to play with
- &:hover {
+ &:hover {
color: $color;
text-decoration: none;
}
- &.active, &:active {
- background-color: $activeBgColor;
+ &.active, &:active {
+ background-color: $activeBgColor;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
border-color: $activeBorderColor;
- }
+ }
}
@mixin button-clear($color, $fontSize:"") {
@@ -50,36 +49,11 @@
}
}
-@mixin item-style($bgColor, $borderColor, $color) {
- color: $color;
- background-color: $bgColor;
- border-color: $borderColor;
-
- // Give desktop users something to play with
- &:hover {
- color: $color;
- text-decoration: none;
- }
- &.active, &:active {
- background-color: darken($bgColor, 8%);
- box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
- border-color: darken($borderColor, 10%);
- }
-}
-
-//$bgColor, $borderColor, $color,
-@mixin item-style-active($activeBgColor, $activeBorderColor, $activeColor) {
- &.active {
- color: $activeColor;
- background-color: $activeBgColor;
- border-color: $activeBorderColor;
- .item-content {
- background-color: $activeBgColor;
- color: $activeColor;
- }
- }
-};
+/**
+ * Bar Mixins
+ * --------------------------------------------------
+ */
@mixin bar-style($bgColor, $borderColor, $color) {
background-color: $bgColor;
@@ -93,6 +67,12 @@
}
}
+
+/**
+ * Tab Mixins
+ * --------------------------------------------------
+ */
+
@mixin tab-style($bgColor, $borderColor, $color) {
background-color: $bgColor;
background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%);
@@ -101,8 +81,34 @@
}
-// UTILITY MIXINS
-// --------------------------------------------------
+/**
+ * Item Mixins
+ * --------------------------------------------------
+ */
+
+@mixin item-style($bgColor, $borderColor, $color, $activeBgColor, $activeBorderColor) {
+ color: $color;
+ background-color: $bgColor;
+ border-color: $borderColor;
+
+ &.active,
+ &:active {
+ background-color: activeBgColor;
+ border-color: $activeBorderColor;
+
+ .item-content {
+ background-color: $activeBgColor;
+ border-color: $activeBorderColor;
+ box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
+ }
+ }
+}
+
+
+/**
+ * Utility Mixins
+ * --------------------------------------------------
+ */
// Clearfix
// --------
diff --git a/scss/_util.scss b/scss/_util.scss
index 3f1081012a7..e7eda9fc2fa 100644
--- a/scss/_util.scss
+++ b/scss/_util.scss
@@ -81,7 +81,7 @@
* instead have colors which represent an emotion or generic theme.
*/
-.light {
+.light, a.light {
color: $light;
}
.light-bg {
@@ -91,7 +91,7 @@
border-color: $button-light-border;
}
-.stable {
+.stable, a.stable {
color: $stable;
}
.stable-bg {
@@ -101,7 +101,7 @@
border-color: $button-stable-border;
}
-.positive {
+.positive, a.positive {
color: $positive;
}
.positive-bg {
@@ -111,7 +111,7 @@
border-color: $button-positive-border;
}
-.calm {
+.calm, a.calm {
color: $calm;
}
.calm-bg {
@@ -121,7 +121,7 @@
border-color: $button-calm-border;
}
-.assertive {
+.assertive, a.assertive {
color: $assertive;
}
.assertive-bg {
@@ -131,7 +131,7 @@
border-color: $button-assertive-border;
}
-.balanced {
+.balanced, a.balanced {
color: $balanced;
}
.balanced-bg {
@@ -141,7 +141,7 @@
border-color: $button-balanced-border;
}
-.energized {
+.energized, a.energized {
color: $energized;
}
.energized-bg {
@@ -151,7 +151,7 @@
border-color: $button-energized-border;
}
-.royal {
+.royal, a.royal {
color: $royal;
}
.royal-bg {
@@ -161,7 +161,7 @@
border-color: $button-royal-border;
}
-.dark {
+.dark, a.dark {
color: $dark;
}
.dark-bg {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index faf984b9af5..7aa4791a6ea 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -36,7 +36,6 @@ $headings-line-height: 1.1 !default;
$base-background-color: #fff;
$base-color: #000;
-$light-color: #666666;
$link-color: $positive !default;
$link-hover-color: darken($link-color, 15%) !default;
@@ -343,19 +342,96 @@ $tabs-default-border: $tabs-stable-border;
$tabs-default-text: $tabs-stable-text;
-// Lists
+// Items
// -------------------------------
-$list-font-size: 16px;
+$item-font-size: 16px;
+$item-border-width: 1px !default;
+$item-padding: 15px !default;
+
+$item-icon-font-size: 32px !default;
+$item-icon-fill-font-size: 28px !default;
+
+$item-avitar-width: 40px !default;
+$item-avitar-height: 40px !default;
+
+$item-thumbnail-width: 80px !default;
+$item-thumbnail-height: 80px !default;
+$item-thumbnail-margin: 10px !default;
+
+$item-divider-bg: #f5f5f5;
+$item-divider-color: #222;
+$item-divider-padding: 5px 15px;
+
+$item-light-bg: $button-light-bg;
+$item-light-border: $button-light-border;
+$item-light-text: $button-light-text;
+$item-light-active-bg: $button-light-active-bg;
+$item-light-active-border: $button-light-active-border;
+
+$item-stable-bg: $button-stable-bg;
+$item-stable-border: $button-stable-border;
+$item-stable-text: $button-stable-text;
+$item-stable-active-bg: $button-stable-active-bg;
+$item-stable-active-border: $button-stable-active-border;
+
+$item-positive-bg: $button-positive-bg;
+$item-positive-border: $button-positive-border;
+$item-positive-text: $button-positive-text;
+$item-positive-active-bg: $button-positive-active-bg;
+$item-positive-active-border: $button-positive-active-border;
+
+$item-calm-bg: $button-calm-bg;
+$item-calm-border: $button-calm-border;
+$item-calm-text: $button-calm-text;
+$item-calm-active-bg: $button-calm-active-bg;
+$item-calm-active-border: $button-calm-active-border;
+
+$item-assertive-bg: $button-assertive-bg;
+$item-assertive-border: $button-assertive-border;
+$item-assertive-text: $button-assertive-text;
+$item-assertive-active-bg: $button-assertive-active-bg;
+$item-assertive-active-border: $button-assertive-active-border;
+
+$item-balanced-bg: $button-balanced-bg;
+$item-balanced-border: $button-balanced-border;
+$item-balanced-text: $button-balanced-text;
+$item-balanced-active-bg: $button-balanced-active-bg;
+$item-balanced-active-border: $button-balanced-active-border;
+
+$item-energized-bg: $button-energized-bg;
+$item-energized-border: $button-energized-border;
+$item-energized-text: $button-energized-text;
+$item-energized-active-bg: $button-energized-active-bg;
+$item-energized-active-border: $button-energized-active-border;
+
+$item-royal-bg: $button-royal-bg;
+$item-royal-border: $button-royal-border;
+$item-royal-text: $button-royal-text;
+$item-royal-active-bg: $button-royal-active-bg;
+$item-royal-active-border: $button-royal-active-border;
+
+$item-dark-bg: $button-dark-bg;
+$item-dark-border: $button-dark-border;
+$item-dark-text: $button-dark-text;
+$item-dark-active-bg: $button-dark-active-bg;
+$item-dark-active-border: $button-dark-active-border;
+
+$item-default-bg: $item-light-bg;
+$item-default-border: $item-light-border;
+$item-default-text: $item-light-text;
+$item-default-active-bg: $item-light-active-bg;
+$item-default-active-border: $item-light-active-border;
+
+
+// Lists
+// -------------------------------
$list-header-bg: transparent;
$list-header-color: #222;
$list-header-padding: 5px 15px;
$list-header-margin-top: 20px !default;
-$list-bg: $light;
-$list-border-color: #ddd;
-
// Cards
// -------------------------------
@@ -371,29 +447,6 @@ $card-border-color: #ccc;
$card-border-radius: 2px !default;
-// Items
-// -------------------------------
-
-$item-border-width: 1px !default;
-$item-border-color: #ddd;
-$item-border-style: solid;
-$item-padding: 15px !default;
-
-$item-divider-bg: #f5f5f5;
-$item-divider-color: #222;
-$item-divider-padding: 5px 15px;
-
-$item-icon-font-size: 32px !default;
-$item-icon-fill-font-size: 28px !default;
-
-$item-avitar-width: 40px !default;
-$item-avitar-height: 40px !default;
-
-$item-thumbnail-width: 80px !default;
-$item-thumbnail-height: 80px !default;
-$item-thumbnail-margin: 10px !default;
-
-
// Icons
// -------------------------------
diff --git a/test/lists.html b/test/lists.html
index 8f3d9aa4f1e..4da49c1c432 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -451,6 +451,20 @@ Dookie
Homepage
+ Colors
+
+