@nulllogic/scssleon 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/package.json +1 -1
  2. package/scss/_base.scss +31 -0
  3. package/scss/_config.scss +109 -0
  4. package/scss/_content.scss +24 -0
  5. package/scss/_functions.scss +97 -0
  6. package/scss/_mixins.scss +22 -0
  7. package/scss/_reset.scss +347 -0
  8. package/scss/_root.scss +36 -0
  9. package/scss/_utilities.scss +356 -0
  10. package/scss/animations/_placeholder.scss +12 -0
  11. package/scss/components/_accordion.scss +15 -0
  12. package/scss/components/_alert.scss +15 -0
  13. package/scss/components/_badge.scss +15 -0
  14. package/scss/components/_breadcrumb.scss +15 -0
  15. package/scss/components/_button.scss +15 -0
  16. package/scss/components/_button_group.scss +15 -0
  17. package/scss/components/_card.scss +15 -0
  18. package/scss/components/_container.scss +39 -0
  19. package/scss/components/_dropdown.scss +5 -0
  20. package/scss/components/_form.scss +50 -0
  21. package/scss/components/_loader.scss +15 -0
  22. package/scss/components/_modal.scss +15 -0
  23. package/scss/components/_nav.scss +15 -0
  24. package/scss/components/_navbar.scss +16 -0
  25. package/scss/components/_overlay.scss +15 -0
  26. package/scss/components/_pagination.scss +15 -0
  27. package/scss/components/_placeholder.scss +33 -0
  28. package/scss/components/_sidecap.scss +15 -0
  29. package/scss/components/_table.scss +78 -0
  30. package/scss/forms/_checkbox.scss +33 -0
  31. package/scss/forms/_input-group.scss +121 -0
  32. package/scss/forms/_input.scss +34 -0
  33. package/scss/forms/_label.scss +15 -0
  34. package/scss/forms/_radio.scss +34 -0
  35. package/scss/forms/_range.scss +7 -0
  36. package/scss/forms/_select.scss +34 -0
  37. package/scss/forms/_switch.scss +18 -0
  38. package/scss/forms/_validation.scss +12 -0
  39. package/scss/helpers/_clearfix.scss +5 -0
  40. package/scss/helpers/_screen_reader.scss +11 -0
  41. package/scss/helpers/_text_truncate.scss +5 -0
  42. package/scss/mixins/_border-radius.scss +3 -0
  43. package/scss/mixins/_box-shadow.scss +16 -0
  44. package/scss/mixins/_breakpoints.scss +10 -0
  45. package/scss/mixins/_clearfix.scss +9 -0
  46. package/scss/mixins/_forms.scss +152 -0
  47. package/scss/mixins/_gradients.scss +6 -0
  48. package/scss/mixins/_grid.scss +93 -0
  49. package/scss/mixins/_transition.scss +30 -0
  50. package/scss/mixins/_utilities.scss +15 -0
  51. package/scss/mixins/generators/_color-sheme.scss +17 -0
  52. package/scss/mixins/generators/_components.scss +33 -0
  53. package/scss/mixins/generators/_properties.scss +110 -0
  54. package/scss/mixins/generators/_wrapper.scss +16 -0
  55. package/scss/mixins/variants/_alert.scss +24 -0
  56. package/scss/mixins/variants/_button.scss +122 -0
  57. package/scss/scssleon.scss +205 -0
  58. package/scss/themes/_default.scss +874 -0
  59. package/scss/themes/_wordpress_admin.scss +0 -0
  60. package/scss/utilities/_api.scss +24 -0
  61. package/.dockerignore +0 -2
  62. package/.eslintignore +0 -2
  63. package/.prettierignore +0 -1
  64. package/Dockerfile +0 -29
  65. package/Makefile +0 -22
  66. package/dist/css/scssleon.css +0 -1830
  67. package/dist/css/scssleon.css.map +0 -1
  68. /package/{CHANGELOG.md → scss/components/_icon.scss} +0 -0
  69. /package/{CONTRIBUTING.md → scss/themes/_shopify_app.scss} +0 -0
@@ -1,1830 +0,0 @@
1
- @charset "UTF-8";
2
- /*
3
- * ------------------------------------------------------------------
4
- * ███████╗ ██████╗ ██████╗███████╗██╗ ███████╗ ██████╗ ███╗ ██╗
5
- * ██╔════╝██╔════╝██╔════╝██╔════╝██║ ██╔════╝██╔═══██╗████╗ ██║
6
- * ███████╗██║ ██║ ███████╗██║ █████╗ ██║ ██║██╔██╗ ██║
7
- * ╚════██║██║ ██║ ╚════██║██║ ██╔══╝ ██║ ██║██║╚██╗██║
8
- * ███████║╚██████╗╚██████╗███████║███████╗███████╗╚██████╔╝██║ ╚████║
9
- * ╚══════╝ ╚═════╝ ╚═════╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═══╝
10
- *
11
- * SCSSLEON v1.0.0 (https://nulllogic.github.io/scssleon/)
12
- * Copyright 2011-2024 NullLogic
13
- * Licensed under MIT (https://nulllogic.github.io/scssleon/blob/main/LICENSE)
14
- * ------------------------------------------------------------------
15
- */
16
- /*
17
- -------------------------------------------------------
18
- Main configuration - initial configuration requirement
19
- -------------------------------------------------------
20
- */
21
- /*
22
- ┌─┐┌─┐┌┐┌┌─┐┬┌─┐
23
- │ │ ││││├┤ ││ ┬
24
- └─┘└─┘┘└┘└ ┴└─┘
25
- */
26
- /* Override default settings in the theme | @example */
27
- /* Main configuration END
28
- -------------------------------------------------------*/
29
- /* ------------------------------------------------------------------
30
- * Loading modules - this is default configuration with all modules enabled
31
- */
32
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
33
- :root {
34
- --xii-root-font-family-default: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
35
- --xii-root-font-family-monospace: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
36
- }
37
- @media (prefers-reduced-motion: no-preference) {
38
- :root {
39
- scroll-behavior: smooth;
40
- }
41
- }
42
- :root {
43
- color-scheme: light dark;
44
- }
45
-
46
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
47
- /*
48
- ┬─┐┌─┐┌─┐┌─┐┌┬┐
49
- ├┬┘├┤ └─┐├┤ │
50
- ┴└─└─┘└─┘└─┘ ┴
51
- */
52
- *,
53
- *::before,
54
- *::after {
55
- box-sizing: border-box;
56
- }
57
-
58
- abbr[title] {
59
- text-decoration: underline dotted;
60
- cursor: help;
61
- text-decoration-skip-ink: none;
62
- }
63
-
64
- ol ol,
65
- ul ul,
66
- ol ul,
67
- ul ol {
68
- margin: 0;
69
- }
70
-
71
- sub,
72
- sup {
73
- position: relative;
74
- line-height: 0;
75
- vertical-align: baseline;
76
- }
77
-
78
- a:not([href]):not([class]), a:not([href]):not([class]):hover {
79
- color: inherit;
80
- text-decoration: none;
81
- }
82
-
83
- pre,
84
- code,
85
- kbd,
86
- samp {
87
- font-size: 1em;
88
- }
89
-
90
- pre {
91
- display: block;
92
- margin: 0;
93
- overflow: auto;
94
- }
95
- pre code {
96
- font-size: inherit;
97
- color: inherit;
98
- word-break: normal;
99
- }
100
-
101
- code {
102
- word-wrap: break-word;
103
- }
104
- a > code {
105
- color: inherit;
106
- }
107
-
108
- kbd {
109
- padding: 0.1875rem 0.375rem;
110
- font-size: 0.875em;
111
- border-radius: 0.25rem;
112
- }
113
- kbd kbd {
114
- padding: 0;
115
- font-size: inherit;
116
- }
117
-
118
- figure {
119
- margin: 0;
120
- }
121
-
122
- img,
123
- svg {
124
- vertical-align: middle;
125
- }
126
-
127
- table {
128
- caption-side: bottom;
129
- border-collapse: collapse;
130
- }
131
-
132
- caption {
133
- text-align: left;
134
- }
135
-
136
- th {
137
- font-weight: inherit;
138
- text-align: inherit;
139
- text-align: -webkit-match-parent;
140
- }
141
-
142
- thead,
143
- tbody,
144
- tfoot,
145
- tr,
146
- td,
147
- th {
148
- border-color: inherit;
149
- border-style: solid;
150
- border-width: 0;
151
- }
152
-
153
- button {
154
- border-radius: 0;
155
- }
156
-
157
- button:focus:not(:focus-visible) {
158
- outline: 0;
159
- }
160
-
161
- input,
162
- button,
163
- select,
164
- optgroup,
165
- textarea {
166
- margin: 0;
167
- line-height: inherit;
168
- }
169
-
170
- button,
171
- select {
172
- text-transform: none;
173
- }
174
-
175
- [role=button] {
176
- cursor: pointer;
177
- }
178
-
179
- select {
180
- word-wrap: normal;
181
- }
182
- select:disabled {
183
- opacity: 1;
184
- }
185
-
186
- [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
187
- display: none !important;
188
- }
189
-
190
- button,
191
- [type=button],
192
- [type=reset],
193
- [type=submit] {
194
- -webkit-appearance: button;
195
- }
196
- button:not(:disabled),
197
- [type=button]:not(:disabled),
198
- [type=reset]:not(:disabled),
199
- [type=submit]:not(:disabled) {
200
- cursor: pointer;
201
- }
202
-
203
- ::-moz-focus-inner {
204
- padding: 0;
205
- border-style: none;
206
- }
207
-
208
- textarea {
209
- resize: vertical;
210
- }
211
-
212
- fieldset {
213
- min-width: 0;
214
- padding: 0;
215
- margin: 0;
216
- border: 0;
217
- }
218
-
219
- legend {
220
- float: left;
221
- width: 100%;
222
- padding: 0;
223
- margin: 0;
224
- line-height: inherit;
225
- }
226
- legend + * {
227
- clear: left;
228
- }
229
-
230
- ::-webkit-datetime-edit-fields-wrapper,
231
- ::-webkit-datetime-edit-text,
232
- ::-webkit-datetime-edit-minute,
233
- ::-webkit-datetime-edit-hour-field,
234
- ::-webkit-datetime-edit-day-field,
235
- ::-webkit-datetime-edit-month-field,
236
- ::-webkit-datetime-edit-year-field {
237
- padding: 0;
238
- }
239
-
240
- ::-webkit-inner-spin-button {
241
- height: auto;
242
- }
243
-
244
- [type=search] {
245
- outline-offset: -2px;
246
- -webkit-appearance: textfield;
247
- }
248
-
249
- /* rtl:raw:
250
- [type="tel"],
251
- [type="url"],
252
- [type="email"],
253
- [type="number"] {
254
- direction: ltr;
255
- }
256
- */
257
- ::-webkit-search-decoration {
258
- -webkit-appearance: none;
259
- }
260
-
261
- ::-webkit-color-swatch-wrapper {
262
- padding: 0;
263
- }
264
-
265
- ::file-selector-button {
266
- font: inherit;
267
- -webkit-appearance: button;
268
- }
269
-
270
- output {
271
- display: inline-block;
272
- }
273
-
274
- iframe {
275
- border: 0;
276
- }
277
-
278
- summary {
279
- display: list-item;
280
- cursor: pointer;
281
- }
282
-
283
- progress {
284
- vertical-align: baseline;
285
- }
286
-
287
- [hidden] {
288
- display: none !important;
289
- }
290
-
291
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
292
- /*
293
- ┌┐ ┌─┐┌─┐┌─┐
294
- ├┴┐├─┤└─┐├┤
295
- └─┘┴ ┴└─┘└─┘
296
- */
297
- body {
298
- margin: 0;
299
- -webkit-text-size-adjust: 100%;
300
- font-size: 1rem;
301
- font-weight: normal;
302
- line-height: 1;
303
- font-family: var(--xii-root-font-family-default);
304
- color: var(--xii-body-color);
305
- background: var(--xii-body-background);
306
- text-rendering: optimizelegibility;
307
- -webkit-font-smoothing: antialiased;
308
- }
309
- @media (prefers-color-scheme: light) {
310
- body {
311
- --xii-body-background: "#fff";
312
- --xii-body-color: "#ccc";
313
- }
314
- }
315
- @media (prefers-color-scheme: dark) {
316
- body {
317
- --xii-body-background: rgb(18, 20, 23);
318
- --xii-body-color: "#ccc";
319
- }
320
- }
321
-
322
- a {
323
- text-decoration: underline;
324
- color: var(--xii-a-a-color);
325
- }
326
- @media (prefers-color-scheme: light) {
327
- a {
328
- --xii-a-color: "#ccc";
329
- }
330
- }
331
- @media (prefers-color-scheme: dark) {
332
- a {
333
- --xii-a-color: "#ccc";
334
- }
335
- }
336
- a[target=_blank]:after {
337
- background: red;
338
- display: inline-flex;
339
- width: 12px;
340
- height: 12px;
341
- content: "";
342
- }
343
-
344
- ol {
345
- margin: 0;
346
- padding: 0;
347
- list-style-type: none;
348
- }
349
-
350
- ul {
351
- margin: 0;
352
- padding: 0;
353
- list-style-type: none;
354
- }
355
-
356
- dl {
357
- margin: 0;
358
- padding: 0;
359
- list-style-type: none;
360
- }
361
-
362
- img {
363
- vertical-align: middle;
364
- width: auto;
365
- height: auto;
366
- max-width: 100%;
367
- }
368
-
369
- p {
370
- margin: 0;
371
- }
372
-
373
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
374
- /*
375
- ┌─┐┌─┐┌┐┌┌┬┐┌─┐┌┐┌┌┬┐
376
- │ │ ││││ │ ├┤ │││ │
377
- └─┘└─┘┘└┘ ┴ └─┘┘└┘ ┴
378
- */
379
- .content h1 {
380
- font-size: 3.5rem;
381
- line-height: inherit;
382
- font-weight: 500;
383
- margin: 0;
384
- padding: 0 0 15px 0;
385
- }
386
- .content h2 {
387
- font-size: 2.8rem;
388
- line-height: inherit;
389
- font-weight: 500;
390
- margin: 0;
391
- padding: 0 0 15px 0;
392
- }
393
- .content h3 {
394
- font-size: 2.4rem;
395
- line-height: inherit;
396
- font-weight: 500;
397
- margin: 0;
398
- padding: 0 0 15px 0;
399
- }
400
- .content h4 {
401
- font-size: 2rem;
402
- line-height: inherit;
403
- font-weight: 500;
404
- margin: 0;
405
- padding: 0 0 15px 0;
406
- }
407
- .content h5 {
408
- font-size: 1.8rem;
409
- line-height: inherit;
410
- font-weight: 500;
411
- margin: 0;
412
- padding: 0 0 15px 0;
413
- }
414
- .content h6 {
415
- font-size: 1.625rem;
416
- line-height: inherit;
417
- font-weight: 500;
418
- margin: 0;
419
- padding: 0 0 15px 0;
420
- }
421
- .content p {
422
- margin: 0;
423
- padding: 0 0 15px 0;
424
- }
425
- .content abbr {
426
- attributes: (title: ());
427
- }
428
- .content address {
429
- margin: 0;
430
- font-size: 1rem;
431
- line-height: inherit;
432
- }
433
- .content ol {
434
- margin-bottom: 15px;
435
- }
436
- .content ul {
437
- margin-bottom: 15px;
438
- }
439
- .content dl {
440
- margin-bottom: 15px;
441
- }
442
- .content dt {
443
- font-weight: normal;
444
- }
445
- .content dd {
446
- margin: 0 0 0.5rem 0;
447
- padding: 0;
448
- }
449
- .content b {
450
- font-weight: bold;
451
- }
452
- .content strong {
453
- font-weight: bold;
454
- }
455
- .content small {
456
- font-size: 0.825rem;
457
- }
458
- .content mark {
459
- padding: 0.1875em;
460
- }
461
- .content sub {
462
- bottom: 0.25em;
463
- }
464
- .content sup {
465
- top: -0.5em;
466
- }
467
- .content details {
468
- margin-bottom: 15px;
469
- }
470
- .content pre {
471
- font-family: var(--xii-root-font-family-monospace);
472
- }
473
- .content code {
474
- color: var(--xii-code-color);
475
- background: var(--xii-code-background);
476
- padding: 0 5px;
477
- }
478
- @media (prefers-color-scheme: light) {
479
- .content code {
480
- --xii-code-background: "#fff";
481
- --xii-code-color: "#ccc";
482
- }
483
- }
484
- @media (prefers-color-scheme: dark) {
485
- .content code {
486
- --xii-code-background: rgb(38, 69, 116);
487
- --xii-code-color: "#fff";
488
- }
489
- }
490
- .content figure {
491
- margin: 0 0 15px 0;
492
- }
493
- .content img {
494
- margin: 0 0 15px 0;
495
- }
496
- .content svg {
497
- vertical-align: middle;
498
- }
499
- .content iframe {
500
- margin: 0 0 15px 0;
501
- }
502
- .content embed {
503
- margin: 0 0 15px 0;
504
- }
505
- .content object {
506
- margin: 0 0 15px 0;
507
- }
508
- .content progress {
509
- vertical-align: baseline;
510
- }
511
- .content label {
512
- display: inline-block;
513
- }
514
- .content select {
515
- word-wrap: normal;
516
- }
517
- .content hr {
518
- margin: 15px 0;
519
- border: 0;
520
- border-top-width: 1px;
521
- border-top-style: solid;
522
- border-top-color: var(--xii-hr-border-top-color);
523
- }
524
- @media (prefers-color-scheme: light) {
525
- .content hr {
526
- --xii-hr-border-top-color: #ccc;
527
- }
528
- }
529
- @media (prefers-color-scheme: dark) {
530
- .content hr {
531
- --xii-hr-border-top-color: #555;
532
- }
533
- }
534
-
535
- /* Override default settings in the theme | @example */
536
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
537
- /**
538
- ┌─┐┌─┐┌┐┌┌┬┐┌─┐┬┌┐┌┌─┐┬─┐
539
- │ │ ││││ │ ├─┤││││├┤ ├┬┘
540
- └─┘└─┘┘└┘ ┴ ┴ ┴┴┘└┘└─┘┴└─
541
- **/
542
- @media (min-width: 540px) {
543
- .container.sm {
544
- max-width: 540px;
545
- margin: 0 auto;
546
- width: 100%;
547
- }
548
- }
549
- @media (min-width: 720px) {
550
- .container.md {
551
- max-width: 720px;
552
- margin: 0 auto;
553
- width: 100%;
554
- }
555
- }
556
- @media (min-width: 960px) {
557
- .container.lg {
558
- max-width: 960px;
559
- margin: 0 auto;
560
- width: 100%;
561
- }
562
- }
563
- @media (min-width: 1140px) {
564
- .container.xl {
565
- max-width: 1140px;
566
- margin: 0 auto;
567
- width: 100%;
568
- }
569
- }
570
- @media (min-width: 1320px) {
571
- .container.xxl {
572
- max-width: 1320px;
573
- margin: 0 auto;
574
- width: 100%;
575
- }
576
- }
577
- /**
578
- ==[ Note ]==
579
- We are using mixin here, because @include is not working with @media query in SCSS | 07.12.2023
580
- **/
581
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
582
- /*
583
- ┌─┐┌─┐┬─┐┌┬┐
584
- │ ├─┤├┬┘ ││
585
- └─┘┴ ┴┴└──┴┘
586
- */
587
- /* Load settings and functions */
588
- /* SCSS variables definition requirement */
589
- /* Loading component settings and styling */
590
- .card {
591
- --xii-card-border-radius: 0.25rem;
592
- --xii-card-padding: 10px;
593
- background: var(--xii-card-background);
594
- padding: var(--xii-card-padding);
595
- border-radius: var(--xii-card-border-radius);
596
- box-shadow: var(--xii-card-shadow);
597
- border: var(--xii-card-border);
598
- height: 100%;
599
- margin: 0;
600
- }
601
- @media (prefers-color-scheme: light) {
602
- .card {
603
- --xii-card-background: rgb(200, 200, 200);
604
- }
605
- }
606
- @media (prefers-color-scheme: dark) {
607
- .card {
608
- --xii-card-border: 1px solid rgba(48, 54, 61, 0.75);
609
- --xii-card-background: rgb(22, 27, 34);
610
- --xii-card-shadow: rgba(1, 4, 9, 0.4) 0 1px 0 0;
611
- }
612
- }
613
-
614
- /* Wrapper class variables assigment */
615
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
616
- /**
617
- ┌┐ ┌─┐┌┬┐┌─┐┌─┐
618
- ├┴┐├─┤ │││ ┬├┤
619
- └─┘┴ ┴─┴┘└─┘└─┘
620
- **/
621
- /* Load settings and functions */
622
- /* SCSS variables definition requirement */
623
- /* Loading component settings and styling */
624
- .badge {
625
- --xii-badge-border-radius: 0.25rem;
626
- --xii-badge-padding: 0.125rem 0.625rem;
627
- font-size: 0.75rem;
628
- line-height: 1rem;
629
- font-weight: 500;
630
- white-space: nowrap;
631
- vertical-align: middle;
632
- align-items: center;
633
- display: inline-flex;
634
- padding: var(--xii-badge-padding);
635
- border-radius: var(--xii-badge-border-radius);
636
- color: var(--xii-badge-color);
637
- background: var(--xii-badge-background);
638
- box-shadow: var(--xii-badge-box-shadow);
639
- border: var(--xii-badge-border);
640
- }
641
- @media (prefers-color-scheme: light) {
642
- .badge {
643
- --xii-badge-color: #ccc;
644
- --xii-badge-box-shadow: none;
645
- }
646
- }
647
- @media (prefers-color-scheme: dark) {
648
- .badge {
649
- --xii-badge-color: #ccc;
650
- --xii-badge-background: rgb(40, 50, 60);
651
- --xii-badge-box-shadow: none;
652
- --xii-badge-border: 1px solid #ccc;
653
- }
654
- }
655
-
656
- /* Wrapper class variables assigment */
657
- /*
658
- * ------------------------------------------------------------------
659
- * ███████╗ ██████╗ ██████╗███████╗██╗ ███████╗ ██████╗ ███╗ ██╗
660
- * ██╔════╝██╔════╝██╔════╝██╔════╝██║ ██╔════╝██╔═══██╗████╗ ██║
661
- * ███████╗██║ ██║ ███████╗██║ █████╗ ██║ ██║██╔██╗ ██║
662
- * ╚════██║██║ ██║ ╚════██║██║ ██╔══╝ ██║ ██║██║╚██╗██║
663
- * ███████║╚██████╗╚██████╗███████║███████╗███████╗╚██████╔╝██║ ╚████║
664
- * ╚══════╝ ╚═════╝ ╚═════╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═══╝
665
- *
666
- * SCSSLEON v1.0.0 (https://nulllogic.github.io/scssleon/)
667
- * Copyright 2011-2024 NullLogic
668
- * Licensed under MIT (https://nulllogic.github.io/scssleon/blob/main/LICENSE)
669
- * ------------------------------------------------------------------
670
- */
671
- /*
672
- -------------------------------------------------------
673
- Main configuration - initial configuration requirement
674
- -------------------------------------------------------
675
- */
676
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
677
- /* SCSS variables definition requirement */
678
- /* Override default settings in the theme | @example */
679
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
680
- .label {
681
- display: block;
682
- margin-bottom: 10px;
683
- }
684
-
685
- /* Override default settings in the theme | @example */
686
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
687
- .input {
688
- --xii-input-border-radius: 0.25rem;
689
- --xii-input-padding: 0.5rem 0.75rem;
690
- display: block;
691
- background: var(--xii-input-background);
692
- color: var(--xii-input-color);
693
- padding: var(--xii-input-padding);
694
- border: var(--xii-input-border);
695
- border-radius: var(--xii-input-border-radius);
696
- box-shadow: var(--xii-input-box-shadow);
697
- }
698
- @media (prefers-color-scheme: dark) {
699
- .input {
700
- --xii-input-color: #fff;
701
- --xii-input-background: rgb(48, 56, 66);
702
- --xii-input-border: 1px solid rgba(240, 246, 252, 0.25);
703
- }
704
- }
705
-
706
- /* Override default settings in the theme | @example */
707
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
708
- .select {
709
- --xii-select-border-radius: 0.25rem;
710
- --xii-select-padding: 0.5rem 0.75rem;
711
- display: block;
712
- background: var(--xii-select-background);
713
- color: var(--xii-select-color);
714
- padding: var(--xii-select-padding);
715
- border: var(--xii-select-border);
716
- appearance: none;
717
- -webkit-appearance: none;
718
- border-radius: var(--xii-select-border-radius);
719
- box-shadow: var(--xii-select-box-shadow);
720
- }
721
- @media (prefers-color-scheme: dark) {
722
- .select {
723
- --xii-select-color: #fff;
724
- --xii-select-background: rgb(48, 56, 66);
725
- --xii-select-border: 1px solid rgba(240, 246, 252, 0.25);
726
- }
727
- }
728
-
729
- /* Override default settings in the theme | @example */
730
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
731
- .radio {
732
- --xii-radio-border-radius: 0.25rem;
733
- --xii-radio-padding: 0.5rem 0.75rem;
734
- background: var(--xii-select-background);
735
- color: var(--xii-select-color);
736
- padding: var(--xii-select-padding);
737
- border: var(--xii-select-border);
738
- border-radius: var(--xii-select-border-radius);
739
- box-shadow: var(--xii-select-box-shadow);
740
- }
741
- @media (prefers-color-scheme: dark) {
742
- .radio {
743
- --xii-radio-color: #fff;
744
- --xii-radio-background: rgb(48, 56, 66);
745
- --xii-radio-border: 1px solid rgba(240, 246, 252, 0.25);
746
- }
747
- }
748
-
749
- /* Override default settings in the theme | @example */
750
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
751
- .checkbox {
752
- --xii-checkbox-border-radius: 0.25rem;
753
- --xii-checkbox-padding: 0.5rem 0.75rem;
754
- background: var(--xii-select-background);
755
- color: var(--xii-select-color);
756
- padding: var(--xii-select-padding);
757
- border: var(--xii-select-border);
758
- border-radius: var(--xii-select-border-radius);
759
- box-shadow: var(--xii-select-box-shadow);
760
- }
761
- @media (prefers-color-scheme: dark) {
762
- .checkbox {
763
- --xii-checkbox-color: #fff;
764
- --xii-checkbox-background: rgb(48, 56, 66);
765
- --xii-checkbox-border: 1px solid rgba(240, 246, 252, 0.25);
766
- }
767
- }
768
-
769
- /* Override default settings in the theme | @example */
770
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
771
- /* Override default settings in the theme | @example */
772
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
773
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
774
- /**
775
- ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
776
- ├┴┐│ │ │ │ │ ││││└─┐
777
- └─┘└─┘ ┴ ┴ └─┘┘└┘└─┘
778
- **/
779
- /* Load settings and functions */
780
- /* SCSS variables definition requirement */
781
- /* Loading component settings and styling */
782
- .btn {
783
- --xii-btn-border-radius: 0.25rem;
784
- --xii-btn-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 2px 0 rgba(78, 83, 90, 0.1);
785
- --xii-btn-padding: 0.5rem 0.75rem;
786
- display: inline-flex;
787
- align-items: center;
788
- align-content: center;
789
- white-space: nowrap;
790
- user-select: none;
791
- text-decoration: none;
792
- cursor: pointer;
793
- vertical-align: middle;
794
- font-size: 1em;
795
- padding: var(--xii-btn-padding);
796
- border: var(--xii-btn-border);
797
- background: var(--xii-btn-background);
798
- color: var(--xii-btn-color);
799
- border-radius: var(--xii-btn-border-radius);
800
- position: relative;
801
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
802
- }
803
- @media (prefers-color-scheme: light) {
804
- .btn {
805
- --xii-btn-color: #fff;
806
- --xii-btn-background: #fff;
807
- }
808
- }
809
- @media (prefers-color-scheme: dark) {
810
- .btn {
811
- --xii-btn-color: #fff;
812
- --xii-btn-background: rgb(48, 56, 66);
813
- --xii-btn-border: 1px solid rgba(240, 246, 252, 0.25);
814
- --xii-btn-hover-color: #fff;
815
- --xii-btn-hover-background: rgb(59, 68, 81);
816
- --xii-btn-hover-border: 1px solid rgba(229, 235, 240, 0.55);
817
- --xii-btn-disabled-color: #484f58;
818
- --xii-btn-disabled-background: #21262d;
819
- --xii-btn-disabled-border: 1px solid rgba(240, 246, 252, 0.1);
820
- --xii-btn-active-color: #fff;
821
- --xii-btn-active-background: rgb(39, 45, 53);
822
- --xii-btn-active-border: 1px solid rgba(240, 246, 252, 0.25);
823
- --xii-btn-active-shadow: -0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset,0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26,26,26,0.2) inset;
824
- }
825
- }
826
- .btn:hover:not(.loading, [disabled], .btn-link) {
827
- color: var(--xii-btn-hover-color);
828
- background: var(--xii-btn-hover-background);
829
- border: var(--xii-btn-hover-border);
830
- }
831
- .btn:active:not(.loading, [disabled], .btn-link) {
832
- color: var(--xii-btn-active-color);
833
- background: var(--xii-btn-active-background);
834
- border: var(--xii-btn-active-border);
835
- box-shadow: var(--xii-btn-active-shadow);
836
- }
837
- .btn-link.btn {
838
- background: transparent;
839
- border: none;
840
- box-shadow: none;
841
- }
842
- .btn-link.btn:hover {
843
- text-decoration: underline;
844
- }
845
- .loading.btn {
846
- cursor: wait;
847
- }
848
- .btn[disabled] {
849
- cursor: not-allowed;
850
- color: var(--xii-btn-disabled-color);
851
- background: var(--xii-btn-disabled-background);
852
- border: var(--xii-btn-disabled-border);
853
- box-shadow: none;
854
- }
855
-
856
- /* Wrapper class variables assigment */
857
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
858
- /*
859
- ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌ ┌─┐┬─┐┌─┐┬ ┬┌─┐
860
- ├┴┐│ │ │ │ │ ││││ │ ┬├┬┘│ ││ │├─┘
861
- └─┘└─┘ ┴ ┴ └─┘┘└┘ └─┘┴└─└─┘└─┘┴
862
- */
863
- /* Load settings and functions */
864
- /* SCSS variables definition requirement */
865
- /* Loading component settings and styling */
866
- .btn-group {
867
- --xii-btn-group-gap: 10px;
868
- display: flex;
869
- flex-wrap: wrap;
870
- }
871
- .btn-group .btn:first-child {
872
- border-start-end-radius: 0;
873
- border-end-end-radius: 0;
874
- }
875
- .btn-group .btn:last-child {
876
- border-start-start-radius: 0;
877
- border-end-start-radius: 0;
878
- }
879
- .btn-group .btn:not(:first-child) {
880
- margin-left: -1px;
881
- }
882
- .btn-group .btn:not(:first-child, :last-child) {
883
- border-radius: 0;
884
- }
885
- .btn-group .btn:hover, .btn-group .btn:focus {
886
- z-index: 1;
887
- }
888
- .separated.btn-group {
889
- gap: var(--xii-btn-group-gap);
890
- --xii-btn-group-border-radius: 5px;
891
- }
892
- .separated.btn-group .btn {
893
- margin: 0;
894
- border-radius: var(--xii-btn-group-border-radius);
895
- }
896
-
897
- /* Wrapper class variables assigment */
898
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
899
- /**
900
- ┌┐ ┬─┐┌─┐┌─┐┌┬┐┌─┐┬─┐┬ ┬┌┬┐┌┐ ┌─┐
901
- ├┴┐├┬┘├┤ ├─┤ │││ ├┬┘│ ││││├┴┐└─┐
902
- └─┘┴└─└─┘┴ ┴─┴┘└─┘┴└─└─┘┴ ┴└─┘└─┘
903
- **/
904
- /* Load settings and functions */
905
- /* SCSS variables definition requirement */
906
- /* Loading component settings and styling */
907
- .breadcrumb {
908
- --xii-breadcrumb-padding: 0 0 0 5px;
909
- list-style: none;
910
- align-items: center;
911
- display: flex;
912
- flex-wrap: wrap;
913
- padding: var(--xii-breadcrumb-padding);
914
- }
915
- .breadcrumb .item {
916
- display: inline-flex;
917
- }
918
- /* Wrapper class variables assigment */
919
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
920
- /**
921
- ┌─┐┬ ┌─┐┬─┐┌┬┐┌─┐
922
- ├─┤│ ├┤ ├┬┘ │ └─┐
923
- ┴ ┴┴─┘└─┘┴└─ ┴ └─┘
924
- **/
925
- /* Load settings and functions */
926
- /* SCSS variables definition requirement */
927
- /* Loading component settings and styling */
928
- .alert {
929
- --xii-alert-border-radius: 0.25rem;
930
- --xii-alert-padding: 1.25rem;
931
- box-shadow: var(--xii-alert-shadow);
932
- background: var(--xii-alert-background);
933
- outline: 1px solid transparent;
934
- position: relative;
935
- display: flex;
936
- }
937
- @media (prefers-color-scheme: light) {
938
- .alert {
939
- --xii-alert-background: rgb(246, 246, 247);
940
- --xii-alert-shadow: inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1);
941
- }
942
- }
943
- @media (prefers-color-scheme: dark) {
944
- .alert {
945
- --xii-alert-background: rgb(48, 56, 66);
946
- --xii-alert-border: 1px solid rgba(182, 199, 216, 0.35);
947
- --xii-alert-shadow: inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1);
948
- }
949
- }
950
-
951
- /* Wrapper class variables assigment */
952
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
953
- /**
954
- ┌─┐┌─┐┌─┐┌─┐┬─┐┌┬┐┬┌─┐┌┐┌
955
- ├─┤│ │ │ │├┬┘ ││││ ││││
956
- ┴ ┴└─┘└─┘└─┘┴└──┴┘┴└─┘┘└┘
957
- **/
958
- /* Load settings and functions */
959
- /* SCSS variables definition requirement */
960
- /* Loading component settings and styling */
961
- .accordion {
962
- --xii-accordion-border-radius: 0.25rem;
963
- --xii-accordion-padding: 1.25rem;
964
- position: relative;
965
- width: 100%;
966
- }
967
- @media (prefers-color-scheme: dark) {
968
- .accordion {
969
- --xii-accordion-border: 1px solid rgba(182, 199, 216, 0.35);
970
- --xii-accordion-background: rgb(46, 56, 66);
971
- }
972
- }
973
-
974
- /* Wrapper class variables assigment */
975
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
976
- /*
977
- ┌─┐┬ ┬┌─┐┬─┐┬ ┌─┐┬ ┬
978
- │ │└┐┌┘├┤ ├┬┘│ ├─┤└┬┘
979
- └─┘ └┘ └─┘┴└─┴─┘┴ ┴ ┴
980
- */
981
- /* Load settings and functions */
982
- /* SCSS variables definition requirement */
983
- /* Loading component settings and styling */
984
- .overlay {
985
- position: absolute;
986
- top: 0;
987
- bottom: 0;
988
- left: 0;
989
- right: 0;
990
- width: 100%;
991
- height: 100%;
992
- }
993
- @media (prefers-color-scheme: dark) {
994
- .overlay {
995
- --xii-overlay-background: rgba(15, 23, 42, 0.25);
996
- }
997
- }
998
-
999
- /* Wrapper class variables assigment */
1000
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1001
- /*
1002
- ┌─┐┌─┐┌─┐┬┌┐┌┌─┐┌┬┐┬┌─┐┌┐┌
1003
- ├─┘├─┤│ ┬││││├─┤ │ ││ ││││
1004
- ┴ ┴ ┴└─┘┴┘└┘┴ ┴ ┴ ┴└─┘┘└┘
1005
- */
1006
- /* Load settings and functions */
1007
- /* SCSS variables definition requirement */
1008
- /* Loading component settings and styling */
1009
- .pagination {
1010
- --xii-pagination-grid-template-columns: auto auto 1fr;
1011
- --xii-pagination-gap: 10px;
1012
- --xii-pagination-left-column-aligment: start;
1013
- --xii-pagination-center-column-alignment: center;
1014
- --xii-pagination-right-column-alignment: end;
1015
- position: relative;
1016
- display: grid;
1017
- width: 100%;
1018
- max-width: 100%;
1019
- align-items: center;
1020
- grid-template-columns: var(--xii-pagination-grid-template-columns);
1021
- grid-gap: var(--xii-pagination-gap);
1022
- }
1023
- .pagination .left {
1024
- justify-self: var(--xii-pagination-left-column-alignment);
1025
- }
1026
- .pagination .center {
1027
- justify-self: var(--xii-pagination-center-column-alignment);
1028
- }
1029
- .pagination .right {
1030
- justify-self: var(--xii-pagination-right-column-alignment);
1031
- }
1032
-
1033
- /* Wrapper class variables assigment */
1034
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1035
- /*
1036
- ┌─┐┬ ┌─┐┌─┐┌─┐┬ ┬┌─┐┬ ┌┬┐┌─┐┬─┐┌─┐
1037
- ├─┘│ ├─┤│ ├┤ ├─┤│ ││ ││├┤ ├┬┘└─┐
1038
- ┴ ┴─┘┴ ┴└─┘└─┘┴ ┴└─┘┴─┘─┴┘└─┘┴└─└─┘
1039
- */
1040
- /* Load settings and functions */
1041
- /* SCSS variables definition requirement */
1042
- /* Loading component settings and styling */
1043
- .placeholder {
1044
- --xii-placeholder-min-height: 0.55rem;
1045
- --xii-placeholder-border-radius: 0.1875rem;
1046
- --xii-placeholder-gap: 0.6rem;
1047
- cursor: wait;
1048
- display: flex;
1049
- flex-direction: column;
1050
- gap: var(--xii-placeholder-gap);
1051
- }
1052
- @media (prefers-color-scheme: light) {
1053
- .placeholder {
1054
- --xii-placeholder-background: #ccc;
1055
- }
1056
- }
1057
- @media (prefers-color-scheme: dark) {
1058
- .placeholder {
1059
- --xii-placeholder-background: #ccc;
1060
- }
1061
- }
1062
- .placeholder .el {
1063
- min-height: var(--xii-placeholder-min-height);
1064
- border-radius: var(--xii-placeholder-border-radius);
1065
- background: var(--xii-placeholder-background);
1066
- }
1067
- .glow.placeholder .el {
1068
- animation: placeholder-glow 2s ease-in-out infinite;
1069
- }
1070
- .wave.placeholder .el {
1071
- mask-size: 200% 100%;
1072
- -webkit-mask-size: 200% 100%;
1073
- mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #fff, rgba(0, 0, 0, 0));
1074
- -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #fff, rgba(0, 0, 0, 0));
1075
- animation: placeholder-wave 2s linear infinite;
1076
- }
1077
-
1078
- /* Wrapper class variables assigment */
1079
- @keyframes placeholder-glow {
1080
- 50% {
1081
- opacity: 0.5;
1082
- }
1083
- }
1084
- @keyframes placeholder-wave {
1085
- 100% {
1086
- mask-position: -200% 0;
1087
- -webkit-mask-position: -200% 0;
1088
- }
1089
- }
1090
- /* Override default settings in the theme | @example */
1091
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1092
- /*
1093
- ┌┬┐┌─┐┌┬┐┌─┐┬
1094
- ││││ │ ││├─┤│
1095
- ┴ ┴└─┘─┴┘┴ ┴┴─┘
1096
- */
1097
- /* Load settings and functions */
1098
- /* SCSS variables definition requirement */
1099
- /* Loading component settings and styling */
1100
- .modal {
1101
- nil: null;
1102
- }
1103
-
1104
- /* Wrapper class variables assigment */
1105
- /* Override default settings in the theme | @example */
1106
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1107
- /*
1108
- ┬ ┌─┐┌─┐┌┬┐┌─┐┬─┐
1109
- │ │ │├─┤ ││├┤ ├┬┘
1110
- ┴─┘└─┘┴ ┴─┴┘└─┘┴└─
1111
- */
1112
- /* Load settings and functions */
1113
- /* SCSS variables definition requirement */
1114
- /* Loading component settings and styling */
1115
- .loader {
1116
- nil: null;
1117
- }
1118
-
1119
- /* Wrapper class variables assigment */
1120
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1121
- /**
1122
- ┌┐┌┌─┐┬ ┬
1123
- │││├─┤└┐┌┘
1124
- ┘└┘┴ ┴ └┘
1125
- **/
1126
- /* Load settings and functions */
1127
- /* SCSS variables definition requirement */
1128
- /* Loading component settings and styling */
1129
- .nav {
1130
- --xii-nav-flex-direction: row;
1131
- --xii-nav-align-items: auto;
1132
- --xii-nav-gap: 0;
1133
- display: flex;
1134
- flex-direction: var(--xii-nav-flex-direction);
1135
- align-items: var(--xii-nav-align-items);
1136
- gap: var(--xii-nav-gap);
1137
- margin: 0;
1138
- padding: 0;
1139
- list-style-type: none;
1140
- }
1141
- .horizontal.nav {
1142
- --xii-nav-align-items: center;
1143
- --xii-nav-flex-direction: row;
1144
- }
1145
- .vertical.nav {
1146
- --xii-nav-flex-direction: column;
1147
- }
1148
- .nav .item {
1149
- width: auto;
1150
- }
1151
- .nav .item .link {
1152
- display: inline-flex;
1153
- padding: 10px;
1154
- color: var(--xii-nav-color);
1155
- }
1156
- @media (prefers-color-scheme: light) {
1157
- .nav .item .link {
1158
- --xii-nav-color: "#333";
1159
- }
1160
- }
1161
- @media (prefers-color-scheme: dark) {
1162
- .nav .item .link {
1163
- --xii-nav-color: "#fff";
1164
- }
1165
- }
1166
- .nav .item .link:hover {
1167
- text-decoration: none;
1168
- }
1169
-
1170
- /* Wrapper class variables assigment */
1171
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1172
- /*
1173
- ┌┐┌┌─┐┬ ┬┬┌─┐┌─┐┌┬┐┬┌─┐┌┐┌
1174
- │││├─┤└┐┌┘││ ┬├─┤ │ ││ ││││
1175
- ┘└┘┴ ┴ └┘ ┴└─┘┴ ┴ ┴ ┴└─┘┘└┘
1176
- */
1177
- /* Load settings and functions */
1178
- /* SCSS variables definition requirement */
1179
- /* Loading component settings and styling */
1180
- .navbar {
1181
- --xii-navbar-grid-template-columns: auto auto 1fr;
1182
- --xii-navbar-gap: 10px;
1183
- --xii-navbar-left-column-aligment: start;
1184
- --xii-navbar-center-column-alignnent: center;
1185
- --xii-navbar-right-column-alignment: end;
1186
- position: relative;
1187
- display: grid;
1188
- width: 100%;
1189
- max-width: 100%;
1190
- align-items: center;
1191
- margin: 0;
1192
- padding: 0;
1193
- grid-template-columns: var(--xii-navbar-grid-template-columns);
1194
- grid-gap: var(--xii-navbar-gap);
1195
- }
1196
- .navbar .left {
1197
- justify-self: var(--xii-navbar-left-column-alignment);
1198
- }
1199
- .navbar .center {
1200
- justify-self: var(--xii-navbar-center-column-alignment);
1201
- }
1202
- .navbar .right {
1203
- justify-self: var(--xii-navbar-right-column-alignment);
1204
- }
1205
-
1206
- /* Wrapper class variables assigment */
1207
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1208
- /*
1209
- ┌─┐┬┌┬┐┌─┐┌─┐┌─┐┌─┐
1210
- └─┐│ ││├┤ │ ├─┤├─┘
1211
- └─┘┴─┴┘└─┘└─┘┴ ┴┴
1212
- */
1213
- /* Load settings and functions */
1214
- /* SCSS variables definition requirement */
1215
- /* Loading component settings and styling */
1216
- .sidecap {
1217
- position: absolute;
1218
- top: 0;
1219
- right: 0;
1220
- height: 100%;
1221
- display: flex;
1222
- flex-direction: column;
1223
- }
1224
- @media (prefers-color-scheme: light) {
1225
- .sidecap {
1226
- --xii-sidecap-background: #ccc;
1227
- }
1228
- }
1229
- @media (prefers-color-scheme: dark) {
1230
- .sidecap {
1231
- --xii-sidecap-background: rgb(45, 56, 66);
1232
- --xii-sidecap-box-shadow: 0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, 0.28);
1233
- }
1234
- }
1235
-
1236
- /* Wrapper class variables assigment */
1237
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1238
- .clearfix::after {
1239
- display: block;
1240
- clear: both;
1241
- content: "";
1242
- }
1243
-
1244
- .sr {
1245
- position: absolute;
1246
- width: 1px;
1247
- height: 1px;
1248
- padding: 0;
1249
- margin: -1px;
1250
- overflow: hidden;
1251
- clip: rect(0, 0, 0, 0);
1252
- white-space: nowrap;
1253
- border-width: 0;
1254
- }
1255
-
1256
- .text-truncate {
1257
- overflow: hidden;
1258
- text-overflow: ellipsis;
1259
- white-space: nowrap;
1260
- }
1261
-
1262
- /* - ૮₍ ˃ ⤙ ˂ ₎ა – root */
1263
- /*
1264
- * ------------------------------------------------------------------
1265
- * ███████╗ ██████╗ ██████╗███████╗██╗ ███████╗ ██████╗ ███╗ ██╗
1266
- * ██╔════╝██╔════╝██╔════╝██╔════╝██║ ██╔════╝██╔═══██╗████╗ ██║
1267
- * ███████╗██║ ██║ ███████╗██║ █████╗ ██║ ██║██╔██╗ ██║
1268
- * ╚════██║██║ ██║ ╚════██║██║ ██╔══╝ ██║ ██║██║╚██╗██║
1269
- * ███████║╚██████╗╚██████╗███████║███████╗███████╗╚██████╔╝██║ ╚████║
1270
- * ╚══════╝ ╚═════╝ ╚═════╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═══╝
1271
- *
1272
- * SCSSLEON v1.0.0 (https://nulllogic.github.io/scssleon/)
1273
- * Copyright 2011-2024 NullLogic
1274
- * Licensed under MIT (https://nulllogic.github.io/scssleon/blob/main/LICENSE)
1275
- * ------------------------------------------------------------------
1276
- */
1277
- /*
1278
- -------------------------------------------------------
1279
- Main configuration - initial configuration requirement
1280
- -------------------------------------------------------
1281
- */
1282
- .block {
1283
- display: block;
1284
- }
1285
-
1286
- .inline-block {
1287
- display: inline-block;
1288
- }
1289
-
1290
- .inline {
1291
- display: inline;
1292
- }
1293
-
1294
- .flex {
1295
- display: flex;
1296
- }
1297
-
1298
- .inline-flex {
1299
- display: inline-flex;
1300
- }
1301
-
1302
- .table {
1303
- display: table;
1304
- }
1305
-
1306
- .inline-table {
1307
- display: inline-table;
1308
- }
1309
-
1310
- .table-caption {
1311
- display: table-caption;
1312
- }
1313
-
1314
- .table-cell {
1315
- display: table-cell;
1316
- }
1317
-
1318
- .table-column {
1319
- display: table-column;
1320
- }
1321
-
1322
- .table-column-group {
1323
- display: table-column-group;
1324
- }
1325
-
1326
- .table-footer-group {
1327
- display: table-footer-group;
1328
- }
1329
-
1330
- .table-header-group {
1331
- display: table-header-group;
1332
- }
1333
-
1334
- .table-row-group {
1335
- display: table-row-group;
1336
- }
1337
-
1338
- .table-row {
1339
- display: table-row;
1340
- }
1341
-
1342
- .flow-root {
1343
- display: flow-root;
1344
- }
1345
-
1346
- .grid {
1347
- display: grid;
1348
- }
1349
-
1350
- .inline-grid {
1351
- display: inline-grid;
1352
- }
1353
-
1354
- .contents {
1355
- display: contents;
1356
- }
1357
-
1358
- .list-item {
1359
- display: list-item;
1360
- }
1361
-
1362
- .hidden {
1363
- display: hidden;
1364
- }
1365
-
1366
- .flex-initial {
1367
- flex: 0 1 auto;
1368
- }
1369
-
1370
- .flex-1 {
1371
- flex: 1 1 0%;
1372
- }
1373
-
1374
- .flex-auto {
1375
- flex: 1 1 auto;
1376
- }
1377
-
1378
- .flex-none {
1379
- flex: none;
1380
- }
1381
-
1382
- .flex-row {
1383
- flex-direction: row;
1384
- }
1385
-
1386
- .flex-row-reverse {
1387
- flex-direction: row-reverse;
1388
- }
1389
-
1390
- .flex-col {
1391
- flex-direction: column;
1392
- }
1393
-
1394
- .flex-col-reverse {
1395
- flex-direction: column-reverse;
1396
- }
1397
-
1398
- .grow {
1399
- flex-grow: 1;
1400
- }
1401
-
1402
- .grow-0 {
1403
- flex-grow: 0;
1404
- }
1405
-
1406
- .shrink {
1407
- flex-shrink: 1;
1408
- }
1409
-
1410
- .shrink-0 {
1411
- flex-shrink: 0;
1412
- }
1413
-
1414
- .flex-wrap {
1415
- flex-wrap: flex-wrap;
1416
- }
1417
-
1418
- .flex-wrap-reverse {
1419
- flex-wrap: flex-wrap-reverse;
1420
- }
1421
-
1422
- .flex-nowrap {
1423
- flex-wrap: flex-nowrap;
1424
- }
1425
-
1426
- .order-none {
1427
- order: 0;
1428
- }
1429
-
1430
- .order-first {
1431
- order: -9999;
1432
- }
1433
-
1434
- .order-1 {
1435
- order: 1;
1436
- }
1437
-
1438
- .order-2 {
1439
- order: 2;
1440
- }
1441
-
1442
- .order-3 {
1443
- order: 3;
1444
- }
1445
-
1446
- .order-4 {
1447
- order: 4;
1448
- }
1449
-
1450
- .order-5 {
1451
- order: 5;
1452
- }
1453
-
1454
- .order-6 {
1455
- order: 6;
1456
- }
1457
-
1458
- .order-last {
1459
- order: 9999;
1460
- }
1461
-
1462
- .align-items-start {
1463
- align-items: flex-start;
1464
- }
1465
-
1466
- .align-items-end {
1467
- align-items: flex-end;
1468
- }
1469
-
1470
- .align-items-center {
1471
- align-items: center;
1472
- }
1473
-
1474
- .align-items-baseline {
1475
- align-items: baseline;
1476
- }
1477
-
1478
- .align-items-stretch {
1479
- align-items: stretch;
1480
- }
1481
-
1482
- .align-content-center {
1483
- align-content: center;
1484
- }
1485
-
1486
- .align-content-start {
1487
- align-content: flex-start;
1488
- }
1489
-
1490
- .align-content-end {
1491
- align-content: flex-end;
1492
- }
1493
-
1494
- .align-content-between {
1495
- align-content: space-between;
1496
- }
1497
-
1498
- .align-content-around {
1499
- align-content: space-around;
1500
- }
1501
-
1502
- .align-content-evenly {
1503
- align-content: space-evenly;
1504
- }
1505
-
1506
- .align-self-start {
1507
- align-self: flex-start;
1508
- }
1509
-
1510
- .align-self-end {
1511
- align-self: flex-end;
1512
- }
1513
-
1514
- .align-self-center {
1515
- align-self: center;
1516
- }
1517
-
1518
- .align-self-stretch {
1519
- align-self: stretch;
1520
- }
1521
-
1522
- .align-self-baseline {
1523
- align-self: baseline;
1524
- }
1525
-
1526
- .justify-content-start {
1527
- justify-content: flex-start;
1528
- }
1529
-
1530
- .justify-content-end {
1531
- justify-content: flex-end;
1532
- }
1533
-
1534
- .justify-content-center {
1535
- justify-content: center;
1536
- }
1537
-
1538
- .justify-content-between {
1539
- justify-content: space-between;
1540
- }
1541
-
1542
- .justify-content-around {
1543
- justify-content: space-around;
1544
- }
1545
-
1546
- .justify-content-evenly {
1547
- justify-content: space-evenly;
1548
- }
1549
-
1550
- .justify-content-stretch {
1551
- justify-content: stretch;
1552
- }
1553
-
1554
- .justify-items-start {
1555
- justify-items: start;
1556
- }
1557
-
1558
- .justify-items-end {
1559
- justify-items: end;
1560
- }
1561
-
1562
- .justify-items-center {
1563
- justify-items: center;
1564
- }
1565
-
1566
- .justify-items-stretch {
1567
- justify-items: stretch;
1568
- }
1569
-
1570
- .justify-self-start {
1571
- justify-self: start;
1572
- }
1573
-
1574
- .justify-self-end {
1575
- justify-self: end;
1576
- }
1577
-
1578
- .justify-self-center {
1579
- justify-self: center;
1580
- }
1581
-
1582
- .justify-self-stretch {
1583
- justify-self: stretch;
1584
- }
1585
-
1586
- .align-baseline {
1587
- vertical-align: baseline;
1588
- }
1589
-
1590
- .align-top {
1591
- vertical-align: top;
1592
- }
1593
-
1594
- .align-middle {
1595
- vertical-align: middle;
1596
- }
1597
-
1598
- .align-bottom {
1599
- vertical-align: bottom;
1600
- }
1601
-
1602
- .align-text-top {
1603
- vertical-align: text-top;
1604
- }
1605
-
1606
- .align-text-bottom {
1607
- vertical-align: text-bottom;
1608
- }
1609
-
1610
- .align-sub {
1611
- vertical-align: sub;
1612
- }
1613
-
1614
- .align-super {
1615
- vertical-align: super;
1616
- }
1617
-
1618
- .float-left {
1619
- float: left;
1620
- }
1621
-
1622
- .float-right {
1623
- float: right;
1624
- }
1625
-
1626
- .float-none {
1627
- float: none;
1628
- }
1629
-
1630
- .overflow-auto {
1631
- overflow: auto;
1632
- }
1633
-
1634
- .overflow-hidden {
1635
- overflow: hidden;
1636
- }
1637
-
1638
- .overflow-scroll {
1639
- overflow: scroll;
1640
- }
1641
-
1642
- .overflow-visible {
1643
- overflow: visible;
1644
- }
1645
-
1646
- .static {
1647
- position: static;
1648
- }
1649
-
1650
- .fixed {
1651
- position: fixed;
1652
- }
1653
-
1654
- .absolute {
1655
- position: absolute;
1656
- }
1657
-
1658
- .relative {
1659
- position: relative;
1660
- }
1661
-
1662
- .sticky {
1663
- position: sticky;
1664
- }
1665
-
1666
- .max-w-full {
1667
- max-width: 100%;
1668
- }
1669
-
1670
- .max-w-none {
1671
- max-width: none;
1672
- }
1673
-
1674
- .min-h-0 {
1675
- min-height: 0px;
1676
- }
1677
-
1678
- .min-h-full {
1679
- min-height: 100%;
1680
- }
1681
-
1682
- .min-h-screen {
1683
- min-height: 100vh;
1684
- }
1685
-
1686
- .text-left {
1687
- text-align: left;
1688
- }
1689
-
1690
- .text-right {
1691
- text-align: right;
1692
- }
1693
-
1694
- .text-center {
1695
- text-align: center;
1696
- }
1697
-
1698
- .white-space-normal {
1699
- white-space: normal;
1700
- }
1701
-
1702
- .white-space-nowrap {
1703
- white-space: nowrap;
1704
- }
1705
-
1706
- .white-space-brake-spaces {
1707
- white-space: break-spaces;
1708
- }
1709
-
1710
- .select-none {
1711
- user-select: none;
1712
- }
1713
-
1714
- .select-text {
1715
- user-select: text;
1716
- }
1717
-
1718
- .select-all {
1719
- user-select: all;
1720
- }
1721
-
1722
- .select-auto {
1723
- user-select: auto;
1724
- }
1725
-
1726
- .visible {
1727
- visibility: visible;
1728
- }
1729
-
1730
- .invisible {
1731
- visibility: invisible;
1732
- }
1733
-
1734
- .collapse {
1735
- visibility: collapse;
1736
- }
1737
-
1738
- .grid-rows-1 {
1739
- grid-rows: repeat(1, minmax(0, 1fr));
1740
- }
1741
-
1742
- .grid-rows-2 {
1743
- grid-rows: repeat(2, minmax(0, 1fr));
1744
- }
1745
-
1746
- .grid-rows-3 {
1747
- grid-rows: repeat(3, minmax(0, 1fr));
1748
- }
1749
-
1750
- .grid-rows-4 {
1751
- grid-rows: repeat(4, minmax(0, 1fr));
1752
- }
1753
-
1754
- .grid-rows-5 {
1755
- grid-rows: repeat(5, minmax(0, 1fr));
1756
- }
1757
-
1758
- .grid-rows-6 {
1759
- grid-rows: repeat(6, minmax(0, 1fr));
1760
- }
1761
-
1762
- .grid-rows-none {
1763
- grid-rows: none;
1764
- }
1765
-
1766
- .grid-flow-row {
1767
- grid-auto-flow: row;
1768
- }
1769
-
1770
- .grid-flow-col {
1771
- grid-auto-flow: column;
1772
- }
1773
-
1774
- .grid-flow-dense {
1775
- grid-auto-flow: dense;
1776
- }
1777
-
1778
- .grid-flow-row-dense {
1779
- grid-auto-flow: row dense;
1780
- }
1781
-
1782
- .grid-flow-col-dense {
1783
- grid-auto-flow: column dense;
1784
- }
1785
-
1786
- .auto-cols-auto {
1787
- grid-auto-columns: auto;
1788
- }
1789
-
1790
- .auto-cols-min {
1791
- grid-auto-columns: min-content;
1792
- }
1793
-
1794
- .auto-cols-max {
1795
- grid-auto-columns: max-content;
1796
- }
1797
-
1798
- .auto-cols-fr {
1799
- grid-auto-columns: minmax(0, 1fr);
1800
- }
1801
-
1802
- .auto-rows-auto {
1803
- grid-auto-rows: auto;
1804
- }
1805
-
1806
- .auto-rows-min {
1807
- grid-auto-rows: min-content;
1808
- }
1809
-
1810
- .auto-rows-max {
1811
- grid-auto-rows: max-content;
1812
- }
1813
-
1814
- .auto-rows-fr {
1815
- grid-auto-rows: minmax(0, 1fr);
1816
- }
1817
-
1818
- .gap-x-1 {
1819
- column-gap: 0.25rem;
1820
- }
1821
-
1822
- .gap-x-2 {
1823
- column-gap: 0.5rem;
1824
- }
1825
-
1826
- .gap-x-3 {
1827
- column-gap: 0.75rem;
1828
- }
1829
-
1830
- /*# sourceMappingURL=scssleon.css.map */