landsoul 0.1.4 → 0.2.0
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/LICENSE +21 -21
- package/README.md +62 -48
- package/dist/landsoul.css +1 -1
- package/package.json +15 -8
- package/src/_mixins.scss +0 -9
- package/src/_theme.scss +0 -32
- package/src/landsoul/_details.scss +0 -16
- package/src/landsoul/_dialog.scss +0 -21
- package/src/landsoul/_figure.scss +0 -12
- package/src/landsoul/_global.scss +0 -69
- package/src/landsoul/_input.scss +0 -60
- package/src/landsoul/_input_checkbox_radio.scss +0 -73
- package/src/landsoul/_input_range.scss +0 -53
- package/src/landsoul/_others.scss +0 -47
- package/src/landsoul/_progress_meter.scss +0 -24
- package/src/landsoul/_reset.scss +0 -10
- package/src/landsoul/_table.scss +0 -61
- package/src/landsoul.scss +0 -12
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2023 YieldRay
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 YieldRay
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,48 +1,62 @@
|
|
|
1
|
-
# landsoul
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
|
|
1
|
+
# landsoul
|
|
2
|
+
|
|
3
|
+
[](https://packagephobia.com/result?p=landsoul)
|
|
4
|
+
[](https://www.npmjs.com/package/landsoul)
|
|
5
|
+
|
|
6
|
+
A classless CSS library (IE11 is not supported)
|
|
7
|
+
|
|
8
|
+
Preview: <https://yieldray.github.io/landsoul/>
|
|
9
|
+
|
|
10
|
+
# Usage
|
|
11
|
+
|
|
12
|
+
To enable dark mode, use `prefers-color-scheme: dark` or `body[data-theme="dark"]`
|
|
13
|
+
|
|
14
|
+
```html
|
|
15
|
+
<link rel="stylesheet" href="https://unpkg.com/landsoul" />
|
|
16
|
+
|
|
17
|
+
<!-- add this to enable dark mode manually -->
|
|
18
|
+
<body data-theme="dark"></body>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Use with CSS [@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer), this allows landsoul styles to be easily overridden.
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
/* remember that the @import at-rule must precede all other types of rules, except @charset and @layer rules. */
|
|
25
|
+
@layer landsoul, my-layer;
|
|
26
|
+
@import url(//unpkg.com/landsoul) layer(landsoul);
|
|
27
|
+
/* your style here... */
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
This stylesheet DO NOT include css reset, and keep minimum influence to the built-in html elements,
|
|
31
|
+
so you may add some extra css to make things work.
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
/* For example: */
|
|
35
|
+
body {
|
|
36
|
+
box-sizing: border-box;
|
|
37
|
+
max-width: 38rem;
|
|
38
|
+
margin: 0 auto;
|
|
39
|
+
padding: 1rem;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
img {
|
|
43
|
+
display: inline-block;
|
|
44
|
+
max-width: 100%;
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## dev
|
|
49
|
+
|
|
50
|
+
Use Node.js LTS version.
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
$ npm install
|
|
54
|
+
$ npm run dev
|
|
55
|
+
# xdg-open index.html
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## build
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
$ npm run build
|
|
62
|
+
```
|
package/dist/landsoul.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
body{--landsoul-bg:#fff;--landsoul-text:#
|
|
1
|
+
body{--landsoul-bg:#fff;--landsoul-text:#262626;--landsoul-text-on-shadow:#5a5a5a;--landsoul-shadow:#ebebeb;--landsoul-shadow-active:#bfbfbf;--landsoul-accent:#2e72f0;--landsoul-border:#e3e4e8}body[data-theme=dark]{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-text-on-shadow:silver;--landsoul-shadow:#353e5a;--landsoul-shadow-active:#4a5670;--landsoul-accent:#4a90ff;--landsoul-border:#2b414f}@media screen and (prefers-color-scheme:dark){body{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-text-on-shadow:silver;--landsoul-shadow:#353e5a;--landsoul-shadow-active:#4a5670;--landsoul-accent:#4a90ff;--landsoul-border:#2b414f}}body{--landsoul-time:0.25s;--landsoul-radius:0.4rem;--landsoul-radius-active:0.6rem;--landsoul-gradient:linear-gradient(#ccfcf7,#c4eae9,#bbd8db,#b3c6cd,#aab4bf)}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:14px;transition:color var(--landsoul-time),background-color var(--landsoul-time)}a{color:var(--landsoul-accent);-webkit-tap-highlight-color:transparent;-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-on-shadow);-webkit-tap-highlight-color:transparent}button,input[type=button],input[type=reset],input[type=submit],select{transition:filter var(--landsoul-time)}button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover,select:hover{filter:contrast(.94)}button,input[type=button],input[type=reset],input[type=submit],select{color:var(--landsoul-text);cursor:pointer}button,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{transition:filter var(--landsoul-time)}button:hover,input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,select:hover,textarea:hover{filter:contrast(.94)}button,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border:none;border-radius:var(--landsoul-radius);padding:.25rem .5rem}button:focus-within,input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-within,select:focus-within,textarea:focus-within{outline:var(--landsoul-text) solid .01rem}textarea{border:none;min-height:2rem;min-width:2rem}[disabled],input[disabled]{cursor:not-allowed;opacity:.5}label:not(:has([disabled])){cursor:pointer}input[type=checkbox],input[type=radio]{--size:1.25rem;all:unset;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;cursor:pointer;display:inline-block;height:1.25rem;height:var(--size);opacity:.8;position:relative;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);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;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%;transform:translate(-50%,-50%);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-border);border-radius:50%;cursor:grab;height:1rem;transform:translateY(-.4rem) scale(.8);-webkit-transition:transform .2s;transition:transform .2s;width:1rem}input[type=range]::-webkit-slider-thumb:active{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-border);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-radius:var(--landsoul-radius-active);border-spacing:0;box-sizing:border-box;display:inline-block;max-width:100%;overflow:auto}table caption{padding:.5rem}table tfoot th,table thead th{background-color:var(--landsoul-shadow);padding-bottom:.75rem;padding-top:.75rem;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:.25rem .5rem}table,td,th{border:2px solid var(--landsoul-border)}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{display:flex;flex-flow:column;margin:auto}figure img{max-width:100%}figure figcaption{font-size:.75rem;margin:.5rem}details{padding:.5rem .5rem 0;interpolate-size:allow-keywords;-webkit-tap-highlight-color:transparent}details summary{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius-active);cursor:pointer;margin:-.5rem -.5rem 0;padding:.75rem calc(.75rem + 8px) .75rem .75rem;position:relative}details summary::marker{content:""}details summary:after{border-right:1.5px solid;border-top:1.5px solid;content:"";height:5px;position:absolute;right:8px;rotate:45deg;top:50%;transition:rotate .1s;translate:-50% -50%;width:5px}details::details-content{height:0;overflow:hidden;transition:height .2s,content-visibility .2s;transition-behavior:allow-discrete}details:open summary:after{rotate:135deg}details:open::details-content{height:auto}[popover],dialog{background-color:var(--landsoul-bg);border:1px solid var(--landsoul-shadow);border-radius:2rem;color:var(--landsoul-text);overflow:auto;padding:1rem;width:min(260px,100vw - 2px)}progress{--height:0.5rem;background-color:var(--landsoul-shadow);border:none;border-radius:.5rem;border-radius:var(--height);color:var(--landsoul-accent);height:.5rem;height:var(--height);line-height:.5rem;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:.15rem solid var(--landsoul-border)}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:.05rem .2rem}pre{box-sizing:border-box;max-width:100%;overflow:auto;padding:.5rem .75rem}kbd{border:solid rgba(0,0,0,.05);border-width:.1rem .1rem .2rem}fieldset,iframe{border:.15rem solid var(--landsoul-border);border-radius:var(--landsoul-radius-active)}
|
package/package.json
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "landsoul",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"description": "drop in css library landsoul",
|
|
5
6
|
"main": "./dist/landsoul.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
6
10
|
"scripts": {
|
|
7
|
-
"dev": "
|
|
11
|
+
"dev": "node dev-server.ts",
|
|
8
12
|
"build": "rm -rf ./dist && sass src:dist --no-source-map && postcss ./dist/*.css -d ./dist"
|
|
9
13
|
},
|
|
10
14
|
"repository": {
|
|
@@ -21,12 +25,15 @@
|
|
|
21
25
|
"url": "https://github.com/YieldRay/landsoul/issues"
|
|
22
26
|
},
|
|
23
27
|
"homepage": "https://github.com/YieldRay/landsoul#readme",
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"registry": "https://registry.npmjs.org"
|
|
30
|
+
},
|
|
24
31
|
"devDependencies": {
|
|
25
|
-
"autoprefixer": "^10.4.
|
|
26
|
-
"cssnano": "^
|
|
27
|
-
"postcss": "^8.
|
|
28
|
-
"postcss-cli": "^
|
|
29
|
-
"postcss-preset-env": "^
|
|
30
|
-
"sass": "^1.
|
|
32
|
+
"autoprefixer": "^10.4.21",
|
|
33
|
+
"cssnano": "^7.1.1",
|
|
34
|
+
"postcss": "^8.5.6",
|
|
35
|
+
"postcss-cli": "^11.0.1",
|
|
36
|
+
"postcss-preset-env": "^10.4.0",
|
|
37
|
+
"sass": "^1.93.2"
|
|
31
38
|
}
|
|
32
39
|
}
|
package/src/_mixins.scss
DELETED
package/src/_theme.scss
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
@mixin light {
|
|
2
|
-
--landsoul-bg: #fff;
|
|
3
|
-
--landsoul-text: #3d424f;
|
|
4
|
-
--landsoul-shadow: #f4f4f5;
|
|
5
|
-
--landsoul-accent: #2563eb;
|
|
6
|
-
--landsoul-color: #e3e4e8;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
@mixin dark {
|
|
10
|
-
--landsoul-bg: #202021;
|
|
11
|
-
--landsoul-text: #e7e7e7;
|
|
12
|
-
--landsoul-shadow: #353e5a;
|
|
13
|
-
--landsoul-color: #2b414f;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
body {
|
|
17
|
-
@include light;
|
|
18
|
-
// other variables
|
|
19
|
-
--landsoul-time: 0.3s;
|
|
20
|
-
--landsoul-radius: 0.25rem;
|
|
21
|
-
--landsoul-gradient: linear-gradient(rgb(204, 252, 247), rgb(196, 234, 233), rgb(187, 216, 219), rgb(179, 198, 205), rgb(170, 180, 191));
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
body[data-theme="dark"] {
|
|
25
|
-
@include dark;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
@media screen and (prefers-color-scheme: dark) {
|
|
29
|
-
body {
|
|
30
|
-
@include dark;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
@import "../mixins";
|
|
2
|
-
|
|
3
|
-
dialog {
|
|
4
|
-
all: unset;
|
|
5
|
-
@include theme-color(var(--landsoul-shadow));
|
|
6
|
-
border-radius: var(--landsoul-radius);
|
|
7
|
-
position: fixed;
|
|
8
|
-
z-index: 2;
|
|
9
|
-
padding: 0.5rem 1rem;
|
|
10
|
-
top: 50%;
|
|
11
|
-
left: 50%;
|
|
12
|
-
transform: translate(-50%, -50%);
|
|
13
|
-
max-height: 100%;
|
|
14
|
-
max-width: 100%;
|
|
15
|
-
overflow: auto;
|
|
16
|
-
opacity: 0;
|
|
17
|
-
transition: opacity 0.3s;
|
|
18
|
-
&[open] {
|
|
19
|
-
opacity: 1;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
@import "../mixins";
|
|
2
|
-
|
|
3
|
-
body {
|
|
4
|
-
font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
|
|
5
|
-
sans-serif;
|
|
6
|
-
font-size: 16px;
|
|
7
|
-
transition: color var(--landsoul-time), background-color var(--landsoul-time);
|
|
8
|
-
@include theme-color;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
a {
|
|
12
|
-
color: var(--landsoul-accent);
|
|
13
|
-
text-decoration: none;
|
|
14
|
-
&:hover {
|
|
15
|
-
text-decoration: underline;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
h1 {
|
|
20
|
-
font-size: 2.5rem;
|
|
21
|
-
}
|
|
22
|
-
h2 {
|
|
23
|
-
font-size: 2.25rem;
|
|
24
|
-
}
|
|
25
|
-
h3 {
|
|
26
|
-
font-size: 2rem;
|
|
27
|
-
}
|
|
28
|
-
h4 {
|
|
29
|
-
font-size: 1.75rem;
|
|
30
|
-
}
|
|
31
|
-
h5 {
|
|
32
|
-
font-size: 1.5rem;
|
|
33
|
-
}
|
|
34
|
-
h6 {
|
|
35
|
-
font-size: 1.25rem;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
a[href^="#"] {
|
|
39
|
-
h1,
|
|
40
|
-
h2,
|
|
41
|
-
h3,
|
|
42
|
-
h4,
|
|
43
|
-
h5,
|
|
44
|
-
h6 {
|
|
45
|
-
color: var(--landsoul-text);
|
|
46
|
-
&::before {
|
|
47
|
-
content: "#";
|
|
48
|
-
margin-right: 0.3rem;
|
|
49
|
-
color: var(--landsoul-accent);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
h1,
|
|
55
|
-
h2,
|
|
56
|
-
h3,
|
|
57
|
-
h4,
|
|
58
|
-
h5,
|
|
59
|
-
h6 {
|
|
60
|
-
color: inherit;
|
|
61
|
-
margin: 0;
|
|
62
|
-
padding: 0;
|
|
63
|
-
> small {
|
|
64
|
-
@include bg-radius;
|
|
65
|
-
margin-left: 0.25rem;
|
|
66
|
-
padding: 0 0.25rem;
|
|
67
|
-
font-weight: lighter;
|
|
68
|
-
}
|
|
69
|
-
}
|
package/src/landsoul/_input.scss
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
@import "../mixins";
|
|
2
|
-
|
|
3
|
-
button,
|
|
4
|
-
select,
|
|
5
|
-
input,
|
|
6
|
-
textarea {
|
|
7
|
-
@include theme-color(var(--landsoul-shadow));
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@mixin hover-effect {
|
|
11
|
-
transition: filter var(--landsoul-time);
|
|
12
|
-
&:hover {
|
|
13
|
-
filter: contrast(0.94);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
select,
|
|
18
|
-
button,
|
|
19
|
-
input[type="button"],
|
|
20
|
-
input[type="submit"],
|
|
21
|
-
input[type="reset"] {
|
|
22
|
-
@include hover-effect;
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
background-color: var(--landsoul-color);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
button,
|
|
28
|
-
input {
|
|
29
|
-
border: none;
|
|
30
|
-
border-radius: var(--landsoul-radius);
|
|
31
|
-
padding: 0.3rem 0.45rem;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
input:not([type="checkbox"], [type="radio"], [type="range"]),
|
|
35
|
-
select,
|
|
36
|
-
textarea {
|
|
37
|
-
@include hover-effect;
|
|
38
|
-
padding: 0.2rem 0.3rem;
|
|
39
|
-
border-radius: var(--landsoul-radius);
|
|
40
|
-
border: var(--landsoul-shadow) solid 0.01rem;
|
|
41
|
-
&:focus-within {
|
|
42
|
-
outline: none;
|
|
43
|
-
border: var(--landsoul-text) solid 0.01rem;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
textarea {
|
|
48
|
-
min-height: 2rem;
|
|
49
|
-
min-width: 2rem;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
[disabled],
|
|
53
|
-
input[disabled] {
|
|
54
|
-
opacity: 0.5;
|
|
55
|
-
cursor: not-allowed;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
label:not(:has([disabled])) {
|
|
59
|
-
cursor: pointer;
|
|
60
|
-
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* --size: The size of the switch and radio
|
|
3
|
-
*/
|
|
4
|
-
input[type="checkbox"],
|
|
5
|
-
input[type="radio"] {
|
|
6
|
-
--size: 1.25rem;
|
|
7
|
-
all: unset;
|
|
8
|
-
display: inline-block;
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
appearance: none;
|
|
11
|
-
transition: all var(--landsoul-time);
|
|
12
|
-
position: relative;
|
|
13
|
-
height: var(--size);
|
|
14
|
-
vertical-align: text-bottom;
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
opacity: 0.8;
|
|
17
|
-
&:hover {
|
|
18
|
-
opacity: 1;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
input[type="checkbox"] {
|
|
23
|
-
width: calc(var(--size) * 1.75);
|
|
24
|
-
background: var(--landsoul-shadow);
|
|
25
|
-
border-radius: 1rem;
|
|
26
|
-
&::after {
|
|
27
|
-
content: "";
|
|
28
|
-
display: inline-block;
|
|
29
|
-
border-radius: 50%;
|
|
30
|
-
background: var(--landsoul-bg);
|
|
31
|
-
transition: all 0.4s;
|
|
32
|
-
width: calc(var(--size) * 0.8);
|
|
33
|
-
height: calc(var(--size) * 0.8);
|
|
34
|
-
position: absolute;
|
|
35
|
-
left: calc(var(--size) * 0.1);
|
|
36
|
-
top: calc(var(--size) * 0.1);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&:checked {
|
|
40
|
-
background: var(--landsoul-accent);
|
|
41
|
-
&::after {
|
|
42
|
-
content: "";
|
|
43
|
-
position: absolute;
|
|
44
|
-
left: 100%;
|
|
45
|
-
transform: translateX(calc(-100% - calc(var(--size) * 0.1)));
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
input[type="radio"] {
|
|
51
|
-
width: var(--size);
|
|
52
|
-
border: solid calc(var(--size) * 0.1) var(--landsoul-shadow);
|
|
53
|
-
border-radius: 50%;
|
|
54
|
-
&::after {
|
|
55
|
-
content: "";
|
|
56
|
-
opacity: 0;
|
|
57
|
-
transition: opacity var(--landsoul-time);
|
|
58
|
-
position: absolute;
|
|
59
|
-
display: inline-block;
|
|
60
|
-
border-radius: 50%;
|
|
61
|
-
background: var(--landsoul-accent);
|
|
62
|
-
width: calc(var(--size) * 0.6);
|
|
63
|
-
height: calc(var(--size) * 0.6);
|
|
64
|
-
top: calc(50%);
|
|
65
|
-
left: calc(50%);
|
|
66
|
-
transform: translate(-50%, -50%);
|
|
67
|
-
}
|
|
68
|
-
&:checked {
|
|
69
|
-
&::after {
|
|
70
|
-
opacity: 1;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
@mixin thumb-common {
|
|
2
|
-
cursor: grab;
|
|
3
|
-
height: 1rem;
|
|
4
|
-
width: 1rem;
|
|
5
|
-
background-color: var(--landsoul-bg);
|
|
6
|
-
border-radius: 50%;
|
|
7
|
-
border: solid 0.2rem var(--landsoul-color);
|
|
8
|
-
transition: transform 0.2s;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
@mixin track-common {
|
|
12
|
-
width: 100%;
|
|
13
|
-
height: 0.15rem;
|
|
14
|
-
background-color: var(--landsoul-shadow);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
input[type="range"] {
|
|
18
|
-
// track
|
|
19
|
-
-webkit-appearance: none; // only for chrome
|
|
20
|
-
background-color: transparent;
|
|
21
|
-
vertical-align: baseline;
|
|
22
|
-
height: 0.3rem;
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
border-radius: 1rem;
|
|
25
|
-
|
|
26
|
-
&::-webkit-slider-runnable-track {
|
|
27
|
-
@include track-common;
|
|
28
|
-
border-radius: 1rem;
|
|
29
|
-
}
|
|
30
|
-
&::-webkit-slider-thumb {
|
|
31
|
-
@include thumb-common;
|
|
32
|
-
-webkit-appearance: none; // only for chrome
|
|
33
|
-
transform: translateY(-0.4rem) scale(0.8, 0.8);
|
|
34
|
-
&:active {
|
|
35
|
-
transform: translateY(-0.4rem) scale(1, 1);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
&::-moz-range-progress {
|
|
39
|
-
height: 0.1rem;
|
|
40
|
-
background-color: var(--landsoul-accent);
|
|
41
|
-
}
|
|
42
|
-
&::-moz-range-track {
|
|
43
|
-
@include track-common;
|
|
44
|
-
}
|
|
45
|
-
&::-moz-range-thumb {
|
|
46
|
-
@include thumb-common;
|
|
47
|
-
-moz-appearance: none; // only for firefox
|
|
48
|
-
transform: scale(0.8, 0.8);
|
|
49
|
-
&:active {
|
|
50
|
-
transform: scale(1, 1);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
@import "../mixins";
|
|
2
|
-
|
|
3
|
-
hr {
|
|
4
|
-
border: none;
|
|
5
|
-
border-top: solid 0.15rem var(--landsoul-color);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
blockquote {
|
|
9
|
-
border-left: solid 0.25rem var(--landsoul-shadow);
|
|
10
|
-
padding: 0.5rem 1rem;
|
|
11
|
-
margin: 0.5rem 0;
|
|
12
|
-
font-style: italic;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
code,
|
|
16
|
-
kbd,
|
|
17
|
-
pre {
|
|
18
|
-
@include bg-radius;
|
|
19
|
-
font-family: Consolas, monospace;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
samp {
|
|
23
|
-
font-family: Consolas, monospace;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
code,
|
|
27
|
-
kbd {
|
|
28
|
-
padding: 0.05rem 0.2rem;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
pre {
|
|
32
|
-
padding: 0.5rem 0.75rem;
|
|
33
|
-
box-sizing: border-box;
|
|
34
|
-
max-width: 100%;
|
|
35
|
-
overflow: auto;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
kbd {
|
|
39
|
-
border: solid 0.1rem rgba(0, 0, 0, 0.05);
|
|
40
|
-
border-bottom: solid 0.2rem rgba(0, 0, 0, 0.05);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
iframe,
|
|
44
|
-
fieldset {
|
|
45
|
-
border: solid 0.15rem var(--landsoul-color);
|
|
46
|
-
border-radius: var(--landsoul-radius);
|
|
47
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
progress {
|
|
2
|
-
--height: 0.5rem;
|
|
3
|
-
height: var(--height);
|
|
4
|
-
line-height: var(--height);
|
|
5
|
-
background-color: var(--landsoul-shadow); /*IE*/
|
|
6
|
-
color: var(--landsoul-accent); /*IE*/
|
|
7
|
-
overflow: hidden;
|
|
8
|
-
border: none;
|
|
9
|
-
border-radius: var(--height);
|
|
10
|
-
&::-moz-progress-bar {
|
|
11
|
-
background-color: var(--landsoul-accent);
|
|
12
|
-
}
|
|
13
|
-
&::-webkit-progress-bar {
|
|
14
|
-
background-color: var(--landsoul-shadow);
|
|
15
|
-
}
|
|
16
|
-
&::-webkit-progress-value {
|
|
17
|
-
background-color: var(--landsoul-accent);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
::-webkit-meter-bar {
|
|
22
|
-
background-color: var(--landsoul-shadow);
|
|
23
|
-
border: none;
|
|
24
|
-
}
|
package/src/landsoul/_reset.scss
DELETED
package/src/landsoul/_table.scss
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
table {
|
|
2
|
-
display: inline-block;
|
|
3
|
-
box-sizing: border-box;
|
|
4
|
-
max-width: 100%;
|
|
5
|
-
overflow: auto;
|
|
6
|
-
border-collapse: collapse;
|
|
7
|
-
border-spacing: 0;
|
|
8
|
-
caption {
|
|
9
|
-
padding: 0.5rem;
|
|
10
|
-
}
|
|
11
|
-
thead,
|
|
12
|
-
tfoot {
|
|
13
|
-
th {
|
|
14
|
-
padding-top: 0.75rem;
|
|
15
|
-
padding-bottom: 0.75rem;
|
|
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.25rem 0.5rem;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// border
|
|
43
|
-
|
|
44
|
-
table,
|
|
45
|
-
th,
|
|
46
|
-
td {
|
|
47
|
-
border: 2px solid var(--landsoul-color);
|
|
48
|
-
}
|
|
49
|
-
th,
|
|
50
|
-
td {
|
|
51
|
-
border-bottom-width: 0;
|
|
52
|
-
}
|
|
53
|
-
|
|
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;
|
|
61
|
-
}
|
package/src/landsoul.scss
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
@import "theme";
|
|
2
|
-
@import "landsoul/reset";
|
|
3
|
-
@import "landsoul/global";
|
|
4
|
-
@import "landsoul/input";
|
|
5
|
-
@import "landsoul/input_checkbox_radio";
|
|
6
|
-
@import "landsoul/input_range";
|
|
7
|
-
@import "landsoul/table";
|
|
8
|
-
@import "landsoul/figure";
|
|
9
|
-
@import "landsoul/details";
|
|
10
|
-
@import "landsoul/dialog";
|
|
11
|
-
@import "landsoul/progress_meter";
|
|
12
|
-
@import "landsoul/others";
|