@clayui/css 3.46.0 → 3.47.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 (35) hide show
  1. package/lib/css/atlas.css +143 -74
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +107 -56
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css.map +1 -1
  6. package/lib/css/cadmin.css +123 -64
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/icons.svg +1 -1
  9. package/package.json +2 -2
  10. package/src/scss/atlas/variables/_cards.scss +12 -0
  11. package/src/scss/atlas/variables/_list-group.scss +28 -12
  12. package/src/scss/cadmin/components/_cards.scss +10 -120
  13. package/src/scss/cadmin/components/_empty-state.scss +36 -0
  14. package/src/scss/cadmin/components/_links.scss +0 -8
  15. package/src/scss/cadmin/components/_treeview.scss +58 -1
  16. package/src/scss/cadmin/variables/_cards.scss +164 -1
  17. package/src/scss/cadmin/variables/_empty-state.scss +23 -0
  18. package/src/scss/cadmin/variables/_links.scss +14 -0
  19. package/src/scss/cadmin/variables/_list-group.scss +32 -16
  20. package/src/scss/cadmin/variables/_sidebar.scss +1 -1
  21. package/src/scss/cadmin/variables/_treeview.scss +17 -1
  22. package/src/scss/components/_cards.scss +28 -122
  23. package/src/scss/components/_empty-state.scss +30 -0
  24. package/src/scss/components/_links.scss +1 -9
  25. package/src/scss/components/_tables.scss +0 -8
  26. package/src/scss/components/_treeview.scss +58 -1
  27. package/src/scss/mixins/_cards.scss +59 -25
  28. package/src/scss/mixins/_links.scss +22 -2
  29. package/src/scss/variables/_cards.scss +158 -4
  30. package/src/scss/variables/_empty-state.scss +23 -0
  31. package/src/scss/variables/_links.scss +21 -3
  32. package/src/scss/variables/_list-group.scss +22 -12
  33. package/src/scss/variables/_sidebar.scss +3 -3
  34. package/src/scss/variables/_tables.scss +14 -0
  35. package/src/scss/variables/_treeview.scss +21 -1
package/lib/css/atlas.css CHANGED
@@ -4557,6 +4557,20 @@ input[type=button].btn-block {
4557
4557
  word-wrap: break-word;
4558
4558
  }
4559
4559
 
4560
+ .c-empty-state-sm.c-empty-state-animation {
4561
+ margin: 2.5rem auto 2rem;
4562
+ max-width: 268px;
4563
+ }
4564
+ .c-empty-state-sm .c-empty-state-image {
4565
+ max-width: 120px;
4566
+ }
4567
+ .c-empty-state-sm .c-empty-state-title {
4568
+ font-size: 1rem;
4569
+ line-height: 1.5;
4570
+ }
4571
+ .c-empty-state-sm .c-empty-state-text {
4572
+ font-size: 0.875rem;
4573
+ }
4560
4574
  .label {
4561
4575
  border-color: #272833;
4562
4576
  border-radius: 0.125rem;
@@ -5190,34 +5204,17 @@ input[type=button].btn-block {
5190
5204
  .card-horizontal {
5191
5205
  background-color: #fff;
5192
5206
  border-color: rgba(0, 0, 0, 0.125);
5207
+ border-radius: 0.25rem;
5193
5208
  border-style: solid;
5194
5209
  border-width: 0px;
5195
- border-radius: 0.25rem;
5196
5210
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
5197
5211
  display: block;
5198
5212
  margin-bottom: 1.5rem;
5199
5213
  min-width: 0;
5200
5214
  position: relative;
5215
+ overflow-wrap: break-word;
5201
5216
  word-wrap: break-word;
5202
5217
  }
5203
- .card .autofit-col:first-child,
5204
- .card-horizontal .autofit-col:first-child {
5205
- border-bottom-left-radius: calc(
5206
- 0.25rem - 0px
5207
- );
5208
- border-top-left-radius: calc(
5209
- 0.25rem - 0px
5210
- );
5211
- }
5212
- .card .autofit-col:last-child,
5213
- .card-horizontal .autofit-col:last-child {
5214
- border-bottom-right-radius: calc(
5215
- 0.25rem - 0px
5216
- );
5217
- border-top-right-radius: calc(
5218
- 0.25rem - 0px
5219
- );
5220
- }
5221
5218
  .card .aspect-ratio .label,
5222
5219
  .card-horizontal .aspect-ratio .label {
5223
5220
  display: block;
@@ -5263,6 +5260,24 @@ input[type=button].btn-block {
5263
5260
  margin-left: 0;
5264
5261
  margin-right: 0;
5265
5262
  }
5263
+ .card .autofit-col:first-child,
5264
+ .card-horizontal .autofit-col:first-child {
5265
+ border-bottom-left-radius: calc(
5266
+ 0.25rem - 0px
5267
+ );
5268
+ border-top-left-radius: calc(
5269
+ 0.25rem - 0px
5270
+ );
5271
+ }
5272
+ .card .autofit-col:last-child,
5273
+ .card-horizontal .autofit-col:last-child {
5274
+ border-bottom-right-radius: calc(
5275
+ 0.25rem - 0px
5276
+ );
5277
+ border-top-right-radius: calc(
5278
+ 0.25rem - 0px
5279
+ );
5280
+ }
5266
5281
  .card > .list-group:first-child .list-group-item:first-child,
5267
5282
  .card-horizontal > .list-group:first-child .list-group-item:first-child {
5268
5283
  border-top-left-radius: 0.25rem;
@@ -5300,10 +5315,12 @@ input[type=button].btn-block {
5300
5315
  margin-bottom: 0;
5301
5316
  color: #272833;
5302
5317
  }
5303
- .card-title a {
5318
+ .card-title[href],
5319
+ .card-title [href] {
5304
5320
  color: #272833;
5305
5321
  }
5306
- .card-title a:hover {
5322
+ .card-title[href]:hover,
5323
+ .card-title [href]:hover {
5307
5324
  color: #272833;
5308
5325
  }
5309
5326
  .card-subtitle {
@@ -5313,16 +5330,17 @@ input[type=button].btn-block {
5313
5330
  margin-bottom: 0;
5314
5331
  margin-top: 0;
5315
5332
  }
5316
- .card-subtitle a {
5333
+ .card-subtitle[href],
5334
+ .card-subtitle [href] {
5317
5335
  color: #6b6c7e;
5318
5336
  }
5319
- .card-subtitle a:hover {
5337
+ .card-subtitle[href]:hover,
5338
+ .card-subtitle [href]:hover {
5320
5339
  color: #6b6c7e;
5321
5340
  }
5322
5341
  .card-text:last-child {
5323
5342
  margin-bottom: 0;
5324
5343
  }
5325
-
5326
5344
  .card-link {
5327
5345
  color: #6b6c7e;
5328
5346
  font-size: 0.875rem;
@@ -5352,11 +5370,7 @@ input[type=button].btn-block {
5352
5370
  padding: 0.75rem 1.25rem;
5353
5371
  }
5354
5372
  .card-header:first-child {
5355
- border-radius: calc(
5356
- 0.25rem - 0px
5357
- ) calc(
5358
- 0.25rem - 0px
5359
- ) 0 0;
5373
+ border-radius: calc( 0.25rem - 0px ) calc( 0.25rem - 0px ) 0 0;
5360
5374
  }
5361
5375
  .card-header + .list-group .list-group-item:first-child {
5362
5376
  border-top: 0;
@@ -5380,13 +5394,8 @@ input[type=button].btn-block {
5380
5394
  padding: 0.75rem 1.25rem;
5381
5395
  }
5382
5396
  .card-footer:last-child {
5383
- border-radius: 0 0 calc(
5384
- 0.25rem - 0px
5385
- ) calc(
5386
- 0.25rem - 0px
5387
- );
5397
+ border-radius: 0 0 calc( 0.25rem - 0px ) calc( 0.25rem - 0px );
5388
5398
  }
5389
-
5390
5399
  .card-img-overlay {
5391
5400
  bottom: 0;
5392
5401
  left: 0;
@@ -8161,20 +8170,24 @@ button.link-outline {
8161
8170
  margin-bottom: calc((2rem - (1em * 1.25)) / 2);
8162
8171
  margin-top: calc((2rem - (1em * 1.25)) / 2);
8163
8172
  }
8164
- .component-title a {
8173
+ .component-title[href],
8174
+ .component-title [href] {
8165
8175
  color: #272833;
8166
8176
  border-radius: 1px;
8167
8177
  transition: box-shadow 0.15s ease-in-out;
8168
8178
  }
8169
8179
  @media (prefers-reduced-motion: reduce) {
8170
- .component-title a {
8180
+ .component-title[href],
8181
+ .component-title [href] {
8171
8182
  transition: none;
8172
8183
  }
8173
8184
  }
8174
- .component-title a:hover {
8185
+ .component-title[href]:hover,
8186
+ .component-title [href]:hover {
8175
8187
  color: #060608;
8176
8188
  }
8177
- .component-title a:focus {
8189
+ .component-title[href]:focus,
8190
+ .component-title [href]:focus {
8178
8191
  color: #060608;
8179
8192
  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
8180
8193
  outline: 0;
@@ -8185,20 +8198,24 @@ button.link-outline {
8185
8198
  font-weight: 600;
8186
8199
  line-height: 1.45;
8187
8200
  }
8188
- .component-subtitle a {
8201
+ .component-subtitle[href],
8202
+ .component-subtitle [href] {
8189
8203
  color: #6b6c7e;
8190
8204
  border-radius: 1px;
8191
8205
  transition: box-shadow 0.15s ease-in-out;
8192
8206
  }
8193
8207
  @media (prefers-reduced-motion: reduce) {
8194
- .component-subtitle a {
8208
+ .component-subtitle[href],
8209
+ .component-subtitle [href] {
8195
8210
  transition: none;
8196
8211
  }
8197
8212
  }
8198
- .component-subtitle a:hover {
8213
+ .component-subtitle[href]:hover,
8214
+ .component-subtitle [href]:hover {
8199
8215
  color: #272833;
8200
8216
  }
8201
- .component-subtitle a:focus {
8217
+ .component-subtitle[href]:focus,
8218
+ .component-subtitle [href]:focus {
8202
8219
  color: #272833;
8203
8220
  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
8204
8221
  outline: 0;
@@ -10977,7 +10994,8 @@ label.custom-control-label {
10977
10994
  margin-top: -0.25rem;
10978
10995
  color: #272833;
10979
10996
  }
10980
- .list-group-title a {
10997
+ .list-group-title[href],
10998
+ .list-group-title [href] {
10981
10999
  color: #272833;
10982
11000
  max-width: 100%;
10983
11001
  border-radius: 1px;
@@ -10985,14 +11003,17 @@ label.custom-control-label {
10985
11003
  transition: box-shadow 0.15s ease-in-out;
10986
11004
  }
10987
11005
  @media (prefers-reduced-motion: reduce) {
10988
- .list-group-title a {
11006
+ .list-group-title[href],
11007
+ .list-group-title [href] {
10989
11008
  transition: none;
10990
11009
  }
10991
11010
  }
10992
- .list-group-title a:hover {
11011
+ .list-group-title[href]:hover,
11012
+ .list-group-title [href]:hover {
10993
11013
  color: #272833;
10994
11014
  }
10995
- .list-group-title a:focus {
11015
+ .list-group-title[href]:focus,
11016
+ .list-group-title [href]:focus {
10996
11017
  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
10997
11018
  outline: 0;
10998
11019
  }
@@ -11000,7 +11021,8 @@ label.custom-control-label {
11000
11021
  color: #6b6c7e;
11001
11022
  margin-bottom: 0;
11002
11023
  }
11003
- .list-group-subtitle a {
11024
+ .list-group-subtitle[href],
11025
+ .list-group-subtitle [href] {
11004
11026
  color: #6b6c7e;
11005
11027
  border-radius: 1px;
11006
11028
  display: inline-block;
@@ -11008,14 +11030,17 @@ label.custom-control-label {
11008
11030
  transition: box-shadow 0.15s ease-in-out;
11009
11031
  }
11010
11032
  @media (prefers-reduced-motion: reduce) {
11011
- .list-group-subtitle a {
11033
+ .list-group-subtitle[href],
11034
+ .list-group-subtitle [href] {
11012
11035
  transition: none;
11013
11036
  }
11014
11037
  }
11015
- .list-group-subtitle a:hover {
11038
+ .list-group-subtitle[href]:hover,
11039
+ .list-group-subtitle [href]:hover {
11016
11040
  color: #272833;
11017
11041
  }
11018
- .list-group-subtitle a:focus {
11042
+ .list-group-subtitle[href]:focus,
11043
+ .list-group-subtitle [href]:focus {
11019
11044
  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
11020
11045
  outline: 0;
11021
11046
  }
@@ -11024,7 +11049,8 @@ label.custom-control-label {
11024
11049
  margin-bottom: 0;
11025
11050
  line-height: 1.45;
11026
11051
  }
11027
- .list-group-text a {
11052
+ .list-group-text[href],
11053
+ .list-group-text [href] {
11028
11054
  color: #272833;
11029
11055
  border-radius: 1px;
11030
11056
  display: inline-block;
@@ -11032,14 +11058,17 @@ label.custom-control-label {
11032
11058
  transition: box-shadow 0.15s ease-in-out;
11033
11059
  }
11034
11060
  @media (prefers-reduced-motion: reduce) {
11035
- .list-group-text a {
11061
+ .list-group-text[href],
11062
+ .list-group-text [href] {
11036
11063
  transition: none;
11037
11064
  }
11038
11065
  }
11039
- .list-group-text a:hover {
11066
+ .list-group-text[href]:hover,
11067
+ .list-group-text [href]:hover {
11040
11068
  color: #272833;
11041
11069
  }
11042
- .list-group-text a:focus {
11070
+ .list-group-text[href]:focus,
11071
+ .list-group-text [href]:focus {
11043
11072
  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
11044
11073
  outline: 0;
11045
11074
  }
@@ -11048,7 +11077,8 @@ label.custom-control-label {
11048
11077
  margin-bottom: 0;
11049
11078
  line-height: 1.45;
11050
11079
  }
11051
- .list-group-subtext a {
11080
+ .list-group-subtext[href],
11081
+ .list-group-subtext [href] {
11052
11082
  color: #6b6c7e;
11053
11083
  border-radius: 1px;
11054
11084
  display: inline-block;
@@ -11056,14 +11086,17 @@ label.custom-control-label {
11056
11086
  transition: box-shadow 0.15s ease-in-out;
11057
11087
  }
11058
11088
  @media (prefers-reduced-motion: reduce) {
11059
- .list-group-subtext a {
11089
+ .list-group-subtext[href],
11090
+ .list-group-subtext [href] {
11060
11091
  transition: none;
11061
11092
  }
11062
11093
  }
11063
- .list-group-subtext a:hover {
11094
+ .list-group-subtext[href]:hover,
11095
+ .list-group-subtext [href]:hover {
11064
11096
  color: #272833;
11065
11097
  }
11066
- .list-group-subtext a:focus {
11098
+ .list-group-subtext[href]:focus,
11099
+ .list-group-subtext [href]:focus {
11067
11100
  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
11068
11101
  outline: 0;
11069
11102
  }
@@ -17862,7 +17895,8 @@ a.sheet-subtitle:focus {
17862
17895
  font-size: 1.25rem;
17863
17896
  font-weight: 600;
17864
17897
  }
17865
- .sidebar-header .component-title a {
17898
+ .sidebar-header .component-title[href],
17899
+ .sidebar-header .component-title [href] {
17866
17900
  color: #272833;
17867
17901
  }
17868
17902
  .sidebar-header .component-subtitle {
@@ -17955,7 +17989,8 @@ a.sheet-subtitle:focus {
17955
17989
  .sidebar-light .sidebar-list-group .list-group-title {
17956
17990
  font-size: 1rem;
17957
17991
  }
17958
- .sidebar-light .sidebar-list-group .list-group-title a {
17992
+ .sidebar-light .sidebar-list-group .list-group-title[href],
17993
+ .sidebar-light .sidebar-list-group .list-group-title [href] {
17959
17994
  color: #272833;
17960
17995
  }
17961
17996
  .sidebar-light .sidebar-panel {
@@ -17964,7 +17999,8 @@ a.sheet-subtitle:focus {
17964
17999
  .sidebar-light .sidebar-dt {
17965
18000
  color: #6b6c7e;
17966
18001
  }
17967
- .sidebar-light .sidebar-dd a {
18002
+ .sidebar-light .sidebar-dd[href],
18003
+ .sidebar-light .sidebar-dd [href] {
17968
18004
  color: #272833;
17969
18005
  }
17970
18006
  .sidebar-light .panel-unstyled .panel-header.panel-header-link:focus {
@@ -18035,13 +18071,15 @@ a.sheet-subtitle:focus {
18035
18071
  .sidebar-dark .sidebar-header .component-title {
18036
18072
  color: inherit;
18037
18073
  }
18038
- .sidebar-dark .sidebar-header .component-title a {
18074
+ .sidebar-dark .sidebar-header .component-title[href],
18075
+ .sidebar-dark .sidebar-header .component-title [href] {
18039
18076
  color: inherit;
18040
18077
  }
18041
18078
  .sidebar-dark .sidebar-header .component-subtitle {
18042
18079
  color: inherit;
18043
18080
  }
18044
- .sidebar-dark .sidebar-header .component-subtitle a {
18081
+ .sidebar-dark .sidebar-header .component-subtitle[href],
18082
+ .sidebar-dark .sidebar-header .component-subtitle [href] {
18045
18083
  color: inherit;
18046
18084
  }
18047
18085
  .sidebar-dark .nav-nested .nav-link {
@@ -18633,7 +18671,8 @@ caption {
18633
18671
  margin-bottom: 0;
18634
18672
  color: #272833;
18635
18673
  }
18636
- .table-title a {
18674
+ .table-title[href],
18675
+ .table-title [href] {
18637
18676
  color: #272833;
18638
18677
  border-radius: 1px;
18639
18678
  display: inline-block;
@@ -18641,14 +18680,17 @@ caption {
18641
18680
  transition: box-shadow 0.15s ease-in-out;
18642
18681
  }
18643
18682
  @media (prefers-reduced-motion: reduce) {
18644
- .table-title a {
18683
+ .table-title[href],
18684
+ .table-title [href] {
18645
18685
  transition: none;
18646
18686
  }
18647
18687
  }
18648
- .table-title a:hover {
18688
+ .table-title[href]:hover,
18689
+ .table-title [href]:hover {
18649
18690
  color: #272833;
18650
18691
  }
18651
- .table-title a:focus {
18692
+ .table-title[href]:focus,
18693
+ .table-title [href]:focus {
18652
18694
  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
18653
18695
  outline: 0;
18654
18696
  }
@@ -18968,7 +19010,8 @@ caption {
18968
19010
  margin-bottom: 0;
18969
19011
  color: #272833;
18970
19012
  }
18971
- .table-list-title a {
19013
+ .table-list-title[href],
19014
+ .table-list-title [href] {
18972
19015
  color: #272833;
18973
19016
  border-radius: 1px;
18974
19017
  display: inline-block;
@@ -18976,14 +19019,17 @@ caption {
18976
19019
  transition: box-shadow 0.15s ease-in-out;
18977
19020
  }
18978
19021
  @media (prefers-reduced-motion: reduce) {
18979
- .table-list-title a {
19022
+ .table-list-title[href],
19023
+ .table-list-title [href] {
18980
19024
  transition: none;
18981
19025
  }
18982
19026
  }
18983
- .table-list-title a:hover {
19027
+ .table-list-title[href]:hover,
19028
+ .table-list-title [href]:hover {
18984
19029
  color: #272833;
18985
19030
  }
18986
- .table-list-title a:focus {
19031
+ .table-list-title[href]:focus,
19032
+ .table-list-title [href]:focus {
18987
19033
  box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
18988
19034
  outline: 0;
18989
19035
  }
@@ -20797,6 +20843,7 @@ caption {
20797
20843
  word-wrap: break-word;
20798
20844
  }
20799
20845
  .treeview-link {
20846
+ background-color: transparent;
20800
20847
  cursor: pointer;
20801
20848
  display: block;
20802
20849
  border-color: transparent;
@@ -20807,6 +20854,7 @@ caption {
20807
20854
  min-width: 100%;
20808
20855
  padding: 0;
20809
20856
  position: relative;
20857
+ text-align: left;
20810
20858
  -ms-user-select: none;
20811
20859
  -moz-user-select: none;
20812
20860
  -webkit-user-select: none;
@@ -20819,6 +20867,9 @@ caption {
20819
20867
  box-shadow: inset 0 0 0 0.125rem #80acff , inset 0 0 0 0.25rem #fff;
20820
20868
  outline: 0;
20821
20869
  }
20870
+ .treeview-link:disabled, .treeview-link.disabled {
20871
+ cursor: not-allowed;
20872
+ }
20822
20873
  .treeview-link.treeview-dropping-bottom {
20823
20874
  box-shadow: 0 2px 0 0 #80acff;
20824
20875
  }
@@ -20830,7 +20881,10 @@ caption {
20830
20881
  box-shadow: 0 -2px 0 0 #80acff;
20831
20882
  }
20832
20883
  .treeview-link.hover .component-action, .treeview-link:hover .component-action, .treeview-link.focus .component-action, .treeview-link:focus .component-action {
20833
- display: block;
20884
+ display: flex;
20885
+ }
20886
+ .treeview-link:disabled .component-action, .treeview-link.disabled .component-action {
20887
+ display: none;
20834
20888
  }
20835
20889
  .treeview-link.show .component-expander .component-expanded-d-none, .treeview-link[aria-expanded=true] .component-expander .component-expanded-d-none {
20836
20890
  display: none;
@@ -20871,6 +20925,10 @@ caption {
20871
20925
  .treeview-light .component-expander:hover {
20872
20926
  color: #0b5fff;
20873
20927
  }
20928
+ .treeview-light .component-expander:disabled, .treeview-light .component-expander.disabled {
20929
+ color: #6b6c7e;
20930
+ opacity: 0.5;
20931
+ }
20874
20932
  .treeview-light .component-expander.btn-secondary {
20875
20933
  background-color: #fff;
20876
20934
  }
@@ -20889,12 +20947,20 @@ caption {
20889
20947
  background-color: #f1f2f5;
20890
20948
  color: #272833;
20891
20949
  }
20950
+ .treeview-light .treeview-link:disabled, .treeview-light .treeview-link.disabled {
20951
+ background-color: transparent;
20952
+ color: rgba(107, 108, 126, 0.5);
20953
+ }
20892
20954
  .treeview-dark .component-expander {
20893
20955
  color: #a7a9bc;
20894
20956
  }
20895
20957
  .treeview-dark .component-expander:hover {
20896
20958
  color: #80acff;
20897
20959
  }
20960
+ .treeview-dark .component-expander:disabled, .treeview-dark .component-expander.disabled {
20961
+ color: #a7a9bc;
20962
+ opacity: 0.5;
20963
+ }
20898
20964
  .treeview-dark .treeview-link {
20899
20965
  color: #a7a9bc;
20900
20966
  }
@@ -20907,11 +20973,14 @@ caption {
20907
20973
  }
20908
20974
  .treeview-dark .treeview-link:disabled, .treeview-dark .treeview-link.disabled {
20909
20975
  background-color: transparent;
20910
- color: rgba(167, 169, 188, 0.04);
20976
+ color: rgba(167, 169, 188, 0.5);
20911
20977
  }
20912
20978
  .treeview-dark .component-action {
20913
20979
  color: #a7a9bc;
20914
20980
  }
20981
+ .treeview-dark .component-action:disabled, .treeview-dark .component-action.disabled {
20982
+ color: #a7a9bc;
20983
+ }
20915
20984
  .bg-checkered {
20916
20985
  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%);
20917
20986
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;