106 lines
2.3 KiB
SCSS
Executable File
Vendored
106 lines
2.3 KiB
SCSS
Executable File
Vendored
//
|
|
// badge.scss
|
|
//
|
|
|
|
// Soft badge
|
|
@mixin badge-variant-soft($bg) {
|
|
color: $bg;
|
|
background-color: rgba($bg, 0.1);
|
|
}
|
|
|
|
|
|
// Outline badge
|
|
@mixin badge-variant-outline($bg) {
|
|
color: $bg;
|
|
border: 1px solid $bg;
|
|
background-color: transparent;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.badge-outline-#{$color} {
|
|
@include badge-variant-outline($value);
|
|
}
|
|
}
|
|
|
|
// badge outline
|
|
|
|
.badge-outline {
|
|
background-color: var(--#{$prefix}card-bg-custom);
|
|
border: 1px solid;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.badge-soft-#{$color} {
|
|
@include badge-variant-soft($value);
|
|
}
|
|
|
|
.badge-outline {
|
|
&.badge-#{$color} {
|
|
@include badge-variant-outline($value);
|
|
}
|
|
}
|
|
|
|
.badge-label {
|
|
&.bg-#{$color} {
|
|
&:before {
|
|
border-right-color: $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// badge-border
|
|
|
|
.badge-border {
|
|
border-left: 2px solid;
|
|
}
|
|
|
|
// badge-label
|
|
|
|
.badge-label {
|
|
margin-left: 8px;
|
|
position: relative;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
border: 8px solid transparent;
|
|
border-right-color: $primary;
|
|
left: -14px;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
// [data-layout-mode="dark"]{
|
|
// .badge{
|
|
// &.bg-dark{
|
|
// background-color: var(--#{$prefix}light) !important;
|
|
// }
|
|
|
|
// &.bg-light{
|
|
// background-color: var(--#{$prefix}dark) !important;
|
|
// color: var(--#{$prefix}light) !important;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
//Badge Gradient Style
|
|
$gradients: ();
|
|
$gradients: map-merge((primary: linear-gradient(135deg, $primary 0%, $success 100%),
|
|
secondary: linear-gradient(135deg, $secondary 0%, $info 100%),
|
|
success: linear-gradient(135deg, $success 0%, $warning 100%),
|
|
danger: linear-gradient(135deg, $danger 0%, $secondary 100%),
|
|
warning: linear-gradient(135deg, $warning 0%, darken($warning, 15%) 100%),
|
|
info: linear-gradient(135deg, $info 0%, $success 100%),
|
|
dark: linear-gradient(135deg, $dark 0%, $primary 100%)),
|
|
$gradients);
|
|
|
|
@mixin badge-gradient($parent, $gradient) {
|
|
#{$parent} {
|
|
background: $gradient;
|
|
}
|
|
}
|
|
|
|
@each $gradient,
|
|
$value in $gradients {
|
|
@include badge-gradient(".badge-gradient-#{$gradient}", $value);
|
|
} |