Compare commits
2 commits
main
...
light-dark
| Author | SHA1 | Date | |
|---|---|---|---|
|
a1a6a048a1 | ||
|
|
770bae827f |
6 changed files with 135 additions and 89 deletions
|
|
@ -148,5 +148,6 @@
|
|||
"invertValue": "#fff"
|
||||
}
|
||||
],
|
||||
"allColors": ["white", "black", "light", "dark", "primary", "link", "info", "success", "warning", "danger"],
|
||||
"justColors": ["primary", "link", "info", "success", "warning", "danger"]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -375,7 +375,7 @@ a:hover {
|
|||
}
|
||||
|
||||
code {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #ff3860;
|
||||
font-size: 0.875em;
|
||||
font-weight: normal;
|
||||
|
|
@ -383,7 +383,7 @@ code {
|
|||
}
|
||||
|
||||
hr {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border: none;
|
||||
display: block;
|
||||
height: 2px;
|
||||
|
|
@ -420,7 +420,7 @@ fieldset {
|
|||
|
||||
pre {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #4a4a4a;
|
||||
font-size: 0.875em;
|
||||
overflow-x: auto;
|
||||
|
|
@ -1640,12 +1640,12 @@ a.box:active {
|
|||
}
|
||||
|
||||
.button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.button.is-text:active, .button.is-text.is-active {
|
||||
background-color: #e8e8e8;
|
||||
background-color: #ededed;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
|
|
@ -2888,7 +2888,7 @@ fieldset[disabled] .button {
|
|||
}
|
||||
|
||||
.content blockquote {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-left: 5px solid #dbdbdb;
|
||||
padding: 1.25em 1.5em;
|
||||
}
|
||||
|
|
@ -3073,8 +3073,8 @@ fieldset[disabled] .input,
|
|||
.textarea[disabled],
|
||||
fieldset[disabled]
|
||||
.textarea {
|
||||
background-color: whitesmoke;
|
||||
border-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-color: #fafafa;
|
||||
box-shadow: none;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
|
@ -3401,8 +3401,8 @@ fieldset[disabled]
|
|||
|
||||
.select select[disabled],
|
||||
fieldset[disabled] .select select {
|
||||
background-color: whitesmoke;
|
||||
border-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-color: #fafafa;
|
||||
box-shadow: none;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
|
@ -3433,7 +3433,7 @@ fieldset[disabled] .select select:-ms-input-placeholder {
|
|||
|
||||
.select select[disabled]:hover,
|
||||
fieldset[disabled] .select select:hover {
|
||||
border-color: whitesmoke;
|
||||
border-color: #fafafa;
|
||||
}
|
||||
|
||||
.select select:not([multiple]) {
|
||||
|
|
@ -4585,7 +4585,7 @@ fieldset[disabled] .select select:hover {
|
|||
}
|
||||
|
||||
.notification {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
|
||||
position: relative;
|
||||
|
|
@ -5167,7 +5167,7 @@ fieldset[disabled] .select select:hover {
|
|||
|
||||
.tag:not(body) {
|
||||
align-items: center;
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
color: #4a4a4a;
|
||||
display: inline-flex;
|
||||
|
|
@ -5291,11 +5291,11 @@ fieldset[disabled] .select select:hover {
|
|||
}
|
||||
|
||||
.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
|
||||
background-color: #e8e8e8;
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
.tag:not(body).is-delete:active {
|
||||
background-color: #dbdbdb;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.tag:not(body).is-rounded {
|
||||
|
|
@ -5447,7 +5447,7 @@ a.tag:hover {
|
|||
|
||||
.number {
|
||||
align-items: center;
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 290486px;
|
||||
display: inline-flex;
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -5681,7 +5681,7 @@ button.dropdown-item {
|
|||
|
||||
a.dropdown-item:hover,
|
||||
button.dropdown-item:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
|
|
@ -5846,7 +5846,7 @@ button.dropdown-item.is-active {
|
|||
}
|
||||
|
||||
a.list-item {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -5946,7 +5946,7 @@ a.list-item {
|
|||
}
|
||||
|
||||
.menu-list a:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
|
|
@ -5977,7 +5977,7 @@ a.list-item {
|
|||
}
|
||||
|
||||
.message {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -6014,11 +6014,11 @@ a.list-item {
|
|||
|
||||
.message.is-white .message-body {
|
||||
border-color: white;
|
||||
color: #4d4d4d;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.message.is-black {
|
||||
background-color: #fafafa;
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
.message.is-black .message-header {
|
||||
|
|
@ -6028,7 +6028,7 @@ a.list-item {
|
|||
|
||||
.message.is-black .message-body {
|
||||
border-color: #0a0a0a;
|
||||
color: #090909;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message.is-light {
|
||||
|
|
@ -6042,11 +6042,11 @@ a.list-item {
|
|||
|
||||
.message.is-light .message-body {
|
||||
border-color: whitesmoke;
|
||||
color: #505050;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.message.is-dark {
|
||||
background-color: #fafafa;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.message.is-dark .message-header {
|
||||
|
|
@ -6056,11 +6056,11 @@ a.list-item {
|
|||
|
||||
.message.is-dark .message-body {
|
||||
border-color: #363636;
|
||||
color: #2a2a2a;
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
.message.is-primary {
|
||||
background-color: #f5fffd;
|
||||
background-color: #ebfffc;
|
||||
}
|
||||
|
||||
.message.is-primary .message-header {
|
||||
|
|
@ -6070,11 +6070,11 @@ a.list-item {
|
|||
|
||||
.message.is-primary .message-body {
|
||||
border-color: #00d1b2;
|
||||
color: #021310;
|
||||
color: #00947e;
|
||||
}
|
||||
|
||||
.message.is-link {
|
||||
background-color: #f6f9fe;
|
||||
background-color: #eef3fc;
|
||||
}
|
||||
|
||||
.message.is-link .message-header {
|
||||
|
|
@ -6084,11 +6084,11 @@ a.list-item {
|
|||
|
||||
.message.is-link .message-body {
|
||||
border-color: #3273dc;
|
||||
color: #22509a;
|
||||
color: #153e7e;
|
||||
}
|
||||
|
||||
.message.is-info {
|
||||
background-color: #f6fbfe;
|
||||
background-color: #ecf7fe;
|
||||
}
|
||||
|
||||
.message.is-info .message-header {
|
||||
|
|
@ -6098,11 +6098,11 @@ a.list-item {
|
|||
|
||||
.message.is-info .message-body {
|
||||
border-color: #209cee;
|
||||
color: #12537e;
|
||||
color: #0a578a;
|
||||
}
|
||||
|
||||
.message.is-success {
|
||||
background-color: #f6fef9;
|
||||
background-color: #eefcf3;
|
||||
}
|
||||
|
||||
.message.is-success .message-header {
|
||||
|
|
@ -6112,11 +6112,11 @@ a.list-item {
|
|||
|
||||
.message.is-success .message-body {
|
||||
border-color: #23d160;
|
||||
color: #0e301a;
|
||||
color: #157e3a;
|
||||
}
|
||||
|
||||
.message.is-warning {
|
||||
background-color: #fffdf5;
|
||||
background-color: #fffbeb;
|
||||
}
|
||||
|
||||
.message.is-warning .message-header {
|
||||
|
|
@ -6126,11 +6126,11 @@ a.list-item {
|
|||
|
||||
.message.is-warning .message-body {
|
||||
border-color: #ffdd57;
|
||||
color: #3b3108;
|
||||
color: #947600;
|
||||
}
|
||||
|
||||
.message.is-danger {
|
||||
background-color: #fff5f7;
|
||||
background-color: #ffebef;
|
||||
}
|
||||
|
||||
.message.is-danger .message-header {
|
||||
|
|
@ -6140,14 +6140,14 @@ a.list-item {
|
|||
|
||||
.message.is-danger .message-body {
|
||||
border-color: #ff3860;
|
||||
color: #cd0930;
|
||||
color: #94001e;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
align-items: center;
|
||||
background-color: #4a4a4a;
|
||||
background-color: white;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: #fff;
|
||||
color: #363636;
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
justify-content: space-between;
|
||||
|
|
@ -6242,7 +6242,7 @@ a.list-item {
|
|||
.modal-card-head,
|
||||
.modal-card-foot {
|
||||
align-items: center;
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -6918,7 +6918,7 @@ a.list-item {
|
|||
}
|
||||
|
||||
.navbar.has-shadow {
|
||||
box-shadow: 0 2px 0 0 whitesmoke;
|
||||
box-shadow: 0 2px 0 0 #fafafa;
|
||||
}
|
||||
|
||||
.navbar.is-fixed-bottom, .navbar.is-fixed-top {
|
||||
|
|
@ -6933,7 +6933,7 @@ a.list-item {
|
|||
}
|
||||
|
||||
.navbar.is-fixed-bottom.has-shadow {
|
||||
box-shadow: 0 -2px 0 0 whitesmoke;
|
||||
box-shadow: 0 -2px 0 0 #fafafa;
|
||||
}
|
||||
|
||||
.navbar.is-fixed-top {
|
||||
|
|
@ -7119,7 +7119,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
|
|||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border: none;
|
||||
display: none;
|
||||
height: 2px;
|
||||
|
|
@ -7208,11 +7208,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
|
|||
background-color: transparent !important;
|
||||
}
|
||||
.navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #3273dc;
|
||||
}
|
||||
.navbar-burger {
|
||||
|
|
@ -7282,11 +7282,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
|
|||
padding-right: 3rem;
|
||||
}
|
||||
.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar-dropdown a.navbar-item.is-active {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #3273dc;
|
||||
}
|
||||
.navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed {
|
||||
|
|
@ -7547,7 +7547,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
|
|||
}
|
||||
|
||||
.panel-heading {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: #363636;
|
||||
font-size: 1.25em;
|
||||
|
|
@ -7620,7 +7620,7 @@ label.panel-block {
|
|||
|
||||
a.panel-block:hover,
|
||||
label.panel-block:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
|
|
@ -7727,7 +7727,7 @@ label.panel-block:hover {
|
|||
}
|
||||
|
||||
.tabs.is-boxed a:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-bottom-color: #dbdbdb;
|
||||
}
|
||||
|
||||
|
|
@ -7751,7 +7751,7 @@ label.panel-block:hover {
|
|||
}
|
||||
|
||||
.tabs.is-toggle a:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-color: #b5b5b5;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -10671,11 +10671,11 @@ label.panel-block:hover {
|
|||
}
|
||||
|
||||
.bd-prev-next a:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.bd-prev-next-bis {
|
||||
border-top: 2px solid whitesmoke;
|
||||
border-top: 2px solid #fafafa;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 3rem;
|
||||
|
|
@ -10973,7 +10973,7 @@ label.panel-block:hover {
|
|||
}
|
||||
|
||||
.highlight {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 6px;
|
||||
color: #586e75;
|
||||
}
|
||||
|
|
@ -12528,7 +12528,7 @@ svg {
|
|||
}
|
||||
|
||||
.bd-box {
|
||||
border: 4px solid whitesmoke;
|
||||
border: 4px solid #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -12670,7 +12670,7 @@ svg {
|
|||
}
|
||||
|
||||
.bd-notification {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
color: #7a7a7a;
|
||||
font-weight: 600;
|
||||
|
|
@ -12762,7 +12762,7 @@ svg {
|
|||
.bd-example,
|
||||
.bd-structure,
|
||||
.bd-snippet {
|
||||
border: 2px solid whitesmoke;
|
||||
border: 2px solid #fafafa;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -12978,7 +12978,7 @@ svg {
|
|||
right: 0;
|
||||
top: 0;
|
||||
background: rgba(10, 10, 10, 0.7);
|
||||
background: whitesmoke;
|
||||
background: #fafafa;
|
||||
border: 1px solid #dbdbdb;
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
@ -13053,7 +13053,7 @@ svg {
|
|||
right: 0;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
background-color: rgba(245, 245, 245, 0.7);
|
||||
background-color: rgba(250, 250, 250, 0.7);
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
|
|
@ -13114,7 +13114,7 @@ svg {
|
|||
}
|
||||
|
||||
.bd-callout {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
|
||||
position: relative;
|
||||
|
|
@ -13596,7 +13596,7 @@ svg {
|
|||
}
|
||||
|
||||
.bd-testimonials {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.bd-testimonial {
|
||||
|
|
@ -13747,7 +13747,7 @@ svg {
|
|||
}
|
||||
|
||||
.bd-shoutout {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -13861,7 +13861,7 @@ svg {
|
|||
}
|
||||
|
||||
.bd-bootstrap-comparison .table .bd-is-empty {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
|
|
@ -13892,7 +13892,7 @@ svg {
|
|||
}
|
||||
|
||||
.bd-klmn-gap {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
color: #ff3860;
|
||||
font-family: monospace;
|
||||
|
|
|
|||
|
|
@ -27,15 +27,6 @@ meta:
|
|||
{% endcapture %}
|
||||
|
||||
{% capture message_colors_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-header">
|
||||
<p>Dark</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
$message-background-color: $background !default
|
||||
$message-radius: $radius !default
|
||||
|
||||
$message-header-background-color: $text !default
|
||||
$message-header-color: $text-invert !default
|
||||
$message-header-background-color: $white !default
|
||||
$message-header-color: $text-strong !default
|
||||
$message-header-weight: $weight-bold !default
|
||||
$message-header-padding: 0.75em 1em !default
|
||||
$message-header-radius: $radius !default
|
||||
|
|
@ -37,21 +37,29 @@ $message-colors: $colors !default
|
|||
&.is-large
|
||||
font-size: $size-large
|
||||
// Colors
|
||||
@each $name, $pair in $message-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
$color-luminance: colorLuminance($color)
|
||||
$darken-percentage: $color-luminance * 70%
|
||||
$desaturate-percentage: $color-luminance * 30%
|
||||
@each $name, $list in $message-colors
|
||||
$color: nth($list, 1)
|
||||
$color-invert: nth($list, 2)
|
||||
$color-light: null
|
||||
$color-dark: null
|
||||
@if length($list) > 2
|
||||
$color-light: nth($list, 3)
|
||||
$color-dark: nth($list, 4)
|
||||
@else
|
||||
$color-light: findLightColor($color)
|
||||
$color-dark: findDarkColor($color)
|
||||
// $color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
// $color-luminance: colorLuminance($color)
|
||||
// $darken-percentage: $color-luminance * 70%
|
||||
// $desaturate-percentage: $color-luminance * 30%
|
||||
&.is-#{$name}
|
||||
background-color: lighten($color, $color-lightning)
|
||||
background-color: $color-light
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
||||
color: $color-dark
|
||||
|
||||
.message-header
|
||||
align-items: center
|
||||
|
|
|
|||
|
|
@ -6,30 +6,64 @@ $warning: $yellow !default
|
|||
$danger: $red !default
|
||||
|
||||
$light: $white-ter !default
|
||||
$lighter: $white-bis !default
|
||||
$dark: $grey-darker !default
|
||||
$darker: $black-ter !default
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert: findColorInvert($orange) !default
|
||||
$orange-light: findLightColor($orange) !default
|
||||
$orange-dark: findDarkColor($orange) !default
|
||||
$yellow-invert: findColorInvert($yellow) !default
|
||||
$yellow-light: findLightColor($yellow) !default
|
||||
$yellow-dark: findDarkColor($yellow) !default
|
||||
$green-invert: findColorInvert($green) !default
|
||||
$green-light: findLightColor($green) !default
|
||||
$green-dark: findDarkColor($green) !default
|
||||
$turquoise-invert: findColorInvert($turquoise) !default
|
||||
$turquoise-light: findLightColor($turquoise) !default
|
||||
$turquoise-dark: findDarkColor($turquoise) !default
|
||||
$cyan-invert: findColorInvert($cyan) !default
|
||||
$cyan-light: findLightColor($cyan) !default
|
||||
$cyan-dark: findDarkColor($cyan) !default
|
||||
$blue-invert: findColorInvert($blue) !default
|
||||
$blue-light: findLightColor($blue) !default
|
||||
$blue-dark: findDarkColor($blue) !default
|
||||
$purple-invert: findColorInvert($purple) !default
|
||||
$purple-light: findLightColor($purple) !default
|
||||
$purple-dark: findDarkColor($purple) !default
|
||||
$red-invert: findColorInvert($red) !default
|
||||
$red-light: findLightColor($red) !default
|
||||
$red-dark: findDarkColor($red) !default
|
||||
|
||||
$primary-invert: $turquoise-invert !default
|
||||
$primary-light: $turquoise-light !default
|
||||
$primary-dark: $turquoise-dark !default
|
||||
$info-invert: $cyan-invert !default
|
||||
$info-light: $cyan-light !default
|
||||
$info-dark: $cyan-dark !default
|
||||
$success-invert: $green-invert !default
|
||||
$success-light: $green-light !default
|
||||
$success-dark: $green-dark !default
|
||||
$warning-invert: $yellow-invert !default
|
||||
$warning-light: $yellow-light !default
|
||||
$warning-dark: $yellow-dark !default
|
||||
$danger-invert: $red-invert !default
|
||||
$danger-light: $red-light !default
|
||||
$danger-dark: $red-dark !default
|
||||
|
||||
$light-invert: $dark !default
|
||||
$light-light: $lighter !default
|
||||
$light-dark: $dark !default
|
||||
|
||||
$dark-invert: $light !default
|
||||
$dark-light: $light !default
|
||||
$dark-dark: $darker !default
|
||||
|
||||
// General colors
|
||||
|
||||
$background: $white-ter !default
|
||||
$background: $white-bis !default
|
||||
|
||||
$border: $grey-lighter !default
|
||||
$border-hover: $grey-light !default
|
||||
|
|
@ -53,6 +87,8 @@ $pre-background: $background !default
|
|||
|
||||
$link: $blue !default
|
||||
$link-invert: $blue-invert !default
|
||||
$link-light: $blue-light !default
|
||||
$link-dark: $blue-dark !default
|
||||
$link-visited: $purple !default
|
||||
|
||||
$link-hover: $grey-darker !default
|
||||
|
|
@ -79,7 +115,7 @@ $size-large: $size-4 !default
|
|||
$custom-colors: null !default
|
||||
$custom-shades: null !default
|
||||
|
||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
|
||||
$colors: mergeColorMaps(("white": ($white, $black, $white, $black), "black": ($black, $white, $black, $white), "light": ($light, $light-invert, $light-light, $light-dark), "dark": ($dark, $dark-invert, $dark-light, $dark-dark), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
|
||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||
|
|
|
|||
|
|
@ -56,7 +56,17 @@
|
|||
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
||||
|
||||
@function findColorInvert($color)
|
||||
@if (colorLuminance($color) > 0.55)
|
||||
@if (type-of($color) == 'color') and (colorLuminance($color) > 0.6)
|
||||
@return rgba(#000, 0.7)
|
||||
@else
|
||||
@return #fff
|
||||
|
||||
@function findLightColor($color)
|
||||
@if type-of($color) == 'color'
|
||||
@return change-color($color, $lightness: 96%)
|
||||
@return $background
|
||||
|
||||
@function findDarkColor($color)
|
||||
@if type-of($color) == 'color'
|
||||
@return change-color($color, $lightness: 29%)
|
||||
@return $text-strong
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue