landsoul 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +23 -5
  3. package/dist/landsoul.css +1 -1
  4. package/package.json +11 -8
  5. package/src/_mixins.scss +9 -9
  6. package/src/_theme.scss +32 -32
  7. package/src/landsoul/_details.scss +16 -16
  8. package/src/landsoul/_dialog.scss +21 -21
  9. package/src/landsoul/_figure.scss +12 -12
  10. package/src/landsoul/_global.scss +69 -69
  11. package/src/landsoul/_input.scss +60 -56
  12. package/src/landsoul/_input_checkbox_radio.scss +73 -73
  13. package/src/landsoul/_input_range.scss +53 -53
  14. package/src/landsoul/_others.scss +47 -44
  15. package/src/landsoul/_progress_meter.scss +24 -24
  16. package/src/landsoul/_reset.scss +10 -14
  17. package/src/landsoul/_table.scss +61 -61
  18. package/src/landsoul.scss +12 -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,20 +1,38 @@
1
1
  # landsoul
2
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"]`
3
+ A classless CSS library (IE11 is not supported)
6
4
 
7
5
  Preview: <https://yieldray.github.io/landsoul/>
8
6
 
9
- # usage
7
+ # Usage
8
+
9
+ To enable dark mode, use `prefers-color-scheme: dark` or `body[data-theme="dark"]`
10
10
 
11
11
  ```html
12
- <link rel="stylesheet" href="https://unpkg.com/landsoul@latest/dist/landsoul.css" />
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.25rem;--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}}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;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;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{border:none;border-radius:var(--landsoul-radius);padding:.3rem .45rem}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border:.01rem solid var(--landsoul-shadow);border-radius:var(--landsoul-radius);padding:.2rem .3rem;transition:filter var(--landsoul-time)}input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,select:hover,textarea:hover{filter:contrast(.94)}input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-within,select:focus-within,textarea:focus-within{border:.01rem 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;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-color);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-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;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-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{display:flex;flex-flow:column;margin:auto}figure img{max-width:100%}figure figcaption{font-size:.75rem;margin:.5rem}details{padding:.5rem .5rem 0}summary{font-weight:700;margin:-.5rem -.5rem 0}details[open],summary{padding:.5rem}details[open] summary{margin-bottom:.5rem}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%;transform:translate(-50%,-50%);transition:opacity .3s;z-index:2}dialog[open]{opacity:1}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-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:.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-color);border-radius:var(--landsoul-radius)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "landsoul",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "drop in css library landsoul",
5
5
  "main": "./dist/landsoul.css",
6
6
  "scripts": {
@@ -11,19 +11,22 @@
11
11
  "type": "git",
12
12
  "url": "git+https://github.com/YieldRay/landsoul.git"
13
13
  },
14
- "keywords": [],
14
+ "keywords": [
15
+ "classless",
16
+ "css"
17
+ ],
15
18
  "author": "YieldRay",
16
- "license": "ISC",
19
+ "license": "MIT",
17
20
  "bugs": {
18
21
  "url": "https://github.com/YieldRay/landsoul/issues"
19
22
  },
20
23
  "homepage": "https://github.com/YieldRay/landsoul#readme",
21
24
  "devDependencies": {
22
- "autoprefixer": "^10.4.14",
23
- "cssnano": "^6.0.1",
24
- "postcss": "^8.4.25",
25
+ "autoprefixer": "^10.4.20",
26
+ "cssnano": "^6.1.2",
27
+ "postcss": "^8.4.47",
25
28
  "postcss-cli": "^10.1.0",
26
- "postcss-preset-env": "^9.0.0",
27
- "sass": "^1.63.6"
29
+ "postcss-preset-env": "^9.6.0",
30
+ "sass": "^1.79.4"
28
31
  }
29
32
  }
package/src/_mixins.scss CHANGED
@@ -1,9 +1,9 @@
1
- @mixin theme-color($bg: var(--landsoul-bg)) {
2
- color: var(--landsoul-text);
3
- background-color: $bg;
4
- }
5
-
6
- @mixin bg-radius($bg: var(--landsoul-shadow), $radius: var(--landsoul-radius)) {
7
- background-color: $bg;
8
- border-radius: $radius;
9
- }
1
+ @mixin theme-color($bg: var(--landsoul-bg)) {
2
+ color: var(--landsoul-text);
3
+ background-color: $bg;
4
+ }
5
+
6
+ @mixin bg-radius($bg: var(--landsoul-shadow), $radius: var(--landsoul-radius)) {
7
+ background-color: $bg;
8
+ border-radius: $radius;
9
+ }
package/src/_theme.scss CHANGED
@@ -1,32 +1,32 @@
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
+ @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
+ }
package/src/landsoul/_details.scss CHANGED
@@ -1,16 +1,16 @@
1
- details {
2
- padding: 0.5em 0.5em 0;
3
- }
4
-
5
- summary {
6
- font-weight: bold;
7
- margin: -0.5em -0.5em 0;
8
- padding: 0.5em;
9
- }
10
-
11
- details[open] {
12
- padding: 0.5em;
13
- summary {
14
- margin-bottom: 0.5em;
15
- }
16
- }
1
+ details {
2
+ padding: 0.5rem 0.5rem 0;
3
+ }
4
+
5
+ summary {
6
+ font-weight: bold;
7
+ margin: -0.5rem -0.5rem 0;
8
+ padding: 0.5rem;
9
+ }
10
+
11
+ details[open] {
12
+ padding: 0.5rem;
13
+ summary {
14
+ margin-bottom: 0.5rem;
15
+ }
16
+ }
package/src/landsoul/_dialog.scss CHANGED
@@ -1,21 +1,21 @@
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
+ @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
+ }
package/src/landsoul/_figure.scss CHANGED
@@ -1,12 +1,12 @@
1
- figure {
2
- display: flex;
3
- flex-flow: column;
4
- margin: auto;
5
- img {
6
- max-width: 100%;
7
- }
8
- figcaption {
9
- font-size: 0.75em;
10
- margin: 0.5em;
11
- }
12
- }
1
+ figure {
2
+ display: flex;
3
+ flex-flow: column;
4
+ margin: auto;
5
+ img {
6
+ max-width: 100%;
7
+ }
8
+ figcaption {
9
+ font-size: 0.75rem;
10
+ margin: 0.5rem;
11
+ }
12
+ }
package/src/landsoul/_global.scss CHANGED
@@ -1,69 +1,69 @@
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
- }
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 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.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
+ }
package/src/landsoul/_input_checkbox_radio.scss CHANGED
@@ -1,73 +1,73 @@
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
+ /**
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
+ }
package/src/landsoul/_input_range.scss CHANGED
@@ -1,53 +1,53 @@
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
+ @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
+ }
package/src/landsoul/_others.scss CHANGED
@@ -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
- kbd {
36
- border: solid 0.1em rgba(0, 0, 0, 0.05);
37
- border-bottom: solid 0.2em rgba(0, 0, 0, 0.05);
38
- }
39
-
40
- iframe,
41
- fieldset {
42
- border: solid 0.15em var(--landsoul-color);
43
- border-radius: var(--landsoul-radius);
44
- }
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
+ }
package/src/landsoul/_progress_meter.scss CHANGED
@@ -1,24 +1,24 @@
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
- }
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 CHANGED
@@ -1,14 +1,10 @@
1
- body {
2
- margin: 0;
3
- }
4
-
5
- a {
6
- // for IE
7
- background-color: transparent;
8
- }
9
-
10
- progress {
11
- width: 8rem;
12
- // for chrome
13
- vertical-align: baseline;
14
- }
1
+ a {
2
+ // for IE
3
+ background-color: transparent;
4
+ }
5
+
6
+ progress {
7
+ width: 8rem;
8
+ // for chrome
9
+ vertical-align: baseline;
10
+ }
package/src/landsoul/_table.scss CHANGED
@@ -1,61 +1,61 @@
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
- }
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 CHANGED
@@ -1,12 +1,12 @@
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";
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";