64 lines
1.1 KiB
SCSS

.properties-panel {
$margin-spacing: 10px;
&__wrapper {
display: table;
margin-left: -1 * $margin-spacing;
margin-right: -1 * $margin-spacing;
}
&__property {
display: table-row;
padding: 0;
&-name {
display: table-cell;
&-label {
margin: 0 $margin-spacing;
font-weight: fw(normal, 6);
line-height: item-spacing(5);
}
}
&-value {
display: table-cell;
word-break: break-word;
white-space: normal;
flex-shrink: 1;
margin-right: $margin-spacing;
}
&-item-value {
&:after {
content: ',';
color: get-color(black);
}
&:last-child:after {
content: '';
}
}
}
&__tooltip-icon {
color: get-color(black, 0.6);
margin: item-spacing(0 1);
}
$columns: 1, 2, 3, 4, 5;
@each $column in $columns {
&[data-columns='#{$column}'] {
.properties-panel__property {
$percent: 100% / $column;
$final-margin: ($margin-spacing * 2);
width: calc(#{$percent} - #{$final-margin});
}
}
}
&[data-standalone='true'] {
@include nacho-container;
}
}