174 lines
3.2 KiB
CSS
174 lines
3.2 KiB
CSS
@import '../colors.css';
|
|
@import '../variables.css';
|
|
@import './config.css';
|
|
|
|
.list {
|
|
display: inline-block;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: var(--list-vertical-padding) 0;
|
|
position: relative;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
|
|
@apply --reset;
|
|
|
|
& + .divider {
|
|
margin-top: calc(-1 * var(--list-vertical-padding));
|
|
}
|
|
}
|
|
|
|
.subheader {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--list-subheader-font-size);
|
|
font-weight: var(--list-subheader-font-weight);
|
|
line-height: var(--list-subheader-height);
|
|
margin: calc(-1 * var(--list-vertical-padding)) 0 0;
|
|
padding-left: var(--list-horizontal-padding);
|
|
}
|
|
|
|
.divider {
|
|
background-color: var(--color-divider);
|
|
border: 0;
|
|
height: var(--list-divider-height);
|
|
margin: calc(-1 * var(--list-divider-height)) 0 0;
|
|
|
|
&.inset {
|
|
margin-left: var(--list-content-left-spacing);
|
|
margin-right: var(--list-horizontal-padding);
|
|
}
|
|
}
|
|
|
|
.listItem {
|
|
position: relative;
|
|
|
|
& > [data-react-toolbox='ripple'] {
|
|
overflow: hidden;
|
|
}
|
|
|
|
& .ripple {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
& ~ .divider {
|
|
margin-bottom: var(--list-vertical-padding);
|
|
margin-top: var(--list-vertical-padding);
|
|
}
|
|
}
|
|
|
|
.item {
|
|
align-items: center;
|
|
color: var(--color-text);
|
|
display: flex;
|
|
min-height: var(--list-item-min-height);
|
|
padding: 0 var(--list-horizontal-padding);
|
|
position: relative;
|
|
|
|
&.selectable:not(.disabled):hover {
|
|
background-color: var(--list-item-hover-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
|
|
&:not(.checkboxItem) {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
& > .checkbox > [data-react-toolbox='label'] {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.left {
|
|
& [data-react-toolbox='font-icon'] {
|
|
width: var(--list-item-icon-size);
|
|
}
|
|
|
|
& :last-child {
|
|
& > [data-react-toolbox='font-icon'] {
|
|
margin-right: var(--list-item-right-icon-margin);
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
& > :last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
& > :first-child {
|
|
margin-left: var(--list-horizontal-padding);
|
|
}
|
|
}
|
|
|
|
.left,
|
|
.right {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.itemAction {
|
|
display: flex;
|
|
margin: var(--list-item-child-margin) var(--list-horizontal-padding) var(--list-item-child-margin) 0;
|
|
|
|
& > * {
|
|
padding: 0;
|
|
}
|
|
|
|
& > [data-react-toolbox='font-icon'] {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--list-item-icon-font-size);
|
|
}
|
|
}
|
|
|
|
.itemContentRoot {
|
|
display: block;
|
|
flex-grow: 1;
|
|
|
|
&.large {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: var(--list-item-min-height-legend);
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 100%;
|
|
margin: 0;
|
|
min-height: var(--list-item-min-height);
|
|
width: 100%;
|
|
|
|
& > [data-react-toolbox='check'] {
|
|
margin-right: var(--list-item-right-checkbox-margin);
|
|
}
|
|
|
|
& > [data-react-toolbox='label'] {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.itemText {
|
|
display: block;
|
|
|
|
&:not(.primary) {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
padding-top: var(--list-item-legend-margin-top);
|
|
white-space: normal;
|
|
}
|
|
|
|
&.primary {
|
|
color: var(--color-text);
|
|
font-size: var(--font-size-normal);
|
|
}
|
|
}
|