fmartingr
/
shelfzilla
Archived
1
0
Fork 0
This repository has been archived on 2021-06-29. You can view files and clone it, but cannot push or open issues or pull requests.
shelfzilla/shelfzilla/themes/bootflat/static/libs/bootflat/scss/bootflat/_list.scss

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;
}
}
}
}