amis2/scss/components/form/_list.scss
2019-08-12 21:14:33 +08:00

124 lines
3.5 KiB
SCSS

.#{$ns}ListControl {
&-items {
display: block;
margin: -$ListControl-gutterWidth/2;
&:empty {
display: none;
}
}
&-item {
position: relative;
user-select: none;
font-size: $ListControl-fontSize;
display: inline-block;
vertical-align: middle;
margin: $ListControl-gutterWidth/2;
border: $ListControl-item-borderWidth solid
$ListControl-item-borderColor;
background-color: $ListControl-item-bg;
padding: $ListControl-item-paddingY $ListControl-item-paddingX;
color: $ListControl-item-color;
transition: $ListControl-item-transition;
max-width: px2rem(200px) + 2 * $ListControl-item-paddingX;
&:not(.is-disabled) {
cursor: pointer;
}
.b-inherit {
border-color: $ListControl-item-color;
}
@include hover {
background-color: $ListControl-item-onHover-bg;
border-color: $ListControl-item-onHover-borderColor;
color: $ListControl-item-onHover-color;
.b-inherit {
border-color: $ListControl-item-onHover-borderColor;
}
}
&.is-disabled {
pointer-events: none;
opacity: $ListControl-item-onDisabled-opacity;
border-color: $ListControl-item-onDisabled-borderColor;
@if variable-exists("ListControl-item-onDisabled-bg") {
background-color: $ListControl-item-onDisabled-bg;
}
@if variable-exists("ListControl-item-onDisabled-color") {
color: $ListControl-item-onDisabled-color;
}
.b-inherit {
border-color: $ListControl-item-onDisabled-borderColor;
}
}
&:hover:active,
&.is-active {
background-color: $ListControl-item-onActive-bg;
border-color: $ListControl-item-onActive-borderColor;
color: $ListControl-item-onActive-color;
@if variable-exists("ListControl-item-onActive-onHover-bg") {
&:hover {
background-color: $ListControl-item-onActive-onHover-bg;
}
}
.b-inherit {
border-color: $ListControl-item-onActive-color;
}
&:before {
content: "";
position: absolute;
width: px2rem(14px);
height: px2rem(14px);
background-color: $ListControl-item-onActive-before-bg;
right: 0;
bottom: 0;
}
&:after {
content: "";
position: absolute;
width: px2rem(10px);
height: px2rem(5px);
border-color: $ListControl-item-onActive-after-borderColor;
border-style: solid;
border-width: 0 0 px2rem(2px) px2rem(2px);
right: px2rem(1px);
bottom: px2rem(5px);
transform: rotate(-40deg);
}
}
}
&-itemImage {
margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1;
img {
display: block;
max-width: 100%;
}
}
&-itemLabel {
text-align: center;
}
&-itemImage + &-itemLabel {
margin-top: $ListControl-item-paddingY;
}
&-placeholder {
color: $Form-input-placeholderColor;
}
}