@clayui/css 3.40.1 → 3.41.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.
@@ -57,6 +57,7 @@ html:not(#__):not(#___) .cadmin {
57
57
  padding: 0;
58
58
  text-align: left;
59
59
  text-decoration: none;
60
+ text-decoration-color: currentcolor;
60
61
  text-indent: 0;
61
62
  text-shadow: none;
62
63
  text-transform: none;
@@ -168,6 +169,7 @@ html:not(#__):not(#___) .cadmin var {
168
169
  padding: 0;
169
170
  text-align: inherit;
170
171
  text-decoration: inherit;
172
+ text-decoration-color: inherit;
171
173
  text-indent: inherit;
172
174
  text-shadow: inherit;
173
175
  text-transform: inherit;
@@ -6395,8 +6397,24 @@ html:not(#__):not(#___) .cadmin select.form-control[size] {
6395
6397
  html:not(#__):not(#___) .cadmin select.form-control[size]:focus, html:not(#__):not(#___) .cadmin select.form-control[size].focus {
6396
6398
  background-image: none;
6397
6399
  }
6400
+ html:not(#__):not(#___) .cadmin select.form-control[size]:focus > option:checked, html:not(#__):not(#___) .cadmin select.form-control[size].focus > option:checked {
6401
+ background-image: linear-gradient(#ffa700, #ffa700);
6402
+ filter: invert(100%);
6403
+ }
6398
6404
  html:not(#__):not(#___) .cadmin select.form-control[size] option {
6399
- padding: 4px 8px;
6405
+ padding: 7px 8px;
6406
+ }
6407
+ html:not(#__):not(#___) .cadmin select.form-control[size] option:checked {
6408
+ background-image: linear-gradient(#e7e7ed, #e7e7ed);
6409
+ }
6410
+ @-moz-document url-prefix() {
6411
+ html:not(#__):not(#___) .cadmin select.form-control[size]:focus > option:checked, html:not(#__):not(#___) .cadmin select.form-control[size].focus > option:checked {
6412
+ background-image: linear-gradient(#004ad7, #004ad7);
6413
+ filter: invert(0);
6414
+ }
6415
+ html:not(#__):not(#___) .cadmin select.form-control[size] option {
6416
+ padding: 0.40625rem 0.5rem;
6417
+ }
6400
6418
  }
6401
6419
  html:not(#__):not(#___) .cadmin select.form-control[multiple] {
6402
6420
  background-image: none;
@@ -6409,8 +6427,24 @@ html:not(#__):not(#___) .cadmin select.form-control[multiple] {
6409
6427
  html:not(#__):not(#___) .cadmin select.form-control[multiple]:focus, html:not(#__):not(#___) .cadmin select.form-control[multiple].focus {
6410
6428
  background-image: none;
6411
6429
  }
6430
+ html:not(#__):not(#___) .cadmin select.form-control[multiple]:focus > option:checked, html:not(#__):not(#___) .cadmin select.form-control[multiple].focus > option:checked {
6431
+ background-image: linear-gradient(#ffa700, #ffa700);
6432
+ filter: invert(100%);
6433
+ }
6412
6434
  html:not(#__):not(#___) .cadmin select.form-control[multiple] option {
6413
- padding: 4px 8px;
6435
+ padding: 7px 8px;
6436
+ }
6437
+ html:not(#__):not(#___) .cadmin select.form-control[multiple] option:checked {
6438
+ background-image: linear-gradient(#e7e7ed, #e7e7ed);
6439
+ }
6440
+ @-moz-document url-prefix() {
6441
+ html:not(#__):not(#___) .cadmin select.form-control[multiple]:focus > option:checked, html:not(#__):not(#___) .cadmin select.form-control[multiple].focus > option:checked {
6442
+ background-image: linear-gradient(#004ad7, #004ad7);
6443
+ filter: invert(0);
6444
+ }
6445
+ html:not(#__):not(#___) .cadmin select.form-control[multiple] option {
6446
+ padding: 0.40625rem 0.5rem;
6447
+ }
6414
6448
  }
6415
6449
  html:not(#__):not(#___) .cadmin textarea.form-control,
6416
6450
  html:not(#__):not(#___) .cadmin textarea.form-control-plaintext,
@@ -6765,6 +6799,9 @@ html:not(#__):not(#___) .cadmin .link-outline {
6765
6799
  html:not(#__):not(#___) .cadmin .link-outline:hover {
6766
6800
  text-decoration: none;
6767
6801
  }
6802
+ html:not(#__):not(#___) .cadmin .link-outline:disabled:active, html:not(#__):not(#___) .cadmin .link-outline.disabled:active {
6803
+ pointer-events: none;
6804
+ }
6768
6805
  html:not(#__):not(#___) .cadmin .link-outline > .c-inner {
6769
6806
  margin-bottom: -7px;
6770
6807
  margin-left: -12px;
@@ -6965,6 +7002,9 @@ html:not(#__):not(#___) .cadmin .component-action:disabled, html:not(#__):not(#_
6965
7002
  cursor: not-allowed;
6966
7003
  opacity: 0.4;
6967
7004
  }
7005
+ html:not(#__):not(#___) .cadmin .component-action:disabled:active, html:not(#__):not(#___) .cadmin .component-action.disabled:active {
7006
+ pointer-events: none;
7007
+ }
6968
7008
  html:not(#__):not(#___) .cadmin .component-action[type]:focus {
6969
7009
  outline: 0;
6970
7010
  }
@@ -8082,12 +8122,14 @@ html:not(#__):not(#___) .cadmin .clay-dual-listbox-actions {
8082
8122
  }
8083
8123
  html:not(#__):not(#___) .cadmin .form-feedback-group {
8084
8124
  width: 100%;
8125
+ overflow-wrap: break-word;
8085
8126
  word-wrap: break-word;
8086
8127
  }
8087
8128
  html:not(#__):not(#___) .cadmin .form-feedback-item {
8088
8129
  font-size: 0.875rem;
8089
8130
  font-weight: 600;
8090
8131
  margin-top: 0.25rem;
8132
+ overflow-wrap: break-word;
8091
8133
  word-wrap: break-word;
8092
8134
  }
8093
8135
  html:not(#__):not(#___) .cadmin .form-feedback-indicator {
@@ -8103,6 +8145,7 @@ html:not(#__):not(#___) .cadmin .form-text {
8103
8145
  font-size: 14px;
8104
8146
  font-weight: 600;
8105
8147
  margin-top: 4px;
8148
+ overflow-wrap: break-word;
8106
8149
  word-wrap: break-word;
8107
8150
  }
8108
8151
  html:not(#__):not(#___) .cadmin .has-error .custom-control-label,
@@ -8143,23 +8186,26 @@ html:not(#__):not(#___) .cadmin .has-error select.form-control[multiple] {
8143
8186
  html:not(#__):not(#___) .cadmin .has-error .input-group-item.focus {
8144
8187
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #80acff;
8145
8188
  }
8146
- html:not(#__):not(#___) .cadmin .has-error .input-group-item.focus .form-control,
8147
- html:not(#__):not(#___) .cadmin .has-error .input-group-item.focus .input-group-inset-item {
8189
+ html:not(#__):not(#___) .cadmin .has-error .input-group-item.focus .input-group-inset {
8148
8190
  background-color: #feefef;
8149
8191
  border-color: #f48989;
8150
8192
  }
8151
- html:not(#__):not(#___) .cadmin .has-error .input-group-item .input-group-inset:focus {
8152
- box-shadow: none;
8153
- }
8154
- html:not(#__):not(#___) .cadmin .has-error .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
8193
+ html:not(#__):not(#___) .cadmin .has-error .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
8155
8194
  background-color: #feefef;
8156
8195
  border-color: #f48989;
8157
8196
  }
8158
- html:not(#__):not(#___) .cadmin .has-error .input-group .input-group-inset-item {
8197
+ html:not(#__):not(#___) .cadmin .has-error .input-group-item .input-group-inset ~ .input-group-inset-item {
8159
8198
  background-color: #feefef;
8160
8199
  border-color: #f48989;
8161
8200
  box-shadow: 0 0 rgba(0, 0, 0, 0);
8162
8201
  }
8202
+ html:not(#__):not(#___) .cadmin .has-error .input-group-item .input-group-inset:focus {
8203
+ box-shadow: none;
8204
+ }
8205
+ html:not(#__):not(#___) .cadmin .has-error .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
8206
+ background-color: #feefef;
8207
+ border-color: #f48989;
8208
+ }
8163
8209
  html:not(#__):not(#___) .cadmin .has-warning .custom-control-label,
8164
8210
  html:not(#__):not(#___) .cadmin .has-warning .form-check-label {
8165
8211
  color: #b95000;
@@ -8198,23 +8244,26 @@ html:not(#__):not(#___) .cadmin .has-warning select.form-control[multiple] {
8198
8244
  html:not(#__):not(#___) .cadmin .has-warning .input-group-item.focus {
8199
8245
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #80acff;
8200
8246
  }
8201
- html:not(#__):not(#___) .cadmin .has-warning .input-group-item.focus .form-control,
8202
- html:not(#__):not(#___) .cadmin .has-warning .input-group-item.focus .input-group-inset-item {
8247
+ html:not(#__):not(#___) .cadmin .has-warning .input-group-item.focus .input-group-inset {
8203
8248
  background-color: #fff4ec;
8204
8249
  border-color: #ff8f39;
8205
8250
  }
8206
- html:not(#__):not(#___) .cadmin .has-warning .input-group-item .input-group-inset:focus {
8207
- box-shadow: none;
8208
- }
8209
- html:not(#__):not(#___) .cadmin .has-warning .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
8251
+ html:not(#__):not(#___) .cadmin .has-warning .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
8210
8252
  background-color: #fff4ec;
8211
8253
  border-color: #ff8f39;
8212
8254
  }
8213
- html:not(#__):not(#___) .cadmin .has-warning .input-group .input-group-inset-item {
8255
+ html:not(#__):not(#___) .cadmin .has-warning .input-group-item .input-group-inset ~ .input-group-inset-item {
8214
8256
  background-color: #fff4ec;
8215
8257
  border-color: #ff8f39;
8216
8258
  box-shadow: 0 0 rgba(0, 0, 0, 0);
8217
8259
  }
8260
+ html:not(#__):not(#___) .cadmin .has-warning .input-group-item .input-group-inset:focus {
8261
+ box-shadow: none;
8262
+ }
8263
+ html:not(#__):not(#___) .cadmin .has-warning .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
8264
+ background-color: #fff4ec;
8265
+ border-color: #ff8f39;
8266
+ }
8218
8267
  html:not(#__):not(#___) .cadmin .has-success .custom-control-label,
8219
8268
  html:not(#__):not(#___) .cadmin .has-success .form-check-label {
8220
8269
  color: #287d3c;
@@ -8253,23 +8302,26 @@ html:not(#__):not(#___) .cadmin .has-success select.form-control[multiple] {
8253
8302
  html:not(#__):not(#___) .cadmin .has-success .input-group-item.focus {
8254
8303
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #80acff;
8255
8304
  }
8256
- html:not(#__):not(#___) .cadmin .has-success .input-group-item.focus .form-control,
8257
- html:not(#__):not(#___) .cadmin .has-success .input-group-item.focus .input-group-inset-item {
8305
+ html:not(#__):not(#___) .cadmin .has-success .input-group-item.focus .input-group-inset {
8258
8306
  background-color: #edf9f0;
8259
8307
  border-color: #5aca75;
8260
8308
  }
8261
- html:not(#__):not(#___) .cadmin .has-success .input-group-item .input-group-inset:focus {
8262
- box-shadow: none;
8263
- }
8264
- html:not(#__):not(#___) .cadmin .has-success .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
8309
+ html:not(#__):not(#___) .cadmin .has-success .input-group-item.focus .input-group-inset ~ .input-group-inset-item {
8265
8310
  background-color: #edf9f0;
8266
8311
  border-color: #5aca75;
8267
8312
  }
8268
- html:not(#__):not(#___) .cadmin .has-success .input-group .input-group-inset-item {
8313
+ html:not(#__):not(#___) .cadmin .has-success .input-group-item .input-group-inset ~ .input-group-inset-item {
8269
8314
  background-color: #edf9f0;
8270
8315
  border-color: #5aca75;
8271
8316
  box-shadow: 0 0 rgba(0, 0, 0, 0);
8272
8317
  }
8318
+ html:not(#__):not(#___) .cadmin .has-success .input-group-item .input-group-inset:focus {
8319
+ box-shadow: none;
8320
+ }
8321
+ html:not(#__):not(#___) .cadmin .has-success .input-group-item .input-group-inset:focus ~ .input-group-inset-item {
8322
+ background-color: #edf9f0;
8323
+ border-color: #5aca75;
8324
+ }
8273
8325
  html:not(#__):not(#___) .cadmin .input-group > .form-control,
8274
8326
  html:not(#__):not(#___) .cadmin .input-group > .form-control-plaintext {
8275
8327
  flex: 1 1 0%;
@@ -17165,54 +17217,16 @@ html:not(#__):not(#___) .cadmin .timeline-spacing-xl .timeline-item .timeline-in
17165
17217
  html:not(#__):not(#___) .cadmin .timeline-spacing-xl .timeline-increment-text {
17166
17218
  max-width: 75px;
17167
17219
  }
17168
- html:not(#__):not(#___) .cadmin .simple-toggle-switch.toggle-switch {
17169
- align-items: center;
17170
- display: inline-flex;
17171
- }
17172
- html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-check + .toggle-switch-label {
17173
- margin-right: 8px;
17174
- }
17175
- html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-label + .toggle-switch-check-bar {
17176
- margin-left: 8px;
17177
- }
17178
- html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-label {
17179
- line-height: 1;
17180
- margin-bottom: 0;
17181
- max-width: calc(
17182
- 100% - 56px
17183
- );
17184
- }
17185
- @media (max-width: 767.98px) {
17186
- html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-label {
17187
- max-width: calc(
17188
- 100% - 48px
17189
- );
17190
- }
17191
- }
17192
- html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-label {
17193
- margin-right: 8px;
17194
- }
17195
- html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-check-bar {
17196
- order: 5;
17197
- }
17198
- html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-check-bar .toggle-switch-bar {
17199
- order: 0;
17200
- }
17201
- html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-bar {
17202
- order: 5;
17203
- }
17204
- html:not(#__):not(#___) .cadmin label.toggle-switch {
17205
- cursor: pointer;
17206
- }
17207
- html:not(#__):not(#___) .cadmin label.toggle-switch.disabled {
17208
- cursor: not-allowed;
17209
- }
17210
17220
  html:not(#__):not(#___) .cadmin .toggle-switch {
17221
+ cursor: pointer;
17211
17222
  display: inline-block;
17212
17223
  font-weight: 600;
17213
17224
  max-width: 100%;
17214
17225
  position: relative;
17215
17226
  }
17227
+ html:not(#__):not(#___) .cadmin .toggle-switch.disabled {
17228
+ cursor: not-allowed;
17229
+ }
17216
17230
  html:not(#__):not(#___) .cadmin .toggle-switch.disabled .toggle-switch-label {
17217
17231
  color: #a7a9bc;
17218
17232
  cursor: not-allowed;
@@ -17247,13 +17261,7 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check {
17247
17261
  width: 48px;
17248
17262
  z-index: 2;
17249
17263
  }
17250
- @media (max-width: 767.98px) {
17251
- html:not(#__):not(#___) .cadmin .toggle-switch-check {
17252
- height: 24px;
17253
- width: 40px;
17254
- }
17255
- }
17256
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar {
17264
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar {
17257
17265
  display: inline-flex;
17258
17266
  font-size: 10px;
17259
17267
  height: 24px;
@@ -17261,9 +17269,31 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar
17261
17269
  position: relative;
17262
17270
  text-indent: 0;
17263
17271
  -ms-user-select: none;
17272
+ -moz-user-select: none;
17273
+ -webkit-user-select: none;
17264
17274
  user-select: none;
17265
17275
  }
17266
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar:after {
17276
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar::before {
17277
+ background-color: #a7a9bc;
17278
+ border-color: #a7a9bc;
17279
+ border-radius: 20px;
17280
+ border-style: solid;
17281
+ border-width: 1px;
17282
+ bottom: 0;
17283
+ content: " ";
17284
+ display: block;
17285
+ left: 0;
17286
+ position: absolute;
17287
+ top: 0;
17288
+ transition: background-color 100ms ease-in, border-color 100ms ease-in, box-shadow 150ms ease-in-out, color 100ms ease-in, left 100ms ease-in, right 100ms ease-in;
17289
+ width: 48px;
17290
+ }
17291
+ @media (prefers-reduced-motion: reduce) {
17292
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar::before {
17293
+ transition: none;
17294
+ }
17295
+ }
17296
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar::after {
17267
17297
  background-color: #fff;
17268
17298
  border-color: #fff;
17269
17299
  border-radius: 50%;
@@ -17279,31 +17309,31 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar:
17279
17309
  transition: background-color 100ms ease-in, border-color 100ms ease-in, box-shadow 150ms ease-in-out, color 100ms ease-in, left 100ms ease-in, right 100ms ease-in;
17280
17310
  width: 16px;
17281
17311
  }
17282
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar:before {
17283
- background-color: #a7a9bc;
17284
- border-color: #a7a9bc;
17285
- border-radius: 20px;
17286
- border-style: solid;
17287
- border-width: 1px;
17288
- bottom: 0;
17289
- content: " ";
17290
- display: block;
17291
- left: 0;
17292
- position: absolute;
17293
- top: 0;
17312
+ @media (prefers-reduced-motion: reduce) {
17313
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar::after {
17314
+ transition: none;
17315
+ }
17316
+ }
17317
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::before {
17294
17318
  transition: background-color 100ms ease-in, border-color 100ms ease-in, box-shadow 150ms ease-in-out, color 100ms ease-in, left 100ms ease-in, right 100ms ease-in;
17295
- width: 48px;
17296
17319
  }
17297
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:after {
17320
+ @media (prefers-reduced-motion: reduce) {
17321
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::before {
17322
+ transition: none;
17323
+ }
17324
+ }
17325
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
17298
17326
  content: attr(data-label-off);
17299
17327
  margin-left: 56px;
17300
17328
  transition: background-color 100ms ease-in, border-color 100ms ease-in, box-shadow 150ms ease-in-out, color 100ms ease-in, left 100ms ease-in, right 100ms ease-in;
17301
17329
  white-space: nowrap;
17302
17330
  }
17303
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:before {
17304
- transition: background-color 100ms ease-in, border-color 100ms ease-in, box-shadow 150ms ease-in-out, color 100ms ease-in, left 100ms ease-in, right 100ms ease-in;
17331
+ @media (prefers-reduced-motion: reduce) {
17332
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
17333
+ transition: none;
17334
+ }
17305
17335
  }
17306
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon {
17336
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
17307
17337
  color: #fff;
17308
17338
  left: 4px;
17309
17339
  line-height: 16px;
@@ -17315,131 +17345,164 @@ html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar
17315
17345
  width: 16px;
17316
17346
  z-index: 1;
17317
17347
  }
17318
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-on {
17348
+ @media (prefers-reduced-motion: reduce) {
17349
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
17350
+ transition: none;
17351
+ }
17352
+ }
17353
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on {
17319
17354
  left: 4px;
17320
17355
  opacity: 0;
17321
17356
  }
17322
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-off {
17357
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off {
17323
17358
  left: 28px;
17324
17359
  }
17325
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .button-icon {
17360
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .button-icon {
17326
17361
  color: #272833;
17327
17362
  }
17328
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .button-icon-on {
17363
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .button-icon-on {
17329
17364
  opacity: 0;
17330
17365
  }
17331
- html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar:after {
17332
- background-color: #fff;
17333
- border-color: #fff;
17334
- border-radius: 50%;
17335
- border-style: solid;
17336
- border-width: 1px;
17337
- left: 28px;
17366
+ html:not(#__):not(#___) .cadmin .toggle-switch-check:focus ~ .toggle-switch-bar::before {
17367
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #80acff;
17338
17368
  }
17339
- html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar:before {
17369
+ html:not(#__):not(#___) .cadmin .toggle-switch-check[disabled] ~ .toggle-switch-bar, html:not(#__):not(#___) .cadmin .toggle-switch-check:disabled ~ .toggle-switch-bar {
17370
+ cursor: not-allowed;
17371
+ opacity: 0.4;
17372
+ }
17373
+ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar::before {
17340
17374
  background-color: #0b5fff;
17341
17375
  border-color: #0b5fff;
17342
17376
  border-radius: 20px;
17343
17377
  border-style: solid;
17344
17378
  border-width: 1px;
17345
17379
  }
17346
- html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle:after {
17380
+ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar::after {
17381
+ background-color: #fff;
17382
+ border-color: #fff;
17383
+ border-radius: 50%;
17384
+ border-style: solid;
17385
+ border-width: 1px;
17386
+ left: 28px;
17387
+ }
17388
+ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle::after {
17347
17389
  content: attr(data-label-on);
17348
17390
  }
17349
17391
  html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon {
17350
17392
  color: #fff;
17351
17393
  }
17352
- html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
17353
- color: #0b5fff;
17354
- left: 28px;
17355
- }
17356
- html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-on,
17357
17394
  html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon-on {
17358
17395
  opacity: 1;
17359
17396
  }
17360
- html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-off,
17361
17397
  html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon-off {
17362
17398
  opacity: 0;
17363
17399
  }
17364
- html:not(#__):not(#___) .cadmin .toggle-switch-check:disabled ~ .toggle-switch-bar, html:not(#__):not(#___) .cadmin .toggle-switch-check.disabled ~ .toggle-switch-bar {
17365
- cursor: not-allowed;
17366
- opacity: 0.4;
17367
- }
17368
- html:not(#__):not(#___) .cadmin .toggle-switch-check:focus ~ .toggle-switch-bar:before {
17369
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #80acff;
17370
- }
17371
- html:not(#__):not(#___) .cadmin .toggle-switch-label {
17372
- display: block;
17373
- margin-bottom: 2px;
17374
- }
17375
- html:not(#__):not(#___) .cadmin .toggle-switch-text {
17376
- display: block;
17377
- font-size: 12px;
17378
- }
17379
- html:not(#__):not(#___) .cadmin .toggle-switch-text-left {
17380
- display: inline-flex;
17381
- line-height: 24px;
17382
- margin-right: 8px;
17400
+ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
17401
+ color: #0b5fff;
17402
+ left: 28px;
17383
17403
  }
17384
- html:not(#__):not(#___) .cadmin .toggle-switch-text-right {
17385
- display: inline-flex;
17386
- line-height: 24px;
17387
- margin-left: 8px;
17404
+ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-on {
17405
+ opacity: 1;
17388
17406
  }
17389
17407
  @media (max-width: 767.98px) {
17390
- html:not(#__):not(#___) .cadmin .toggle-switch-bar .toggle-switch-handle {
17391
- min-width: 40px;
17392
- }
17393
- html:not(#__):not(#___) .cadmin .toggle-switch-bar .toggle-switch-icon {
17394
- font-size: 10px;
17395
- }
17396
- html:not(#__):not(#___) .cadmin .toggle-switch-bar .button-icon {
17397
- font-size: 10px;
17408
+ html:not(#__):not(#___) .cadmin .toggle-switch-check {
17409
+ height: 24px;
17410
+ width: 40px;
17398
17411
  }
17399
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar {
17412
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar {
17400
17413
  height: 24px;
17401
17414
  line-height: 24px;
17402
17415
  text-indent: 0;
17403
17416
  }
17404
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar:after {
17417
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar::before {
17418
+ width: 40px;
17419
+ }
17420
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar::after {
17405
17421
  bottom: 4px;
17406
17422
  height: 16px;
17407
17423
  left: 4px;
17408
17424
  top: 4px;
17409
17425
  width: 16px;
17410
17426
  }
17411
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar:before {
17412
- width: 40px;
17427
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle {
17428
+ min-width: 40px;
17413
17429
  }
17414
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:after {
17430
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
17415
17431
  margin-left: 48px;
17416
17432
  }
17417
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon {
17433
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
17434
+ font-size: 10px;
17418
17435
  left: 4px;
17419
17436
  line-height: 16px;
17420
17437
  top: 4px;
17421
17438
  width: 16px;
17422
17439
  }
17423
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-on {
17440
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on {
17424
17441
  left: 4px;
17425
17442
  }
17426
- html:not(#__):not(#___) .cadmin .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-off {
17443
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off {
17427
17444
  left: 20px;
17428
17445
  }
17429
- html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar:after {
17446
+ html:not(#__):not(#___) .cadmin .toggle-switch-check ~ .toggle-switch-bar .button-icon {
17447
+ font-size: 10px;
17448
+ }
17449
+ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar::after {
17430
17450
  left: 20px;
17431
17451
  }
17432
- html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle:after {
17452
+ html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle::after {
17433
17453
  margin-left: 48px;
17434
17454
  }
17435
17455
  html:not(#__):not(#___) .cadmin .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon {
17436
17456
  left: 20px;
17437
17457
  }
17438
- html:not(#__):not(#___) .cadmin .toggle-switch-text-left,
17458
+ }
17459
+ html:not(#__):not(#___) .cadmin .toggle-switch-label {
17460
+ display: block;
17461
+ margin-bottom: 2px;
17462
+ }
17463
+ html:not(#__):not(#___) .cadmin .toggle-switch-text {
17464
+ display: block;
17465
+ font-size: 12px;
17466
+ }
17467
+ html:not(#__):not(#___) .cadmin .toggle-switch-text-left {
17468
+ display: inline-flex;
17469
+ line-height: 24px;
17470
+ margin-right: 8px;
17471
+ }
17439
17472
  html:not(#__):not(#___) .cadmin .toggle-switch-text-right {
17440
- line-height: 24px;
17473
+ display: inline-flex;
17474
+ line-height: 24px;
17475
+ margin-left: 8px;
17476
+ }
17477
+ html:not(#__):not(#___) .cadmin .simple-toggle-switch {
17478
+ align-items: center;
17479
+ display: inline-flex;
17480
+ }
17481
+ html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-label {
17482
+ line-height: 1;
17483
+ margin-bottom: 0;
17484
+ max-width: calc( 100% - 56px );
17485
+ }
17486
+ @media (max-width: 767.98px) {
17487
+ html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-label {
17488
+ max-width: calc( 100% - 48px );
17441
17489
  }
17442
17490
  }
17491
+ html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-check + .toggle-switch-label {
17492
+ margin-right: 8px;
17493
+ }
17494
+ html:not(#__):not(#___) .cadmin .simple-toggle-switch .toggle-switch-label + .toggle-switch-check-bar {
17495
+ margin-left: 8px;
17496
+ }
17497
+ html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-check-bar {
17498
+ order: 5;
17499
+ }
17500
+ html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-check ~ .toggle-switch-bar {
17501
+ order: 5;
17502
+ }
17503
+ html:not(#__):not(#___) .cadmin .simple-toggle-switch-reverse .toggle-switch-label {
17504
+ margin-right: 8px;
17505
+ }
17443
17506
  html:not(#__):not(#___) .cadmin .tooltip {
17444
17507
  display: block;
17445
17508
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";