92 lines
2.2 KiB
SCSS
92 lines
2.2 KiB
SCSS
|
// Mixins
|
||
|
|
// Text color function
|
||
|
|
@function set-notification-text-color($color) {
|
||
|
|
@if (lightness($color) > 50) {
|
||
|
|
@return $black-base; // Lighter backgorund, return dark color
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
@return $white-base; // Darker background, return light color
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Button size
|
||
|
|
@mixin button-size($padding-y, $padding-x, $font-size) {
|
||
|
|
padding: $padding-y $padding-x;
|
||
|
|
font-size: $font-size;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Make button
|
||
|
|
@mixin make-button ($name, $color) {
|
||
|
|
.btn-#{$name} {
|
||
|
|
background-color: $color !important;
|
||
|
|
color: set-notification-text-color($color) !important;
|
||
|
|
border-color: $color;
|
||
|
|
&:hover {
|
||
|
|
background-color: lighten($color, 5%);
|
||
|
|
border-color: $color;
|
||
|
|
}
|
||
|
|
&:focus,
|
||
|
|
&.focus {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
&:focus,
|
||
|
|
&:active,
|
||
|
|
&.active {
|
||
|
|
background-color: darken($color, 20%);
|
||
|
|
}
|
||
|
|
&.dropdown-toggle {
|
||
|
|
background-color: $color !important;
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
background-color: lighten($color, 5%) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:not([disabled]):not(.disabled):active,
|
||
|
|
&:not([disabled]):not(.disabled).active,
|
||
|
|
.show>&.dropdown-toggle {
|
||
|
|
box-shadow: none;
|
||
|
|
background-color: darken($color, 20%) !important;
|
||
|
|
}
|
||
|
|
&:not([disabled]):not(.disabled):active:focus,
|
||
|
|
&:not([disabled]):not(.disabled).active:focus,
|
||
|
|
.show>&.dropdown-toggle:focus {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Make outline button
|
||
|
|
@mixin make-outline-button ($name, $color) {
|
||
|
|
.btn-outline-#{$name} {
|
||
|
|
border: 2px solid $color !important;
|
||
|
|
background-color: transparent;
|
||
|
|
color: $color !important;
|
||
|
|
&:hover {
|
||
|
|
color: set-notification-text-color($color) !important;
|
||
|
|
background-color: $color;
|
||
|
|
}
|
||
|
|
&:active,
|
||
|
|
&.active {
|
||
|
|
background-color: darken($color, 20%);
|
||
|
|
}
|
||
|
|
&:not([disabled]):not(.disabled):active,
|
||
|
|
&:not([disabled]):not(.disabled).active,
|
||
|
|
.show>&.dropdown-toggle {
|
||
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||
|
|
border-color: $color !important;
|
||
|
|
}
|
||
|
|
&:not([disabled]):not(.disabled):active:focus,
|
||
|
|
&:not([disabled]):not(.disabled).active:focus,
|
||
|
|
.show>&.dropdown-toggle:focus {
|
||
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Keyframes
|
||
|
|
@mixin keyframes($animation-name) {
|
||
|
|
@keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|