189 lines
5.4 KiB
SCSS
Executable File
189 lines
5.4 KiB
SCSS
Executable File
// Variables
|
|
//------------------------------------------------------
|
|
$list-primary: $aqua-light !default;
|
|
$list-info: $mint-light !default;
|
|
$list-warning: $sunflower-light !default;
|
|
$list-success: $grass-light !default;
|
|
$list-danger: $grapefruit-light !default;
|
|
|
|
$list-primary-hover: $aqua-dark !default;
|
|
$list-info-hover: $mint-dark !default;
|
|
$list-warning-hover: $sunflower-dark !default;
|
|
$list-success-hover: $grass-dark !default;
|
|
$list-danger-hover: $grapefruit-dark !default;
|
|
|
|
$list-border-color: $lightgray-dark !default;
|
|
$list-background-color: $white !default;
|
|
$list-font-color: $darkgray-dark !default;
|
|
$list-font-color-hover: $mediumgray-dark !default;
|
|
|
|
$list-item-background-color: $lightgray-dark !default;
|
|
|
|
$list-radius: 4px !default;
|
|
$list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
|
|
|
|
|
|
|
|
// Exports
|
|
//------------------------------------------------------
|
|
|
|
@include exports("list") {
|
|
|
|
/**
|
|
* list
|
|
* --------------------------------------------------
|
|
*/
|
|
.list-group {
|
|
@include radius($type: border-radius, $value: $list-radius);
|
|
@include box-shadow($value: $list-shadow);
|
|
@at-root &-item {
|
|
border-color: transparent;
|
|
border-top-color: $list-border-color;
|
|
&:first-child {
|
|
border-top: none;
|
|
}
|
|
@at-root &-heading {
|
|
color: $list-font-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
a.list-group-item {
|
|
color: $list-font-color;
|
|
|
|
& .list-group-item-heading {
|
|
font-size: 16px;
|
|
color: $list-font-color;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $list-item-background-color;
|
|
}
|
|
&.active,
|
|
&.active:hover,
|
|
&.active:focus {
|
|
background-color: $list-primary;
|
|
border-color: $list-primary;
|
|
}
|
|
&.active .list-group-item-text,
|
|
&.active:hover .list-group-item-text,
|
|
&.active:focus .list-group-item-text {
|
|
color: $list-background-color;
|
|
}
|
|
}
|
|
.list-group-item-primary {
|
|
color: darken($list-primary, 10%);
|
|
border-color: $list-primary-hover transparent transparent transparent;
|
|
background-color: $list-primary;
|
|
&:first-child {
|
|
border-color: transparent;
|
|
}
|
|
@at-root a.list-group-item-primary {
|
|
color: darken($list-primary, 30%);
|
|
&:hover,
|
|
&:focus {
|
|
color: $list-background-color;
|
|
background-color: $list-primary-hover;
|
|
}
|
|
&.active,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $list-primary-hover;
|
|
border-color: $list-primary transparent transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
.list-group-item-success {
|
|
color: darken($list-success, 10%);
|
|
border-color: $list-success-hover transparent transparent transparent;
|
|
background-color: $list-success;
|
|
&:first-child {
|
|
border-color: transparent;
|
|
}
|
|
@at-root a.list-group-item-success {
|
|
color: darken($list-success, 30%);
|
|
&:hover,
|
|
&:focus {
|
|
color: $list-background-color;
|
|
background-color: $list-success-hover;
|
|
}
|
|
&.active,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $list-success-hover;
|
|
border-color: $list-success transparent transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
.list-group-item-warning {
|
|
color: darken($list-warning, 10%);
|
|
border-color: $list-warning-hover transparent transparent transparent;
|
|
background-color: $list-warning;
|
|
&:first-child {
|
|
border-color: transparent;
|
|
}
|
|
@at-root a.list-group-item-warning {
|
|
color: darken($list-warning, 40%);
|
|
&:hover,
|
|
&:focus {
|
|
color: $list-background-color;
|
|
background-color: $list-warning-hover;
|
|
}
|
|
&.active,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $list-warning-hover;
|
|
border-color: $list-warning transparent transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
.list-group-item-info {
|
|
color: darken($list-info, 10%);
|
|
border-color: $list-info-hover transparent transparent transparent;
|
|
background-color: $list-info;
|
|
&:first-child {
|
|
border-color: transparent;
|
|
}
|
|
@at-root a.list-group-item-info {
|
|
color: darken($list-info, 30%);
|
|
&:hover,
|
|
&:focus {
|
|
color: $list-background-color;
|
|
background-color: $list-info-hover;
|
|
}
|
|
&.active,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $list-info-hover;
|
|
border-color: $list-info transparent transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
.list-group-item-danger {
|
|
color: darken($list-danger, 10%);
|
|
border-color: $list-danger-hover transparent transparent transparent;
|
|
background-color: $list-danger;
|
|
&:first-child {
|
|
border-color: transparent;
|
|
}
|
|
@at-root a.list-group-item-danger {
|
|
color: darken($list-danger, 30%);
|
|
&:hover,
|
|
&:focus {
|
|
color: $list-background-color;
|
|
background-color: $list-danger-hover;
|
|
}
|
|
&.active,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $list-danger-hover;
|
|
border-color: $list-danger transparent transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|