atst/styles/elements/_block_lists.scss

128 lines
1.8 KiB
SCSS

@mixin block-list {
@include panel-margin;
ul, dl {
list-style: none;
margin: 0;
padding: 0;
}
}
@mixin block-list-header {
@include panel-base;
@include panel-theme-default;
padding: $gap * 2;
display: flex;
flex-direction: row;
justify-content: space-between;
.icon-tooltip {
margin: -$gap;
}
&--grow {
display: inline-block;
width: 100%;
p {
margin-bottom: 0;
}
}
}
@mixin block-list__title {
@include h4;
margin: 0;
line-height: 3rem;
}
@mixin block-list__footer {
@include panel-base;
@include panel-theme-default;
padding: $gap * 2;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
.icon-link {
&:first-child {
margin-right: -$gap;
}
}
}
@mixin block-list-item {
@include panel-base;
margin: 0;
padding: $gap * 2;
border-top: 0;
border-bottom: 1px dashed $color-gray-light;
@at-root li#{&} {
&:last-child {
border-bottom-style: solid;
}
}
}
.block-list {
@include block-list;
.icon-link {
margin: -$gap 0;
}
.icon-link,
.label {
&:first-child {
margin-left: -$gap;
}
&:last-child {
margin-right: -$gap;
}
}
}
.block-list__header {
@include block-list-header;
}
.block-list__title {
@include block-list__title;
}
.block-list__item {
@include block-list-item;
&.block-list__item--selectable {
> label {
margin: 0;
max-width: none;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
&::before {
flex-shrink: 0;
}
&:hover {
color: $color-primary;
}
}
input:checked {
+ label {
color: $color-primary;
}
}
}
}
.block-list__footer {
@include block-list__footer;
border-top: 0;
}