landsoul 0.1.3 → 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/README.md +62 -48
- package/dist/landsoul.css +1 -1
- package/package.json +39 -29
- 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 -14
- package/src/landsoul/_table.scss +0 -61
- package/src/landsoul.scss +0 -12
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,29 +1,39 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "landsoul",
|
|
3
|
-
"version": "0.
|
|
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
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "landsoul",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "drop in css library landsoul",
|
|
6
|
+
"main": "./dist/landsoul.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"dev": "node dev-server.ts",
|
|
12
|
+
"build": "rm -rf ./dist && sass src:dist --no-source-map && postcss ./dist/*.css -d ./dist"
|
|
13
|
+
},
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "git+https://github.com/YieldRay/landsoul.git"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"classless",
|
|
20
|
+
"css"
|
|
21
|
+
],
|
|
22
|
+
"author": "YieldRay",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"bugs": {
|
|
25
|
+
"url": "https://github.com/YieldRay/landsoul/issues"
|
|
26
|
+
},
|
|
27
|
+
"homepage": "https://github.com/YieldRay/landsoul#readme",
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"registry": "https://registry.npmjs.org"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
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"
|
|
38
|
+
}
|
|
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.25em;
|
|
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.3em 0.45em;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
input:not([type="checkbox"], [type="radio"], [type="range"]),
|
|
35
|
-
select,
|
|
36
|
-
textarea {
|
|
37
|
-
@include hover-effect;
|
|
38
|
-
padding: 0.2em 0.3em;
|
|
39
|
-
border-radius: var(--landsoul-radius);
|
|
40
|
-
border: var(--landsoul-shadow) solid 0.01em;
|
|
41
|
-
&:focus-within {
|
|
42
|
-
outline: none;
|
|
43
|
-
border: var(--landsoul-text) solid 0.01em;
|
|
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 thunb-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 thunb-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 thunb-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.15em 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.05em 0.2em;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
pre {
|
|
32
|
-
padding: 0.5em 0.75em;
|
|
33
|
-
box-sizing: border-box;
|
|
34
|
-
max-width: 100%;
|
|
35
|
-
overflow: auto;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
kbd {
|
|
39
|
-
border: solid 0.1em rgba(0, 0, 0, 0.05);
|
|
40
|
-
border-bottom: solid 0.2em rgba(0, 0, 0, 0.05);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
iframe,
|
|
44
|
-
fieldset {
|
|
45
|
-
border: solid 0.15em var(--landsoul-color);
|
|
46
|
-
border-radius: var(--landsoul-radius);
|
|
47
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
progress {
|
|
2
|
-
--height: 0.5em;
|
|
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.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
|
-
}
|
|
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";
|