mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
colour name changes
This commit is contained in:
Adam Bradley
336
dist/css/ionic.css
vendored
336
dist/css/ionic.css
vendored
@ -2469,7 +2469,7 @@ address {
|
||||
|
||||
a.subdued {
|
||||
padding-right: 10px;
|
||||
color: #cccccc;
|
||||
color: #f8f8f8;
|
||||
text-decoration: none; }
|
||||
a.subdued:hover {
|
||||
text-decoration: none; }
|
||||
@ -2615,34 +2615,20 @@ a.subdued {
|
||||
color: white; }
|
||||
.bar.bar-royal .title {
|
||||
color: white; }
|
||||
.bar.bar-pure {
|
||||
.bar.bar-light {
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
color: #444444; }
|
||||
.bar.bar-pure .title {
|
||||
.bar.bar-light .title {
|
||||
color: #444444; }
|
||||
.bar.bar-subdued-light {
|
||||
background-color: #eeeeee;
|
||||
.bar.bar-light {
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
color: #444444; }
|
||||
.bar.bar-subdued-light .title {
|
||||
.bar.bar-light .title {
|
||||
color: #444444; }
|
||||
.bar.bar-subdued {
|
||||
background-color: #cccccc;
|
||||
border-color: #bbbbbb;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
color: #444444; }
|
||||
.bar.bar-subdued .title {
|
||||
color: #444444; }
|
||||
.bar.bar-subdued-dark {
|
||||
background-color: #888888;
|
||||
border-color: #6f6f6f;
|
||||
background-image: linear-gradient(0deg, #6f6f6f, #6f6f6f 50%, transparent 50%);
|
||||
color: white; }
|
||||
.bar.bar-subdued-dark .title {
|
||||
color: white; }
|
||||
.bar.bar-dark {
|
||||
background-color: #444444;
|
||||
border-color: #444444;
|
||||
@ -2720,7 +2706,7 @@ a.subdued {
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #cccccc; }
|
||||
.bar-secondary .button.button-clear {
|
||||
color: #888888;
|
||||
color: #444444;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
@ -2844,69 +2830,35 @@ a.subdued {
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-pure .button {
|
||||
.bar-light .button {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.bar-pure .button:hover {
|
||||
.bar-light .button:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.bar-pure .button.active, .bar-pure .button:active {
|
||||
.bar-light .button.active, .bar-light .button:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.bar-pure .button.button-clear {
|
||||
.bar-light .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-subdued-light .button {
|
||||
.bar-light .button {
|
||||
color: #444444;
|
||||
background-color: #eeeeee;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.bar-subdued-light .button:hover {
|
||||
.bar-light .button:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.bar-subdued-light .button.active, .bar-subdued-light .button:active {
|
||||
.bar-light .button.active, .bar-light .button:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.bar-subdued-light .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-subdued .button {
|
||||
color: #444444;
|
||||
background-color: #cccccc;
|
||||
border-color: #bbbbbb; }
|
||||
.bar-subdued .button:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.bar-subdued .button.active, .bar-subdued .button:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.bar-subdued .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-subdued-dark .button {
|
||||
color: white;
|
||||
background-color: #888888;
|
||||
border-color: #6f6f6f; }
|
||||
.bar-subdued-dark .button:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.bar-subdued-dark .button.active, .bar-subdued-dark .button:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.bar-subdued-dark .button.button-clear {
|
||||
.bar-light .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
@ -2968,9 +2920,9 @@ a.subdued {
|
||||
-moz-flex-direction: horizontal;
|
||||
-ms-flex-direction: horizontal;
|
||||
flex-direction: horizontal;
|
||||
background-color: #eeeeee;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
border-color: #dddddd;
|
||||
background-color: #f8f8f8;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
border-color: #bbbbbb;
|
||||
color: #444444;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -3026,26 +2978,16 @@ a.subdued {
|
||||
background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%);
|
||||
border-color: #552bdf;
|
||||
color: white; }
|
||||
.tabs.tabs-pure {
|
||||
.tabs.tabs-light {
|
||||
background-color: white;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
border-color: #dddddd;
|
||||
color: #444444; }
|
||||
.tabs.tabs-subdued-light {
|
||||
background-color: #eeeeee;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
border-color: #dddddd;
|
||||
color: #444444; }
|
||||
.tabs.tabs-subdued {
|
||||
background-color: #cccccc;
|
||||
.tabs.tabs-stable {
|
||||
background-color: #f8f8f8;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
border-color: #bbbbbb;
|
||||
color: #444444; }
|
||||
.tabs.tabs-subdued-dark {
|
||||
background-color: #888888;
|
||||
background-image: linear-gradient(0deg, #6f6f6f, #6f6f6f 50%, transparent 50%);
|
||||
border-color: #6f6f6f;
|
||||
color: white; }
|
||||
.tabs.tabs-dark {
|
||||
background-color: #444444;
|
||||
background-image: linear-gradient(0deg, #444444, #444444 50%, transparent 50%);
|
||||
@ -3131,14 +3073,10 @@ a.subdued {
|
||||
color: #f0b840; }
|
||||
.tab-item.active.tab-item-royal, .tab-item:active.tab-item-royal {
|
||||
color: #8a6de9; }
|
||||
.tab-item.active.tab-item-pure, .tab-item:active.tab-item-pure {
|
||||
.tab-item.active.tab-item-light, .tab-item:active.tab-item-light {
|
||||
color: white; }
|
||||
.tab-item.active.tab-item-subdued-light, .tab-item:active.tab-item-subdued-light {
|
||||
color: #eeeeee; }
|
||||
.tab-item.active.tab-item-subdued, .tab-item:active.tab-item-subdued {
|
||||
color: #cccccc; }
|
||||
.tab-item.active.tab-item-subdued-dark, .tab-item:active.tab-item-subdued-dark {
|
||||
color: #888888; }
|
||||
.tab-item.active.tab-item-stable, .tab-item:active.tab-item-stable {
|
||||
color: #f8f8f8; }
|
||||
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
|
||||
color: #444444; }
|
||||
|
||||
@ -3257,12 +3195,12 @@ a.subdued {
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.item.active {
|
||||
color: #888888;
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item.active .item-content {
|
||||
background-color: white;
|
||||
color: #888888; }
|
||||
color: #444444; }
|
||||
.item h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
@ -3298,31 +3236,31 @@ a.subdued {
|
||||
.item-primary.active {
|
||||
color: white;
|
||||
background-color: #4a87ee;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-primary.active .item-content {
|
||||
background-color: #4a87ee;
|
||||
color: white; }
|
||||
|
||||
.item-secondary.active {
|
||||
color: #888888;
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-secondary.active .item-content {
|
||||
background-color: white;
|
||||
color: #888888; }
|
||||
color: #444444; }
|
||||
|
||||
.item-tertiary.active {
|
||||
color: #888888;
|
||||
color: #444444;
|
||||
background-color: whitesmoke;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-tertiary.active .item-content {
|
||||
background-color: whitesmoke;
|
||||
color: #888888; }
|
||||
color: #444444; }
|
||||
|
||||
.item-positive.active {
|
||||
color: white;
|
||||
background-color: #4a87ee;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-positive.active .item-content {
|
||||
background-color: #4a87ee;
|
||||
color: white; }
|
||||
@ -3330,7 +3268,7 @@ a.subdued {
|
||||
.item-calm.active {
|
||||
color: white;
|
||||
background-color: #43cee6;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-calm.active .item-content {
|
||||
background-color: #43cee6;
|
||||
color: white; }
|
||||
@ -3338,7 +3276,7 @@ a.subdued {
|
||||
.item-balanced.active {
|
||||
color: white;
|
||||
background-color: #66cc33;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-balanced.active .item-content {
|
||||
background-color: #66cc33;
|
||||
color: white; }
|
||||
@ -3346,7 +3284,7 @@ a.subdued {
|
||||
.item-energized.active {
|
||||
color: white;
|
||||
background-color: #f0b840;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-energized.active .item-content {
|
||||
background-color: #f0b840;
|
||||
color: white; }
|
||||
@ -3354,47 +3292,31 @@ a.subdued {
|
||||
.item-royal.active {
|
||||
color: white;
|
||||
background-color: #8a6de9;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-royal.active .item-content {
|
||||
background-color: #8a6de9;
|
||||
color: white; }
|
||||
|
||||
.item-pure.active {
|
||||
.item-light.active {
|
||||
color: white;
|
||||
background-color: white;
|
||||
border-color: #888888; }
|
||||
.item-pure.active .item-content {
|
||||
border-color: #444444; }
|
||||
.item-light.active .item-content {
|
||||
background-color: white;
|
||||
color: white; }
|
||||
|
||||
.item-subdued-light.active {
|
||||
.item-stable.active {
|
||||
color: white;
|
||||
background-color: #eeeeee;
|
||||
border-color: #888888; }
|
||||
.item-subdued-light.active .item-content {
|
||||
background-color: #eeeeee;
|
||||
color: white; }
|
||||
|
||||
.item-subdued.active {
|
||||
color: white;
|
||||
background-color: #cccccc;
|
||||
border-color: #888888; }
|
||||
.item-subdued.active .item-content {
|
||||
background-color: #cccccc;
|
||||
color: white; }
|
||||
|
||||
.item-subdued-dark.active {
|
||||
color: white;
|
||||
background-color: #888888;
|
||||
border-color: #888888; }
|
||||
.item-subdued-dark.active .item-content {
|
||||
background-color: #888888;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #444444; }
|
||||
.item-stable.active .item-content {
|
||||
background-color: #f8f8f8;
|
||||
color: white; }
|
||||
|
||||
.item-dark.active {
|
||||
color: white;
|
||||
background-color: #444444;
|
||||
border-color: #888888; }
|
||||
border-color: #444444; }
|
||||
.item-dark.active .item-content {
|
||||
background-color: #444444;
|
||||
color: white; }
|
||||
@ -3906,7 +3828,7 @@ button.item-button-right:after {
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-color: #cccccc;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 10px; }
|
||||
.badge:empty {
|
||||
display: none; }
|
||||
@ -3942,17 +3864,11 @@ button.item-button-right:after {
|
||||
.badge-royal {
|
||||
background-color: #8a6de9; }
|
||||
|
||||
.badge-pure {
|
||||
.badge-light {
|
||||
background-color: white; }
|
||||
|
||||
.badge-subdued-light {
|
||||
background-color: #eeeeee; }
|
||||
|
||||
.badge-subdued {
|
||||
background-color: #cccccc; }
|
||||
|
||||
.badge-subdued-dark {
|
||||
background-color: #888888; }
|
||||
.badge-stable {
|
||||
background-color: #f8f8f8; }
|
||||
|
||||
.badge-dark {
|
||||
background-color: #444444; }
|
||||
@ -4053,11 +3969,11 @@ legend {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
color: #888888;
|
||||
color: #444444;
|
||||
font-size: 21px;
|
||||
line-height: 2.85714; }
|
||||
legend small {
|
||||
color: #eeeeee;
|
||||
color: #f8f8f8;
|
||||
font-size: 1.07143; }
|
||||
|
||||
label,
|
||||
@ -4172,7 +4088,7 @@ input[type="tel"],
|
||||
input[type="color"] {
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
color: #cccccc;
|
||||
color: #f8f8f8;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
line-height: 20px; }
|
||||
@ -4229,13 +4145,13 @@ select[size] {
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
color: #cccccc; }
|
||||
color: #f8f8f8; }
|
||||
input:-ms-input-placeholder,
|
||||
textarea:-ms-input-placeholder {
|
||||
color: #cccccc; }
|
||||
color: #f8f8f8; }
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: #cccccc; }
|
||||
color: #f8f8f8; }
|
||||
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
@ -4243,7 +4159,7 @@ textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: #eeeeee;
|
||||
background-color: #f8f8f8;
|
||||
cursor: not-allowed; }
|
||||
|
||||
input[type="radio"][disabled],
|
||||
@ -4473,8 +4389,8 @@ input[type="range"] {
|
||||
border-style: solid;
|
||||
border-radius: 2px;
|
||||
color: #444444;
|
||||
background-color: #eeeeee;
|
||||
border-color: #c8c8c8;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #d2d2d2;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
@ -4485,9 +4401,9 @@ input[type="range"] {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.button.active, .button:active {
|
||||
background-color: #fbfbfb;
|
||||
background-color: white;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #aeaeae; }
|
||||
border-color: #b8b8b8; }
|
||||
.button .icon {
|
||||
display: inline-block;
|
||||
padding: 0 0 1px 0;
|
||||
@ -4538,7 +4454,7 @@ input[type="range"] {
|
||||
.button.button-secondary.button-outline {
|
||||
background: transparent;
|
||||
border-color: #d9d9d9;
|
||||
color: #888888; }
|
||||
color: #444444; }
|
||||
.button.button-secondary.button-outline.active, .button.button-secondary.button-outline:active {
|
||||
background-color: #d9d9d9;
|
||||
color: #fff;
|
||||
@ -4704,96 +4620,50 @@ input[type="range"] {
|
||||
background-color: #8a6de9;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-pure {
|
||||
.button.button-light {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.button.button-pure:hover {
|
||||
.button.button-light:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.button.button-pure.active, .button.button-pure:active {
|
||||
.button.button-light.active, .button.button-light:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.button.button-pure.button-clear {
|
||||
.button.button-light.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-pure.button-outline {
|
||||
.button.button-light.button-outline {
|
||||
background: transparent;
|
||||
border-color: white;
|
||||
color: white; }
|
||||
.button.button-pure.button-outline.active, .button.button-pure.button-outline:active {
|
||||
.button.button-light.button-outline.active, .button.button-light.button-outline:active {
|
||||
background-color: white;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-subdued-light {
|
||||
.button.button-stable {
|
||||
color: #444444;
|
||||
background-color: #eeeeee;
|
||||
border-color: #dddddd; }
|
||||
.button.button-subdued-light:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.button.button-subdued-light.active, .button.button-subdued-light:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.button.button-subdued-light.button-clear {
|
||||
color: #eeeeee;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-subdued-light.button-outline {
|
||||
background: transparent;
|
||||
border-color: #eeeeee;
|
||||
color: #eeeeee; }
|
||||
.button.button-subdued-light.button-outline.active, .button.button-subdued-light.button-outline:active {
|
||||
background-color: #eeeeee;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-subdued {
|
||||
color: #444444;
|
||||
background-color: #cccccc;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #bbbbbb; }
|
||||
.button.button-subdued:hover {
|
||||
.button.button-stable:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.button.button-subdued.active, .button.button-subdued:active {
|
||||
.button.button-stable.active, .button.button-stable:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.button.button-subdued.button-clear {
|
||||
color: #cccccc;
|
||||
.button.button-stable.button-clear {
|
||||
color: #f8f8f8;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-subdued.button-outline {
|
||||
.button.button-stable.button-outline {
|
||||
background: transparent;
|
||||
border-color: #cccccc;
|
||||
color: #cccccc; }
|
||||
.button.button-subdued.button-outline.active, .button.button-subdued.button-outline:active {
|
||||
background-color: #cccccc;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-subdued-dark {
|
||||
color: white;
|
||||
background-color: #888888;
|
||||
border-color: #6f6f6f; }
|
||||
.button.button-subdued-dark:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button.button-subdued-dark.active, .button.button-subdued-dark:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.button.button-subdued-dark.button-clear {
|
||||
color: #888888;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-subdued-dark.button-outline {
|
||||
background: transparent;
|
||||
border-color: #888888;
|
||||
color: #888888; }
|
||||
.button.button-subdued-dark.button-outline.active, .button.button-subdued-dark.button-outline:active {
|
||||
background-color: #888888;
|
||||
border-color: #f8f8f8;
|
||||
color: #f8f8f8; }
|
||||
.button.button-stable.button-outline.active, .button.button-stable.button-outline:active {
|
||||
background-color: #f8f8f8;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-dark {
|
||||
@ -4856,7 +4726,7 @@ input[type="range"] {
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-clear.button-clear {
|
||||
color: #eeeeee;
|
||||
color: #f8f8f8;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button-clear:active, .button-clear.active {
|
||||
@ -4869,10 +4739,10 @@ input[type="range"] {
|
||||
box-shadow: none; }
|
||||
.button-outline.button-outline {
|
||||
background: transparent;
|
||||
border-color: #eeeeee;
|
||||
color: #eeeeee; }
|
||||
border-color: #f8f8f8;
|
||||
color: #f8f8f8; }
|
||||
.button-outline.button-outline.active, .button-outline.button-outline:active {
|
||||
background-color: #eeeeee;
|
||||
background-color: #f8f8f8;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
|
||||
@ -5447,42 +5317,24 @@ a.button {
|
||||
.royal-border {
|
||||
border-color: #552bdf; }
|
||||
|
||||
.pure {
|
||||
.light {
|
||||
color: white; }
|
||||
|
||||
.pure-bg {
|
||||
.light-bg {
|
||||
background-color: white; }
|
||||
|
||||
.pure-border {
|
||||
.light-border {
|
||||
border-color: #dddddd; }
|
||||
|
||||
.subdued-light {
|
||||
color: #eeeeee; }
|
||||
.stable {
|
||||
color: #f8f8f8; }
|
||||
|
||||
.subdued-light-bg {
|
||||
background-color: #eeeeee; }
|
||||
.stable-bg {
|
||||
background-color: #f8f8f8; }
|
||||
|
||||
.subdued-light-border {
|
||||
border-color: #dddddd; }
|
||||
|
||||
.subdued {
|
||||
color: #cccccc; }
|
||||
|
||||
.subdued-bg {
|
||||
background-color: #cccccc; }
|
||||
|
||||
.subdued-border {
|
||||
.stable-border {
|
||||
border-color: #bbbbbb; }
|
||||
|
||||
.subdued-dark {
|
||||
color: #888888; }
|
||||
|
||||
.subdued-dark-bg {
|
||||
background-color: #888888; }
|
||||
|
||||
.subdued-dark-border {
|
||||
border-color: #6f6f6f; }
|
||||
|
||||
.dark {
|
||||
color: #444444; }
|
||||
|
||||
|
||||
@ -56,17 +56,11 @@
|
||||
.badge-royal {
|
||||
background-color: $royal;
|
||||
}
|
||||
.badge-pure {
|
||||
background-color: $pure;
|
||||
.badge-light {
|
||||
background-color: $light;
|
||||
}
|
||||
.badge-subdued-light {
|
||||
background-color: $subdued-light;
|
||||
}
|
||||
.badge-subdued {
|
||||
background-color: $subdued;
|
||||
}
|
||||
.badge-subdued-dark {
|
||||
background-color: $subdued-dark;
|
||||
.badge-stable {
|
||||
background-color: $stable;
|
||||
}
|
||||
.badge-dark {
|
||||
background-color: $dark;
|
||||
|
||||
@ -77,17 +77,11 @@
|
||||
&.bar-royal {
|
||||
@include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
|
||||
}
|
||||
&.bar-pure {
|
||||
@include bar-style($bar-pure-bg, $bar-pure-border, $bar-pure-text);
|
||||
&.bar-light {
|
||||
@include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
|
||||
}
|
||||
&.bar-subdued-light {
|
||||
@include bar-style($bar-subdued-light-bg, $bar-subdued-light-border, $bar-subdued-light-text);
|
||||
}
|
||||
&.bar-subdued {
|
||||
@include bar-style($bar-subdued-bg, $bar-subdued-border, $bar-subdued-text);
|
||||
}
|
||||
&.bar-subdued-dark {
|
||||
@include bar-style($bar-subdued-dark-bg, $bar-subdued-dark-border, $bar-subdued-dark-text);
|
||||
&.bar-light {
|
||||
@include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
|
||||
}
|
||||
&.bar-dark {
|
||||
@include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
|
||||
@ -168,7 +162,7 @@
|
||||
.bar-secondary {
|
||||
.button {
|
||||
@include button-style($bar-secondary-bg, $bar-secondary-border, $bar-secondary-active-bg, $bar-secondary-active-border, $bar-secondary-text);
|
||||
@include button-clear($subdued-dark, $bar-title-font-size);
|
||||
@include button-clear($dark, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-tertiary {
|
||||
@ -213,27 +207,15 @@
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-pure {
|
||||
.bar-light {
|
||||
.button {
|
||||
@include button-style($bar-pure-bg, $bar-pure-border, $bar-pure-active-bg, $bar-pure-active-border, $bar-pure-text);
|
||||
@include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-subdued-light {
|
||||
.bar-light {
|
||||
.button {
|
||||
@include button-style($bar-subdued-light-bg, $bar-subdued-light-border, $bar-subdued-light-active-bg, $bar-subdued-light-active-border, $bar-subdued-light-text);
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-subdued {
|
||||
.button {
|
||||
@include button-style($bar-subdued-bg, $bar-subdued-border, $bar-subdued-active-bg, $bar-subdued-active-border, $bar-subdued-text);
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-subdued-dark {
|
||||
.button {
|
||||
@include button-style($bar-subdued-dark-bg, $bar-subdued-dark-border, $bar-subdued-dark-active-bg, $bar-subdued-dark-active-border, $bar-subdued-dark-text);
|
||||
@include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
&.button-secondary {
|
||||
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
|
||||
@include button-clear($button-secondary-border);
|
||||
@include button-outline($button-secondary-border, $subdued-dark);
|
||||
@include button-outline($button-secondary-border, $dark);
|
||||
}
|
||||
|
||||
&.button-tertiary {
|
||||
@ -97,28 +97,16 @@
|
||||
@include button-outline($button-royal-bg);
|
||||
}
|
||||
|
||||
&.button-pure {
|
||||
@include button-style($button-pure-bg, $button-pure-border, $button-pure-active-bg, $button-pure-active-border, $button-pure-text);
|
||||
@include button-clear($button-pure-bg);
|
||||
@include button-outline($button-pure-bg);
|
||||
&.button-light {
|
||||
@include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
|
||||
@include button-clear($button-light-bg);
|
||||
@include button-outline($button-light-bg);
|
||||
}
|
||||
|
||||
&.button-subdued-light {
|
||||
@include button-style($button-subdued-light-bg, $button-subdued-light-border, $button-subdued-light-active-bg, $button-subdued-light-active-border, $button-subdued-light-text);
|
||||
@include button-clear($button-subdued-light-bg);
|
||||
@include button-outline($button-subdued-light-bg);
|
||||
}
|
||||
|
||||
&.button-subdued {
|
||||
@include button-style($button-subdued-bg, $button-subdued-border, $button-subdued-active-bg, $button-subdued-active-border, $button-subdued-text);
|
||||
@include button-clear($button-subdued-bg);
|
||||
@include button-outline($button-subdued-bg);
|
||||
}
|
||||
|
||||
&.button-subdued-dark {
|
||||
@include button-style($button-subdued-dark-bg, $button-subdued-dark-border, $button-subdued-dark-active-bg, $button-subdued-dark-active-border, $button-subdued-dark-text);
|
||||
@include button-clear($button-subdued-dark-bg);
|
||||
@include button-outline($button-subdued-dark-bg);
|
||||
&.button-stable {
|
||||
@include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
|
||||
@include button-clear($button-stable-bg);
|
||||
@include button-outline($button-stable-bg);
|
||||
}
|
||||
|
||||
&.button-dark {
|
||||
|
||||
@ -17,13 +17,13 @@ legend {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
color: $subdued-dark;
|
||||
color: $dark;
|
||||
font-size: $font-size-base * 1.5;
|
||||
line-height: $line-height-base * 2;
|
||||
|
||||
// Small
|
||||
small {
|
||||
color: $subdued-light;
|
||||
color: $stable;
|
||||
font-size: $line-height-base * .75;
|
||||
}
|
||||
}
|
||||
@ -134,7 +134,7 @@ input[type="tel"],
|
||||
input[type="color"] {
|
||||
display: inline-block;
|
||||
height: $line-height-computed + $font-size-base;
|
||||
color: $subdued;
|
||||
color: $stable;
|
||||
vertical-align: middle;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-computed;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
.item {
|
||||
@include item-style-active($secondary, $subdued-dark, $subdued-dark);
|
||||
@include item-style-active($light, $dark, $dark);
|
||||
position: relative;
|
||||
|
||||
z-index: 2; // Make sure the borders and stuff don't get hidden by children
|
||||
@ -75,19 +75,17 @@
|
||||
}
|
||||
|
||||
// Different themes for list items
|
||||
.item-primary { @include item-style-active($primary, $subdued-dark, #fff); }
|
||||
.item-secondary { @include item-style-active($secondary, $subdued-dark, $subdued-dark); }
|
||||
.item-tertiary { @include item-style-active($tertiary, $subdued-dark, $subdued-dark); }
|
||||
.item-positive { @include item-style-active($positive, $subdued-dark, #fff); }
|
||||
.item-calm { @include item-style-active($calm, $subdued-dark, #fff); }
|
||||
.item-balanced { @include item-style-active($balanced, $subdued-dark, #fff); }
|
||||
.item-energized { @include item-style-active($energized, $subdued-dark, #fff); }
|
||||
.item-royal { @include item-style-active($royal, $subdued-dark, #fff); }
|
||||
.item-pure { @include item-style-active($pure, $subdued-dark, #fff); }
|
||||
.item-subdued-light { @include item-style-active($subdued-light, $subdued-dark, #fff); }
|
||||
.item-subdued { @include item-style-active($subdued, $subdued-dark, #fff); }
|
||||
.item-subdued-dark { @include item-style-active($subdued-dark, $subdued-dark, #fff); }
|
||||
.item-dark { @include item-style-active($dark, $subdued-dark, #fff); }
|
||||
.item-primary { @include item-style-active($primary, $dark, #fff); }
|
||||
.item-secondary { @include item-style-active($secondary, $dark, $dark); }
|
||||
.item-tertiary { @include item-style-active($tertiary, $dark, $dark); }
|
||||
.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-light { @include item-style-active($light, $dark, #fff); }
|
||||
.item-stable { @include item-style-active($stable, $dark, #fff); }
|
||||
.item-dark { @include item-style-active($dark, $dark, #fff); }
|
||||
|
||||
// Handle text overflow
|
||||
.item,
|
||||
|
||||
@ -49,17 +49,11 @@
|
||||
&.tabs-royal {
|
||||
@include tab-style($tabs-royal-bg, $tabs-royal-border-color, $tabs-royal-text);
|
||||
}
|
||||
&.tabs-pure {
|
||||
@include tab-style($tabs-pure-bg, $tabs-pure-border-color, $tabs-pure-text);
|
||||
&.tabs-light {
|
||||
@include tab-style($tabs-light-bg, $tabs-light-border-color, $tabs-light-text);
|
||||
}
|
||||
&.tabs-subdued-light {
|
||||
@include tab-style($tabs-subdued-light-bg, $tabs-subdued-light-border-color, $tabs-subdued-light-text);
|
||||
}
|
||||
&.tabs-subdued {
|
||||
@include tab-style($tabs-subdued-bg, $tabs-subdued-border-color, $tabs-subdued-text);
|
||||
}
|
||||
&.tabs-subdued-dark {
|
||||
@include tab-style($tabs-subdued-dark-bg, $tabs-subdued-dark-border-color, $tabs-subdued-dark-text);
|
||||
&.tabs-stable {
|
||||
@include tab-style($tabs-stable-bg, $tabs-stable-border-color, $tabs-stable-text);
|
||||
}
|
||||
&.tabs-dark {
|
||||
@include tab-style($tabs-dark-bg, $tabs-dark-border-color, $tabs-dark-text);
|
||||
@ -168,17 +162,11 @@
|
||||
&.tab-item-royal {
|
||||
color: $royal;
|
||||
}
|
||||
&.tab-item-pure {
|
||||
color: $pure;
|
||||
&.tab-item-light {
|
||||
color: $light;
|
||||
}
|
||||
&.tab-item-subdued-light {
|
||||
color: $subdued-light;
|
||||
}
|
||||
&.tab-item-subdued {
|
||||
color: $subdued;
|
||||
}
|
||||
&.tab-item-subdued-dark {
|
||||
color: $subdued-dark;
|
||||
&.tab-item-stable {
|
||||
color: $stable;
|
||||
}
|
||||
&.tab-item-dark {
|
||||
color: $dark;
|
||||
|
||||
@ -160,7 +160,7 @@ address {
|
||||
|
||||
a.subdued {
|
||||
padding-right:10px;
|
||||
color: $subdued;
|
||||
color: $stable;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -141,44 +141,24 @@
|
||||
border-color: $button-royal-border;
|
||||
}
|
||||
|
||||
.pure {
|
||||
color: $pure;
|
||||
.light {
|
||||
color: $light;
|
||||
}
|
||||
.pure-bg {
|
||||
background-color: $pure;
|
||||
.light-bg {
|
||||
background-color: $light;
|
||||
}
|
||||
.pure-border {
|
||||
border-color: $button-pure-border;
|
||||
.light-border {
|
||||
border-color: $button-light-border;
|
||||
}
|
||||
|
||||
.subdued-light {
|
||||
color: $subdued-light;
|
||||
.stable {
|
||||
color: $stable;
|
||||
}
|
||||
.subdued-light-bg {
|
||||
background-color: $subdued-light;
|
||||
.stable-bg {
|
||||
background-color: $stable;
|
||||
}
|
||||
.subdued-light-border {
|
||||
border-color: $button-subdued-light-border;
|
||||
}
|
||||
|
||||
.subdued {
|
||||
color: $subdued;
|
||||
}
|
||||
.subdued-bg {
|
||||
background-color: $subdued;
|
||||
}
|
||||
.subdued-border {
|
||||
border-color: $button-subdued-border;
|
||||
}
|
||||
|
||||
.subdued-dark {
|
||||
color: $subdued-dark;
|
||||
}
|
||||
.subdued-dark-bg {
|
||||
background-color: $subdued-dark;
|
||||
}
|
||||
.subdued-dark-border {
|
||||
border-color: $button-subdued-dark-border;
|
||||
.stable-border {
|
||||
border-color: $button-stable-border;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// -------------------------------
|
||||
|
||||
$primary: #4a87ee !default;
|
||||
$secondary: #fff !default;
|
||||
$secondary: #ffffff !default;
|
||||
$tertiary: #f5f5f5 !default;
|
||||
|
||||
|
||||
@ -17,11 +17,9 @@ $energized: #f0b840 !default;
|
||||
$assertive: #ef4e3a !default;
|
||||
$royal: #8a6de9 !default;
|
||||
|
||||
$pure: #fff !default;
|
||||
$subdued-light: #eee !default;
|
||||
$subdued: #ccc !default;
|
||||
$subdued-dark: #888 !default;
|
||||
$dark: #444 !default;
|
||||
$light: #ffffff !default;
|
||||
$stable: #f8f8f8 !default;
|
||||
$dark: #444444 !default;
|
||||
|
||||
|
||||
// Base
|
||||
@ -85,12 +83,12 @@ $input-height-base: ($line-height-computed + ($padding-base-vertic
|
||||
$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
|
||||
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
|
||||
|
||||
$input-bg: $pure;
|
||||
$input-bg-disabled: $subdued-light;
|
||||
$input-bg: $light;
|
||||
$input-bg-disabled: $stable;
|
||||
|
||||
$input-color: $subdued-dark;
|
||||
$input-color: $dark;
|
||||
$input-label-color: $dark;
|
||||
$input-color-placeholder: $subdued;
|
||||
$input-color-placeholder: $stable;
|
||||
|
||||
|
||||
// Toggle
|
||||
@ -111,7 +109,7 @@ $toggle-off-border-color: #E5E5E5;
|
||||
$toggle-on-bg-color: #4A87EE;
|
||||
$toggle-on-border-color: $toggle-on-bg-color;
|
||||
|
||||
$toggle-handle-off-bg-color: $pure;
|
||||
$toggle-handle-off-bg-color: $light;
|
||||
$toggle-handle-on-bg-color: $toggle-handle-off-bg-color;
|
||||
|
||||
$toggle-transition-duration: .1s;
|
||||
@ -174,11 +172,11 @@ $button-bar-button-height: 32px;
|
||||
$button-bar-button-padding: 8px !default;
|
||||
$button-bar-button-icon-size: 24px;
|
||||
|
||||
$button-default-bg: $subdued-light;
|
||||
$button-default-bg: $stable;
|
||||
$button-default-text: #444;
|
||||
$button-default-border: darken($subdued-light, 15%);
|
||||
$button-default-active-bg: lighten($subdued-light, 5%);
|
||||
$button-default-active-border: darken($subdued-light, 25%);
|
||||
$button-default-border: darken($stable, 15%);
|
||||
$button-default-active-bg: lighten($stable, 5%);
|
||||
$button-default-active-border: darken($stable, 25%);
|
||||
|
||||
$button-primary-bg: $primary;
|
||||
$button-primary-text: #fff;
|
||||
@ -234,29 +232,17 @@ $button-royal-border: darken($royal, 15%);
|
||||
$button-royal-active-bg: darken($royal, 15%);
|
||||
$button-royal-active-border: darken($royal, 15%);
|
||||
|
||||
$button-pure-bg: $pure;
|
||||
$button-pure-text: #444;
|
||||
$button-pure-border: #ddd;
|
||||
$button-pure-active-bg: #222;
|
||||
$button-pure-active-border: #000;
|
||||
$button-light-bg: $light;
|
||||
$button-light-text: #444;
|
||||
$button-light-border: #ddd;
|
||||
$button-light-active-bg: #222;
|
||||
$button-light-active-border: #000;
|
||||
|
||||
$button-subdued-light-bg: $subdued-light;
|
||||
$button-subdued-light-text: #444;
|
||||
$button-subdued-light-border: #ddd;
|
||||
$button-subdued-light-active-bg: #222;
|
||||
$button-subdued-light-active-border: #000;
|
||||
|
||||
$button-subdued-bg: $subdued;
|
||||
$button-subdued-text: #444;
|
||||
$button-subdued-border: #bbb;
|
||||
$button-subdued-active-bg: #222;
|
||||
$button-subdued-active-border: #000;
|
||||
|
||||
$button-subdued-dark-bg: $subdued-dark;
|
||||
$button-subdued-dark-text: #fff;
|
||||
$button-subdued-dark-border: darken($subdued-dark, 10%);
|
||||
$button-subdued-dark-active-bg: #222;
|
||||
$button-subdued-dark-active-border: #000;
|
||||
$button-stable-bg: $stable;
|
||||
$button-stable-text: #444;
|
||||
$button-stable-border: #bbb;
|
||||
$button-stable-active-bg: #222;
|
||||
$button-stable-active-border: #000;
|
||||
|
||||
$button-dark-bg: $dark;
|
||||
$button-dark-text: #fff;
|
||||
@ -334,29 +320,17 @@ $bar-royal-border: $button-royal-border;
|
||||
$bar-royal-active-bg: $button-royal-active-bg;
|
||||
$bar-royal-active-border: $button-royal-active-border;
|
||||
|
||||
$bar-pure-bg: rgba($button-pure-bg, $bar-transparency);
|
||||
$bar-pure-text: $button-pure-text;
|
||||
$bar-pure-border: $button-pure-border;
|
||||
$bar-pure-active-bg: $button-pure-active-bg;
|
||||
$bar-pure-active-border: $button-pure-active-border;
|
||||
$bar-light-bg: rgba($button-light-bg, $bar-transparency);
|
||||
$bar-light-text: $button-light-text;
|
||||
$bar-light-border: $button-light-border;
|
||||
$bar-light-active-bg: $button-light-active-bg;
|
||||
$bar-light-active-border: $button-light-active-border;
|
||||
|
||||
$bar-subdued-light-bg: rgba($button-subdued-light-bg, $bar-transparency);
|
||||
$bar-subdued-light-text: $button-subdued-light-text;
|
||||
$bar-subdued-light-border: $button-subdued-light-border;
|
||||
$bar-subdued-light-active-bg: $button-subdued-light-active-bg;
|
||||
$bar-subdued-light-active-border: $button-subdued-light-active-border;
|
||||
|
||||
$bar-subdued-bg: rgba($button-subdued-bg, $bar-transparency);
|
||||
$bar-subdued-text: $button-subdued-text;
|
||||
$bar-subdued-border: $button-subdued-border;
|
||||
$bar-subdued-active-bg: $button-subdued-active-bg;
|
||||
$bar-subdued-active-border: $button-subdued-active-border;
|
||||
|
||||
$bar-subdued-dark-bg: rgba($button-subdued-dark-bg, $bar-transparency);
|
||||
$bar-subdued-dark-text: $button-subdued-dark-text;
|
||||
$bar-subdued-dark-border: $button-subdued-dark-border;
|
||||
$bar-subdued-dark-active-bg: $button-subdued-dark-active-bg;
|
||||
$bar-subdued-dark-active-border: $button-subdued-dark-active-border;
|
||||
$bar-stable-bg: rgba($button-stable-bg, $bar-transparency);
|
||||
$bar-stable-text: $button-stable-text;
|
||||
$bar-stable-border: $button-stable-border;
|
||||
$bar-stable-active-bg: $button-stable-active-bg;
|
||||
$bar-stable-active-border: $button-stable-active-border;
|
||||
|
||||
$bar-dark-bg: rgba($button-dark-bg, $bar-transparency);
|
||||
$bar-dark-text: $button-dark-text;
|
||||
@ -373,9 +347,9 @@ $tabs-text-font-size: 14px !default;
|
||||
$tabs-text-with-icon-font-size: 10px !default;
|
||||
$tabs-icon-size: 32px !default;
|
||||
|
||||
$tabs-default-bg: $button-subdued-light-bg;
|
||||
$tabs-default-border-color: $button-subdued-light-border;
|
||||
$tabs-default-text: $button-subdued-light-text;
|
||||
$tabs-default-bg: $button-stable-bg;
|
||||
$tabs-default-border-color: $button-stable-border;
|
||||
$tabs-default-text: $button-stable-text;
|
||||
|
||||
$tabs-primary-bg: $button-primary-bg;
|
||||
$tabs-primary-border-color: $button-primary-border;
|
||||
@ -413,21 +387,13 @@ $tabs-royal-bg: $button-royal-bg;
|
||||
$tabs-royal-border-color: $button-royal-border;
|
||||
$tabs-royal-text: $button-royal-text;
|
||||
|
||||
$tabs-pure-bg: $button-pure-bg;
|
||||
$tabs-pure-border-color: $button-pure-border;
|
||||
$tabs-pure-text: $button-pure-text;
|
||||
$tabs-light-bg: $button-light-bg;
|
||||
$tabs-light-border-color: $button-light-border;
|
||||
$tabs-light-text: $button-light-text;
|
||||
|
||||
$tabs-subdued-light-bg: $button-subdued-light-bg;
|
||||
$tabs-subdued-light-border-color: $button-subdued-light-border;
|
||||
$tabs-subdued-light-text: $button-subdued-light-text;
|
||||
|
||||
$tabs-subdued-bg: $button-subdued-bg;
|
||||
$tabs-subdued-border-color: $button-subdued-border;
|
||||
$tabs-subdued-text: $button-subdued-text;
|
||||
|
||||
$tabs-subdued-dark-bg: $button-subdued-dark-bg;
|
||||
$tabs-subdued-dark-border-color: $button-subdued-dark-border;
|
||||
$tabs-subdued-dark-text: $button-subdued-dark-text;
|
||||
$tabs-stable-bg: $button-stable-bg;
|
||||
$tabs-stable-border-color: $button-stable-border;
|
||||
$tabs-stable-text: $button-stable-text;
|
||||
|
||||
$tabs-dark-bg: $button-dark-bg;
|
||||
$tabs-dark-border-color: $button-dark-border;
|
||||
@ -444,7 +410,7 @@ $list-header-color: #222;
|
||||
$list-header-padding: 5px 15px;
|
||||
$list-header-margin-top: 20px !default;
|
||||
|
||||
$list-bg: $pure;
|
||||
$list-bg: $light;
|
||||
$list-border-color: #ddd;
|
||||
|
||||
|
||||
@ -528,12 +494,12 @@ $sheet-border-radius: 3px !default;
|
||||
// Badges
|
||||
// -------------------------
|
||||
|
||||
$badge-color: $pure !default;
|
||||
$badge-link-hover-color: $pure !default;
|
||||
$badge-bg: $subdued !default;
|
||||
$badge-color: $light !default;
|
||||
$badge-link-hover-color: $light !default;
|
||||
$badge-bg: $stable !default;
|
||||
|
||||
$badge-active-color: $link-color !default;
|
||||
$badge-active-bg: $pure !default;
|
||||
$badge-active-bg: $light !default;
|
||||
|
||||
$badge-font-size: 14px !default;
|
||||
$badge-line-height: 16px !default;
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-pure">
|
||||
<div class="button-bar bar-light">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
@ -104,7 +104,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-subdued-light">
|
||||
<div class="button-bar bar-light-light">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
@ -112,7 +112,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-subdued">
|
||||
<div class="button-bar bar-light">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
@ -120,7 +120,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-subdued-dark">
|
||||
<div class="button-bar bar-light-dark">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
|
||||
@ -152,10 +152,8 @@
|
||||
<a class="button block button-balanced">.button-balanced</a>
|
||||
<a class="button block button-energized">.button-energized</a>
|
||||
<a class="button block button-royal">.button-royal</a>
|
||||
<a class="button block button-pure">.button-pure</a>
|
||||
<a class="button block button-subdued-light">.button-subdued-light</a>
|
||||
<a class="button block button-subdued">.button-subdued</a>
|
||||
<a class="button block button-subdued-dark">.button-subdued-dark</a>
|
||||
<a class="button block button-light">.button-light</a>
|
||||
<a class="button block button-stable">.button-stable</a>
|
||||
<a class="button block button-dark">.button-dark</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -12,6 +12,8 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -26,47 +28,39 @@
|
||||
<ul class="list color-list-demo">
|
||||
<li class="item positive">
|
||||
positive
|
||||
<span class="color-demo positive-bg"></span>
|
||||
<span class="color-demo positive-bg positive-border"></span>
|
||||
</li>
|
||||
<li class="item calm">
|
||||
calm
|
||||
<span class="color-demo calm-bg"></span>
|
||||
<span class="color-demo calm-bg calm-border"></span>
|
||||
</li>
|
||||
<li class="item assertive">
|
||||
assertive
|
||||
<span class="color-demo assertive-bg"></span>
|
||||
<span class="color-demo assertive-bg assertive-border"></span>
|
||||
</li>
|
||||
<li class="item balanced">
|
||||
balanced
|
||||
<span class="color-demo balanced-bg"></span>
|
||||
<span class="color-demo balanced-bg balanced-border"></span>
|
||||
</li>
|
||||
<li class="item energized">
|
||||
energized
|
||||
<span class="color-demo energized-bg"></span>
|
||||
<span class="color-demo energized-bg energized-border"></span>
|
||||
</li>
|
||||
<li class="item royal">
|
||||
royal
|
||||
<span class="color-demo royal-bg"></span>
|
||||
<span class="color-demo royal-bg royal-border"></span>
|
||||
</li>
|
||||
<li class="item pure dark-bg">
|
||||
pure
|
||||
<span class="color-demo pure-bg"></span>
|
||||
<li class="item dark">
|
||||
light
|
||||
<span class="color-demo light-bg light-border"></span>
|
||||
</li>
|
||||
<li class="item subdued-light dark-bg">
|
||||
subdued-light
|
||||
<span class="color-demo subdued-light-bg"></span>
|
||||
</li>
|
||||
<li class="item subdued">
|
||||
subdued
|
||||
<span class="color-demo subdued-bg"></span>
|
||||
</li>
|
||||
<li class="item subdued-dark">
|
||||
subdued-dark
|
||||
<span class="color-demo subdued-dark-bg"></span>
|
||||
<li class="item dark">
|
||||
stable
|
||||
<span class="color-demo stable-bg stable-border"></span>
|
||||
</li>
|
||||
<li class="item dark">
|
||||
dark
|
||||
<span class="color-demo dark-bg"></span>
|
||||
<span class="color-demo dark-bg dark-border"></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user