landsoul 0.1.1 → 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.
- package/README.md +30 -21
- package/dist/landsoul.css +1 -1
- package/package.json +5 -5
- 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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Preview: <https://yieldray.github.io/landsoul/>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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 +1 @@
|
|
|
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 (
|
|
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.
|
|
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.
|
|
24
|
-
"postcss": "^8.4.
|
|
23
|
+
"cssnano": "^6.0.1",
|
|
24
|
+
"postcss": "^8.4.25",
|
|
25
25
|
"postcss-cli": "^10.1.0",
|
|
26
|
-
"postcss-preset-env": "^
|
|
27
|
-
"sass": "^1.
|
|
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
|
-
|
|
4
|
-
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
42
|
+
// border
|
|
43
|
+
|
|
44
|
+
table,
|
|
45
|
+
th,
|
|
46
|
+
td {
|
|
47
|
+
border: 2px solid var(--landsoul-color);
|
|
10
48
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
background-color: var(--landsoul-shadow);
|
|
15
|
-
}
|
|
49
|
+
th,
|
|
50
|
+
td {
|
|
51
|
+
border-bottom-width: 0;
|
|
16
52
|
}
|
|
17
53
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
}
|