@clayui/css 3.104.0 → 3.105.1-alpha.0

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 (56) hide show
  1. package/lib/css/atlas.css +490 -120
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +457 -47
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css +0 -0
  6. package/lib/css/bootstrap.css.map +1 -1
  7. package/lib/css/cadmin.css +451 -80
  8. package/lib/css/cadmin.css.map +1 -1
  9. package/lib/images/icons/bookmarks-full.svg +9 -0
  10. package/lib/images/icons/bookmarks.svg +1 -2
  11. package/lib/images/icons/download.svg +2 -2
  12. package/lib/images/icons/icons.svg +1 -1
  13. package/lib/images/icons/import-list.svg +2 -3
  14. package/lib/images/icons/import.svg +1 -2
  15. package/lib/images/icons/key.svg +9 -0
  16. package/lib/images/icons/upload-multiple.svg +2 -3
  17. package/lib/images/icons/upload.svg +1 -2
  18. package/package.json +2 -2
  19. package/src/images/icons/bookmarks-full.svg +9 -0
  20. package/src/images/icons/bookmarks.svg +1 -2
  21. package/src/images/icons/download.svg +2 -2
  22. package/src/images/icons/import-list.svg +2 -3
  23. package/src/images/icons/import.svg +1 -2
  24. package/src/images/icons/key.svg +9 -0
  25. package/src/images/icons/upload-multiple.svg +2 -3
  26. package/src/images/icons/upload.svg +1 -2
  27. package/src/scss/_license-text.scss +1 -1
  28. package/src/scss/atlas/variables/_dropdowns.scss +1 -1
  29. package/src/scss/atlas/variables/_range.scss +13 -11
  30. package/src/scss/cadmin/components/_clay-color.scss +42 -0
  31. package/src/scss/cadmin/components/_custom-forms.scss +1 -2
  32. package/src/scss/cadmin/components/_input-groups.scss +4 -0
  33. package/src/scss/cadmin/components/_tables.scss +14 -0
  34. package/src/scss/cadmin/variables/_clay-color.scss +157 -1
  35. package/src/scss/cadmin/variables/_custom-forms.scss +25 -2
  36. package/src/scss/cadmin/variables/_dropdowns.scss +1 -1
  37. package/src/scss/cadmin/variables/_forms.scss +23 -0
  38. package/src/scss/cadmin/variables/_globals.scss +6 -0
  39. package/src/scss/cadmin/variables/_tables.scss +45 -0
  40. package/src/scss/components/_clay-color.scss +42 -0
  41. package/src/scss/components/_custom-forms.scss +1 -2
  42. package/src/scss/components/_input-groups.scss +4 -0
  43. package/src/scss/components/_range.scss +2 -2
  44. package/src/scss/components/_tables.scss +14 -0
  45. package/src/scss/functions/_lx-icons-generated.scss +10 -6
  46. package/src/scss/mixins/_forms.scss +224 -5
  47. package/src/scss/mixins/_input-groups.scss +5 -1
  48. package/src/scss/mixins/_links.scss +1 -1
  49. package/src/scss/mixins/_tables.scss +27 -3
  50. package/src/scss/variables/_clay-color.scss +157 -1
  51. package/src/scss/variables/_custom-forms.scss +24 -1
  52. package/src/scss/variables/_dropdowns.scss +6 -0
  53. package/src/scss/variables/_forms.scss +31 -0
  54. package/src/scss/variables/_globals.scss +6 -0
  55. package/src/scss/variables/_range.scss +33 -1
  56. package/src/scss/variables/_tables.scss +45 -0
package/lib/css/base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.104.0
3
+ * Clay 3.105.1-alpha.0
4
4
  *
5
5
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
6
6
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -122,14 +122,29 @@ sup {
122
122
  }
123
123
 
124
124
  a {
125
+ border-radius: 1px;
125
126
  color: #007bff;
126
127
  text-decoration: none;
127
128
  text-underline-offset: 0.23em;
129
+ 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;
130
+ }
131
+ @media (prefers-reduced-motion: reduce) {
132
+ a {
133
+ transition: none;
134
+ }
135
+ }
136
+ .c-prefers-reduced-motion a {
137
+ transition: none;
128
138
  }
139
+
129
140
  a:hover, a.hover {
130
141
  color: #0056b3;
131
142
  text-decoration: underline;
132
143
  }
144
+ a.focus, a:focus-visible, .c-prefers-focus a:focus {
145
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
146
+ outline: 0;
147
+ }
133
148
  pre,
134
149
  code,
135
150
  kbd,
@@ -5271,12 +5286,12 @@ input[type=button].btn-block {
5271
5286
  margin-top: 0;
5272
5287
  }
5273
5288
  .card-subtitle[href],
5274
- .card-subtitle [href] {
5289
+ .card-subtitle a[href] {
5275
5290
  color: #6c757d;
5276
5291
  }
5277
5292
  .card-subtitle[href]:hover, .card-subtitle[href].hover,
5278
- .card-subtitle [href]:hover,
5279
- .card-subtitle [href].hover {
5293
+ .card-subtitle a[href]:hover,
5294
+ .card-subtitle a[href].hover {
5280
5295
  color: #494f54;
5281
5296
  }
5282
5297
  .card-text:last-child {
@@ -6408,6 +6423,9 @@ input[type=button].btn-block {
6408
6423
  .dropdown-section .custom-control {
6409
6424
  margin-bottom: 0;
6410
6425
  }
6426
+ .dropdown-section .custom-control-label-text {
6427
+ padding-left: 2rem;
6428
+ }
6411
6429
  .dropdown-footer {
6412
6430
  box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5);
6413
6431
  padding: 0.5rem 1.5rem 0;
@@ -7317,6 +7335,12 @@ fieldset[disabled] label .form-control {
7317
7335
  color: #495057;
7318
7336
  outline: 0;
7319
7337
  }
7338
+ .form-control:focus-within:has(input:focus) {
7339
+ background-color: #fff;
7340
+ border-color: #80bdff;
7341
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
7342
+ color: #495057;
7343
+ }
7320
7344
  .form-control:disabled, .form-control.disabled {
7321
7345
  background-color: #e9ecef;
7322
7346
  cursor: not-allowed;
@@ -8138,12 +8162,12 @@ button.link-outline {
8138
8162
  margin-top: calc(( 1.9375rem - (1em * 1.2) ) / 2);
8139
8163
  }
8140
8164
  .component-title[href],
8141
- .component-title [href] {
8165
+ .component-title a[href] {
8142
8166
  color: #212529;
8143
8167
  }
8144
8168
  .component-title[href]:hover, .component-title[href].hover,
8145
- .component-title [href]:hover,
8146
- .component-title [href].hover {
8169
+ .component-title a[href]:hover,
8170
+ .component-title a[href].hover {
8147
8171
  color: black;
8148
8172
  }
8149
8173
  .component-subtitle {
@@ -8151,12 +8175,12 @@ button.link-outline {
8151
8175
  margin-bottom: 0;
8152
8176
  }
8153
8177
  .component-subtitle[href],
8154
- .component-subtitle [href] {
8178
+ .component-subtitle a[href] {
8155
8179
  color: #6c757d;
8156
8180
  }
8157
8181
  .component-subtitle[href]:hover, .component-subtitle[href].hover,
8158
- .component-subtitle [href]:hover,
8159
- .component-subtitle [href].hover {
8182
+ .component-subtitle a[href]:hover,
8183
+ .component-subtitle a[href].hover {
8160
8184
  color: #494f54;
8161
8185
  }
8162
8186
  .component-action {
@@ -8257,10 +8281,59 @@ button.link-outline {
8257
8281
  color: #6c757d;
8258
8282
  }
8259
8283
 
8260
- .clay-range-progress-none .clay-range-progress {
8284
+ .clay-range-progress-none .clay-range-input .clay-range-progress {
8261
8285
  visibility: hidden;
8262
8286
  }
8263
-
8287
+ .clay-range-progress-none .clay-range-input .clay-range-thumb {
8288
+ visibility: hidden;
8289
+ }
8290
+ .clay-range-progress-none .clay-range-input .form-control-range {
8291
+ content: "";
8292
+ }
8293
+ .clay-range-progress-none .clay-range-input .form-control-range::-moz-range-thumb {
8294
+ visibility: visible;
8295
+ }
8296
+ .clay-range-progress-none .clay-range-input .form-control-range::-moz-range-track {
8297
+ -moz-appearance: none;
8298
+ appearance: none;
8299
+ height: 100%;
8300
+ }
8301
+ .clay-range-progress-none .clay-range-input .form-control-range::-ms-fill-lower {
8302
+ background-color: transparent;
8303
+ }
8304
+ .clay-range-progress-none .clay-range-input .form-control-range::-ms-fill-upper {
8305
+ background-color: transparent;
8306
+ }
8307
+ .clay-range-progress-none .clay-range-input .form-control-range::-ms-thumb {
8308
+ visibility: visible;
8309
+ }
8310
+ .clay-range-progress-none .clay-range-input .form-control-range::-ms-tooltip {
8311
+ display: none;
8312
+ }
8313
+ .clay-range-progress-none .clay-range-input .form-control-range::-ms-track {
8314
+ background-color: transparent;
8315
+ border-color: transparent;
8316
+ border-style: solid;
8317
+ border-width: 0;
8318
+ color: transparent;
8319
+ height: 100%;
8320
+ }
8321
+ .clay-range-progress-none .clay-range-input .form-control-range::-webkit-slider-runnable-track {
8322
+ -webkit-appearance: none;
8323
+ appearance: none;
8324
+ height: 100%;
8325
+ }
8326
+ .clay-range-progress-none .clay-range-input .form-control-range::-webkit-slider-thumb {
8327
+ visibility: visible;
8328
+ }
8329
+ .clay-range-progress-none .clay-range-input .form-control-range:hover ~ .clay-range-progress .tooltip {
8330
+ visibility: visible;
8331
+ opacity: 1;
8332
+ }
8333
+ .clay-range-progress-none .clay-range-input .form-control-range.focus ~ .clay-range-progress .tooltip, .clay-range-progress-none .clay-range-input .form-control-range:focus-visible ~ .clay-range-progress .tooltip, .c-prefers-focus .clay-range-progress-none .clay-range-input .form-control-range:focus ~ .clay-range-progress .tooltip {
8334
+ visibility: visible;
8335
+ opacity: 1;
8336
+ }
8264
8337
  .clay-range-title {
8265
8338
  display: block;
8266
8339
  font-weight: 500;
@@ -8349,7 +8422,6 @@ button.link-outline {
8349
8422
  position: absolute;
8350
8423
  right: -0.75rem;
8351
8424
  top: 50%;
8352
- visibility: hidden;
8353
8425
  width: 1.5rem;
8354
8426
  }
8355
8427
  .clay-range-input .form-control-range {
@@ -8371,6 +8443,7 @@ button.link-outline {
8371
8443
  border-width: 0;
8372
8444
  }
8373
8445
  .clay-range-input .form-control-range::-moz-range-thumb {
8446
+ visibility: hidden;
8374
8447
  -moz-appearance: none;
8375
8448
  -webkit-appearance: none;
8376
8449
  appearance: none;
@@ -8399,6 +8472,7 @@ button.link-outline {
8399
8472
  background-color: transparent;
8400
8473
  }
8401
8474
  .clay-range-input .form-control-range::-ms-thumb {
8475
+ visibility: hidden;
8402
8476
  -moz-appearance: none;
8403
8477
  -webkit-appearance: none;
8404
8478
  appearance: none;
@@ -8423,6 +8497,7 @@ button.link-outline {
8423
8497
  height: 100%;
8424
8498
  }
8425
8499
  .clay-range-input .form-control-range::-webkit-slider-thumb {
8500
+ visibility: hidden;
8426
8501
  -moz-appearance: none;
8427
8502
  -webkit-appearance: none;
8428
8503
  appearance: none;
@@ -8449,10 +8524,23 @@ button.link-outline {
8449
8524
  .clay-range-input .form-control-range.focus, .clay-range-input .form-control-range:focus-visible, .c-prefers-focus .clay-range-input .form-control-range:focus {
8450
8525
  outline: 0;
8451
8526
  }
8527
+ .clay-range-input .form-control-range.focus ~ .clay-range-progress .clay-range-thumb, .clay-range-input .form-control-range:focus-visible ~ .clay-range-progress .clay-range-thumb, .c-prefers-focus .clay-range-input .form-control-range:focus ~ .clay-range-progress .clay-range-thumb {
8528
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8529
+ }
8452
8530
  .clay-range-input .form-control-range.focus ~ .clay-range-progress .tooltip, .clay-range-input .form-control-range:focus-visible ~ .clay-range-progress .tooltip, .c-prefers-focus .clay-range-input .form-control-range:focus ~ .clay-range-progress .tooltip {
8453
8531
  visibility: visible;
8454
8532
  opacity: 1;
8455
8533
  }
8534
+ .clay-range-input .form-control-range.focus::-moz-range-thumb, .clay-range-input .form-control-range:focus-visible::-moz-range-thumb, .c-prefers-focus .clay-range-input .form-control-range:focus::-moz-range-thumb {
8535
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8536
+ }
8537
+ .clay-range-input .form-control-range.focus::-ms-thumb, .clay-range-input .form-control-range:focus-visible::-ms-thumb, .c-prefers-focus .clay-range-input .form-control-range:focus::-ms-thumb {
8538
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8539
+ }
8540
+ .clay-range-input .form-control-range.focus::-webkit-slider-thumb, .clay-range-input .form-control-range:focus-visible::-webkit-slider-thumb, .c-prefers-focus .clay-range-input .form-control-range:focus::-webkit-slider-thumb {
8541
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8542
+ }
8543
+
8456
8544
  .clay-range-input .form-control-range:disabled {
8457
8545
  color: #6c757d;
8458
8546
  cursor: not-allowed;
@@ -8556,7 +8644,7 @@ button.link-outline {
8556
8644
  }
8557
8645
 
8558
8646
  .clay-color-dropdown-menu {
8559
- max-height: 400px;
8647
+ max-height: 500px;
8560
8648
  max-width: none;
8561
8649
  padding-bottom: 0;
8562
8650
  padding-left: 1rem;
@@ -8753,6 +8841,237 @@ button.link-outline {
8753
8841
  margin-top: -7px;
8754
8842
  top: 50%;
8755
8843
  }
8844
+ .clay-color-slider .clay-range-input {
8845
+ border-radius: 100px;
8846
+ }
8847
+ .clay-color-slider .clay-range-input .clay-range-track {
8848
+ border-radius: inherit;
8849
+ height: 0.5rem;
8850
+ margin-top: -0.25rem;
8851
+ }
8852
+ .clay-color-slider .clay-range-input .clay-range-progress {
8853
+ background-color: transparent;
8854
+ border-radius: inherit;
8855
+ height: 0.5rem;
8856
+ margin-top: -0.25rem;
8857
+ width: 100%;
8858
+ }
8859
+ .clay-color-slider .clay-range-input .clay-range-thumb {
8860
+ background-color: currentColor;
8861
+ border-width: 0;
8862
+ box-shadow: 0 0 0 0.125rem #fff;
8863
+ height: 0.625rem;
8864
+ margin-top: -0.3125rem;
8865
+ transition: box-shadow 0.15s ease-in-out;
8866
+ visibility: hidden;
8867
+ width: 0.625rem;
8868
+ }
8869
+ @media (prefers-reduced-motion: reduce) {
8870
+ .clay-color-slider .clay-range-input .clay-range-thumb {
8871
+ transition: none;
8872
+ }
8873
+ }
8874
+ .c-prefers-reduced-motion .clay-color-slider .clay-range-input .clay-range-thumb {
8875
+ transition: none;
8876
+ }
8877
+
8878
+ .clay-color-slider .clay-range-input .form-control-range {
8879
+ background-color: inherit;
8880
+ border-radius: inherit;
8881
+ color: inherit;
8882
+ height: 0.5rem;
8883
+ content: "0.625rem";
8884
+ }
8885
+ .clay-color-slider .clay-range-input .form-control-range::-moz-range-thumb {
8886
+ height: 0.625rem;
8887
+ visibility: visible;
8888
+ width: 0.625rem;
8889
+ background-color: currentColor;
8890
+ border-width: 0;
8891
+ box-shadow: 0 0 0 0.125rem #fff;
8892
+ margin-top: -0.3125rem;
8893
+ }
8894
+ .clay-color-slider .clay-range-input .form-control-range::-moz-range-track {
8895
+ -moz-appearance: none;
8896
+ appearance: none;
8897
+ height: 100%;
8898
+ }
8899
+ .clay-color-slider .clay-range-input .form-control-range::-ms-fill-lower {
8900
+ background-color: transparent;
8901
+ }
8902
+ .clay-color-slider .clay-range-input .form-control-range::-ms-fill-upper {
8903
+ background-color: transparent;
8904
+ }
8905
+ .clay-color-slider .clay-range-input .form-control-range::-ms-thumb {
8906
+ visibility: visible;
8907
+ }
8908
+ .clay-color-slider .clay-range-input .form-control-range::-ms-tooltip {
8909
+ display: none;
8910
+ }
8911
+ .clay-color-slider .clay-range-input .form-control-range::-ms-track {
8912
+ background-color: transparent;
8913
+ border-color: transparent;
8914
+ border-style: solid;
8915
+ border-width: 0;
8916
+ color: transparent;
8917
+ height: 100%;
8918
+ }
8919
+ .clay-color-slider .clay-range-input .form-control-range::-webkit-slider-runnable-track {
8920
+ -webkit-appearance: none;
8921
+ -moz-appearance: none;
8922
+ -webkit-appearance: none;
8923
+ appearance: none;
8924
+ }
8925
+ .clay-color-slider .clay-range-input .form-control-range::-webkit-slider-runnable-track::-ms-expand {
8926
+ display: none;
8927
+ }
8928
+ .clay-color-slider .clay-range-input .form-control-range::-webkit-slider-thumb {
8929
+ visibility: visible;
8930
+ background-color: currentColor;
8931
+ border-width: 0;
8932
+ box-shadow: 0 0 0 0.125rem #fff;
8933
+ height: 0.625rem;
8934
+ margin-top: -0.3125rem;
8935
+ width: 0.625rem;
8936
+ }
8937
+ .clay-color-slider .clay-range-input .form-control-range:hover ~ .clay-range-progress .tooltip {
8938
+ visibility: visible;
8939
+ opacity: 1;
8940
+ }
8941
+ .clay-color-slider .clay-range-input .form-control-range.focus ~ .clay-range-progress .clay-range-thumb, .clay-color-slider .clay-range-input .form-control-range:focus-visible ~ .clay-range-progress .clay-range-thumb, .c-prefers-focus .clay-color-slider .clay-range-input .form-control-range:focus ~ .clay-range-progress .clay-range-thumb {
8942
+ box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #75b8ff;
8943
+ }
8944
+ .clay-color-slider .clay-range-input .form-control-range.focus ~ .clay-range-progress .tooltip, .clay-color-slider .clay-range-input .form-control-range:focus-visible ~ .clay-range-progress .tooltip, .c-prefers-focus .clay-color-slider .clay-range-input .form-control-range:focus ~ .clay-range-progress .tooltip {
8945
+ visibility: visible;
8946
+ opacity: 1;
8947
+ }
8948
+ .clay-color-slider .clay-range-input .form-control-range.focus::-moz-range-thumb, .clay-color-slider .clay-range-input .form-control-range:focus-visible::-moz-range-thumb, .c-prefers-focus .clay-color-slider .clay-range-input .form-control-range:focus::-moz-range-thumb {
8949
+ box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #75b8ff;
8950
+ }
8951
+ .clay-color-slider .clay-range-input .form-control-range.focus::-ms-thumb, .clay-color-slider .clay-range-input .form-control-range:focus-visible::-ms-thumb, .c-prefers-focus .clay-color-slider .clay-range-input .form-control-range:focus::-ms-thumb {
8952
+ box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #75b8ff;
8953
+ }
8954
+ .clay-color-slider .clay-range-input .form-control-range.focus::-webkit-slider-thumb, .clay-color-slider .clay-range-input .form-control-range:focus-visible::-webkit-slider-thumb, .c-prefers-focus .clay-color-slider .clay-range-input .form-control-range:focus::-webkit-slider-thumb {
8955
+ box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #75b8ff;
8956
+ }
8957
+
8958
+ .clay-color-slider-hue .clay-range-input {
8959
+ color: #26affd;
8960
+ }
8961
+ .clay-color-slider-hue .clay-range-input .clay-range-track {
8962
+ background-image: linear-gradient(270deg, #fc0d1b 0%, #fc22d6 18.23%, #1824fb 34.25%, #2bf6fd 50.28%, #2bfd2e 67.58%, #fcfd37 81.22%, #fc121b 100%);
8963
+ }
8964
+ .clay-color-slider-hue .clay-range-input .form-control-range {
8965
+ content: "";
8966
+ }
8967
+ .clay-color-slider-hue .clay-range-input .form-control-range::-moz-range-track {
8968
+ -moz-appearance: none;
8969
+ appearance: none;
8970
+ height: 100%;
8971
+ }
8972
+ .clay-color-slider-hue .clay-range-input .form-control-range::-ms-fill-lower {
8973
+ background-color: transparent;
8974
+ }
8975
+ .clay-color-slider-hue .clay-range-input .form-control-range::-ms-fill-upper {
8976
+ background-color: transparent;
8977
+ }
8978
+ .clay-color-slider-hue .clay-range-input .form-control-range::-ms-tooltip {
8979
+ display: none;
8980
+ }
8981
+ .clay-color-slider-hue .clay-range-input .form-control-range::-ms-track {
8982
+ background-color: transparent;
8983
+ border-color: transparent;
8984
+ border-style: solid;
8985
+ border-width: 0;
8986
+ color: transparent;
8987
+ height: 100%;
8988
+ }
8989
+ .clay-color-slider-hue .clay-range-input .form-control-range::-webkit-slider-runnable-track {
8990
+ -webkit-appearance: none;
8991
+ appearance: none;
8992
+ height: 100%;
8993
+ }
8994
+ .clay-color-slider-hue .clay-range-input .form-control-range:hover ~ .clay-range-progress .tooltip {
8995
+ visibility: visible;
8996
+ opacity: 1;
8997
+ }
8998
+ .clay-color-slider-hue .clay-range-input .form-control-range.focus ~ .clay-range-progress .tooltip, .clay-color-slider-hue .clay-range-input .form-control-range:focus-visible ~ .clay-range-progress .tooltip, .c-prefers-focus .clay-color-slider-hue .clay-range-input .form-control-range:focus ~ .clay-range-progress .tooltip {
8999
+ visibility: visible;
9000
+ opacity: 1;
9001
+ }
9002
+ .clay-color-slider-alpha .clay-range-input {
9003
+ color: #000;
9004
+ }
9005
+ .clay-color-slider-alpha .clay-range-input .clay-range-track {
9006
+ background-color: #fff;
9007
+ background-image: linear-gradient(45deg, #e7e7ed 25%, transparent 25%), linear-gradient(-45deg, #e7e7ed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e7ed 75%), linear-gradient(-45deg, transparent 75%, #e7e7ed 75%);
9008
+ background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
9009
+ background-size: 8px 8px;
9010
+ }
9011
+ .clay-color-slider-alpha .clay-range-input .form-control-range {
9012
+ background-image: linear-gradient(90deg, transparent 0%, currentcolor 100%);
9013
+ color: inherit;
9014
+ content: "";
9015
+ }
9016
+ .clay-color-slider-alpha .clay-range-input .form-control-range::-moz-range-track {
9017
+ -moz-appearance: none;
9018
+ appearance: none;
9019
+ height: 100%;
9020
+ }
9021
+ .clay-color-slider-alpha .clay-range-input .form-control-range::-ms-fill-lower {
9022
+ background-color: transparent;
9023
+ }
9024
+ .clay-color-slider-alpha .clay-range-input .form-control-range::-ms-fill-upper {
9025
+ background-color: transparent;
9026
+ }
9027
+ .clay-color-slider-alpha .clay-range-input .form-control-range::-ms-tooltip {
9028
+ display: none;
9029
+ }
9030
+ .clay-color-slider-alpha .clay-range-input .form-control-range::-ms-track {
9031
+ background-color: transparent;
9032
+ border-color: transparent;
9033
+ border-style: solid;
9034
+ border-width: 0;
9035
+ color: transparent;
9036
+ height: 100%;
9037
+ }
9038
+ .clay-color-slider-alpha .clay-range-input .form-control-range::-webkit-slider-runnable-track {
9039
+ -webkit-appearance: none;
9040
+ appearance: none;
9041
+ height: 100%;
9042
+ }
9043
+ .clay-color-slider-alpha .clay-range-input .form-control-range:hover ~ .clay-range-progress .tooltip {
9044
+ visibility: visible;
9045
+ opacity: 1;
9046
+ }
9047
+ .clay-color-slider-alpha .clay-range-input .form-control-range.focus ~ .clay-range-progress .tooltip, .clay-color-slider-alpha .clay-range-input .form-control-range:focus-visible ~ .clay-range-progress .tooltip, .c-prefers-focus .clay-color-slider-alpha .clay-range-input .form-control-range:focus ~ .clay-range-progress .tooltip {
9048
+ visibility: visible;
9049
+ opacity: 1;
9050
+ }
9051
+ .clay-color-form-group {
9052
+ display: flex;
9053
+ align-items: center;
9054
+ margin-top: 0.25rem;
9055
+ margin-bottom: 1rem;
9056
+ }
9057
+ .clay-color-form-group .clay-range {
9058
+ flex-grow: 1;
9059
+ flex-shrink: 0;
9060
+ margin-right: 1rem;
9061
+ width: 144px;
9062
+ }
9063
+ .clay-color-form-group .form-control {
9064
+ padding-left: 0;
9065
+ padding-right: 10%;
9066
+ text-align: right;
9067
+ }
9068
+ .clay-color-form-group .input-group .input-group-inset-item-before {
9069
+ font-weight: 500;
9070
+ padding-left: 10%;
9071
+ padding-right: 0;
9072
+ min-width: 1.125rem;
9073
+ }
9074
+
8756
9075
  .form-group-sm .clay-color.input-group > .input-group-item > .input-group-inset-item-before, .clay-color.input-group-sm > .input-group-item > .input-group-inset-item-before {
8757
9076
  padding-left: 0.5rem;
8758
9077
  }
@@ -8768,10 +9087,26 @@ button.link-outline {
8768
9087
  width: 1.25rem;
8769
9088
  }
8770
9089
  .form-file {
9090
+ border-radius: 0.25rem;
8771
9091
  display: flex;
8772
9092
  position: relative;
9093
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
9094
+ }
9095
+ @media (prefers-reduced-motion: reduce) {
9096
+ .form-file {
9097
+ transition: none;
9098
+ }
9099
+ }
9100
+ .c-prefers-reduced-motion .form-file {
9101
+ transition: none;
8773
9102
  }
8774
9103
 
9104
+ .form-file:focus-within:has(input:focus) {
9105
+ background-color: #fff;
9106
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
9107
+ outline: 0;
9108
+ z-index: 1;
9109
+ }
8775
9110
  .form-file-input {
8776
9111
  cursor: pointer;
8777
9112
  height: 100%;
@@ -8860,7 +9195,8 @@ label.custom-control-label {
8860
9195
  }
8861
9196
 
8862
9197
  .custom-control-label-text {
8863
- padding-left: 0.5rem;
9198
+ display: block;
9199
+ padding-left: calc( 1rem + 0.5rem );
8864
9200
  }
8865
9201
  .custom-control-primary .custom-control-label-text {
8866
9202
  font-weight: 500;
@@ -10350,6 +10686,33 @@ label.custom-control-label {
10350
10686
  flex-grow: 0;
10351
10687
  width: auto;
10352
10688
  }
10689
+ .input-group-item-focusable {
10690
+ border-radius: 0.25rem;
10691
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
10692
+ }
10693
+ @media (prefers-reduced-motion: reduce) {
10694
+ .input-group-item-focusable {
10695
+ transition: none;
10696
+ }
10697
+ }
10698
+ .c-prefers-reduced-motion .input-group-item-focusable {
10699
+ transition: none;
10700
+ }
10701
+
10702
+ .input-group-item-focusable:focus-within:has(input:focus) {
10703
+ background-color: #fff;
10704
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
10705
+ outline: 0;
10706
+ z-index: 1;
10707
+ }
10708
+ .input-group-item-focusable:focus-within:has(input:focus).input-group-prepend {
10709
+ border-top-right-radius: 0;
10710
+ border-bottom-right-radius: 0;
10711
+ }
10712
+ .input-group-item-focusable:focus-within:has(input:focus).input-group-append {
10713
+ border-top-left-radius: 0;
10714
+ border-bottom-left-radius: 0;
10715
+ }
10353
10716
  .input-group-text {
10354
10717
  align-items: center;
10355
10718
  background-color: #e9ecef;
@@ -10969,13 +11332,13 @@ label.custom-control-label {
10969
11332
  margin-top: -0.25rem;
10970
11333
  }
10971
11334
  .list-group-title[href],
10972
- .list-group-title [href] {
11335
+ .list-group-title a[href] {
10973
11336
  color: #212529;
10974
11337
  max-width: 100%;
10975
11338
  }
10976
11339
  .list-group-title[href]:hover, .list-group-title[href].hover,
10977
- .list-group-title [href]:hover,
10978
- .list-group-title [href].hover {
11340
+ .list-group-title a[href]:hover,
11341
+ .list-group-title a[href].hover {
10979
11342
  color: black;
10980
11343
  }
10981
11344
  .list-group-subtitle {
@@ -10983,12 +11346,12 @@ label.custom-control-label {
10983
11346
  margin-bottom: 0;
10984
11347
  }
10985
11348
  .list-group-subtitle[href],
10986
- .list-group-subtitle [href] {
11349
+ .list-group-subtitle a[href] {
10987
11350
  color: #6c757d;
10988
11351
  }
10989
11352
  .list-group-subtitle[href]:hover, .list-group-subtitle[href].hover,
10990
- .list-group-subtitle [href]:hover,
10991
- .list-group-subtitle [href].hover {
11353
+ .list-group-subtitle a[href]:hover,
11354
+ .list-group-subtitle a[href].hover {
10992
11355
  color: #494f54;
10993
11356
  }
10994
11357
  .list-group-text {
@@ -10996,12 +11359,12 @@ label.custom-control-label {
10996
11359
  margin-bottom: 0;
10997
11360
  }
10998
11361
  .list-group-text[href],
10999
- .list-group-text [href] {
11362
+ .list-group-text a[href] {
11000
11363
  color: #212529;
11001
11364
  }
11002
11365
  .list-group-text[href]:hover, .list-group-text[href].hover,
11003
- .list-group-text [href]:hover,
11004
- .list-group-text [href].hover {
11366
+ .list-group-text a[href]:hover,
11367
+ .list-group-text a[href].hover {
11005
11368
  color: black;
11006
11369
  }
11007
11370
  .list-group-subtext {
@@ -11009,12 +11372,12 @@ label.custom-control-label {
11009
11372
  margin-bottom: 0;
11010
11373
  }
11011
11374
  .list-group-subtext[href],
11012
- .list-group-subtext [href] {
11375
+ .list-group-subtext a[href] {
11013
11376
  color: #6c757d;
11014
11377
  }
11015
11378
  .list-group-subtext[href]:hover, .list-group-subtext[href].hover,
11016
- .list-group-subtext [href]:hover,
11017
- .list-group-subtext [href].hover {
11379
+ .list-group-subtext a[href]:hover,
11380
+ .list-group-subtext a[href].hover {
11018
11381
  color: #494f54;
11019
11382
  }
11020
11383
  .show-dropdown-action-on-active .list-group-item.active .dropdown-action .dropdown-menu {
@@ -18043,7 +18406,7 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
18043
18406
  word-wrap: break-word;
18044
18407
  }
18045
18408
  .sidebar-header .component-title[href],
18046
- .sidebar-header .component-title [href] {
18409
+ .sidebar-header .component-title a[href] {
18047
18410
  color: #212529;
18048
18411
  }
18049
18412
  .sidebar-header .component-subtitle {
@@ -18148,14 +18511,14 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
18148
18511
  font-size: 1rem;
18149
18512
  }
18150
18513
  .sidebar-light .sidebar-list-group .list-group-title[href],
18151
- .sidebar-light .sidebar-list-group .list-group-title [href] {
18514
+ .sidebar-light .sidebar-list-group .list-group-title a[href] {
18152
18515
  color: #212529;
18153
18516
  }
18154
18517
  .sidebar-light .sidebar-panel {
18155
18518
  background-color: #e9ecef;
18156
18519
  }
18157
18520
  .sidebar-light .sidebar-dd[href],
18158
- .sidebar-light .sidebar-dd [href] {
18521
+ .sidebar-light .sidebar-dd a[href] {
18159
18522
  color: #212529;
18160
18523
  }
18161
18524
  .sidebar-light .component-navigation-bar {
@@ -18212,14 +18575,14 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
18212
18575
  color: inherit;
18213
18576
  }
18214
18577
  .sidebar-dark .sidebar-header .component-title[href],
18215
- .sidebar-dark .sidebar-header .component-title [href] {
18578
+ .sidebar-dark .sidebar-header .component-title a[href] {
18216
18579
  color: inherit;
18217
18580
  }
18218
18581
  .sidebar-dark .sidebar-header .component-subtitle {
18219
18582
  color: inherit;
18220
18583
  }
18221
18584
  .sidebar-dark .sidebar-header .component-subtitle[href],
18222
- .sidebar-dark .sidebar-header .component-subtitle [href] {
18585
+ .sidebar-dark .sidebar-header .component-subtitle a[href] {
18223
18586
  color: inherit;
18224
18587
  }
18225
18588
  .sidebar-dark .nav-nested .nav-link {
@@ -18274,14 +18637,14 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
18274
18637
  color: inherit;
18275
18638
  }
18276
18639
  .sidebar-dark-l2 .sidebar-header .component-title[href],
18277
- .sidebar-dark-l2 .sidebar-header .component-title [href] {
18640
+ .sidebar-dark-l2 .sidebar-header .component-title a[href] {
18278
18641
  color: inherit;
18279
18642
  }
18280
18643
  .sidebar-dark-l2 .sidebar-header .component-subtitle {
18281
18644
  color: inherit;
18282
18645
  }
18283
18646
  .sidebar-dark-l2 .sidebar-header .component-subtitle[href],
18284
- .sidebar-dark-l2 .sidebar-header .component-subtitle [href] {
18647
+ .sidebar-dark-l2 .sidebar-header .component-subtitle a[href] {
18285
18648
  color: inherit;
18286
18649
  }
18287
18650
  .sidebar-dark-l2 .nav-nested .nav-link {
@@ -18574,8 +18937,8 @@ caption {
18574
18937
  background-color: #fff;
18575
18938
  cursor: not-allowed;
18576
18939
  }
18577
- .table .table-disabled th [href],
18578
- .table .table-disabled td [href] {
18940
+ .table .table-disabled th a[href],
18941
+ .table .table-disabled td a[href] {
18579
18942
  color: #acacac;
18580
18943
  pointer-events: none;
18581
18944
  }
@@ -18596,6 +18959,14 @@ caption {
18596
18959
  .table .autofit-col:last-child {
18597
18960
  padding-right: 0;
18598
18961
  }
18962
+ .table .component-drag {
18963
+ font-size: 0.875rem;
18964
+ height: 1rem;
18965
+ width: 1rem;
18966
+ }
18967
+ .table .component-drag.focus, .table .component-drag:focus-visible, .c-prefers-focus .table .component-drag:focus {
18968
+ box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
18969
+ }
18599
18970
  .table .custom-control,
18600
18971
  .table .form-check {
18601
18972
  margin-bottom: 0;
@@ -18818,11 +19189,11 @@ caption {
18818
19189
  color: #fff;
18819
19190
  }
18820
19191
  .table .table-dark .table-title[href],
18821
- .table .table-dark .table-title [href],
19192
+ .table .table-dark .table-title a[href],
18822
19193
  .table .table-dark > th .table-title[href],
18823
- .table .table-dark > th .table-title [href],
19194
+ .table .table-dark > th .table-title a[href],
18824
19195
  .table .table-dark > td .table-title[href],
18825
- .table .table-dark > td .table-title [href] {
19196
+ .table .table-dark > td .table-title a[href] {
18826
19197
  color: inherit;
18827
19198
  }
18828
19199
  .table .table-dark th,
@@ -18883,12 +19254,12 @@ caption {
18883
19254
  margin-bottom: 0;
18884
19255
  }
18885
19256
  .table-title[href],
18886
- .table-title [href] {
19257
+ .table-title a[href] {
18887
19258
  color: #212529;
18888
19259
  }
18889
19260
  .table-title[href]:hover, .table-title[href].hover,
18890
- .table-title [href]:hover,
18891
- .table-title [href].hover {
19261
+ .table-title a[href]:hover,
19262
+ .table-title a[href].hover {
18892
19263
  color: #212529;
18893
19264
  }
18894
19265
  .table-link {
@@ -19091,8 +19462,8 @@ caption {
19091
19462
  background-color: #fff;
19092
19463
  color: #acacac;
19093
19464
  }
19094
- .table-list .table-disabled th [href],
19095
- .table-list .table-disabled td [href] {
19465
+ .table-list .table-disabled th a[href],
19466
+ .table-list .table-disabled td a[href] {
19096
19467
  color: #acacac;
19097
19468
  pointer-events: none;
19098
19469
  }
@@ -19170,12 +19541,12 @@ caption {
19170
19541
  margin-bottom: 0;
19171
19542
  }
19172
19543
  .table-list-title[href],
19173
- .table-list-title [href] {
19544
+ .table-list-title a[href] {
19174
19545
  color: #212529;
19175
19546
  }
19176
19547
  .table-list-title[href]:hover, .table-list-title[href].hover,
19177
- .table-list-title [href]:hover,
19178
- .table-list-title [href].hover {
19548
+ .table-list-title a[href]:hover,
19549
+ .table-list-title a[href].hover {
19179
19550
  color: #212529;
19180
19551
  }
19181
19552
  .table-list-link {
@@ -19287,6 +19658,45 @@ caption {
19287
19658
  vertical-align: top;
19288
19659
  }
19289
19660
 
19661
+ .table-nested-rows th:first-child,
19662
+ .table-nested-rows td:first-child,
19663
+ .table-nested-rows .table-column-start {
19664
+ padding-left: 1.25rem;
19665
+ }
19666
+ .table-nested-rows th:last-child,
19667
+ .table-nested-rows td:last-child,
19668
+ .table-nested-rows .table-column-end {
19669
+ padding-right: 1.25rem;
19670
+ }
19671
+ .table-nested-rows .autofit-col {
19672
+ padding-left: 0.125rem;
19673
+ padding-right: 0.125rem;
19674
+ min-width: 1.75rem;
19675
+ }
19676
+ .table-nested-rows .autofit-col-checkbox {
19677
+ padding-right: 0.625rem;
19678
+ }
19679
+ .table-nested-rows .autofit-col-icon {
19680
+ padding-right: 0.625rem;
19681
+ }
19682
+ .table-nested-rows .component-drag {
19683
+ left: 2px;
19684
+ position: absolute;
19685
+ top: 50%;
19686
+ transform: translateY(-50%);
19687
+ }
19688
+ .table-nested-rows .component-toggle {
19689
+ font-size: 0.875rem;
19690
+ height: 1.5rem;
19691
+ width: 1.5rem;
19692
+ }
19693
+ .table-nested-rows .component-action.show .collapse-icon-closed {
19694
+ display: none;
19695
+ }
19696
+ .table-nested-rows .component-action:not(.show) .collapse-icon-open {
19697
+ display: none;
19698
+ }
19699
+
19290
19700
  .show-quick-actions-on-hover tr:not(.table-active):not(.table-disabled):hover .quick-action-menu {
19291
19701
  display: flex;
19292
19702
  }