source: main/trunk/model-interfaces-dev/atea/macron-restoration/src/styles/_material.scss@ 35723

Last change on this file since 35723 was 35723, checked in by cstephen, 13 months ago

Add support for file macronisation

File size: 9.3 KB
Line 
1////
2/// Defines themes that mimic the material design specification.
3/// @author Carl Stephens
4////
5
6:root {
7 // Set these to adjust the colour palette
8 --primary-bg-color-l1: 36, 156, 207;
9 --primary-bg-color: 33, 145, 192;
10 --primary-fg-color: 255, 255, 255;
11
12 --accent-bg-color: 25, 118, 158;
13 --accent-fg-color: 255, 255, 255;
14
15 // For components that are in a disabled state.
16 --primary-disabled-color-raw: 130, 130, 130;
17 // Main font color
18 --body-color: rgb(39, 39, 39);
19 // For the paper style, but more generally the neutral background color
20 --paper-color: #FCFCFC;
21
22 --body-font-family: Arial, sans-serif;
23
24 --primary-box-shadow: 0 2px 4px 0 #505050;
25 --primary-box-shadow-thin: 0 1px 3px 0 #666666;
26
27 // The brightness to reduce participating elements to on hover
28 --hover-brightness: 92%;
29 --border-radius: 0.3em;
30 --transition-duration: 0.15s;
31
32 // Default theme
33 @extend .theme-primary;
34}
35
36/* === Start component definitions === */
37
38.paper {
39 padding: 1.2em;
40 border-radius: var(--border-radius);
41
42 background-color: var(--paper-color);
43 color: var(--body-color);
44 box-shadow: var(--primary-box-shadow);
45}
46
47.card {
48 @extend .paper;
49 box-shadow: var(--primary-box-shadow-thin);
50}
51
52.card-outlined {
53 @extend .card;
54
55 box-shadow: none;
56 border: 1px solid #BBB;
57}
58
59.divider {
60 height: 1px;
61 background-color: #0000001F;
62 border: none;
63 margin: 1rem 2rem;
64}
65
66.divider-s {
67 @extend .divider;
68 margin: 0 2rem;
69}
70
71/* Buttons */
72
73.btn-primary {
74 appearance: none;
75
76 display: flex;
77 align-items: center;
78 justify-content: center;
79
80 background-color: var(--bg-color);
81 color: var(--fg-color);
82 border: none;
83 box-shadow: var(--primary-box-shadow-thin);
84 border-radius: var(--border-radius);
85 padding: 0.5em;
86
87 cursor: pointer;
88 font-size: 1rem;
89 font-weight: 400;
90 text-decoration: none;
91
92 transition-duration: var(--transition-duration);
93
94 &:hover {
95 filter: brightness(var(--hover-brightness));
96 }
97
98 &:disabled {
99 cursor: default;
100 background-color: var(--disabled-color);
101 }
102}
103
104.btn-fab {
105 @extend .btn-primary;
106
107 border-radius: 50%;
108 padding: 0.3em;
109}
110
111/** Text display/input */
112
113.text-container {
114 display: flex;
115 flex-wrap: wrap;
116
117 border-radius: var(--border-radius);
118 background: #DDD;
119 padding: 0.5em;
120}
121
122.text-container-sl {
123 @extend .text-container;
124
125 overflow-x: auto;
126 overflow-y: hidden;
127 white-space: nowrap;
128}
129
130.text-input {
131 @extend .text-container;
132
133 border-radius: var(--border-radius) var(--border-radius) 0 0;
134 border: none;
135 border-bottom: 2px solid #999;
136 outline: none;
137 cursor: text;
138
139 font-family: var(--body-font-family);
140 font-size: 1em;
141
142 transition-duration: var(--transition-duration);
143
144 &:hover {
145 background-color: #CDCDCD;
146 }
147
148 &:active, &:focus, &:focus-visible {
149 background-color: #CDCDCD;
150 border-bottom: 2px solid var(--bg-color);
151
152 .text-input-active {
153 width: 100%;
154 }
155 }
156
157 .text-input-active {
158 background-color: var(--bg-color);
159 height: 1px;
160 margin: 0 auto;
161 width: 0;
162 transition-duration: var(--transition-duration);
163 }
164}
165
166.text-input-sl {
167 @extend .text-input;
168
169 align-items: center;
170 overflow-x: auto;
171 overflow-y: hidden;
172 white-space: nowrap;
173}
174
175.text-placeholder {
176 color: #666;
177 cursor: inherit;
178 font-style: italic;
179 cursor: inherit;
180 user-select: none;
181}
182
183/* Switches */
184
185// https://codepen.io/avstorm/pen/jOEpBLW
186.switch
187{
188 -webkit-appearance: none;
189 -moz-appearance: none;
190 appearance: none;
191
192 -webkit-tap-highlight-color: transparent;
193 cursor: pointer;
194
195 height: 16px;
196 width: 38px;
197 border-radius: 8px;
198 display: inline-block;
199 position: relative;
200 margin: 6px;
201 background-color: #c7c7c7;
202 transition-duration: var(--transition-duration);
203
204 &:focus {
205 outline: 0;
206 }
207
208 &::after {
209 content: '';
210 position: absolute;
211 display: inline-block;
212 top: -4px;
213 left: -4px;
214 width: 24px;
215 height: 24px;
216 border-radius: 50%;
217 background: white;
218 box-shadow: var(--primary-box-shadow-thin);
219 transition-duration: var(--transition-duration);
220 }
221
222 &:checked {
223 background-color: rgba(var(--bg-color-raw), 0.4);
224
225 &::after {
226 transform: translatex(22px);
227 background-color: var(--bg-color);
228 }
229 }
230}
231
232/* Sliders */
233
234@mixin slider-clear {
235 appearance: none;
236 width: 100%; // Required for firefox
237
238 &::-webkit-slider-thumb {
239 -webkit-appearance: none;
240 }
241
242 &::-moz-range-track {
243 outline: none;
244 }
245
246 &::-ms-track {
247 width: 100%;
248 background: transparent;
249 border-color: transparent;
250 color: transparent;
251 }
252}
253
254@mixin slider-thumb {
255 height: 24px;
256 width: 24px;
257 border-radius: 50%;
258 cursor: pointer;
259
260 background-color: var(--bg-color);
261 box-shadow: var(--primary-box-shadow-thin);
262
263 &:hover {
264 filter: brightness(var(--hover-brightness));
265 }
266}
267
268@mixin disabled-slider-thumb {
269 cursor: default;
270 background-color: var(--disabled-color);
271
272 &:hover {
273 filter: none;
274 }
275}
276
277.slider-continuous {
278 @include slider-clear();
279
280 margin: 0;
281 padding: 0;
282 height: 8px;
283 border-radius: 4px;
284 background-color: rgba(var(--bg-color-raw), 0.3);
285
286 transition-duration: var(--transition-duration);
287
288 &::-webkit-slider-thumb {
289 @include slider-thumb()
290 }
291
292 &::-moz-range-thumb {
293 @include slider-thumb()
294 }
295
296 &::-ms-thumb {
297 @include slider-thumb()
298 }
299
300 &:hover {
301 background-color: rgba(var(--bg-color-raw), 0.4);
302 }
303}
304
305.slider-continuous:disabled {
306 background-color: var(--disabled-color);
307
308 &::-webkit-slider-thumb {
309 @include disabled-slider-thumb();
310 }
311
312 &::-moz-range-thumb {
313 @include disabled-slider-thumb();
314 }
315
316 &::-ms-thumb {
317 @include disabled-slider-thumb();
318 }
319
320 &:hover {
321 background-color: var(--disabled-color);
322 }
323}
324
325/* List Views */
326
327.list-view {
328 list-style-type: none;
329 margin-block: 0 0;
330 padding-inline: 0 0;
331}
332
333.list-view__item {
334 padding: 0.2em 0.5em;
335 transition-duration: var(--transition-duration);
336
337 &:hover {
338 background-color: #EEE;
339 }
340}
341
342/* Progress Bars */
343
344.progress-circle-indeterminate {
345 height: 2em;
346 width: 2em;
347
348 border: 0.25em solid var(--bg-color);
349 border-right: 0.25em solid rgba(var(--bg-color-raw), 0.3);
350 border-radius: 50%;
351
352 animation: rotate360 1.5s linear 0s infinite running;
353}
354
355@keyframes rotate360 {
356 0% {
357 transform: rotate(0deg);
358 }
359
360 100% {
361 transform: rotate(360deg);
362 }
363}
364
365.progress-bar-container {
366 width: 100%;
367 height: 8px;
368 overflow: hidden;
369
370 background-color: rgba(var(--bg-color-raw), 0.2);
371 border-radius: 4px;
372}
373
374.progress-bar-value {
375 height: 100%;
376
377 background-color: var(--bg-color);
378 border-radius: 4px;
379}
380
381.progress-bar-indeterminate {
382 width: 20%;
383 animation: 2s ease 0s infinite alternate prgbr-indeterminate;
384}
385
386@keyframes prgbr-indeterminate {
387 0% {
388 transform: translateX(-100%);
389 }
390
391 100% {
392 transform: translateX(500%);
393 }
394}
395
396/* === End component definitions === */
397
398/* Font sizes */
399
400.body0 {
401 font-size: 18px;
402 line-height: 24px;
403}
404
405.body1 {
406 font-size: 16px;
407}
408
409.body2 {
410 font-size: 14px;
411}
412
413.heading1 {
414 font-size: 40px;
415 font-weight: 300;
416}
417
418/* Scrollbar replacement */
419
420::-webkit-scrollbar {
421 width: 6px;
422 height: 6px;
423}
424
425::-webkit-scrollbar-track {
426 background: #f1f1f1;
427}
428
429::-webkit-scrollbar-thumb {
430 background: #CCC;
431 border-radius: 3px;
432
433 transition-duration: var(--transition-duration);
434
435 &:hover {
436 background: #666;
437 height: 8px;
438 width: 8px;
439 }
440}
441
442/* === Start Theme Definitions === */
443
444.theme-primary {
445 --bg-color: rgb(var(--primary-bg-color));
446 --bg-color-raw: var(--primary-bg-color);
447 --fg-color: rgb(var(--primary-fg-color));
448 --fg-color-faw: var(--primary-fg-color);
449
450 --disabled-color: rgb(var(--primary-disabled-color-raw));
451 --disabled-color-raw: var(--primary-disabled-color-raw);
452}
453
454.theme-primary-l1 {
455 --bg-color: rgb(var(--primary-bg-color-l1));
456 --bg-color-raw: var(--primary-bg-color-l1);
457 --fg-color: rgb(var(--primary-fg-color));
458 --fg-color-raw: var(--primary-fg-color);
459}
460
461.theme-error {
462 --bg-color: #f04848;
463 --bg-color-raw: 240, 72, 72;
464}
465
466.theme-flat {
467 --bg-color: transparent;
468 --bg-color-raw: transparent;
469 --fg-color: rgb(var(--primary-bg-color));
470 --fg-color-raw: var(--primary-bg-color);
471
472 --disabled-color: transparent;
473 --disabled-color-raw: transparent;
474
475 box-shadow: none;
476
477 &:hover {
478 --bg-color: rgba(var(--primary-bg-color), 0.15);
479 }
480
481 &:disabled {
482 --fg-color: rgb(var(--primary-disabled-color-raw));
483 --fg-color-raw: var(--primary-disabled-color-raw);
484 }
485}
486
487.theme-accent {
488 --bg-color: rgb(var(--accent-bg-color));
489 --bg-color-raw: var(--accent-bg-color);
490 --fg-color: rgb(var(--accent-fg-color));
491 --fg-color-raw: var(--accent-fg-color);
492}
493
494/* === End theme definitions === */
Note: See TracBrowser for help on using the repository browser.