improvement: base card coloring
This commit is contained in:
parent
4866816d56
commit
0a64b2456c
|
@ -18,6 +18,14 @@ $whiteness_value: 0.8;
|
|||
}
|
||||
}
|
||||
|
||||
@function darkenColor($color) {
|
||||
@return darken($color, 10%);
|
||||
}
|
||||
|
||||
@function lightenColor($color) {
|
||||
@return lighten($color, 10%);
|
||||
}
|
||||
|
||||
@function list-colors() {
|
||||
$newmap: map.merge($palette, $semantics);
|
||||
@return $newmap;
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
@mixin button-hover($background-color, $light-color, $dark-color) {
|
||||
@include background-color(lighten($background-color, 10%), $light-color, $dark-color);
|
||||
@include background-color(lightenColor($background-color), $light-color, $dark-color);
|
||||
}
|
||||
|
||||
// 11.1 - Buttons
|
||||
|
|
|
@ -1,10 +1,14 @@
|
|||
// Mixin and colors
|
||||
|
||||
$card-color-default: white;
|
||||
$card-color-default: get_color("light");
|
||||
|
||||
@mixin card-self-contained() {
|
||||
@include borders();
|
||||
@include card-container();
|
||||
background-color:$card-color-default;
|
||||
border-color: darkenColor($card-color-default);
|
||||
box-shadow: inset 0px 0px 0px 2px lightenColor($card-color-default);
|
||||
border-style:solid;
|
||||
}
|
||||
|
||||
@mixin card-container() {
|
||||
|
@ -16,19 +20,26 @@ $card-color-default: white;
|
|||
}
|
||||
|
||||
@mixin card-element() {
|
||||
border:0;
|
||||
border-radius:0;
|
||||
@include borders();
|
||||
border-top-width:0;
|
||||
border-bottom-width:0;
|
||||
background-color:$card-color-default;
|
||||
border-color: darkenColor($card-color-default);
|
||||
box-shadow: inset 0px 0px 0px 2px lightenColor($card-color-default);
|
||||
|
||||
&:first-child {
|
||||
border-top-width:2px;
|
||||
@include border-radius-top($border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width:2px;
|
||||
@include border-radius-bottom($border-radius);
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-top-width:2px;
|
||||
border-bottom-width:2px;
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
@ -45,13 +56,23 @@ $card-color-default: white;
|
|||
|
||||
@mixin colorize-card() {
|
||||
@each $name, $color in list-colors() {
|
||||
&-#{$name} { @include card-color(get-color($name), #FFF, #000); }
|
||||
&-#{$name} {
|
||||
@include card-color(get-color($name), #FFF, #000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-color($background-color, $light-color, $dark-color) {
|
||||
& > .card-header, & > .card-footer { @include background-color($background-color, $light-color, $dark-color); }
|
||||
&.card-colored > .card-body { @include background-color($background-color, $light-color, $dark-color); }
|
||||
& > .card-header, & > .card-footer {
|
||||
@include background-color($background-color, $light-color, $dark-color);
|
||||
border-color: darkenColor($background-color);
|
||||
box-shadow: inset 0px 0px 0px 2px lightenColor($background-color);
|
||||
}
|
||||
&.card-colored > .card-body {
|
||||
@include background-color($background-color, $light-color, $dark-color);
|
||||
border-color: darkenColor($background-color);
|
||||
box-shadow: inset 0px 0px 0px 2px lightenColor($background-color);
|
||||
}
|
||||
}
|
||||
|
||||
// ALERT COLORIZATION
|
||||
|
@ -63,20 +84,9 @@ $card-color-default: white;
|
|||
}
|
||||
|
||||
@mixin alert-color($background-color) {
|
||||
background-color: lighten($background-color, 35%);
|
||||
@if (luminance($background-color) > 128 * 0.8) {
|
||||
color: darken($background-color, 70%);
|
||||
a, .alert-link {
|
||||
color:darken($background-color, 70%);
|
||||
font-weight:bold;
|
||||
}
|
||||
} @else {
|
||||
color: lighten($background-color, 80%);
|
||||
a, .alert-link {
|
||||
color:lighten($background-color, 85%);
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
@include background-color($background-color, #FFF, get_color("dark"));
|
||||
border-color: darkenColor($background-color);
|
||||
box-shadow: inset 0px 0px 0px 2px lightenColor($background-color);
|
||||
|
||||
}
|
||||
|
||||
|
@ -103,7 +113,6 @@ $card-color-default: white;
|
|||
@include card-element();
|
||||
@include borders();
|
||||
font-size:1.1em;
|
||||
box-shadow: $inset-relief;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
|
||||
font-weight:600;
|
||||
border-radius: 0;
|
||||
|
@ -171,9 +180,9 @@ a.list-group-item:hover {
|
|||
/* 10.2 - Breadcrumb */
|
||||
|
||||
.breadcrumb {
|
||||
@include card-relief();
|
||||
@include li-no-margin();
|
||||
background-color:#eeeeec;
|
||||
@include card-self-contained();
|
||||
border-style:solid;
|
||||
}
|
||||
|
||||
/* 10.3 - Alerts */
|
||||
|
@ -183,4 +192,5 @@ a.list-group-item:hover {
|
|||
color:rgba(0, 0, 0, 0.7);
|
||||
|
||||
@include colorize-alert();
|
||||
border-style:solid;
|
||||
}
|
||||
|
|
340
style.css
340
style.css
|
@ -614,202 +614,291 @@ ul.social li a:hover {
|
|||
.card-blue > .card-header, .card-blue > .card-footer {
|
||||
background-color: #4e63c9 !important;
|
||||
color: #FFF;
|
||||
border-color: #354aaf;
|
||||
box-shadow: inset 0px 0px 0px 2px #7585d5;
|
||||
}
|
||||
.card-blue.card-colored > .card-body {
|
||||
background-color: #4e63c9 !important;
|
||||
color: #FFF;
|
||||
border-color: #354aaf;
|
||||
box-shadow: inset 0px 0px 0px 2px #7585d5;
|
||||
}
|
||||
.card-violet > .card-header, .card-violet > .card-footer {
|
||||
background-color: #ce4dcd !important;
|
||||
color: #FFF;
|
||||
border-color: #b632b5;
|
||||
box-shadow: inset 0px 0px 0px 2px #d975d8;
|
||||
}
|
||||
.card-violet.card-colored > .card-body {
|
||||
background-color: #ce4dcd !important;
|
||||
color: #FFF;
|
||||
border-color: #b632b5;
|
||||
box-shadow: inset 0px 0px 0px 2px #d975d8;
|
||||
}
|
||||
.card-purple > .card-header, .card-purple > .card-footer {
|
||||
background-color: #7951c0 !important;
|
||||
color: #FFF;
|
||||
border-color: #603ba3;
|
||||
box-shadow: inset 0px 0px 0px 2px #9676ce;
|
||||
}
|
||||
.card-purple.card-colored > .card-body {
|
||||
background-color: #7951c0 !important;
|
||||
color: #FFF;
|
||||
border-color: #603ba3;
|
||||
box-shadow: inset 0px 0px 0px 2px #9676ce;
|
||||
}
|
||||
.card-red > .card-header, .card-red > .card-footer {
|
||||
background-color: #e33d22 !important;
|
||||
color: #FFF;
|
||||
border-color: #ba2e18;
|
||||
box-shadow: inset 0px 0px 0px 2px #e9654f;
|
||||
}
|
||||
.card-red.card-colored > .card-body {
|
||||
background-color: #e33d22 !important;
|
||||
color: #FFF;
|
||||
border-color: #ba2e18;
|
||||
box-shadow: inset 0px 0px 0px 2px #e9654f;
|
||||
}
|
||||
.card-orange > .card-header, .card-orange > .card-footer {
|
||||
background-color: #eb790a !important;
|
||||
color: #FFF;
|
||||
border-color: #ba6008;
|
||||
box-shadow: inset 0px 0px 0px 2px #f69332;
|
||||
}
|
||||
.card-orange.card-colored > .card-body {
|
||||
background-color: #eb790a !important;
|
||||
color: #FFF;
|
||||
border-color: #ba6008;
|
||||
box-shadow: inset 0px 0px 0px 2px #f69332;
|
||||
}
|
||||
.card-green > .card-header, .card-green > .card-footer {
|
||||
background-color: #75b82d !important;
|
||||
color: #FFF;
|
||||
border-color: #5b8f23;
|
||||
box-shadow: inset 0px 0px 0px 2px #8fd246;
|
||||
}
|
||||
.card-green.card-colored > .card-body {
|
||||
background-color: #75b82d !important;
|
||||
color: #FFF;
|
||||
border-color: #5b8f23;
|
||||
box-shadow: inset 0px 0px 0px 2px #8fd246;
|
||||
}
|
||||
.card-skyblue > .card-header, .card-skyblue > .card-footer {
|
||||
background-color: #42a0f3 !important;
|
||||
color: #FFF;
|
||||
border-color: #1288f0;
|
||||
box-shadow: inset 0px 0px 0px 2px #72b8f6;
|
||||
}
|
||||
.card-skyblue.card-colored > .card-body {
|
||||
background-color: #42a0f3 !important;
|
||||
color: #FFF;
|
||||
border-color: #1288f0;
|
||||
box-shadow: inset 0px 0px 0px 2px #72b8f6;
|
||||
}
|
||||
.card-dark > .card-header, .card-dark > .card-footer {
|
||||
background-color: #2D2D2D !important;
|
||||
color: #FFF;
|
||||
border-color: #141414;
|
||||
box-shadow: inset 0px 0px 0px 2px #474747;
|
||||
}
|
||||
.card-dark.card-colored > .card-body {
|
||||
background-color: #2D2D2D !important;
|
||||
color: #FFF;
|
||||
border-color: #141414;
|
||||
box-shadow: inset 0px 0px 0px 2px #474747;
|
||||
}
|
||||
.card-light > .card-header, .card-light > .card-footer {
|
||||
background-color: #eeeeec !important;
|
||||
color: #000;
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
}
|
||||
.card-light.card-colored > .card-body {
|
||||
background-color: #eeeeec !important;
|
||||
color: #000;
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
}
|
||||
.card-turquoise > .card-header, .card-turquoise > .card-footer {
|
||||
background-color: #46bd9e !important;
|
||||
color: #FFF;
|
||||
border-color: #379980;
|
||||
box-shadow: inset 0px 0px 0px 2px #6ccab2;
|
||||
}
|
||||
.card-turquoise.card-colored > .card-body {
|
||||
background-color: #46bd9e !important;
|
||||
color: #FFF;
|
||||
border-color: #379980;
|
||||
box-shadow: inset 0px 0px 0px 2px #6ccab2;
|
||||
}
|
||||
.card-yellow > .card-header, .card-yellow > .card-footer {
|
||||
background-color: #f6d32d !important;
|
||||
color: #FFF;
|
||||
border-color: #e6c00a;
|
||||
box-shadow: inset 0px 0px 0px 2px #f8dd5e;
|
||||
}
|
||||
.card-yellow.card-colored > .card-body {
|
||||
background-color: #f6d32d !important;
|
||||
color: #FFF;
|
||||
border-color: #e6c00a;
|
||||
box-shadow: inset 0px 0px 0px 2px #f8dd5e;
|
||||
}
|
||||
.card-brown > .card-header, .card-brown > .card-footer {
|
||||
background-color: #986a44 !important;
|
||||
color: #FFF;
|
||||
border-color: #755134;
|
||||
box-shadow: inset 0px 0px 0px 2px #b5835a;
|
||||
}
|
||||
.card-brown.card-colored > .card-body {
|
||||
background-color: #986a44 !important;
|
||||
color: #FFF;
|
||||
border-color: #755134;
|
||||
box-shadow: inset 0px 0px 0px 2px #b5835a;
|
||||
}
|
||||
.card-grey > .card-header, .card-grey > .card-footer {
|
||||
background-color: #77767b !important;
|
||||
color: #FFF;
|
||||
border-color: #5e5d61;
|
||||
box-shadow: inset 0px 0px 0px 2px #919094;
|
||||
}
|
||||
.card-grey.card-colored > .card-body {
|
||||
background-color: #77767b !important;
|
||||
color: #FFF;
|
||||
border-color: #5e5d61;
|
||||
box-shadow: inset 0px 0px 0px 2px #919094;
|
||||
}
|
||||
.card-primary > .card-header, .card-primary > .card-footer {
|
||||
background-color: #7951c0 !important;
|
||||
color: #FFF;
|
||||
border-color: #603ba3;
|
||||
box-shadow: inset 0px 0px 0px 2px #9676ce;
|
||||
}
|
||||
.card-primary.card-colored > .card-body {
|
||||
background-color: #7951c0 !important;
|
||||
color: #FFF;
|
||||
border-color: #603ba3;
|
||||
box-shadow: inset 0px 0px 0px 2px #9676ce;
|
||||
}
|
||||
.card-secondary > .card-header, .card-secondary > .card-footer {
|
||||
background-color: #4e63c9 !important;
|
||||
color: #FFF;
|
||||
border-color: #354aaf;
|
||||
box-shadow: inset 0px 0px 0px 2px #7585d5;
|
||||
}
|
||||
.card-secondary.card-colored > .card-body {
|
||||
background-color: #4e63c9 !important;
|
||||
color: #FFF;
|
||||
border-color: #354aaf;
|
||||
box-shadow: inset 0px 0px 0px 2px #7585d5;
|
||||
}
|
||||
.card-warning > .card-header, .card-warning > .card-footer {
|
||||
background-color: #eb790a !important;
|
||||
color: #FFF;
|
||||
border-color: #ba6008;
|
||||
box-shadow: inset 0px 0px 0px 2px #f69332;
|
||||
}
|
||||
.card-warning.card-colored > .card-body {
|
||||
background-color: #eb790a !important;
|
||||
color: #FFF;
|
||||
border-color: #ba6008;
|
||||
box-shadow: inset 0px 0px 0px 2px #f69332;
|
||||
}
|
||||
.card-danger > .card-header, .card-danger > .card-footer {
|
||||
background-color: #e33d22 !important;
|
||||
color: #FFF;
|
||||
border-color: #ba2e18;
|
||||
box-shadow: inset 0px 0px 0px 2px #e9654f;
|
||||
}
|
||||
.card-danger.card-colored > .card-body {
|
||||
background-color: #e33d22 !important;
|
||||
color: #FFF;
|
||||
border-color: #ba2e18;
|
||||
box-shadow: inset 0px 0px 0px 2px #e9654f;
|
||||
}
|
||||
.card-info > .card-header, .card-info > .card-footer {
|
||||
background-color: #42a0f3 !important;
|
||||
color: #FFF;
|
||||
border-color: #1288f0;
|
||||
box-shadow: inset 0px 0px 0px 2px #72b8f6;
|
||||
}
|
||||
.card-info.card-colored > .card-body {
|
||||
background-color: #42a0f3 !important;
|
||||
color: #FFF;
|
||||
border-color: #1288f0;
|
||||
box-shadow: inset 0px 0px 0px 2px #72b8f6;
|
||||
}
|
||||
.card-success > .card-header, .card-success > .card-footer {
|
||||
background-color: #75b82d !important;
|
||||
color: #FFF;
|
||||
border-color: #5b8f23;
|
||||
box-shadow: inset 0px 0px 0px 2px #8fd246;
|
||||
}
|
||||
.card-success.card-colored > .card-body {
|
||||
background-color: #75b82d !important;
|
||||
color: #FFF;
|
||||
border-color: #5b8f23;
|
||||
box-shadow: inset 0px 0px 0px 2px #8fd246;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
background-color: #eeeeec;
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
}
|
||||
.card-body:first-child {
|
||||
border-top-width: 2px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.card-body:last-child {
|
||||
border-bottom-width: 2px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
.card-body:only-child {
|
||||
border-top-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
/* 10.1.1 - Headers */
|
||||
.card-header, .card-footer {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
background-color: #eeeeec;
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
font-size: 1.1em;
|
||||
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
font-weight: 600;
|
||||
border-radius: 0;
|
||||
}
|
||||
.card-header:first-child, .card-footer:first-child {
|
||||
border-top-width: 2px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.card-header:last-child, .card-footer:last-child {
|
||||
border-bottom-width: 2px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
.card-header:only-child, .card-footer:only-child {
|
||||
border-top-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10, .card-footer h1, .card-footer h2, .card-footer h3, .card-footer h4, .card-footer h5, .card-footer h6, .card-footer h7, .card-footer h8, .card-footer h9, .card-footer h10 {
|
||||
|
@ -825,24 +914,31 @@ ul.social li a:hover {
|
|||
/* 10.1.2 - Meta */
|
||||
.card-meta {
|
||||
padding: 1em;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
background-color: #eeeeec;
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.card-meta:first-child {
|
||||
border-top-width: 2px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.card-meta:last-child {
|
||||
border-bottom-width: 2px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
.card-meta:only-child {
|
||||
border-top-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
.card-meta.media {
|
||||
|
@ -866,23 +962,30 @@ ul.social li a:hover {
|
|||
|
||||
/* 10.1.3 - Lists */
|
||||
.list-group {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
background-color: #eeeeec;
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
}
|
||||
.list-group:first-child {
|
||||
border-top-width: 2px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.list-group:last-child {
|
||||
border-bottom-width: 2px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
.list-group:only-child {
|
||||
border-top-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
|
@ -900,11 +1003,17 @@ a.list-group-item:hover {
|
|||
|
||||
/* 10.2 - Breadcrumb */
|
||||
.breadcrumb {
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: transparent;
|
||||
background-color: #eeeeec;
|
||||
}
|
||||
.breadcrumb .card-body:last-child {
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
border-style: solid;
|
||||
border-style: solid;
|
||||
}
|
||||
.breadcrumb li {
|
||||
margin: 0;
|
||||
|
@ -912,165 +1021,132 @@ a.list-group-item:hover {
|
|||
|
||||
/* 10.3 - Alerts */
|
||||
.alert {
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: transparent;
|
||||
background-color: white;
|
||||
background-color: #eeeeec;
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
border-style: solid;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
border-style: solid;
|
||||
}
|
||||
.alert-blue {
|
||||
background-color: #d7dcf3;
|
||||
color: black;
|
||||
}
|
||||
.alert-blue a, .alert-blue .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #4e63c9 !important;
|
||||
color: #FFF;
|
||||
border-color: #354aaf;
|
||||
box-shadow: inset 0px 0px 0px 2px #7585d5;
|
||||
}
|
||||
.alert-violet {
|
||||
background-color: #f5d9f4;
|
||||
color: black;
|
||||
}
|
||||
.alert-violet a, .alert-violet .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #ce4dcd !important;
|
||||
color: #FFF;
|
||||
border-color: #b632b5;
|
||||
box-shadow: inset 0px 0px 0px 2px #d975d8;
|
||||
}
|
||||
.alert-purple {
|
||||
background-color: #ded4ef;
|
||||
color: black;
|
||||
}
|
||||
.alert-purple a, .alert-purple .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #7951c0 !important;
|
||||
color: #FFF;
|
||||
border-color: #603ba3;
|
||||
box-shadow: inset 0px 0px 0px 2px #9676ce;
|
||||
}
|
||||
.alert-red {
|
||||
background-color: #f7c8c0;
|
||||
color: black;
|
||||
}
|
||||
.alert-red a, .alert-red .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #e33d22 !important;
|
||||
color: #FFF;
|
||||
border-color: #ba2e18;
|
||||
box-shadow: inset 0px 0px 0px 2px #e9654f;
|
||||
}
|
||||
.alert-orange {
|
||||
background-color: #fbd3ac;
|
||||
color: black;
|
||||
}
|
||||
.alert-orange a, .alert-orange .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #eb790a !important;
|
||||
color: #FFF;
|
||||
border-color: #ba6008;
|
||||
box-shadow: inset 0px 0px 0px 2px #f69332;
|
||||
}
|
||||
.alert-green {
|
||||
background-color: #cdebad;
|
||||
color: black;
|
||||
}
|
||||
.alert-green a, .alert-green .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #75b82d !important;
|
||||
color: #FFF;
|
||||
border-color: #5b8f23;
|
||||
box-shadow: inset 0px 0px 0px 2px #8fd246;
|
||||
}
|
||||
.alert-skyblue {
|
||||
background-color: #eaf4fe;
|
||||
color: black;
|
||||
}
|
||||
.alert-skyblue a, .alert-skyblue .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #42a0f3 !important;
|
||||
color: #FFF;
|
||||
border-color: #1288f0;
|
||||
box-shadow: inset 0px 0px 0px 2px #72b8f6;
|
||||
}
|
||||
.alert-dark {
|
||||
background-color: #868686;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
.alert-dark a, .alert-dark .alert-link {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: #2D2D2D !important;
|
||||
color: #FFF;
|
||||
border-color: #141414;
|
||||
box-shadow: inset 0px 0px 0px 2px #474747;
|
||||
}
|
||||
.alert-light {
|
||||
background-color: white;
|
||||
color: #3e3e37;
|
||||
}
|
||||
.alert-light a, .alert-light .alert-link {
|
||||
color: #3e3e37;
|
||||
font-weight: bold;
|
||||
background-color: #eeeeec !important;
|
||||
color: #2D2D2D;
|
||||
border-color: #d6d6d1;
|
||||
box-shadow: inset 0px 0px 0px 2px white;
|
||||
}
|
||||
.alert-turquoise {
|
||||
background-color: #caece3;
|
||||
color: black;
|
||||
}
|
||||
.alert-turquoise a, .alert-turquoise .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #46bd9e !important;
|
||||
color: #FFF;
|
||||
border-color: #379980;
|
||||
box-shadow: inset 0px 0px 0px 2px #6ccab2;
|
||||
}
|
||||
.alert-yellow {
|
||||
background-color: #fdf7d8;
|
||||
color: black;
|
||||
}
|
||||
.alert-yellow a, .alert-yellow .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #f6d32d !important;
|
||||
color: #FFF;
|
||||
border-color: #e6c00a;
|
||||
box-shadow: inset 0px 0px 0px 2px #f8dd5e;
|
||||
}
|
||||
.alert-brown {
|
||||
background-color: #ddc5b2;
|
||||
color: black;
|
||||
}
|
||||
.alert-brown a, .alert-brown .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #986a44 !important;
|
||||
color: #FFF;
|
||||
border-color: #755134;
|
||||
box-shadow: inset 0px 0px 0px 2px #b5835a;
|
||||
}
|
||||
.alert-grey {
|
||||
background-color: #d1d1d3;
|
||||
color: black;
|
||||
}
|
||||
.alert-grey a, .alert-grey .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #77767b !important;
|
||||
color: #FFF;
|
||||
border-color: #5e5d61;
|
||||
box-shadow: inset 0px 0px 0px 2px #919094;
|
||||
}
|
||||
.alert-primary {
|
||||
background-color: #ded4ef;
|
||||
color: black;
|
||||
}
|
||||
.alert-primary a, .alert-primary .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #7951c0 !important;
|
||||
color: #FFF;
|
||||
border-color: #603ba3;
|
||||
box-shadow: inset 0px 0px 0px 2px #9676ce;
|
||||
}
|
||||
.alert-secondary {
|
||||
background-color: #d7dcf3;
|
||||
color: black;
|
||||
}
|
||||
.alert-secondary a, .alert-secondary .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #4e63c9 !important;
|
||||
color: #FFF;
|
||||
border-color: #354aaf;
|
||||
box-shadow: inset 0px 0px 0px 2px #7585d5;
|
||||
}
|
||||
.alert-warning {
|
||||
background-color: #fbd3ac;
|
||||
color: black;
|
||||
}
|
||||
.alert-warning a, .alert-warning .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #eb790a !important;
|
||||
color: #FFF;
|
||||
border-color: #ba6008;
|
||||
box-shadow: inset 0px 0px 0px 2px #f69332;
|
||||
}
|
||||
.alert-danger {
|
||||
background-color: #f7c8c0;
|
||||
color: black;
|
||||
}
|
||||
.alert-danger a, .alert-danger .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #e33d22 !important;
|
||||
color: #FFF;
|
||||
border-color: #ba2e18;
|
||||
box-shadow: inset 0px 0px 0px 2px #e9654f;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: #eaf4fe;
|
||||
color: black;
|
||||
}
|
||||
.alert-info a, .alert-info .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #42a0f3 !important;
|
||||
color: #FFF;
|
||||
border-color: #1288f0;
|
||||
box-shadow: inset 0px 0px 0px 2px #72b8f6;
|
||||
}
|
||||
.alert-success {
|
||||
background-color: #cdebad;
|
||||
color: black;
|
||||
}
|
||||
.alert-success a, .alert-success .alert-link {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #75b82d !important;
|
||||
color: #FFF;
|
||||
border-color: #5b8f23;
|
||||
box-shadow: inset 0px 0px 0px 2px #8fd246;
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
File diff suppressed because one or more lines are too long
Reference in New Issue