59 lines
1.3 KiB
SCSS
59 lines
1.3 KiB
SCSS
//
|
|
// badge.scss
|
|
//
|
|
|
|
.badge {
|
|
line-height: 0.95;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
//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);
|
|
} |