86 lines
2.1 KiB
SCSS
86 lines
2.1 KiB
SCSS
|
@import '~cartoassets/src/scss/cdb-variables/sizes';
|
||
|
|
|
||
|
|
// TODO: remove editor
|
||
|
|
$sMargin-elementInline: 12px; // To separate inline elements
|
||
|
|
$cStructure-mainLine: rgba(#DDD, 1);
|
||
|
|
$sCard-borderRadius: 4px;
|
||
|
|
$cStructure-mainBkg: rgba(#FFF, 1);
|
||
|
|
$cCard-selectedBorder: rgba(#9DC2E0, 1);
|
||
|
|
$cCard-selectedFill: rgba(#EFF6FC, 1);
|
||
|
|
$sMargin-group: 28px; // To separate groups inside a section
|
||
|
|
$cStructure-softLine: rgba(#000, 0.06);
|
||
|
|
|
||
|
|
.List {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
font: normal 13px/20px "Lato", sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|