Improve new .tabs CSS from

This commit is contained in:
djmaze 2021-08-26 20:10:14 +02:00
parent d7a30cba79
commit 637ed9a478
4 changed files with 56 additions and 67 deletions

View file

@ -74,3 +74,50 @@ textarea + .settings-save-trigger {
.list-table {
max-width: 800px;
}
// TABS
// -------------
.tabs {
display: grid;
}
.tabs input[type="radio"] {
position: absolute;
top: 0;
left: -9999px;
display: none;
}
// Actual tabs
.tabs label {
grid-row-start: 1;
color: #555;
margin: 0 2px -1px 0;
line-height: @baseLineHeight;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 5px;
&:hover {
border-color: @grayLighter @grayLighter #ddd;
}
}
.tabs [id^="tab"]:checked + label {
color: @gray;
background-color: @white;
border-color: #ddd #ddd transparent #ddd;
z-index: 1;
}
// TABBABLE
// --------
.tabs .tab-content {
grid-column-start: 1;
grid-row-start: 2;
visibility: hidden;
}
.tabs [id^="tab"]:checked + label + .tab-content {
visibility: visible;
}