superdesk-ui-framework 3.0.42 → 3.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/app/styles/_accessibility.scss +349 -310
  2. package/app/styles/_alerts.scss +102 -71
  3. package/app/styles/_animations.scss +29 -16
  4. package/app/styles/_avatar.scss +159 -140
  5. package/app/styles/_badge.scss +11 -5
  6. package/app/styles/_big-icon-font.scss +21 -9
  7. package/app/styles/_boxed-list.scss +72 -47
  8. package/app/styles/_buttons.scss +266 -177
  9. package/app/styles/_carousel.scss +58 -45
  10. package/app/styles/_content-divider.scss +28 -2
  11. package/app/styles/_drag-drop.scss +3 -0
  12. package/app/styles/_empty-states.scss +21 -13
  13. package/app/styles/_hamburger.scss +142 -144
  14. package/app/styles/_helpers.scss +297 -93
  15. package/app/styles/_icon-font.scss +75 -43
  16. package/app/styles/_icon-labels.scss +11 -1
  17. package/app/styles/_labels.scss +27 -14
  18. package/app/styles/_loaders.scss +2 -1
  19. package/app/styles/_master-desk.scss +67 -31
  20. package/app/styles/_mixins.scss +40 -20
  21. package/app/styles/_modals.scss +112 -56
  22. package/app/styles/_panel-info.scss +38 -34
  23. package/app/styles/_popover.scss +0 -1
  24. package/app/styles/_publisher-styles.scss +132 -122
  25. package/app/styles/_sd-tag-input.scss +104 -24
  26. package/app/styles/_simple-list.scss +89 -66
  27. package/app/styles/_spinner.scss +24 -17
  28. package/app/styles/_table-list.scss +114 -80
  29. package/app/styles/_tables.scss +14 -2
  30. package/app/styles/_tabs-vertical.scss +46 -43
  31. package/app/styles/_tabs.scss +97 -87
  32. package/app/styles/_tag-labels.scss +26 -11
  33. package/app/styles/_thumb-carousel.scss +37 -11
  34. package/app/styles/_toggle-box.scss +27 -7
  35. package/app/styles/_toggle-button.scss +5 -1
  36. package/app/styles/_tooltips.scss +284 -272
  37. package/app/styles/components/_card-item.scss +268 -192
  38. package/app/styles/components/_list-item.scss +261 -175
  39. package/app/styles/components/_sd-circular-progress.scss +109 -79
  40. package/app/styles/components/_sd-collapse-box.scss +45 -33
  41. package/app/styles/components/_sd-comment-box.scss +17 -12
  42. package/app/styles/components/_sd-dropzone.scss +32 -15
  43. package/app/styles/components/_sd-editor-popup.scss +29 -15
  44. package/app/styles/components/_sd-grid-item.scss +349 -237
  45. package/app/styles/components/_sd-loader.scss +1 -2
  46. package/app/styles/components/_sd-media-carousel.scss +119 -78
  47. package/app/styles/components/_sd-notification-panel.scss +2 -1
  48. package/app/styles/components/_sd-pagination.scss +27 -19
  49. package/app/styles/components/_sd-photo-preview.scss +82 -41
  50. package/app/styles/components/_sd-searchbar.scss +79 -51
  51. package/app/styles/components/_sd-toaster.scss +52 -30
  52. package/app/styles/components/_subnav.scss +230 -135
  53. package/app/styles/components/_theme-selector.scss +78 -53
  54. package/app/styles/components/sd-slider.scss +11 -7
  55. package/app/styles/design-tokens/_design-tokens-general.scss +31 -27
  56. package/app/styles/design-tokens/_new-colors.scss +3 -1
  57. package/app/styles/dropdowns/_basic-dropdown.scss +164 -86
  58. package/app/styles/dropdowns/_input-dropdown.scss +5 -2
  59. package/app/styles/dropdowns/_navigation_dropdown.scss +18 -4
  60. package/app/styles/dropdowns/_nested-dropdown.scss +11 -2
  61. package/app/styles/dropdowns/_other_dropdown.scss +9 -3
  62. package/app/styles/editor/_editor-buttons.scss +10 -6
  63. package/app/styles/editor/_editor-themes.scss +401 -350
  64. package/app/styles/form-elements/_autocomplete.scss +7 -1
  65. package/app/styles/form-elements/_checkbox.scss +230 -159
  66. package/app/styles/form-elements/_forms-general.scss +345 -285
  67. package/app/styles/form-elements/_input-preview.scss +15 -9
  68. package/app/styles/form-elements/_input-wrap.scss +77 -71
  69. package/app/styles/form-elements/_inputs.scss +668 -489
  70. package/app/styles/form-elements/_radio.scss +10 -5
  71. package/app/styles/form-elements/_switch.scss +27 -16
  72. package/app/styles/grids/_basic-grid.scss +83 -64
  73. package/app/styles/grids/_grid-layout.scss +301 -165
  74. package/app/styles/grids/_layout-grid.scss +85 -59
  75. package/app/styles/grids/_sd-kanban-list.scss +14 -4
  76. package/app/styles/interface-elements/_side-panel.scss +279 -200
  77. package/app/styles/layout/_basic-layout.scss +36 -34
  78. package/app/styles/layout/_container.scss +38 -31
  79. package/app/styles/layout/_editor.scss +57 -17
  80. package/app/styles/layout/_general.scss +81 -67
  81. package/app/styles/menus/_sd-bottom-tabs.scss +21 -12
  82. package/app/styles/menus/_sd-content-navigation.scss +20 -16
  83. package/app/styles/menus/_sd-left-navigation.scss +62 -49
  84. package/app/styles/menus/_sd-sidebar-menu.scss +365 -323
  85. package/app/styles/menus/_sd-top-menu.scss +16 -7
  86. package/app/styles/primereact/_pr-autocomplete.scss +2 -0
  87. package/app/styles/primereact/_pr-datepicker.scss +13 -2
  88. package/app/styles/primereact/_pr-dialog.scss +55 -47
  89. package/app/styles/primereact/_pr-dropdown.scss +27 -22
  90. package/app/styles/primereact/_pr-general.scss +3 -0
  91. package/app/styles/primereact/_pr-menu.scss +2 -1
  92. package/app/styles/primereact/_pr-skeleton.scss +1 -0
  93. package/app/styles/primereact/_pr-tag-input.scss +1 -0
  94. package/app/styles/variables/_colors.scss +168 -170
  95. package/app/styles/variables/_typography.scss +1 -2
  96. package/app-typescript/components/Form/InputWrapper.tsx +1 -1
  97. package/app-typescript/components/Menu.tsx +1 -1
  98. package/app-typescript/components/{TreeSelect.tsx → TreeSelect/TreeSelect.tsx} +228 -257
  99. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +84 -0
  100. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +53 -0
  101. package/app-typescript/index.ts +1 -1
  102. package/dist/examples.bundle.css +18 -16
  103. package/dist/examples.bundle.js +1029 -918
  104. package/dist/react/TreeSelect.tsx +1 -1
  105. package/dist/superdesk-ui.bundle.css +4265 -3552
  106. package/dist/superdesk-ui.bundle.js +776 -665
  107. package/dist/vendor.bundle.js +23 -23
  108. package/examples/pages/react/TreeSelect.tsx +1 -1
  109. package/package.json +2 -2
  110. package/react/components/Form/InputWrapper.d.ts +1 -1
  111. package/react/components/Menu.js +1 -1
  112. package/react/components/{TreeSelect.d.ts → TreeSelect/TreeSelect.d.ts} +2 -2
  113. package/react/components/{TreeSelect.js → TreeSelect/TreeSelect.js} +82 -144
  114. package/react/components/TreeSelect/TreeSelectItem.d.ts +20 -0
  115. package/react/components/TreeSelect/TreeSelectItem.js +90 -0
  116. package/react/components/TreeSelect/TreeSelectPill.d.ts +14 -0
  117. package/react/components/TreeSelect/TreeSelectPill.js +71 -0
  118. package/react/index.d.ts +1 -1
  119. package/react/index.js +1 -1
package/app/styles/_accessibility.scss CHANGED
@@ -1,317 +1,356 @@
1
1
  .a11y-only {
2
- position: absolute;
3
- top: 0;
4
- z-index: -1;
5
- pointer-events: none;
6
- opacity: 0 !important;
7
- height: 0 !important;
8
- width: 0 !important;
9
- min-width: 0 !important;
10
- min-height: 0 !important;
11
- overflow: hidden !important;
12
- font-size: 0.01px !important;
13
- padding: 0 !important;
14
- margin: 0 !important;
2
+ position: absolute;
3
+ top: 0;
4
+ z-index: -1;
5
+ pointer-events: none;
6
+ opacity: 0 !important;
7
+ height: 0 !important;
8
+ width: 0 !important;
9
+ min-width: 0 !important;
10
+ min-height: 0 !important;
11
+ overflow: hidden !important;
12
+ font-size: 0.01px !important;
13
+ padding: 0 !important;
14
+ margin: 0 !important;
15
15
  }
16
16
 
17
17
  [data-theme="accessible-light-ui"],
18
18
  [data-theme="contrast-light-ui"] {
19
+ --font-size-large: 1.5rem;
19
20
 
20
- --font-size-large: 1.5rem;
21
-
22
- --color-accessible-text: hsla(0, 0%, 7%, 1);
23
- --sd-slugline-color: hsla(241, 100%, 50%, 1);
24
-
25
- --color-input-bg: hsla(0, 0%, 0%, 0.05);
26
- --color-input-bg--hover: hsla(0, 0%, 0%, 0.08);
27
- --color-input-bg--focus: hsla(198, 49%, 58%, 0.14);
28
- --color-label-text: hsla(0, 0%, 25%, 1);
29
-
30
- --color-input-border: hsla(0, 0%, 0%, 0.35);
31
- --color-input-border-hover: hsla(0, 0%, 0%, 0.8);
32
-
33
- --color-form-bg: hsla(0, 0%, 100%, 0);
34
- --color-text: hsla(0, 0%, 0%, 1);
35
-
36
- --color-selected-bg: hsla(196, 35%, 94%, 1);
37
- --color-selected-bg--hover: hsl(198, 36%, 91%, 1);
38
-
39
- --color-bg-00: hsla(0, 0%, 100%, 1);
40
- --color-bg-50: hsla(0, 0%, 97%, 1);
41
- --color-bg-100: hsla(0, 0%, 93%, 1);
42
- --color-bg-150: hsla(0, 0%, 87%, 1);
43
- --color-bg-200: hsla(0, 0%, 63%, 1);
44
-
45
- --color-bg-800: hsla(0, 0%, 17%, 1);
46
-
47
-
48
- --color-accessible-primary: hsla(241, 100%, 50%, 1);
49
-
50
- [class^="icon-"],
51
- [class*=" icon-"],
52
- [class^="big-icon--"],
53
- [class*=" big-icon--"] {
54
- color: hsla(0, 0%, 0%, 1);
55
- }
56
-
57
- .sd-checkbox--button-style {
58
- color: hsla(0, 0%, 7%, 1);
59
- }
60
- .sd-checkbox--button-style.checked,
61
- .sd-checkbox--button-style[checked="checked"] {
62
- background-color: var(--color-accessible-primary);
63
- border-color: var(--color-accessible-primary);
64
- border-top-color: hsla(241, 98%, 17%, 1);
65
- color: hsla(0, 0%, 100%, 1);
66
- &:hover {
67
- background-color: hsla(241, 98%, 20%, 1);
68
- border-color: hsla(241, 98%, 20%, 1);
69
- border-top-color: hsla(241, 100%, 11%, 1);
70
- }
71
- }
72
- .sd-create-btn .circle {
73
- background-color: var(--color-accessible-primary);
74
- }
75
-
76
- .navbtn.navbtn--active {
77
- background-color: hsla(0, 0%, 27%, 1);
78
- color: $white;
79
- }
80
- .btn {
81
- color: var(--color-accessible-text);
82
- font-weight: 600;
83
- font-size: 1.4rem;
84
- &.btn--primary {
85
- background-color: var(--color-accessible-primary);
86
- color: $white;
87
- }
88
- &.btn--hollow {
89
- background-color: $white;
90
- }
91
- }
92
-
93
- .sd-list-item {
94
- font-size: 1.5rem;
95
- .sd-list-item__slugline {
96
- font-size: 1.3rem;
97
- }
98
- time {
99
- color: hsla(0, 0%, 28%, 1);
100
- font-weight: 400;
101
- }
102
- }
103
- .badge {
104
- font-size: 1.2rem;
105
- line-height: 1.1em;
106
- font-weight: 600;
107
- }
108
- .side-panel {
109
- background-color: $white;
110
- color: var(--color-accessible-text);
111
- .side-panel__header {
112
- background-color: $white;
113
- }
114
- .side-panel__heading {
115
- font-weight: 500;
116
- color: var(--color-accessible-text);
117
- }
118
- p {
119
- font-size: 1.6rem;
120
- line-height: 1.5;
121
- color: var(--color-accessible-text);
122
- }
123
- .sd-text__date-and-author {
124
- font-size: 1.4rem;
125
- time {
126
- font-weight: 400;
127
- color: hsla(0, 0%, 35%, 1);
128
- }
129
- }
130
- &.side-panel--dark-ui {
131
- background-color: var(--color-bg-800);
132
- color: $white;
133
- i[class^="icon-"] {
134
- color: $white;
135
- }
136
- .side-panel__header {
137
- background-color: var(--color-bg-800);
138
- color: $white !important;
139
- i[class^="icon-"] {
140
- color: $white !important;
141
- }
142
-
143
- }
144
- }
145
- }
146
-
147
- .sd-input {
148
- .sd-input__label {
149
- font-weight: 600;
150
- font-size: 1.2rem;
151
- }
152
- .sd-input__input,
153
- .sd-input__select {
154
- font-size: 1.5rem;
155
- }
156
- .sd-input__hint,
157
- .sd-input__message {
158
- font-size: 1.4rem;
159
- margin: 0.8rem 0;
160
- }
161
- .sd-input__hint {
162
- color: hsla(0, 0%, 27%, 1);
163
- }
164
- }
165
-
166
- .form-label {
167
- font-size: 1.2rem;
168
- font-weight: 500;
169
- &.form-label--light {
170
- color: hsla(0, 0%, 32%, 1);
171
- }
172
- }
173
-
174
- .navbtn {
175
- color: #111;
176
- [class^="icon-"], [class*=" icon-"] {
177
- color: currentColor;
178
- }
179
- }
180
-
181
- .dropdown__menu-label {
182
- font-size: 1.2rem;
183
- color: hsla(0, 0%, 35%, 1);
184
- }
185
- .dropdown__toggle:active,
186
- .dropdown.open .dropdown__toggle {
187
- color: var(--color-accessible-primary);
188
- }
189
- .dropdown__menu li a:not(.btn),
190
- .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
191
- .dropdown__menu .dropdown__menu-item a:not(.btn),
192
- .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
193
- font-size: 1.5rem;
194
- font-weight: 500;
195
- color: currentColor;
196
- }
197
- .dropdown__menu li a:not(.btn):hover,
198
- .dropdown__menu li a:not(.btn):focus,
199
- .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
200
- .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
201
- .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
202
- .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
203
- .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
204
- .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
205
- background: var(--color-accessible-primary);
206
- color: $white;
207
- > i[class^="icon-"] {
208
- color: $white;
209
- }
210
- }
211
- .dropdown.open .navbtn > i {
212
- color: var(--color-accessible-primary);
213
- }
214
-
215
- .sd-text__slugline,
216
- p.sd-text__slugline {
217
- color: var(--color-accessible-primary) !important;
218
- }
219
-
220
- .toggle-box--circle .toggle-box__chevron {
221
- background-color: hsla(0, 0%, 48%, 0.5);
222
- height: 2rem;
223
- width: 2rem;
224
- }
225
- .toggle-box__label {
226
- font-size: 1.4rem;
227
- color: var(--color-label-text);
228
- font-weight: 500;
229
- }
230
-
231
- .sd-grid-item {
232
- time {
233
- color: hsla(0, 0%, 28%, 1);
234
- font-size: 1.3rem;
235
- font-weight: 400;
236
- }
237
- .sd-grid-item__slugline {
238
- font-size: 1.2rem;
239
- }
240
- }
241
- .nav-tabs {
242
- .nav-tabs__link {
243
- font-size: 1.6rem;
244
- font-weight: 500;
245
- }
246
- &--big {
247
- .nav-tabs__link {
248
- font-size: 2rem;
249
- }
250
- }
251
- }
252
-
253
- .nav-tabs__tab--active,
254
- .nav-tabs__tab--active:hover {
255
- .nav-tabs__link {
256
- border-bottom-color: var(--color-accessible-primary);
257
- color: var(--color-accessible-text);
258
- }
259
- }
260
-
261
- .side-panel.side-panel--dark-ui {
262
- .nav-tabs__tab {
263
- .nav-tabs__link {
264
- border-bottom-color: transparent;
265
- color: $white;
266
- opacity: 0.6;
267
- }
268
- &:hover {
269
- .nav-tabs__link {
270
- border-bottom-color: hsla(0, 0%, 100%, 0.25);
271
- opacity: 1;
272
- }
273
- }
274
- &.nav-tabs__tab--active,
275
- &.nav-tabs__tab--active:hover {
276
- .nav-tabs__link {
277
- border-bottom-color: hsla(240, 100%, 65%, 1);
278
- color: $white;
279
- opacity: 1;
280
- }
281
- }
282
- }
283
-
284
- .toggle-box__label {
285
- color: $white;
286
- }
287
-
288
- .sd-line-input .sd-line-input__label {
289
- color: $white;
290
- opacity: 0.7;
291
- }
292
-
293
- a.text-link.text-link--white {
294
- color: $white;
295
- opacity: 0.75;
296
- &:hover {
297
- opacity: 1;
298
- }
299
- }
300
- }
301
- .badge {
302
- &.badge--primary {
303
- background-color: var(--color-accessible-primary);
304
- }
305
- &.badge--success {
306
- background-color: hsla(133, 100%, 19%, 1);
307
- }
308
- &.badge--warning {
309
- background-color: hsla(33, 100%, 26%, 1);
310
- }
311
- }
312
- .sd-sidebar-menu__btn--active,
313
- .sd-sidebar-menu__btn--active:hover {
314
- background-color: var(--color-accessible-primary);
315
-
316
- }
21
+ --color-accessible-text: hsla(0, 0%, 7%, 1);
22
+ --sd-slugline-color: hsla(241, 100%, 50%, 1);
23
+
24
+ --color-input-bg: hsla(0, 0%, 0%, 0.05);
25
+ --color-input-bg--hover: hsla(0, 0%, 0%, 0.08);
26
+ --color-input-bg--focus: hsla(198, 49%, 58%, 0.14);
27
+ --color-label-text: hsla(0, 0%, 25%, 1);
28
+
29
+ --color-input-border: hsla(0, 0%, 0%, 0.35);
30
+ --color-input-border-hover: hsla(0, 0%, 0%, 0.8);
31
+
32
+ --color-form-bg: hsla(0, 0%, 100%, 0);
33
+ --color-text: hsla(0, 0%, 0%, 1);
34
+
35
+ --color-selected-bg: hsla(196, 35%, 94%, 1);
36
+ --color-selected-bg--hover: hsl(198, 36%, 91%, 1);
37
+
38
+ --color-bg-00: hsla(0, 0%, 100%, 1);
39
+ --color-bg-50: hsla(0, 0%, 97%, 1);
40
+ --color-bg-100: hsla(0, 0%, 93%, 1);
41
+ --color-bg-150: hsla(0, 0%, 87%, 1);
42
+ --color-bg-200: hsla(0, 0%, 63%, 1);
43
+
44
+ --color-bg-800: hsla(0, 0%, 17%, 1);
45
+
46
+ --color-accessible-primary: hsla(241, 100%, 50%, 1);
47
+
48
+ [class^="icon-"],
49
+ [class*=" icon-"],
50
+ [class^="big-icon--"],
51
+ [class*=" big-icon--"] {
52
+ color: hsla(0, 0%, 0%, 1);
53
+ }
54
+
55
+ .sd-checkbox--button-style {
56
+ color: hsla(0, 0%, 7%, 1);
57
+ }
58
+
59
+ .sd-checkbox--button-style.checked,
60
+ .sd-checkbox--button-style[checked="checked"] {
61
+ background-color: var(--color-accessible-primary);
62
+ border-color: var(--color-accessible-primary);
63
+ border-top-color: hsla(241, 98%, 17%, 1);
64
+ color: hsla(0, 0%, 100%, 1);
65
+
66
+ &:hover {
67
+ background-color: hsla(241, 98%, 20%, 1);
68
+ border-color: hsla(241, 98%, 20%, 1);
69
+ border-top-color: hsla(241, 100%, 11%, 1);
70
+ }
71
+ }
72
+
73
+ .sd-create-btn .circle {
74
+ background-color: var(--color-accessible-primary);
75
+ }
76
+
77
+ .navbtn.navbtn--active {
78
+ background-color: hsla(0, 0%, 27%, 1);
79
+ color: $white;
80
+ }
81
+
82
+ .btn {
83
+ color: var(--color-accessible-text);
84
+ font-weight: 600;
85
+ font-size: 1.4rem;
86
+
87
+ &.btn--primary {
88
+ background-color: var(--color-accessible-primary);
89
+ color: $white;
90
+ }
91
+
92
+ &.btn--hollow {
93
+ background-color: $white;
94
+ }
95
+ }
96
+
97
+ .sd-list-item {
98
+ font-size: 1.5rem;
99
+
100
+ .sd-list-item__slugline {
101
+ font-size: 1.3rem;
102
+ }
103
+
104
+ time {
105
+ color: hsla(0, 0%, 28%, 1);
106
+ font-weight: 400;
107
+ }
108
+ }
109
+
110
+ .badge {
111
+ font-size: 1.2rem;
112
+ line-height: 1.1em;
113
+ font-weight: 600;
114
+ }
115
+
116
+ .side-panel {
117
+ background-color: $white;
118
+ color: var(--color-accessible-text);
119
+
120
+ .side-panel__header {
121
+ background-color: $white;
122
+ }
123
+
124
+ .side-panel__heading {
125
+ font-weight: 500;
126
+ color: var(--color-accessible-text);
127
+ }
128
+
129
+ p {
130
+ font-size: 1.6rem;
131
+ line-height: 1.5;
132
+ color: var(--color-accessible-text);
133
+ }
134
+
135
+ .sd-text__date-and-author {
136
+ font-size: 1.4rem;
137
+
138
+ time {
139
+ font-weight: 400;
140
+ color: hsla(0, 0%, 35%, 1);
141
+ }
142
+ }
143
+
144
+ &.side-panel--dark-ui {
145
+ background-color: var(--color-bg-800);
146
+ color: $white;
147
+
148
+ i[class^="icon-"] {
149
+ color: $white;
150
+ }
151
+
152
+ .side-panel__header {
153
+ background-color: var(--color-bg-800);
154
+ color: $white !important;
155
+
156
+ i[class^="icon-"] {
157
+ color: $white !important;
158
+ }
159
+
160
+ }
161
+ }
162
+ }
163
+
164
+ .sd-input {
165
+ .sd-input__label {
166
+ font-weight: 600;
167
+ font-size: 1.2rem;
168
+ }
169
+
170
+ .sd-input__input,
171
+ .sd-input__select {
172
+ font-size: 1.5rem;
173
+ }
174
+
175
+ .sd-input__hint,
176
+ .sd-input__message {
177
+ font-size: 1.4rem;
178
+ margin: 0.8rem 0;
179
+ }
180
+
181
+ .sd-input__hint {
182
+ color: hsla(0, 0%, 27%, 1);
183
+ }
184
+ }
185
+
186
+ .form-label {
187
+ font-size: 1.2rem;
188
+ font-weight: 500;
189
+
190
+ &.form-label--light {
191
+ color: hsla(0, 0%, 32%, 1);
192
+ }
193
+ }
194
+
195
+ .navbtn {
196
+ color: #111;
197
+
198
+ [class^="icon-"],
199
+ [class*=" icon-"] {
200
+ color: currentColor;
201
+ }
202
+ }
203
+
204
+ .dropdown__menu-label {
205
+ font-size: 1.2rem;
206
+ color: hsla(0, 0%, 35%, 1);
207
+ }
208
+
209
+ .dropdown__toggle:active,
210
+ .dropdown.open .dropdown__toggle {
211
+ color: var(--color-accessible-primary);
212
+ }
213
+
214
+ .dropdown__menu li a:not(.btn),
215
+ .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
216
+ .dropdown__menu .dropdown__menu-item a:not(.btn),
217
+ .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
218
+ font-size: 1.5rem;
219
+ font-weight: 500;
220
+ color: currentColor;
221
+ }
222
+
223
+ .dropdown__menu li a:not(.btn):hover,
224
+ .dropdown__menu li a:not(.btn):focus,
225
+ .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
226
+ .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
227
+ .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
228
+ .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
229
+ .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
230
+ .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
231
+ background: var(--color-accessible-primary);
232
+ color: $white;
233
+
234
+ >i[class^="icon-"] {
235
+ color: $white;
236
+ }
237
+ }
238
+
239
+ .dropdown.open .navbtn>i {
240
+ color: var(--color-accessible-primary);
241
+ }
242
+
243
+ .sd-text__slugline,
244
+ p.sd-text__slugline {
245
+ color: var(--color-accessible-primary) !important;
246
+ }
247
+
248
+ .toggle-box--circle .toggle-box__chevron {
249
+ background-color: hsla(0, 0%, 48%, 0.5);
250
+ height: 2rem;
251
+ width: 2rem;
252
+ }
253
+
254
+ .toggle-box__label {
255
+ font-size: 1.4rem;
256
+ color: var(--color-label-text);
257
+ font-weight: 500;
258
+ }
259
+
260
+ .sd-grid-item {
261
+ time {
262
+ color: hsla(0, 0%, 28%, 1);
263
+ font-size: 1.3rem;
264
+ font-weight: 400;
265
+ }
266
+
267
+ .sd-grid-item__slugline {
268
+ font-size: 1.2rem;
269
+ }
270
+ }
271
+
272
+ .nav-tabs {
273
+ .nav-tabs__link {
274
+ font-size: 1.6rem;
275
+ font-weight: 500;
276
+ }
277
+ }
278
+
279
+ .nav-tabs--big {
280
+ .nav-tabs__link {
281
+ font-size: 2rem;
282
+ }
283
+ }
284
+
285
+ .nav-tabs__tab--active,
286
+ .nav-tabs__tab--active:hover {
287
+ .nav-tabs__link {
288
+ border-bottom-color: var(--color-accessible-primary);
289
+ color: var(--color-accessible-text);
290
+ }
291
+ }
292
+
293
+ .side-panel.side-panel--dark-ui {
294
+ .nav-tabs__tab {
295
+ .nav-tabs__link {
296
+ border-bottom-color: transparent;
297
+ color: $white;
298
+ opacity: 0.6;
299
+ }
300
+
301
+ &:hover {
302
+ .nav-tabs__link {
303
+ border-bottom-color: hsla(0, 0%, 100%, 0.25);
304
+ opacity: 1;
305
+ }
306
+ }
307
+
308
+ &.nav-tabs__tab--active,
309
+ &.nav-tabs__tab--active:hover {
310
+ .nav-tabs__link {
311
+ border-bottom-color: hsla(240, 100%, 65%, 1);
312
+ color: $white;
313
+ opacity: 1;
314
+ }
315
+ }
316
+ }
317
+
318
+ .toggle-box__label {
319
+ color: $white;
320
+ }
321
+
322
+ .sd-line-input .sd-line-input__label {
323
+ color: $white;
324
+ opacity: 0.7;
325
+ }
326
+
327
+ a.text-link.text-link--white {
328
+ color: $white;
329
+ opacity: 0.75;
330
+
331
+ &:hover {
332
+ opacity: 1;
333
+ }
334
+ }
335
+ }
336
+
337
+ .badge {
338
+ &.badge--primary {
339
+ background-color: var(--color-accessible-primary);
340
+ }
341
+
342
+ &.badge--success {
343
+ background-color: hsla(133, 100%, 19%, 1);
344
+ }
345
+
346
+ &.badge--warning {
347
+ background-color: hsla(33, 100%, 26%, 1);
348
+ }
349
+ }
350
+
351
+ .sd-sidebar-menu__btn--active,
352
+ .sd-sidebar-menu__btn--active:hover {
353
+ background-color: var(--color-accessible-primary);
354
+
355
+ }
317
356
  }