superdesk-ui-framework 3.0.1-beta.8 → 3.0.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 (160) hide show
  1. package/app/fonts/sd_icons.eot +0 -0
  2. package/app/fonts/sd_icons.svg +1 -0
  3. package/app/fonts/sd_icons.ttf +0 -0
  4. package/app/fonts/sd_icons.woff +0 -0
  5. package/app/scripts/toggleBoxNext.js +1 -1
  6. package/app/styles/_big-icon-font.scss +1 -1
  7. package/app/styles/_buttons.scss +11 -6
  8. package/app/styles/_content-divider.scss +63 -8
  9. package/app/styles/_helpers.scss +24 -1
  10. package/app/styles/_icon-font.scss +11 -10
  11. package/app/styles/_labels.scss +0 -1
  12. package/app/styles/_master-desk.scss +5 -4
  13. package/app/styles/_modals.scss +7 -3
  14. package/app/styles/_normalize.scss +4 -0
  15. package/app/styles/_sd-tag-input.scss +56 -2
  16. package/app/styles/_simple-list.scss +0 -2
  17. package/app/styles/_table-list.scss +116 -12
  18. package/app/styles/app.scss +3 -0
  19. package/app/styles/components/_list-item.scss +23 -16
  20. package/app/styles/components/_sd-collapse-box.scss +6 -6
  21. package/app/styles/components/_sd-comment-box.scss +8 -4
  22. package/app/styles/components/_sd-editor-popup.scss +4 -4
  23. package/app/styles/components/_sd-media-carousel.scss +37 -2
  24. package/app/styles/components/_sd-pagination.scss +41 -0
  25. package/app/styles/components/_sd-photo-preview.scss +2 -2
  26. package/app/styles/components/_subnav.scss +470 -470
  27. package/app/styles/design-tokens/_new-colors.scss +29 -12
  28. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  29. package/app/styles/form-elements/_input-wrap.scss +138 -0
  30. package/app/styles/form-elements/_inputs.scss +230 -61
  31. package/app/styles/grids/_grid-layout.scss +13 -14
  32. package/app/styles/interface-elements/_side-panel.scss +1 -1
  33. package/app/styles/layout/_editor.scss +6 -0
  34. package/app/styles/menus/_sd-sidebar-menu.scss +1 -1
  35. package/app/styles/primereact/_pr-datepicker.scss +16 -2
  36. package/app/styles/primereact/_pr-dialog.scss +9 -0
  37. package/app/styles/primereact/_pr-menu.scss +6 -5
  38. package/app/styles/variables/_colors.scss +47 -47
  39. package/app/template/search-handler.html +2 -2
  40. package/app-typescript/components/ContentDivider.tsx +3 -0
  41. package/app-typescript/components/DatePicker.tsx +8 -9
  42. package/app-typescript/components/Dropdown.tsx +127 -82
  43. package/app-typescript/components/DurationInput.tsx +39 -14
  44. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  45. package/app-typescript/components/Form/InputBase.tsx +12 -2
  46. package/app-typescript/components/Input.tsx +4 -4
  47. package/app-typescript/components/Label.tsx +17 -1
  48. package/app-typescript/components/Layouts/AuthoringFrame.tsx +2 -1
  49. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +21 -2
  50. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
  51. package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
  52. package/app-typescript/components/Layouts/CoreLayout.tsx +3 -1
  53. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +10 -1
  54. package/app-typescript/components/Lists/ContentList.tsx +64 -30
  55. package/app-typescript/components/Lists/TableList.tsx +255 -53
  56. package/app-typescript/components/Menu.tsx +2 -2
  57. package/app-typescript/components/Modal.tsx +6 -2
  58. package/app-typescript/components/MultiSelect.tsx +1 -1
  59. package/app-typescript/components/NavButton.tsx +2 -1
  60. package/app-typescript/components/Navigation/SideBarMenu.tsx +30 -4
  61. package/app-typescript/components/SearchBar.tsx +11 -3
  62. package/app-typescript/components/Spacer.tsx +87 -0
  63. package/app-typescript/components/TimePicker.tsx +2 -13
  64. package/app-typescript/components/TreeSelect.tsx +286 -180
  65. package/app-typescript/index.ts +1 -0
  66. package/dist/examples.bundle.css +110 -71
  67. package/dist/examples.bundle.js +23848 -21661
  68. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +505 -2
  69. package/dist/playgrounds/react-playgrounds/Index.tsx +1 -0
  70. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  71. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +17 -19
  72. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +22 -23
  73. package/dist/playgrounds/react-playgrounds/TestGround.tsx +226 -25
  74. package/dist/react/ContentDivider.tsx +22 -18
  75. package/dist/react/ContentList.tsx +188 -12
  76. package/dist/react/DatePicker.tsx +50 -2
  77. package/dist/react/Dropdowns.tsx +580 -48
  78. package/dist/react/DurationInput.tsx +7 -3
  79. package/dist/react/Inputs.tsx +1 -7
  80. package/dist/react/Modal.tsx +154 -22
  81. package/dist/react/MultiSelect.tsx +5 -5
  82. package/dist/react/NavButtons.tsx +31 -1
  83. package/dist/react/TableList.tsx +52 -139
  84. package/dist/react/Togglebox.tsx +1 -1
  85. package/dist/react/TreeSelect.tsx +167 -176
  86. package/dist/sd_icons.eot +0 -0
  87. package/dist/sd_icons.svg +1 -0
  88. package/dist/sd_icons.ttf +0 -0
  89. package/dist/sd_icons.woff +0 -0
  90. package/dist/superdesk-ui.bundle.css +1100 -407
  91. package/dist/superdesk-ui.bundle.js +6591 -4035
  92. package/dist/vendor.bundle.js +27 -27
  93. package/examples/css/docs-page.css +4 -4
  94. package/examples/index.js +4 -0
  95. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +505 -2
  96. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +1 -0
  97. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  98. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +17 -19
  99. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +22 -23
  100. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +226 -25
  101. package/examples/pages/react/ContentDivider.tsx +22 -18
  102. package/examples/pages/react/ContentList.tsx +188 -12
  103. package/examples/pages/react/DatePicker.tsx +50 -2
  104. package/examples/pages/react/Dropdowns.tsx +580 -48
  105. package/examples/pages/react/DurationInput.tsx +7 -3
  106. package/examples/pages/react/Inputs.tsx +1 -7
  107. package/examples/pages/react/Modal.tsx +154 -22
  108. package/examples/pages/react/MultiSelect.tsx +5 -5
  109. package/examples/pages/react/NavButtons.tsx +31 -1
  110. package/examples/pages/react/TableList.tsx +52 -139
  111. package/examples/pages/react/Togglebox.tsx +1 -1
  112. package/examples/pages/react/TreeSelect.tsx +167 -176
  113. package/package.json +3 -5
  114. package/react/components/ContentDivider.d.ts +1 -0
  115. package/react/components/ContentDivider.js +2 -0
  116. package/react/components/DatePicker.d.ts +2 -2
  117. package/react/components/DatePicker.js +3 -3
  118. package/react/components/Dropdown.d.ts +6 -5
  119. package/react/components/Dropdown.js +57 -30
  120. package/react/components/DurationInput.d.ts +1 -1
  121. package/react/components/DurationInput.js +46 -17
  122. package/react/components/Form/FormLabel.d.ts +4 -1
  123. package/react/components/Form/FormLabel.js +9 -3
  124. package/react/components/Form/InputBase.d.ts +0 -1
  125. package/react/components/Form/InputBase.js +15 -1
  126. package/react/components/Input.d.ts +3 -3
  127. package/react/components/Input.js +2 -1
  128. package/react/components/Label.d.ts +1 -0
  129. package/react/components/Label.js +17 -2
  130. package/react/components/Layouts/AuthoringFrame.d.ts +1 -0
  131. package/react/components/Layouts/AuthoringFrame.js +1 -1
  132. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +9 -2
  133. package/react/components/Layouts/AuthoringFrameRightBar.js +14 -3
  134. package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
  135. package/react/components/Layouts/AuthoringMain.js +1 -1
  136. package/react/components/Layouts/CoreLayout.d.ts +2 -0
  137. package/react/components/Layouts/CoreLayout.js +1 -1
  138. package/react/components/Layouts/CoreLayoutMain.d.ts +2 -0
  139. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  140. package/react/components/Lists/ContentList.d.ts +6 -0
  141. package/react/components/Lists/ContentList.js +42 -16
  142. package/react/components/Lists/TableList.d.ts +30 -8
  143. package/react/components/Lists/TableList.js +127 -24
  144. package/react/components/Menu.js +1 -1
  145. package/react/components/Modal.d.ts +2 -0
  146. package/react/components/Modal.js +3 -3
  147. package/react/components/MultiSelect.d.ts +40 -0
  148. package/react/components/MultiSelect.js +70 -0
  149. package/react/components/NavButton.d.ts +1 -1
  150. package/react/components/Navigation/SideBarMenu.d.ts +6 -0
  151. package/react/components/Navigation/SideBarMenu.js +19 -2
  152. package/react/components/SearchBar.d.ts +1 -1
  153. package/react/components/SearchBar.js +15 -7
  154. package/react/components/TimePicker.d.ts +1 -5
  155. package/react/components/TimePicker.js +3 -7
  156. package/react/components/TreeSelect.d.ts +12 -5
  157. package/react/components/TreeSelect.js +189 -116
  158. package/react/index.d.ts +1 -0
  159. package/react/index.js +3 -0
  160. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -66
@@ -14,6 +14,7 @@
14
14
  height: $form-input-height;
15
15
  border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
16
16
  display: block;
17
+ position: relative;
17
18
  &::placeholder {
18
19
  color: var(--color-text-lighter);
19
20
  font-weight: 400;
@@ -34,7 +35,9 @@
34
35
  }
35
36
 
36
37
  @mixin Form-label-base {
37
- display: inline-block;
38
+ display: inline-flex;
39
+ align-items: flex-start;
40
+ justify-content: flex-start;
38
41
  font-size: 1.1rem;
39
42
  margin: 0 0.5rem 0 0;
40
43
  line-height: 1;
@@ -50,15 +53,15 @@
50
53
  display: inline-flex;
51
54
  align-items: center;
52
55
  justify-content: center;
53
- padding: 2px 8px 1px;
56
+ padding: 2px 8px;
54
57
  font-size: 1.1rem;
55
58
  font-family: $baseFontFamily;
56
59
  font-weight: 400;
57
- line-height: 1.8rem;
60
+ line-height: 2rem;
58
61
  text-transform: uppercase;
59
62
  font-style: normal;
60
63
  letter-spacing: 0.08em;
61
- height: 1.8rem;
64
+ height: 2rem;
62
65
  transition: opacity ease 0.2s;
63
66
  justify-self: start;
64
67
  position: relative;
@@ -87,7 +90,50 @@
87
90
  content: "*";
88
91
  vertical-align: top;
89
92
  font-size: 1.2rem;
90
- padding-left: 0.3rem;
93
+ padding-inline-start: 0.3rem;
94
+ margin-top: -2px
95
+ }
96
+ }
97
+ &--invalid {
98
+ color: $red;
99
+ }
100
+ &--focused {
101
+ color: var(--sd-colour-interactive);
102
+ &.form-label--invalid {
103
+ color: $red;
104
+ }
105
+ }
106
+ &--boxed {
107
+ @include Boxed-label-base;
108
+ &--light {
109
+ background-color: hsla(214, 13%, 30%, 0.4);
110
+ color: hsl(214, 13%, 96%);
111
+ }
112
+ &--dark {
113
+ background-color: hsla(214, 13%, 30%, 0.4);
114
+ color: hsl(214, 13%, 96%);
115
+ }
116
+ &.form-label--required {
117
+ &::after {
118
+ margin-inline-start: 0.2rem;
119
+ color: #e41b21;
120
+ content: "*";
121
+ vertical-align: top;
122
+ font-size: 1.2rem;
123
+ padding-inline-start: 0.3rem;
124
+ position: absolute;
125
+ inset-block-start: -4px;
126
+ inset-inline-end: -10px;
127
+ }
128
+ }
129
+ &.form-label--invalid,
130
+ &.form-label--invalid.form-label--focused {
131
+ background-color: $red;
132
+ color: hsl(214, 13%, 96%);
133
+ }
134
+ &.form-label--focused {
135
+ background-color: var(--sd-colour-interactive);
136
+ color: hsl(214, 13%, 96%);
91
137
  }
92
138
  }
93
139
  }
@@ -118,7 +164,7 @@
118
164
  width: 100%;
119
165
  }
120
166
  &__value {
121
- margin-right: 6px;
167
+ margin-inline-end: 6px;
122
168
  text-transform: uppercase;
123
169
  }
124
170
  input, textarea {
@@ -175,25 +221,30 @@
175
221
  }
176
222
  .sd-line-input__info-left, .sd-line-input__info-right { // use for 1-2 letter info that appear inside inputs ("W" - for width; "H" - for height; px, mm - for units, etc.)
177
223
  position: absolute;
178
- top: 2.5rem;
224
+ inset-block-start: 2.5rem;
179
225
  opacity: 0.3;
180
226
  font-size: 1.5rem;
181
227
  font-weight: 300;
182
228
  }
183
229
  .sd-line-input__info-right {
184
- right: 0.8rem;
230
+ inset-inline-end: 0.8rem;
185
231
  }
186
232
  .sd-line-input__info-left {
187
- left: 0.8rem;
233
+ inset-inline-start: 0.8rem;
188
234
  }
189
235
 
190
236
  .sd-line-input__icon-left, .sd-line-input__icon-right {
191
237
  position: absolute;
192
- top: 1.6rem;
238
+ inset-block-start: 1.6rem;
193
239
  cursor: pointer;
194
240
  }
195
241
  .sd-line-input__icon-right {
196
- right: 0.2rem;
242
+ inset-inline-end: 0.2rem;
243
+ }
244
+ .sd-line-input__icon-right.icn-btn {
245
+ inset-inline-end: 0.2rem;
246
+ inset-block-start: 1.8rem;
247
+ z-index: 1;
197
248
  }
198
249
  .sd-line-input__icon-left {
199
250
  left: 0.2rem;
@@ -202,14 +253,14 @@
202
253
  &.sd-line-input--indent-l30 {
203
254
  input, textarea {
204
255
  &.sd-line-input__input {
205
- padding-left: 3rem;
256
+ padding-inline-start: 3rem;
206
257
  }
207
258
  }
208
259
  }
209
260
  &.sd-line-input--indent-r30 {
210
261
  input, textarea {
211
262
  &.sd-line-input__input {
212
- padding-right: 3rem;
263
+ padding-inline-end: 3rem;
213
264
  }
214
265
  }
215
266
  }
@@ -219,13 +270,13 @@
219
270
  position: absolute;
220
271
  line-height: 100%;
221
272
  margin: 0;
222
- top:0;
273
+ inset-block-start:0;
223
274
  &--required::after {
224
275
  color:$red;
225
276
  content: "*";
226
277
  vertical-align: top;
227
278
  font-size: 1.2rem;
228
- padding-left: 0.3rem;
279
+ padding-inline-start: 0.3rem;
229
280
  }
230
281
 
231
282
  }
@@ -241,15 +292,15 @@
241
292
  }
242
293
  .sd-line-input__hint {
243
294
  position: absolute;
244
- left: 1px;
245
- right: auto;
246
- padding-right: 5.5rem;
295
+ inset-inline-start: 1px;
296
+ inset-inline-end: auto;
297
+ padding-inline-end: 5.5rem;
247
298
  margin-top: 0.4rem;
248
299
  }
249
300
  .sd-line-input__char-count {
250
301
  position: absolute;
251
- right: 1px;
252
- left: auto;
302
+ inset-inline-end: 1px;
303
+ inset-inline-start: auto;
253
304
  margin-top: 0.5rem;
254
305
  font-size: 1.1rem;
255
306
  font-weight: 400;
@@ -347,12 +398,12 @@
347
398
  }
348
399
  &.sd-line-input--no-label {
349
400
  &::after {
350
- top: 1.4rem;
401
+ inset-block-start: 1.4rem;
351
402
  }
352
403
  }
353
404
  &.sd-line-input--label-left {
354
405
  &::after {
355
- top: 1.2rem;
406
+ inset-block-start: 1.2rem;
356
407
  }
357
408
  }
358
409
  }
@@ -368,7 +419,7 @@
368
419
  content: "*";
369
420
  vertical-align: top;
370
421
  font-size: 1.2rem;
371
- padding-left: 0.3rem;
422
+ padding-inline-start: 0.3rem;
372
423
  }
373
424
  }
374
425
  &.sd-line-input--no-label {
@@ -403,14 +454,14 @@
403
454
  position: static;
404
455
  grid-row: 2/3;
405
456
  grid-column: 3/4;
406
- padding-right: 0;
457
+ padding-inline-end: 0;
407
458
  }
408
459
  .sd-line-input__char-count {
409
460
  position: static;
410
461
  grid-row: 2/3;
411
462
  grid-column: 5/4;
412
463
  text-align: end;
413
- padding-left: 1.6rem;
464
+ padding-inline-start: 1.6rem;
414
465
  }
415
466
  }
416
467
  &--label-left-auto {
@@ -430,14 +481,14 @@
430
481
  &--with-icon-l {
431
482
  input, textarea {
432
483
  &.sd-line-input__input {
433
- padding-right: 3rem;
484
+ padding-inline-end: 3rem;
434
485
  }
435
486
  }
436
487
  }
437
488
  .sd-line-input__plus-btn {
438
489
  position: absolute;
439
- top: 1.8rem;
440
- left: 0;
490
+ inset-block-start: 1.8rem;
491
+ inset-inline-start: 0;
441
492
  height: 2.2rem;
442
493
  width: 2.2rem;
443
494
  background-color: var(--sd-colour-interactive--alpha-70);
@@ -463,6 +514,129 @@
463
514
 
464
515
  ///////////////// -------------------- NEW INPUTS --------------------- /////////////////
465
516
 
517
+ .sd-input__input {
518
+ @include Line-input-base;
519
+ &--invalid {
520
+ border-bottom: 1px solid $red;
521
+ background-color: hsla(357, 79%, 50%, 0.075);
522
+ &:hover {
523
+ background-color: hsla(357, 79%, 50%, 0.12);
524
+ border-bottom-color: $red;
525
+ }
526
+ &:focus {
527
+ background-color: hsla(357, 79%, 50%, 0.16);
528
+ border-bottom-color: $red;
529
+ box-shadow: 0 1px 0 0 $red;
530
+ }
531
+ }
532
+ &--disabled {
533
+ opacity: 0.5;
534
+ background-color: var(--color-input-bg);
535
+ border-bottom: 1px dotted var(--color-input-border);
536
+ cursor: not-allowed !important;
537
+ box-shadow: none;
538
+ &:hover {
539
+ background-color: var(--color-input-bg);
540
+ border-bottom-color: var(--color-input-border);
541
+ }
542
+ }
543
+ &--boxed-style {
544
+ border: 0;
545
+ border: 2px solid var(--color-input-border);
546
+ background-color: transparent;
547
+ transition: all ease 0.3s;
548
+ border-radius: var(--b-radius--large);
549
+ display: block;
550
+ &:hover {
551
+ border-color: var(--color-input-border-hover);
552
+ background-color: transparent;
553
+ }
554
+ &:focus {
555
+ outline: none;
556
+ border-color: var(--sd-colour-interactive--alpha-50);
557
+ box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
558
+ background-color: transparent;
559
+ }
560
+
561
+ &.sd-input__input--disabled {
562
+ border: 2px solid var(--color-input-border);
563
+ // cursor: not-allowed !important;
564
+ box-shadow: none;
565
+ &:hover {
566
+ //background-color: var(--color-input-bg);
567
+ border-color: var(--color-input-border);
568
+ }
569
+ }
570
+
571
+ &.sd-input__input--invalid {
572
+ background-color: hsla(357, 79%, 50%, 0.075);
573
+ border-color: $red;
574
+ &:hover,
575
+ &:focus {
576
+ background-color: hsla(357, 79%, 50%, 0.12);
577
+ box-shadow: none !important;
578
+ }
579
+ }
580
+ }
581
+ &--medium {
582
+ border-radius: var(--b-radius--medium);
583
+ &:focus {
584
+ box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
585
+ }
586
+ }
587
+ &--large {
588
+ padding: 0 1.6rem;
589
+ min-height: 4.8rem;
590
+ font-size: 2.4rem;
591
+ font-weight: 500;
592
+ }
593
+ &--x-large {
594
+ padding: 0 1.6rem;
595
+ min-height: 5.6rem;
596
+ font-size: 3.2rem;
597
+ font-weight: 500;
598
+ }
599
+ }
600
+
601
+ .sd-input__select {
602
+ display: block;
603
+ position: relative;
604
+ @include Line-input-base;
605
+ padding-inline-end: 2rem;
606
+ min-width: 5rem;
607
+ cursor: pointer;
608
+ option {
609
+ color:inherit;
610
+ font-size: 1.4rem;
611
+ line-height: 2rem;
612
+ background-color: var(--color-dropdown-menu-Bg);
613
+ color: var(--color-dropdown-menu-text);
614
+ }
615
+ }
616
+
617
+ .sd-input__hint,
618
+ .sd-input__message,
619
+ .sd-input__char-count {
620
+ font-size: 1.2rem;
621
+ line-height: 1.4rem;
622
+ transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
623
+ color: var(--color-text-light);
624
+ font-weight: 300;
625
+ letter-spacing: 0.03em;
626
+ display: block;
627
+ }
628
+ .sd-input__char-count {
629
+ font-size: 1.1rem;
630
+ font-weight: 400;
631
+ font-style: italic;
632
+ &--error {
633
+ color: $red;
634
+ }
635
+ }
636
+
637
+
638
+ //----
639
+
466
640
  .sd-input {
467
641
  padding-top: 0;
468
642
  margin: 0;
@@ -475,7 +649,7 @@
475
649
 
476
650
 
477
651
  .sd-input__input {
478
- @include Line-input-base;
652
+ //@include Line-input-base;
479
653
  grid-row: 2/3;
480
654
  grid-column: 2/4;
481
655
  }
@@ -501,21 +675,21 @@
501
675
  }
502
676
  }
503
677
  .sd-input__select {
504
- display: block;
505
- position: relative;
506
- @include Line-input-base;
507
- padding-inline-end: 2rem;
678
+ // display: block;
679
+ // position: relative;
680
+ // @include Line-input-base;
681
+ // padding-inline-end: 2rem;
508
682
  grid-row: 2/3;
509
683
  grid-column: 2/4;
510
- min-width: 5rem;
511
- cursor: pointer;
512
- option {
513
- color:inherit;
514
- font-size: 1.4rem;
515
- line-height: 2rem;
516
- background-color: var(--color-dropdown-menu-Bg);
517
- color: var(--color-dropdown-menu-text);
518
- }
684
+ // min-width: 5rem;
685
+ // cursor: pointer;
686
+ // option {
687
+ // color:inherit;
688
+ // font-size: 1.4rem;
689
+ // line-height: 2rem;
690
+ // background-color: var(--color-dropdown-menu-Bg);
691
+ // color: var(--color-dropdown-menu-text);
692
+ // }
519
693
  }
520
694
  &.sd-input--is-select {
521
695
  &::after {
@@ -556,24 +730,24 @@
556
730
  .sd-input__hint,
557
731
  .sd-input__message,
558
732
  .sd-input__char-count {
559
- font-size: 1.2rem;
560
- line-height: 1.4rem;
561
- transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
562
- color: var(--color-text-light);
563
- font-weight: 300;
733
+ // font-size: 1.2rem;
734
+ // line-height: 1.4rem;
735
+ // transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
736
+ // color: var(--color-text-light);
737
+ // font-weight: 300;
564
738
  margin: 0.5rem 0;
565
- letter-spacing: 0.03em;
566
- display: block;
739
+ // letter-spacing: 0.03em;
740
+ // display: block;
567
741
  }
568
742
  .sd-input__char-count {
569
- font-size: 1.1rem;
570
- font-weight: 400;
571
- font-style: italic;
743
+ // font-size: 1.1rem;
744
+ // font-weight: 400;
745
+ // font-style: italic;
572
746
  grid-row: 3/4;
573
747
  grid-column: 3/4;
574
- &--error {
575
- color: $red;
576
- }
748
+ // &--error {
749
+ // color: $red;
750
+ // }
577
751
  }
578
752
  .sd-input__label {
579
753
  @include Form-label-base;
@@ -661,7 +835,7 @@
661
835
  content: "*";
662
836
  vertical-align: top;
663
837
  font-size: 1.2rem;
664
- padding-left: 0.3rem;
838
+ padding-inline-start: 0.3rem;
665
839
  }
666
840
  .sd-input__label.sd-input__label--boxed::after {
667
841
  position: absolute;
@@ -994,8 +1168,3 @@
994
1168
  opacity: 0;
995
1169
  }
996
1170
  }
997
-
998
- //&--boxed-style
999
-
1000
-
1001
-
@@ -216,6 +216,12 @@
216
216
  transition-delay: 0;
217
217
  }
218
218
  }
219
+ &.sd-column-box__slide-in-column--light {
220
+ background-color: var(--sd-colour-panel-bg--000);
221
+ .sd-column-box__slide-in-column-inner {
222
+ background-color: var(--sd-colour-panel-bg--000);
223
+ }
224
+ }
219
225
  }
220
226
  .sd-slide-in-panel {
221
227
  display: flex;
@@ -741,6 +747,9 @@ $planningEditor-width: 53rem;
741
747
  .sd-main-content-grid {
742
748
  grid-column: contentArea;
743
749
  }
750
+ &--editor-full {
751
+ grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr;
752
+ }
744
753
  }
745
754
  .sd-content-wrapper__left-tabs {
746
755
  grid-column: sideTabsLeft;
@@ -952,8 +961,8 @@ $planningEditor-width: 53rem;
952
961
  top: 0;
953
962
  bottom: 0;
954
963
  width: 0;
955
- background: $panel-bg--03;
956
- color: $sd-text;
964
+ background: var(--sd-colour-panel-bg--100);
965
+ color: var(--color-text);
957
966
  overflow: hidden;
958
967
  transition: all 0.1s ease-out;
959
968
  .side-panel {
@@ -962,23 +971,13 @@ $planningEditor-width: 53rem;
962
971
  transition-delay: 0;
963
972
  }
964
973
  &--left {
965
- box-shadow: 2px 0px 0px 0px rgba(102, 102, 102, 1), 2px 0px 12px 0px rgba(0, 0, 0, 0.3);
974
+ box-shadow: 2px 0px 0px 0px hsl(0, 0%, 40%), 2px 0px 12px 0px hsla(0, 0%, 0%, 0.3);
966
975
  left:0;
967
976
  }
968
977
  &--right {
969
- box-shadow: -2px 0px 0px 0px rgba(102, 102, 102, 1), -2px 0px 12px 0px rgba(0, 0, 0, 0.3);
978
+ box-shadow: -2px 0px 0px 0px hsl(0, 0%, 40%), -2px 0px 12px 0px hsla(0, 0%, 0%, 0.3);
970
979
  right:0;
971
980
  }
972
- &--dark-ui {
973
- background-color: $sd-background-darkUI;
974
- color: $white;
975
- &.sd-overlay-panel-2--left {
976
- box-shadow: 2px 0px 12px 0px rgba(0, 0, 0, 0.3);
977
- }
978
- &.sd-overlay-panel-2--right {
979
- box-shadow: -2px 0px 12px 0px rgba(0, 0, 0, 0.3);
980
- }
981
- }
982
981
  &--open {
983
982
  width:32.8rem;
984
983
  overflow: auto;
@@ -15,7 +15,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
15
15
  .side-panel__header {
16
16
  grid-column: 1/2;
17
17
  grid-row: 1/2;
18
- z-index: 1;
18
+ z-index: 2;
19
19
  position: relative;
20
20
  min-height: 4.8rem;
21
21
  display: flex;
@@ -365,12 +365,18 @@
365
365
  overflow-y: auto;
366
366
  width: auto;
367
367
  min-width: 45vw;
368
+ max-width: 45vw;
368
369
  &.sd-editor__container--large {
369
370
  min-width: 52vw;
370
371
  }
371
372
  }
372
373
  }
373
374
 
375
+ .sd-content-wrapper--editor-full .open-editor .sd-editor__container {
376
+ min-width: auto;
377
+ max-width: none;
378
+ }
379
+
374
380
  .sd-editor__input--title {
375
381
  -webkit-appearance: none;
376
382
  -moz-appearance: none;
@@ -83,7 +83,7 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
83
83
  }
84
84
 
85
85
 
86
- .authoring-active {
86
+ .authoring-active__item {
87
87
  .sd-sidebar-menu__btn--active {
88
88
  .sd-sidebar-menu__main-icon, .sd-sidebar-menu__helper-icon {
89
89
  color: #fff;
@@ -45,6 +45,18 @@
45
45
  }
46
46
 
47
47
  }
48
+ .datepicker-header-toolbar {
49
+ width: 100%;
50
+ display: flex;
51
+ justify-content: center;
52
+ align-items: center;
53
+ margin-bottom: 16px;
54
+ gap: $sd-base-increment;
55
+
56
+ button {
57
+ flex: 1 1;
58
+ }
59
+ }
48
60
  }
49
61
 
50
62
  table {
@@ -78,11 +90,13 @@
78
90
  // add background when hovering a selectable date
79
91
  .p-datepicker table td > span {
80
92
  &:not(.p-highlight):not(.p-disabled) {
93
+ transition: all ease 0.2s;
81
94
  &:hover {
82
- background-color: $sd-colour-background__menu-item--hover;
95
+ background-color: var(--sd-colour-interactive--alpha-10);
96
+ box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
83
97
  }
84
98
  &:active {
85
- background-color: $sd-colour-background__menu-item--active;
99
+ background-color: var(--sd-colour-interactive--alpha-20);
86
100
  }
87
101
  }
88
102
  }
@@ -2,6 +2,7 @@
2
2
  background-color: hsla(214, 13%, 16%, 0.5) !important;
3
3
  backdrop-filter: blur(1px);
4
4
  -webkit-backdrop-filter: blur(1px);
5
+ z-index: 1000;
5
6
  }
6
7
 
7
8
 
@@ -42,6 +43,10 @@
42
43
  overflow-y: auto;
43
44
  }
44
45
 
46
+ .p-dialog-flex {
47
+ display: flex;
48
+ }
49
+
45
50
  .p-dialog-header {
46
51
  display: flex;
47
52
  align-items: center;
@@ -163,6 +168,7 @@
163
168
 
164
169
  .p-dialog-maximized .p-dialog-content {
165
170
  flex-grow: 1;
171
+ width: 100%;
166
172
  }
167
173
 
168
174
  /* Position */
@@ -343,6 +349,9 @@
343
349
  &--l-padding {
344
350
  padding: $sd-base-increment * 4;
345
351
  }
352
+ }
353
+
354
+ .p-dialog-content-bg {
346
355
  &--default {
347
356
  background-color: transparent !important;
348
357
  }
@@ -23,13 +23,14 @@
23
23
  padding: .8rem 1.6rem;
24
24
  min-width: 100px;
25
25
  font-size: 14px;
26
- color: $sd-text;
26
+ color: var(--color-text);
27
+ width: 100%;
27
28
 
28
29
  &:hover, &:focus-visible {
29
30
  background: $sd-colour-background__menu-item--hover;
30
31
  }
31
- }
32
-
33
- .p-menuitem-icon {
34
- margin-right: 0.8rem;
32
+ .p-menuitem-icon {
33
+ margin-right: 0.8rem;
34
+ color: var(--color-icon-default);
35
+ }
35
36
  }