diff options
author | Volpeon <git@volpeon.ink> | 2024-10-23 22:14:15 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-23 22:14:15 +0200 |
commit | 862b746f9ea1ce127a15e300e32d7580ba1cdfa9 (patch) | |
tree | f55704ed05b7988306364b8cd238bc7c33ad69be /src/scopes | |
parent | Make it easier to extend config (diff) | |
download | iro-design-862b746f9ea1ce127a15e300e32d7580ba1cdfa9.tar.gz iro-design-862b746f9ea1ce127a15e300e32d7580ba1cdfa9.tar.bz2 iro-design-862b746f9ea1ce127a15e300e32d7580ba1cdfa9.zip |
Use CSS layers
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_implicit.scss | 236 |
1 files changed, 119 insertions, 117 deletions
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index c368072..18791a8 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss | |||
@@ -11,147 +11,149 @@ | |||
11 | @mixin styles { | 11 | @mixin styles { |
12 | @include materialize-at-root(meta.module-variables('vars')); | 12 | @include materialize-at-root(meta.module-variables('vars')); |
13 | 13 | ||
14 | html { | 14 | @layer scope { |
15 | accent-color: props.get(core.$theme, --accent, --600); | 15 | html { |
16 | scrollbar-color: props.get(core.$theme, --text-disabled) transparent; | 16 | accent-color: props.get(core.$theme, --accent, --600); |
17 | } | 17 | scrollbar-color: props.get(core.$theme, --text-disabled) transparent; |
18 | } | ||
18 | 19 | ||
19 | html, | 20 | html, |
20 | body { | 21 | body { |
21 | block-size: 100%; | 22 | block-size: 100%; |
22 | } | 23 | } |
23 | 24 | ||
24 | body { | 25 | body { |
25 | padding: 0; | 26 | padding: 0; |
26 | margin: 0; | 27 | margin: 0; |
27 | font-family: props.get(vars.$body--font-family); | 28 | font-family: props.get(vars.$body--font-family); |
28 | font-size: props.get(vars.$body--font-size); | 29 | font-size: props.get(vars.$body--font-size); |
29 | font-feature-settings: props.get(vars.$body--feature-settings); | 30 | font-feature-settings: props.get(vars.$body--feature-settings); |
30 | line-height: props.get(vars.$body--line-height); | 31 | line-height: props.get(vars.$body--line-height); |
31 | color: props.get(core.$theme, --text); | 32 | color: props.get(core.$theme, --text); |
32 | background-color: props.get(core.$theme, --bg-base); | 33 | background-color: props.get(core.$theme, --bg-base); |
33 | } | 34 | } |
34 | 35 | ||
35 | pre, | 36 | pre, |
36 | code { | 37 | code { |
37 | font-family: props.get(vars.$code--font-family); | 38 | font-family: props.get(vars.$code--font-family); |
38 | font-size: props.get(vars.$code--font-size); | 39 | font-size: props.get(vars.$code--font-size); |
39 | font-feature-settings: props.get(vars.$code--feature-settings); | 40 | font-feature-settings: props.get(vars.$code--feature-settings); |
40 | line-height: props.get(vars.$code--line-height); | 41 | line-height: props.get(vars.$code--line-height); |
41 | } | 42 | } |
42 | 43 | ||
43 | pre { | 44 | pre { |
44 | margin: 0; | 45 | margin: 0; |
45 | overflow-x: auto; | 46 | overflow-x: auto; |
46 | 47 | ||
47 | code { | 48 | code { |
48 | font-size: 1em; | 49 | font-size: 1em; |
49 | color: currentColor; | 50 | color: currentColor; |
51 | } | ||
50 | } | 52 | } |
51 | } | ||
52 | 53 | ||
53 | h1, | 54 | h1, |
54 | h2, | 55 | h2, |
55 | h3, | 56 | h3, |
56 | h4, | 57 | h4, |
57 | h5, | 58 | h5, |
58 | h6 { | 59 | h6 { |
59 | margin-block: props.get(vars.$heading--margin-bs) 0; | 60 | margin-block: props.get(vars.$heading--margin-bs) 0; |
60 | font-family: props.get(vars.$heading--font-family); | 61 | font-family: props.get(vars.$heading--font-family); |
61 | font-size: props.get(vars.$heading--font-size); | 62 | font-size: props.get(vars.$heading--font-size); |
62 | font-weight: props.get(vars.$heading--font-weight); | 63 | font-weight: props.get(vars.$heading--font-weight); |
63 | font-feature-settings: props.get(vars.$heading--feature-settings); | 64 | font-feature-settings: props.get(vars.$heading--feature-settings); |
64 | line-height: props.get(vars.$heading--line-height); | 65 | line-height: props.get(vars.$heading--line-height); |
65 | color: props.get(vars.$heading--color); | 66 | color: props.get(vars.$heading--color); |
66 | 67 | ||
67 | & + & { | 68 | & + & { |
68 | margin-block-start: props.get(vars.$heading--margin-bs-sibling); | 69 | margin-block-start: props.get(vars.$heading--margin-bs-sibling); |
70 | } | ||
69 | } | 71 | } |
70 | } | ||
71 | 72 | ||
72 | p { | 73 | p { |
73 | margin-block: props.get(vars.$paragraph--margin-bs) 0; | 74 | margin-block: props.get(vars.$paragraph--margin-bs) 0; |
74 | 75 | ||
75 | &:empty { | 76 | &:empty { |
76 | display: none; | 77 | display: none; |
78 | } | ||
77 | } | 79 | } |
78 | } | ||
79 | 80 | ||
80 | strong { | 81 | strong { |
81 | font-weight: bold; | 82 | font-weight: bold; |
82 | } | 83 | } |
83 | 84 | ||
84 | small { | 85 | small { |
85 | font-size: props.get(vars.$small--font-size); | 86 | font-size: props.get(vars.$small--font-size); |
86 | } | 87 | } |
87 | 88 | ||
88 | ul, | 89 | ul, |
89 | ol { | 90 | ol { |
90 | padding: 0; | 91 | padding: 0; |
91 | margin: 0; | 92 | margin: 0; |
92 | list-style: none; | 93 | list-style: none; |
93 | } | 94 | } |
94 | 95 | ||
95 | li { | 96 | li { |
96 | padding: 0; | 97 | padding: 0; |
97 | margin: 0; | 98 | margin: 0; |
98 | } | 99 | } |
99 | 100 | ||
100 | :focus, | 101 | :focus, |
101 | :focus-visible { | 102 | :focus-visible { |
102 | outline: 0; | 103 | outline: 0; |
103 | } | 104 | } |
104 | 105 | ||
105 | :link, | 106 | :link, |
106 | :visited { | 107 | :visited { |
107 | color: currentColor; | 108 | color: currentColor; |
108 | text-decoration: none; | 109 | text-decoration: none; |
109 | } | 110 | } |
110 | 111 | ||
111 | 112 | ||
112 | button, | 113 | button, |
113 | input, | 114 | input, |
114 | textarea { | 115 | textarea { |
115 | box-sizing: content-box; | 116 | box-sizing: content-box; |
116 | padding: 0; | 117 | padding: 0; |
117 | margin: 0; | 118 | margin: 0; |
118 | font-family: inherit; | 119 | font-family: inherit; |
119 | font-size: 1em; | 120 | font-size: 1em; |
120 | font-style: inherit; | 121 | font-style: inherit; |
121 | font-weight: inherit; | 122 | font-weight: inherit; |
122 | line-height: inherit; | 123 | line-height: inherit; |
123 | color: currentColor; | 124 | color: currentColor; |
124 | text-align: inherit; | 125 | text-align: inherit; |
125 | text-transform: inherit; | 126 | text-transform: inherit; |
126 | appearance: none; | 127 | appearance: none; |
127 | background: none; | 128 | background: none; |
128 | border: 0; | 129 | border: 0; |
129 | 130 | ||
130 | &::-moz-focus-inner { | 131 | &::-moz-focus-inner { |
131 | border: 0; | 132 | border: 0; |
133 | } | ||
132 | } | 134 | } |
133 | } | ||
134 | 135 | ||
135 | input, | 136 | input, |
136 | textarea { | 137 | textarea { |
137 | &::placeholder { | 138 | &::placeholder { |
138 | color: props.get(core.$theme, --text-mute); | 139 | color: props.get(core.$theme, --text-mute); |
139 | opacity: 1; | 140 | opacity: 1; |
140 | } | 141 | } |
141 | 142 | ||
142 | &:disabled { | 143 | &:disabled { |
143 | color: props.get(core.$theme, --text-disabled); | 144 | color: props.get(core.$theme, --text-disabled); |
145 | } | ||
144 | } | 146 | } |
145 | } | ||
146 | 147 | ||
147 | textarea { | 148 | textarea { |
148 | block-size: calc(1em * props.get(core.$font--standard--line-height)); | 149 | block-size: calc(1em * props.get(core.$font--standard--line-height)); |
149 | } | 150 | } |
150 | 151 | ||
151 | hr { | 152 | hr { |
152 | block-size: props.get(core.$border-width--thin); | 153 | block-size: props.get(core.$border-width--thin); |
153 | margin: 0; | 154 | margin: 0; |
154 | background-color: props.get(core.$theme, --border); | 155 | background-color: props.get(core.$theme, --border); |
155 | border: 0; | 156 | border: 0; |
157 | } | ||
156 | } | 158 | } |
157 | } | 159 | } |