palette: add three new colors (yellow, brown, grey)
This commit is contained in:
Kazhnuz
parent
2527064f61
commit
3ecf9a0028
3 changed files with 108 additions and 0 deletions
|
|
@ -383,6 +383,18 @@ a, a:hover, a:active {
|
|||
background-color: #46bd9e;
|
||||
color: #FFF; }
|
||||
|
||||
.card-yellow > .card-header {
|
||||
background-color: #f6d32d;
|
||||
color: #FFF; }
|
||||
|
||||
.card-brown > .card-header {
|
||||
background-color: #986a44;
|
||||
color: #FFF; }
|
||||
|
||||
.card-grey > .card-header {
|
||||
background-color: #77767b;
|
||||
color: #FFF; }
|
||||
|
||||
.card-primary > .card-header {
|
||||
background-color: #7951c0;
|
||||
color: #FFF; }
|
||||
|
|
@ -478,6 +490,27 @@ a, a:hover, a:active {
|
|||
background-color: #6ccab2;
|
||||
color: #FFF; }
|
||||
|
||||
.btn-yellow {
|
||||
background-color: #f6d32d;
|
||||
color: #FFF; }
|
||||
.btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active, .btn-yellow:not(.disabled):not(:disabled):focus {
|
||||
background-color: #f8dd5e;
|
||||
color: #FFF; }
|
||||
|
||||
.btn-brown {
|
||||
background-color: #986a44;
|
||||
color: #FFF; }
|
||||
.btn-brown:hover, .btn-brown:active, .btn-brown:focus, .btn-brown:not(.disabled):not(:disabled):hover, .btn-brown:not(.disabled):not(:disabled):active, .btn-brown:not(.disabled):not(:disabled):focus {
|
||||
background-color: #b5835a;
|
||||
color: #FFF; }
|
||||
|
||||
.btn-grey {
|
||||
background-color: #77767b;
|
||||
color: #FFF; }
|
||||
.btn-grey:hover, .btn-grey:active, .btn-grey:focus, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active, .btn-grey:not(.disabled):not(:disabled):focus {
|
||||
background-color: #919094;
|
||||
color: #FFF; }
|
||||
|
||||
.btn-primary {
|
||||
background-color: #7951c0;
|
||||
color: #FFF; }
|
||||
|
|
@ -627,6 +660,27 @@ a, a:hover, a:active {
|
|||
background-color: #6ccab2;
|
||||
color: #FFF; }
|
||||
|
||||
.badge-yellow {
|
||||
background-color: #f6d32d;
|
||||
color: #FFF; }
|
||||
.badge-yellow:hover, .badge-yellow:active, .badge-yellow:focus, a:hover > .badge-yellow, a:active > .badge-yellow, a:focus > .badge-yellow, .badge-yellow:not(.disabled):not(:disabled):hover, .badge-yellow:not(.disabled):not(:disabled):active, .badge-yellow:not(.disabled):not(:disabled):focus, a:hover > .badge-yellow:not(.disabled):not(:disabled), a:active > .badge-yellow:not(.disabled):not(:disabled), a:focus > .badge-yellow:not(.disabled):not(:disabled) {
|
||||
background-color: #f8dd5e;
|
||||
color: #FFF; }
|
||||
|
||||
.badge-brown {
|
||||
background-color: #986a44;
|
||||
color: #FFF; }
|
||||
.badge-brown:hover, .badge-brown:active, .badge-brown:focus, a:hover > .badge-brown, a:active > .badge-brown, a:focus > .badge-brown, .badge-brown:not(.disabled):not(:disabled):hover, .badge-brown:not(.disabled):not(:disabled):active, .badge-brown:not(.disabled):not(:disabled):focus, a:hover > .badge-brown:not(.disabled):not(:disabled), a:active > .badge-brown:not(.disabled):not(:disabled), a:focus > .badge-brown:not(.disabled):not(:disabled) {
|
||||
background-color: #b5835a;
|
||||
color: #FFF; }
|
||||
|
||||
.badge-grey {
|
||||
background-color: #77767b;
|
||||
color: #FFF; }
|
||||
.badge-grey:hover, .badge-grey:active, .badge-grey:focus, a:hover > .badge-grey, a:active > .badge-grey, a:focus > .badge-grey, .badge-grey:not(.disabled):not(:disabled):hover, .badge-grey:not(.disabled):not(:disabled):active, .badge-grey:not(.disabled):not(:disabled):focus, a:hover > .badge-grey:not(.disabled):not(:disabled), a:active > .badge-grey:not(.disabled):not(:disabled), a:focus > .badge-grey:not(.disabled):not(:disabled) {
|
||||
background-color: #919094;
|
||||
color: #FFF; }
|
||||
|
||||
.badge-primary {
|
||||
background-color: #7951c0;
|
||||
color: #FFF; }
|
||||
|
|
@ -710,6 +764,18 @@ a, a:hover, a:active {
|
|||
background-color: #46bd9e !important;
|
||||
color: #FFF; }
|
||||
|
||||
.bg-yellow {
|
||||
background-color: #f6d32d !important;
|
||||
color: #FFF; }
|
||||
|
||||
.bg-brown {
|
||||
background-color: #986a44 !important;
|
||||
color: #FFF; }
|
||||
|
||||
.bg-grey {
|
||||
background-color: #77767b !important;
|
||||
color: #FFF; }
|
||||
|
||||
.bg-primary {
|
||||
background-color: #7951c0 !important;
|
||||
color: #FFF; }
|
||||
|
|
@ -775,6 +841,18 @@ a, a:hover, a:active {
|
|||
background-color: #caece3;
|
||||
color: black; }
|
||||
|
||||
.alert-yellow {
|
||||
background-color: #fdf7d8;
|
||||
color: black; }
|
||||
|
||||
.alert-brown {
|
||||
background-color: #ddc5b2;
|
||||
color: black; }
|
||||
|
||||
.alert-grey {
|
||||
background-color: #d1d1d3;
|
||||
color: black; }
|
||||
|
||||
.alert-primary {
|
||||
background-color: #ded4ef;
|
||||
color: black; }
|
||||
|
|
@ -830,6 +908,15 @@ a, a:hover, a:active {
|
|||
.text-turquoise {
|
||||
color: #46bd9e; }
|
||||
|
||||
.text-yellow {
|
||||
color: #f6d32d; }
|
||||
|
||||
.text-brown {
|
||||
color: #986a44; }
|
||||
|
||||
.text-grey {
|
||||
color: #77767b; }
|
||||
|
||||
.text-primary {
|
||||
color: #7951c0; }
|
||||
|
||||
|
|
|
|||
|
|
@ -67,6 +67,9 @@ a, a:hover, a:active {
|
|||
&-dark { @include card-color($color-dark, #FFF); }
|
||||
&-light { @include card-color($color-light, #111); }
|
||||
&-turquoise { @include card-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include card-color($color-yellow, #FFF); }
|
||||
&-brown { @include card-color($color-brown, #FFF); }
|
||||
&-grey { @include card-color($color-grey, #FFF); }
|
||||
|
||||
&-primary { @include card-color($color-primary, #FFF); }
|
||||
&-secondary { @include card-color($color-secondary, #FFF); }
|
||||
|
|
@ -89,6 +92,9 @@ a, a:hover, a:active {
|
|||
&-dark { @include button-color($color-dark, #FFF); }
|
||||
&-light { @include button-color($color-light, #111); }
|
||||
&-turquoise { @include button-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include button-color($color-yellow, #FFF); }
|
||||
&-brown { @include button-color($color-brown, #FFF); }
|
||||
&-grey { @include button-color($color-grey, #FFF); }
|
||||
|
||||
&-primary { @include button-color($color-primary, #FFF); }
|
||||
&-secondary { @include button-color($color-secondary, #FFF); }
|
||||
|
|
@ -121,6 +127,9 @@ a, a:hover, a:active {
|
|||
&-dark { @include badge-color($color-dark, #FFF); }
|
||||
&-light { @include badge-color($color-light, #111); }
|
||||
&-turquoise { @include badge-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include badge-color($color-yellow, #FFF); }
|
||||
&-brown { @include badge-color($color-brown, #FFF); }
|
||||
&-grey { @include badge-color($color-grey, #FFF); }
|
||||
|
||||
&-primary { @include badge-color($color-primary, #FFF); }
|
||||
&-secondary { @include badge-color($color-secondary, #FFF); }
|
||||
|
|
@ -143,6 +152,9 @@ a, a:hover, a:active {
|
|||
&-dark { @include background-color($color-dark, #FFF); }
|
||||
&-light { @include background-color($color-light, #111); }
|
||||
&-turquoise { @include background-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include background-color($color-yellow, #FFF); }
|
||||
&-brown { @include background-color($color-brown, #FFF); }
|
||||
&-grey { @include background-color($color-grey, #FFF); }
|
||||
|
||||
&-primary { @include background-color($color-primary, #FFF); }
|
||||
&-secondary { @include background-color($color-secondary, #FFF); }
|
||||
|
|
@ -165,6 +177,9 @@ a, a:hover, a:active {
|
|||
&-dark { @include alert-color($color-dark); }
|
||||
&-light { @include alert-color($color-light); }
|
||||
&-turquoise { @include alert-color($color-turquoise); }
|
||||
&-yellow { @include alert-color($color-yellow); }
|
||||
&-brown { @include alert-color($color-brown); }
|
||||
&-grey { @include alert-color($color-grey); }
|
||||
|
||||
&-primary { @include alert-color($color-primary); }
|
||||
&-secondary { @include alert-color($color-secondary); }
|
||||
|
|
@ -187,6 +202,9 @@ a, a:hover, a:active {
|
|||
&-dark { @include text-color($color-dark); }
|
||||
&-light { @include text-color($color-light); }
|
||||
&-turquoise { @include text-color($color-turquoise); }
|
||||
&-yellow { @include text-color($color-yellow); }
|
||||
&-brown { @include text-color($color-brown); }
|
||||
&-grey { @include text-color($color-grey); }
|
||||
|
||||
&-primary { @include text-color($color-primary); }
|
||||
&-secondary { @include text-color($color-secondary); }
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ $color-skyblue: #42a0f3;
|
|||
$color-dark: #6d6d6d;
|
||||
$color-light: #eeeeec;
|
||||
$color-turquoise: #46bd9e;
|
||||
$color-yellow: #f6d32d;
|
||||
$color-brown: #986a44;
|
||||
$color-grey: #77767b;
|
||||
|
||||
$color-warning: $color-orange;
|
||||
$color-danger: $color-red;
|
||||
|
|
|
|||
Reference in a new issue