superdesk-ui-framework 3.0.41 → 3.0.43

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 (104) 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 +20 -7
  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/dist/examples.bundle.css +18 -16
  99. package/dist/examples.bundle.js +5 -7
  100. package/dist/superdesk-ui.bundle.css +4271 -3557
  101. package/dist/superdesk-ui.bundle.js +4 -6
  102. package/package.json +2 -2
  103. package/react/components/Form/InputWrapper.d.ts +1 -1
  104. package/react/components/Menu.js +1 -1
package/app/styles/form-elements/_input-preview.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  padding: 0.4rem 0.4rem 0.3rem 0.4rem;
7
7
  overflow: hidden;
8
8
  background-color: transparent;
9
+
9
10
  .tags-preview__tag-list {
10
11
  display: flex;
11
12
  justify-content: flex-start;
@@ -16,22 +17,24 @@
16
17
  padding: 0;
17
18
  list-style-type: none;
18
19
  }
20
+
19
21
  .tags-preview__tag-item {
20
22
  @include tag-label;
21
23
  color: currentColor;
22
24
  background: $tag-label-BG-default;
25
+ }
23
26
 
24
- &--single-select {
25
- border-radius: 2px;
26
- padding-inline-start: 0.714em;
27
- padding-inline-end: 0.857em;
28
- }
27
+ .tags-preview__tag-item--single-select {
28
+ border-radius: 2px;
29
+ padding-inline-start: 0.714em;
30
+ padding-inline-end: 0.857em;
31
+ }
29
32
 
30
- &--border {
31
- border-left: solid;
32
- border-left-width: 5px;
33
- }
33
+ .tags-preview__tag-item--border {
34
+ border-left: solid;
35
+ border-left-width: 5px;
34
36
  }
37
+
35
38
  .tags-input__helper-box {
36
39
  display: flex;
37
40
  align-items: center;
@@ -43,11 +46,13 @@
43
46
  gap: 2px;
44
47
  grid-row: 2/3;
45
48
  grid-column: 2/4;
49
+
46
50
  &:focus-within {
47
51
  box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
48
52
  border-color: var(--sd-colour-interactive);
49
53
  background-color: var(--sd-colour-interactive--alpha-20);
50
54
  }
55
+
51
56
  .duration-input-preview {
52
57
  display: inline-block;
53
58
  text-align: end;
@@ -57,6 +62,7 @@
57
62
  font-size: 1.4rem;
58
63
  line-height: 3.2rem;
59
64
  }
65
+
60
66
  .sd-input__suffix {
61
67
  height: 3.2rem;
62
68
  line-height: 3.2rem;
package/app/styles/form-elements/_input-wrap.scss CHANGED
@@ -28,6 +28,7 @@
28
28
  grid-column: 3/4;
29
29
  z-index: 1;
30
30
  }
31
+
31
32
  .sd-input__char-count {
32
33
  grid-row: 3/4;
33
34
  grid-column: 3/4;
@@ -45,94 +46,99 @@
45
46
  align-items: center;
46
47
  justify-content: flex-start;
47
48
  }
49
+
48
50
  .form-label--boxed {
49
51
  margin-block: 2px !important;
50
52
  }
53
+
51
54
  .icn-btn {
52
55
  grid-row: 1/2;
53
56
  grid-column: 3/4;
54
57
  }
58
+ }
55
59
 
56
- &--inline-label {
57
- grid-template-columns: auto 1fr auto;
58
- grid-template-rows: auto auto auto;
59
- .sd-input__label,
60
- .form-label {
61
- grid-row: 2/3;
62
- grid-column: 1/2;
63
- padding-inline-end: 1rem;
64
- padding-inline-start: 0;
65
- padding-block-start: 0.4rem;
66
- padding-block-end: 0;
67
- position: relative;
68
-
69
- max-width: 260px;
70
- min-width: 100px;
71
- text-align: end;
72
- position: relative;
73
- align-self: center;
74
- line-height: 1.2;
75
- &::after {
76
- position: absolute;
77
- z-index: 2;
78
- inset-block-start: -2px;
79
- inset-inline-end: 4px;
80
- }
81
- }
82
- }
60
+ .input-wrap--inline-label {
61
+ grid-template-columns: auto 1fr auto;
62
+ grid-template-rows: auto auto auto;
83
63
 
84
- &--required {
85
- .sd-input__label::after {
86
- color:$red;
87
- content: "*";
88
- vertical-align: top;
89
- font-size: 1.2rem;
90
- padding-left: 0.3rem;
91
- }
92
- .sd-input__label.sd-input__label--boxed::after {
64
+ .sd-input__label,
65
+ .form-label {
66
+ grid-row: 2/3;
67
+ grid-column: 1/2;
68
+ padding-inline-end: 1rem;
69
+ padding-inline-start: 0;
70
+ padding-block-start: 0.4rem;
71
+ padding-block-end: 0;
72
+ position: relative;
73
+ max-width: 260px;
74
+ min-width: 100px;
75
+ text-align: end;
76
+ position: relative;
77
+ align-self: center;
78
+ line-height: 1.2;
79
+
80
+ &::after {
93
81
  position: absolute;
94
- inset-block-start: -4px;
95
- inset-inline-end: -10px;
82
+ z-index: 2;
83
+ inset-block-start: -2px;
84
+ inset-inline-end: 4px;
96
85
  }
97
86
  }
87
+ }
98
88
 
99
- &--disabled {
100
- .sd-input__label,
101
- .sd-input__message-box,
102
- .sd-input__char-count {
103
- opacity: 0.5 !important;
104
- pointer-events: none !important;
105
- }
106
- .sd-input__hint,
107
- .sd-input__message,
108
- .sd-input__char-count {
109
- pointer-events: none;
110
- }
89
+ .input-wrap--required {
90
+ .sd-input__label::after {
91
+ color:$red;
92
+ content: "*";
93
+ vertical-align: top;
94
+ font-size: 1.2rem;
95
+ padding-left: 0.3rem;
111
96
  }
112
97
 
113
- &--no-label {
114
- grid-template-rows: auto auto auto;
98
+ .sd-input__label.sd-input__label--boxed::after {
99
+ position: absolute;
100
+ inset-block-start: -4px;
101
+ inset-inline-end: -10px;
115
102
  }
103
+ }
116
104
 
117
- &--medium {
118
- &.sd-input--boxed-style {
119
- .sd-input__input,
120
- .sd-input__select {
121
- border-radius: var(--b-radius--medium);
122
- &:focus {
123
- box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
124
- }
125
- }
126
- }
105
+ .input-wrap--disabled {
106
+ .sd-input__label,
107
+ .sd-input__message-box,
108
+ .sd-input__char-count {
109
+ opacity: 0.5 !important;
110
+ pointer-events: none !important;
127
111
  }
128
- &--boxed {
129
- //grid-template-columns: auto 1fr auto;
130
- //grid-template-rows: auto auto auto;
131
- // grid-gap: 0;
132
- // position: relative;
133
- // align-self: stretch;
134
- // flex-grow: 1;
135
- // width: 100%;
136
112
 
113
+ .sd-input__hint,
114
+ .sd-input__message,
115
+ .sd-input__char-count {
116
+ pointer-events: none;
117
+ }
118
+ }
119
+
120
+ .input-wrap--no-label {
121
+ grid-template-rows: auto auto auto;
122
+ }
123
+
124
+ .input-wrap--medium {
125
+ &.sd-input--boxed-style {
126
+ .sd-input__input,
127
+ .sd-input__select {
128
+ border-radius: var(--b-radius--medium);
129
+
130
+ &:focus {
131
+ box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
132
+ }
133
+ }
137
134
  }
138
- }
135
+ }
136
+ .input-wrap--boxed {
137
+ //grid-template-columns: auto 1fr auto;
138
+ //grid-template-rows: auto auto auto;
139
+ // grid-gap: 0;
140
+ // position: relative;
141
+ // align-self: stretch;
142
+ // flex-grow: 1;
143
+ // width: 100%;
144
+ }