amis 1.4.0 → 1.4.1-echarts-5.3.1

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 (87) hide show
  1. package/lib/components/Badge.d.ts +2 -1
  2. package/lib/components/Badge.js +33 -4
  3. package/lib/components/Badge.js.map +2 -2
  4. package/lib/components/Button.d.ts +24 -22
  5. package/lib/components/Button.js +13 -7
  6. package/lib/components/Button.js.map +2 -2
  7. package/lib/components/RichText.d.ts +6 -1
  8. package/lib/components/RichText.js +243 -8
  9. package/lib/components/RichText.js.map +2 -2
  10. package/lib/components/calendar/DaysView.js +2 -2
  11. package/lib/components/calendar/DaysView.js.map +2 -2
  12. package/lib/components/icons.js +2 -0
  13. package/lib/components/icons.js.map +2 -2
  14. package/lib/helper.css.map +1 -1
  15. package/lib/icons/loading-outline.js +7 -0
  16. package/lib/index.js +1 -1
  17. package/lib/renderers/Action.d.ts +9 -1
  18. package/lib/renderers/Action.js +5 -5
  19. package/lib/renderers/Action.js.map +2 -2
  20. package/lib/renderers/DropDownButton.d.ts +4 -0
  21. package/lib/renderers/DropDownButton.js +5 -3
  22. package/lib/renderers/DropDownButton.js.map +2 -2
  23. package/lib/renderers/Nav.d.ts +52 -22
  24. package/lib/renderers/Nav.js +100 -15
  25. package/lib/renderers/Nav.js.map +2 -2
  26. package/lib/renderers/Page.js +1 -1
  27. package/lib/renderers/Page.js.map +2 -2
  28. package/lib/themes/ang-ie11.css +350 -54
  29. package/lib/themes/ang.css +350 -54
  30. package/lib/themes/ang.css.map +1 -1
  31. package/lib/themes/antd-ie11.css +350 -54
  32. package/lib/themes/antd.css +350 -54
  33. package/lib/themes/antd.css.map +1 -1
  34. package/lib/themes/cxd-ie11.css +458 -174
  35. package/lib/themes/cxd.css +458 -174
  36. package/lib/themes/cxd.css.map +1 -1
  37. package/lib/themes/dark-ie11.css +350 -54
  38. package/lib/themes/dark.css +350 -54
  39. package/lib/themes/dark.css.map +1 -1
  40. package/lib/themes/default.css +458 -174
  41. package/lib/themes/default.css.map +1 -1
  42. package/lib/utils/helper.js.map +2 -2
  43. package/package.json +46 -39
  44. package/schema.json +200 -15
  45. package/scss/_mixins.scss +29 -0
  46. package/scss/_properties.scss +23 -11
  47. package/scss/components/_badge.scss +52 -1
  48. package/scss/components/_button.scss +35 -3
  49. package/scss/components/_image-gallery.scss +1 -1
  50. package/scss/components/_nav.scss +109 -35
  51. package/scss/themes/_cxd-variables.scss +20 -20
  52. package/sdk/ang-ie11.css +449 -56
  53. package/sdk/ang.css +459 -56
  54. package/sdk/antd-ie11.css +439 -48
  55. package/sdk/antd.css +459 -56
  56. package/sdk/charts.js +13 -13
  57. package/sdk/color-picker.js +69 -65
  58. package/sdk/cropperjs.js +2 -2
  59. package/sdk/cxd-ie11.css +908 -517
  60. package/sdk/cxd.css +567 -176
  61. package/sdk/dark-ie11.css +449 -56
  62. package/sdk/dark.css +459 -56
  63. package/sdk/exceljs.js +1 -1
  64. package/sdk/helper.css.map +1 -1
  65. package/sdk/markdown.js +69 -69
  66. package/sdk/papaparse.js +1 -1
  67. package/sdk/renderers/Form/CityDB.js +1 -1
  68. package/sdk/rest.js +22 -28
  69. package/sdk/rich-text.js +62 -64
  70. package/sdk/sdk-ie11.css +908 -517
  71. package/sdk/sdk.css +567 -176
  72. package/sdk/sdk.js +1145 -1141
  73. package/sdk/thirds/hls.js/hls.js +1 -1
  74. package/sdk/thirds/mpegts.js/mpegts.js +1 -1
  75. package/sdk/tinymce.js +57 -57
  76. package/sdk.zip +0 -0
  77. package/src/components/Badge.tsx +78 -22
  78. package/src/components/Button.tsx +23 -7
  79. package/src/components/RichText.tsx +284 -3
  80. package/src/components/calendar/DaysView.tsx +2 -2
  81. package/src/components/icons.tsx +2 -0
  82. package/src/icons/loading-outline.svg +4 -0
  83. package/src/renderers/Action.tsx +66 -13
  84. package/src/renderers/DropDownButton.tsx +13 -4
  85. package/src/renderers/Nav.tsx +165 -36
  86. package/src/renderers/Page.tsx +1 -1
  87. package/src/utils/helper.ts +1 -0
@@ -3,8 +3,8 @@
3
3
  --black: #141316;
4
4
  --white: #fff;
5
5
  --primary: #0983ff;
6
- --primary-onHover: #0070e2;
7
- --primary-onActive: #006ad5;
6
+ --primary-onHover: #4F86F4;
7
+ --primary-onActive:#1C53C1;
8
8
  --secondary: #6c757d;
9
9
  --secondary-onHover: #5a6268;
10
10
  --secondary-onActive: #545b62;
@@ -164,12 +164,12 @@
164
164
  --Button--default-bg: var(--white);
165
165
  --Button--default-border: var(--borderColor);
166
166
  --Button--default-color: var(--text-color);
167
- --Button--default-onActive-bg: #e6e6e6;
168
- --Button--default-onActive-border: #adb4bf;
169
- --Button--default-onActive-color: var(--Button--default-color);
170
- --Button--default-onHover-bg: #ececec;
171
- --Button--default-onHover-border: #b4bbc5;
172
- --Button--default-onHover-color: var(--Button--default-color);
167
+ --Button--default-onActive-bg: var(--white);
168
+ --Button--default-onActive-border: var(--primary-onActive);
169
+ --Button--default-onActive-color: var(--primary-onActive);
170
+ --Button--default-onHover-bg: var(--white);
171
+ --Button--default-onHover-border: var(--primary);
172
+ --Button--default-onHover-color: var(--primary);
173
173
  --Button--iconOnly-minWidthRate: 4 / 3;
174
174
  --Button--info-bg: var(--info);
175
175
  --Button--info-border: var(--Button--info-bg);
@@ -202,7 +202,8 @@
202
202
  --Button--light-onHover-color: var(--Button--light-color);
203
203
  --Button--link-color: var(--primary);
204
204
  --Button--link-onDisabled-color: #4b5563;
205
- --Button--link-onHover-color: var(--text--loud-color);
205
+ --Button--link-onHover-color: var(--primary-onHover);
206
+ --Button--link-onActive-color: var(--primary-onActive);
206
207
  --Button--md-fontSize: var(--Button-fontSize);
207
208
  --Button--md-height: var(--Button-height);
208
209
  --Button--md-lineHeight: var(--Button-lineHeight);
@@ -217,10 +218,10 @@
217
218
  --Button--primary-border: var(--Button--primary-bg);
218
219
  --Button--primary-color: var(--button-color);
219
220
  --Button--primary-onActive-bg: var(--primary-onActive);
220
- --Button--primary-onActive-border: #0063c8;
221
+ --Button--primary-onActive-border: var(--primary-onActive);
221
222
  --Button--primary-onActive-color: var(--Button--primary-color);
222
223
  --Button--primary-onHover-bg: var(--primary-onHover);
223
- --Button--primary-onHover-border: var(--primary-onActive);
224
+ --Button--primary-onHover-border: var(--primary-onHover);
224
225
  --Button--primary-onHover-color: var(--Button--primary-color);
225
226
  --Button--secondary-bg: var(--secondary);
226
227
  --Button--secondary-border: var(--Button--secondary-bg);
@@ -251,6 +252,14 @@
251
252
  --Button--success-onHover-bg: var(--success-onHover);
252
253
  --Button--success-onHover-border: var(--success-onActive);
253
254
  --Button--success-onHover-color: var(--Button--success-color);
255
+ --Button--enhance-border: var(--primary);
256
+ --Button--enhance-color: var(--primary);
257
+ --Button--enhance-onActive-bg: var(--white);
258
+ --Button--enhance-onActive-border: var(--primary-onActive);
259
+ --Button--enhance-onActive-color: var(--primary-onActive);
260
+ --Button--enhance-onHover-bg: var(--white);
261
+ --Button--enhance-onHover-border: var(--primary-onHover);
262
+ --Button--enhance-onHover-color: var(--primary-onHover);
254
263
  --Button--warning-bg: var(--warning);
255
264
  --Button--warning-border: var(--Button--warning-bg);
256
265
  --Button--warning-color: var(--button-color);
@@ -281,12 +290,15 @@
281
290
  --Button-lineHeight: var(--Form-input-lineHeight);
282
291
  --Button-mimWidth: auto;
283
292
  --Button-onActive-boxShadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
293
+ --Button-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
294
+ --Button-animation-spin: spin 1s infinite linear;
284
295
  --Button-onActive-color: var(--primary);
285
296
  --Button-onActive-border: var(--primary);
286
297
  --Button-onDisabled-borderColor: #dee2e6;
287
298
  --Button-onDisabled-opacity: 0.65;
288
299
  --Button-onFocus-boxShadow: none;
289
300
  --Button-paddingX: 0.75rem;
301
+ --Button-paddingX-right: 0.625rem;
290
302
  --Button-paddingY: calc(
291
303
  (
292
304
  var(--Button-height) - var(--Button-borderWidth) * 2 -
@@ -3071,6 +3083,15 @@ img.dark-AsideNav-itemIcon {
3071
3083
  .dark-Button > .pull-right {
3072
3084
  margin-left: var(--Button-paddingX);
3073
3085
  }
3086
+ .dark-Button .dark-Button--loading:first-child:not(:last-child):not(.pull-right),
3087
+ .dark-Button > svg.icon:not(:last-child):not(.pull-right),
3088
+ .dark-Button > .pull-left {
3089
+ margin-right: var(--Button-paddingX);
3090
+ }
3091
+ .dark-Button .dark-Button--loading:last-child:not(:first-child):not(.pull-left),
3092
+ .dark-Button > .pull-right {
3093
+ margin-left: var(--Button-paddingX);
3094
+ }
3074
3095
  .dark-Button img.dark-Button-icon {
3075
3096
  height: var(--Button-fontSize);
3076
3097
  vertical-align: middle;
@@ -3083,14 +3104,20 @@ img.dark-AsideNav-itemIcon {
3083
3104
  box-shadow: var(--Button-onFocus-boxShadow);
3084
3105
  }
3085
3106
  .dark-Button.is-disabled, .dark-Button:disabled {
3086
- opacity: var(--Button-onDisabled-opacity);
3087
3107
  filter: grayscale(100%);
3088
3108
  box-shadow: none;
3089
3109
  cursor: not-allowed;
3110
+ color: var(--text--muted-color);
3111
+ pointer-events: auto;
3112
+ border: none;
3113
+ background: #F2F3F3;
3090
3114
  }
3091
3115
  .dark-Button:not(:disabled):not(.is-disabled) {
3092
3116
  cursor: pointer;
3093
3117
  }
3118
+ .dark-Button.cxd-Button--link.is-disabled {
3119
+ background: transparent;
3120
+ }
3094
3121
  .dark-Button > .pull-left,
3095
3122
  .dark-Button > .pull-right {
3096
3123
  line-height: inherit;
@@ -3118,6 +3145,11 @@ fieldset:disabled a.dark-Button {
3118
3145
  background: var(--Button--primary-onHover-bg);
3119
3146
  border-color: var(--Button--primary-onHover-border);
3120
3147
  }
3148
+ .dark-Button--primary:not(:disabled):not(.is-disabled):hover:active {
3149
+ color: var(--Button--primary-onActive-color);
3150
+ background: var(--Button--primary-onActive-bg);
3151
+ border-color: var(--Button--primary-onActive-border);
3152
+ }
3121
3153
  .dark-Button--primary:hover:focus {
3122
3154
  box-shadow: var(--Button-boxShadow);
3123
3155
  }
@@ -3134,6 +3166,11 @@ fieldset:disabled a.dark-Button {
3134
3166
  background: var(--Button--secondary-onHover-bg);
3135
3167
  border-color: var(--Button--secondary-onHover-border);
3136
3168
  }
3169
+ .dark-Button--secondary:not(:disabled):not(.is-disabled):hover:active {
3170
+ color: var(--Button--secondary-onActive-color);
3171
+ background: var(--Button--secondary-onActive-bg);
3172
+ border-color: var(--Button--secondary-onActive-border);
3173
+ }
3137
3174
  .dark-Button--secondary:hover:focus {
3138
3175
  box-shadow: var(--Button-boxShadow);
3139
3176
  }
@@ -3150,10 +3187,36 @@ fieldset:disabled a.dark-Button {
3150
3187
  background: var(--Button--success-onHover-bg);
3151
3188
  border-color: var(--Button--success-onHover-border);
3152
3189
  }
3190
+ .dark-Button--success:not(:disabled):not(.is-disabled):hover:active {
3191
+ color: var(--Button--success-onActive-color);
3192
+ background: var(--Button--success-onActive-bg);
3193
+ border-color: var(--Button--success-onActive-border);
3194
+ }
3153
3195
  .dark-Button--success:hover:focus {
3154
3196
  box-shadow: var(--Button-boxShadow);
3155
3197
  }
3156
3198
 
3199
+ .dark-Button--enhance {
3200
+ color: var(--Button--enhance-color);
3201
+ background: var(--Button--enhance-bg);
3202
+ border-color: var(--Button--enhance-border);
3203
+ box-shadow: var(--Button-boxShadow);
3204
+ text-shadow: var(--Button-textShadow);
3205
+ }
3206
+ .dark-Button--enhance:not(:disabled):not(.is-disabled):hover {
3207
+ color: var(--Button--enhance-onHover-color);
3208
+ background: var(--Button--enhance-onHover-bg);
3209
+ border-color: var(--Button--enhance-onHover-border);
3210
+ }
3211
+ .dark-Button--enhance:not(:disabled):not(.is-disabled):hover:active {
3212
+ color: var(--Button--enhance-onActive-color);
3213
+ background: var(--Button--enhance-onActive-bg);
3214
+ border-color: var(--Button--enhance-onActive-border);
3215
+ }
3216
+ .dark-Button--enhance:hover:focus {
3217
+ box-shadow: var(--Button-boxShadow);
3218
+ }
3219
+
3157
3220
  .dark-Button--info {
3158
3221
  color: var(--Button--info-color);
3159
3222
  background: var(--Button--info-bg);
@@ -3166,6 +3229,11 @@ fieldset:disabled a.dark-Button {
3166
3229
  background: var(--Button--info-onHover-bg);
3167
3230
  border-color: var(--Button--info-onHover-border);
3168
3231
  }
3232
+ .dark-Button--info:not(:disabled):not(.is-disabled):hover:active {
3233
+ color: var(--Button--info-onActive-color);
3234
+ background: var(--Button--info-onActive-bg);
3235
+ border-color: var(--Button--info-onActive-border);
3236
+ }
3169
3237
  .dark-Button--info:hover:focus {
3170
3238
  box-shadow: var(--Button-boxShadow);
3171
3239
  }
@@ -3182,6 +3250,11 @@ fieldset:disabled a.dark-Button {
3182
3250
  background: var(--Button--warning-onHover-bg);
3183
3251
  border-color: var(--Button--warning-onHover-border);
3184
3252
  }
3253
+ .dark-Button--warning:not(:disabled):not(.is-disabled):hover:active {
3254
+ color: var(--Button--warning-onActive-color);
3255
+ background: var(--Button--warning-onActive-bg);
3256
+ border-color: var(--Button--warning-onActive-border);
3257
+ }
3185
3258
  .dark-Button--warning:hover:focus {
3186
3259
  box-shadow: var(--Button-boxShadow);
3187
3260
  }
@@ -3198,6 +3271,11 @@ fieldset:disabled a.dark-Button {
3198
3271
  background: var(--Button--danger-onHover-bg);
3199
3272
  border-color: var(--Button--danger-onHover-border);
3200
3273
  }
3274
+ .dark-Button--danger:not(:disabled):not(.is-disabled):hover:active {
3275
+ color: var(--Button--danger-onActive-color);
3276
+ background: var(--Button--danger-onActive-bg);
3277
+ border-color: var(--Button--danger-onActive-border);
3278
+ }
3201
3279
  .dark-Button--danger:hover:focus {
3202
3280
  box-shadow: var(--Button-boxShadow);
3203
3281
  }
@@ -3214,6 +3292,11 @@ fieldset:disabled a.dark-Button {
3214
3292
  background: var(--Button--light-onHover-bg);
3215
3293
  border-color: var(--Button--light-onHover-border);
3216
3294
  }
3295
+ .dark-Button--light:not(:disabled):not(.is-disabled):hover:active {
3296
+ color: var(--Button--light-onActive-color);
3297
+ background: var(--Button--light-onActive-bg);
3298
+ border-color: var(--Button--light-onActive-border);
3299
+ }
3217
3300
  .dark-Button--light:hover:focus {
3218
3301
  box-shadow: var(--Button-boxShadow);
3219
3302
  }
@@ -3230,6 +3313,11 @@ fieldset:disabled a.dark-Button {
3230
3313
  background: var(--Button--dark-onHover-bg);
3231
3314
  border-color: var(--Button--dark-onHover-border);
3232
3315
  }
3316
+ .dark-Button--dark:not(:disabled):not(.is-disabled):hover:active {
3317
+ color: var(--Button--dark-onActive-color);
3318
+ background: var(--Button--dark-onActive-bg);
3319
+ border-color: var(--Button--dark-onActive-border);
3320
+ }
3233
3321
  .dark-Button--dark:hover:focus {
3234
3322
  box-shadow: var(--Button-boxShadow);
3235
3323
  }
@@ -3246,6 +3334,11 @@ fieldset:disabled a.dark-Button {
3246
3334
  background: var(--Button--default-onHover-bg);
3247
3335
  border-color: var(--Button--default-onHover-border);
3248
3336
  }
3337
+ .dark-Button--default:not(:disabled):not(.is-disabled):hover:active {
3338
+ color: var(--Button--default-onActive-color);
3339
+ background: var(--Button--default-onActive-bg);
3340
+ border-color: var(--Button--default-onActive-border);
3341
+ }
3249
3342
  .dark-Button--default:hover:focus {
3250
3343
  box-shadow: var(--Button-boxShadow);
3251
3344
  }
@@ -3266,6 +3359,15 @@ fieldset:disabled a.dark-Button {
3266
3359
  .dark-Button--xs > .pull-right {
3267
3360
  margin-left: var(--Button--xs-paddingX);
3268
3361
  }
3362
+ .dark-Button--xs .dark-Button--loading:first-child:not(:last-child):not(.pull-right),
3363
+ .dark-Button--xs > svg.icon:not(:last-child):not(.pull-right),
3364
+ .dark-Button--xs > .pull-left {
3365
+ margin-right: var(--Button--xs-paddingX);
3366
+ }
3367
+ .dark-Button--xs .dark-Button--loading:last-child:not(:first-child):not(.pull-left),
3368
+ .dark-Button--xs > .pull-right {
3369
+ margin-left: var(--Button--xs-paddingX);
3370
+ }
3269
3371
  .dark-Button--xs img.dark-Button-icon {
3270
3372
  height: var(--Button-fontSize);
3271
3373
  vertical-align: middle;
@@ -3290,6 +3392,15 @@ fieldset:disabled a.dark-Button {
3290
3392
  .dark-Button--sm > .pull-right {
3291
3393
  margin-left: var(--Button--sm-paddingX);
3292
3394
  }
3395
+ .dark-Button--sm .dark-Button--loading:first-child:not(:last-child):not(.pull-right),
3396
+ .dark-Button--sm > svg.icon:not(:last-child):not(.pull-right),
3397
+ .dark-Button--sm > .pull-left {
3398
+ margin-right: var(--Button--sm-paddingX);
3399
+ }
3400
+ .dark-Button--sm .dark-Button--loading:last-child:not(:first-child):not(.pull-left),
3401
+ .dark-Button--sm > .pull-right {
3402
+ margin-left: var(--Button--sm-paddingX);
3403
+ }
3293
3404
  .dark-Button--sm img.dark-Button-icon {
3294
3405
  height: var(--Button-fontSize);
3295
3406
  vertical-align: middle;
@@ -3314,6 +3425,15 @@ fieldset:disabled a.dark-Button {
3314
3425
  .dark-Button--md > .pull-right {
3315
3426
  margin-left: var(--Button--md-paddingX);
3316
3427
  }
3428
+ .dark-Button--md .dark-Button--loading:first-child:not(:last-child):not(.pull-right),
3429
+ .dark-Button--md > svg.icon:not(:last-child):not(.pull-right),
3430
+ .dark-Button--md > .pull-left {
3431
+ margin-right: var(--Button--md-paddingX);
3432
+ }
3433
+ .dark-Button--md .dark-Button--loading:last-child:not(:first-child):not(.pull-left),
3434
+ .dark-Button--md > .pull-right {
3435
+ margin-left: var(--Button--md-paddingX);
3436
+ }
3317
3437
  .dark-Button--md img.dark-Button-icon {
3318
3438
  height: var(--Button-fontSize);
3319
3439
  vertical-align: middle;
@@ -3338,6 +3458,15 @@ fieldset:disabled a.dark-Button {
3338
3458
  .dark-Button--lg > .pull-right {
3339
3459
  margin-left: var(--Button--lg-paddingX);
3340
3460
  }
3461
+ .dark-Button--lg .dark-Button--loading:first-child:not(:last-child):not(.pull-right),
3462
+ .dark-Button--lg > svg.icon:not(:last-child):not(.pull-right),
3463
+ .dark-Button--lg > .pull-left {
3464
+ margin-right: var(--Button--lg-paddingX);
3465
+ }
3466
+ .dark-Button--lg .dark-Button--loading:last-child:not(:first-child):not(.pull-left),
3467
+ .dark-Button--lg > .pull-right {
3468
+ margin-left: var(--Button--lg-paddingX);
3469
+ }
3341
3470
  .dark-Button--lg img.dark-Button-icon {
3342
3471
  height: var(--Button-fontSize);
3343
3472
  vertical-align: middle;
@@ -3362,6 +3491,13 @@ fieldset:disabled a.dark-Button {
3362
3491
  line-height: 1;
3363
3492
  }
3364
3493
 
3494
+ .dark-Button--loading {
3495
+ transition: --Button-transition;
3496
+ }
3497
+ .dark-Button--loading svg {
3498
+ animation: var(--Button-animation-spin);
3499
+ }
3500
+
3365
3501
  .dark-Button--link {
3366
3502
  width: auto;
3367
3503
  min-width: auto;
@@ -3373,13 +3509,16 @@ fieldset:disabled a.dark-Button {
3373
3509
  }
3374
3510
  .dark-Button--link:hover:focus {
3375
3511
  color: var(--Button--link-onHover-color);
3376
- text-decoration: var(--link-onHover-decoration);
3512
+ box-shadow: none;
3513
+ }
3514
+ .dark-Button--link:hover:active {
3515
+ color: var(--Button--link-onActive-color);
3377
3516
  box-shadow: none;
3378
3517
  }
3379
3518
  .dark-Button--link:disabled, .dark-Button--link.is-disabled {
3380
3519
  color: var(--text--muted-color);
3381
3520
  pointer-events: none;
3382
- background: transparent;
3521
+ background: #F2F3F3;
3383
3522
  }
3384
3523
 
3385
3524
  .dark-Button--block {
@@ -3448,7 +3587,7 @@ input[type=button].dark-Button--block {
3448
3587
  display: inline-block;
3449
3588
  position: relative;
3450
3589
  }
3451
- .dark-Badge-text, .dark-Badge-dot {
3590
+ .dark-Badge-text, .dark-Badge-dot, .dark-Badge-ribbon {
3452
3591
  background: var(--danger);
3453
3592
  position: absolute;
3454
3593
  top: 0;
@@ -3504,6 +3643,49 @@ input[type=button].dark-Button--block {
3504
3643
  height: var(--Badge-size);
3505
3644
  border-radius: 50%;
3506
3645
  }
3646
+ .dark-Badge-ribbon-out {
3647
+ overflow: hidden;
3648
+ position: absolute;
3649
+ top: 0;
3650
+ bottom: 0;
3651
+ right: 0;
3652
+ }
3653
+ .dark-Badge-ribbon {
3654
+ color: var(--Badge-color);
3655
+ height: var(--Badge-size);
3656
+ line-height: var(--Badge-size);
3657
+ transform: translateX(calc(50% - 5px)) rotate(45deg) scale(0.7);
3658
+ transform-origin: 50% 0;
3659
+ border-radius: 0;
3660
+ text-align: center;
3661
+ width: 62.5rem;
3662
+ top: 5px;
3663
+ }
3664
+ .dark-Badge-ribbon-out--top-left, .dark-Badge-ribbon-out--bottom-left {
3665
+ left: 0;
3666
+ right: auto;
3667
+ }
3668
+ .dark-Badge-ribbon--top-left {
3669
+ transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(0.7);
3670
+ left: 0;
3671
+ right: auto;
3672
+ }
3673
+ .dark-Badge-ribbon--bottom-left {
3674
+ transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(0.7);
3675
+ transform-origin: 50% 100%;
3676
+ left: 0;
3677
+ right: auto;
3678
+ bottom: 5px;
3679
+ top: auto;
3680
+ }
3681
+ .dark-Badge-ribbon--bottom-right {
3682
+ transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(0.7);
3683
+ transform-origin: 50% 100%;
3684
+ left: auto;
3685
+ right: 0;
3686
+ bottom: 5px;
3687
+ top: auto;
3688
+ }
3507
3689
  @keyframes badgeDotAnimation {
3508
3690
  0% {
3509
3691
  transform: scale(0.8);
@@ -4574,6 +4756,15 @@ input[type=button].dark-Button--block {
4574
4756
  .dark-ArrayInput-addBtn > .pull-right {
4575
4757
  margin-left: var(--Combo-addBtn-paddingX);
4576
4758
  }
4759
+ .dark-ArrayInput-addBtn .dark-Button--loading:first-child:not(:last-child):not(.pull-right),
4760
+ .dark-ArrayInput-addBtn > svg.icon:not(:last-child):not(.pull-right),
4761
+ .dark-ArrayInput-addBtn > .pull-left {
4762
+ margin-right: var(--Combo-addBtn-paddingX);
4763
+ }
4764
+ .dark-ArrayInput-addBtn .dark-Button--loading:last-child:not(:first-child):not(.pull-left),
4765
+ .dark-ArrayInput-addBtn > .pull-right {
4766
+ margin-left: var(--Combo-addBtn-paddingX);
4767
+ }
4577
4768
  .dark-ArrayInput-addBtn img.dark-Button-icon {
4578
4769
  height: var(--Button-fontSize);
4579
4770
  vertical-align: middle;
@@ -4583,6 +4774,11 @@ input[type=button].dark-Button--block {
4583
4774
  background: var(--Combo-addBtn-onHover-bg);
4584
4775
  border-color: var(--Combo-addBtn-onHover-border);
4585
4776
  }
4777
+ .dark-ArrayInput-addBtn:not(:disabled):not(.is-disabled):hover:active {
4778
+ color: var(--Combo-addBtn-onActive-color);
4779
+ background: var(--Combo-addBtn-onActive-bg);
4780
+ border-color: var(--Combo-addBtn-onActive-border);
4781
+ }
4586
4782
  .dark-ArrayInput-addBtn:hover:focus {
4587
4783
  box-shadow: var(--Button-boxShadow);
4588
4784
  }
@@ -5057,6 +5253,7 @@ input[type=button].dark-Button--block {
5057
5253
  .dark-Nav--tabs .dark-Nav-item {
5058
5254
  margin-bottom: calc(var(--Tabs-borderWidth) * -1);
5059
5255
  display: inline-block;
5256
+ position: relative;
5060
5257
  }
5061
5258
  .dark-Nav--tabs .dark-Nav-item > a {
5062
5259
  font-size: var(--Tabs-linkFontSize);
@@ -5068,7 +5265,7 @@ input[type=button].dark-Button--block {
5068
5265
  color: var(--Tabs-color);
5069
5266
  text-decoration: none;
5070
5267
  margin-right: 0.125rem;
5071
- padding: var(--gap-sm) var(--gap-base);
5268
+ padding: var(--gap-sm) var(--gap-xl);
5072
5269
  cursor: pointer;
5073
5270
  }
5074
5271
  .dark-Nav--tabs .dark-Nav-item:hover > a,
@@ -5091,89 +5288,145 @@ input[type=button].dark-Button--block {
5091
5288
  .dark-Nav--stacked {
5092
5289
  min-height: 3.125rem;
5093
5290
  }
5094
- .dark-Nav--stacked .dark-Nav-item {
5291
+ .dark-Nav--stacked .dark-Nav-item, .dark-Nav--stacked .dark-Badge {
5095
5292
  position: relative;
5293
+ display: flex;
5294
+ flex-wrap: wrap;
5295
+ align-items: stretch;
5296
+ width: 100%;
5096
5297
  }
5097
- .dark-Nav--stacked .dark-Nav-item > a {
5098
- display: block;
5298
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemDrager, .dark-Nav--stacked .dark-Badge .dark-Nav-itemDrager {
5299
+ cursor: move;
5300
+ position: absolute;
5301
+ left: 0;
5302
+ top: 0.6875rem;
5303
+ display: none;
5304
+ }
5305
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemDrager > a, .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemDrager > .dark-Badge > a, .dark-Nav--stacked .dark-Badge .dark-Nav-itemDrager > a, .dark-Nav--stacked .dark-Badge .dark-Nav-itemDrager > .dark-Badge > a {
5306
+ color: var(--icon-color);
5307
+ }
5308
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemDrager > a:hover, .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemDrager > .dark-Badge > a:hover, .dark-Nav--stacked .dark-Badge .dark-Nav-itemDrager > a:hover, .dark-Nav--stacked .dark-Badge .dark-Nav-itemDrager > .dark-Badge > a:hover {
5309
+ color: var(--icon-onHover-color);
5310
+ }
5311
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemDrager svg, .dark-Nav--stacked .dark-Badge .dark-Nav-itemDrager svg {
5312
+ width: 1rem;
5313
+ height: 1rem;
5314
+ }
5315
+ .dark-Nav--stacked .dark-Nav-item > .dark-Nav-item-badgeText, .dark-Nav--stacked .dark-Badge > .dark-Nav-item-badgeText {
5316
+ position: absolute;
5317
+ top: 0;
5318
+ bottom: 0;
5319
+ width: 2.1875rem;
5320
+ overflow: hidden;
5321
+ }
5322
+ .dark-Nav--stacked .dark-Nav-item > .dark-Nav-item-badgeText > span, .dark-Nav--stacked .dark-Badge > .dark-Nav-item-badgeText > span {
5323
+ position: absolute;
5324
+ top: 0.125rem;
5325
+ left: -0.8125rem;
5326
+ transform: rotate(-45deg);
5327
+ width: 3.125rem;
5328
+ font-size: 12px;
5329
+ text-align: center;
5330
+ color: var(--white);
5331
+ background: var(--success);
5332
+ }
5333
+ .dark-Nav--stacked .dark-Nav-item > .dark-Nav-item-atcions, .dark-Nav--stacked .dark-Badge > .dark-Nav-item-atcions {
5334
+ display: flex;
5335
+ align-items: center;
5336
+ }
5337
+ .dark-Nav--stacked .dark-Nav-item > a,
5338
+ .dark-Nav--stacked .dark-Nav-item > .dark-Badge > a, .dark-Nav--stacked .dark-Badge > a,
5339
+ .dark-Nav--stacked .dark-Badge > .dark-Badge > a {
5340
+ display: flex;
5341
+ align-items: center;
5099
5342
  outline: none;
5100
5343
  color: var(--Nav-item-color);
5101
5344
  text-decoration: none;
5102
- padding: var(--gap-sm) var(--gap-base);
5345
+ padding: var(--gap-sm) var(--gap-sm);
5103
5346
  cursor: pointer;
5104
5347
  background: var(--Nav-item-bg);
5105
5348
  border-radius: var(--Nav-item-borderRadius);
5106
5349
  text-overflow: ellipsis;
5107
- }
5108
- .dark-Nav--stacked .dark-Nav-item > a::after {
5109
- border-left: var(--Nav-item-onActive-borderLeft);
5110
- position: absolute;
5111
- left: 0;
5112
- top: 0;
5113
- content: "";
5114
- width: 1px;
5115
- height: 100%;
5116
- transform: scaleY(0.0001);
5117
- transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
5118
- }
5119
- .dark-Nav--stacked .dark-Nav-item.has-sub > a {
5120
- padding-right: calc(var(--gap-base) + var(--gap-sm));
5350
+ flex: 1;
5121
5351
  }
5122
5352
  .dark-Nav--stacked .dark-Nav-item > a:hover,
5123
- .dark-Nav--stacked .dark-Nav-item > a:focus {
5353
+ .dark-Nav--stacked .dark-Nav-item > a:focus,
5354
+ .dark-Nav--stacked .dark-Nav-item > a:hover + .dark-Nav-item-atcions,
5355
+ .dark-Nav--stacked .dark-Nav-item > a:focus + .dark-Nav-item-atcions,
5356
+ .dark-Nav--stacked .dark-Nav-item > .dark-Badge > a:hover,
5357
+ .dark-Nav--stacked .dark-Nav-item > .dark-Badge > a:focus,
5358
+ .dark-Nav--stacked .dark-Nav-item > .dark-Badge > a:hover + .dark-Nav-item-atcions,
5359
+ .dark-Nav--stacked .dark-Nav-item > .dark-Badge > a:focus + .dark-Nav-item-atcions, .dark-Nav--stacked .dark-Badge > a:hover,
5360
+ .dark-Nav--stacked .dark-Badge > a:focus,
5361
+ .dark-Nav--stacked .dark-Badge > a:hover + .dark-Nav-item-atcions,
5362
+ .dark-Nav--stacked .dark-Badge > a:focus + .dark-Nav-item-atcions,
5363
+ .dark-Nav--stacked .dark-Badge > .dark-Badge > a:hover,
5364
+ .dark-Nav--stacked .dark-Badge > .dark-Badge > a:focus,
5365
+ .dark-Nav--stacked .dark-Badge > .dark-Badge > a:hover + .dark-Nav-item-atcions,
5366
+ .dark-Nav--stacked .dark-Badge > .dark-Badge > a:focus + .dark-Nav-item-atcions {
5124
5367
  border-color: var(--Nav-item-onHover-color);
5125
5368
  text-decoration: none;
5126
5369
  background: var(--Nav-item-onHover-bg);
5370
+ z-index: 9999;
5371
+ }
5372
+ .dark-Nav--stacked .dark-Nav-item > a:hover > .dark-Nav-itemDrager,
5373
+ .dark-Nav--stacked .dark-Nav-item > a:focus > .dark-Nav-itemDrager,
5374
+ .dark-Nav--stacked .dark-Nav-item > .dark-Badge > a:hover > .dark-Nav-itemDrager,
5375
+ .dark-Nav--stacked .dark-Nav-item > .dark-Badge > a:focus > .dark-Nav-itemDrager, .dark-Nav--stacked .dark-Badge > a:hover > .dark-Nav-itemDrager,
5376
+ .dark-Nav--stacked .dark-Badge > a:focus > .dark-Nav-itemDrager,
5377
+ .dark-Nav--stacked .dark-Badge > .dark-Badge > a:hover > .dark-Nav-itemDrager,
5378
+ .dark-Nav--stacked .dark-Badge > .dark-Badge > a:focus > .dark-Nav-itemDrager {
5379
+ display: block;
5127
5380
  }
5128
- .dark-Nav--stacked .dark-Nav-item.disabled > a, .dark-Nav--stacked .dark-Nav-item.is-disabled > a {
5381
+ .dark-Nav--stacked .dark-Nav-item.disabled > a, .dark-Nav--stacked .dark-Nav-item.is-disabled > a, .dark-Nav--stacked .dark-Nav-item.disabled > .dark-Badge > a, .dark-Nav--stacked .dark-Nav-item.is-disabled > .dark-Badge > a, .dark-Nav--stacked .dark-Badge.disabled > a, .dark-Nav--stacked .dark-Badge.is-disabled > a, .dark-Nav--stacked .dark-Badge.disabled > .dark-Badge > a, .dark-Nav--stacked .dark-Badge.is-disabled > .dark-Badge > a {
5129
5382
  color: var(--Nav-item-onDisabled-color);
5130
5383
  background: transparent;
5131
5384
  pointer-events: none;
5132
5385
  }
5133
- .dark-Nav--stacked .dark-Nav-item.active > a, .dark-Nav--stacked .dark-Nav-item.is-active > a {
5386
+ .dark-Nav--stacked .dark-Nav-item.active, .dark-Nav--stacked .dark-Nav-item.is-active, .dark-Nav--stacked .dark-Badge.active, .dark-Nav--stacked .dark-Badge.is-active {
5387
+ background: var(--Nav-item-onActive-bg) !important;
5388
+ }
5389
+ .dark-Nav--stacked .dark-Nav-item.active > a, .dark-Nav--stacked .dark-Nav-item.is-active > .dark-Nav-item-atcions, .dark-Nav--stacked .dark-Nav-item.is-active > a, .dark-Nav--stacked .dark-Nav-item.active > .dark-Badge > a, .dark-Nav--stacked .dark-Nav-item.is-active > .dark-Badge > .dark-Nav-item-atcions, .dark-Nav--stacked .dark-Nav-item.is-active > .dark-Badge > a, .dark-Nav--stacked .dark-Badge.active > a, .dark-Nav--stacked .dark-Badge.is-active > .dark-Nav-item-atcions, .dark-Nav--stacked .dark-Badge.is-active > a, .dark-Nav--stacked .dark-Badge.active > .dark-Badge > a, .dark-Nav--stacked .dark-Badge.is-active > .dark-Badge > .dark-Nav-item-atcions, .dark-Nav--stacked .dark-Badge.is-active > .dark-Badge > a {
5134
5390
  color: var(--Nav-item-onActive-color);
5135
- background: var(--Nav-item-onActive-bg);
5136
- padding-left: 0.75rem;
5137
5391
  position: relative;
5138
5392
  }
5139
- .dark-Nav--stacked .dark-Nav-item.active > a::after, .dark-Nav--stacked .dark-Nav-item.is-active > a::after {
5393
+ .dark-Nav--stacked .dark-Nav-item.active > a::after, .dark-Nav--stacked .dark-Nav-item.is-active > .dark-Nav-item-atcions::after, .dark-Nav--stacked .dark-Nav-item.is-active > a::after, .dark-Nav--stacked .dark-Nav-item.active > .dark-Badge > a::after, .dark-Nav--stacked .dark-Nav-item.is-active > .dark-Badge > .dark-Nav-item-atcions::after, .dark-Nav--stacked .dark-Nav-item.is-active > .dark-Badge > a::after, .dark-Nav--stacked .dark-Badge.active > a::after, .dark-Nav--stacked .dark-Badge.is-active > .dark-Nav-item-atcions::after, .dark-Nav--stacked .dark-Badge.is-active > a::after, .dark-Nav--stacked .dark-Badge.active > .dark-Badge > a::after, .dark-Nav--stacked .dark-Badge.is-active > .dark-Badge > .dark-Nav-item-atcions::after, .dark-Nav--stacked .dark-Badge.is-active > .dark-Badge > a::after {
5140
5394
  transform: scaleY(1);
5141
5395
  }
5142
- .dark-Nav--stacked .dark-Nav-item.is-unfolded > .dark-Nav-itemToggler {
5396
+ .dark-Nav--stacked .dark-Nav-item.is-unfolded > a .dark-Nav-itemToggler, .dark-Nav--stacked .dark-Nav-item.is-unfolded > .dark-Badge > a .dark-Nav-itemToggler, .dark-Nav--stacked .dark-Badge.is-unfolded > a .dark-Nav-itemToggler, .dark-Nav--stacked .dark-Badge.is-unfolded > .dark-Badge > a .dark-Nav-itemToggler {
5143
5397
  transform: rotate(180deg) scale(0.8);
5144
5398
  }
5145
- .dark-Nav--stacked .dark-Nav-item.is-unfolded > .dark-Nav-subItems {
5399
+ .dark-Nav--stacked .dark-Nav-item.is-unfolded > .dark-Nav-subItems, .dark-Nav--stacked .dark-Nav-item.is-unfolded > .dark-Badge > .dark-Nav-subItems, .dark-Nav--stacked .dark-Badge.is-unfolded > .dark-Nav-subItems, .dark-Nav--stacked .dark-Badge.is-unfolded > .dark-Badge > .dark-Nav-subItems {
5146
5400
  display: block;
5147
5401
  }
5148
- .dark-Nav--stacked .dark-Nav-item .dark-Nav-spinner {
5402
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-spinner, .dark-Nav--stacked .dark-Badge .dark-Nav-spinner {
5149
5403
  position: absolute;
5150
5404
  right: 0.625rem;
5151
5405
  top: 0.5rem;
5152
5406
  }
5153
- .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemToggler {
5154
- position: absolute;
5155
- right: 0;
5156
- top: 0.1875rem;
5157
- width: 1.875rem;
5158
- height: 1.875rem;
5407
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemToggler, .dark-Nav--stacked .dark-Badge .dark-Nav-itemToggler {
5408
+ float: left;
5409
+ width: 1.5rem;
5410
+ height: 1.5rem;
5159
5411
  text-align: center;
5160
- line-height: 1.875rem;
5412
+ line-height: 1.5rem;
5161
5413
  vertical-align: middle;
5162
5414
  cursor: pointer;
5163
5415
  transform: scale(0.8);
5164
5416
  transition: transform var(--animation-duration);
5165
5417
  }
5166
- .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemToggler > svg {
5418
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-itemToggler > svg, .dark-Nav--stacked .dark-Badge .dark-Nav-itemToggler > svg {
5167
5419
  width: 10px;
5168
5420
  height: 10px;
5169
5421
  top: 0;
5170
5422
  }
5171
- .dark-Nav--stacked .dark-Nav-item .dark-Nav-subItems {
5423
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-subItems, .dark-Nav--stacked .dark-Badge .dark-Nav-subItems {
5172
5424
  display: none;
5173
5425
  padding-left: 0;
5174
5426
  list-style: none;
5427
+ width: 100%;
5175
5428
  }
5176
- .dark-Nav--stacked .dark-Nav-item .dark-Nav-item {
5429
+ .dark-Nav--stacked .dark-Nav-item .dark-Nav-item, .dark-Nav--stacked .dark-Badge .dark-Nav-item {
5177
5430
  font-size: var(--Nav-subItem-fontSize);
5178
5431
  }
5179
5432
 
@@ -9344,7 +9597,7 @@ input[type=button].dark-Button--block {
9344
9597
  display: none;
9345
9598
  }
9346
9599
  .dark-ImageGallery-item.is-active {
9347
- border: 1px solid #108cee;
9600
+ border: 1px solid var(--primary);
9348
9601
  }
9349
9602
  .dark-ImageGallery-item.is-active:after {
9350
9603
  display: none;
@@ -12540,6 +12793,11 @@ fieldset.dark-Collapse--lg:after {
12540
12793
  background: var(--Calendar-btn-onHover-bg);
12541
12794
  border-color: var(--Calendar-btn-onHover-border);
12542
12795
  }
12796
+ .rdtBtn:not(:disabled):not(.is-disabled):hover:active {
12797
+ color: var(--Calendar-btn-onActive-color);
12798
+ background: var(--Calendar-btn-onActive-bg);
12799
+ border-color: var(--Calendar-btn-onActive-border);
12800
+ }
12543
12801
  .rdtBtn:hover:focus {
12544
12802
  box-shadow: var(--Button-boxShadow);
12545
12803
  }
@@ -12558,6 +12816,11 @@ fieldset.dark-Collapse--lg:after {
12558
12816
  background: var(--Calendar-btnCancel-onHover-bg);
12559
12817
  border-color: var(--Calendar-btnCancel-onHover-border);
12560
12818
  }
12819
+ .rdtBtnCancel:not(:disabled):not(.is-disabled):hover:active {
12820
+ color: var(--Calendar-btnCancel-onActive-color);
12821
+ background: var(--Calendar-btnCancel-onActive-bg);
12822
+ border-color: var(--Calendar-btnCancel-onActive-border);
12823
+ }
12561
12824
  .rdtBtnCancel:hover:focus {
12562
12825
  box-shadow: var(--Button-boxShadow);
12563
12826
  }
@@ -12845,6 +13108,11 @@ td.rdtQuarter.rdtDisabled > span {
12845
13108
  background: var(--ImageControl-addBtn-onHover-bg);
12846
13109
  border-color: var(--ImageControl-addBtn-onHover-border);
12847
13110
  }
13111
+ .dark-ImageControl-addBtn:not(:disabled):not(.is-disabled):hover:active {
13112
+ color: var(--ImageControl-addBtn-onActive-color);
13113
+ background: var(--ImageControl-addBtn-onActive-bg);
13114
+ border-color: var(--ImageControl-addBtn-onActive-border);
13115
+ }
12848
13116
  .dark-ImageControl-addBtn:hover:focus {
12849
13117
  box-shadow: var(--Button-boxShadow);
12850
13118
  }
@@ -13921,6 +14189,15 @@ td.rdtQuarter.rdtDisabled > span {
13921
14189
  .dark-Combo-addBtn > .pull-right {
13922
14190
  margin-left: var(--Combo-addBtn-paddingX);
13923
14191
  }
14192
+ .dark-Combo-addBtn .dark-Button--loading:first-child:not(:last-child):not(.pull-right),
14193
+ .dark-Combo-addBtn > svg.icon:not(:last-child):not(.pull-right),
14194
+ .dark-Combo-addBtn > .pull-left {
14195
+ margin-right: var(--Combo-addBtn-paddingX);
14196
+ }
14197
+ .dark-Combo-addBtn .dark-Button--loading:last-child:not(:first-child):not(.pull-left),
14198
+ .dark-Combo-addBtn > .pull-right {
14199
+ margin-left: var(--Combo-addBtn-paddingX);
14200
+ }
13924
14201
  .dark-Combo-addBtn img.dark-Button-icon {
13925
14202
  height: var(--Button-fontSize);
13926
14203
  vertical-align: middle;
@@ -13930,6 +14207,11 @@ td.rdtQuarter.rdtDisabled > span {
13930
14207
  background: var(--Combo-addBtn-onHover-bg);
13931
14208
  border-color: var(--Combo-addBtn-onHover-border);
13932
14209
  }
14210
+ .dark-Combo-addBtn:not(:disabled):not(.is-disabled):hover:active {
14211
+ color: var(--Combo-addBtn-onActive-color);
14212
+ background: var(--Combo-addBtn-onActive-bg);
14213
+ border-color: var(--Combo-addBtn-onActive-border);
14214
+ }
13933
14215
  .dark-Combo-addBtn:hover:focus {
13934
14216
  box-shadow: var(--Button-boxShadow);
13935
14217
  }
@@ -14479,6 +14761,15 @@ td.rdtQuarter.rdtDisabled > span {
14479
14761
  .dark-TagControl-sugItem > .pull-right {
14480
14762
  margin-left: var(--TagControl-sugBtn-paddingX);
14481
14763
  }
14764
+ .dark-TagControl-sugItem .dark-Button--loading:first-child:not(:last-child):not(.pull-right),
14765
+ .dark-TagControl-sugItem > svg.icon:not(:last-child):not(.pull-right),
14766
+ .dark-TagControl-sugItem > .pull-left {
14767
+ margin-right: var(--TagControl-sugBtn-paddingX);
14768
+ }
14769
+ .dark-TagControl-sugItem .dark-Button--loading:last-child:not(:first-child):not(.pull-left),
14770
+ .dark-TagControl-sugItem > .pull-right {
14771
+ margin-left: var(--TagControl-sugBtn-paddingX);
14772
+ }
14482
14773
  .dark-TagControl-sugItem img.dark-Button-icon {
14483
14774
  height: var(--Button-fontSize);
14484
14775
  vertical-align: middle;
@@ -14488,6 +14779,11 @@ td.rdtQuarter.rdtDisabled > span {
14488
14779
  background: var(--TagControl-sugBtn-onHover-bg);
14489
14780
  border-color: var(--TagControl-sugBtn-onHover-border);
14490
14781
  }
14782
+ .dark-TagControl-sugItem:not(:disabled):not(.is-disabled):hover:active {
14783
+ color: var(--TagControl-sugBtn-onActive-color);
14784
+ background: var(--TagControl-sugBtn-onActive-bg);
14785
+ border-color: var(--TagControl-sugBtn-onActive-border);
14786
+ }
14491
14787
  .dark-TagControl-sugItem:hover:focus {
14492
14788
  box-shadow: var(--Button-boxShadow);
14493
14789
  }