@@ -39,3 +39,91 @@ aside.note.warning > h1::before {
3939 border-radius : 50% ;
4040 border : 2px solid var (--warning-note-color , # f0ad4e );
4141}
42+
43+ .tabset > input [type = "radio" ] {
44+ position : absolute;
45+ left : -200vw ;
46+ }
47+
48+ .tabset .tab-panel {
49+ display : none;
50+ }
51+
52+ .tabset > input : first-child : checked ~ .tab-panels > .tab-panel : first-child ,
53+ .tabset > input : nth-child (3 ): checked ~ .tab-panels > .tab-panel : nth-child (2 ),
54+ .tabset > input : nth-child (5 ): checked ~ .tab-panels > .tab-panel : nth-child (3 ),
55+ .tabset > input : nth-child (7 ): checked ~ .tab-panels > .tab-panel : nth-child (4 ),
56+ .tabset > input : nth-child (9 ): checked ~ .tab-panels > .tab-panel : nth-child (5 ),
57+ .tabset > input : nth-child (11 ): checked ~ .tab-panels > .tab-panel : nth-child (6 ),
58+ .tabset > input : nth-child (13 ): checked ~ .tab-panels > .tab-panel : nth-child (7 ),
59+ .tabset > input : nth-child (15 ): checked ~ .tab-panels > .tab-panel : nth-child (8 ),
60+ .tabset > input : nth-child (17 ): checked ~ .tab-panels > .tab-panel : nth-child (9 ),
61+ .tabset > input : nth-child (19 ): checked ~ .tab-panels > .tab-panel : nth-child (10 ),
62+ .tabset > input : nth-child (21 ): checked ~ .tab-panels > .tab-panel : nth-child (11 ),
63+ .tabset > input : nth-child (23 ): checked ~ .tab-panels > .tab-panel : nth-child (12 ),
64+ .tabset > input : nth-child (25 ): checked ~ .tab-panels > .tab-panel : nth-child (13 ),
65+ .tabset > input : nth-child (27 ): checked ~ .tab-panels > .tab-panel : nth-child (14 ),
66+ .tabset > input : nth-child (29 ): checked ~ .tab-panels > .tab-panel : nth-child (15 ),
67+ .tabset > input : nth-child (31 ): checked ~ .tab-panels > .tab-panel : nth-child (16 ),
68+ .tabset > input : nth-child (33 ): checked ~ .tab-panels > .tab-panel : nth-child (17 ),
69+ .tabset > input : nth-child (35 ): checked ~ .tab-panels > .tab-panel : nth-child (18 ),
70+ .tabset > input : nth-child (37 ): checked ~ .tab-panels > .tab-panel : nth-child (19 ),
71+ .tabset > input : nth-child (39 ): checked ~ .tab-panels > .tab-panel : nth-child (20 ),
72+ .tabset > input : nth-child (41 ): checked ~ .tab-panels > .tab-panel : nth-child (21 ),
73+ .tabset > input : nth-child (43 ): checked ~ .tab-panels > .tab-panel : nth-child (22 ),
74+ .tabset > input : nth-child (45 ): checked ~ .tab-panels > .tab-panel : nth-child (23 ),
75+ .tabset > input : nth-child (47 ): checked ~ .tab-panels > .tab-panel : nth-child (24 ),
76+ .tabset > input : nth-child (49 ): checked ~ .tab-panels > .tab-panel : nth-child (25 ),
77+ .tabset > input : nth-child (51 ): checked ~ .tab-panels > .tab-panel : nth-child (26 ),
78+ .tabset > input : nth-child (53 ): checked ~ .tab-panels > .tab-panel : nth-child (27 ),
79+ .tabset > input : nth-child (55 ): checked ~ .tab-panels > .tab-panel : nth-child (28 ),
80+ .tabset > input : nth-child (57 ): checked ~ .tab-panels > .tab-panel : nth-child (29 ){
81+ display : block;
82+ }
83+
84+ .tabset > label {
85+ position : relative;
86+ display : inline-block;
87+ padding : .6em 1em 1em ;
88+ border : 1px solid transparent;
89+ border-bottom : 0 ;
90+ cursor : pointer;
91+ font-size : 16px ;
92+ border-top-right-radius : 4px ;
93+ border-top-left-radius : 4px ;
94+ }
95+
96+ .tabset > label ::after {
97+ content : "" ;
98+ position : absolute;
99+ left : 15px ;
100+ bottom : 10px ;
101+ width : 20px ;
102+ height : 4px ;
103+ background : # 8d8d8d ;
104+ }
105+
106+ .tabset > label : hover ,
107+ .tabset > input : focus + label {
108+ color : # 06c ;
109+ }
110+
111+ .tabset > label : hover ::after ,
112+ .tabset > input : focus + label ::after ,
113+ .tabset > input : checked + label ::after {
114+ background : # 06c ;
115+ }
116+
117+ .tabset > input : checked + label {
118+ border-color : # ccc ;
119+ border-bottom : 1px solid # fff ;
120+ margin-bottom : -1px ;
121+ }
122+
123+ .tab-panel {
124+ padding : 1em 1.4em ;
125+ border : 1px solid # ccc ;
126+ border-bottom-right-radius : 4px ;
127+ border-bottom-left-radius : 4px ;
128+ position : relative;
129+ }
0 commit comments