@tabler/core 1.0.0-beta5 → 1.0.0-beta9

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 (73) hide show
  1. package/README.md +1 -1
  2. package/dist/.DS_Store +0 -0
  3. package/dist/css/demo.css +373 -246
  4. package/dist/css/demo.min.css +5 -5
  5. package/dist/css/demo.rtl.css +373 -246
  6. package/dist/css/demo.rtl.min.css +5 -5
  7. package/dist/css/tabler-flags.css +531 -268
  8. package/dist/css/tabler-flags.min.css +5 -5
  9. package/dist/css/tabler-flags.rtl.css +531 -268
  10. package/dist/css/tabler-flags.rtl.min.css +5 -5
  11. package/dist/css/tabler-payments.css +255 -130
  12. package/dist/css/tabler-payments.min.css +5 -5
  13. package/dist/css/tabler-payments.rtl.css +255 -130
  14. package/dist/css/tabler-payments.rtl.min.css +5 -5
  15. package/dist/css/tabler-vendors.css +731 -409
  16. package/dist/css/tabler-vendors.min.css +5 -5
  17. package/dist/css/tabler-vendors.rtl.css +731 -409
  18. package/dist/css/tabler-vendors.rtl.min.css +5 -5
  19. package/dist/css/tabler.css +12600 -7027
  20. package/dist/css/tabler.min.css +6 -6
  21. package/dist/css/tabler.rtl.css +12616 -7044
  22. package/dist/css/tabler.rtl.min.css +6 -6
  23. package/dist/js/demo.js +7 -7
  24. package/dist/js/demo.min.js +5 -5
  25. package/dist/js/tabler.esm.js +614 -294
  26. package/dist/js/tabler.esm.min.js +5 -5
  27. package/dist/js/tabler.js +615 -295
  28. package/dist/js/tabler.min.js +5 -5
  29. package/dist/libs/apexcharts/dist/apexcharts.min.js +5 -5
  30. package/dist/libs/jsvectormap/dist/js/jsvectormap.min.js +1 -0
  31. package/dist/libs/jsvectormap/dist/maps/world-merc.js +1 -0
  32. package/dist/libs/jsvectormap/dist/maps/world.js +1 -0
  33. package/dist/libs/nouislider/dist/nouislider.min.js +1 -1
  34. package/dist/libs/tom-select/dist/js/tom-select.base.min.js +171 -169
  35. package/package.json +38 -36
  36. package/src/js/demo.js +4 -5
  37. package/src/js/src/tab.js +2 -0
  38. package/src/js/tabler.js +1 -3
  39. package/src/scss/_core.scss +2 -1
  40. package/src/scss/_utilities.scss +0 -21
  41. package/src/scss/_variables.scss +39 -22
  42. package/src/scss/demo/_highlight.scss +0 -1
  43. package/src/scss/demo.scss +2 -2
  44. package/src/scss/fonts/_webfonts.scss +56 -6
  45. package/src/scss/layout/_core.scss +33 -1
  46. package/src/scss/layout/_dark.scss +29 -4
  47. package/src/scss/layout/_navbar.scss +3 -1
  48. package/src/scss/layout/_page.scss +1 -1
  49. package/src/scss/mixins/_functions.scss +16 -2
  50. package/src/scss/mixins/_mixins.scss +6 -6
  51. package/src/scss/tabler-vendors.scss +1 -0
  52. package/src/scss/ui/_avatars.scss +1 -5
  53. package/src/scss/ui/_badges.scss +11 -9
  54. package/src/scss/ui/_breadcrumbs.scss +1 -3
  55. package/src/scss/ui/_buttons.scss +47 -11
  56. package/src/scss/ui/_cards.scss +153 -61
  57. package/src/scss/ui/_dropdowns.scss +1 -0
  58. package/src/scss/ui/_forms.scss +2 -2
  59. package/src/scss/ui/_grid.scss +14 -0
  60. package/src/scss/ui/_icons.scss +6 -0
  61. package/src/scss/ui/_lists.scss +25 -0
  62. package/src/scss/ui/_markdown.scss +1 -0
  63. package/src/scss/ui/_nav.scss +1 -4
  64. package/src/scss/ui/_placeholder.scss +9 -0
  65. package/src/scss/ui/_status.scss +172 -0
  66. package/src/scss/ui/_switch-icon.scss +1 -0
  67. package/src/scss/ui/_type.scss +1 -1
  68. package/src/scss/ui/forms/_form-custom.scss +12 -0
  69. package/src/scss/ui/forms/_validation.scss +1 -1
  70. package/src/scss/utils/_colors.scss +10 -37
  71. package/src/scss/vendor/_jsvectormap.scss +48 -0
  72. package/src/scss/vendor/_litepicker.scss +3 -1
  73. package/src/scss/ui/_skeleton.scss +0 -98
package/dist/css/demo.css CHANGED
@@ -1,9 +1,9 @@
1
1
  /*!
2
- * Tabler v1.0.0-beta5 (https://tabler.io)
3
- * @version 1.0.0-beta5
2
+ * Tabler v1.0.0-beta9 (https://tabler.io)
3
+ * @version 1.0.0-beta9
4
4
  * @link https://tabler.io
5
- * Copyright 2018-2021 The Tabler Authors
6
- * Copyright 2018-2021 codecalm.net Paweł Kuna
5
+ * Copyright 2018-2022 The Tabler Authors
6
+ * Copyright 2018-2022 codecalm.net Paweł Kuna
7
7
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
8
8
  */
9
9
  pre.highlight,
@@ -11,180 +11,253 @@ pre.highlight,
11
11
  max-height: 30rem;
12
12
  margin: 1.5rem 0;
13
13
  overflow: auto;
14
- font-size: 85.7142857%;
15
- border-radius: 4px; }
14
+ border-radius: 4px;
15
+ }
16
+ pre.highlight::-webkit-scrollbar,
17
+ .highlight pre::-webkit-scrollbar {
18
+ width: 6px;
19
+ height: 6px;
20
+ -webkit-transition: background 0.3s;
21
+ transition: background 0.3s;
22
+ }
23
+ @media (prefers-reduced-motion: reduce) {
16
24
  pre.highlight::-webkit-scrollbar,
17
- .highlight pre::-webkit-scrollbar {
18
- width: 6px;
19
- height: 6px;
20
- -webkit-transition: background 0.3s;
21
- transition: background 0.3s; }
22
- @media (prefers-reduced-motion: reduce) {
23
- pre.highlight::-webkit-scrollbar,
24
- .highlight pre::-webkit-scrollbar {
25
- -webkit-transition: none;
26
- transition: none; } }
27
- pre.highlight::-webkit-scrollbar-thumb,
28
- .highlight pre::-webkit-scrollbar-thumb {
29
- border-radius: 5px;
30
- background: rgba(var(--tblr-body-color-rgb), 0.16); }
31
- pre.highlight::-webkit-scrollbar-track,
32
- .highlight pre::-webkit-scrollbar-track {
33
- background: rgba(var(--tblr-body-color-rgb), 0.06); }
34
- pre.highlight:hover::-webkit-scrollbar-thumb,
35
- .highlight pre:hover::-webkit-scrollbar-thumb {
36
- background: rgba(var(--tblr-body-color-rgb), 0.32); }
37
- pre.highlight::-webkit-scrollbar-corner,
38
- .highlight pre::-webkit-scrollbar-corner {
39
- background: transparent; }
25
+ .highlight pre::-webkit-scrollbar {
26
+ -webkit-transition: none;
27
+ transition: none;
28
+ }
29
+ }
30
+ pre.highlight::-webkit-scrollbar-thumb,
31
+ .highlight pre::-webkit-scrollbar-thumb {
32
+ border-radius: 5px;
33
+ background: rgba(var(--tblr-body-color-rgb), 0.16);
34
+ }
35
+ pre.highlight::-webkit-scrollbar-track,
36
+ .highlight pre::-webkit-scrollbar-track {
37
+ background: rgba(var(--tblr-body-color-rgb), 0.06);
38
+ }
39
+ pre.highlight:hover::-webkit-scrollbar-thumb,
40
+ .highlight pre:hover::-webkit-scrollbar-thumb {
41
+ background: rgba(var(--tblr-body-color-rgb), 0.32);
42
+ }
43
+ pre.highlight::-webkit-scrollbar-corner,
44
+ .highlight pre::-webkit-scrollbar-corner {
45
+ background: transparent;
46
+ }
40
47
 
41
48
  .highlight {
42
- margin: 0; }
43
- .highlight code > * {
44
- margin: 0 !important;
45
- padding: 0 !important; }
46
- .highlight .dl {
47
- color: #4070a0; }
48
- .highlight .c {
49
- color: #727272; }
50
- .highlight .c1 {
51
- color: #727272; }
52
- .highlight .ch {
53
- font-style: italic;
54
- color: #60a0b0; }
55
- .highlight .cm {
56
- color: #727272; }
57
- .highlight .cp {
58
- color: #008085; }
59
- .highlight .cpf {
60
- color: #007020; }
61
- .highlight .cs {
62
- color: #727272; }
63
- .highlight .gd {
64
- background-color: #fcc;
65
- border: 1px solid #c00; }
66
- .highlight .ge {
67
- font-style: italic; }
68
- .highlight .gh {
69
- color: #030; }
70
- .highlight .gi {
71
- background-color: #cfc;
72
- border: 1px solid #0c0; }
73
- .highlight .gl {
74
- text-decoration: underline; }
75
- .highlight .go {
76
- color: #aaa; }
77
- .highlight .gp {
78
- color: #009; }
79
- .highlight .gr {
80
- color: #f00; }
81
- .highlight .gs {
82
- font-weight: 700; }
83
- .highlight .gt {
84
- color: #9c6; }
85
- .highlight .gu {
86
- color: #030; }
87
- .highlight .il {
88
- color: #c24f19; }
89
- .highlight .k {
90
- color: #069; }
91
- .highlight .kc {
92
- color: #069; }
93
- .highlight .kd {
94
- color: #069; }
95
- .highlight .kn {
96
- color: #069; }
97
- .highlight .kp {
98
- color: #069; }
99
- .highlight .kr {
100
- color: #069; }
101
- .highlight .kt {
102
- color: #078; }
103
- .highlight .m {
104
- color: #c24f19; }
105
- .highlight .mf {
106
- color: #c24f19; }
107
- .highlight .mb {
108
- color: #40a070; }
109
- .highlight .mh {
110
- color: #c24f19; }
111
- .highlight .mi {
112
- color: #c24f19; }
113
- .highlight .mo {
114
- color: #c24f19; }
115
- .highlight .na {
116
- color: #006ee0; }
117
- .highlight .nb {
118
- color: #366; }
119
- .highlight .nc {
120
- color: #168174; }
121
- .highlight .nd {
122
- color: #6b62de; }
123
- .highlight .ne {
124
- color: #c00; }
125
- .highlight .nf {
126
- color: #b715f4; }
127
- .highlight .ni {
128
- color: #727272; }
129
- .highlight .nl {
130
- color: #6b62de; }
131
- .highlight .nn {
132
- color: #007ca5; }
133
- .highlight .no {
134
- color: #360; }
135
- .highlight .nt {
136
- color: #2f6f9f; }
137
- .highlight .nv {
138
- color: #033; }
139
- .highlight .o {
140
- color: #555; }
141
- .highlight .ow {
142
- color: #000; }
143
- .highlight .s {
144
- color: #d73038; }
145
- .highlight .s1 {
146
- color: #c30; }
147
- .highlight .s2 {
148
- color: #c30; }
149
- .highlight .sa {
150
- color: #4070a0; }
151
- .highlight .sb {
152
- color: #c30; }
153
- .highlight .sc {
154
- color: #c30; }
155
- .highlight .sd {
156
- font-style: italic;
157
- color: #c30; }
158
- .highlight .se {
159
- color: #c30; }
160
- .highlight .sh {
161
- color: #c30; }
162
- .highlight .si {
163
- color: #a00; }
164
- .highlight .sr {
165
- color: #337e7e; }
166
- .highlight .ss {
167
- color: #fc3; }
168
- .highlight .sx {
169
- color: #c30; }
170
- .highlight .w {
171
- color: #bbb; }
172
- .highlight .language-bash::before, .highlight .language-sh::before {
173
- color: #009;
174
- content: "$ ";
175
- -webkit-user-select: none;
176
- -moz-user-select: none;
177
- -ms-user-select: none;
178
- user-select: none; }
179
- .highlight .language-bash .m, .highlight .language-sh .m {
180
- color: inherit; }
181
- .highlight .language-powershell::before {
182
- color: #009;
183
- content: "PM> ";
184
- -webkit-user-select: none;
185
- -moz-user-select: none;
186
- -ms-user-select: none;
187
- user-select: none; }
49
+ margin: 0;
50
+ }
51
+ .highlight code > * {
52
+ margin: 0 !important;
53
+ padding: 0 !important;
54
+ }
55
+ .highlight .dl {
56
+ color: #4070a0;
57
+ }
58
+ .highlight .c {
59
+ color: #727272;
60
+ }
61
+ .highlight .c1 {
62
+ color: #727272;
63
+ }
64
+ .highlight .ch {
65
+ font-style: italic;
66
+ color: #60a0b0;
67
+ }
68
+ .highlight .cm {
69
+ color: #727272;
70
+ }
71
+ .highlight .cp {
72
+ color: #008085;
73
+ }
74
+ .highlight .cpf {
75
+ color: #007020;
76
+ }
77
+ .highlight .cs {
78
+ color: #727272;
79
+ }
80
+ .highlight .gd {
81
+ background-color: #fcc;
82
+ border: 1px solid #c00;
83
+ }
84
+ .highlight .ge {
85
+ font-style: italic;
86
+ }
87
+ .highlight .gh {
88
+ color: #030;
89
+ }
90
+ .highlight .gi {
91
+ background-color: #cfc;
92
+ border: 1px solid #0c0;
93
+ }
94
+ .highlight .gl {
95
+ text-decoration: underline;
96
+ }
97
+ .highlight .go {
98
+ color: #aaa;
99
+ }
100
+ .highlight .gp {
101
+ color: #009;
102
+ }
103
+ .highlight .gr {
104
+ color: #f00;
105
+ }
106
+ .highlight .gs {
107
+ font-weight: 700;
108
+ }
109
+ .highlight .gt {
110
+ color: #9c6;
111
+ }
112
+ .highlight .gu {
113
+ color: #030;
114
+ }
115
+ .highlight .il {
116
+ color: #c24f19;
117
+ }
118
+ .highlight .k {
119
+ color: #069;
120
+ }
121
+ .highlight .kc {
122
+ color: #069;
123
+ }
124
+ .highlight .kd {
125
+ color: #069;
126
+ }
127
+ .highlight .kn {
128
+ color: #069;
129
+ }
130
+ .highlight .kp {
131
+ color: #069;
132
+ }
133
+ .highlight .kr {
134
+ color: #069;
135
+ }
136
+ .highlight .kt {
137
+ color: #078;
138
+ }
139
+ .highlight .m {
140
+ color: #c24f19;
141
+ }
142
+ .highlight .mf {
143
+ color: #c24f19;
144
+ }
145
+ .highlight .mb {
146
+ color: #40a070;
147
+ }
148
+ .highlight .mh {
149
+ color: #c24f19;
150
+ }
151
+ .highlight .mi {
152
+ color: #c24f19;
153
+ }
154
+ .highlight .mo {
155
+ color: #c24f19;
156
+ }
157
+ .highlight .na {
158
+ color: #006ee0;
159
+ }
160
+ .highlight .nb {
161
+ color: #366;
162
+ }
163
+ .highlight .nc {
164
+ color: #168174;
165
+ }
166
+ .highlight .nd {
167
+ color: #6b62de;
168
+ }
169
+ .highlight .ne {
170
+ color: #c00;
171
+ }
172
+ .highlight .nf {
173
+ color: #b715f4;
174
+ }
175
+ .highlight .ni {
176
+ color: #727272;
177
+ }
178
+ .highlight .nl {
179
+ color: #6b62de;
180
+ }
181
+ .highlight .nn {
182
+ color: #007ca5;
183
+ }
184
+ .highlight .no {
185
+ color: #360;
186
+ }
187
+ .highlight .nt {
188
+ color: #2f6f9f;
189
+ }
190
+ .highlight .nv {
191
+ color: #033;
192
+ }
193
+ .highlight .o {
194
+ color: #555;
195
+ }
196
+ .highlight .ow {
197
+ color: #000;
198
+ }
199
+ .highlight .s {
200
+ color: #d73038;
201
+ }
202
+ .highlight .s1 {
203
+ color: #c30;
204
+ }
205
+ .highlight .s2 {
206
+ color: #c30;
207
+ }
208
+ .highlight .sa {
209
+ color: #4070a0;
210
+ }
211
+ .highlight .sb {
212
+ color: #c30;
213
+ }
214
+ .highlight .sc {
215
+ color: #c30;
216
+ }
217
+ .highlight .sd {
218
+ font-style: italic;
219
+ color: #c30;
220
+ }
221
+ .highlight .se {
222
+ color: #c30;
223
+ }
224
+ .highlight .sh {
225
+ color: #c30;
226
+ }
227
+ .highlight .si {
228
+ color: #a00;
229
+ }
230
+ .highlight .sr {
231
+ color: #337e7e;
232
+ }
233
+ .highlight .ss {
234
+ color: #fc3;
235
+ }
236
+ .highlight .sx {
237
+ color: #c30;
238
+ }
239
+ .highlight .w {
240
+ color: #bbb;
241
+ }
242
+ .highlight .language-bash::before, .highlight .language-sh::before {
243
+ color: #009;
244
+ content: "$ ";
245
+ -webkit-user-select: none;
246
+ -moz-user-select: none;
247
+ -ms-user-select: none;
248
+ user-select: none;
249
+ }
250
+ .highlight .language-bash .m, .highlight .language-sh .m {
251
+ color: inherit;
252
+ }
253
+ .highlight .language-powershell::before {
254
+ color: #009;
255
+ content: "PM> ";
256
+ -webkit-user-select: none;
257
+ -moz-user-select: none;
258
+ -ms-user-select: none;
259
+ user-select: none;
260
+ }
188
261
 
189
262
  .example {
190
263
  padding: 2rem;
@@ -195,46 +268,59 @@ pre.highlight,
195
268
  min-height: 12rem;
196
269
  display: flex;
197
270
  align-items: center;
198
- overflow-x: auto; }
271
+ overflow-x: auto;
272
+ }
199
273
 
200
274
  .example-centered {
201
- justify-content: center; }
202
- .example-centered .example-content {
203
- flex: 0 auto; }
275
+ justify-content: center;
276
+ }
277
+ .example-centered .example-content {
278
+ flex: 0 auto;
279
+ }
204
280
 
205
281
  .example-content {
206
282
  font-size: 0.875rem;
207
- line-height: 1.4285714;
283
+ line-height: 1.4285714286;
208
284
  color: #1e293b;
209
285
  flex: 1;
210
- max-width: 100%; }
211
- .example-content .page-header {
212
- margin-bottom: 0; }
286
+ max-width: 100%;
287
+ }
288
+ .example-content .page-header {
289
+ margin-bottom: 0;
290
+ }
213
291
 
214
292
  .example-bg {
215
- background: #f8fafc; }
293
+ background: #f5f7fb;
294
+ }
216
295
 
217
296
  .example-code {
218
297
  margin: 2rem 0;
219
298
  border: 1px solid #e6e7e9;
220
- border-top: none; }
221
- .example-code pre {
222
- margin: 0;
223
- border: 0;
224
- border-radius: 0 0 3px 3px; }
225
- .example + .example-code {
226
- margin-top: -2rem; }
299
+ border-top: none;
300
+ }
301
+ .example-code pre {
302
+ margin: 0;
303
+ border: 0;
304
+ border-radius: 0 0 3px 3px;
305
+ }
306
+ .example + .example-code {
307
+ margin-top: -2rem;
308
+ }
227
309
 
228
310
  .example-column {
229
- margin: 0 auto; }
230
- .example-column > .card:last-of-type {
231
- margin-bottom: 0; }
311
+ margin: 0 auto;
312
+ }
313
+ .example-column > .card:last-of-type {
314
+ margin-bottom: 0;
315
+ }
232
316
 
233
317
  .example-column-1 {
234
- max-width: 26rem; }
318
+ max-width: 26rem;
319
+ }
235
320
 
236
321
  .example-column-2 {
237
- max-width: 52rem; }
322
+ max-width: 52rem;
323
+ }
238
324
 
239
325
  .example-modal-backdrop {
240
326
  background: #1e293b;
@@ -244,95 +330,129 @@ pre.highlight,
244
330
  left: 0;
245
331
  top: 0;
246
332
  height: 100%;
247
- border-radius: 2px 2px 0 0; }
333
+ border-radius: 2px 2px 0 0;
334
+ }
248
335
 
249
336
  @media not print {
250
337
  .theme-dark .example {
251
338
  background-color: #1b2434;
252
- border-color: #2c3c56; }
339
+ border-color: #2c3c56;
340
+ }
253
341
  .theme-dark .example-content {
254
- color: #f8fafc; }
342
+ color: #fafbfc;
343
+ }
255
344
  .theme-dark .example-code {
256
345
  border-color: #2c3c56;
257
- border-top: none; } }
258
-
346
+ border-top: none;
347
+ }
348
+ }
349
+ @media not print {
350
+ @media (prefers-color-scheme: dark) {
351
+ .theme-dark-auto .example {
352
+ background-color: #1b2434;
353
+ border-color: #2c3c56;
354
+ }
355
+ .theme-dark-auto .example-content {
356
+ color: #fafbfc;
357
+ }
358
+ .theme-dark-auto .example-code {
359
+ border-color: #2c3c56;
360
+ border-top: none;
361
+ }
362
+ }
363
+ }
259
364
  .card-sponsor {
260
365
  background: #dbe7f6 no-repeat center/100% 100%;
261
366
  border-color: #548ed2;
262
- min-height: 316px; }
367
+ min-height: 316px;
368
+ }
263
369
 
264
370
  body.no-transitions * {
265
- transition: none !important; }
371
+ transition: none !important;
372
+ }
266
373
 
267
374
  .dropdown-menu-demo {
268
375
  display: inline-block;
269
376
  width: 100%;
270
377
  position: relative;
271
378
  top: 0;
272
- margin-bottom: 1rem; }
379
+ margin-bottom: 1rem;
380
+ }
273
381
 
274
382
  .demo-icon-preview {
275
383
  position: -webkit-sticky;
276
384
  position: sticky;
277
- top: 0; }
385
+ top: 0;
386
+ }
387
+ .demo-icon-preview svg,
388
+ .demo-icon-preview i {
389
+ width: 15rem;
390
+ height: 15rem;
391
+ font-size: 15rem;
392
+ stroke-width: 1.5;
393
+ margin: 0 auto;
394
+ display: block;
395
+ }
396
+ @media (max-width: 575.98px) {
278
397
  .demo-icon-preview svg,
279
- .demo-icon-preview i {
280
- width: 15rem;
281
- height: 15rem;
282
- font-size: 15rem;
283
- stroke-width: 1.5;
284
- margin: 0 auto;
285
- display: block; }
286
- @media (max-width: 575.98px) {
287
- .demo-icon-preview svg,
288
- .demo-icon-preview i {
289
- width: 10rem;
290
- height: 10rem;
291
- font-size: 10rem; } }
398
+ .demo-icon-preview i {
399
+ width: 10rem;
400
+ height: 10rem;
401
+ font-size: 10rem;
402
+ }
403
+ }
292
404
 
293
405
  .demo-icon-preview-icon pre {
294
406
  margin: 0;
295
407
  -webkit-user-select: all;
296
408
  -moz-user-select: all;
297
- user-select: all; }
409
+ user-select: all;
410
+ }
298
411
 
299
412
  .demo-dividers > p {
300
- opacity: .2;
413
+ opacity: 0.2;
301
414
  -webkit-user-select: none;
302
415
  -moz-user-select: none;
303
416
  -ms-user-select: none;
304
- user-select: none; }
417
+ user-select: none;
418
+ }
305
419
 
306
420
  .demo-icons-list {
307
421
  display: flex;
308
422
  flex-wrap: wrap;
309
423
  padding: 0;
310
424
  margin: 0 -2px -1px 0;
311
- list-style: none; }
312
- .demo-icons-list > * {
313
- flex: 1 0 7rem; }
425
+ list-style: none;
426
+ }
427
+ .demo-icons-list > * {
428
+ flex: 1 0 4rem;
429
+ }
314
430
 
315
431
  .demo-icons-list-wrap {
316
- overflow: hidden; }
432
+ overflow: hidden;
433
+ }
317
434
 
318
435
  .demo-icons-list-item {
319
436
  display: flex;
320
437
  flex-direction: column;
321
438
  align-items: center;
322
439
  justify-content: center;
323
- height: 7rem;
440
+ aspect-ratio: 1;
324
441
  text-align: center;
325
- padding: .5rem;
442
+ padding: 0.5rem;
326
443
  border-right: 1px solid var(--tblr-border-color);
327
444
  border-bottom: 1px solid var(--tblr-border-color);
328
445
  color: inherit;
329
- cursor: pointer; }
330
- .demo-icons-list-item .icon {
331
- width: 1.5rem;
332
- height: 1.5rem;
333
- font-size: 1.5rem; }
334
- .demo-icons-list-item:hover {
335
- text-decoration: none; }
446
+ cursor: pointer;
447
+ }
448
+ .demo-icons-list-item .icon {
449
+ width: 1.5rem;
450
+ height: 1.5rem;
451
+ font-size: 1.5rem;
452
+ }
453
+ .demo-icons-list-item:hover {
454
+ text-decoration: none;
455
+ }
336
456
 
337
457
  .settings-btn {
338
458
  position: fixed;
@@ -340,7 +460,8 @@ body.no-transitions * {
340
460
  top: 10rem;
341
461
  border-top-right-radius: 0;
342
462
  border-bottom-right-radius: 0;
343
- box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
463
+ box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
464
+ }
344
465
 
345
466
  .settings-scheme {
346
467
  display: inline-block;
@@ -349,14 +470,20 @@ body.no-transitions * {
349
470
  width: 3rem;
350
471
  position: relative;
351
472
  border: 1px solid var(--tblr-border-color);
352
- box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
353
- .settings-scheme-light {
354
- background: linear-gradient(135deg, #ffffff 50%, #f8fafc 50%); }
355
- .settings-scheme-mixed {
356
- background-image: linear-gradient(135deg, #1e293b 50%, #fff 50%); }
357
- .settings-scheme-transparent {
358
- background: #f8fafc; }
359
- .settings-scheme-dark {
360
- background: #1e293b; }
361
- .settings-scheme-colored {
362
- background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #f8fafc 50%); }
473
+ box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
474
+ }
475
+ .settings-scheme-light {
476
+ background: linear-gradient(135deg, #ffffff 50%, #fafbfc 50%);
477
+ }
478
+ .settings-scheme-mixed {
479
+ background-image: linear-gradient(135deg, #1e293b 50%, #fff 50%);
480
+ }
481
+ .settings-scheme-transparent {
482
+ background: #fafbfc;
483
+ }
484
+ .settings-scheme-dark {
485
+ background: #1e293b;
486
+ }
487
+ .settings-scheme-colored {
488
+ background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #fafbfc 50%);
489
+ }