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

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

Allow linebreak normalisation in direct input

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