mnml/client/assets/styles/vbox.less
2019-07-23 19:04:20 +10:00

112 lines
1.9 KiB
Plaintext

@import 'colours.less';
.vbox {
margin-bottom: 2em;
.vbox-section {
// border: 2px solid #444;
}
.vbox-hdr {
margin-bottom: 1em;
height: 2em;
}
.vbox-colours {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 0.5em 1em;
align-items: center;
margin-bottom: 0.5em;
}
.vbox-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em 1em;
align-items: center;
margin-bottom: 0.5em;
button {
width: 100%;
}
}
.vbox-btn {
width: 100%;
margin: 0;
background-color: @gray;
border-width: 0;
height: 3em;
:active, :hover, :focus {
color: white;
}
&.reclaim {
height: auto;
&:hover {
color: @red;
};
}
&.reclaiming, &.reclaiming:hover, &.reclaiming:active {
background: @red;
color: black;
}
&[disabled] {
background: black;
border-width: 1px;
};
}
button {
height: 4em;
margin: 0;
// text-transform: none;
&.empty {
border-style: dashed;
}
&.highlight {
color: black;
background: @white;
border: 1px solid @white;
// overwrite the classes on white svg elements
ellipse.white {
stroke: black;
}
rect.white {
stroke: black;
}
polygon.white {
stroke: black;
}
}
}
svg {
stroke-width: 4px;
}
// figures don't scale well
figure {
svg {
height: 2em;
stroke-width: 8px;
}
figcaption {
line-height: initial;
}
}
}