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: #1c2b36;
4
4
  --white: #fff;
5
5
  --primary: #7266ba;
6
- --primary-onHover: #5b4eac;
7
- --primary-onActive: #564aa3;
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: #52469b;
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 -
@@ -2987,6 +2999,15 @@ img.a-AsideNav-itemIcon {
2987
2999
  .a-Button > .pull-right {
2988
3000
  margin-left: var(--Button-paddingX);
2989
3001
  }
3002
+ .a-Button .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3003
+ .a-Button > svg.icon:not(:last-child):not(.pull-right),
3004
+ .a-Button > .pull-left {
3005
+ margin-right: var(--Button-paddingX);
3006
+ }
3007
+ .a-Button .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3008
+ .a-Button > .pull-right {
3009
+ margin-left: var(--Button-paddingX);
3010
+ }
2990
3011
  .a-Button img.a-Button-icon {
2991
3012
  height: var(--Button-fontSize);
2992
3013
  vertical-align: middle;
@@ -2999,14 +3020,20 @@ img.a-AsideNav-itemIcon {
2999
3020
  box-shadow: var(--Button-onFocus-boxShadow);
3000
3021
  }
3001
3022
  .a-Button.is-disabled, .a-Button:disabled {
3002
- opacity: var(--Button-onDisabled-opacity);
3003
3023
  filter: grayscale(100%);
3004
3024
  box-shadow: none;
3005
3025
  cursor: not-allowed;
3026
+ color: var(--text--muted-color);
3027
+ pointer-events: auto;
3028
+ border: none;
3029
+ background: #F2F3F3;
3006
3030
  }
3007
3031
  .a-Button:not(:disabled):not(.is-disabled) {
3008
3032
  cursor: pointer;
3009
3033
  }
3034
+ .a-Button.cxd-Button--link.is-disabled {
3035
+ background: transparent;
3036
+ }
3010
3037
  .a-Button > .pull-left,
3011
3038
  .a-Button > .pull-right {
3012
3039
  line-height: inherit;
@@ -3034,6 +3061,11 @@ fieldset:disabled a.a-Button {
3034
3061
  background: var(--Button--primary-onHover-bg);
3035
3062
  border-color: var(--Button--primary-onHover-border);
3036
3063
  }
3064
+ .a-Button--primary:not(:disabled):not(.is-disabled):hover:active {
3065
+ color: var(--Button--primary-onActive-color);
3066
+ background: var(--Button--primary-onActive-bg);
3067
+ border-color: var(--Button--primary-onActive-border);
3068
+ }
3037
3069
  .a-Button--primary:hover:focus {
3038
3070
  box-shadow: var(--Button-boxShadow);
3039
3071
  }
@@ -3050,6 +3082,11 @@ fieldset:disabled a.a-Button {
3050
3082
  background: var(--Button--secondary-onHover-bg);
3051
3083
  border-color: var(--Button--secondary-onHover-border);
3052
3084
  }
3085
+ .a-Button--secondary:not(:disabled):not(.is-disabled):hover:active {
3086
+ color: var(--Button--secondary-onActive-color);
3087
+ background: var(--Button--secondary-onActive-bg);
3088
+ border-color: var(--Button--secondary-onActive-border);
3089
+ }
3053
3090
  .a-Button--secondary:hover:focus {
3054
3091
  box-shadow: var(--Button-boxShadow);
3055
3092
  }
@@ -3066,10 +3103,36 @@ fieldset:disabled a.a-Button {
3066
3103
  background: var(--Button--success-onHover-bg);
3067
3104
  border-color: var(--Button--success-onHover-border);
3068
3105
  }
3106
+ .a-Button--success:not(:disabled):not(.is-disabled):hover:active {
3107
+ color: var(--Button--success-onActive-color);
3108
+ background: var(--Button--success-onActive-bg);
3109
+ border-color: var(--Button--success-onActive-border);
3110
+ }
3069
3111
  .a-Button--success:hover:focus {
3070
3112
  box-shadow: var(--Button-boxShadow);
3071
3113
  }
3072
3114
 
3115
+ .a-Button--enhance {
3116
+ color: var(--Button--enhance-color);
3117
+ background: var(--Button--enhance-bg);
3118
+ border-color: var(--Button--enhance-border);
3119
+ box-shadow: var(--Button-boxShadow);
3120
+ text-shadow: var(--Button-textShadow);
3121
+ }
3122
+ .a-Button--enhance:not(:disabled):not(.is-disabled):hover {
3123
+ color: var(--Button--enhance-onHover-color);
3124
+ background: var(--Button--enhance-onHover-bg);
3125
+ border-color: var(--Button--enhance-onHover-border);
3126
+ }
3127
+ .a-Button--enhance:not(:disabled):not(.is-disabled):hover:active {
3128
+ color: var(--Button--enhance-onActive-color);
3129
+ background: var(--Button--enhance-onActive-bg);
3130
+ border-color: var(--Button--enhance-onActive-border);
3131
+ }
3132
+ .a-Button--enhance:hover:focus {
3133
+ box-shadow: var(--Button-boxShadow);
3134
+ }
3135
+
3073
3136
  .a-Button--info {
3074
3137
  color: var(--Button--info-color);
3075
3138
  background: var(--Button--info-bg);
@@ -3082,6 +3145,11 @@ fieldset:disabled a.a-Button {
3082
3145
  background: var(--Button--info-onHover-bg);
3083
3146
  border-color: var(--Button--info-onHover-border);
3084
3147
  }
3148
+ .a-Button--info:not(:disabled):not(.is-disabled):hover:active {
3149
+ color: var(--Button--info-onActive-color);
3150
+ background: var(--Button--info-onActive-bg);
3151
+ border-color: var(--Button--info-onActive-border);
3152
+ }
3085
3153
  .a-Button--info:hover:focus {
3086
3154
  box-shadow: var(--Button-boxShadow);
3087
3155
  }
@@ -3098,6 +3166,11 @@ fieldset:disabled a.a-Button {
3098
3166
  background: var(--Button--warning-onHover-bg);
3099
3167
  border-color: var(--Button--warning-onHover-border);
3100
3168
  }
3169
+ .a-Button--warning:not(:disabled):not(.is-disabled):hover:active {
3170
+ color: var(--Button--warning-onActive-color);
3171
+ background: var(--Button--warning-onActive-bg);
3172
+ border-color: var(--Button--warning-onActive-border);
3173
+ }
3101
3174
  .a-Button--warning:hover:focus {
3102
3175
  box-shadow: var(--Button-boxShadow);
3103
3176
  }
@@ -3114,6 +3187,11 @@ fieldset:disabled a.a-Button {
3114
3187
  background: var(--Button--danger-onHover-bg);
3115
3188
  border-color: var(--Button--danger-onHover-border);
3116
3189
  }
3190
+ .a-Button--danger:not(:disabled):not(.is-disabled):hover:active {
3191
+ color: var(--Button--danger-onActive-color);
3192
+ background: var(--Button--danger-onActive-bg);
3193
+ border-color: var(--Button--danger-onActive-border);
3194
+ }
3117
3195
  .a-Button--danger:hover:focus {
3118
3196
  box-shadow: var(--Button-boxShadow);
3119
3197
  }
@@ -3130,6 +3208,11 @@ fieldset:disabled a.a-Button {
3130
3208
  background: var(--Button--light-onHover-bg);
3131
3209
  border-color: var(--Button--light-onHover-border);
3132
3210
  }
3211
+ .a-Button--light:not(:disabled):not(.is-disabled):hover:active {
3212
+ color: var(--Button--light-onActive-color);
3213
+ background: var(--Button--light-onActive-bg);
3214
+ border-color: var(--Button--light-onActive-border);
3215
+ }
3133
3216
  .a-Button--light:hover:focus {
3134
3217
  box-shadow: var(--Button-boxShadow);
3135
3218
  }
@@ -3146,6 +3229,11 @@ fieldset:disabled a.a-Button {
3146
3229
  background: var(--Button--dark-onHover-bg);
3147
3230
  border-color: var(--Button--dark-onHover-border);
3148
3231
  }
3232
+ .a-Button--dark:not(:disabled):not(.is-disabled):hover:active {
3233
+ color: var(--Button--dark-onActive-color);
3234
+ background: var(--Button--dark-onActive-bg);
3235
+ border-color: var(--Button--dark-onActive-border);
3236
+ }
3149
3237
  .a-Button--dark:hover:focus {
3150
3238
  box-shadow: var(--Button-boxShadow);
3151
3239
  }
@@ -3162,6 +3250,11 @@ fieldset:disabled a.a-Button {
3162
3250
  background: var(--Button--default-onHover-bg);
3163
3251
  border-color: var(--Button--default-onHover-border);
3164
3252
  }
3253
+ .a-Button--default:not(:disabled):not(.is-disabled):hover:active {
3254
+ color: var(--Button--default-onActive-color);
3255
+ background: var(--Button--default-onActive-bg);
3256
+ border-color: var(--Button--default-onActive-border);
3257
+ }
3165
3258
  .a-Button--default:hover:focus {
3166
3259
  box-shadow: var(--Button-boxShadow);
3167
3260
  }
@@ -3182,6 +3275,15 @@ fieldset:disabled a.a-Button {
3182
3275
  .a-Button--xs > .pull-right {
3183
3276
  margin-left: var(--Button--xs-paddingX);
3184
3277
  }
3278
+ .a-Button--xs .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3279
+ .a-Button--xs > svg.icon:not(:last-child):not(.pull-right),
3280
+ .a-Button--xs > .pull-left {
3281
+ margin-right: var(--Button--xs-paddingX);
3282
+ }
3283
+ .a-Button--xs .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3284
+ .a-Button--xs > .pull-right {
3285
+ margin-left: var(--Button--xs-paddingX);
3286
+ }
3185
3287
  .a-Button--xs img.a-Button-icon {
3186
3288
  height: var(--Button-fontSize);
3187
3289
  vertical-align: middle;
@@ -3206,6 +3308,15 @@ fieldset:disabled a.a-Button {
3206
3308
  .a-Button--sm > .pull-right {
3207
3309
  margin-left: var(--Button--sm-paddingX);
3208
3310
  }
3311
+ .a-Button--sm .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3312
+ .a-Button--sm > svg.icon:not(:last-child):not(.pull-right),
3313
+ .a-Button--sm > .pull-left {
3314
+ margin-right: var(--Button--sm-paddingX);
3315
+ }
3316
+ .a-Button--sm .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3317
+ .a-Button--sm > .pull-right {
3318
+ margin-left: var(--Button--sm-paddingX);
3319
+ }
3209
3320
  .a-Button--sm img.a-Button-icon {
3210
3321
  height: var(--Button-fontSize);
3211
3322
  vertical-align: middle;
@@ -3230,6 +3341,15 @@ fieldset:disabled a.a-Button {
3230
3341
  .a-Button--md > .pull-right {
3231
3342
  margin-left: var(--Button--md-paddingX);
3232
3343
  }
3344
+ .a-Button--md .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3345
+ .a-Button--md > svg.icon:not(:last-child):not(.pull-right),
3346
+ .a-Button--md > .pull-left {
3347
+ margin-right: var(--Button--md-paddingX);
3348
+ }
3349
+ .a-Button--md .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3350
+ .a-Button--md > .pull-right {
3351
+ margin-left: var(--Button--md-paddingX);
3352
+ }
3233
3353
  .a-Button--md img.a-Button-icon {
3234
3354
  height: var(--Button-fontSize);
3235
3355
  vertical-align: middle;
@@ -3254,6 +3374,15 @@ fieldset:disabled a.a-Button {
3254
3374
  .a-Button--lg > .pull-right {
3255
3375
  margin-left: var(--Button--lg-paddingX);
3256
3376
  }
3377
+ .a-Button--lg .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3378
+ .a-Button--lg > svg.icon:not(:last-child):not(.pull-right),
3379
+ .a-Button--lg > .pull-left {
3380
+ margin-right: var(--Button--lg-paddingX);
3381
+ }
3382
+ .a-Button--lg .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3383
+ .a-Button--lg > .pull-right {
3384
+ margin-left: var(--Button--lg-paddingX);
3385
+ }
3257
3386
  .a-Button--lg img.a-Button-icon {
3258
3387
  height: var(--Button-fontSize);
3259
3388
  vertical-align: middle;
@@ -3278,6 +3407,13 @@ fieldset:disabled a.a-Button {
3278
3407
  line-height: 1;
3279
3408
  }
3280
3409
 
3410
+ .a-Button--loading {
3411
+ transition: --Button-transition;
3412
+ }
3413
+ .a-Button--loading svg {
3414
+ animation: var(--Button-animation-spin);
3415
+ }
3416
+
3281
3417
  .a-Button--link {
3282
3418
  width: auto;
3283
3419
  min-width: auto;
@@ -3289,13 +3425,16 @@ fieldset:disabled a.a-Button {
3289
3425
  }
3290
3426
  .a-Button--link:hover:focus {
3291
3427
  color: var(--Button--link-onHover-color);
3292
- text-decoration: var(--link-onHover-decoration);
3428
+ box-shadow: none;
3429
+ }
3430
+ .a-Button--link:hover:active {
3431
+ color: var(--Button--link-onActive-color);
3293
3432
  box-shadow: none;
3294
3433
  }
3295
3434
  .a-Button--link:disabled, .a-Button--link.is-disabled {
3296
3435
  color: var(--text--muted-color);
3297
3436
  pointer-events: none;
3298
- background: transparent;
3437
+ background: #F2F3F3;
3299
3438
  }
3300
3439
 
3301
3440
  .a-Button--block {
@@ -3364,7 +3503,7 @@ input[type=button].a-Button--block {
3364
3503
  display: inline-block;
3365
3504
  position: relative;
3366
3505
  }
3367
- .a-Badge-text, .a-Badge-dot {
3506
+ .a-Badge-text, .a-Badge-dot, .a-Badge-ribbon {
3368
3507
  background: var(--danger);
3369
3508
  position: absolute;
3370
3509
  top: 0;
@@ -3420,6 +3559,49 @@ input[type=button].a-Button--block {
3420
3559
  height: var(--Badge-size);
3421
3560
  border-radius: 50%;
3422
3561
  }
3562
+ .a-Badge-ribbon-out {
3563
+ overflow: hidden;
3564
+ position: absolute;
3565
+ top: 0;
3566
+ bottom: 0;
3567
+ right: 0;
3568
+ }
3569
+ .a-Badge-ribbon {
3570
+ color: var(--Badge-color);
3571
+ height: var(--Badge-size);
3572
+ line-height: var(--Badge-size);
3573
+ transform: translateX(calc(50% - 5px)) rotate(45deg) scale(0.7);
3574
+ transform-origin: 50% 0;
3575
+ border-radius: 0;
3576
+ text-align: center;
3577
+ width: 62.5rem;
3578
+ top: 5px;
3579
+ }
3580
+ .a-Badge-ribbon-out--top-left, .a-Badge-ribbon-out--bottom-left {
3581
+ left: 0;
3582
+ right: auto;
3583
+ }
3584
+ .a-Badge-ribbon--top-left {
3585
+ transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(0.7);
3586
+ left: 0;
3587
+ right: auto;
3588
+ }
3589
+ .a-Badge-ribbon--bottom-left {
3590
+ transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(0.7);
3591
+ transform-origin: 50% 100%;
3592
+ left: 0;
3593
+ right: auto;
3594
+ bottom: 5px;
3595
+ top: auto;
3596
+ }
3597
+ .a-Badge-ribbon--bottom-right {
3598
+ transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(0.7);
3599
+ transform-origin: 50% 100%;
3600
+ left: auto;
3601
+ right: 0;
3602
+ bottom: 5px;
3603
+ top: auto;
3604
+ }
3423
3605
  @keyframes badgeDotAnimation {
3424
3606
  0% {
3425
3607
  transform: scale(0.8);
@@ -4490,6 +4672,15 @@ input[type=button].a-Button--block {
4490
4672
  .a-ArrayInput-addBtn > .pull-right {
4491
4673
  margin-left: var(--Combo-addBtn-paddingX);
4492
4674
  }
4675
+ .a-ArrayInput-addBtn .a-Button--loading:first-child:not(:last-child):not(.pull-right),
4676
+ .a-ArrayInput-addBtn > svg.icon:not(:last-child):not(.pull-right),
4677
+ .a-ArrayInput-addBtn > .pull-left {
4678
+ margin-right: var(--Combo-addBtn-paddingX);
4679
+ }
4680
+ .a-ArrayInput-addBtn .a-Button--loading:last-child:not(:first-child):not(.pull-left),
4681
+ .a-ArrayInput-addBtn > .pull-right {
4682
+ margin-left: var(--Combo-addBtn-paddingX);
4683
+ }
4493
4684
  .a-ArrayInput-addBtn img.a-Button-icon {
4494
4685
  height: var(--Button-fontSize);
4495
4686
  vertical-align: middle;
@@ -4499,6 +4690,11 @@ input[type=button].a-Button--block {
4499
4690
  background: var(--Combo-addBtn-onHover-bg);
4500
4691
  border-color: var(--Combo-addBtn-onHover-border);
4501
4692
  }
4693
+ .a-ArrayInput-addBtn:not(:disabled):not(.is-disabled):hover:active {
4694
+ color: var(--Combo-addBtn-onActive-color);
4695
+ background: var(--Combo-addBtn-onActive-bg);
4696
+ border-color: var(--Combo-addBtn-onActive-border);
4697
+ }
4502
4698
  .a-ArrayInput-addBtn:hover:focus {
4503
4699
  box-shadow: var(--Button-boxShadow);
4504
4700
  }
@@ -4973,6 +5169,7 @@ input[type=button].a-Button--block {
4973
5169
  .a-Nav--tabs .a-Nav-item {
4974
5170
  margin-bottom: calc(var(--Tabs-borderWidth) * -1);
4975
5171
  display: inline-block;
5172
+ position: relative;
4976
5173
  }
4977
5174
  .a-Nav--tabs .a-Nav-item > a {
4978
5175
  font-size: var(--Tabs-linkFontSize);
@@ -4984,7 +5181,7 @@ input[type=button].a-Button--block {
4984
5181
  color: var(--Tabs-color);
4985
5182
  text-decoration: none;
4986
5183
  margin-right: 0.125rem;
4987
- padding: var(--gap-sm) var(--gap-base);
5184
+ padding: var(--gap-sm) var(--gap-xl);
4988
5185
  cursor: pointer;
4989
5186
  }
4990
5187
  .a-Nav--tabs .a-Nav-item:hover > a,
@@ -5007,89 +5204,145 @@ input[type=button].a-Button--block {
5007
5204
  .a-Nav--stacked {
5008
5205
  min-height: 3.125rem;
5009
5206
  }
5010
- .a-Nav--stacked .a-Nav-item {
5207
+ .a-Nav--stacked .a-Nav-item, .a-Nav--stacked .a-Badge {
5011
5208
  position: relative;
5209
+ display: flex;
5210
+ flex-wrap: wrap;
5211
+ align-items: stretch;
5212
+ width: 100%;
5012
5213
  }
5013
- .a-Nav--stacked .a-Nav-item > a {
5014
- display: block;
5214
+ .a-Nav--stacked .a-Nav-item .a-Nav-itemDrager, .a-Nav--stacked .a-Badge .a-Nav-itemDrager {
5215
+ cursor: move;
5216
+ position: absolute;
5217
+ left: 0;
5218
+ top: 0.6875rem;
5219
+ display: none;
5220
+ }
5221
+ .a-Nav--stacked .a-Nav-item .a-Nav-itemDrager > a, .a-Nav--stacked .a-Nav-item .a-Nav-itemDrager > .a-Badge > a, .a-Nav--stacked .a-Badge .a-Nav-itemDrager > a, .a-Nav--stacked .a-Badge .a-Nav-itemDrager > .a-Badge > a {
5222
+ color: var(--icon-color);
5223
+ }
5224
+ .a-Nav--stacked .a-Nav-item .a-Nav-itemDrager > a:hover, .a-Nav--stacked .a-Nav-item .a-Nav-itemDrager > .a-Badge > a:hover, .a-Nav--stacked .a-Badge .a-Nav-itemDrager > a:hover, .a-Nav--stacked .a-Badge .a-Nav-itemDrager > .a-Badge > a:hover {
5225
+ color: var(--icon-onHover-color);
5226
+ }
5227
+ .a-Nav--stacked .a-Nav-item .a-Nav-itemDrager svg, .a-Nav--stacked .a-Badge .a-Nav-itemDrager svg {
5228
+ width: 1rem;
5229
+ height: 1rem;
5230
+ }
5231
+ .a-Nav--stacked .a-Nav-item > .a-Nav-item-badgeText, .a-Nav--stacked .a-Badge > .a-Nav-item-badgeText {
5232
+ position: absolute;
5233
+ top: 0;
5234
+ bottom: 0;
5235
+ width: 2.1875rem;
5236
+ overflow: hidden;
5237
+ }
5238
+ .a-Nav--stacked .a-Nav-item > .a-Nav-item-badgeText > span, .a-Nav--stacked .a-Badge > .a-Nav-item-badgeText > span {
5239
+ position: absolute;
5240
+ top: 0.125rem;
5241
+ left: -0.8125rem;
5242
+ transform: rotate(-45deg);
5243
+ width: 3.125rem;
5244
+ font-size: 12px;
5245
+ text-align: center;
5246
+ color: var(--white);
5247
+ background: var(--success);
5248
+ }
5249
+ .a-Nav--stacked .a-Nav-item > .a-Nav-item-atcions, .a-Nav--stacked .a-Badge > .a-Nav-item-atcions {
5250
+ display: flex;
5251
+ align-items: center;
5252
+ }
5253
+ .a-Nav--stacked .a-Nav-item > a,
5254
+ .a-Nav--stacked .a-Nav-item > .a-Badge > a, .a-Nav--stacked .a-Badge > a,
5255
+ .a-Nav--stacked .a-Badge > .a-Badge > a {
5256
+ display: flex;
5257
+ align-items: center;
5015
5258
  outline: none;
5016
5259
  color: var(--Nav-item-color);
5017
5260
  text-decoration: none;
5018
- padding: var(--gap-sm) var(--gap-base);
5261
+ padding: var(--gap-sm) var(--gap-sm);
5019
5262
  cursor: pointer;
5020
5263
  background: var(--Nav-item-bg);
5021
5264
  border-radius: var(--Nav-item-borderRadius);
5022
5265
  text-overflow: ellipsis;
5023
- }
5024
- .a-Nav--stacked .a-Nav-item > a::after {
5025
- border-left: var(--Nav-item-onActive-borderLeft);
5026
- position: absolute;
5027
- left: 0;
5028
- top: 0;
5029
- content: "";
5030
- width: 1px;
5031
- height: 100%;
5032
- transform: scaleY(0.0001);
5033
- 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);
5034
- }
5035
- .a-Nav--stacked .a-Nav-item.has-sub > a {
5036
- padding-right: calc(var(--gap-base) + var(--gap-sm));
5266
+ flex: 1;
5037
5267
  }
5038
5268
  .a-Nav--stacked .a-Nav-item > a:hover,
5039
- .a-Nav--stacked .a-Nav-item > a:focus {
5269
+ .a-Nav--stacked .a-Nav-item > a:focus,
5270
+ .a-Nav--stacked .a-Nav-item > a:hover + .a-Nav-item-atcions,
5271
+ .a-Nav--stacked .a-Nav-item > a:focus + .a-Nav-item-atcions,
5272
+ .a-Nav--stacked .a-Nav-item > .a-Badge > a:hover,
5273
+ .a-Nav--stacked .a-Nav-item > .a-Badge > a:focus,
5274
+ .a-Nav--stacked .a-Nav-item > .a-Badge > a:hover + .a-Nav-item-atcions,
5275
+ .a-Nav--stacked .a-Nav-item > .a-Badge > a:focus + .a-Nav-item-atcions, .a-Nav--stacked .a-Badge > a:hover,
5276
+ .a-Nav--stacked .a-Badge > a:focus,
5277
+ .a-Nav--stacked .a-Badge > a:hover + .a-Nav-item-atcions,
5278
+ .a-Nav--stacked .a-Badge > a:focus + .a-Nav-item-atcions,
5279
+ .a-Nav--stacked .a-Badge > .a-Badge > a:hover,
5280
+ .a-Nav--stacked .a-Badge > .a-Badge > a:focus,
5281
+ .a-Nav--stacked .a-Badge > .a-Badge > a:hover + .a-Nav-item-atcions,
5282
+ .a-Nav--stacked .a-Badge > .a-Badge > a:focus + .a-Nav-item-atcions {
5040
5283
  border-color: var(--Nav-item-onHover-color);
5041
5284
  text-decoration: none;
5042
5285
  background: var(--Nav-item-onHover-bg);
5286
+ z-index: 9999;
5287
+ }
5288
+ .a-Nav--stacked .a-Nav-item > a:hover > .a-Nav-itemDrager,
5289
+ .a-Nav--stacked .a-Nav-item > a:focus > .a-Nav-itemDrager,
5290
+ .a-Nav--stacked .a-Nav-item > .a-Badge > a:hover > .a-Nav-itemDrager,
5291
+ .a-Nav--stacked .a-Nav-item > .a-Badge > a:focus > .a-Nav-itemDrager, .a-Nav--stacked .a-Badge > a:hover > .a-Nav-itemDrager,
5292
+ .a-Nav--stacked .a-Badge > a:focus > .a-Nav-itemDrager,
5293
+ .a-Nav--stacked .a-Badge > .a-Badge > a:hover > .a-Nav-itemDrager,
5294
+ .a-Nav--stacked .a-Badge > .a-Badge > a:focus > .a-Nav-itemDrager {
5295
+ display: block;
5043
5296
  }
5044
- .a-Nav--stacked .a-Nav-item.disabled > a, .a-Nav--stacked .a-Nav-item.is-disabled > a {
5297
+ .a-Nav--stacked .a-Nav-item.disabled > a, .a-Nav--stacked .a-Nav-item.is-disabled > a, .a-Nav--stacked .a-Nav-item.disabled > .a-Badge > a, .a-Nav--stacked .a-Nav-item.is-disabled > .a-Badge > a, .a-Nav--stacked .a-Badge.disabled > a, .a-Nav--stacked .a-Badge.is-disabled > a, .a-Nav--stacked .a-Badge.disabled > .a-Badge > a, .a-Nav--stacked .a-Badge.is-disabled > .a-Badge > a {
5045
5298
  color: var(--Nav-item-onDisabled-color);
5046
5299
  background: transparent;
5047
5300
  pointer-events: none;
5048
5301
  }
5049
- .a-Nav--stacked .a-Nav-item.active > a, .a-Nav--stacked .a-Nav-item.is-active > a {
5302
+ .a-Nav--stacked .a-Nav-item.active, .a-Nav--stacked .a-Nav-item.is-active, .a-Nav--stacked .a-Badge.active, .a-Nav--stacked .a-Badge.is-active {
5303
+ background: var(--Nav-item-onActive-bg) !important;
5304
+ }
5305
+ .a-Nav--stacked .a-Nav-item.active > a, .a-Nav--stacked .a-Nav-item.is-active > .a-Nav-item-atcions, .a-Nav--stacked .a-Nav-item.is-active > a, .a-Nav--stacked .a-Nav-item.active > .a-Badge > a, .a-Nav--stacked .a-Nav-item.is-active > .a-Badge > .a-Nav-item-atcions, .a-Nav--stacked .a-Nav-item.is-active > .a-Badge > a, .a-Nav--stacked .a-Badge.active > a, .a-Nav--stacked .a-Badge.is-active > .a-Nav-item-atcions, .a-Nav--stacked .a-Badge.is-active > a, .a-Nav--stacked .a-Badge.active > .a-Badge > a, .a-Nav--stacked .a-Badge.is-active > .a-Badge > .a-Nav-item-atcions, .a-Nav--stacked .a-Badge.is-active > .a-Badge > a {
5050
5306
  color: var(--Nav-item-onActive-color);
5051
- background: var(--Nav-item-onActive-bg);
5052
- padding-left: 0.75rem;
5053
5307
  position: relative;
5054
5308
  }
5055
- .a-Nav--stacked .a-Nav-item.active > a::after, .a-Nav--stacked .a-Nav-item.is-active > a::after {
5309
+ .a-Nav--stacked .a-Nav-item.active > a::after, .a-Nav--stacked .a-Nav-item.is-active > .a-Nav-item-atcions::after, .a-Nav--stacked .a-Nav-item.is-active > a::after, .a-Nav--stacked .a-Nav-item.active > .a-Badge > a::after, .a-Nav--stacked .a-Nav-item.is-active > .a-Badge > .a-Nav-item-atcions::after, .a-Nav--stacked .a-Nav-item.is-active > .a-Badge > a::after, .a-Nav--stacked .a-Badge.active > a::after, .a-Nav--stacked .a-Badge.is-active > .a-Nav-item-atcions::after, .a-Nav--stacked .a-Badge.is-active > a::after, .a-Nav--stacked .a-Badge.active > .a-Badge > a::after, .a-Nav--stacked .a-Badge.is-active > .a-Badge > .a-Nav-item-atcions::after, .a-Nav--stacked .a-Badge.is-active > .a-Badge > a::after {
5056
5310
  transform: scaleY(1);
5057
5311
  }
5058
- .a-Nav--stacked .a-Nav-item.is-unfolded > .a-Nav-itemToggler {
5312
+ .a-Nav--stacked .a-Nav-item.is-unfolded > a .a-Nav-itemToggler, .a-Nav--stacked .a-Nav-item.is-unfolded > .a-Badge > a .a-Nav-itemToggler, .a-Nav--stacked .a-Badge.is-unfolded > a .a-Nav-itemToggler, .a-Nav--stacked .a-Badge.is-unfolded > .a-Badge > a .a-Nav-itemToggler {
5059
5313
  transform: rotate(180deg) scale(0.8);
5060
5314
  }
5061
- .a-Nav--stacked .a-Nav-item.is-unfolded > .a-Nav-subItems {
5315
+ .a-Nav--stacked .a-Nav-item.is-unfolded > .a-Nav-subItems, .a-Nav--stacked .a-Nav-item.is-unfolded > .a-Badge > .a-Nav-subItems, .a-Nav--stacked .a-Badge.is-unfolded > .a-Nav-subItems, .a-Nav--stacked .a-Badge.is-unfolded > .a-Badge > .a-Nav-subItems {
5062
5316
  display: block;
5063
5317
  }
5064
- .a-Nav--stacked .a-Nav-item .a-Nav-spinner {
5318
+ .a-Nav--stacked .a-Nav-item .a-Nav-spinner, .a-Nav--stacked .a-Badge .a-Nav-spinner {
5065
5319
  position: absolute;
5066
5320
  right: 0.625rem;
5067
5321
  top: 0.5rem;
5068
5322
  }
5069
- .a-Nav--stacked .a-Nav-item .a-Nav-itemToggler {
5070
- position: absolute;
5071
- right: 0;
5072
- top: 0.1875rem;
5073
- width: 1.875rem;
5074
- height: 1.875rem;
5323
+ .a-Nav--stacked .a-Nav-item .a-Nav-itemToggler, .a-Nav--stacked .a-Badge .a-Nav-itemToggler {
5324
+ float: left;
5325
+ width: 1.5rem;
5326
+ height: 1.5rem;
5075
5327
  text-align: center;
5076
- line-height: 1.875rem;
5328
+ line-height: 1.5rem;
5077
5329
  vertical-align: middle;
5078
5330
  cursor: pointer;
5079
5331
  transform: scale(0.8);
5080
5332
  transition: transform var(--animation-duration);
5081
5333
  }
5082
- .a-Nav--stacked .a-Nav-item .a-Nav-itemToggler > svg {
5334
+ .a-Nav--stacked .a-Nav-item .a-Nav-itemToggler > svg, .a-Nav--stacked .a-Badge .a-Nav-itemToggler > svg {
5083
5335
  width: 10px;
5084
5336
  height: 10px;
5085
5337
  top: 0;
5086
5338
  }
5087
- .a-Nav--stacked .a-Nav-item .a-Nav-subItems {
5339
+ .a-Nav--stacked .a-Nav-item .a-Nav-subItems, .a-Nav--stacked .a-Badge .a-Nav-subItems {
5088
5340
  display: none;
5089
5341
  padding-left: 0;
5090
5342
  list-style: none;
5343
+ width: 100%;
5091
5344
  }
5092
- .a-Nav--stacked .a-Nav-item .a-Nav-item {
5345
+ .a-Nav--stacked .a-Nav-item .a-Nav-item, .a-Nav--stacked .a-Badge .a-Nav-item {
5093
5346
  font-size: var(--Nav-subItem-fontSize);
5094
5347
  }
5095
5348
 
@@ -9260,7 +9513,7 @@ input[type=button].a-Button--block {
9260
9513
  display: none;
9261
9514
  }
9262
9515
  .a-ImageGallery-item.is-active {
9263
- border: 1px solid #108cee;
9516
+ border: 1px solid var(--primary);
9264
9517
  }
9265
9518
  .a-ImageGallery-item.is-active:after {
9266
9519
  display: none;
@@ -12456,6 +12709,11 @@ fieldset.a-Collapse--lg:after {
12456
12709
  background: var(--Calendar-btn-onHover-bg);
12457
12710
  border-color: var(--Calendar-btn-onHover-border);
12458
12711
  }
12712
+ .rdtBtn:not(:disabled):not(.is-disabled):hover:active {
12713
+ color: var(--Calendar-btn-onActive-color);
12714
+ background: var(--Calendar-btn-onActive-bg);
12715
+ border-color: var(--Calendar-btn-onActive-border);
12716
+ }
12459
12717
  .rdtBtn:hover:focus {
12460
12718
  box-shadow: var(--Button-boxShadow);
12461
12719
  }
@@ -12474,6 +12732,11 @@ fieldset.a-Collapse--lg:after {
12474
12732
  background: var(--Calendar-btnCancel-onHover-bg);
12475
12733
  border-color: var(--Calendar-btnCancel-onHover-border);
12476
12734
  }
12735
+ .rdtBtnCancel:not(:disabled):not(.is-disabled):hover:active {
12736
+ color: var(--Calendar-btnCancel-onActive-color);
12737
+ background: var(--Calendar-btnCancel-onActive-bg);
12738
+ border-color: var(--Calendar-btnCancel-onActive-border);
12739
+ }
12477
12740
  .rdtBtnCancel:hover:focus {
12478
12741
  box-shadow: var(--Button-boxShadow);
12479
12742
  }
@@ -12761,6 +13024,11 @@ td.rdtQuarter.rdtDisabled > span {
12761
13024
  background: var(--ImageControl-addBtn-onHover-bg);
12762
13025
  border-color: var(--ImageControl-addBtn-onHover-border);
12763
13026
  }
13027
+ .a-ImageControl-addBtn:not(:disabled):not(.is-disabled):hover:active {
13028
+ color: var(--ImageControl-addBtn-onActive-color);
13029
+ background: var(--ImageControl-addBtn-onActive-bg);
13030
+ border-color: var(--ImageControl-addBtn-onActive-border);
13031
+ }
12764
13032
  .a-ImageControl-addBtn:hover:focus {
12765
13033
  box-shadow: var(--Button-boxShadow);
12766
13034
  }
@@ -13837,6 +14105,15 @@ td.rdtQuarter.rdtDisabled > span {
13837
14105
  .a-Combo-addBtn > .pull-right {
13838
14106
  margin-left: var(--Combo-addBtn-paddingX);
13839
14107
  }
14108
+ .a-Combo-addBtn .a-Button--loading:first-child:not(:last-child):not(.pull-right),
14109
+ .a-Combo-addBtn > svg.icon:not(:last-child):not(.pull-right),
14110
+ .a-Combo-addBtn > .pull-left {
14111
+ margin-right: var(--Combo-addBtn-paddingX);
14112
+ }
14113
+ .a-Combo-addBtn .a-Button--loading:last-child:not(:first-child):not(.pull-left),
14114
+ .a-Combo-addBtn > .pull-right {
14115
+ margin-left: var(--Combo-addBtn-paddingX);
14116
+ }
13840
14117
  .a-Combo-addBtn img.a-Button-icon {
13841
14118
  height: var(--Button-fontSize);
13842
14119
  vertical-align: middle;
@@ -13846,6 +14123,11 @@ td.rdtQuarter.rdtDisabled > span {
13846
14123
  background: var(--Combo-addBtn-onHover-bg);
13847
14124
  border-color: var(--Combo-addBtn-onHover-border);
13848
14125
  }
14126
+ .a-Combo-addBtn:not(:disabled):not(.is-disabled):hover:active {
14127
+ color: var(--Combo-addBtn-onActive-color);
14128
+ background: var(--Combo-addBtn-onActive-bg);
14129
+ border-color: var(--Combo-addBtn-onActive-border);
14130
+ }
13849
14131
  .a-Combo-addBtn:hover:focus {
13850
14132
  box-shadow: var(--Button-boxShadow);
13851
14133
  }
@@ -14395,6 +14677,15 @@ td.rdtQuarter.rdtDisabled > span {
14395
14677
  .a-TagControl-sugItem > .pull-right {
14396
14678
  margin-left: var(--TagControl-sugBtn-paddingX);
14397
14679
  }
14680
+ .a-TagControl-sugItem .a-Button--loading:first-child:not(:last-child):not(.pull-right),
14681
+ .a-TagControl-sugItem > svg.icon:not(:last-child):not(.pull-right),
14682
+ .a-TagControl-sugItem > .pull-left {
14683
+ margin-right: var(--TagControl-sugBtn-paddingX);
14684
+ }
14685
+ .a-TagControl-sugItem .a-Button--loading:last-child:not(:first-child):not(.pull-left),
14686
+ .a-TagControl-sugItem > .pull-right {
14687
+ margin-left: var(--TagControl-sugBtn-paddingX);
14688
+ }
14398
14689
  .a-TagControl-sugItem img.a-Button-icon {
14399
14690
  height: var(--Button-fontSize);
14400
14691
  vertical-align: middle;
@@ -14404,6 +14695,11 @@ td.rdtQuarter.rdtDisabled > span {
14404
14695
  background: var(--TagControl-sugBtn-onHover-bg);
14405
14696
  border-color: var(--TagControl-sugBtn-onHover-border);
14406
14697
  }
14698
+ .a-TagControl-sugItem:not(:disabled):not(.is-disabled):hover:active {
14699
+ color: var(--TagControl-sugBtn-onActive-color);
14700
+ background: var(--TagControl-sugBtn-onActive-bg);
14701
+ border-color: var(--TagControl-sugBtn-onActive-border);
14702
+ }
14407
14703
  .a-TagControl-sugItem:hover:focus {
14408
14704
  box-shadow: var(--Button-boxShadow);
14409
14705
  }