Skip to content

Commit 82d021c

Browse files
johanrosensonjohanrosenson
committed
update playground
1 parent 6b691e6 commit 82d021c

2 files changed

Lines changed: 188 additions & 172 deletions

File tree

‎playground.css‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
:root {
2+
/* https://tailwindcss.com/docs/customizing-colors#color-palette-reference */
3+
--black: #000;
4+
--white: #fff;
5+
--blueGray-50: #F8FAFC;
6+
--blueGray-100: #F1F5F9;
7+
--amber-50: #FFFBEB;
8+
--amber-100: #FEF3C7;
9+
--amber-200: #FDE68A;
10+
--green-500: #22C55E;
11+
--green-600: #16A34A;
12+
--blue-600: #2563EB;
13+
}
14+
15+
*,
16+
*::before,
17+
*::after {
18+
box-sizing: border-box;
19+
margin: 0;
20+
padding: 0;
21+
}
22+
23+
html {
24+
line-height: 1.15;
25+
}
26+
27+
body {
28+
padding: 20px;
29+
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
30+
}
31+
32+
kbd {
33+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
34+
}
35+
36+
#playground-instructions {
37+
border-radius: 5px;
38+
font-weight: 700;
39+
font-size: 30px;
40+
text-align: center;
41+
border-radius: 5px;
42+
border: 2px solid var(--black);
43+
padding: 20px 10px;
44+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
45+
}
46+
47+
main {
48+
max-width: 560px;
49+
margin: 0 auto 150px auto;
50+
display: flex;
51+
flex-direction: column;
52+
gap: 40px 0;
53+
}
54+
55+
main h1 {
56+
padding: 10px;
57+
text-align: right;
58+
font-size: 18px;
59+
font-weight: 700;
60+
background-color: var(--black);
61+
color: var(--white);
62+
border-radius: 12px 2px 12px 2px;
63+
}
64+
65+
section {
66+
outline: 2px solid var(--green-500);
67+
border-radius: 5px;
68+
padding: 30px 20px 20px 20px;
69+
display: flex;
70+
flex-direction: column;
71+
gap: 20px;
72+
position: relative;
73+
}
74+
75+
section:hover:not(:focus-within) {
76+
background-color: var(--blueGray-50);
77+
}
78+
79+
section:focus-within {
80+
outline: 2px solid var(--black);
81+
background-color: var(--blueGray-100);
82+
}
83+
84+
section[data-label]::before {
85+
content: attr(data-label);
86+
position: absolute;
87+
top: -13px;
88+
left: 15px;
89+
height: 26px;
90+
display: flex;
91+
align-items: center;
92+
padding: 0 15px;
93+
background-color: var(--green-500);
94+
border: 1px solid var(--green-600);
95+
border-radius: 6px;
96+
color: #fff;
97+
}
98+
99+
section[data-label]:focus-within::before {
100+
background-color: var(--black);
101+
border: 1px solid var(--black);
102+
}
103+
104+
section p {
105+
padding: 5px;
106+
}
107+
108+
section p:hover {
109+
background-color: var(--amber-50);
110+
border-radius: 5px;
111+
}
112+
113+
section input {
114+
display: block;
115+
height: 40px;
116+
width: 100%;
117+
font-size: 16px;
118+
border: 1px solid var(--blue-600);
119+
border-radius: 3px;
120+
padding: 0 10px;
121+
}
122+
123+
section select {
124+
display: block;
125+
height: 40px;
126+
width: 100%;
127+
font-size: 16px;
128+
border: 1px solid var(--blue-600);
129+
border-radius: 3px;
130+
padding: 0 10px;
131+
}
132+
133+
section input:hover:not(:focus):not([disabled]),
134+
section select:hover:not(:focus):not([disabled]) {
135+
background-color: var(--amber-50);
136+
}
137+
138+
section input:focus,
139+
section select:focus {
140+
outline: none;
141+
background-color: var(--amber-100);
142+
}
143+
144+
section a {
145+
padding: 10px;
146+
font-size: 16px;
147+
border-radius: 5px;
148+
}
149+
150+
section a:hover:not(:focus) {
151+
background-color: var(--amber-50);
152+
text-decoration: underline;
153+
}
154+
155+
section a:focus {
156+
outline: 2px solid var(--amber-200);
157+
background-color: var(--amber-100);
158+
}
159+
160+
section div[tabindex] {
161+
padding: 10px;
162+
font-size: 16px;
163+
border-radius: 5px;
164+
}
165+
166+
section div[tabindex]:hover:not(:focus) {
167+
background-color: var(--amber-50);
168+
text-decoration: underline;
169+
}
170+
171+
section div[tabindex]:focus {
172+
outline: 2px solid var(--amber-200);
173+
background-color: var(--amber-100);
174+
}
175+
176+
.grid-with-custom-taborder .grid {
177+
display: grid;
178+
gap: 10px 0;
179+
grid-template-columns: 1fr;
180+
grid-template-rows: repeat(4, min-content);
181+
grid-template-areas: 'uno' 'zwei' 'tre' 'quattro';
182+
}
183+
184+
.grid-with-custom-taborder .grid > [data-grid-area="uno"] { grid-area: uno; }
185+
.grid-with-custom-taborder .grid > [data-grid-area="zwei"] { grid-area: zwei; }
186+
.grid-with-custom-taborder .grid > [data-grid-area="tre"] { grid-area: tre; }
187+
.grid-with-custom-taborder .grid > [data-grid-area="quattro"] { grid-area: quattro; }

‎playground.html‎

Lines changed: 1 addition & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -5,178 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>tabwrap playground</title>
77
<script type="text/javascript" src="./playground-dist.js" defer></script>
8-
<style>
9-
:root {
10-
/* https://tailwindcss.com/docs/customizing-colors#color-palette-reference */
11-
--black: #000;
12-
--white: #fff;
13-
--blueGray-50: #F8FAFC;
14-
--blueGray-100: #F1F5F9;
15-
--amber-50: #FFFBEB;
16-
--amber-100: #FEF3C7;
17-
--amber-200: #FDE68A;
18-
--green-500: #22C55E;
19-
--green-600: #16A34A;
20-
--blue-600: #2563EB;
21-
}
22-
23-
#playground-instructions {
24-
border-radius: 5px;
25-
font-weight: 700;
26-
font-size: 30px;
27-
text-align: center;
28-
border-radius: 5px;
29-
border: 2px solid var(--black);
30-
padding: 20px 10px;
31-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
32-
}
33-
34-
body {
35-
padding: 20px;
36-
}
37-
38-
main {
39-
max-width: 560px;
40-
margin: 0 auto 150px auto;
41-
display: flex;
42-
flex-direction: column;
43-
gap: 40px 0;
44-
}
45-
46-
main h1 {
47-
padding: 10px;
48-
text-align: right;
49-
font-size: 18px;
50-
font-weight: 700;
51-
background-color: var(--black);
52-
color: var(--white);
53-
border-radius: 12px 2px 12px 2px;
54-
}
55-
56-
section {
57-
outline: 2px solid var(--green-500);
58-
border-radius: 5px;
59-
padding: 30px 20px 20px 20px;
60-
display: flex;
61-
flex-direction: column;
62-
gap: 20px;
63-
position: relative;
64-
}
65-
66-
section:hover:not(:focus-within) {
67-
background-color: var(--blueGray-50);
68-
}
69-
70-
section:focus-within {
71-
outline: 2px solid var(--black);
72-
background-color: var(--blueGray-100);
73-
}
74-
75-
section[data-label]::before {
76-
content: attr(data-label);
77-
position: absolute;
78-
top: -13px;
79-
left: 15px;
80-
height: 26px;
81-
display: flex;
82-
align-items: center;
83-
padding: 0 15px;
84-
background-color: var(--green-500);
85-
border: 1px solid var(--green-600);
86-
border-radius: 6px;
87-
color: #fff;
88-
}
89-
90-
section[data-label]:focus-within::before {
91-
background-color: var(--black);
92-
border: 1px solid var(--black);
93-
}
94-
95-
section p {
96-
padding: 5px;
97-
}
98-
99-
section p:hover {
100-
background-color: var(--amber-50);
101-
border-radius: 5px;
102-
}
103-
104-
section input {
105-
display: block;
106-
height: 40px;
107-
width: 100%;
108-
font-size: 16px;
109-
border: 1px solid var(--blue-600);
110-
border-radius: 3px;
111-
padding: 0 10px;
112-
}
113-
114-
section select {
115-
display: block;
116-
height: 40px;
117-
width: 100%;
118-
font-size: 16px;
119-
border: 1px solid var(--blue-600);
120-
border-radius: 3px;
121-
padding: 0 10px;
122-
}
123-
124-
section input:hover:not(:focus):not([disabled]),
125-
section select:hover:not(:focus):not([disabled]) {
126-
background-color: var(--amber-50);
127-
}
128-
129-
section input:focus,
130-
section select:focus {
131-
outline: none;
132-
background-color: var(--amber-100);
133-
}
134-
135-
section a {
136-
padding: 10px;
137-
font-size: 16px;
138-
border-radius: 5px;
139-
}
140-
141-
section a:hover:not(:focus) {
142-
background-color: var(--amber-50);
143-
text-decoration: underline;
144-
}
145-
146-
section a:focus {
147-
outline: 2px solid var(--amber-200);
148-
background-color: var(--amber-100);
149-
}
150-
151-
section div[tabindex] {
152-
padding: 10px;
153-
font-size: 16px;
154-
border-radius: 5px;
155-
}
156-
157-
section div[tabindex]:hover:not(:focus) {
158-
background-color: var(--amber-50);
159-
text-decoration: underline;
160-
}
161-
162-
section div[tabindex]:focus {
163-
outline: 2px solid var(--amber-200);
164-
background-color: var(--amber-100);
165-
}
166-
167-
.grid-with-custom-taborder .grid {
168-
display: grid;
169-
gap: 10px 0;
170-
grid-template-columns: 1fr;
171-
grid-template-rows: repeat(4, min-content);
172-
grid-template-areas: 'uno' 'zwei' 'tre' 'quattro';
173-
}
174-
175-
.grid-with-custom-taborder .grid > [data-grid-area="uno"] { grid-area: uno; }
176-
.grid-with-custom-taborder .grid > [data-grid-area="zwei"] { grid-area: zwei; }
177-
.grid-with-custom-taborder .grid > [data-grid-area="tre"] { grid-area: tre; }
178-
.grid-with-custom-taborder .grid > [data-grid-area="quattro"] { grid-area: quattro; }
179-
</style>
8+
<link rel="stylesheet" type="text/css" href="./playground.css">
1809
</head>
18110
<body>
18211
<main>

0 commit comments

Comments
 (0)