1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-09-09 21:50:45 +02:00

Tab module tweaks

This commit is contained in:
Angelos Chalaris
2016-12-06 11:43:10 +02:00
parent 928112b979
commit 5824b6fb10
5 changed files with 26 additions and 56 deletions

61
dist/mini-default.css vendored
View File

@@ -1023,15 +1023,11 @@ table.striped tr:nth-of-type(2n) > td {
cursor: pointer;
-webkit-transition: background 0.3s ease 0s;
transition: background 0.3s ease 0s;
background: #cfd8dc;
border: 1px solid #78909c;
padding: 4px 6px; }
.tabs > label:first-of-type {
border-top-left-radius: 2px; }
.tabs > label:last-of-type {
border-top-right-radius: 2px; }
background: #e0e0e0;
border: 1px solid #9e9e9e;
padding: 8px 12px; }
.tabs > label:hover, .tabs > label:active, .tabs > label:focus {
background: rgba(207, 216, 220, 0.75); }
background: rgba(224, 224, 224, 0.8); }
.tabs > [type="radio"], .tabs.stacked > [type="checkbox"] {
display: none;
visibility: hidden; }
@@ -1053,17 +1049,15 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s; }
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
border-left: 0; }
.tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border-left: 0; }
.tabs > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
background: #b0bec5; }
background: #eeeeee; }
.tabs > [type="radio"]:checked + label:hover, .tabs > [type="radio"]:checked + label:active, .tabs > [type="radio"]:checked + label:focus, .tabs.stacked > [type="checkbox"]:checked + label:hover, .tabs.stacked > [type="checkbox"]:checked + label:active, .tabs.stacked > [type="checkbox"]:checked + label:focus {
background: rgba(176, 190, 197, 0.75); }
background: rgba(238, 238, 238, 0.8); }
.tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
box-sizing: border-box;
position: relative;
@@ -1073,9 +1067,10 @@ table.striped tr:nth-of-type(2n) > td {
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
border: 1px solid #78909c;
background: #fafafa;
border: 1px solid #9e9e9e;
border-top: 0;
padding: 6px;
padding: 8px;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%); }
@@ -1087,29 +1082,16 @@ table.striped tr:nth-of-type(2n) > td {
.tabs.stacked > label {
-webkit-order: initial;
order: initial; }
.tabs.stacked > label:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.tabs.stacked > label:first-of-type {
border-top-right-radius: 2px; }
.tabs.stacked > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
-webkit-order: initial;
order: initial;
-webkit-transform-origin: top;
transform-origin: top;
border-radius: 0; }
transform-origin: top; }
.tabs.stacked > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="radio"] + label + div + [type="checkbox"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border: 1px solid #78909c;
border: 1px solid #9e9e9e;
border-top: 0; }
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
height: auto; }
.tabs.stacked > [type="radio"] + label + div:last-of-type, .tabs.stacked > [type="checkbox"] + label + div:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
@media (max-width: 767px) {
.tabs {
@@ -1119,25 +1101,12 @@ table.striped tr:nth-of-type(2n) > td {
.tabs > label {
-webkit-order: initial;
order: initial; }
.tabs > label:first-of-type {
border-top-right-radius: 2px; }
.tabs > label:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.tabs > [type="radio"]:checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.tabs > [type="radio"] + label + div {
-webkit-order: initial;
order: initial;
border-radius: 0; }
order: initial; }
.tabs > [type="radio"] + label + div + [type="radio"] + label {
border: 1px solid #78909c;
border-top: 0; }
.tabs > [type="radio"] + label + div:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } }
border: 1px solid #9e9e9e;
border-top: 0; } }
mark {
background: #0277bd;
color: #f5f5f5;