78 lines
1.8 KiB
SCSS
78 lines
1.8 KiB
SCSS
|
@import "../variables/mixins";
|
||
|
|
@import "../variables/colors";
|
||
|
|
@import "../variables/sizes";
|
||
|
|
|
||
|
|
.List {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List.List--selections {
|
||
|
|
margin-bottom: $sMargin-elementInline;
|
||
|
|
border: 1px solid $cStructure-mainLine;
|
||
|
|
border-radius: $sCard-borderRadius;
|
||
|
|
background-color: $cStructure-mainBkg;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-row {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
// Makes sure prev border is overlapped but the is-selected one
|
||
|
|
position: relative;
|
||
|
|
box-sizing: content-box; // to make sure size is consistent w/ borders
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: -2px;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-row.is-selected {
|
||
|
|
border: 1px solid $cCard-selectedBorder;
|
||
|
|
border-radius: $sCard-borderRadius;
|
||
|
|
background-color: $cCard-selectedFill;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-row.List-row.is-disabled {
|
||
|
|
opacity: 0.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-row:last-child > .List-rowItem {
|
||
|
|
// to have same height as the other items, w/o the visible border
|
||
|
|
border-bottom: 1px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-rowItem {
|
||
|
|
display: flex;
|
||
|
|
box-sizing: content-box; // to make sure size is consistent w/ borders
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 100%;
|
||
|
|
margin-right: $sMargin-element;
|
||
|
|
margin-left: $sMargin-element;
|
||
|
|
padding-top: $sMargin-group;
|
||
|
|
padding-bottom: $sMargin-group;
|
||
|
|
border-bottom: 1px solid $cStructure-mainLine;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-rowItem.List-rowItem--compact {
|
||
|
|
padding-top: $sMargin-elementInline;
|
||
|
|
padding-bottom: $sMargin-elementInline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-rowItem.List-rowItem--withoutSideMargins {
|
||
|
|
margin-right: 0;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-rowItem.List-rowItem--withoutBottomBorder {
|
||
|
|
border-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-rowItem.List-rowItem--withoutBottomPadding {
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.List-row.is-selected > .List-rowItem {
|
||
|
|
border-bottom: 1px solid transparent;
|
||
|
|
}
|