1 |
|
2 | @use '../internal' as *;
|
3 |
|
4 | :root {
|
5 |
|
6 | --cirrus-fg: #{$cirrus-fg};
|
7 | --cirrus-bg: #{$cirrus-bg};
|
8 |
|
9 | --cirrus-select-bg: #{$cirrus-select-bg};
|
10 |
|
11 | --cirrus-code-bg: rgba(#{hex-to-rgb($cirrus-primary-light)}, 1);
|
12 | --cirrus-code-fg: #{$cirrus-code-fg};
|
13 |
|
14 | --cirrus-form-group-bg: rgba(#{hex-to-rgb($cirrus-light-gray)}, 1);
|
15 | --cirrus-form-group-fg: rgba(#{hex-to-rgb($cirrus-dark-gray)}, 1);
|
16 |
|
17 | --toast-primary-bg: #{$toast-primary-bg};
|
18 |
|
19 | --animation-duration: #{$animation-duration};
|
20 | --focus-opacity: #{$focus-opacity};
|
21 |
|
22 | --font-size-xs: #{$font-size-xs};
|
23 | --font-size-s: #{$font-size-s};
|
24 | --font-size-m: #{$font-size-m};
|
25 | --font-size-l: #{$font-size-l};
|
26 | --font-size-xl: #{$font-size-xl};
|
27 |
|
28 | --cirrus-focus-size: #{$focus-size};
|
29 | --cirrus-focus-color: #{$focus-color};
|
30 |
|
31 |
|
32 | --bg-opacity: 1;
|
33 | --color-opacity: 1;
|
34 | --border-opacity: 1;
|
35 | }
|
36 |
|
37 | $generate-reset: should-generate-classes($RESET);
|
38 |
|
39 | @if $generate-reset {
|
40 |
|
41 |
|
42 | *,
|
43 | *::before,
|
44 | *::after {
|
45 |
|
46 | box-sizing: border-box;
|
47 |
|
48 | border: 0 solid currentColor;
|
49 | text-rendering: optimizeLegibility;
|
50 | -webkit-tap-highlight-color: transparent;
|
51 | }
|
52 |
|
53 |
|
54 | html,
|
55 | body,
|
56 | p,
|
57 | ol,
|
58 | ul,
|
59 | li,
|
60 | dl,
|
61 | dt,
|
62 | dd,
|
63 | blockquote,
|
64 | figure,
|
65 | fieldset,
|
66 | legend,
|
67 | textarea,
|
68 | pre,
|
69 | iframe,
|
70 | hr,
|
71 | h1,
|
72 | h2,
|
73 | h3,
|
74 | h4,
|
75 | h5,
|
76 | h6 {
|
77 | margin: 0;
|
78 | padding: 0;
|
79 | }
|
80 |
|
81 |
|
82 | html,
|
83 | body {
|
84 | border: none;
|
85 | height: 100%;
|
86 | }
|
87 |
|
88 |
|
89 | body {
|
90 | letter-spacing: 0.01rem;
|
91 | line-height: 1.8;
|
92 | font-size: 1rem;
|
93 | font-weight: 400;
|
94 | font-family: map-get($map: $font-families, $key: secondary);
|
95 | color: var(--cirrus-fg);
|
96 | }
|
97 |
|
98 |
|
99 | ul {
|
100 | list-style: none;
|
101 | }
|
102 |
|
103 |
|
104 | audio,
|
105 | canvas,
|
106 | iframe,
|
107 | img,
|
108 | embed,
|
109 | object,
|
110 | svg,
|
111 | video {
|
112 | display: block;
|
113 | max-width: 100%;
|
114 | height: auto;
|
115 | }
|
116 |
|
117 | iframe {
|
118 | outline: 0;
|
119 | border: 1px solid rgba(0, 0, 0, 0.1);
|
120 | border-radius: 3px;
|
121 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
122 | }
|
123 |
|
124 |
|
125 | article,
|
126 | aside,
|
127 | figure,
|
128 | footer,
|
129 | header,
|
130 | hgroup,
|
131 | section {
|
132 | display: block;
|
133 | }
|
134 |
|
135 |
|
136 | button,
|
137 | input,
|
138 | optgroup,
|
139 | select,
|
140 | textarea {
|
141 | margin: 0;
|
142 | font-family: inherit;
|
143 | font-size: inherit;
|
144 | }
|
145 |
|
146 |
|
147 | label {
|
148 | display: inline-block;
|
149 | margin: 0.25rem 0;
|
150 | }
|
151 |
|
152 |
|
153 | fieldset {
|
154 | padding: 1rem;
|
155 |
|
156 | legend {
|
157 | font-weight: bold;
|
158 | }
|
159 | }
|
160 |
|
161 |
|
162 | [hidden] {
|
163 | display: none !important;
|
164 | }
|
165 |
|
166 |
|
167 | ::selection {
|
168 | background-color: var(--cirrus-select-bg);
|
169 | }
|
170 |
|
171 |
|
172 | :focus {
|
173 | box-shadow: var(--cirrus-focus-size) var(--cirrus-focus-color);
|
174 | outline: none;
|
175 | }
|
176 |
|
177 |
|
178 | @media (prefers-reduced-motion: reduce) {
|
179 | html:focus-within {
|
180 | scroll-behavior: auto;
|
181 | }
|
182 |
|
183 | *,
|
184 | *::before,
|
185 | *::after {
|
186 | animation-duration: 0.01ms !important;
|
187 | animation-iteration-count: 1 !important;
|
188 | transition-duration: 0.01ms !important;
|
189 | scroll-behavior: auto !important;
|
190 | }
|
191 | }
|
192 | }
|