139 lines
2.5 KiB
SCSS
139 lines
2.5 KiB
SCSS
@import "../base";
|
|
@import "./config";
|
|
|
|
.list {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: $list-vertical-padding 0;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
list-style: none;
|
|
}
|
|
|
|
.subheader {
|
|
padding-left: $list-horizontal-padding;
|
|
margin: - $list-vertical-padding 0 0;
|
|
font-size: $list-subheader-font-size;
|
|
font-weight: $list-subheader-font-weight;
|
|
line-height: $list-subheader-height;
|
|
color: $color-text-secondary;
|
|
}
|
|
|
|
.divider {
|
|
height: $list-divider-height;
|
|
margin: - $list-divider-height 0 0;
|
|
background-color: $color-divider;
|
|
border: 0;
|
|
&.inset {
|
|
margin-right: $list-horizontal-padding;
|
|
margin-left: $list-content-left-spacing;
|
|
}
|
|
.list + & {
|
|
margin-top: - $list-vertical-padding;
|
|
}
|
|
.listItem ~ & {
|
|
margin: $list-vertical-padding 0;
|
|
}
|
|
}
|
|
|
|
.listItem {
|
|
position: relative;
|
|
> [data-react-toolbox='ripple'] {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: $list-item-min-height;
|
|
align-items: center;
|
|
padding: 0 $list-horizontal-padding;
|
|
color: $color-text;
|
|
&.selectable:not(.disabled):hover {
|
|
cursor: pointer;
|
|
background-color: $list-item-hover-color;
|
|
}
|
|
&.withLegend {
|
|
height: $list-item-min-height-legend;
|
|
}
|
|
&.disabled {
|
|
pointer-events: none;
|
|
&:not(.checkboxItem) {
|
|
opacity: .5;
|
|
}
|
|
> .checkbox > [data-role='label'] {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: $list-item-min-height;
|
|
align-items: center;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
> [data-role='checkbox'] {
|
|
margin-right: $list-item-right-icon-margin;
|
|
}
|
|
> [data-role='label'] {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.ripple {
|
|
color: $color-text-secondary;
|
|
}
|
|
|
|
.text {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.caption {
|
|
display: block;
|
|
font-size: $font-size-normal;
|
|
color: $color-text;
|
|
}
|
|
|
|
.legend {
|
|
display: block;
|
|
padding-top: $list-item-legend-margin-top;
|
|
font-size: $font-size-small;
|
|
color: $color-text-secondary;
|
|
white-space: normal;
|
|
}
|
|
|
|
.avatar {
|
|
display: flex;
|
|
width: $list-item-avatar-height;
|
|
height: $list-item-avatar-height;
|
|
flex: 0 0 auto;
|
|
margin: $list-item-avatar-margin $list-horizontal-padding $list-item-avatar-margin 0;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.right, .left {
|
|
display: flex;
|
|
align-items: center;
|
|
vertical-align: middle;
|
|
&.icon {
|
|
font-size: $list-item-icon-font-size;
|
|
color: $color-text-secondary;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left: $list-horizontal-padding;
|
|
}
|
|
|
|
.left {
|
|
&.icon {
|
|
width: $list-item-icon-size;
|
|
margin-right: $list-item-right-icon-margin;
|
|
}
|
|
}
|