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

@ -20,52 +20,3 @@
text-decoration: none;
background-color: @grayLighter;
}
// 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;
}
}
[id^="tab"]:checked + label {
color: @gray;
background-color: @white;
border-color: #ddd #ddd transparent #ddd;
z-index: 1;
}
// TABBABLE
// --------
.tab-content {
grid-column-start: 1;
grid-row-start: 2;
visibility: hidden;
}
[id^="tab"]:checked + label + .tab-content {
visibility: visible;
}

View file

@ -47,10 +47,9 @@
.table-bordered {
border: 1px solid @tableBorder;
border-collapse: separate; // Done so we can round those corners!
border-left: 0;
border-radius: 4px;
th,
td {
th + th,
td + td {
border-left: 1px solid @tableBorder;
}
// Prevent a double border