diff options
Diffstat (limited to 'src/scopes/_implicit.scss')
-rw-r--r-- | src/scopes/_implicit.scss | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss new file mode 100644 index 0000000..9c17868 --- /dev/null +++ b/src/scopes/_implicit.scss | |||
@@ -0,0 +1,152 @@ | |||
1 | @use 'sass:math'; | ||
2 | @use 'sass:meta'; | ||
3 | @use 'iro-sass/src/iro-sass' as iro; | ||
4 | @use '../props'; | ||
5 | @use '../vars' as global-vars; | ||
6 | |||
7 | @forward 'implicit.vars'; | ||
8 | @use 'implicit.vars' as vars; | ||
9 | |||
10 | @mixin styles { | ||
11 | @include props.materialize(meta.module-variables('vars')); | ||
12 | |||
13 | html { | ||
14 | accent-color: props.get(global-vars.$theme, --accent, --600); | ||
15 | scrollbar-color: props.get(global-vars.$theme, --text-disabled) transparent; | ||
16 | } | ||
17 | |||
18 | html, | ||
19 | body { | ||
20 | block-size: 100%; | ||
21 | } | ||
22 | |||
23 | body { | ||
24 | //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); | ||
25 | |||
26 | padding: 0; | ||
27 | margin: 0; | ||
28 | color: props.get(global-vars.$theme, --text); | ||
29 | background-color: props.get(global-vars.$theme, --bg-base); | ||
30 | } | ||
31 | |||
32 | pre, | ||
33 | code { | ||
34 | font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; | ||
35 | } | ||
36 | |||
37 | pre, | ||
38 | code { | ||
39 | //@include mx.set-font(--mono, (--size: .93em)); | ||
40 | } | ||
41 | |||
42 | pre { | ||
43 | margin: 0; | ||
44 | overflow-x: auto; | ||
45 | |||
46 | code { | ||
47 | font-size: 1em; | ||
48 | color: currentColor; | ||
49 | } | ||
50 | } | ||
51 | |||
52 | h1, | ||
53 | h2, | ||
54 | h3, | ||
55 | h4, | ||
56 | h5, | ||
57 | h6 { | ||
58 | //@include mx.heading-medium(--md); | ||
59 | |||
60 | margin-block: props.get(vars.$heading--margin-bs) 0; | ||
61 | |||
62 | & + & { | ||
63 | margin-block-start: props.get(vars.$heading--margin-bs-sibling); | ||
64 | } | ||
65 | } | ||
66 | |||
67 | p { | ||
68 | margin-block: props.get(vars.$paragraph--margin-bs) 0; | ||
69 | |||
70 | &:empty { | ||
71 | display: none; | ||
72 | } | ||
73 | } | ||
74 | |||
75 | strong { | ||
76 | font-weight: bold; | ||
77 | } | ||
78 | |||
79 | small { | ||
80 | font-size: props.get(global-vars.$font-size--75); | ||
81 | } | ||
82 | |||
83 | ul, | ||
84 | ol { | ||
85 | padding: 0; | ||
86 | margin: 0; | ||
87 | list-style: none; | ||
88 | } | ||
89 | |||
90 | li { | ||
91 | padding: 0; | ||
92 | margin: 0; | ||
93 | } | ||
94 | |||
95 | :focus, | ||
96 | :focus-visible { | ||
97 | outline: 0; | ||
98 | } | ||
99 | |||
100 | :link, | ||
101 | :visited { | ||
102 | color: currentColor; | ||
103 | text-decoration: none; | ||
104 | } | ||
105 | |||
106 | |||
107 | button, | ||
108 | input, | ||
109 | textarea { | ||
110 | box-sizing: content-box; | ||
111 | padding: 0; | ||
112 | margin: 0; | ||
113 | font-family: inherit; | ||
114 | font-size: 1em; | ||
115 | font-style: inherit; | ||
116 | font-weight: inherit; | ||
117 | line-height: inherit; | ||
118 | color: currentColor; | ||
119 | text-align: inherit; | ||
120 | text-transform: inherit; | ||
121 | appearance: none; | ||
122 | background: none; | ||
123 | border: 0; | ||
124 | |||
125 | &::-moz-focus-inner { | ||
126 | border: 0; | ||
127 | } | ||
128 | } | ||
129 | |||
130 | input, | ||
131 | textarea { | ||
132 | &::placeholder { | ||
133 | color: props.get(global-vars.$theme, --text-mute); | ||
134 | opacity: 1; | ||
135 | } | ||
136 | |||
137 | &:disabled { | ||
138 | color: props.get(global-vars.$theme, --text-disabled); | ||
139 | } | ||
140 | } | ||
141 | |||
142 | textarea { | ||
143 | block-size: calc(1em * props.get(global-vars.$font--standard--line-height)); | ||
144 | } | ||
145 | |||
146 | hr { | ||
147 | block-size: props.get(global-vars.$border-width--thin); | ||
148 | margin: 0; | ||
149 | background-color: props.get(global-vars.$theme, --border-color); | ||
150 | border: 0; | ||
151 | } | ||
152 | } | ||