superdesk-ui-framework 3.0.42 → 3.0.44

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 (119) hide show
  1. package/app/styles/_accessibility.scss +349 -310
  2. package/app/styles/_alerts.scss +102 -71
  3. package/app/styles/_animations.scss +29 -16
  4. package/app/styles/_avatar.scss +159 -140
  5. package/app/styles/_badge.scss +11 -5
  6. package/app/styles/_big-icon-font.scss +21 -9
  7. package/app/styles/_boxed-list.scss +72 -47
  8. package/app/styles/_buttons.scss +266 -177
  9. package/app/styles/_carousel.scss +58 -45
  10. package/app/styles/_content-divider.scss +28 -2
  11. package/app/styles/_drag-drop.scss +3 -0
  12. package/app/styles/_empty-states.scss +21 -13
  13. package/app/styles/_hamburger.scss +142 -144
  14. package/app/styles/_helpers.scss +297 -93
  15. package/app/styles/_icon-font.scss +75 -43
  16. package/app/styles/_icon-labels.scss +11 -1
  17. package/app/styles/_labels.scss +27 -14
  18. package/app/styles/_loaders.scss +2 -1
  19. package/app/styles/_master-desk.scss +67 -31
  20. package/app/styles/_mixins.scss +40 -20
  21. package/app/styles/_modals.scss +112 -56
  22. package/app/styles/_panel-info.scss +38 -34
  23. package/app/styles/_popover.scss +0 -1
  24. package/app/styles/_publisher-styles.scss +132 -122
  25. package/app/styles/_sd-tag-input.scss +104 -24
  26. package/app/styles/_simple-list.scss +89 -66
  27. package/app/styles/_spinner.scss +24 -17
  28. package/app/styles/_table-list.scss +114 -80
  29. package/app/styles/_tables.scss +14 -2
  30. package/app/styles/_tabs-vertical.scss +46 -43
  31. package/app/styles/_tabs.scss +97 -87
  32. package/app/styles/_tag-labels.scss +26 -11
  33. package/app/styles/_thumb-carousel.scss +37 -11
  34. package/app/styles/_toggle-box.scss +27 -7
  35. package/app/styles/_toggle-button.scss +5 -1
  36. package/app/styles/_tooltips.scss +284 -272
  37. package/app/styles/components/_card-item.scss +268 -192
  38. package/app/styles/components/_list-item.scss +261 -175
  39. package/app/styles/components/_sd-circular-progress.scss +109 -79
  40. package/app/styles/components/_sd-collapse-box.scss +45 -33
  41. package/app/styles/components/_sd-comment-box.scss +17 -12
  42. package/app/styles/components/_sd-dropzone.scss +32 -15
  43. package/app/styles/components/_sd-editor-popup.scss +29 -15
  44. package/app/styles/components/_sd-grid-item.scss +349 -237
  45. package/app/styles/components/_sd-loader.scss +1 -2
  46. package/app/styles/components/_sd-media-carousel.scss +119 -78
  47. package/app/styles/components/_sd-notification-panel.scss +2 -1
  48. package/app/styles/components/_sd-pagination.scss +27 -19
  49. package/app/styles/components/_sd-photo-preview.scss +82 -41
  50. package/app/styles/components/_sd-searchbar.scss +79 -51
  51. package/app/styles/components/_sd-toaster.scss +52 -30
  52. package/app/styles/components/_subnav.scss +230 -135
  53. package/app/styles/components/_theme-selector.scss +78 -53
  54. package/app/styles/components/sd-slider.scss +11 -7
  55. package/app/styles/design-tokens/_design-tokens-general.scss +31 -27
  56. package/app/styles/design-tokens/_new-colors.scss +3 -1
  57. package/app/styles/dropdowns/_basic-dropdown.scss +164 -86
  58. package/app/styles/dropdowns/_input-dropdown.scss +5 -2
  59. package/app/styles/dropdowns/_navigation_dropdown.scss +18 -4
  60. package/app/styles/dropdowns/_nested-dropdown.scss +11 -2
  61. package/app/styles/dropdowns/_other_dropdown.scss +9 -3
  62. package/app/styles/editor/_editor-buttons.scss +10 -6
  63. package/app/styles/editor/_editor-themes.scss +401 -350
  64. package/app/styles/form-elements/_autocomplete.scss +7 -1
  65. package/app/styles/form-elements/_checkbox.scss +230 -159
  66. package/app/styles/form-elements/_forms-general.scss +345 -285
  67. package/app/styles/form-elements/_input-preview.scss +15 -9
  68. package/app/styles/form-elements/_input-wrap.scss +77 -71
  69. package/app/styles/form-elements/_inputs.scss +668 -489
  70. package/app/styles/form-elements/_radio.scss +10 -5
  71. package/app/styles/form-elements/_switch.scss +27 -16
  72. package/app/styles/grids/_basic-grid.scss +83 -64
  73. package/app/styles/grids/_grid-layout.scss +301 -165
  74. package/app/styles/grids/_layout-grid.scss +85 -59
  75. package/app/styles/grids/_sd-kanban-list.scss +14 -4
  76. package/app/styles/interface-elements/_side-panel.scss +279 -200
  77. package/app/styles/layout/_basic-layout.scss +36 -34
  78. package/app/styles/layout/_container.scss +38 -31
  79. package/app/styles/layout/_editor.scss +57 -17
  80. package/app/styles/layout/_general.scss +81 -67
  81. package/app/styles/menus/_sd-bottom-tabs.scss +21 -12
  82. package/app/styles/menus/_sd-content-navigation.scss +20 -16
  83. package/app/styles/menus/_sd-left-navigation.scss +62 -49
  84. package/app/styles/menus/_sd-sidebar-menu.scss +365 -323
  85. package/app/styles/menus/_sd-top-menu.scss +16 -7
  86. package/app/styles/primereact/_pr-autocomplete.scss +2 -0
  87. package/app/styles/primereact/_pr-datepicker.scss +13 -2
  88. package/app/styles/primereact/_pr-dialog.scss +55 -47
  89. package/app/styles/primereact/_pr-dropdown.scss +27 -22
  90. package/app/styles/primereact/_pr-general.scss +3 -0
  91. package/app/styles/primereact/_pr-menu.scss +2 -1
  92. package/app/styles/primereact/_pr-skeleton.scss +1 -0
  93. package/app/styles/primereact/_pr-tag-input.scss +1 -0
  94. package/app/styles/variables/_colors.scss +168 -170
  95. package/app/styles/variables/_typography.scss +1 -2
  96. package/app-typescript/components/Form/InputWrapper.tsx +1 -1
  97. package/app-typescript/components/Menu.tsx +1 -1
  98. package/app-typescript/components/{TreeSelect.tsx → TreeSelect/TreeSelect.tsx} +228 -257
  99. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +84 -0
  100. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +53 -0
  101. package/app-typescript/index.ts +1 -1
  102. package/dist/examples.bundle.css +18 -16
  103. package/dist/examples.bundle.js +1029 -918
  104. package/dist/react/TreeSelect.tsx +1 -1
  105. package/dist/superdesk-ui.bundle.css +4265 -3552
  106. package/dist/superdesk-ui.bundle.js +776 -665
  107. package/dist/vendor.bundle.js +23 -23
  108. package/examples/pages/react/TreeSelect.tsx +1 -1
  109. package/package.json +2 -2
  110. package/react/components/Form/InputWrapper.d.ts +1 -1
  111. package/react/components/Menu.js +1 -1
  112. package/react/components/{TreeSelect.d.ts → TreeSelect/TreeSelect.d.ts} +2 -2
  113. package/react/components/{TreeSelect.js → TreeSelect/TreeSelect.js} +82 -144
  114. package/react/components/TreeSelect/TreeSelectItem.d.ts +20 -0
  115. package/react/components/TreeSelect/TreeSelectItem.js +90 -0
  116. package/react/components/TreeSelect/TreeSelectPill.d.ts +14 -0
  117. package/react/components/TreeSelect/TreeSelectPill.js +71 -0
  118. package/react/index.d.ts +1 -1
  119. package/react/index.js +1 -1
package/app/styles/_alerts.scss CHANGED
@@ -39,9 +39,11 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
39
39
  background-color: var(--sd-alert-bg);
40
40
  display: flex;
41
41
  gap: $sd-base-increment * 2;
42
+
42
43
  & strong {
43
44
  font-weight: 500;
44
45
  }
46
+
45
47
  &--hidden {
46
48
  opacity: 0;
47
49
  max-height: 0.1rem;
@@ -51,6 +53,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
51
53
  font-size: 0.1rem;
52
54
  transition: $sd-alert-transition;
53
55
  }
56
+
54
57
  &--small {
55
58
  font-size: 1.3rem;
56
59
  padding-block-start: $sd-alert-padding-y-small;
@@ -60,30 +63,38 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
60
63
  transition: $sd-alert-transition-small;
61
64
  gap: $sd-base-increment * 1;
62
65
  }
66
+
63
67
  &--marg-b12 {
64
68
  margin-bottom: 1.2rem;
65
69
  }
70
+
66
71
  &--no-margin {
67
72
  margin-bottom: 0;
68
73
  }
74
+
69
75
  &--margin-none {
70
76
  margin-block-end: 0;
71
77
  }
78
+
72
79
  &--margin-small {
73
80
  margin-block-end: 1.6rem;
74
81
  }
82
+
75
83
  &--margin-normal {
76
84
  margin-block-end: 2.4rem;
77
85
  }
86
+
78
87
  &--margin-large {
79
88
  margin-block-end: 3.2rem;
80
89
  }
90
+
81
91
  &--banner-style {
82
92
  margin: 0;
83
93
  box-shadow: none !important;
84
94
  border-radius: 0 !important;
85
95
  }
86
96
  }
97
+
87
98
  @mixin sd-alert-hollow {
88
99
  border: 1px solid var(--sd-alert-border);
89
100
  background-color: var(--sd-alert-bg);
@@ -91,55 +102,34 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
91
102
  --sd-alert-l: var(--sd-alert-hs), 50%;
92
103
  --sd-alert-txt: hsla(var(--sd-alert-l), 1);
93
104
  --sd-alert-bg: hsla(var(--sd-alert-l), 0.05);
105
+
94
106
  [class^="icon-"], [class*=" icon-"] {
95
- color: var(--sd-alert-color);
107
+ color: var(--sd-alert-color);
96
108
  }
97
- }
109
+ }
98
110
 
99
111
 
100
112
  .sd-alert {
101
113
  @include sd-alert;
102
114
  color: var(--color-text-light);
103
115
  --sd-alert-bg: var(--sd-colour-alert-bg-neutral);
116
+
104
117
  p {
105
118
  font-size: 1.4rem;
106
119
  color: inherit;
107
120
  margin-block-end: 1em;
121
+
108
122
  &:last-child, &:only-child {
109
123
  margin-block-end: 0;
110
124
  }
111
125
  }
112
- &--primary, &--info, &--success, &--warning, &--alert, &--highlight, &--sd-green {
113
- color: $white;
114
- }
115
- &--primary, &--info {
116
- --sd-alert-bg: var(--sd-colour-info);
117
- }
118
-
119
- &--success {
120
- --sd-alert-bg: var(--sd-colour-success);
121
- }
122
-
123
- &--warning {
124
- --sd-alert-bg: var(--sd-colour-warning);
125
- }
126
-
127
- &--alert {
128
- --sd-alert-bg: var(--sd-colour-alert);
129
- }
130
-
131
- &--highlight {
132
- --sd-alert-bg: var(--sd-colour-highlight);
133
- }
134
-
135
- &--sd-green {
136
- --sd-alert-bg: var(--sd-colour-superdesk);
137
- }
126
+
138
127
  &.sd-alert--hollow {
139
128
  --sd-alert-hs: 214, 13%;
140
129
  --sd-alert-border: var(--sd-colour-line--strong);
141
130
  --sd-alert-color: var(--color-text-light);
142
131
  @include sd-alert-hollow;
132
+
143
133
  &.sd-alert--primary {
144
134
  --sd-alert-hs: var(--sd-colour-info-hs);
145
135
  --sd-alert-border: var(--sd-colour-info);
@@ -181,14 +171,15 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
181
171
  --sd-alert-color: var(--sd-colour-superdesk);
182
172
  color: var(--sd-alert-color);
183
173
  }
184
-
185
174
  }
175
+
186
176
  .sd-alert__icon {
187
177
  display: flex;
188
178
  align-items: center;
189
179
  justify-content: center;
190
180
  width: 3.2rem;
191
181
  height: 3.2rem;
182
+
192
183
  [class^="icon-"], [class*=" icon-"] {
193
184
  width: 3.2rem;
194
185
  height: 3.2rem;
@@ -197,6 +188,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
197
188
  color: currentColor;
198
189
  }
199
190
  }
191
+
200
192
  &.sd-alert--small {
201
193
  .sd-alert__icon {
202
194
  margin-block-start: 0px;
@@ -209,6 +201,34 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
209
201
  }
210
202
  }
211
203
 
204
+ .sd-alert--primary, .sd-alert--info, .sd-alert--success, .sd-alert--warning, .sd-alert--alert, .sd-alert--highlight, .sd-alert--sd-green {
205
+ color: $white;
206
+ }
207
+
208
+ .sd-alert--primary, .sd-alert--info {
209
+ --sd-alert-bg: var(--sd-colour-info);
210
+ }
211
+
212
+ .sd-alert--success {
213
+ --sd-alert-bg: var(--sd-colour-success);
214
+ }
215
+
216
+ .sd-alert--warning {
217
+ --sd-alert-bg: var(--sd-colour-warning);
218
+ }
219
+
220
+ .sd-alert--alert {
221
+ --sd-alert-bg: var(--sd-colour-alert);
222
+ }
223
+
224
+ .sd-alert--highlight {
225
+ --sd-alert-bg: var(--sd-colour-highlight);
226
+ }
227
+
228
+ .sd-alert--sd-green {
229
+ --sd-alert-bg: var(--sd-colour-superdesk);
230
+ }
231
+
212
232
  .sd-alert__content {
213
233
  display: flex;
214
234
  align-items: center;
@@ -226,6 +246,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
226
246
  line-height: 2.1rem;
227
247
  color: inherit;
228
248
  border-radius: $border-radius__base--full;
249
+
229
250
  &::after {
230
251
  font-family: sd_icons;
231
252
  font-size: 16px;
@@ -243,10 +264,12 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
243
264
  text-transform: none;
244
265
  -webkit-font-smoothing: antialiased;
245
266
  }
267
+
246
268
  &:hover {
247
269
  opacity: .8;
248
270
  background-color: hsla(0, 0%, 100%, 0.3);
249
271
  }
272
+
250
273
  &:active {
251
274
  opacity: 1;
252
275
  background-color: hsla(0, 0%, 100%, 0.5);
@@ -285,62 +308,70 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
285
308
  flex-shrink: 1;
286
309
  transition: all linear 100ms 0.2s, background-color ease-in 200ms;
287
310
  background-color: var(--sd-colour-neutral);
311
+
288
312
  & [class^="icon-"], & [class*=" icon-"] {
289
313
  color:inherit;
290
314
  margin-top: 0.3rem;
291
315
  }
316
+
292
317
  &:hover {
293
318
  background-color: var(--sd-colour-neutral--hover);
294
319
  }
295
- &--hidden {
296
- opacity: 0;
297
- height:1px;
298
- width:1px;
299
- flex-shrink: 1;
300
- transition: all linear 100ms;
301
- }
302
- &--primary, &--info {
303
- background-color: var(--sd-colour-info);
304
- &:hover {
305
- background-color: var(--sd-colour-info--hover);
306
- }
320
+ }
321
+
322
+ .sd-alert__info-btn--hidden {
323
+ opacity: 0;
324
+ height:1px;
325
+ width:1px;
326
+ flex-shrink: 1;
327
+ transition: all linear 100ms;
328
+ }
329
+
330
+ .sd-alert__info-btn--primary, .sd-alert__info-btn--info {
331
+ background-color: var(--sd-colour-info);
332
+
333
+ &:hover {
334
+ background-color: var(--sd-colour-info--hover);
307
335
  }
308
-
309
- &--success {
310
- background-color: var(--sd-colour-success);
311
- &:hover {
312
- background-color: var(--sd-colour-success--hover);
313
- }
336
+ }
337
+
338
+ .sd-alert__info-btn--success {
339
+ background-color: var(--sd-colour-success);
340
+
341
+ &:hover {
342
+ background-color: var(--sd-colour-success--hover);
314
343
  }
315
-
316
- &--warning {
317
- background-color: var(--sd-colour-warning);
318
- &:hover {
319
- background-color: var(--sd-colour-warning--hover);
320
- }
344
+ }
345
+
346
+ .sd-alert__info-btn--warning {
347
+ background-color: var(--sd-colour-warning);
348
+
349
+ &:hover {
350
+ background-color: var(--sd-colour-warning--hover);
321
351
  }
322
-
323
- &--alert {
324
- background-color: var(--sd-colour-alert);
325
- &:hover {
326
- background-color: var(--sd-colour-alert--hover);
327
- }
352
+ }
353
+
354
+ .sd-alert__info-btn--alert {
355
+ background-color: var(--sd-colour-alert);
356
+ &:hover {
357
+ background-color: var(--sd-colour-alert--hover);
328
358
  }
329
-
330
- &--highlight {
331
- background-color: var(--sd-colour-highlight);
332
- &:hover {
333
- background-color: var(--sd-colour-highlight--hover);
334
- }
359
+ }
360
+
361
+ .sd-alert__info-btn--highlight {
362
+ background-color: var(--sd-colour-highlight);
363
+
364
+ &:hover {
365
+ background-color: var(--sd-colour-highlight--hover);
335
366
  }
367
+ }
368
+
369
+ .sd-alert__info-btn--sd-green {
370
+ background-color: var(--sd-colour-superdesk);
336
371
 
337
- &--sd-green {
338
- background-color: var(--sd-colour-superdesk);
339
- &:hover {
340
- background-color: var(--sd-colour-superdesk--hover);
341
- }
372
+ &:hover {
373
+ background-color: var(--sd-colour-superdesk--hover);
342
374
  }
343
-
344
375
  }
345
376
 
346
377
  .sd-alert__container {
package/app/styles/_animations.scss CHANGED
@@ -1,39 +1,52 @@
1
1
  // Animation, TODO: Refactor
2
2
  .fade.ng-hide {
3
- opacity: 0;
3
+ opacity: 0;
4
4
  }
5
5
 
6
6
  .fade.ng-hide-remove,
7
7
  .fade.ng-hide-add {
8
- display: block !important;
8
+ display: block !important;
9
9
  }
10
10
 
11
11
  .fade.ng-hide-remove {
12
- transition: all linear 200ms;
12
+ transition: all linear 200ms;
13
13
  }
14
14
 
15
15
  .fade.ng-hide-add {
16
- position: absolute;
17
- transition: all linear 300ms;
16
+ position: absolute;
17
+ transition: all linear 300ms;
18
18
  }
19
19
 
20
20
  @keyframes fadeIn {
21
- 0% {opacity:0;}
22
- 50% {opacity:0;}
23
- 100% {opacity:1;}
21
+ 0% {
22
+ opacity: 0;
23
+ }
24
+
25
+ 50% {
26
+ opacity: 0;
27
+ }
28
+
29
+ 100% {
30
+ opacity: 1;
31
+ }
24
32
  }
25
33
 
26
34
  @keyframes dropOut2 {
27
- 0% {transform: translateY(-4.8rem);}
28
- 100% {transform: translateY(0);}
35
+ 0% {
36
+ transform: translateY(-4.8rem);
37
+ }
38
+
39
+ 100% {
40
+ transform: translateY(0);
41
+ }
29
42
  }
30
43
 
31
44
  .sd-card__thumbnail {
32
- transition: all 0.2s ease-in;
33
- height: 20rem;
34
-
45
+ transition: all 0.2s ease-in;
46
+ height: 20rem;
35
47
  }
48
+
36
49
  .sd-card__thumbnail.ng-hide {
37
- opacity: 0;
38
- height: 0.1rem !important;
39
- }
50
+ opacity: 0;
51
+ height: 0.1rem !important;
52
+ }