superdesk-ui-framework 3.0.1-beta.13 → 3.0.1-beta.15

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 (63) hide show
  1. package/app/scripts/toggleBoxNext.js +1 -1
  2. package/app/styles/_buttons.scss +1 -1
  3. package/app/styles/_content-divider.scss +5 -5
  4. package/app/styles/_helpers.scss +24 -1
  5. package/app/styles/_icon-font.scss +9 -9
  6. package/app/styles/_modals.scss +3 -0
  7. package/app/styles/_normalize.scss +4 -0
  8. package/app/styles/_simple-list.scss +1 -0
  9. package/app/styles/_table-list.scss +11 -1
  10. package/app/styles/app.scss +1 -0
  11. package/app/styles/components/_list-item.scss +23 -16
  12. package/app/styles/components/_sd-collapse-box.scss +6 -6
  13. package/app/styles/design-tokens/_new-colors.scss +10 -5
  14. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  15. package/app/styles/form-elements/_input-wrap.scss +138 -0
  16. package/app/styles/form-elements/_inputs.scss +230 -61
  17. package/app/styles/interface-elements/_side-panel.scss +1 -1
  18. package/app/styles/primereact/_pr-dialog.scss +1 -0
  19. package/app/styles/primereact/_pr-menu.scss +6 -5
  20. package/app-typescript/components/Dropdown.tsx +65 -65
  21. package/app-typescript/components/DurationInput.tsx +10 -6
  22. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  23. package/app-typescript/components/Form/InputBase.tsx +12 -2
  24. package/app-typescript/components/Lists/ContentList.tsx +28 -4
  25. package/app-typescript/components/Lists/TableList.tsx +11 -9
  26. package/dist/examples.bundle.css +8 -8
  27. package/dist/examples.bundle.js +1075 -640
  28. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  29. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
  30. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
  31. package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  32. package/dist/react/ContentDivider.tsx +4 -4
  33. package/dist/react/ContentList.tsx +2 -10
  34. package/dist/react/Dropdowns.tsx +357 -5
  35. package/dist/react/Inputs.tsx +1 -7
  36. package/dist/react/TableList.tsx +28 -30
  37. package/dist/react/Togglebox.tsx +1 -1
  38. package/dist/superdesk-ui.bundle.css +463 -176
  39. package/dist/superdesk-ui.bundle.js +591 -539
  40. package/dist/vendor.bundle.js +2 -2
  41. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  42. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
  43. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
  44. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  45. package/examples/pages/react/ContentDivider.tsx +4 -4
  46. package/examples/pages/react/ContentList.tsx +2 -10
  47. package/examples/pages/react/Dropdowns.tsx +357 -5
  48. package/examples/pages/react/Inputs.tsx +1 -7
  49. package/examples/pages/react/TableList.tsx +28 -30
  50. package/examples/pages/react/Togglebox.tsx +1 -1
  51. package/package.json +1 -1
  52. package/react/components/Dropdown.d.ts +4 -4
  53. package/react/components/Dropdown.js +19 -15
  54. package/react/components/DurationInput.d.ts +1 -1
  55. package/react/components/DurationInput.js +12 -7
  56. package/react/components/Form/FormLabel.d.ts +4 -1
  57. package/react/components/Form/FormLabel.js +9 -3
  58. package/react/components/Form/InputBase.d.ts +0 -1
  59. package/react/components/Form/InputBase.js +15 -1
  60. package/react/components/Lists/ContentList.d.ts +5 -0
  61. package/react/components/Lists/ContentList.js +36 -15
  62. package/react/components/Lists/TableList.d.ts +5 -5
  63. package/react/components/Lists/TableList.js +6 -4
@@ -9796,11 +9796,11 @@
9796
9796
  box-sizing: content-box;
9797
9797
  line-height: 100%;
9798
9798
  color: #9b27b0;
9799
- right: -0.5rem;
9800
- bottom: -0.7rem;
9799
+ inset-inline-end: -0.4rem;
9800
+ inset-block-end: -0.6rem;
9801
9801
  height: 1em;
9802
9802
  width: 1em;
9803
- background-color: var(--sd-item__main-Bg);
9803
+ background-color: var(--sd-item__main-Bg) !important;
9804
9804
  border-radius: var(--b-radius--full);
9805
9805
  padding: 1px;
9806
9806
  z-index: 1;
@@ -9816,8 +9816,8 @@
9816
9816
  font-size: 32px; }
9817
9817
  .icn-mix--2x .icn-mix__sub-icn {
9818
9818
  font-size: 1.6rem;
9819
- right: -0.6rem;
9820
- bottom: -0.3rem; }
9819
+ inset-inline-end: -0.6rem;
9820
+ inset-block-end: -0.3rem; }
9821
9821
 
9822
9822
  .double-size-icn {
9823
9823
  display: inline-block;
@@ -9834,13 +9834,13 @@
9834
9834
  opacity: 0.5; }
9835
9835
 
9836
9836
  .subnav .icn-mix__sub-icn {
9837
- background-color: var(--sd-colour-panel-bg--100); }
9837
+ background-color: var(--sd-colour-panel-bg--100) !important; }
9838
9838
 
9839
9839
  .subnav--darker .icn-mix__sub-icn {
9840
- background-color: var(--sd-colour-panel-bg--200); }
9840
+ background-color: var(--sd-colour-panel-bg--200) !important; }
9841
9841
 
9842
9842
  .subnav--dark-blue-grey .icn-mix__sub-icn {
9843
- background-color: var(--color-subnav-bg--blueGrey-10);
9843
+ background-color: var(--color-subnav-bg--blueGrey-10) !important;
9844
9844
  color: #d686e4; }
9845
9845
 
9846
9846
  .subnav--dark-blue-grey .icn-mix__icn {
@@ -10917,6 +10917,7 @@
10917
10917
  --sd-colour-sidebar-menu--00: hsla(var(--sd-colour-cool-grey-l--85), 1);
10918
10918
  --sd-colour-sidebar-menu--10: hsla(var(--sd-colour-cool-grey-l--80), 1);
10919
10919
  --sd-colour-sidebar-menu--20: hsla(var(--sd-colour-cool-grey-l--75), 1);
10920
+ --sd-colour-quickbar-menu: hsla(var(--sd-colour-cool-grey-l--98), 1);
10920
10921
  --sd-colour-background__left-nav: var(--sd-colour-bg--99);
10921
10922
  --sd-colour-top-menu: var(--sd-colour-bg--02);
10922
10923
  --sd-colour-top-menu__btn: var(--sd-colour-bg--03);
@@ -10945,6 +10946,7 @@
10945
10946
  --color-dropdown-menu-Bg: var(--sd-colour-bg--99);
10946
10947
  --color-modal-Bg: var(--sd-colour-bg--99);
10947
10948
  --sd-colour--shadow-line: hsla(var(--sd-colour-cool-grey-l--70), 0);
10949
+ --sd-colour--shadow-line--m: hsla(var(--sd-colour-cool-grey-l--80), 0);
10948
10950
  --sd-shadow__subnav: 0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.07), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
10949
10951
  --sd-shadow__item--selected: 0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
10950
10952
  --sd-shadow__item--unread: 0 0 0 1px var(--sd-colour-interactive--alpha-30), inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
@@ -11023,6 +11025,7 @@
11023
11025
  --sd-colour-interactive--darken-50: hsla(var(--sd-colour-interactive-l--05), 1);
11024
11026
  --sd-colour-btn-txt-neutral: hsla(var(--sd-colour-neutral-l--80), 1);
11025
11027
  --sd-colour--shadow-line: hsla(var(--sd-colour-cool-grey-l--75), 0.2);
11028
+ --sd-colour--shadow-line--m: hsla(var(--sd-colour-cool-grey-l--80), 0.2);
11026
11029
  --sd-colour-panel-bg--000: hsla(var(--sd-colour-cool-grey-l--10), 1);
11027
11030
  --sd-colour-panel-bg--050: hsla(var(--sd-colour-cool-grey-l--05), 1);
11028
11031
  --sd-colour-panel-bg--100: hsla(var(--sd-colour-cool-grey-l--15), 1);
@@ -11031,6 +11034,7 @@
11031
11034
  --sd-colour-sidebar-menu--00: hsla(var(--sd-colour-cool-grey-l--25), 1);
11032
11035
  --sd-colour-sidebar-menu--10: hsla(var(--sd-colour-cool-grey-l--30), 1);
11033
11036
  --sd-colour-sidebar-menu--20: hsla(var(--sd-colour-cool-grey-l--35), 1);
11037
+ --sd-colour-quickbar-menu: hsla(var(--sd-colour-cool-grey-l--20), 1);
11034
11038
  --sd-colour-background__left-nav: var(--sd-colour-bg--04);
11035
11039
  --sd-colour-top-menu: var(--sd-colour-bg--02);
11036
11040
  --sd-colour-top-menu__btn: var(--sd-colour-bg--03);
@@ -11125,8 +11129,8 @@
11125
11129
  --sd-colour-background__base--30: hsla(0, 0%, 70%, 1);
11126
11130
  --color-text: hsla(214, 13%, 20%, 1);
11127
11131
  --color-text--inverse: hsla(0, 0%, 98%, 1);
11128
- --color-text-light: hsla(214, 13%, 30%, 0.75);
11129
- --color-text-lighter: hsla(214, 13%, 30%, 0.55);
11132
+ --color-text-light: hsla(214, 13%, 40%, 1);
11133
+ --color-text-lighter: hsla(214, 13%, 60%, 1);
11130
11134
  --color-icon-default: hsla(214, 13%, 30%, 1);
11131
11135
  --sd-slugline-color: hsla(197, 100%, 15%, 1) !important;
11132
11136
  --sd-time-schedule-color: hsla(268, 100%, 25%, 1);
@@ -11176,9 +11180,9 @@
11176
11180
  --sd-colour-background__base--20: hsla(0, 0%, 20%, 1);
11177
11181
  --sd-colour-background__base--30: hsla(0, 0%, 30%, 1);
11178
11182
  --color-text: hsla(0, 0%, 96%, 1);
11179
- --color-text-light: hsla(214, 13%, 96%, 0.75);
11180
- --color-text-lighter: hsla(214, 13%, 96%, 0.55);
11181
- --color-icon-default: hsla(214, 13%, 96%, 0.65);
11183
+ --color-text-light: hsla(214, 13%, 76%, 1);
11184
+ --color-text-lighter: hsla(214, 13%, 56%, 1);
11185
+ --color-icon-default: hsla(214, 13%, 64%, 1);
11182
11186
  --sd-slugline-color: hsla(197, 60%, 75%, 1) !important;
11183
11187
  --sd-time-schedule-color: hsla(268, 60%, 65%, 1);
11184
11188
  --sd-navy-color: hsla(240, 90%, 75%, 1);
@@ -17084,6 +17088,27 @@ h1, h2, h3, h4, h5, h6 {
17084
17088
  .sd-width--full {
17085
17089
  width: var(--width__container--full); }
17086
17090
 
17091
+ .sd-gap--x-small {
17092
+ gap: var(--gap--x-small); }
17093
+
17094
+ .sd-gap--small {
17095
+ gap: var(--gap--small); }
17096
+
17097
+ .sd-gap--medium {
17098
+ gap: var(--gap--medium); }
17099
+
17100
+ .sd-gap--large {
17101
+ gap: var(--gap--large); }
17102
+
17103
+ .sd-gap--x-large {
17104
+ gap: var(--gap--x-large); }
17105
+
17106
+ .sd-gap--xx-large {
17107
+ gap: var(--gap--xx-large); }
17108
+
17109
+ .sd-gap--auto {
17110
+ gap: var(--gap--auto); }
17111
+
17087
17112
  :root {
17088
17113
  --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14); }
17089
17114
 
@@ -17293,7 +17318,7 @@ h1, h2, h3, h4, h5, h6 {
17293
17318
  border-radius: var(--b-radius--full);
17294
17319
  background-color: transparent;
17295
17320
  opacity: 0.75;
17296
- background-color: rgba(55, 55, 55, 0);
17321
+ background-color: rgba(125, 138, 155, 0);
17297
17322
  color: inherit;
17298
17323
  text-decoration: none;
17299
17324
  cursor: pointer;
@@ -17373,7 +17398,7 @@ h1, h2, h3, h4, h5, h6 {
17373
17398
  border-radius: var(--b-radius--full);
17374
17399
  background-color: transparent;
17375
17400
  opacity: 0.75;
17376
- background-color: rgba(55, 55, 55, 0);
17401
+ background-color: rgba(125, 138, 155, 0);
17377
17402
  color: inherit;
17378
17403
  text-decoration: none;
17379
17404
  cursor: pointer;
@@ -28050,11 +28075,11 @@ a.label {
28050
28075
  box-sizing: content-box;
28051
28076
  line-height: 100%;
28052
28077
  color: #9b27b0;
28053
- right: -0.5rem;
28054
- bottom: -0.7rem;
28078
+ inset-inline-end: -0.4rem;
28079
+ inset-block-end: -0.6rem;
28055
28080
  height: 1em;
28056
28081
  width: 1em;
28057
- background-color: var(--sd-item__main-Bg);
28082
+ background-color: var(--sd-item__main-Bg) !important;
28058
28083
  border-radius: var(--b-radius--full);
28059
28084
  padding: 1px;
28060
28085
  z-index: 1;
@@ -28070,8 +28095,8 @@ a.label {
28070
28095
  font-size: 32px; }
28071
28096
  .icn-mix--2x .icn-mix__sub-icn {
28072
28097
  font-size: 1.6rem;
28073
- right: -0.6rem;
28074
- bottom: -0.3rem; }
28098
+ inset-inline-end: -0.6rem;
28099
+ inset-block-end: -0.3rem; }
28075
28100
 
28076
28101
  .double-size-icn {
28077
28102
  display: inline-block;
@@ -28088,13 +28113,13 @@ a.label {
28088
28113
  opacity: 0.5; }
28089
28114
 
28090
28115
  .subnav .icn-mix__sub-icn {
28091
- background-color: var(--sd-colour-panel-bg--100); }
28116
+ background-color: var(--sd-colour-panel-bg--100) !important; }
28092
28117
 
28093
28118
  .subnav--darker .icn-mix__sub-icn {
28094
- background-color: var(--sd-colour-panel-bg--200); }
28119
+ background-color: var(--sd-colour-panel-bg--200) !important; }
28095
28120
 
28096
28121
  .subnav--dark-blue-grey .icn-mix__sub-icn {
28097
- background-color: var(--color-subnav-bg--blueGrey-10);
28122
+ background-color: var(--color-subnav-bg--blueGrey-10) !important;
28098
28123
  color: #d686e4; }
28099
28124
 
28100
28125
  .subnav--dark-blue-grey .icn-mix__icn {
@@ -32340,6 +32365,9 @@ a.label {
32340
32365
  text-align: end;
32341
32366
  border-top: 1px solid var(--sd-colour-line--x-light);
32342
32367
  min-height: 48px;
32368
+ display: flex;
32369
+ align-items: center;
32370
+ justify-content: flex-end;
32343
32371
  *zoom: 1; }
32344
32372
  .modal__content .modal__footer:before, .modal__content .modal__footer:after {
32345
32373
  display: table;
@@ -33171,6 +33199,7 @@ a.label {
33171
33199
  .simple-list .simple-list__item [class^="icon-"], .simple-list .simple-list__item [class*=" icon-"] {
33172
33200
  flex-grow: 0;
33173
33201
  flex-shrink: 0;
33202
+ color: var(--color-icon-default) !important;
33174
33203
  opacity: .75; }
33175
33204
  .simple-list .simple-list__item--stacked {
33176
33205
  display: flex;
@@ -35117,7 +35146,7 @@ tags-input,
35117
35146
  text-align: center;
35118
35147
  border-top: 0;
35119
35148
  border-top-color: var(--sd-colour-line--medium);
35120
- border-top-style: solid; }
35149
+ border-style: solid; }
35121
35150
  .sd-content-divider.sd-content-divider--horizontal {
35122
35151
  display: flex;
35123
35152
  clear: both;
@@ -35136,7 +35165,7 @@ tags-input,
35136
35165
  border-top-color: inherit;
35137
35166
  border-bottom: 0;
35138
35167
  transform: translateY(50%);
35139
- border-top-style: inherit; }
35168
+ border-style: inherit; }
35140
35169
  .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--text-left::before {
35141
35170
  width: 5%; }
35142
35171
  .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--text-left::after {
@@ -35152,7 +35181,7 @@ tags-input,
35152
35181
  vertical-align: middle;
35153
35182
  border-top: 0;
35154
35183
  border-left: 1px var(--sd-colour-line--medium);
35155
- border-left-style: solid;
35184
+ border-style: solid;
35156
35185
  flex-grow: 0;
35157
35186
  align-self: stretch;
35158
35187
  min-height: 1.6rem; }
@@ -35173,11 +35202,11 @@ tags-input,
35173
35202
  border-left: 1px var(--sd-colour-line--medium);
35174
35203
  border-bottom: 0;
35175
35204
  width: 1px;
35176
- border-left-style: solid; }
35205
+ border-style: solid; }
35177
35206
  .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dashed::before, .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dashed::after {
35178
35207
  border-left-style: dashed; }
35179
35208
  .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dotted::before, .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dotted::after {
35180
- border-left-style: dotted;
35209
+ border-style: dotted;
35181
35210
  border-color: var(--sd-colour-line--strong); }
35182
35211
  .sd-content-divider.sd-content-divider--dashed {
35183
35212
  border-style: dashed; }
@@ -35260,7 +35289,8 @@ tags-input,
35260
35289
  .table-list {
35261
35290
  display: flex;
35262
35291
  flex-direction: column;
35263
- align-self: stretch; }
35292
+ align-self: stretch;
35293
+ overflow: hidden !important; }
35264
35294
  .table-list--comfortable {
35265
35295
  gap: 1.6rem; }
35266
35296
  .table-list--contained {
@@ -35276,7 +35306,7 @@ tags-input,
35276
35306
  grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
35277
35307
  position: relative;
35278
35308
  flex-direction: row;
35279
- padding: 8px;
35309
+ padding: 0.8rem;
35280
35310
  min-height: 4.2rem;
35281
35311
  border-radius: var(--b-radius--medium);
35282
35312
  background-color: var(--sd-item__main-Bg);
@@ -35384,6 +35414,15 @@ tags-input,
35384
35414
  align-items: center;
35385
35415
  gap: 8px; }
35386
35416
 
35417
+ .table-list__item-border {
35418
+ width: 6px;
35419
+ background-color: var(--sd-colour-panel-bg--100);
35420
+ z-index: 2;
35421
+ position: absolute;
35422
+ inset-block: 3px;
35423
+ inset-inline-start: 3px;
35424
+ border-radius: 2px; }
35425
+
35387
35426
  .table-list__item-content-block {
35388
35427
  display: flex;
35389
35428
  align-items: center;
@@ -35639,7 +35678,7 @@ tags-input,
35639
35678
  .side-panel .side-panel__header {
35640
35679
  grid-column: 1/2;
35641
35680
  grid-row: 1/2;
35642
- z-index: 1;
35681
+ z-index: 2;
35643
35682
  position: relative;
35644
35683
  min-height: 4.8rem;
35645
35684
  display: flex;
@@ -39576,7 +39615,8 @@ a.text-link {
39576
39615
  min-height: 4rem;
39577
39616
  flex-direction: row;
39578
39617
  background-color: var(--sd-item__main-Bg);
39579
- transition: background-color 0.2s linear; }
39618
+ transition: background-color 0.2s linear;
39619
+ flex-shrink: 0; }
39580
39620
  .sd-list-item:hover {
39581
39621
  background-color: var(--sd-item__main-Bg--hover);
39582
39622
  cursor: pointer; }
@@ -39800,13 +39840,14 @@ a.text-link {
39800
39840
 
39801
39841
  .sd-list-item [class^="icon-"],
39802
39842
  .sd-list-item [class*=" icon-"] {
39803
- opacity: 0.6;
39804
- vertical-align: middle; }
39843
+ opacity: 0.75;
39844
+ vertical-align: middle;
39845
+ color: var(--color-icon-default); }
39805
39846
 
39806
39847
  .sd-list-item time [class^="icon-"],
39807
39848
  .sd-list-item time [class*=" icon-"] {
39808
39849
  vertical-align: top;
39809
- margin-right: 0.2rem; }
39850
+ margin-inline-end: 0.2rem; }
39810
39851
 
39811
39852
  .sd-list-item time {
39812
39853
  color: var(--color-text-light);
@@ -39848,17 +39889,26 @@ a.text-link {
39848
39889
 
39849
39890
  .sd-list-item .sd-list-item__inline-icon,
39850
39891
  .sd-list-item .sd-list-item__inline-text {
39851
- margin-right: 0.6rem; }
39892
+ margin-inline-end: 0.6rem; }
39893
+
39894
+ .sd-list-item .sd-list-item__icon-group {
39895
+ display: flex;
39896
+ align-items: flex-start;
39897
+ gap: var(--gap--small);
39898
+ min-height: 2rem;
39899
+ margin-inline-end: 4px; }
39900
+ .sd-list-item .sd-list-item__icon-group .sd-list-item__inline-icon {
39901
+ margin: 0; }
39852
39902
 
39853
39903
  .sd-list-item .sd-list-item__text-strong {
39854
39904
  font-weight: 500;
39855
39905
  color: var(--color-text); }
39856
39906
 
39857
39907
  .sd-list-item .sd-list-item__element-rm-10 {
39858
- margin-right: 1rem; }
39908
+ margin-inline-end: 1rem; }
39859
39909
 
39860
39910
  .sd-list-item .sd-list-item__element-lm-10 {
39861
- margin-left: 1rem; }
39911
+ margin-inline-start: 1rem; }
39862
39912
 
39863
39913
  .sd-list-item .sd-list-item__location {
39864
39914
  padding-left: 1.6rem;
@@ -39886,7 +39936,7 @@ a.text-link {
39886
39936
  width: 3rem;
39887
39937
  background-color: #69b0a2;
39888
39938
  border-radius: var(--b-radius--full);
39889
- margin-right: 0.6rem;
39939
+ margin-inline-end: 0.6rem;
39890
39940
  color: #fff;
39891
39941
  text-align: center;
39892
39942
  text-transform: uppercase;
@@ -39911,8 +39961,8 @@ a.text-link {
39911
39961
  color: transparent;
39912
39962
  border: 1px dashed rgba(123, 123, 123, 0.6); }
39913
39963
  .avatar--on-right {
39914
- margin-right: 0;
39915
- margin-left: 0.6rem; }
39964
+ margin-inline-end: 0;
39965
+ margin-inline-start: 0.6rem; }
39916
39966
 
39917
39967
  .dropdown__toggle:hover [class^="icon-"],
39918
39968
  .dropdown__toggle:hover [class*=" icon-"] {
@@ -39937,7 +39987,7 @@ a.text-link {
39937
39987
  z-index: 0;
39938
39988
  display: flex;
39939
39989
  flex-direction: column;
39940
- margin-left: 1rem; }
39990
+ margin-inline-start: 1rem; }
39941
39991
  .sd-list-item-nested__childs .sd-list-item {
39942
39992
  margin-top: 0;
39943
39993
  border-top: 1px solid var(--sd-colour-line--x-light); }
@@ -40001,7 +40051,7 @@ a.text-link {
40001
40051
  color: var(--sd-colour-interactive--darken-20);
40002
40052
  border-bottom: 1px dotted currentColor; }
40003
40053
  .sd-list-header .sd-list-header__number {
40004
- margin-left: 1rem; }
40054
+ margin-inline-start: 1rem; }
40005
40055
  .sd-list-header .sd-list-header__stretch-bar {
40006
40056
  flex-grow: 1;
40007
40057
  height: 1px;
@@ -41078,9 +41128,10 @@ a.text-link {
41078
41128
  .sd-collapse-box {
41079
41129
  display: flex;
41080
41130
  flex-direction: column;
41081
- border-radius: var(--b-radius--x-small);
41131
+ border-radius: var(--b-radius--small);
41082
41132
  position: relative;
41083
- margin-bottom: 1rem; }
41133
+ margin-bottom: 1rem;
41134
+ border: 1px solid var(--sd-colour--shadow-line--m); }
41084
41135
  .sd-collapse-box .sd-collapse-box__header {
41085
41136
  display: block;
41086
41137
  flex-grow: 0;
@@ -41092,7 +41143,7 @@ a.text-link {
41092
41143
  right: 1rem;
41093
41144
  top: 0.8rem;
41094
41145
  z-index: 2;
41095
- color: #666; }
41146
+ color: var(--color-icon-default); }
41096
41147
  .sd-collapse-box .sd-collapse-box__tools--flex {
41097
41148
  position: relative;
41098
41149
  right: 0;
@@ -41102,15 +41153,15 @@ a.text-link {
41102
41153
  margin: -1.4rem -1rem; }
41103
41154
  .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn {
41104
41155
  flex-grow: 1;
41105
- color: #666; }
41156
+ color: var(--color-icon-default); }
41106
41157
  .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .icn-btn, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .sd-thumb-carousel__btn--prev, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .sd-thumb-carousel__btn--next,
41107
41158
  .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .p-carousel-prev, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:hover .p-carousel-next {
41108
- background-color: rgba(155, 155, 155, 0.25);
41159
+ background-color: rgba(140, 151, 166, 0.25);
41109
41160
  color: #fff;
41110
41161
  opacity: 1; }
41111
41162
  .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .icn-btn, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .sd-thumb-carousel__btn--prev, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .sd-thumb-carousel__btn--next,
41112
41163
  .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .p-carousel-prev, .sd-collapse-box .sd-collapse-box__tools .sd-collapse-box__collapse-btn:active .p-carousel-next {
41113
- background-color: rgba(155, 155, 155, 0.35);
41164
+ background-color: rgba(169, 177, 188, 0.25);
41114
41165
  color: var(--sd-colour-interactive);
41115
41166
  opacity: 1; }
41116
41167
  .sd-collapse-box .sd-collapse-box__content-wraper {
@@ -41130,8 +41181,7 @@ a.text-link {
41130
41181
  padding: 1rem;
41131
41182
  margin: 0 -2rem 3rem -2rem; }
41132
41183
  .sd-collapse-box .sd-collapse-box__content-block--top {
41133
- margin-top: 2.2rem;
41134
- background-color: rgba(0, 0, 0, 0.04); }
41184
+ margin-top: 2.2rem; }
41135
41185
  .sd-collapse-box--open .sd-collapse-box__content-wraper {
41136
41186
  max-height: 80rem; }
41137
41187
  .sd-collapse-box--open .sd-collapse-box__content {
@@ -45536,6 +45586,8 @@ a.text-link {
45536
45586
  box-shadow: var(--sd-shadow__dropdown);
45537
45587
  border-radius: var(--b-radius--small);
45538
45588
  text-align: start; }
45589
+ .dropdown__menu .dropdown {
45590
+ width: 100%; }
45539
45591
  .dropdown__menu li a:not(.btn), .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button), .dropdown__menu .dropdown__menu-item a:not(.btn), .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
45540
45592
  display: block;
45541
45593
  font-weight: normal;
@@ -45599,8 +45651,10 @@ a.text-link {
45599
45651
  margin: 0.6rem 0 0.4rem; }
45600
45652
  .dropdown__menu--has-head-foot .dropdown__menu-body {
45601
45653
  overflow-y: auto;
45654
+ overflow-x: hidden;
45602
45655
  flex: 0 1;
45603
- padding: 0.6rem 0; }
45656
+ padding: 0.6rem 0;
45657
+ max-height: 320px; }
45604
45658
  .dropdown__menu--has-head-foot .dropdown__menu-body:first-child .dropdown__menu-label {
45605
45659
  margin: 0.6rem 0 0.4rem; }
45606
45660
  .dropdown__menu--has-head-foot .dropdown__menu-footer {
@@ -46365,7 +46419,9 @@ a.text-link {
46365
46419
  letter-spacing: 0.02em; }
46366
46420
 
46367
46421
  .form-label {
46368
- display: inline-block;
46422
+ display: inline-flex;
46423
+ align-items: flex-start;
46424
+ justify-content: flex-start;
46369
46425
  font-size: 1.1rem;
46370
46426
  margin: 0 0.5rem 0 0;
46371
46427
  line-height: 1;
@@ -46389,7 +46445,57 @@ a.text-link {
46389
46445
  content: "*";
46390
46446
  vertical-align: top;
46391
46447
  font-size: 1.2rem;
46392
- padding-left: 0.3rem; }
46448
+ padding-inline-start: 0.3rem;
46449
+ margin-top: -2px; }
46450
+ .form-label--invalid {
46451
+ color: #e41b21; }
46452
+ .form-label--focused {
46453
+ color: var(--sd-colour-interactive); }
46454
+ .form-label--focused.form-label--invalid {
46455
+ color: #e41b21; }
46456
+ .form-label--boxed {
46457
+ background-color: rgba(67, 75, 86, 0.4);
46458
+ border-radius: var(--b-radius--small);
46459
+ color: #f3f5f6;
46460
+ display: inline-flex;
46461
+ align-items: center;
46462
+ justify-content: center;
46463
+ padding: 2px 8px;
46464
+ font-size: 1.1rem;
46465
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
46466
+ font-weight: 400;
46467
+ line-height: 2rem;
46468
+ text-transform: uppercase;
46469
+ font-style: normal;
46470
+ letter-spacing: 0.08em;
46471
+ height: 2rem;
46472
+ transition: opacity ease 0.2s;
46473
+ justify-self: start;
46474
+ position: relative;
46475
+ margin-bottom: 0.8rem;
46476
+ transition: background-color ease 0.2s; }
46477
+ .form-label--boxed--light {
46478
+ background-color: rgba(67, 75, 86, 0.4);
46479
+ color: #f3f5f6; }
46480
+ .form-label--boxed--dark {
46481
+ background-color: rgba(67, 75, 86, 0.4);
46482
+ color: #f3f5f6; }
46483
+ .form-label--boxed.form-label--required::after {
46484
+ margin-inline-start: 0.2rem;
46485
+ color: #e41b21;
46486
+ content: "*";
46487
+ vertical-align: top;
46488
+ font-size: 1.2rem;
46489
+ padding-inline-start: 0.3rem;
46490
+ position: absolute;
46491
+ inset-block-start: -4px;
46492
+ inset-inline-end: -10px; }
46493
+ .form-label--boxed.form-label--invalid, .form-label--boxed.form-label--invalid.form-label--focused {
46494
+ background-color: #e41b21;
46495
+ color: #f3f5f6; }
46496
+ .form-label--boxed.form-label--focused {
46497
+ background-color: var(--sd-colour-interactive);
46498
+ color: #f3f5f6; }
46393
46499
 
46394
46500
  .form-label__container {
46395
46501
  display: flex;
@@ -46414,7 +46520,7 @@ a.text-link {
46414
46520
  border-bottom: 1px solid var(--color-input-border);
46415
46521
  width: 100%; }
46416
46522
  .sd-line-input__value {
46417
- margin-right: 6px;
46523
+ margin-inline-end: 6px;
46418
46524
  text-transform: uppercase; }
46419
46525
  .sd-line-input input.sd-line-input__input, .sd-line-input textarea.sd-line-input__input {
46420
46526
  -webkit-appearance: none;
@@ -46430,7 +46536,8 @@ a.text-link {
46430
46536
  padding: 0 0.8rem;
46431
46537
  height: 3.2rem;
46432
46538
  border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
46433
- display: block; }
46539
+ display: block;
46540
+ position: relative; }
46434
46541
  .sd-line-input input.sd-line-input__input::placeholder, .sd-line-input textarea.sd-line-input__input::placeholder {
46435
46542
  color: var(--color-text-lighter);
46436
46543
  font-weight: 400;
@@ -46461,6 +46568,7 @@ a.text-link {
46461
46568
  height: 3.2rem;
46462
46569
  border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
46463
46570
  display: block;
46571
+ position: relative;
46464
46572
  width: 26px;
46465
46573
  height: 26px;
46466
46574
  border: none;
@@ -46507,6 +46615,7 @@ a.text-link {
46507
46615
  height: 3.2rem;
46508
46616
  border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
46509
46617
  display: block;
46618
+ position: relative;
46510
46619
  display: block;
46511
46620
  position: relative;
46512
46621
  z-index: 2; }
@@ -46533,28 +46642,35 @@ a.text-link {
46533
46642
  display: block; }
46534
46643
  .sd-line-input .sd-line-input__info-left, .sd-line-input .sd-line-input__info-right {
46535
46644
  position: absolute;
46536
- top: 2.5rem;
46645
+ inset-block-start: 2.5rem;
46537
46646
  opacity: 0.3;
46538
46647
  font-size: 1.5rem;
46539
46648
  font-weight: 300; }
46540
46649
  .sd-line-input .sd-line-input__info-right {
46541
- right: 0.8rem; }
46650
+ inset-inline-end: 0.8rem; }
46542
46651
  .sd-line-input .sd-line-input__info-left {
46543
- left: 0.8rem; }
46652
+ inset-inline-start: 0.8rem; }
46544
46653
  .sd-line-input .sd-line-input__icon-left, .sd-line-input .sd-line-input__icon-right {
46545
46654
  position: absolute;
46546
- top: 1.6rem;
46655
+ inset-block-start: 1.6rem;
46547
46656
  cursor: pointer; }
46548
46657
  .sd-line-input .sd-line-input__icon-right {
46549
- right: 0.2rem; }
46658
+ inset-inline-end: 0.2rem; }
46659
+ .sd-line-input .sd-line-input__icon-right.icn-btn, .sd-line-input .sd-line-input__icon-right.sd-thumb-carousel__btn--prev, .sd-line-input .sd-line-input__icon-right.sd-thumb-carousel__btn--next,
46660
+ .sd-line-input .sd-line-input__icon-right.p-carousel-prev, .sd-line-input .sd-line-input__icon-right.p-carousel-next {
46661
+ inset-inline-end: 0.2rem;
46662
+ inset-block-start: 1.8rem;
46663
+ z-index: 1; }
46550
46664
  .sd-line-input .sd-line-input__icon-left {
46551
46665
  left: 0.2rem; }
46552
46666
  .sd-line-input.sd-line-input--indent-l30 input.sd-line-input__input, .sd-line-input.sd-line-input--indent-l30 textarea.sd-line-input__input {
46553
- padding-left: 3rem; }
46667
+ padding-inline-start: 3rem; }
46554
46668
  .sd-line-input.sd-line-input--indent-r30 input.sd-line-input__input, .sd-line-input.sd-line-input--indent-r30 textarea.sd-line-input__input {
46555
- padding-right: 3rem; }
46669
+ padding-inline-end: 3rem; }
46556
46670
  .sd-line-input .sd-line-input__label {
46557
- display: inline-block;
46671
+ display: inline-flex;
46672
+ align-items: flex-start;
46673
+ justify-content: flex-start;
46558
46674
  font-size: 1.1rem;
46559
46675
  margin: 0 0.5rem 0 0;
46560
46676
  line-height: 1;
@@ -46565,13 +46681,13 @@ a.text-link {
46565
46681
  position: absolute;
46566
46682
  line-height: 100%;
46567
46683
  margin: 0;
46568
- top: 0; }
46684
+ inset-block-start: 0; }
46569
46685
  .sd-line-input .sd-line-input__label--required::after {
46570
46686
  color: #e41b21;
46571
46687
  content: "*";
46572
46688
  vertical-align: top;
46573
46689
  font-size: 1.2rem;
46574
- padding-left: 0.3rem; }
46690
+ padding-inline-start: 0.3rem; }
46575
46691
  .sd-line-input .sd-line-input__hint,
46576
46692
  .sd-line-input .sd-line-input__message,
46577
46693
  .sd-line-input .sd-line-input__char-count {
@@ -46583,14 +46699,14 @@ a.text-link {
46583
46699
  letter-spacing: 0.03em; }
46584
46700
  .sd-line-input .sd-line-input__hint {
46585
46701
  position: absolute;
46586
- left: 1px;
46587
- right: auto;
46588
- padding-right: 5.5rem;
46702
+ inset-inline-start: 1px;
46703
+ inset-inline-end: auto;
46704
+ padding-inline-end: 5.5rem;
46589
46705
  margin-top: 0.4rem; }
46590
46706
  .sd-line-input .sd-line-input__char-count {
46591
46707
  position: absolute;
46592
- right: 1px;
46593
- left: auto;
46708
+ inset-inline-end: 1px;
46709
+ inset-inline-start: auto;
46594
46710
  margin-top: 0.5rem;
46595
46711
  font-size: 1.1rem;
46596
46712
  font-weight: 400;
@@ -46651,9 +46767,9 @@ a.text-link {
46651
46767
  .sd-line-input.sd-line-input--is-select.sd-line-input--disabled:hover::after {
46652
46768
  opacity: 0.3; }
46653
46769
  .sd-line-input.sd-line-input--is-select.sd-line-input--no-label::after {
46654
- top: 1.4rem; }
46770
+ inset-block-start: 1.4rem; }
46655
46771
  .sd-line-input.sd-line-input--is-select.sd-line-input--label-left::after {
46656
- top: 1.2rem; }
46772
+ inset-block-start: 1.2rem; }
46657
46773
  .sd-line-input.sd-line-input--is-color .sd-line-input__label {
46658
46774
  line-height: 140%; }
46659
46775
  .sd-line-input.sd-line-input--required .sd-line-input__label::after {
@@ -46661,7 +46777,7 @@ a.text-link {
46661
46777
  content: "*";
46662
46778
  vertical-align: top;
46663
46779
  font-size: 1.2rem;
46664
- padding-left: 0.3rem; }
46780
+ padding-inline-start: 0.3rem; }
46665
46781
  .sd-line-input.sd-line-input--no-label {
46666
46782
  padding-top: 0; }
46667
46783
  .sd-line-input.sd-line-input--no-margin {
@@ -46690,13 +46806,13 @@ a.text-link {
46690
46806
  position: static;
46691
46807
  grid-row: 2/3;
46692
46808
  grid-column: 3/4;
46693
- padding-right: 0; }
46809
+ padding-inline-end: 0; }
46694
46810
  .sd-line-input--label-left .sd-line-input__char-count, .sd-line-input--label-left-auto .sd-line-input__char-count {
46695
46811
  position: static;
46696
46812
  grid-row: 2/3;
46697
46813
  grid-column: 5/4;
46698
46814
  text-align: end;
46699
- padding-left: 1.6rem; }
46815
+ padding-inline-start: 1.6rem; }
46700
46816
  .sd-line-input--label-left-auto .sd-line-input__label {
46701
46817
  min-width: auto;
46702
46818
  max-width: none; }
@@ -46704,11 +46820,11 @@ a.text-link {
46704
46820
  height: 3rem;
46705
46821
  text-indent: 2.8rem; }
46706
46822
  .sd-line-input--with-icon-l input.sd-line-input__input, .sd-line-input--with-icon-l textarea.sd-line-input__input {
46707
- padding-right: 3rem; }
46823
+ padding-inline-end: 3rem; }
46708
46824
  .sd-line-input .sd-line-input__plus-btn {
46709
46825
  position: absolute;
46710
- top: 1.8rem;
46711
- left: 0;
46826
+ inset-block-start: 1.8rem;
46827
+ inset-inline-start: 0;
46712
46828
  height: 2.2rem;
46713
46829
  width: 2.2rem;
46714
46830
  background-color: var(--sd-colour-interactive--alpha-70);
@@ -46737,6 +46853,154 @@ a.text-link {
46737
46853
  .sd-line-input .sd-line-input__plus-btn:hover {
46738
46854
  background-color: var(--sd-colour-interactive); }
46739
46855
 
46856
+ .sd-input__input {
46857
+ -webkit-appearance: none;
46858
+ -moz-appearance: none;
46859
+ appearance: none;
46860
+ width: 100%;
46861
+ color: var(--color-text);
46862
+ border: 0;
46863
+ border-bottom: 1px solid var(--color-input-border);
46864
+ font-size: 1.4rem;
46865
+ background-color: var(--color-input-bg);
46866
+ transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
46867
+ padding: 0 0.8rem;
46868
+ height: 3.2rem;
46869
+ border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
46870
+ display: block;
46871
+ position: relative; }
46872
+ .sd-input__input::placeholder {
46873
+ color: var(--color-text-lighter);
46874
+ font-weight: 400;
46875
+ opacity: 0.75; }
46876
+ .sd-input__input:hover {
46877
+ border-color: var(--color-input-border-hover);
46878
+ background-color: var(--color-input-bg--hover); }
46879
+ .sd-input__input:focus {
46880
+ box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
46881
+ border-color: var(--sd-colour-interactive);
46882
+ background-color: var(--sd-colour-interactive--alpha-20); }
46883
+ .sd-input__input:focus::placeholder {
46884
+ opacity: 0.45; }
46885
+ .sd-input__input--invalid {
46886
+ border-bottom: 1px solid #e41b21;
46887
+ background-color: rgba(228, 27, 37, 0.075); }
46888
+ .sd-input__input--invalid:hover {
46889
+ background-color: rgba(228, 27, 37, 0.12);
46890
+ border-bottom-color: #e41b21; }
46891
+ .sd-input__input--invalid:focus {
46892
+ background-color: rgba(228, 27, 37, 0.16);
46893
+ border-bottom-color: #e41b21;
46894
+ box-shadow: 0 1px 0 0 #e41b21; }
46895
+ .sd-input__input--disabled {
46896
+ opacity: 0.5;
46897
+ background-color: var(--color-input-bg);
46898
+ border-bottom: 1px dotted var(--color-input-border);
46899
+ cursor: not-allowed !important;
46900
+ box-shadow: none; }
46901
+ .sd-input__input--disabled:hover {
46902
+ background-color: var(--color-input-bg);
46903
+ border-bottom-color: var(--color-input-border); }
46904
+ .sd-input__input--boxed-style {
46905
+ border: 0;
46906
+ border: 2px solid var(--color-input-border);
46907
+ background-color: transparent;
46908
+ transition: all ease 0.3s;
46909
+ border-radius: var(--b-radius--large);
46910
+ display: block; }
46911
+ .sd-input__input--boxed-style:hover {
46912
+ border-color: var(--color-input-border-hover);
46913
+ background-color: transparent; }
46914
+ .sd-input__input--boxed-style:focus {
46915
+ outline: none;
46916
+ border-color: var(--sd-colour-interactive--alpha-50);
46917
+ box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
46918
+ background-color: transparent; }
46919
+ .sd-input__input--boxed-style.sd-input__input--disabled {
46920
+ border: 2px solid var(--color-input-border);
46921
+ box-shadow: none; }
46922
+ .sd-input__input--boxed-style.sd-input__input--disabled:hover {
46923
+ border-color: var(--color-input-border); }
46924
+ .sd-input__input--boxed-style.sd-input__input--invalid {
46925
+ background-color: rgba(228, 27, 37, 0.075);
46926
+ border-color: #e41b21; }
46927
+ .sd-input__input--boxed-style.sd-input__input--invalid:hover, .sd-input__input--boxed-style.sd-input__input--invalid:focus {
46928
+ background-color: rgba(228, 27, 37, 0.12);
46929
+ box-shadow: none !important; }
46930
+ .sd-input__input--medium {
46931
+ border-radius: var(--b-radius--medium); }
46932
+ .sd-input__input--medium:focus {
46933
+ box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20); }
46934
+ .sd-input__input--large {
46935
+ padding: 0 1.6rem;
46936
+ min-height: 4.8rem;
46937
+ font-size: 2.4rem;
46938
+ font-weight: 500; }
46939
+ .sd-input__input--x-large {
46940
+ padding: 0 1.6rem;
46941
+ min-height: 5.6rem;
46942
+ font-size: 3.2rem;
46943
+ font-weight: 500; }
46944
+
46945
+ .sd-input__select {
46946
+ display: block;
46947
+ position: relative;
46948
+ -webkit-appearance: none;
46949
+ -moz-appearance: none;
46950
+ appearance: none;
46951
+ width: 100%;
46952
+ color: var(--color-text);
46953
+ border: 0;
46954
+ border-bottom: 1px solid var(--color-input-border);
46955
+ font-size: 1.4rem;
46956
+ background-color: var(--color-input-bg);
46957
+ transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
46958
+ padding: 0 0.8rem;
46959
+ height: 3.2rem;
46960
+ border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
46961
+ display: block;
46962
+ position: relative;
46963
+ padding-inline-end: 2rem;
46964
+ min-width: 5rem;
46965
+ cursor: pointer; }
46966
+ .sd-input__select::placeholder {
46967
+ color: var(--color-text-lighter);
46968
+ font-weight: 400;
46969
+ opacity: 0.75; }
46970
+ .sd-input__select:hover {
46971
+ border-color: var(--color-input-border-hover);
46972
+ background-color: var(--color-input-bg--hover); }
46973
+ .sd-input__select:focus {
46974
+ box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
46975
+ border-color: var(--sd-colour-interactive);
46976
+ background-color: var(--sd-colour-interactive--alpha-20); }
46977
+ .sd-input__select:focus::placeholder {
46978
+ opacity: 0.45; }
46979
+ .sd-input__select option {
46980
+ color: inherit;
46981
+ font-size: 1.4rem;
46982
+ line-height: 2rem;
46983
+ background-color: var(--color-dropdown-menu-Bg);
46984
+ color: var(--color-dropdown-menu-text); }
46985
+
46986
+ .sd-input__hint,
46987
+ .sd-input__message,
46988
+ .sd-input__char-count {
46989
+ font-size: 1.2rem;
46990
+ line-height: 1.4rem;
46991
+ transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
46992
+ color: var(--color-text-light);
46993
+ font-weight: 300;
46994
+ letter-spacing: 0.03em;
46995
+ display: block; }
46996
+
46997
+ .sd-input__char-count {
46998
+ font-size: 1.1rem;
46999
+ font-weight: 400;
47000
+ font-style: italic; }
47001
+ .sd-input__char-count--error {
47002
+ color: #e41b21; }
47003
+
46740
47004
  .sd-input {
46741
47005
  padding-top: 0;
46742
47006
  margin: 0;
@@ -46747,35 +47011,8 @@ a.text-link {
46747
47011
  position: relative;
46748
47012
  align-self: stretch; }
46749
47013
  .sd-input .sd-input__input {
46750
- -webkit-appearance: none;
46751
- -moz-appearance: none;
46752
- appearance: none;
46753
- width: 100%;
46754
- color: var(--color-text);
46755
- border: 0;
46756
- border-bottom: 1px solid var(--color-input-border);
46757
- font-size: 1.4rem;
46758
- background-color: var(--color-input-bg);
46759
- transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
46760
- padding: 0 0.8rem;
46761
- height: 3.2rem;
46762
- border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
46763
- display: block;
46764
47014
  grid-row: 2/3;
46765
47015
  grid-column: 2/4; }
46766
- .sd-input .sd-input__input::placeholder {
46767
- color: var(--color-text-lighter);
46768
- font-weight: 400;
46769
- opacity: 0.75; }
46770
- .sd-input .sd-input__input:hover {
46771
- border-color: var(--color-input-border-hover);
46772
- background-color: var(--color-input-bg--hover); }
46773
- .sd-input .sd-input__input:focus {
46774
- box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
46775
- border-color: var(--sd-colour-interactive);
46776
- background-color: var(--sd-colour-interactive--alpha-20); }
46777
- .sd-input .sd-input__input:focus::placeholder {
46778
- opacity: 0.45; }
46779
47016
  .sd-input .sd-input__input-container {
46780
47017
  grid-row: 2/3;
46781
47018
  grid-column: 2/4; }
@@ -46789,46 +47026,8 @@ a.text-link {
46789
47026
  .sd-input input[type="file"].sd-input__input:focus {
46790
47027
  outline: none; }
46791
47028
  .sd-input .sd-input__select {
46792
- display: block;
46793
- position: relative;
46794
- -webkit-appearance: none;
46795
- -moz-appearance: none;
46796
- appearance: none;
46797
- width: 100%;
46798
- color: var(--color-text);
46799
- border: 0;
46800
- border-bottom: 1px solid var(--color-input-border);
46801
- font-size: 1.4rem;
46802
- background-color: var(--color-input-bg);
46803
- transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
46804
- padding: 0 0.8rem;
46805
- height: 3.2rem;
46806
- border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
46807
- display: block;
46808
- padding-inline-end: 2rem;
46809
47029
  grid-row: 2/3;
46810
- grid-column: 2/4;
46811
- min-width: 5rem;
46812
- cursor: pointer; }
46813
- .sd-input .sd-input__select::placeholder {
46814
- color: var(--color-text-lighter);
46815
- font-weight: 400;
46816
- opacity: 0.75; }
46817
- .sd-input .sd-input__select:hover {
46818
- border-color: var(--color-input-border-hover);
46819
- background-color: var(--color-input-bg--hover); }
46820
- .sd-input .sd-input__select:focus {
46821
- box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
46822
- border-color: var(--sd-colour-interactive);
46823
- background-color: var(--sd-colour-interactive--alpha-20); }
46824
- .sd-input .sd-input__select:focus::placeholder {
46825
- opacity: 0.45; }
46826
- .sd-input .sd-input__select option {
46827
- color: inherit;
46828
- font-size: 1.4rem;
46829
- line-height: 2rem;
46830
- background-color: var(--color-dropdown-menu-Bg);
46831
- color: var(--color-dropdown-menu-text); }
47030
+ grid-column: 2/4; }
46832
47031
  .sd-input.sd-input--is-select::after {
46833
47032
  position: relative;
46834
47033
  z-index: 1;
@@ -46860,24 +47059,14 @@ a.text-link {
46860
47059
  .sd-input .sd-input__hint,
46861
47060
  .sd-input .sd-input__message,
46862
47061
  .sd-input .sd-input__char-count {
46863
- font-size: 1.2rem;
46864
- line-height: 1.4rem;
46865
- transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
46866
- color: var(--color-text-light);
46867
- font-weight: 300;
46868
- margin: 0.5rem 0;
46869
- letter-spacing: 0.03em;
46870
- display: block; }
47062
+ margin: 0.5rem 0; }
46871
47063
  .sd-input .sd-input__char-count {
46872
- font-size: 1.1rem;
46873
- font-weight: 400;
46874
- font-style: italic;
46875
47064
  grid-row: 3/4;
46876
47065
  grid-column: 3/4; }
46877
- .sd-input .sd-input__char-count--error {
46878
- color: #e41b21; }
46879
47066
  .sd-input .sd-input__label {
46880
- display: inline-block;
47067
+ display: inline-flex;
47068
+ align-items: flex-start;
47069
+ justify-content: flex-start;
46881
47070
  font-size: 1.1rem;
46882
47071
  margin: 0 0.5rem 0 0;
46883
47072
  line-height: 1;
@@ -46904,15 +47093,15 @@ a.text-link {
46904
47093
  display: inline-flex;
46905
47094
  align-items: center;
46906
47095
  justify-content: center;
46907
- padding: 2px 8px 1px;
47096
+ padding: 2px 8px;
46908
47097
  font-size: 1.1rem;
46909
47098
  font-family: "Roboto", Helvetica, Arial, sans-serif;
46910
47099
  font-weight: 400;
46911
- line-height: 1.8rem;
47100
+ line-height: 2rem;
46912
47101
  text-transform: uppercase;
46913
47102
  font-style: normal;
46914
47103
  letter-spacing: 0.08em;
46915
- height: 1.8rem;
47104
+ height: 2rem;
46916
47105
  transition: opacity ease 0.2s;
46917
47106
  justify-self: start;
46918
47107
  position: relative;
@@ -46967,7 +47156,7 @@ a.text-link {
46967
47156
  content: "*";
46968
47157
  vertical-align: top;
46969
47158
  font-size: 1.2rem;
46970
- padding-left: 0.3rem; }
47159
+ padding-inline-start: 0.3rem; }
46971
47160
  .sd-input--required .sd-input__label.sd-input__label--boxed::after {
46972
47161
  position: absolute;
46973
47162
  inset-block-start: -4px;
@@ -47123,6 +47312,7 @@ a.text-link {
47123
47312
  height: 3.2rem;
47124
47313
  border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
47125
47314
  display: block;
47315
+ position: relative;
47126
47316
  display: flex;
47127
47317
  gap: 2px;
47128
47318
  grid-row: 2/3;
@@ -47952,6 +48142,101 @@ label + .sd-radio {
47952
48142
  .form__item--auto-width .sd-input--grid-select .btn {
47953
48143
  margin-top: 0; }
47954
48144
 
48145
+ .input-wrap {
48146
+ padding-top: 0;
48147
+ margin: 0;
48148
+ display: grid;
48149
+ grid-template-columns: auto 1fr auto;
48150
+ grid-template-rows: auto auto auto;
48151
+ grid-gap: 0;
48152
+ position: relative;
48153
+ align-self: stretch;
48154
+ flex-grow: 1;
48155
+ width: 100%;
48156
+ row-gap: 0.4rem; }
48157
+ .input-wrap .input-wrap__input-container,
48158
+ .input-wrap .sd-input__input {
48159
+ grid-row: 2/3;
48160
+ grid-column: 2/4; }
48161
+ .input-wrap .input-wrap__message-box {
48162
+ grid-row: 3/4;
48163
+ grid-column: 2/3; }
48164
+ .input-wrap .input-wrap__icon-right {
48165
+ grid-row: 2/3;
48166
+ grid-column: 3/4;
48167
+ z-index: 1; }
48168
+ .input-wrap .sd-input__char-count {
48169
+ grid-row: 3/4;
48170
+ grid-column: 3/4;
48171
+ z-index: 1;
48172
+ font-size: 1.1rem;
48173
+ font-weight: 400;
48174
+ font-style: italic; }
48175
+ .input-wrap .sd-input__label,
48176
+ .input-wrap .form-label {
48177
+ grid-row: 1/2;
48178
+ grid-column: 2/3;
48179
+ margin-bottom: 0 !important;
48180
+ align-items: center;
48181
+ justify-content: flex-start; }
48182
+ .input-wrap .form-label--boxed {
48183
+ margin-block: 2px !important; }
48184
+ .input-wrap .icn-btn, .input-wrap .sd-thumb-carousel__btn--prev, .input-wrap .sd-thumb-carousel__btn--next,
48185
+ .input-wrap .p-carousel-prev, .input-wrap .p-carousel-next {
48186
+ grid-row: 1/2;
48187
+ grid-column: 3/4; }
48188
+ .input-wrap--inline-label {
48189
+ grid-template-columns: auto 1fr auto;
48190
+ grid-template-rows: auto auto auto; }
48191
+ .input-wrap--inline-label .sd-input__label,
48192
+ .input-wrap--inline-label .form-label {
48193
+ grid-row: 2/3;
48194
+ grid-column: 1/2;
48195
+ padding-inline-end: 1rem;
48196
+ padding-inline-start: 0;
48197
+ padding-block-start: 0.4rem;
48198
+ padding-block-end: 0;
48199
+ position: relative;
48200
+ max-width: 260px;
48201
+ min-width: 100px;
48202
+ text-align: end;
48203
+ position: relative;
48204
+ align-self: center;
48205
+ line-height: 1.2; }
48206
+ .input-wrap--inline-label .sd-input__label::after,
48207
+ .input-wrap--inline-label .form-label::after {
48208
+ position: absolute;
48209
+ z-index: 2;
48210
+ inset-block-start: -2px;
48211
+ inset-inline-end: 4px; }
48212
+ .input-wrap--required .sd-input__label::after {
48213
+ color: #e41b21;
48214
+ content: "*";
48215
+ vertical-align: top;
48216
+ font-size: 1.2rem;
48217
+ padding-left: 0.3rem; }
48218
+ .input-wrap--required .sd-input__label.sd-input__label--boxed::after {
48219
+ position: absolute;
48220
+ inset-block-start: -4px;
48221
+ inset-inline-end: -10px; }
48222
+ .input-wrap--disabled .sd-input__label,
48223
+ .input-wrap--disabled .sd-input__message-box,
48224
+ .input-wrap--disabled .sd-input__char-count {
48225
+ opacity: 0.5 !important;
48226
+ pointer-events: none !important; }
48227
+ .input-wrap--disabled .sd-input__hint,
48228
+ .input-wrap--disabled .sd-input__message,
48229
+ .input-wrap--disabled .sd-input__char-count {
48230
+ pointer-events: none; }
48231
+ .input-wrap--no-label {
48232
+ grid-template-rows: auto auto auto; }
48233
+ .input-wrap--medium.sd-input--boxed-style .sd-input__input,
48234
+ .input-wrap--medium.sd-input--boxed-style .sd-input__select {
48235
+ border-radius: var(--b-radius--medium); }
48236
+ .input-wrap--medium.sd-input--boxed-style .sd-input__input:focus,
48237
+ .input-wrap--medium.sd-input--boxed-style .sd-input__select:focus {
48238
+ box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20); }
48239
+
47955
48240
  .sd-sidebar-menu {
47956
48241
  position: absolute;
47957
48242
  bottom: 0;
@@ -58844,11 +59129,11 @@ i.sd-sidetab-menu__helper-icon {
58844
59129
  box-sizing: content-box;
58845
59130
  line-height: 100%;
58846
59131
  color: #9b27b0;
58847
- right: -0.5rem;
58848
- bottom: -0.7rem;
59132
+ inset-inline-end: -0.4rem;
59133
+ inset-block-end: -0.6rem;
58849
59134
  height: 1em;
58850
59135
  width: 1em;
58851
- background-color: var(--sd-item__main-Bg);
59136
+ background-color: var(--sd-item__main-Bg) !important;
58852
59137
  border-radius: var(--b-radius--full);
58853
59138
  padding: 1px;
58854
59139
  z-index: 1;
@@ -58864,8 +59149,8 @@ i.sd-sidetab-menu__helper-icon {
58864
59149
  font-size: 32px; }
58865
59150
  .icn-mix--2x .icn-mix__sub-icn {
58866
59151
  font-size: 1.6rem;
58867
- right: -0.6rem;
58868
- bottom: -0.3rem; }
59152
+ inset-inline-end: -0.6rem;
59153
+ inset-block-end: -0.3rem; }
58869
59154
 
58870
59155
  .double-size-icn {
58871
59156
  display: inline-block;
@@ -58882,13 +59167,13 @@ i.sd-sidetab-menu__helper-icon {
58882
59167
  opacity: 0.5; }
58883
59168
 
58884
59169
  .subnav .icn-mix__sub-icn {
58885
- background-color: var(--sd-colour-panel-bg--100); }
59170
+ background-color: var(--sd-colour-panel-bg--100) !important; }
58886
59171
 
58887
59172
  .subnav--darker .icn-mix__sub-icn {
58888
- background-color: var(--sd-colour-panel-bg--200); }
59173
+ background-color: var(--sd-colour-panel-bg--200) !important; }
58889
59174
 
58890
59175
  .subnav--dark-blue-grey .icn-mix__sub-icn {
58891
- background-color: var(--color-subnav-bg--blueGrey-10);
59176
+ background-color: var(--color-subnav-bg--blueGrey-10) !important;
58892
59177
  color: #d686e4; }
58893
59178
 
58894
59179
  .subnav--dark-blue-grey .icn-mix__icn {
@@ -59962,7 +60247,8 @@ i.sd-sidetab-menu__helper-icon {
59962
60247
  .p-dialog-mask.p-component-overlay {
59963
60248
  background-color: rgba(35, 40, 46, 0.5) !important;
59964
60249
  backdrop-filter: blur(1px);
59965
- -webkit-backdrop-filter: blur(1px); }
60250
+ -webkit-backdrop-filter: blur(1px);
60251
+ z-index: 1000; }
59966
60252
 
59967
60253
  .p-dialog-mask {
59968
60254
  position: fixed;
@@ -60277,12 +60563,13 @@ i.sd-sidetab-menu__helper-icon {
60277
60563
  padding: .8rem 1.6rem;
60278
60564
  min-width: 100px;
60279
60565
  font-size: 14px;
60280
- color: var(--color-text); }
60566
+ color: var(--color-text);
60567
+ width: 100%; }
60281
60568
  .p-menuitem-link:hover, .p-menuitem-link:focus-visible {
60282
60569
  background: var(--sd-colour-interactive--alpha-20); }
60283
-
60284
- .p-menuitem-icon {
60285
- margin-right: 0.8rem; }
60570
+ .p-menuitem-link .p-menuitem-icon {
60571
+ margin-right: 0.8rem;
60572
+ color: var(--color-icon-default); }
60286
60573
 
60287
60574
  .sd-avatar {
60288
60575
  display: inline-block;