landsoul 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +30 -21
  2. package/dist/landsoul.css +1 -455
  3. package/package.json +5 -5
  4. package/src/landsoul/_table.scss +53 -13
package/README.md CHANGED
@@ -1,21 +1,30 @@
1
- # landsoul
2
-
3
- Drop in css library landsoul
4
- Support dark mode, use `prefers-color-scheme: dark` or `body[data-theme="dark"]`
5
- IE11 is not supported
6
- normalize.css is optional
7
- Preview: <https://yieldray.github.io/landsoul/>
8
-
9
- ## dev
10
-
11
- ```bash
12
- $ npm install
13
- $ npm run dev
14
- # xdg-open index.html
15
- ```
16
-
17
- ## build
18
-
19
- ```bash
20
- $ npm run build
21
- ```
1
+ # landsoul
2
+
3
+ Drop in css library landsoul (IE11 is not supported)
4
+
5
+ To enable dark mode, use `prefers-color-scheme: dark` or `body[data-theme="dark"]`
6
+
7
+ Preview: <https://yieldray.github.io/landsoul/>
8
+
9
+ # usage
10
+
11
+ ```html
12
+ <link rel="stylesheet" href="https://unpkg.com/landsoul@latest/dist/landsoul.css" />
13
+
14
+ <!-- add this to enable dark mode manually -->
15
+ <body data-theme="dark"></body>
16
+ ```
17
+
18
+ ## dev
19
+
20
+ ```bash
21
+ $ npm install
22
+ $ npm run dev
23
+ # xdg-open index.html
24
+ ```
25
+
26
+ ## build
27
+
28
+ ```bash
29
+ $ npm run build
30
+ ```
package/dist/landsoul.css CHANGED
@@ -1,455 +1 @@
1
- body {
2
- --landsoul-bg: #fff;
3
- --landsoul-text: #3d424f;
4
- --landsoul-shadow: #f4f4f5;
5
- --landsoul-accent: #2563eb;
6
- --landsoul-color: #e3e4e8;
7
- --landsoul-time: 0.3s;
8
- --landsoul-radius: 0.25em;
9
- --landsoul-gradient: linear-gradient(#ccfcf7, #c4eae9, #bbd8db, #b3c6cd, #aab4bf);
10
- }
11
- body[data-theme="dark"] {
12
- --landsoul-bg: #202021;
13
- --landsoul-text: #e7e7e7;
14
- --landsoul-shadow: #353e5a;
15
- --landsoul-color: #2b414f;
16
- }
17
- @media screen and (color-index: 48) {
18
- body {
19
- --landsoul-bg: #202021;
20
- --landsoul-text: #e7e7e7;
21
- --landsoul-shadow: #353e5a;
22
- --landsoul-color: #2b414f;
23
- }
24
- }
25
- @media screen and (color: 48842621) {
26
- body {
27
- --landsoul-bg: #202021;
28
- --landsoul-text: #e7e7e7;
29
- --landsoul-shadow: #353e5a;
30
- --landsoul-color: #2b414f;
31
- }
32
- }
33
- @media screen and (prefers-color-scheme: dark) {
34
- body {
35
- --landsoul-bg: #202021;
36
- --landsoul-text: #e7e7e7;
37
- --landsoul-shadow: #353e5a;
38
- --landsoul-color: #2b414f;
39
- }
40
- }
41
- body {
42
- margin: 0;
43
- }
44
- a {
45
- background-color: transparent;
46
- }
47
- progress {
48
- vertical-align: baseline;
49
- width: 8rem;
50
- }
51
- body {
52
- background-color: var(--landsoul-bg);
53
- color: var(--landsoul-text);
54
- font-family: Graphik, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;
55
- font-size: 16px;
56
- -webkit-transition: color var(--landsoul-time), background-color var(--landsoul-time);
57
- transition: color var(--landsoul-time), background-color var(--landsoul-time);
58
- }
59
- a {
60
- color: var(--landsoul-accent);
61
- text-decoration: none;
62
- }
63
- a:hover {
64
- text-decoration: underline;
65
- }
66
- h1 {
67
- font-size: 2.5rem;
68
- }
69
- h2 {
70
- font-size: 2.25rem;
71
- }
72
- h3 {
73
- font-size: 2rem;
74
- }
75
- h4 {
76
- font-size: 1.75rem;
77
- }
78
- h5 {
79
- font-size: 1.5rem;
80
- }
81
- h6 {
82
- font-size: 1.25rem;
83
- }
84
- a[href^="#"] h1,
85
- a[href^="#"] h2,
86
- a[href^="#"] h3,
87
- a[href^="#"] h4,
88
- a[href^="#"] h5,
89
- a[href^="#"] h6 {
90
- color: var(--landsoul-text);
91
- }
92
- a[href^="#"] h1:before,
93
- a[href^="#"] h2:before,
94
- a[href^="#"] h3:before,
95
- a[href^="#"] h4:before,
96
- a[href^="#"] h5:before,
97
- a[href^="#"] h6:before {
98
- color: var(--landsoul-accent);
99
- content: "#";
100
- margin-right: 0.3rem;
101
- }
102
- h1,
103
- h2,
104
- h3,
105
- h4,
106
- h5,
107
- h6 {
108
- color: inherit;
109
- margin: 0;
110
- padding: 0;
111
- }
112
- h1 > small,
113
- h2 > small,
114
- h3 > small,
115
- h4 > small,
116
- h5 > small,
117
- h6 > small {
118
- background-color: var(--landsoul-shadow);
119
- border-radius: var(--landsoul-radius);
120
- font-weight: lighter;
121
- margin-left: 0.25rem;
122
- padding: 0 0.25rem;
123
- }
124
- button,
125
- input,
126
- select,
127
- textarea {
128
- background-color: var(--landsoul-shadow);
129
- color: var(--landsoul-text);
130
- }
131
- button,
132
- input[type="button"],
133
- input[type="reset"],
134
- input[type="submit"],
135
- select {
136
- background-color: var(--landsoul-color);
137
- cursor: pointer;
138
- -webkit-transition: -webkit-filter var(--landsoul-time);
139
- transition: -webkit-filter var(--landsoul-time);
140
- transition: filter var(--landsoul-time);
141
- transition: filter var(--landsoul-time), -webkit-filter var(--landsoul-time);
142
- }
143
- button:hover,
144
- input[type="button"]:hover,
145
- input[type="reset"]:hover,
146
- input[type="submit"]:hover,
147
- select:hover {
148
- -webkit-filter: contrast(0.94);
149
- filter: contrast(0.94);
150
- }
151
- button,
152
- input {
153
- border: none;
154
- border-radius: var(--landsoul-radius);
155
- padding: 0.3em 0.45em;
156
- }
157
- input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
158
- select,
159
- textarea {
160
- border: 0.01em solid var(--landsoul-shadow);
161
- border-radius: var(--landsoul-radius);
162
- padding: 0.2em 0.3em;
163
- -webkit-transition: -webkit-filter var(--landsoul-time);
164
- transition: -webkit-filter var(--landsoul-time);
165
- transition: filter var(--landsoul-time);
166
- transition: filter var(--landsoul-time), -webkit-filter var(--landsoul-time);
167
- }
168
- input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
169
- select:hover,
170
- textarea:hover {
171
- -webkit-filter: contrast(0.94);
172
- filter: contrast(0.94);
173
- }
174
- input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
175
- select:focus,
176
- textarea:focus {
177
- border: 0.01em solid var(--landsoul-text);
178
- outline: none;
179
- }
180
- textarea {
181
- min-height: 2rem;
182
- min-width: 2rem;
183
- }
184
- [disabled],
185
- input[disabled] {
186
- cursor: not-allowed;
187
- opacity: 0.5;
188
- }
189
- input[type="checkbox"],
190
- input[type="radio"] {
191
- --size: 1.25rem;
192
- all: unset;
193
- -webkit-appearance: none;
194
- -moz-appearance: none;
195
- appearance: none;
196
- -webkit-box-sizing: border-box;
197
- box-sizing: border-box;
198
- cursor: pointer;
199
- display: inline-block;
200
- height: var(--size);
201
- opacity: 0.8;
202
- position: relative;
203
- -webkit-transition: all var(--landsoul-time);
204
- transition: all var(--landsoul-time);
205
- vertical-align: text-bottom;
206
- }
207
- input[type="checkbox"]:hover,
208
- input[type="radio"]:hover {
209
- opacity: 1;
210
- }
211
- input[type="checkbox"] {
212
- background: var(--landsoul-shadow);
213
- border-radius: 1rem;
214
- width: calc(var(--size) * 1.75);
215
- }
216
- input[type="checkbox"]:after {
217
- background: var(--landsoul-bg);
218
- border-radius: 50%;
219
- content: "";
220
- display: inline-block;
221
- height: calc(var(--size) * 0.8);
222
- left: calc(var(--size) * 0.1);
223
- position: absolute;
224
- top: calc(var(--size) * 0.1);
225
- -webkit-transition: all 0.4s;
226
- transition: all 0.4s;
227
- width: calc(var(--size) * 0.8);
228
- }
229
- input[type="checkbox"]:checked {
230
- background: var(--landsoul-accent);
231
- }
232
- input[type="checkbox"]:checked:after {
233
- content: "";
234
- left: 100%;
235
- position: absolute;
236
- -webkit-transform: translateX(calc(-100% - var(--size) * 0.1));
237
- transform: translateX(calc(-100% - var(--size) * 0.1));
238
- }
239
- input[type="radio"] {
240
- border: solid calc(var(--size) * 0.1) var(--landsoul-shadow);
241
- border-radius: 50%;
242
- width: var(--size);
243
- }
244
- input[type="radio"]:after {
245
- background: var(--landsoul-accent);
246
- border-radius: 50%;
247
- content: "";
248
- display: inline-block;
249
- height: calc(var(--size) * 0.6);
250
- left: 50%;
251
- opacity: 0;
252
- position: absolute;
253
- top: 50%;
254
- -webkit-transform: translate(-50%, -50%);
255
- transform: translate(-50%, -50%);
256
- -webkit-transition: opacity var(--landsoul-time);
257
- transition: opacity var(--landsoul-time);
258
- width: calc(var(--size) * 0.6);
259
- }
260
- input[type="radio"]:checked:after {
261
- opacity: 1;
262
- }
263
- input[type="range"] {
264
- -webkit-appearance: none;
265
- background-color: transparent;
266
- border-radius: 1rem;
267
- cursor: pointer;
268
- height: 0.3rem;
269
- vertical-align: baseline;
270
- }
271
- input[type="range"]::-webkit-slider-runnable-track {
272
- background-color: var(--landsoul-shadow);
273
- border-radius: 1rem;
274
- height: 0.15rem;
275
- width: 100%;
276
- }
277
- input[type="range"]::-webkit-slider-thumb {
278
- -webkit-appearance: none;
279
- background-color: var(--landsoul-bg);
280
- border: 0.2rem solid var(--landsoul-color);
281
- border-radius: 50%;
282
- cursor: -webkit-grab;
283
- cursor: grab;
284
- height: 1rem;
285
- -webkit-transform: translateY(-0.4rem) scale(0.8);
286
- transform: translateY(-0.4rem) scale(0.8);
287
- -webkit-transition: transform 0.2s;
288
- -webkit-transition: -webkit-transform 0.2s;
289
- transition: -webkit-transform 0.2s;
290
- transition: transform 0.2s;
291
- transition: transform 0.2s, -webkit-transform 0.2s;
292
- width: 1rem;
293
- }
294
- input[type="range"]::-webkit-slider-thumb:active {
295
- -webkit-transform: translateY(-0.4rem) scale(1);
296
- transform: translateY(-0.4rem) scale(1);
297
- }
298
- input[type="range"]::-moz-range-progress {
299
- background-color: var(--landsoul-accent);
300
- height: 0.1rem;
301
- }
302
- input[type="range"]::-moz-range-track {
303
- background-color: var(--landsoul-shadow);
304
- height: 0.15rem;
305
- width: 100%;
306
- }
307
- input[type="range"]::-moz-range-thumb {
308
- -moz-appearance: none;
309
- background-color: var(--landsoul-bg);
310
- border: 0.2rem solid var(--landsoul-color);
311
- border-radius: 50%;
312
- cursor: grab;
313
- height: 1rem;
314
- transform: scale(0.8);
315
- -moz-transition: transform 0.2s;
316
- transition: transform 0.2s;
317
- width: 1rem;
318
- }
319
- input[type="range"]::-moz-range-thumb:active {
320
- transform: scale(1);
321
- }
322
- table {
323
- border-collapse: collapse;
324
- -webkit-box-shadow: 0.1em 0.1em 0.05em var(--landsoul-shadow), -0.1em -0.1em 0.05em var(--landsoul-shadow);
325
- box-shadow: 0.1em 0.1em 0.05em var(--landsoul-shadow), -0.1em -0.1em 0.05em var(--landsoul-shadow);
326
- margin: 0.05em;
327
- }
328
- thead {
329
- background-color: var(--landsoul-shadow);
330
- color: var(--landsoul-text);
331
- }
332
- tbody tr {
333
- background-color: var(--landsoul-bg);
334
- }
335
- tbody tr:nth-child(2n) {
336
- background-color: var(--landsoul-shadow);
337
- }
338
- td,
339
- th {
340
- padding: 0.25em 0.5em;
341
- }
342
- figure {
343
- -webkit-box-orient: vertical;
344
- -webkit-box-direction: normal;
345
- display: -webkit-box;
346
- display: -ms-flexbox;
347
- display: flex;
348
- -ms-flex-flow: column;
349
- flex-flow: column;
350
- margin: auto;
351
- }
352
- figure img {
353
- max-width: 100%;
354
- }
355
- figure figcaption {
356
- font-size: 0.75em;
357
- margin: 0.5em;
358
- }
359
- details {
360
- padding: 0.5em 0.5em 0;
361
- }
362
- summary {
363
- font-weight: 700;
364
- margin: -0.5em -0.5em 0;
365
- }
366
- details[open],
367
- summary {
368
- padding: 0.5em;
369
- }
370
- details[open] summary {
371
- margin-bottom: 0.5em;
372
- }
373
- dialog {
374
- all: unset;
375
- background-color: var(--landsoul-shadow);
376
- border-radius: var(--landsoul-radius);
377
- color: var(--landsoul-text);
378
- left: 50%;
379
- max-height: 100%;
380
- max-width: 100%;
381
- opacity: 0;
382
- overflow: auto;
383
- padding: 0.5rem 1rem;
384
- position: fixed;
385
- top: 50%;
386
- -webkit-transform: translate(-50%, -50%);
387
- transform: translate(-50%, -50%);
388
- -webkit-transition: opacity 0.3s;
389
- transition: opacity 0.3s;
390
- z-index: 2;
391
- }
392
- dialog[open] {
393
- opacity: 1;
394
- }
395
- progress {
396
- --height: 0.5em;
397
- background-color: var(--landsoul-shadow);
398
- border: none;
399
- border-radius: var(--height);
400
- color: var(--landsoul-accent);
401
- height: var(--height);
402
- line-height: var(--height);
403
- overflow: hidden;
404
- }
405
- progress::-moz-progress-bar {
406
- background-color: var(--landsoul-accent);
407
- }
408
- progress::-webkit-progress-bar {
409
- background-color: var(--landsoul-shadow);
410
- }
411
- progress::-webkit-progress-value {
412
- background-color: var(--landsoul-accent);
413
- }
414
- ::-webkit-meter-bar {
415
- background-color: var(--landsoul-shadow);
416
- border: none;
417
- }
418
- hr {
419
- border: none;
420
- border-top: 0.15em solid var(--landsoul-color);
421
- }
422
- blockquote {
423
- border-left: 0.25rem solid var(--landsoul-shadow);
424
- font-style: italic;
425
- margin: 0.5rem 0;
426
- padding: 0.5rem 1rem;
427
- }
428
- code,
429
- kbd,
430
- pre {
431
- background-color: var(--landsoul-shadow);
432
- border-radius: var(--landsoul-radius);
433
- }
434
- code,
435
- kbd,
436
- pre,
437
- samp {
438
- font-family: Consolas, monospace;
439
- }
440
- code,
441
- kbd {
442
- padding: 0.05em 0.2em;
443
- }
444
- pre {
445
- padding: 0.5em 0.75em;
446
- }
447
- kbd {
448
- border: solid rgba(0, 0, 0, 0.05);
449
- border-width: 0.1em 0.1em 0.2em;
450
- }
451
- fieldset,
452
- iframe {
453
- border: 0.15em solid var(--landsoul-color);
454
- border-radius: var(--landsoul-radius);
455
- }
1
+ body{--landsoul-bg:#fff;--landsoul-text:#3d424f;--landsoul-shadow:#f4f4f5;--landsoul-accent:#2563eb;--landsoul-color:#e3e4e8;--landsoul-time:0.3s;--landsoul-radius:0.25em;--landsoul-gradient:linear-gradient(#ccfcf7,#c4eae9,#bbd8db,#b3c6cd,#aab4bf)}body[data-theme=dark]{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-shadow:#353e5a;--landsoul-color:#2b414f}@media screen and (prefers-color-scheme:dark){body{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-shadow:#353e5a;--landsoul-color:#2b414f}}body{margin:0}a{background-color:transparent}progress{vertical-align:baseline;width:8rem}body{background-color:var(--landsoul-bg);color:var(--landsoul-text);font-family:Graphik,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;-webkit-transition:color var(--landsoul-time),background-color var(--landsoul-time);transition:color var(--landsoul-time),background-color var(--landsoul-time)}a{color:var(--landsoul-accent);-webkit-text-decoration:none;text-decoration:none}a:hover{-webkit-text-decoration:underline;text-decoration:underline}h1{font-size:2.5rem}h2{font-size:2.25rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}a[href^="#"] h1,a[href^="#"] h2,a[href^="#"] h3,a[href^="#"] h4,a[href^="#"] h5,a[href^="#"] h6{color:var(--landsoul-text)}a[href^="#"] h1:before,a[href^="#"] h2:before,a[href^="#"] h3:before,a[href^="#"] h4:before,a[href^="#"] h5:before,a[href^="#"] h6:before{color:var(--landsoul-accent);content:"#";margin-right:.3rem}h1,h2,h3,h4,h5,h6{color:inherit;margin:0;padding:0}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius);font-weight:lighter;margin-left:.25rem;padding:0 .25rem}button,input,select,textarea{background-color:var(--landsoul-shadow);color:var(--landsoul-text)}button,input[type=button],input[type=reset],input[type=submit],select{background-color:var(--landsoul-color);cursor:pointer;-webkit-transition:-webkit-filter var(--landsoul-time);transition:-webkit-filter var(--landsoul-time);transition:filter var(--landsoul-time);transition:filter var(--landsoul-time),-webkit-filter var(--landsoul-time)}button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover,select:hover{-webkit-filter:contrast(.94);filter:contrast(.94)}button,input{border:none;border-radius:var(--landsoul-radius);padding:.3em .45em}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border:.01em solid var(--landsoul-shadow);border-radius:var(--landsoul-radius);padding:.2em .3em;-webkit-transition:-webkit-filter var(--landsoul-time);transition:-webkit-filter var(--landsoul-time);transition:filter var(--landsoul-time);transition:filter var(--landsoul-time),-webkit-filter var(--landsoul-time)}input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,select:hover,textarea:hover{-webkit-filter:contrast(.94);filter:contrast(.94)}input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{border:.01em solid var(--landsoul-text);outline:none}textarea{min-height:2rem;min-width:2rem}[disabled],input[disabled]{cursor:not-allowed;opacity:.5}input[type=checkbox],input[type=radio]{--size:1.25rem;all:unset;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;height:1.25rem;height:var(--size);opacity:.8;position:relative;-webkit-transition:all var(--landsoul-time);transition:all var(--landsoul-time);vertical-align:text-bottom}input[type=checkbox]:hover,input[type=radio]:hover{opacity:1}input[type=checkbox]{background:var(--landsoul-shadow);border-radius:1rem;width:calc(var(--size)*1.75)}input[type=checkbox]:after{background:var(--landsoul-bg);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.8);left:calc(var(--size)*.1);position:absolute;top:calc(var(--size)*.1);-webkit-transition:all .4s;transition:all .4s;width:calc(var(--size)*.8)}input[type=checkbox]:checked{background:var(--landsoul-accent)}input[type=checkbox]:checked:after{content:"";left:100%;position:absolute;-webkit-transform:translateX(calc(-100% - var(--size)*.1));transform:translateX(calc(-100% - var(--size)*.1))}input[type=radio]{border:solid calc(var(--size)*.1) var(--landsoul-shadow);border-radius:50%;width:var(--size)}input[type=radio]:after{background:var(--landsoul-accent);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.6);left:50%;opacity:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:opacity var(--landsoul-time);transition:opacity var(--landsoul-time);width:calc(var(--size)*.6)}input[type=radio]:checked:after{opacity:1}input[type=range]{-webkit-appearance:none;background-color:transparent;border-radius:1rem;cursor:pointer;height:.3rem;vertical-align:baseline}input[type=range]::-webkit-slider-runnable-track{background-color:var(--landsoul-shadow);border-radius:1rem;height:.15rem;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--landsoul-bg);border:.2rem solid var(--landsoul-color);border-radius:50%;cursor:-webkit-grab;cursor:grab;height:1rem;-webkit-transform:translateY(-.4rem) scale(.8);transform:translateY(-.4rem) scale(.8);-webkit-transition:transform .2s;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:1rem}input[type=range]::-webkit-slider-thumb:active{-webkit-transform:translateY(-.4rem) scale(1);transform:translateY(-.4rem) scale(1)}input[type=range]::-moz-range-progress{background-color:var(--landsoul-accent);height:.1rem}input[type=range]::-moz-range-track{background-color:var(--landsoul-shadow);height:.15rem;width:100%}input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:var(--landsoul-bg);border:.2rem solid var(--landsoul-color);border-radius:50%;cursor:grab;height:1rem;transform:scale(.8);-moz-transition:transform .2s;transition:transform .2s;width:1rem}input[type=range]::-moz-range-thumb:active{transform:scale(1)}table{border-collapse:collapse;border-spacing:0;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;max-width:100%;overflow:auto}table caption{padding:.5em}table tfoot th,table thead th{background-color:var(--landsoul-shadow);padding-bottom:.75em;padding-top:.75em;position:sticky;vertical-align:bottom}table thead th{top:0}table tfoot th{bottom:0}table tbody{white-space:nowrap}table tbody tr{background-color:var(--landsoul-bg)}table tbody tr:nth-child(2n){background-color:var(--landsoul-shadow)}table td,table th{padding:.25em .5em}table,td,th{border:2px solid var(--landsoul-color)}td,th{border-bottom-width:0}td:first-child,th:first-child{border-left-width:0}td:last-child,th:last-child{border-right-width:0}figure{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;margin:auto}figure img{max-width:100%}figure figcaption{font-size:.75em;margin:.5em}details{padding:.5em .5em 0}summary{font-weight:700;margin:-.5em -.5em 0}details[open],summary{padding:.5em}details[open] summary{margin-bottom:.5em}dialog{all:unset;background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius);color:var(--landsoul-text);left:50%;max-height:100%;max-width:100%;opacity:0;overflow:auto;padding:.5rem 1rem;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:opacity .3s;transition:opacity .3s;z-index:2}dialog[open]{opacity:1}progress{--height:0.5em;background-color:var(--landsoul-shadow);border:none;border-radius:.5em;border-radius:var(--height);color:var(--landsoul-accent);height:.5em;height:var(--height);line-height:.5em;line-height:var(--height);overflow:hidden}progress::-moz-progress-bar{background-color:var(--landsoul-accent)}progress::-webkit-progress-bar{background-color:var(--landsoul-shadow)}progress::-webkit-progress-value{background-color:var(--landsoul-accent)}::-webkit-meter-bar{background-color:var(--landsoul-shadow);border:none}hr{border:none;border-top:.15em solid var(--landsoul-color)}blockquote{border-left:.25rem solid var(--landsoul-shadow);font-style:italic;margin:.5rem 0;padding:.5rem 1rem}code,kbd,pre{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius)}code,kbd,pre,samp{font-family:Consolas,monospace}code,kbd{padding:.05em .2em}pre{padding:.5em .75em}kbd{border:solid rgba(0,0,0,.05);border-width:.1em .1em .2em}fieldset,iframe{border:.15em solid var(--landsoul-color);border-radius:var(--landsoul-radius)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "landsoul",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "drop in css library landsoul",
5
5
  "main": "./dist/landsoul.css",
6
6
  "scripts": {
@@ -20,10 +20,10 @@
20
20
  "homepage": "https://github.com/YieldRay/landsoul#readme",
21
21
  "devDependencies": {
22
22
  "autoprefixer": "^10.4.14",
23
- "cssnano": "^6.0.0",
24
- "postcss": "^8.4.21",
23
+ "cssnano": "^6.0.1",
24
+ "postcss": "^8.4.25",
25
25
  "postcss-cli": "^10.1.0",
26
- "postcss-preset-env": "^7.8.3",
27
- "sass": "^1.60.0"
26
+ "postcss-preset-env": "^9.0.0",
27
+ "sass": "^1.63.6"
28
28
  }
29
29
  }
package/src/landsoul/_table.scss CHANGED
@@ -1,21 +1,61 @@
1
1
  table {
2
+ display: inline-block;
3
+ box-sizing: border-box;
4
+ max-width: 100%;
5
+ overflow: auto;
2
6
  border-collapse: collapse;
3
- margin: 0.05em;
4
- box-shadow: 0.1em 0.1em 0.05em var(--landsoul-shadow), -0.1em -0.1em 0.05em var(--landsoul-shadow);
7
+ border-spacing: 0;
8
+ caption {
9
+ padding: 0.5em;
10
+ }
11
+ thead,
12
+ tfoot {
13
+ th {
14
+ padding-top: 0.75em;
15
+ padding-bottom: 0.75em;
16
+ position: sticky;
17
+ vertical-align: bottom;
18
+ background-color: var(--landsoul-shadow);
19
+ }
20
+ }
21
+ thead th {
22
+ top: 0;
23
+ }
24
+ tfoot th {
25
+ bottom: 0;
26
+ }
27
+ tbody {
28
+ white-space: nowrap;
29
+ tr {
30
+ background-color: var(--landsoul-bg);
31
+ &:nth-child(2n) {
32
+ background-color: var(--landsoul-shadow);
33
+ }
34
+ }
35
+ }
36
+ td,
37
+ th {
38
+ padding: 0.25em 0.5em;
39
+ }
5
40
  }
6
41
 
7
- thead {
8
- color: var(--landsoul-text);
9
- background-color: var(--landsoul-shadow);
42
+ // border
43
+
44
+ table,
45
+ th,
46
+ td {
47
+ border: 2px solid var(--landsoul-color);
10
48
  }
11
- tbody tr {
12
- background-color: var(--landsoul-bg);
13
- &:nth-child(2n) {
14
- background-color: var(--landsoul-shadow);
15
- }
49
+ th,
50
+ td {
51
+ border-bottom-width: 0;
16
52
  }
17
53
 
18
- td,
19
- th {
20
- padding: 0.25em 0.5em;
54
+ th:first-child,
55
+ td:first-child {
56
+ border-left-width: 0;
57
+ }
58
+ th:last-child,
59
+ td:last-child {
60
+ border-right-width: 0;
21
61
  }