75 lines
2.0 KiB
SCSS
75 lines
2.0 KiB
SCSS
// List groups
|
|
// *******************************************************************************
|
|
|
|
@mixin list-group-item-variant($state: null, $background: null, $color: null) {
|
|
}
|
|
|
|
// Basic List groups
|
|
@mixin template-list-group-item-variant($parent, $background, $color: null) {
|
|
$background-color: if(
|
|
$dark-style,
|
|
shift-color($background, -$list-group-item-bg-scale, $card-bg),
|
|
shift-color($background, $list-group-item-bg-scale, $card-bg)
|
|
);
|
|
$border-color: if(
|
|
$dark-style,
|
|
if(
|
|
$parent == '.list-group-item-dark',
|
|
color-contrast($background),
|
|
shift-color($background, -$list-group-item-color-scale, $card-bg)
|
|
),
|
|
shift-color($background, $list-group-item-color-scale, $card-bg)
|
|
);
|
|
$color: shift-color($background, $list-group-item-color-scale);
|
|
$hover-background: shade-color($background-color, $list-group-item-bg-hover-scale);
|
|
#{$parent} {
|
|
border-color: $border-color;
|
|
background-color: $background-color;
|
|
color: $color !important;
|
|
}
|
|
|
|
a#{$parent},
|
|
button#{$parent} {
|
|
color: $color;
|
|
&:hover,
|
|
&:focus {
|
|
border-color: $border-color;
|
|
background-color: $hover-background;
|
|
color: $color;
|
|
}
|
|
|
|
&.active {
|
|
border-color: $border-color !important;
|
|
background-color: $background !important;
|
|
// color: if($color, $color, color-contrast($background));
|
|
color: color-contrast($background) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin template-list-group-theme($background, $color: null) {
|
|
@include template-list-group-item-variant('.list-group-item-primary', $background);
|
|
|
|
.list-group-item.active {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: rgba-to-hex(rgba($background, 0.16), $card-bg);
|
|
color: $background;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin template-list-group-timeline-variant($parent, $background) {
|
|
.list-group {
|
|
&.list-group-timeline {
|
|
#{$parent} {
|
|
&:before {
|
|
border-color: $background;
|
|
background-color: $background;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|