landsoul 0.1.2 → 0.1.3
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 +19 -1
- package/dist/landsoul.css +1 -1
- package/package.json +29 -29
- package/src/landsoul/_input.scss +60 -56
- package/src/landsoul/_others.scss +47 -44
package/README.md
CHANGED
|
@@ -9,12 +9,30 @@ Preview: <https://yieldray.github.io/landsoul/>
|
|
|
9
9
|
# usage
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<link rel="stylesheet" href="https://unpkg.com/landsoul
|
|
12
|
+
<link rel="stylesheet" href="https://unpkg.com/landsoul" />
|
|
13
13
|
|
|
14
14
|
<!-- add this to enable dark mode manually -->
|
|
15
15
|
<body data-theme="dark"></body>
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
+
This stylesheet DO NOT include css reset, and keep minimum influence to the built-in html elements,
|
|
19
|
+
so you may add some extra css to make things work.
|
|
20
|
+
|
|
21
|
+
```css
|
|
22
|
+
/* For example: */
|
|
23
|
+
body {
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
max-width: 38rem;
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
padding: 1rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
img {
|
|
31
|
+
display: inline-block;
|
|
32
|
+
max-width: 100%;
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
18
36
|
## dev
|
|
19
37
|
|
|
20
38
|
```bash
|
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 (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)}
|
|
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-within,select:focus-within,textarea:focus-within{border:.01em solid var(--landsoul-text);outline:none}textarea{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;-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{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;overflow:auto;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,29 +1,29 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "landsoul",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "drop in css library landsoul",
|
|
5
|
-
"main": "./dist/landsoul.css",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "sass --watch src:dist",
|
|
8
|
-
"build": "rm -rf ./dist && sass src:dist --no-source-map && postcss ./dist/*.css -d ./dist"
|
|
9
|
-
},
|
|
10
|
-
"repository": {
|
|
11
|
-
"type": "git",
|
|
12
|
-
"url": "git+https://github.com/YieldRay/landsoul.git"
|
|
13
|
-
},
|
|
14
|
-
"keywords": [],
|
|
15
|
-
"author": "YieldRay",
|
|
16
|
-
"license": "
|
|
17
|
-
"bugs": {
|
|
18
|
-
"url": "https://github.com/YieldRay/landsoul/issues"
|
|
19
|
-
},
|
|
20
|
-
"homepage": "https://github.com/YieldRay/landsoul#readme",
|
|
21
|
-
"devDependencies": {
|
|
22
|
-
"autoprefixer": "^10.4.
|
|
23
|
-
"cssnano": "^6.0.1",
|
|
24
|
-
"postcss": "^8.4.
|
|
25
|
-
"postcss-cli": "^10.1.0",
|
|
26
|
-
"postcss-preset-env": "^9.
|
|
27
|
-
"sass": "^1.
|
|
28
|
-
}
|
|
29
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "landsoul",
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "drop in css library landsoul",
|
|
5
|
+
"main": "./dist/landsoul.css",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "sass --watch src:dist",
|
|
8
|
+
"build": "rm -rf ./dist && sass src:dist --no-source-map && postcss ./dist/*.css -d ./dist"
|
|
9
|
+
},
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "git+https://github.com/YieldRay/landsoul.git"
|
|
13
|
+
},
|
|
14
|
+
"keywords": [],
|
|
15
|
+
"author": "YieldRay",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"bugs": {
|
|
18
|
+
"url": "https://github.com/YieldRay/landsoul/issues"
|
|
19
|
+
},
|
|
20
|
+
"homepage": "https://github.com/YieldRay/landsoul#readme",
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"autoprefixer": "^10.4.16",
|
|
23
|
+
"cssnano": "^6.0.1",
|
|
24
|
+
"postcss": "^8.4.31",
|
|
25
|
+
"postcss-cli": "^10.1.0",
|
|
26
|
+
"postcss-preset-env": "^9.3.0",
|
|
27
|
+
"sass": "^1.69.5"
|
|
28
|
+
}
|
|
29
|
+
}
|
package/src/landsoul/_input.scss
CHANGED
|
@@ -1,56 +1,60 @@
|
|
|
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 {
|
|
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
|
-
}
|
|
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,44 +1,47 @@
|
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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
|
+
}
|