@clayui/css 3.145.0 → 3.148.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 (38) hide show
  1. package/lib/css/atlas.css +81 -293
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +81 -276
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +45 -276
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/package.json +2 -2
  9. package/src/scss/_license-text.scss +1 -1
  10. package/src/scss/atlas/variables/_globals.scss +1 -0
  11. package/src/scss/atlas/variables/_pagination.scss +5 -1
  12. package/src/scss/cadmin/components/_form-validation.scss +4 -0
  13. package/src/scss/cadmin/components/_forms.scss +19 -0
  14. package/src/scss/cadmin/components/_pagination.scss +8 -6
  15. package/src/scss/cadmin/components/_slideout.scss +0 -12
  16. package/src/scss/cadmin/components/_utilities.scss +4 -0
  17. package/src/scss/cadmin/variables/_forms.scss +22 -0
  18. package/src/scss/cadmin/variables/_globals.scss +6 -5
  19. package/src/scss/cadmin/variables/_pagination.scss +2 -0
  20. package/src/scss/cadmin/variables/_sidebar.scss +2 -2
  21. package/src/scss/cadmin/variables/_slideout.scss +96 -30
  22. package/src/scss/cadmin/variables/_stickers.scss +15 -0
  23. package/src/scss/cadmin/variables/_utilities.scss +11 -0
  24. package/src/scss/components/_form-validation.scss +4 -0
  25. package/src/scss/components/_forms.scss +16 -0
  26. package/src/scss/components/_pagination.scss +8 -6
  27. package/src/scss/components/_slideout.scss +3 -11
  28. package/src/scss/components/_utilities.scss +4 -0
  29. package/src/scss/mixins/_globals.scss +8 -0
  30. package/src/scss/mixins/_sidebar.scss +67 -0
  31. package/src/scss/mixins/_slideout.scss +16 -0
  32. package/src/scss/variables/_drilldown.scss +1 -1
  33. package/src/scss/variables/_forms.scss +22 -0
  34. package/src/scss/variables/_globals.scss +6 -5
  35. package/src/scss/variables/_pagination.scss +2 -0
  36. package/src/scss/variables/_slideout.scss +96 -30
  37. package/src/scss/variables/_stickers.scss +15 -0
  38. package/src/scss/variables/_utilities.scss +11 -0
package/lib/css/atlas.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.145.0
3
+ * Clay 3.148.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>
@@ -5628,6 +5628,16 @@ input[type=button].btn-block {
5628
5628
  right: -1.5rem;
5629
5629
  }
5630
5630
 
5631
+ .sticker-xxl {
5632
+ font-size: 2.5rem;
5633
+ height: 5rem;
5634
+ line-height: 5rem;
5635
+ width: 5rem;
5636
+ }
5637
+ .sticker-xxl .lexicon-icon {
5638
+ font-size: 1.5rem;
5639
+ }
5640
+
5631
5641
  .sticker-primary {
5632
5642
  background-color: #fff;
5633
5643
  color: #0b5fff;
@@ -7697,7 +7707,6 @@ input[type=button].btn-block {
7697
7707
  .drilldown-inner {
7698
7708
  display: flex;
7699
7709
  flex-grow: 1;
7700
- overflow: hidden;
7701
7710
  transition: height 0.25s ease;
7702
7711
  }
7703
7712
  @media (prefers-reduced-motion: reduce) {
@@ -7764,6 +7773,7 @@ input[type=button].btn-block {
7764
7773
  }
7765
7774
  .drilldown.dropdown-menu .drilldown-inner {
7766
7775
  min-height: 266px;
7776
+ overflow: hidden;
7767
7777
  }
7768
7778
  .drilldown.dropdown-menu .inline-scroller {
7769
7779
  max-height: none;
@@ -7900,10 +7910,21 @@ label {
7900
7910
  label[for] {
7901
7911
  cursor: pointer;
7902
7912
  }
7913
+ label + .form-feedback-group {
7914
+ margin-bottom: 0.75rem;
7915
+ }
7903
7916
  label + .form-text {
7904
7917
  margin-bottom: 0.25rem;
7905
7918
  margin-top: 0;
7906
7919
  }
7920
+ label .form-help-text {
7921
+ color: #9b92a5;
7922
+ display: inline;
7923
+ font-size: 0.875rem;
7924
+ font-weight: 400;
7925
+ margin-left: 0.5rem;
7926
+ margin-top: 0;
7927
+ }
7907
7928
  label .reference-mark {
7908
7929
  color: #b95000;
7909
7930
  font-size: 6px;
@@ -11473,6 +11494,13 @@ label.custom-control-label {
11473
11494
  width: 0.125rem;
11474
11495
  }
11475
11496
 
11497
+ .form-help-text {
11498
+ color: #6b6c7e;
11499
+ display: block;
11500
+ font-size: 0.875rem;
11501
+ margin-top: 0.25rem;
11502
+ }
11503
+
11476
11504
  .was-validated .form-control:valid,
11477
11505
  .was-validated .form-control.is-valid {
11478
11506
  background-color: #edf9f0;
@@ -19332,98 +19360,6 @@ label.custom-control-label {
19332
19360
  word-wrap: break-word;
19333
19361
  }
19334
19362
 
19335
- .pagination-sm .page-link {
19336
- font-size: 0.75rem;
19337
- height: 1.5rem;
19338
- line-height: 1;
19339
- padding-bottom: 0;
19340
- padding-right: 0.5rem;
19341
- padding-left: 0.5rem;
19342
- padding-top: 0;
19343
- }
19344
- .pagination-sm .page-link > .c-inner {
19345
- margin-bottom: 0;
19346
- margin-left: -0.5rem;
19347
- margin-right: -0.5rem;
19348
- margin-top: 0;
19349
- }
19350
- .pagination-sm .page-item:first-child .page-link,
19351
- .pagination-sm .page-link-first {
19352
- border-bottom-left-radius: 0.3125rem;
19353
- border-top-left-radius: 0.3125rem;
19354
- }
19355
- .pagination-sm .page-item:last-child .page-link,
19356
- .pagination-sm .page-link-last {
19357
- border-bottom-right-radius: 0.3125rem;
19358
- border-top-right-radius: 0.3125rem;
19359
- }
19360
- .pagination-sm .pagination-items-per-page {
19361
- border-radius: 0.3125rem;
19362
- }
19363
- .pagination-sm .pagination-items-per-page > a,
19364
- .pagination-sm .pagination-items-per-page > button {
19365
- font-size: 0.75rem;
19366
- height: 1.5rem;
19367
- line-height: 1;
19368
- padding-bottom: 0;
19369
- padding-left: 0.625rem;
19370
- padding-right: 0.625rem;
19371
- padding-top: 0;
19372
- }
19373
- .pagination-sm .pagination-items-per-page > a > .c-inner,
19374
- .pagination-sm .pagination-items-per-page > button > .c-inner {
19375
- margin-bottom: 0;
19376
- margin-left: -0.625rem;
19377
- margin-right: -0.625rem;
19378
- margin-top: 0;
19379
- }
19380
- .pagination-sm .pagination-items-per-page + .pagination-results {
19381
- font-size: 0.75rem;
19382
- line-height: 1;
19383
- padding: 0 0.625rem;
19384
- }
19385
-
19386
- .pagination-lg .page-link {
19387
- font-size: 1.125rem;
19388
- height: 2.75rem;
19389
- line-height: 1;
19390
- padding-bottom: 0;
19391
- padding-left: 1rem;
19392
- padding-right: 1rem;
19393
- padding-top: 0;
19394
- }
19395
- .pagination-lg .page-link > .c-inner {
19396
- margin-bottom: 0;
19397
- margin-left: -1rem;
19398
- margin-right: -1rem;
19399
- margin-top: 0;
19400
- }
19401
- .pagination-lg .page-item:first-child .page-link,
19402
- .pagination-lg .page-link-first {
19403
- border-bottom-left-radius: 0.3125rem;
19404
- border-top-left-radius: 0.3125rem;
19405
- }
19406
- .pagination-lg .page-item:last-child .page-link,
19407
- .pagination-lg .page-link-last {
19408
- border-bottom-right-radius: 0.3125rem;
19409
- border-top-right-radius: 0.3125rem;
19410
- }
19411
- .pagination-lg .pagination-items-per-page {
19412
- border-radius: 0.3125rem;
19413
- }
19414
- .pagination-lg .pagination-items-per-page > a,
19415
- .pagination-lg .pagination-items-per-page > button {
19416
- font-size: 1.125rem;
19417
- height: 2.75rem;
19418
- line-height: 1;
19419
- padding: 0 0.625rem;
19420
- }
19421
- .pagination-lg .pagination-items-per-page + .pagination-results {
19422
- font-size: 1.125rem;
19423
- line-height: 1;
19424
- padding: 0 0.625rem;
19425
- }
19426
-
19427
19363
  .panel {
19428
19364
  background-color: #fff;
19429
19365
  border-color: transparent;
@@ -20970,7 +20906,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
20970
20906
 
20971
20907
  .sidebar-sm {
20972
20908
  font-size: 0.875rem;
20973
- font-size: 0.875rem;
20974
20909
  }
20975
20910
  .sidebar-light {
20976
20911
  background-color: #fff;
@@ -20978,11 +20913,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
20978
20913
  border-left-width: 0px;
20979
20914
  color: #272833;
20980
20915
  box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
20981
- background-color: #fff;
20982
- border-color: #e7e7ed;
20983
- border-left-width: 0px;
20984
- color: #272833;
20985
- box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
20986
20916
  }
20987
20917
  .sidenav-start .sidebar-light,
20988
20918
  .sidenav-left .sidebar-light {
@@ -21085,82 +21015,10 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21085
21015
  .sidebar-light .component-navigation-bar .navbar-overlay {
21086
21016
  background-color: #fff;
21087
21017
  }
21088
- .sidebar-light .close {
21089
- color: #6b6c7e;
21090
- }
21091
- .sidebar-light .close:hover {
21092
- background-color: rgba(39, 40, 51, 0.03);
21093
- color: #272833;
21094
- }
21095
- .sidebar-light .close:active {
21096
- background-color: rgba(39, 40, 51, 0.06);
21097
- color: #272833;
21098
- }
21099
- .sidebar-light .close:disabled {
21100
- background-color: transparent;
21101
- box-shadow: none;
21102
- color: #6b6c7e;
21103
- cursor: not-allowed;
21104
- opacity: 0.4;
21105
- }
21106
- .sidebar-light .close:disabled:active {
21107
- pointer-events: none;
21108
- }
21109
- .sidebar-light .close:focus {
21110
- background-color: rgba(39, 40, 51, 0.03);
21111
- color: #272833;
21112
- }
21113
- .sidebar-light .sidebar-header {
21114
- background-color: inherit;
21115
- border: 0px solid #e7e7ed;
21116
- }
21117
- .sidebar-light .sidebar-footer {
21118
- background-color: inherit;
21119
- border: 0px solid #e7e7ed;
21120
- }
21121
- .sidebar-light .sidebar-dd .href {
21122
- color: #272833;
21123
- }
21124
- .sidebar-light .sidebar-panel {
21125
- background-color: #f1f2f5;
21126
- }
21127
- .sidebar-light .sidebar-list-group .list-group-title {
21128
- font-size: 1rem;
21129
- }
21130
- .sidebar-light .sidebar-list-group .list-group-title .href {
21131
- color: #272833;
21132
- }
21133
- .sidebar-light .component-navigation-bar {
21134
- background-color: #fff;
21135
- border-color: #cdced9;
21136
- }
21137
- .sidebar-light .component-navigation-bar .navbar-nav .nav-link {
21138
- color: #6b6c7e;
21139
- }
21140
- .sidebar-light .component-navigation-bar .navbar-nav .nav-link:hover {
21141
- color: #6b6c7e;
21142
- }
21143
- .sidebar-light .component-navigation-bar .navbar-nav .nav-link:active {
21144
- color: #272833;
21145
- }
21146
- .sidebar-light .component-navigation-bar .navbar-nav .nav-link:disabled {
21147
- color: #a7a9bc;
21148
- }
21149
- .sidebar-light .sidenav-start {
21150
- box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
21151
- }
21152
- .sidebar-light .sidebar-dt {
21153
- color: #6b6c7e;
21154
- }
21155
- .sidebar-light .panel-unstyled .header .link:focus {
21156
- box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.375rem #5791ff;
21157
- }
21158
21018
 
21159
21019
  .sidebar-dark {
21160
21020
  background-color: #272833;
21161
21021
  color: #fff;
21162
- background-color: #272833;
21163
- color: #fff;
21164
21022
  }
21165
21023
  .sidebar-dark .close {
21166
21024
  color: #a7a9bc;
@@ -21221,62 +21079,9 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21221
21079
  .sidebar-dark .nav-nested .nav-link[aria-expanded=true], .sidebar-dark .nav-nested .nav-link.show {
21222
21080
  color: #fff;
21223
21081
  }
21224
- .sidebar-dark .sidebar-header .component-title {
21225
- color: inherit;
21226
- }
21227
- .sidebar-dark .sidebar-header .component-title .href {
21228
- color: inherit;
21229
- }
21230
- .sidebar-dark .sidebar-header .component-subtitle {
21231
- color: inherit;
21232
- }
21233
- .sidebar-dark .sidebar-header .component-subtitle .href {
21234
- color: inherit;
21235
- }
21236
- .sidebar-dark .close {
21237
- color: #a7a9bc;
21238
- }
21239
- .sidebar-dark .close:hover {
21240
- color: #fff;
21241
- }
21242
- .sidebar-dark .nav-nested .nav-link {
21243
- border-radius: 0.25rem;
21244
- color: #a7a9bc;
21245
- transition: box-shadow 0.15s ease-in-out;
21246
- }
21247
- @media (prefers-reduced-motion: reduce) {
21248
- .sidebar-dark .nav-nested .nav-link {
21249
- transition: none;
21250
- }
21251
- }
21252
- .c-prefers-reduced-motion .sidebar-dark .nav-nested .nav-link {
21253
- transition: none;
21254
- }
21255
-
21256
- .sidebar-dark .nav-nested .nav-link:hover {
21257
- color: #fff;
21258
- }
21259
- .sidebar-dark .nav-nested .nav-link:focus {
21260
- box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
21261
- outline: 0;
21262
- }
21263
- .sidebar-dark .nav-nested .nav-link:active {
21264
- color: #fff;
21265
- }
21266
- .sidebar-dark .nav-nested .nav-link:disabled {
21267
- box-shadow: none;
21268
- color: #a7a9bc;
21269
- opacity: 0.65;
21270
- }
21271
- .sidebar-dark .nav-nested .nav-link:disabled:active {
21272
- pointer-events: none;
21273
- }
21274
-
21275
21082
  .sidebar-dark-l2 {
21276
21083
  background-color: #393a4a;
21277
21084
  color: #fff;
21278
- background-color: #393a4a;
21279
- color: #fff;
21280
21085
  }
21281
21086
  .sidebar-dark-l2 .close {
21282
21087
  color: #a7a9bc;
@@ -21337,57 +21142,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21337
21142
  .sidebar-dark-l2 .nav-nested .nav-link[aria-expanded=true], .sidebar-dark-l2 .nav-nested .nav-link.show {
21338
21143
  color: #fff;
21339
21144
  }
21340
- .sidebar-dark-l2 .sidebar-header .component-title {
21341
- color: inherit;
21342
- }
21343
- .sidebar-dark-l2 .sidebar-header .component-title .href {
21344
- color: inherit;
21345
- }
21346
- .sidebar-dark-l2 .sidebar-header .component-subtitle {
21347
- color: inherit;
21348
- }
21349
- .sidebar-dark-l2 .sidebar-header .component-subtitle .href {
21350
- color: inherit;
21351
- }
21352
- .sidebar-dark-l2 .close {
21353
- color: #a7a9bc;
21354
- }
21355
- .sidebar-dark-l2 .close:hover {
21356
- color: #fff;
21357
- }
21358
- .sidebar-dark-l2 .nav-nested .nav-link {
21359
- border-radius: 0.25rem;
21360
- color: #a7a9bc;
21361
- transition: box-shadow 0.15s ease-in-out;
21362
- }
21363
- @media (prefers-reduced-motion: reduce) {
21364
- .sidebar-dark-l2 .nav-nested .nav-link {
21365
- transition: none;
21366
- }
21367
- }
21368
- .c-prefers-reduced-motion .sidebar-dark-l2 .nav-nested .nav-link {
21369
- transition: none;
21370
- }
21371
-
21372
- .sidebar-dark-l2 .nav-nested .nav-link:hover {
21373
- color: #fff;
21374
- }
21375
- .sidebar-dark-l2 .nav-nested .nav-link:focus {
21376
- box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
21377
- outline: 0;
21378
- }
21379
- .sidebar-dark-l2 .nav-nested .nav-link:active {
21380
- color: #fff;
21381
- }
21382
- .sidebar-dark-l2 .nav-nested .nav-link:disabled {
21383
- box-shadow: none;
21384
- color: #a7a9bc;
21385
- opacity: 0.65;
21386
- }
21387
- .sidebar-dark-l2 .nav-nested .nav-link:disabled:active {
21388
- pointer-events: none;
21389
- }
21390
-
21391
21145
  .c-slideout-start .sidebar-light {
21392
21146
  box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
21393
21147
  }
@@ -21462,10 +21216,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21462
21216
  flex-shrink: 0;
21463
21217
  position: relative;
21464
21218
  width: 320px;
21465
- display: none;
21466
- flex-shrink: 0;
21467
- position: relative;
21468
- width: 320px;
21469
21219
  }
21470
21220
  .c-slideout .sidebar .sidebar-body {
21471
21221
  flex-grow: 1;
@@ -21474,12 +21224,15 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21474
21224
  .c-slideout .sidebar .sidebar-footer {
21475
21225
  border-top-width: 1px;
21476
21226
  }
21477
- .c-slideout .sidebar .sidebar-body {
21478
- flex-grow: 1;
21479
- overflow: visible;
21480
- }
21481
- .c-slideout .sidebar .sidebar-footer {
21482
- border-top-width: 1px;
21227
+ @supports (position: sticky) {
21228
+ @media (max-height: 700px) {
21229
+ .c-slideout .sidebar .sidebar-header.sticky-top {
21230
+ position: static;
21231
+ }
21232
+ .c-slideout .sidebar .sidebar-footer.sticky-bottom {
21233
+ position: static;
21234
+ }
21235
+ }
21483
21236
  }
21484
21237
  .c-slideout .sidebar.c-slideout-show {
21485
21238
  display: flex;
@@ -21509,7 +21262,41 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21509
21262
  @media (max-width: 767.98px) {
21510
21263
  .c-slideout .sidebar {
21511
21264
  width: 280px;
21512
- width: 280px;
21265
+ }
21266
+ }
21267
+
21268
+ .c-slideout-fluid.c-slideout-push-start {
21269
+ padding-left: 33vw;
21270
+ }
21271
+ .c-slideout-fluid.c-slideout-push-end {
21272
+ padding-right: 33vw;
21273
+ }
21274
+ .c-slideout-fluid .sidebar {
21275
+ max-width: 33vw;
21276
+ width: 33vw;
21277
+ }
21278
+ @media (max-width: 991.98px) {
21279
+ .c-slideout-fluid.c-slideout-push-start {
21280
+ padding-left: 50vw;
21281
+ }
21282
+ .c-slideout-fluid.c-slideout-push-end {
21283
+ padding-right: 50vw;
21284
+ }
21285
+ .c-slideout-fluid .sidebar {
21286
+ max-width: 50vw;
21287
+ width: 50vw;
21288
+ }
21289
+ }
21290
+ @media (max-width: 767.98px) {
21291
+ .c-slideout-fluid.c-slideout-push-start {
21292
+ padding-left: 0;
21293
+ }
21294
+ .c-slideout-fluid.c-slideout-push-end {
21295
+ padding-right: 0;
21296
+ }
21297
+ .c-slideout-fluid .sidebar {
21298
+ max-width: none;
21299
+ width: 100vw;
21513
21300
  }
21514
21301
  }
21515
21302
 
@@ -21524,8 +21311,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21524
21311
  .c-slideout-start .sidebar {
21525
21312
  left: -360px;
21526
21313
  width: 320px;
21527
- left: -360px;
21528
- width: 320px;
21529
21314
  }
21530
21315
  .c-slideout-start .sidebar.c-slideout-show {
21531
21316
  left: 0;
@@ -21543,8 +21328,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21543
21328
  .c-slideout-start .sidebar {
21544
21329
  left: -320px;
21545
21330
  width: 280px;
21546
- left: -320px;
21547
- width: 280px;
21548
21331
  }
21549
21332
  .c-slideout-start .tbar-stacked {
21550
21333
  left: -40px;
@@ -21561,7 +21344,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21561
21344
  }
21562
21345
  .c-slideout-end .sidebar {
21563
21346
  right: -360px;
21564
- right: -360px;
21565
21347
  }
21566
21348
  .c-slideout-end .sidebar.c-slideout-show {
21567
21349
  right: 0;
@@ -21582,7 +21364,6 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
21582
21364
  }
21583
21365
  .c-slideout-end .sidebar {
21584
21366
  right: -320px;
21585
- right: -320px;
21586
21367
  }
21587
21368
  .c-slideout-end .tbar-stacked {
21588
21369
  right: -40px;
@@ -24684,6 +24465,13 @@ td.table-focus {
24684
24465
  outline: 0;
24685
24466
  }
24686
24467
 
24468
+ .c-focus-trap {
24469
+ background: inherit;
24470
+ color: inherit;
24471
+ display: contents;
24472
+ font: inherit;
24473
+ }
24474
+
24687
24475
  .autofit-row {
24688
24476
  display: flex;
24689
24477
  flex-wrap: nowrap;