palette: add three new colors (yellow, brown, grey)

This commit is contained in:
Kazhnuz 2018-10-15 10:51:14 +02:00
parent 2527064f61
commit 3ecf9a0028
3 changed files with 108 additions and 0 deletions

View file

@ -383,6 +383,18 @@ a, a:hover, a:active {
background-color: #46bd9e; background-color: #46bd9e;
color: #FFF; } 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 { .card-primary > .card-header {
background-color: #7951c0; background-color: #7951c0;
color: #FFF; } color: #FFF; }
@ -478,6 +490,27 @@ a, a:hover, a:active {
background-color: #6ccab2; background-color: #6ccab2;
color: #FFF; } 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 { .btn-primary {
background-color: #7951c0; background-color: #7951c0;
color: #FFF; } color: #FFF; }
@ -627,6 +660,27 @@ a, a:hover, a:active {
background-color: #6ccab2; background-color: #6ccab2;
color: #FFF; } 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 { .badge-primary {
background-color: #7951c0; background-color: #7951c0;
color: #FFF; } color: #FFF; }
@ -710,6 +764,18 @@ a, a:hover, a:active {
background-color: #46bd9e !important; background-color: #46bd9e !important;
color: #FFF; } 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 { .bg-primary {
background-color: #7951c0 !important; background-color: #7951c0 !important;
color: #FFF; } color: #FFF; }
@ -775,6 +841,18 @@ a, a:hover, a:active {
background-color: #caece3; background-color: #caece3;
color: black; } 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 { .alert-primary {
background-color: #ded4ef; background-color: #ded4ef;
color: black; } color: black; }
@ -830,6 +908,15 @@ a, a:hover, a:active {
.text-turquoise { .text-turquoise {
color: #46bd9e; } color: #46bd9e; }
.text-yellow {
color: #f6d32d; }
.text-brown {
color: #986a44; }
.text-grey {
color: #77767b; }
.text-primary { .text-primary {
color: #7951c0; } color: #7951c0; }

View file

@ -67,6 +67,9 @@ a, a:hover, a:active {
&-dark { @include card-color($color-dark, #FFF); } &-dark { @include card-color($color-dark, #FFF); }
&-light { @include card-color($color-light, #111); } &-light { @include card-color($color-light, #111); }
&-turquoise { @include card-color($color-turquoise, #FFF); } &-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); } &-primary { @include card-color($color-primary, #FFF); }
&-secondary { @include card-color($color-secondary, #FFF); } &-secondary { @include card-color($color-secondary, #FFF); }
@ -89,6 +92,9 @@ a, a:hover, a:active {
&-dark { @include button-color($color-dark, #FFF); } &-dark { @include button-color($color-dark, #FFF); }
&-light { @include button-color($color-light, #111); } &-light { @include button-color($color-light, #111); }
&-turquoise { @include button-color($color-turquoise, #FFF); } &-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); } &-primary { @include button-color($color-primary, #FFF); }
&-secondary { @include button-color($color-secondary, #FFF); } &-secondary { @include button-color($color-secondary, #FFF); }
@ -121,6 +127,9 @@ a, a:hover, a:active {
&-dark { @include badge-color($color-dark, #FFF); } &-dark { @include badge-color($color-dark, #FFF); }
&-light { @include badge-color($color-light, #111); } &-light { @include badge-color($color-light, #111); }
&-turquoise { @include badge-color($color-turquoise, #FFF); } &-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); } &-primary { @include badge-color($color-primary, #FFF); }
&-secondary { @include badge-color($color-secondary, #FFF); } &-secondary { @include badge-color($color-secondary, #FFF); }
@ -143,6 +152,9 @@ a, a:hover, a:active {
&-dark { @include background-color($color-dark, #FFF); } &-dark { @include background-color($color-dark, #FFF); }
&-light { @include background-color($color-light, #111); } &-light { @include background-color($color-light, #111); }
&-turquoise { @include background-color($color-turquoise, #FFF); } &-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); } &-primary { @include background-color($color-primary, #FFF); }
&-secondary { @include background-color($color-secondary, #FFF); } &-secondary { @include background-color($color-secondary, #FFF); }
@ -165,6 +177,9 @@ a, a:hover, a:active {
&-dark { @include alert-color($color-dark); } &-dark { @include alert-color($color-dark); }
&-light { @include alert-color($color-light); } &-light { @include alert-color($color-light); }
&-turquoise { @include alert-color($color-turquoise); } &-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); } &-primary { @include alert-color($color-primary); }
&-secondary { @include alert-color($color-secondary); } &-secondary { @include alert-color($color-secondary); }
@ -187,6 +202,9 @@ a, a:hover, a:active {
&-dark { @include text-color($color-dark); } &-dark { @include text-color($color-dark); }
&-light { @include text-color($color-light); } &-light { @include text-color($color-light); }
&-turquoise { @include text-color($color-turquoise); } &-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); } &-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); } &-secondary { @include text-color($color-secondary); }

View file

@ -8,6 +8,9 @@ $color-skyblue: #42a0f3;
$color-dark: #6d6d6d; $color-dark: #6d6d6d;
$color-light: #eeeeec; $color-light: #eeeeec;
$color-turquoise: #46bd9e; $color-turquoise: #46bd9e;
$color-yellow: #f6d32d;
$color-brown: #986a44;
$color-grey: #77767b;
$color-warning: $color-orange; $color-warning: $color-orange;
$color-danger: $color-red; $color-danger: $color-red;