superdesk-ui-framework 3.0.39 → 3.0.40

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 (14) hide show
  1. package/app/styles/_helpers.scss +1 -1
  2. package/app/styles/_tables.scss +4 -4
  3. package/app/styles/_tabs-vertical.scss +8 -8
  4. package/app/styles/components/_card-item.scss +58 -46
  5. package/app/styles/components/_sd-grid-item.scss +5 -4
  6. package/app/styles/design-tokens/_new-colors.scss +12 -5
  7. package/app/styles/grids/_grid-layout.scss +2 -2
  8. package/app/styles/interface-elements/_side-panel.scss +0 -3
  9. package/app/styles/menus/_sd-content-navigation.scss +12 -9
  10. package/dist/examples.bundle.js +2 -2
  11. package/dist/react/MultiSelect.tsx +2 -1
  12. package/dist/superdesk-ui.bundle.css +116 -85
  13. package/examples/pages/react/MultiSelect.tsx +2 -1
  14. package/package.json +1 -1
package/app/styles/_helpers.scss CHANGED
@@ -628,7 +628,7 @@ h1, h2, h3, h4, h5, h6 {
628
628
 
629
629
  .sd-text__info {
630
630
  font-weight: 300;
631
- color: $grayText;
631
+ color: var(--color-text-light);
632
632
  }
633
633
 
634
634
  .sd-text-icon {
package/app/styles/_tables.scss CHANGED
@@ -91,7 +91,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
91
91
 
92
92
  .sd-display-table__cell {
93
93
  font-weight: 600;
94
- border-bottom: 2px solid rgba(0, 0, 0, 0.15);
94
+ border-bottom: 2px solid var(--sd-colour-line--light);
95
95
  }
96
96
  }
97
97
  .sd-display-table__body {
@@ -103,7 +103,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
103
103
  .sd-display-table__cell {
104
104
  display: table-cell;
105
105
  padding: 1.2rem 0.8rem;
106
- border-bottom: 1px solid rgba(0, 0, 0, 0.15);
106
+ border-bottom: 1px solid var(--sd-colour-line--light);
107
107
  font-weight: 500;
108
108
  text-align: start;
109
109
 
@@ -127,12 +127,12 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
127
127
  flex-wrap: nowrap;
128
128
  justify-content: center;
129
129
  padding: 1.2rem 0.8rem;
130
- border-bottom: 1px solid rgba(0, 0, 0, 0.15);
130
+ border-bottom: 1px solid var(--sd-colour-line--light);
131
131
  font-weight: 500;
132
132
  text-align: start;
133
133
  min-width: 120px;
134
134
  }
135
135
  .sd-flex-table--head .sd-flex-table__cell {
136
136
  font-weight: 600;
137
- border-bottom: 2px solid rgba(0, 0, 0, 0.15);
137
+ border-bottom: 2px solid var(--sd-colour-line--light);
138
138
  }
package/app/styles/_tabs-vertical.scss CHANGED
@@ -2,25 +2,25 @@
2
2
  // ----
3
3
 
4
4
  .nav-tabs-vertical {
5
- width: 2rem;
6
- border-right: 1px solid #ccc;
5
+ width: 3rem;
6
+ border-right: 1px solid var(--sd-colour-line--medium);
7
7
  transition: all .2s ease-out .3s;
8
8
  opacity: 1;
9
9
 
10
10
  &__list {
11
- width: 2rem;
11
+ width: 3rem;
12
12
  list-style: none;
13
13
  margin: 0;
14
14
  padding: 0;
15
15
  }
16
16
  &__tab {
17
17
  display: inline-block;
18
- width: 2rem;
19
- line-height: 2rem;
18
+ width: 3rem;
19
+ line-height: 1;
20
20
 
21
21
  &--active {
22
22
  .nav-tabs-vertical__link {
23
- color: $grayDarker;
23
+ color: var(--color-text);
24
24
  }
25
25
  }
26
26
  }
@@ -28,7 +28,7 @@
28
28
  display: inline-block;
29
29
  font-size: 1.1rem;
30
30
  font-weight: 500;
31
- color: $grayText;
31
+ color: var(--color-text-light);
32
32
  text-transform: uppercase;
33
33
  white-space: nowrap;
34
34
  margin: 10px 0;
@@ -38,7 +38,7 @@
38
38
  transform-origin: 0 0;
39
39
 
40
40
  &:hover {
41
- color: $grayDarker;
41
+ color: var(--color-text);
42
42
  }
43
43
  &:after {
44
44
  content: "";
package/app/styles/components/_card-item.scss CHANGED
@@ -2,15 +2,15 @@
2
2
  // ---------------------------------------------
3
3
 
4
4
  //color variables
5
- $card-item-header-bg-normal: hsl(200, 18%, 46%);
6
- $card-item-header-bg-inactive: hsl(0, 0%, 69%);
7
- $card-item-header-bg-active: $sd-blueMedium;
8
- $card-item-header-bg-light: var(--sd-colour-panel-bg--300);
9
- $card-item-header-bg-gradient-1: linear-gradient(180deg, rgba(96,184,194,1) 2%, rgba(30,176,108,1) 90%);
10
- $card-item-header-bg-secondary: $subnav-background-blue-grey-darker;
5
+ $card-item-header-bg-normal: var(--sd-card-header-bg-color--normal);
6
+ $card-item-header-bg-inactive: var(--sd-card-header-bg-color--inactive);
7
+ $card-item-header-bg-active: var(--sd-card-header-bg-color--active);
8
+ $card-item-header-bg-light: var(--sd-card-header-bg-color--light);
9
+ $card-item-header-bg-secondary: var(--sd-card-header-bg-color--secondary);
10
+ $card-item-header-bg-gradient-1: var(--sd-card-header-bg-color--gradient-1);
11
11
  $card-item-top-border-height: 0.4rem;
12
- $card-item-rounded-radius: $border-radius__base--large;
13
- $card-item-default-radius: $border-radius__base--medium;
12
+ $card-item-rounded-radius: var(--b-radius--large);
13
+ $card-item-default-radius: var(--b-radius--medium);
14
14
 
15
15
  //shadows
16
16
  $card-item-shadow: 0 1px 4px rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.16);
@@ -73,11 +73,8 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
73
73
  .sd-card__actions-group {
74
74
  display: flex;
75
75
  align-items: center;
76
- margin-right: .3rem;
77
-
78
- a + a {
79
- margin-left: .6rem;
80
- }
76
+ margin-inline-end: var(--gap--x-small);
77
+ gap: var(--gap--x-small);
81
78
  }
82
79
  .sd-card__header {
83
80
  position: relative;
@@ -165,7 +162,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
165
162
  // sd-card__heading should go inside sd-card__header
166
163
  .sd-card__heading {
167
164
  @include sd-padding('1-5', 'x');
168
- padding-top: $card-item-top-border-height;
165
+ padding-block-start: $card-item-top-border-height;
169
166
  flex-grow: 1;
170
167
  font-size: 1.2rem;
171
168
  line-height: 100%;
@@ -176,18 +173,31 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
176
173
  overflow: hidden;
177
174
  color: inherit;
178
175
  &--editable {
179
- padding: 1rem 1.6rem 1rem;
180
- text-transform: initial;
181
- &:hover {
182
- cursor: text;
183
- }
184
- > input {
185
- margin-top: 6px;
176
+ padding: var(--gap--small) var(--gap--small) var(--gap--small);
177
+ text-transform: initial !important;
178
+ .sd-card__heading-dummy-input {
179
+ display: flex;
180
+ align-items: center;
181
+ height: 3.2rem;
182
+ border: 2px solid transparent;
183
+ border-radius: var(--b-radius--medium);
184
+ padding: 0 0.8rem;
185
+ transition: all 0.2s ease;
186
+ text-transform: initial !important;
187
+ font-size: 1.4rem;
188
+ font-weight: 400;
189
+ letter-spacing: 0;
190
+ line-height: 1;
191
+ &:hover {
192
+ border-color: var(--color-input-border);
193
+ cursor: text;
194
+ }
186
195
  }
187
196
  }
197
+
188
198
  }
189
199
  .sd-card__sub-header {
190
- background-color: #9daeb7;
200
+ background-color: hsl(201, 15%, 67%);
191
201
  display: flex;
192
202
  align-items: center;
193
203
  color: $white;
@@ -223,7 +233,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
223
233
  }
224
234
  }
225
235
  .sd-card__thumbnail {
226
- margin-top: 0.4rem;
236
+ margin-block-start: 0.4rem;
227
237
  line-height: 0;
228
238
  background-color: var(--sd-item__thumb-Bg);
229
239
  & + .sd-card__heading {
@@ -244,9 +254,9 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
244
254
  font-size: 11px;
245
255
  color: rgba(0,0,0,.5);
246
256
  letter-spacing: 0.04em;
247
- margin-bottom: 4px;
257
+ margin-block-end: 4px;
248
258
  &.with-value {
249
- margin-bottom: 0;
259
+ margin-block-end: 0;
250
260
  }
251
261
  .label {
252
262
  float: right;
@@ -276,19 +286,20 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
276
286
  }
277
287
  &--scrollable {
278
288
  min-height: 20vh;
279
- max-height: 30vh;
289
+ max-height: 34vh;
280
290
  overflow-y: auto;
281
291
  }
282
292
  &--padd-10 {
283
293
  padding: 1rem;
284
294
  }
285
295
  }
286
- .sd-card__content-heading, h4.sd-card__content-heading {
296
+ .sd-card__content-heading,
297
+ h4.sd-card__content-heading {
287
298
  text-transform: none;
288
299
  color: inherit;
289
300
  font-size: 1.6rem;
290
301
  letter-spacing: initial;
291
- padding-bottom: $sd-base-increment;
302
+ padding-block-end: $sd-base-increment;
292
303
  }
293
304
  .sd-card__placeholder {
294
305
  padding: 16px;
@@ -311,8 +322,9 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
311
322
  padding: 0;
312
323
  list-style: none;
313
324
 
314
- li, .sd-card__content-list-item {
315
- padding: 16px;
325
+ li,
326
+ .sd-card__content-list-item {
327
+ padding: var(--gap--medium);
316
328
  border-bottom: 1px solid var(--sd-colour-line--light);
317
329
  &--inline {
318
330
  display: flex;
@@ -334,7 +346,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
334
346
  }
335
347
  }
336
348
  &--small {
337
- padding: 7px 16px;
349
+ padding: var(--gap--small) var(--gap--small) var(--gap--small) var(--gap--medium);
338
350
  h4 {
339
351
  margin: 0;
340
352
  }
@@ -350,23 +362,23 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
350
362
  i {
351
363
  display: inline-block;
352
364
  opacity: 0.5;
353
- margin-top: -2px;
365
+ margin-block-start: -2px;
354
366
  }
355
367
  }
356
368
  .button__view-all {
357
- border-bottom: 1px dotted #5598B4;
358
- color: #5598B4;
369
+ border-bottom: 1px dotted var(--sd-colour-interactive);
370
+ color: var(--sd-colour-interactive);
359
371
  cursor: pointer;
360
372
  }
361
373
 
362
374
  .sd-card__content-list-block-link {
363
375
  display: block;
364
376
  padding: .8rem 1.6rem;
365
- color: $gray;
377
+ color: var(--color-text);
366
378
  text-decoration: none;
367
379
 
368
380
  &:hover {
369
- color: $grayDarker;
381
+ color: var(--color-text);
370
382
  }
371
383
 
372
384
  &--icon-hover {
@@ -377,7 +389,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
377
389
  display: none;
378
390
  }
379
391
  &:hover {
380
- background-color: rgba(94,169,200, .15);
392
+ background-color: var(--sd-colour-interactive--alpha-20);
381
393
 
382
394
  i {
383
395
  display: inline-flex;
@@ -392,10 +404,10 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
392
404
  }
393
405
  .sd-card__time-date {
394
406
  font-size: 11px;
395
- color: #ababab;
407
+ color: var(--color-text-light);
396
408
  font-weight: 300;
397
409
  &--reverse-color {
398
- color: rgba(255,255,255, 0.6);
410
+ color: hsla(0, 0%, 100%, 0.7);
399
411
  }
400
412
  }
401
413
 
@@ -428,7 +440,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
428
440
  width: 100%;
429
441
  position: relative;
430
442
  height: 0;
431
- padding-bottom: 75%;
443
+ padding-block-end: 75%;
432
444
  overflow: hidden;
433
445
  text-align: center;
434
446
  img {
@@ -436,28 +448,28 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
436
448
  height: auto;
437
449
  }
438
450
  &--size-xs {
439
- padding-bottom: 35%;
451
+ padding-block-end: 35%;
440
452
  .sd-card__thumbnail-heading {
441
453
  font-size: 18px;
442
454
  }
443
455
  }
444
456
  &--size-xxs {
445
- padding-bottom: 16%;
457
+ padding-block-end: 16%;
446
458
  .sd-card__thumbnail-heading {
447
459
  font-size: 18px;
448
460
  }
449
461
  }
450
462
  &--size-s {
451
- padding-bottom: 50%;
463
+ padding-block-end: 50%;
452
464
  }
453
465
  &--size-m {
454
- padding-bottom: 75%; // default value;
466
+ padding-block-end: 75%; // default value;
455
467
  }
456
468
  &--size-l {
457
- padding-bottom: 100%; // default value;
469
+ padding-block-end: 100%; // default value;
458
470
  }
459
471
  &--size-xl {
460
- padding-bottom: 125%; // default value;
472
+ padding-block-end: 125%; // default value;
461
473
  }
462
474
  }
463
475
  .sd-card__file-type-icn {
package/app/styles/components/_sd-grid-item.scss CHANGED
@@ -696,14 +696,15 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--
696
696
  .sd-grid-item-header {
697
697
  padding: 4px 0;
698
698
  margin-bottom: 6px;
699
- border-bottom: 5px solid #4d4d4d;
699
+ border-bottom: 5px solid var(--sd-colour-neutral);
700
700
  display: flex;
701
701
 
702
- &__heading {
702
+ .sd-grid-item-header__heading {
703
703
  color: var(--color-text);
704
704
  font-size: 15px;
705
705
  font-weight: 500;
706
706
  flex-grow: 1;
707
+ min-height: 32px;
707
708
 
708
709
  & + div {
709
710
  margin-inline-start: 8px;
@@ -714,12 +715,12 @@ $sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--
714
715
  color: inherit;
715
716
 
716
717
  span {
717
- border-bottom: 1px dotted $sd-blueMedium;
718
+ border-bottom: 1px dotted var(--sd-colour-interactive);
718
719
  }
719
720
 
720
721
  [class^="icon-"],
721
722
  [class*=" icon-"] {
722
- color: $sd-blueMedium;
723
+ color: var(--sd-colour-interactive);
723
724
  margin-inline-start: 8px;
724
725
  }
725
726
 
package/app/styles/design-tokens/_new-colors.scss CHANGED
@@ -374,6 +374,9 @@
374
374
 
375
375
  [data-theme="dark-ui"] {
376
376
 
377
+ // COMPONENT: SD CARD
378
+ --sd-card-header-bg-color--secondary: hsla(214, 30%, 30%, 1);
379
+
377
380
  // INTERACTIVE PRIMARY
378
381
  --sd-colour-interactive-hs: 160, 50%;
379
382
  //--sd-colour-interactive-hs: 198, 50%;
@@ -581,21 +584,25 @@
581
584
 
582
585
  :root, [data-theme="light-ui"] {
583
586
 
584
- //--color-background-topmenu: hsla(0, 0%, 17%, 1);
587
+ // COMPONENT: SD CARD
588
+ --sd-card-header-bg-color--normal: hsla(214, 20%, 42%, 1);
589
+ --sd-card-header-bg-color--secondary: hsla(214, 30%, 20%, 1);
590
+ --sd-card-header-bg-color--inactive: hsla(214, 13%, 74%, 1);
591
+ --sd-card-header-bg-color--active: hsla(214, 40%, 50%, 1);
592
+ --sd-card-header-bg-color--light: var(--sd-colour-panel-bg--300);
593
+ --sd-card-header-bg-color--gradient-1: linear-gradient(180deg, rgba(96,184,194,1) 2%, rgba(30,176,108,1) 90%);
594
+
585
595
 
586
596
  --sd-colour-test-1: hsl(308 71% 40% / 50%);
587
597
  --sd-colour-test-2: hsl(9 59% 49% / 0.5);
588
598
 
589
599
  --sd-colour-background__main-list: hsla(0, 0%, 97%, 1);
590
600
 
591
-
592
-
593
601
  --sd-colour-background__base--00: hsla(0, 0%, 100%, 1);
594
602
  --sd-colour-background__base--10: hsla(0, 0%, 90%, 1);
595
603
  --sd-colour-background__base--20: hsla(0, 0%, 80%, 1);
596
604
  --sd-colour-background__base--30: hsla(0, 0%, 70%, 1);
597
605
 
598
-
599
606
  --color-text: hsla(214, 13%, 20%, 1);
600
607
  --color-text--inverse: hsla(214, 13%, 98%, 1);
601
608
  --color-text-light: hsla(214, 13%, 40%, 1);
@@ -681,7 +688,7 @@
681
688
  --color-text: hsla(0, 0%, 96%, 1);
682
689
  --color-text-light: hsla(214, 13%, 76%, 1);
683
690
  --color-text-lighter: hsla(214, 13%, 56%, 1);
684
- --color-icon-default: hsla(214, 13%, 64%, 1);
691
+ --color-icon-default: hsla(214, 13%, 90%, 1);
685
692
  --sd-slugline-color: hsla(197, 60%, 75%, 1) !important;
686
693
  --sd-time-schedule-color: hsla(268, 60%, 65%, 1);
687
694
  --sd-navy-color: hsla(240, 90%, 75%, 1);
package/app/styles/grids/_grid-layout.scss CHANGED
@@ -550,13 +550,13 @@ $planningEditor-width: 53rem;
550
550
 
551
551
  .sd-content-navigation-panel {
552
552
  width: 20rem;
553
- background-color: #f0f0f0;
553
+ background-color: var(--sd-colour-background__left-nav);
554
554
  flex-shrink: 0;
555
555
  display: flex;
556
556
  flex-direction: column;
557
557
  overflow: auto;
558
558
  overflow-x: hidden;
559
- border-right-color: $grayLight;
559
+ border-right-color: var(--sd-colour-line--light);
560
560
  border-right-style: solid;
561
561
  border-right-width: 0;
562
562
  transition: all .2s ease-out .1s;
package/app/styles/interface-elements/_side-panel.scss CHANGED
@@ -437,9 +437,6 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
437
437
  }
438
438
  &.side-panel--transparent {
439
439
  background-color: transparent;
440
- .side-panel__header {
441
- background-color: rgba(255, 255, 255, 0.2);
442
- }
443
440
  }
444
441
  &--bg-000, &--light {
445
442
  background-color: $side-panel-Bg-000;
package/app/styles/menus/_sd-content-navigation.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  // CONTENT NAVIGATION
2
2
  // ----
3
3
 
4
- $sd-contentNavBtn-bgHoverColor: rgba(94,169,200,0.2);
5
- $sd-contentNavBtn-bgActiveColor: rgba(255,255,255,1);
6
4
  $sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-out;
7
5
 
8
6
  .sd-content-nav {
@@ -18,24 +16,29 @@ $sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-ou
18
16
  font-size: 1.4rem;
19
17
  line-height: 100%;
20
18
  text-decoration: none;
21
- color: $grayDarker;
19
+ color: var(--color-text);
22
20
  padding: 1.6rem 2rem;
23
21
  transition: $sd-contentNavBtn-transition;
22
+ border-inline-end: 4px solid transparent;
24
23
  &:hover {
25
- background-color: $sd-contentNavBtn-bgHoverColor;
26
- color: $sd-text;
24
+ background-color: var(--sd-colour-interactive--alpha-20);
25
+ color: var(--color-text);
27
26
  text-decoration: none;
28
27
  }
29
- &:active, &--active {
30
- background-color: $sd-contentNavBtn-bgActiveColor;
31
- color: $sd-colour-interactive;
28
+ &:active,
29
+ &.sd-content-nav__btn--active {
30
+ background-color: var(--sd-colour-interactive--alpha-10);
31
+ color: var(--sd-colour-interactive);
32
+ }
33
+ &.sd-content-nav__btn--active {
34
+ border-color: var(--sd-colour-interactive--active);
32
35
  }
33
36
  }
34
37
  .sd-content-nav-title {
35
38
  font-size: 1.5rem;
36
39
  font-weight: 300;
37
40
 
38
- &--uppercase {
41
+ &.sd-content-nav-title--uppercase {
39
42
  font-size: 1.3rem;
40
43
  font-weight: 400;
41
44
  text-transform: uppercase;
package/dist/examples.bundle.js CHANGED
@@ -142318,7 +142318,7 @@ var MultiselectDocs = /** @class */ (function (_super) {
142318
142318
  if (option) {
142319
142319
  return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
142320
142320
  React.createElement("div", { style: { width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode } }),
142321
- React.createElement("div", null, option.name)));
142321
+ React.createElement("span", null, option.name)));
142322
142322
  }
142323
142323
  }, selectedItemTemplate: function (option) {
142324
142324
  if (option == null) {
@@ -143244,7 +143244,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
143244
143244
  /* 686 */
143245
143245
  /***/ (function(module, exports) {
143246
143246
 
143247
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.39","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
143247
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.40","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
143248
143248
 
143249
143249
  /***/ }),
143250
143250
  /* 687 */
package/dist/react/MultiSelect.tsx CHANGED
@@ -2,6 +2,7 @@ import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
  import { PropsList, Prop } from '../../../app-typescript';
4
4
  import { MultiSelect } from '../../../app-typescript';
5
+ import { Label } from '../../../app-typescript';
5
6
 
6
7
  interface IColor {
7
8
  name: string;
@@ -115,7 +116,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
115
116
  return (
116
117
  <div style={{display: 'flex', alignItems: 'center'}}>
117
118
  <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
118
- <div>{option.name}</div>
119
+ <span>{option.name}</span>
119
120
  </div>
120
121
  );
121
122
  }
package/dist/superdesk-ui.bundle.css CHANGED
@@ -11893,6 +11893,7 @@
11893
11893
  --sd-colour-state--done: var(--sd-colour-success); }
11894
11894
 
11895
11895
  [data-theme="dark-ui"] {
11896
+ --sd-card-header-bg-color--secondary: hsla(214, 30%, 30%, 1);
11896
11897
  --sd-colour-interactive-hs: 160, 50%;
11897
11898
  --sd-colour-interactive-l--05: var(--sd-colour-interactive-hs), 6%;
11898
11899
  --sd-colour-interactive-l--10: var(--sd-colour-interactive-hs), 10%;
@@ -12049,6 +12050,12 @@
12049
12050
  --sd-colour-interactive-btn-border: hsla(var(--sd-colour-interactive-l--50), 0.5); }
12050
12051
 
12051
12052
  :root, [data-theme="light-ui"] {
12053
+ --sd-card-header-bg-color--normal: hsla(214, 20%, 42%, 1);
12054
+ --sd-card-header-bg-color--secondary: hsla(214, 30%, 20%, 1);
12055
+ --sd-card-header-bg-color--inactive: hsla(214, 13%, 74%, 1);
12056
+ --sd-card-header-bg-color--active: hsla(214, 40%, 50%, 1);
12057
+ --sd-card-header-bg-color--light: var(--sd-colour-panel-bg--300);
12058
+ --sd-card-header-bg-color--gradient-1: linear-gradient(180deg, rgba(96,184,194,1) 2%, rgba(30,176,108,1) 90%);
12052
12059
  --sd-colour-test-1: hsl(308 71% 40% / 50%);
12053
12060
  --sd-colour-test-2: hsl(9 59% 49% / 0.5);
12054
12061
  --sd-colour-background__main-list: hsla(0, 0%, 97%, 1);
@@ -12114,7 +12121,7 @@
12114
12121
  --color-text: hsla(0, 0%, 96%, 1);
12115
12122
  --color-text-light: hsla(214, 13%, 76%, 1);
12116
12123
  --color-text-lighter: hsla(214, 13%, 56%, 1);
12117
- --color-icon-default: hsla(214, 13%, 64%, 1);
12124
+ --color-icon-default: hsla(214, 13%, 90%, 1);
12118
12125
  --sd-slugline-color: hsla(197, 60%, 75%, 1) !important;
12119
12126
  --sd-time-schedule-color: hsla(268, 60%, 65%, 1);
12120
12127
  --sd-navy-color: hsla(240, 90%, 75%, 1);
@@ -17369,7 +17376,7 @@ h1, h2, h3, h4, h5, h6 {
17369
17376
 
17370
17377
  .sd-text__info {
17371
17378
  font-weight: 300;
17372
- color: #647182; }
17379
+ color: var(--color-text-light); }
17373
17380
 
17374
17381
  .sd-text-icon {
17375
17382
  display: inline-flex; }
@@ -34406,26 +34413,26 @@ a.label {
34406
34413
  padding: 1.2rem; }
34407
34414
 
34408
34415
  .nav-tabs-vertical {
34409
- width: 2rem;
34410
- border-right: 1px solid #ccc;
34416
+ width: 3rem;
34417
+ border-right: 1px solid var(--sd-colour-line--medium);
34411
34418
  transition: all .2s ease-out .3s;
34412
34419
  opacity: 1; }
34413
34420
  .nav-tabs-vertical__list {
34414
- width: 2rem;
34421
+ width: 3rem;
34415
34422
  list-style: none;
34416
34423
  margin: 0;
34417
34424
  padding: 0; }
34418
34425
  .nav-tabs-vertical__tab {
34419
34426
  display: inline-block;
34420
- width: 2rem;
34421
- line-height: 2rem; }
34427
+ width: 3rem;
34428
+ line-height: 1; }
34422
34429
  .nav-tabs-vertical__tab--active .nav-tabs-vertical__link {
34423
- color: #1d2125; }
34430
+ color: var(--color-text); }
34424
34431
  .nav-tabs-vertical__link {
34425
34432
  display: inline-block;
34426
34433
  font-size: 1.1rem;
34427
34434
  font-weight: 500;
34428
- color: #647182;
34435
+ color: var(--color-text-light);
34429
34436
  text-transform: uppercase;
34430
34437
  white-space: nowrap;
34431
34438
  margin: 10px 0;
@@ -34434,7 +34441,7 @@ a.label {
34434
34441
  transform: translateX(20px) rotate(90deg);
34435
34442
  transform-origin: 0 0; }
34436
34443
  .nav-tabs-vertical__link:hover {
34437
- color: #1d2125; }
34444
+ color: var(--color-text); }
34438
34445
  .nav-tabs-vertical__link:after {
34439
34446
  content: "";
34440
34447
  float: left;
@@ -34520,7 +34527,7 @@ a.label {
34520
34527
  display: table-row-group; }
34521
34528
  .sd-display-table__head .sd-display-table__cell {
34522
34529
  font-weight: 600;
34523
- border-bottom: 2px solid rgba(0, 0, 0, 0.15); }
34530
+ border-bottom: 2px solid var(--sd-colour-line--light); }
34524
34531
 
34525
34532
  .sd-display-table__body {
34526
34533
  display: table-row-group; }
@@ -34531,7 +34538,7 @@ a.label {
34531
34538
  .sd-display-table__cell {
34532
34539
  display: table-cell;
34533
34540
  padding: 1.2rem 0.8rem;
34534
- border-bottom: 1px solid rgba(0, 0, 0, 0.15);
34541
+ border-bottom: 1px solid var(--sd-colour-line--light);
34535
34542
  font-weight: 500;
34536
34543
  text-align: start; }
34537
34544
  .sd-display-table__cell.sd-table-two-rows {
@@ -34551,14 +34558,14 @@ a.label {
34551
34558
  flex-wrap: nowrap;
34552
34559
  justify-content: center;
34553
34560
  padding: 1.2rem 0.8rem;
34554
- border-bottom: 1px solid rgba(0, 0, 0, 0.15);
34561
+ border-bottom: 1px solid var(--sd-colour-line--light);
34555
34562
  font-weight: 500;
34556
34563
  text-align: start;
34557
34564
  min-width: 120px; }
34558
34565
 
34559
34566
  .sd-flex-table--head .sd-flex-table__cell {
34560
34567
  font-weight: 600;
34561
- border-bottom: 2px solid rgba(0, 0, 0, 0.15); }
34568
+ border-bottom: 2px solid var(--sd-colour-line--light); }
34562
34569
 
34563
34570
  /* Thanks to Jase Smith - codepen.io/jasesmith */
34564
34571
  [sd-tooltip],
@@ -37933,8 +37940,6 @@ input.sd-inset-search__input {
37933
37940
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%); }
37934
37941
  .side-panel.side-panel--transparent {
37935
37942
  background-color: transparent; }
37936
- .side-panel.side-panel--transparent .side-panel__header {
37937
- background-color: rgba(255, 255, 255, 0.2); }
37938
37943
  .side-panel--bg-000, .side-panel--light {
37939
37944
  background-color: var(--sd-colour-panel-bg--000); }
37940
37945
  .side-panel--bg-100, .side-panel--light-grey {
@@ -40554,13 +40559,13 @@ input.sd-inset-search__input {
40554
40559
 
40555
40560
  .sd-content-navigation-panel {
40556
40561
  width: 20rem;
40557
- background-color: #f0f0f0;
40562
+ background-color: var(--sd-colour-background__left-nav);
40558
40563
  flex-shrink: 0;
40559
40564
  display: flex;
40560
40565
  flex-direction: column;
40561
40566
  overflow: auto;
40562
40567
  overflow-x: hidden;
40563
- border-right-color: #8c97a6;
40568
+ border-right-color: var(--sd-colour-line--light);
40564
40569
  border-right-style: solid;
40565
40570
  border-right-width: 0;
40566
40571
  transition: all .2s ease-out .1s; }
@@ -42009,16 +42014,15 @@ a.text-link {
42009
42014
  .sd-card .sd-card__actions-group {
42010
42015
  display: flex;
42011
42016
  align-items: center;
42012
- margin-right: .3rem; }
42013
- .sd-card .sd-card__actions-group a + a {
42014
- margin-left: .6rem; }
42017
+ margin-inline-end: var(--gap--x-small);
42018
+ gap: var(--gap--x-small); }
42015
42019
  .sd-card .sd-card__header {
42016
42020
  position: relative;
42017
42021
  flex-grow: 0;
42018
42022
  display: flex;
42019
42023
  flex-direction: row;
42020
42024
  align-items: center;
42021
- background-color: #607c8a;
42025
+ background-color: var(--sd-card-header-bg-color--normal);
42022
42026
  padding: 0;
42023
42027
  min-height: 4.4rem;
42024
42028
  color: white;
@@ -42041,11 +42045,11 @@ a.text-link {
42041
42045
  .sd-card .sd-card__header--light::before, .sd-card .sd-card__header--white::before {
42042
42046
  background-color: rgba(111, 125, 144, 0.5); }
42043
42047
  .sd-card .sd-card__header--light {
42044
- background-color: var(--sd-colour-panel-bg--300); }
42048
+ background-color: var(--sd-card-header-bg-color--light); }
42045
42049
  .sd-card .sd-card__header--light .sd-card__thumbnail {
42046
42050
  background-color: var(--sd-item__thumb-Bg--light); }
42047
42051
  .sd-card .sd-card__header--gradient-1 {
42048
- background: linear-gradient(180deg, #60b8c2 2%, #1eb06c 90%); }
42052
+ background: var(--sd-card-header-bg-color--gradient-1); }
42049
42053
  .sd-card .sd-card__header--gradient-1 .sd-card__thumbnail {
42050
42054
  background-color: transparent; }
42051
42055
  .sd-card .sd-card__header--blank {
@@ -42065,15 +42069,15 @@ a.text-link {
42065
42069
  .sd-card .sd-card__header--padding {
42066
42070
  padding: 1rem 0; }
42067
42071
  .sd-card .sd-card__header--secondary-color {
42068
- background-color: var(--color-subnav-bg--blueGrey-10); }
42072
+ background-color: var(--sd-card-header-bg-color--secondary); }
42069
42073
  .sd-card--active .sd-card__header {
42070
- background-color: #3d8fb3; }
42074
+ background-color: var(--sd-card-header-bg-color--active); }
42071
42075
  .sd-card--inactive .sd-card__header {
42072
- background-color: #b0b0b0; }
42076
+ background-color: var(--sd-card-header-bg-color--inactive); }
42073
42077
  .sd-card .sd-card__heading {
42074
42078
  padding-left: 1.2rem;
42075
42079
  padding-right: 1.2rem;
42076
- padding-top: 0.4rem;
42080
+ padding-block-start: 0.4rem;
42077
42081
  flex-grow: 1;
42078
42082
  font-size: 1.2rem;
42079
42083
  line-height: 100%;
@@ -42084,14 +42088,26 @@ a.text-link {
42084
42088
  overflow: hidden;
42085
42089
  color: inherit; }
42086
42090
  .sd-card .sd-card__heading--editable {
42087
- padding: 1rem 1.6rem 1rem;
42088
- text-transform: initial; }
42089
- .sd-card .sd-card__heading--editable:hover {
42090
- cursor: text; }
42091
- .sd-card .sd-card__heading--editable > input {
42092
- margin-top: 6px; }
42091
+ padding: var(--gap--small) var(--gap--small) var(--gap--small);
42092
+ text-transform: initial !important; }
42093
+ .sd-card .sd-card__heading--editable .sd-card__heading-dummy-input {
42094
+ display: flex;
42095
+ align-items: center;
42096
+ height: 3.2rem;
42097
+ border: 2px solid transparent;
42098
+ border-radius: var(--b-radius--medium);
42099
+ padding: 0 0.8rem;
42100
+ transition: all 0.2s ease;
42101
+ text-transform: initial !important;
42102
+ font-size: 1.4rem;
42103
+ font-weight: 400;
42104
+ letter-spacing: 0;
42105
+ line-height: 1; }
42106
+ .sd-card .sd-card__heading--editable .sd-card__heading-dummy-input:hover {
42107
+ border-color: var(--color-input-border);
42108
+ cursor: text; }
42093
42109
  .sd-card .sd-card__sub-header {
42094
- background-color: #9daeb7;
42110
+ background-color: #9eafb7;
42095
42111
  display: flex;
42096
42112
  align-items: center;
42097
42113
  color: white;
@@ -42121,7 +42137,7 @@ a.text-link {
42121
42137
  .sd-card .sd-card__btn-group .btn [class*=" icon-"] {
42122
42138
  color: white; }
42123
42139
  .sd-card .sd-card__thumbnail {
42124
- margin-top: 0.4rem;
42140
+ margin-block-start: 0.4rem;
42125
42141
  line-height: 0;
42126
42142
  background-color: var(--sd-item__thumb-Bg); }
42127
42143
  .sd-card .sd-card__thumbnail + .sd-card__heading {
@@ -42140,9 +42156,9 @@ a.text-link {
42140
42156
  font-size: 11px;
42141
42157
  color: rgba(0, 0, 0, 0.5);
42142
42158
  letter-spacing: 0.04em;
42143
- margin-bottom: 4px; }
42159
+ margin-block-end: 4px; }
42144
42160
  .sd-card .sd-card__content h4.with-value {
42145
- margin-bottom: 0; }
42161
+ margin-block-end: 0; }
42146
42162
  .sd-card .sd-card__content h4 .label {
42147
42163
  float: right;
42148
42164
  height: 15px;
@@ -42167,16 +42183,17 @@ a.text-link {
42167
42183
  text-transform: initial; }
42168
42184
  .sd-card .sd-card__content--scrollable {
42169
42185
  min-height: 20vh;
42170
- max-height: 30vh;
42186
+ max-height: 34vh;
42171
42187
  overflow-y: auto; }
42172
42188
  .sd-card .sd-card__content--padd-10 {
42173
42189
  padding: 1rem; }
42174
- .sd-card .sd-card__content-heading, .sd-card h4.sd-card__content-heading {
42190
+ .sd-card .sd-card__content-heading,
42191
+ .sd-card h4.sd-card__content-heading {
42175
42192
  text-transform: none;
42176
42193
  color: inherit;
42177
42194
  font-size: 1.6rem;
42178
42195
  letter-spacing: initial;
42179
- padding-bottom: 0.8rem; }
42196
+ padding-block-end: 0.8rem; }
42180
42197
  .sd-card .sd-card__placeholder {
42181
42198
  padding: 16px;
42182
42199
  flex-grow: 1;
@@ -42193,27 +42210,37 @@ a.text-link {
42193
42210
  margin: -16px;
42194
42211
  padding: 0;
42195
42212
  list-style: none; }
42196
- .sd-card .sd-card__content-list li, .sd-card .sd-card__content-list .sd-card__content-list-item {
42197
- padding: 16px;
42213
+ .sd-card .sd-card__content-list li,
42214
+ .sd-card .sd-card__content-list .sd-card__content-list-item {
42215
+ padding: var(--gap--medium);
42198
42216
  border-bottom: 1px solid var(--sd-colour-line--light); }
42199
- .sd-card .sd-card__content-list li--inline, .sd-card .sd-card__content-list .sd-card__content-list-item--inline {
42217
+ .sd-card .sd-card__content-list li--inline,
42218
+ .sd-card .sd-card__content-list .sd-card__content-list-item--inline {
42200
42219
  display: flex; }
42201
- .sd-card .sd-card__content-list li--inline h4, .sd-card .sd-card__content-list .sd-card__content-list-item--inline h4 {
42220
+ .sd-card .sd-card__content-list li--inline h4,
42221
+ .sd-card .sd-card__content-list .sd-card__content-list-item--inline h4 {
42202
42222
  flex: 1 1; }
42203
- .sd-card .sd-card__content-list li--inline span, .sd-card .sd-card__content-list .sd-card__content-list-item--inline span {
42223
+ .sd-card .sd-card__content-list li--inline span,
42224
+ .sd-card .sd-card__content-list .sd-card__content-list-item--inline span {
42204
42225
  flex: 1 1;
42205
42226
  text-align: end; }
42206
- .sd-card .sd-card__content-list li .sd-card__content-list-inline-span, .sd-card .sd-card__content-list .sd-card__content-list-item .sd-card__content-list-inline-span {
42227
+ .sd-card .sd-card__content-list li .sd-card__content-list-inline-span,
42228
+ .sd-card .sd-card__content-list .sd-card__content-list-item .sd-card__content-list-inline-span {
42207
42229
  display: inline-block; }
42208
- .sd-card .sd-card__content-list li:last-child, .sd-card .sd-card__content-list .sd-card__content-list-item:last-child {
42230
+ .sd-card .sd-card__content-list li:last-child,
42231
+ .sd-card .sd-card__content-list .sd-card__content-list-item:last-child {
42209
42232
  border: none; }
42210
- .sd-card .sd-card__content-list li--border-bottom:last-child, .sd-card .sd-card__content-list .sd-card__content-list-item--border-bottom:last-child {
42233
+ .sd-card .sd-card__content-list li--border-bottom:last-child,
42234
+ .sd-card .sd-card__content-list .sd-card__content-list-item--border-bottom:last-child {
42211
42235
  border-bottom: 1px solid var(--sd-colour-line--light); }
42212
- .sd-card .sd-card__content-list li--small, .sd-card .sd-card__content-list .sd-card__content-list-item--small {
42213
- padding: 7px 16px; }
42214
- .sd-card .sd-card__content-list li--small h4, .sd-card .sd-card__content-list .sd-card__content-list-item--small h4 {
42236
+ .sd-card .sd-card__content-list li--small,
42237
+ .sd-card .sd-card__content-list .sd-card__content-list-item--small {
42238
+ padding: var(--gap--small) var(--gap--small) var(--gap--small) var(--gap--medium); }
42239
+ .sd-card .sd-card__content-list li--small h4,
42240
+ .sd-card .sd-card__content-list .sd-card__content-list-item--small h4 {
42215
42241
  margin: 0; }
42216
- .sd-card .sd-card__content-list li--no-padding, .sd-card .sd-card__content-list .sd-card__content-list-item--no-padding {
42242
+ .sd-card .sd-card__content-list li--no-padding,
42243
+ .sd-card .sd-card__content-list .sd-card__content-list-item--no-padding {
42217
42244
  padding: 0; }
42218
42245
  .sd-card .sd-card__content-list .creation-time {
42219
42246
  display: block;
@@ -42222,35 +42249,35 @@ a.text-link {
42222
42249
  .sd-card .sd-card__content-list .creation-time i {
42223
42250
  display: inline-block;
42224
42251
  opacity: 0.5;
42225
- margin-top: -2px; }
42252
+ margin-block-start: -2px; }
42226
42253
  .sd-card .sd-card__content-list .button__view-all {
42227
- border-bottom: 1px dotted #5598B4;
42228
- color: #5598B4;
42254
+ border-bottom: 1px dotted var(--sd-colour-interactive);
42255
+ color: var(--sd-colour-interactive);
42229
42256
  cursor: pointer; }
42230
42257
  .sd-card .sd-card__content-list .sd-card__content-list-block-link {
42231
42258
  display: block;
42232
42259
  padding: .8rem 1.6rem;
42233
- color: #596473;
42260
+ color: var(--color-text);
42234
42261
  text-decoration: none; }
42235
42262
  .sd-card .sd-card__content-list .sd-card__content-list-block-link:hover {
42236
- color: #1d2125; }
42263
+ color: var(--color-text); }
42237
42264
  .sd-card .sd-card__content-list .sd-card__content-list-block-link--icon-hover {
42238
42265
  display: flex;
42239
42266
  justify-content: space-between; }
42240
42267
  .sd-card .sd-card__content-list .sd-card__content-list-block-link--icon-hover i {
42241
42268
  display: none; }
42242
42269
  .sd-card .sd-card__content-list .sd-card__content-list-block-link--icon-hover:hover {
42243
- background-color: rgba(94, 169, 200, 0.15); }
42270
+ background-color: var(--sd-colour-interactive--alpha-20); }
42244
42271
  .sd-card .sd-card__content-list .sd-card__content-list-block-link--icon-hover:hover i {
42245
42272
  display: inline-flex; }
42246
42273
  .sd-card .sd-card__article-header {
42247
42274
  padding: 16px; }
42248
42275
  .sd-card .sd-card__time-date {
42249
42276
  font-size: 11px;
42250
- color: #ababab;
42277
+ color: var(--color-text-light);
42251
42278
  font-weight: 300; }
42252
42279
  .sd-card .sd-card__time-date--reverse-color {
42253
- color: rgba(255, 255, 255, 0.6); }
42280
+ color: rgba(255, 255, 255, 0.7); }
42254
42281
  .sd-card .sd-card__footer {
42255
42282
  display: flex;
42256
42283
  flex-direction: row;
@@ -42277,28 +42304,28 @@ a.text-link {
42277
42304
  width: 100%;
42278
42305
  position: relative;
42279
42306
  height: 0;
42280
- padding-bottom: 75%;
42307
+ padding-block-end: 75%;
42281
42308
  overflow: hidden;
42282
42309
  text-align: center; }
42283
42310
  .sd-card .sd-card__thumbnail img {
42284
42311
  width: 100%;
42285
42312
  height: auto; }
42286
42313
  .sd-card .sd-card__thumbnail--size-xs {
42287
- padding-bottom: 35%; }
42314
+ padding-block-end: 35%; }
42288
42315
  .sd-card .sd-card__thumbnail--size-xs .sd-card__thumbnail-heading {
42289
42316
  font-size: 18px; }
42290
42317
  .sd-card .sd-card__thumbnail--size-xxs {
42291
- padding-bottom: 16%; }
42318
+ padding-block-end: 16%; }
42292
42319
  .sd-card .sd-card__thumbnail--size-xxs .sd-card__thumbnail-heading {
42293
42320
  font-size: 18px; }
42294
42321
  .sd-card .sd-card__thumbnail--size-s {
42295
- padding-bottom: 50%; }
42322
+ padding-block-end: 50%; }
42296
42323
  .sd-card .sd-card__thumbnail--size-m {
42297
- padding-bottom: 75%; }
42324
+ padding-block-end: 75%; }
42298
42325
  .sd-card .sd-card__thumbnail--size-l {
42299
- padding-bottom: 100%; }
42326
+ padding-block-end: 100%; }
42300
42327
  .sd-card .sd-card__thumbnail--size-xl {
42301
- padding-bottom: 125%; }
42328
+ padding-block-end: 125%; }
42302
42329
  .sd-card .sd-card__file-type-icn {
42303
42330
  color: white;
42304
42331
  font-size: 5.2rem;
@@ -42833,25 +42860,26 @@ a.text-link {
42833
42860
  .sd-grid-item-header {
42834
42861
  padding: 4px 0;
42835
42862
  margin-bottom: 6px;
42836
- border-bottom: 5px solid #4d4d4d;
42863
+ border-bottom: 5px solid var(--sd-colour-neutral);
42837
42864
  display: flex; }
42838
- .sd-grid-item-header__heading {
42865
+ .sd-grid-item-header .sd-grid-item-header__heading {
42839
42866
  color: var(--color-text);
42840
42867
  font-size: 15px;
42841
42868
  font-weight: 500;
42842
- flex-grow: 1; }
42843
- .sd-grid-item-header__heading + div {
42869
+ flex-grow: 1;
42870
+ min-height: 32px; }
42871
+ .sd-grid-item-header .sd-grid-item-header__heading + div {
42844
42872
  margin-inline-start: 8px; }
42845
- .sd-grid-item-header__heading a {
42873
+ .sd-grid-item-header .sd-grid-item-header__heading a {
42846
42874
  text-decoration: none;
42847
42875
  color: inherit; }
42848
- .sd-grid-item-header__heading a span {
42849
- border-bottom: 1px dotted #3d8fb3; }
42850
- .sd-grid-item-header__heading a [class^="icon-"],
42851
- .sd-grid-item-header__heading a [class*=" icon-"] {
42852
- color: #3d8fb3;
42876
+ .sd-grid-item-header .sd-grid-item-header__heading a span {
42877
+ border-bottom: 1px dotted var(--sd-colour-interactive); }
42878
+ .sd-grid-item-header .sd-grid-item-header__heading a [class^="icon-"],
42879
+ .sd-grid-item-header .sd-grid-item-header__heading a [class*=" icon-"] {
42880
+ color: var(--sd-colour-interactive);
42853
42881
  margin-inline-start: 8px; }
42854
- .sd-grid-item-header__heading a:hover span {
42882
+ .sd-grid-item-header .sd-grid-item-header__heading a:hover span {
42855
42883
  border-bottom-style: solid; }
42856
42884
 
42857
42885
  .dark-ui .sd-grid-item .sd-grid-item__text-label, [data-theme="dark-ui"] .sd-grid-item .sd-grid-item__text-label {
@@ -50778,21 +50806,24 @@ i.sd-sidetab-menu__helper-icon {
50778
50806
  font-size: 1.4rem;
50779
50807
  line-height: 100%;
50780
50808
  text-decoration: none;
50781
- color: #1d2125;
50809
+ color: var(--color-text);
50782
50810
  padding: 1.6rem 2rem;
50783
- transition: background-color 0.2s ease-out, color 0.1s ease-out; }
50811
+ transition: background-color 0.2s ease-out, color 0.1s ease-out;
50812
+ border-inline-end: 4px solid transparent; }
50784
50813
  .sd-content-nav__btn:hover {
50785
- background-color: rgba(94, 169, 200, 0.2);
50814
+ background-color: var(--sd-colour-interactive--alpha-20);
50786
50815
  color: var(--color-text);
50787
50816
  text-decoration: none; }
50788
- .sd-content-nav__btn:active, .sd-content-nav__btn--active {
50789
- background-color: white;
50817
+ .sd-content-nav__btn:active, .sd-content-nav__btn.sd-content-nav__btn--active {
50818
+ background-color: var(--sd-colour-interactive--alpha-10);
50790
50819
  color: var(--sd-colour-interactive); }
50820
+ .sd-content-nav__btn.sd-content-nav__btn--active {
50821
+ border-color: var(--sd-colour-interactive--active); }
50791
50822
 
50792
50823
  .sd-content-nav-title {
50793
50824
  font-size: 1.5rem;
50794
50825
  font-weight: 300; }
50795
- .sd-content-nav-title--uppercase {
50826
+ .sd-content-nav-title.sd-content-nav-title--uppercase {
50796
50827
  font-size: 1.3rem;
50797
50828
  font-weight: 400;
50798
50829
  text-transform: uppercase; }
package/examples/pages/react/MultiSelect.tsx CHANGED
@@ -2,6 +2,7 @@ import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
  import { PropsList, Prop } from '../../../app-typescript';
4
4
  import { MultiSelect } from '../../../app-typescript';
5
+ import { Label } from '../../../app-typescript';
5
6
 
6
7
  interface IColor {
7
8
  name: string;
@@ -115,7 +116,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
115
116
  return (
116
117
  <div style={{display: 'flex', alignItems: 'center'}}>
117
118
  <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
118
- <div>{option.name}</div>
119
+ <span>{option.name}</span>
119
120
  </div>
120
121
  );
121
122
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.39",
3
+ "version": "3.0.40",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",