|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − |
| |
| − |
| |
| − |
| |
| − | .simpletabs {
| |
| − | //width: 500px;
| |
| − | //min-height: 200px;
| |
| − | overflow-x: hidden; /* so we could easily hide the radio inputs */
| |
| − | //margin: 1em;
| |
| − | //padding-bottom: 0;
| |
| − | //border: 1px solid #ccc;
| |
| − | //border-left: 1px solid #ccc;
| |
| − | }
| |
| − |
| |
| − | .simpletabs [type="radio"] {
| |
| − | /* hiding the inputs */
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .simpletabs .tabs {
| |
| − | display: flex;
| |
| − | align-items: stretch;
| |
| − | list-style: none;
| |
| − | padding: 0;
| |
| − | border-bottom: 1px solid transparent;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .simpletabs .tab > label {
| |
| − | display: block;
| |
| − | margin-bottom: -1px;
| |
| − | //margin-left: -1px;
| |
| − | padding: 1em 1em;
| |
| − | border: 1px solid #ccc;
| |
| − | background: #eee;
| |
| − | //color: #666;
| |
| − | }
| |
| − | .simpletabs .tab:hover label {
| |
| − | //border-top-color: #333;
| |
| − | //color: #333;
| |
| − | }
| |
| − |
| |
| − | .simpletabs .tabs-content {
| |
| − | // border: 1px solid red;
| |
| − | }
| |
| − |
| |
| − | .simpletabs .tab-content {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
| |
| − | .simpletabs [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
| |
| − | .simpletabs [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
| |
| − | .simpletabs [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
| |
| − | .simpletabs [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
| |
| − | .simpletabs [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
| |
| − | border-bottom: none;
| |
| − | //border-top-color: #B721FF;
| |
| − | background: transparent;
| |
| − | //color: #222;
| |
| − | }
| |
| − |
| |
| − | .simpletabs [type="radio"]:nth-of-type(1):checked ~ .tabs-content .tab-content:nth-of-type(1),
| |
| − | .simpletabs [type="radio"]:nth-of-type(2):checked ~ .tabs-content .tab-content:nth-of-type(2),
| |
| − | .simpletabs [type="radio"]:nth-of-type(3):checked ~ .tabs-content .tab-content:nth-of-type(3),
| |
| − | .simpletabs [type="radio"]:nth-of-type(4):checked ~ .tabs-content .tab-content:nth-of-type(4) {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
