@utahdts/utah-design-system 1.15.5 → 1.16.0
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.
- package/css/1-settings/_spacing.scss +16 -0
- package/css/6-components/_components-index.scss +1 -0
- package/css/6-components/base-components/forms/_combo-box-input.scss +5 -0
- package/css/6-components/base-components/forms/_time-input.scss +28 -0
- package/css/6-components/base-components/navigation/_menu-item.scss +35 -0
- package/css/6-components/base-components/navigation/_side-panel-navigation.scss +6 -1
- package/css/6-components/base-components/navigation/_vertical-menu.scss +45 -1
- package/dist/style.css +297 -9
- package/dist/utah-design-system.es.js +434 -86
- package/dist/utah-design-system.umd.js +433 -85
- package/index.js +2 -0
- package/package.json +12 -12
- package/react/components/forms/ComboBox/ComboBox.jsx +9 -5
- package/react/components/forms/ComboBox/ComboBoxOption.jsx +10 -0
- package/react/components/forms/ComboBox/context/ComboBoxContextProvider.jsx +10 -0
- package/react/components/forms/ComboBox/internal/CombBoxListBox.jsx +6 -4
- package/react/components/forms/ComboBox/internal/ComboBoxTextInput.jsx +11 -1
- package/react/components/forms/FormContext/useFormContextInputValue.js +4 -1
- package/react/components/forms/MultiSelect/MultiSelect.jsx +6 -0
- package/react/components/forms/MultiSelect/MultiSelectComboBox.jsx +6 -0
- package/react/components/forms/PlainText.jsx +7 -2
- package/react/components/forms/Select.jsx +3 -3
- package/react/components/forms/TextArea.jsx +3 -3
- package/react/components/forms/TextInput.jsx +3 -3
- package/react/components/forms/TimeInput.jsx +166 -0
- package/react/components/navigation/HorizontalMenu.jsx +2 -2
- package/react/components/navigation/VerticalMenu.jsx +45 -8
- package/react/components/navigation/items/MenuItemFlyout.jsx +119 -0
- package/react/components/navigation/{MenuItem.jsx → items/MenuItemInline.jsx} +24 -8
- package/react/components/navigation/items/MenuItemPlain.jsx +63 -0
- package/react/enums/menuTypes.js +7 -0
- package/react/hooks/useDebounceFunc.js +1 -1
- package/react/hooks/useGlobalKeyEvent.js +1 -1
|
@@ -75,6 +75,22 @@
|
|
|
75
75
|
.px-spacing-l { padding-left: var(--spacing-l); padding-right: var(--spacing-l); }
|
|
76
76
|
.py-spacing-l { padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); }
|
|
77
77
|
|
|
78
|
+
.p-spacing-s { padding: var(--spacing-s); }
|
|
79
|
+
.pt-spacing-s { padding-top: var(--spacing-s); }
|
|
80
|
+
.pr-spacing-s { padding-right: var(--spacing-s); }
|
|
81
|
+
.pb-spacing-s { padding-bottom: var(--spacing-s); }
|
|
82
|
+
.pl-spacing-s { padding-left: var(--spacing-s); }
|
|
83
|
+
.px-spacing-s { padding-left: var(--spacing-s); padding-right: var(--spacing-s); }
|
|
84
|
+
.py-spacing-s { padding-top: var(--spacing-s); padding-bottom: var(--spacing-s); }
|
|
85
|
+
|
|
86
|
+
.p-spacing-xs { padding: var(--spacing-xs); }
|
|
87
|
+
.pt-spacing-xs { padding-top: var(--spacing-xs); }
|
|
88
|
+
.pr-spacing-xs { padding-right: var(--spacing-xs); }
|
|
89
|
+
.pb-spacing-xs { padding-bottom: var(--spacing-xs); }
|
|
90
|
+
.pl-spacing-xs { padding-left: var(--spacing-xs); }
|
|
91
|
+
.px-spacing-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
|
|
92
|
+
.py-spacing-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
|
|
93
|
+
|
|
78
94
|
.m-auto { margin: auto }
|
|
79
95
|
.mt-auto { margin-top: auto }
|
|
80
96
|
.mr-auto { margin-right: auto }
|
|
@@ -20,6 +20,7 @@ component specific, BEM (Block, Element, Modifier)
|
|
|
20
20
|
@use "base-components/forms/multi-select-input";
|
|
21
21
|
@use "base-components/forms/date-input";
|
|
22
22
|
@use "base-components/forms/calendar-input";
|
|
23
|
+
@use "base-components/forms/time-input";
|
|
23
24
|
@use "base-components/forms/character-count";
|
|
24
25
|
@use "base-components/forms/checkbox";
|
|
25
26
|
@use "base-components/forms/select-input";
|
|
@@ -22,6 +22,9 @@
|
|
|
22
22
|
&--is-disabled {
|
|
23
23
|
color: var(--form-ele-disabled-color);
|
|
24
24
|
}
|
|
25
|
+
&[disabled]:active {
|
|
26
|
+
transform: translateY(-50%);
|
|
27
|
+
}
|
|
25
28
|
}
|
|
26
29
|
&__inner-wrapper {
|
|
27
30
|
.text-input__clear-button {
|
|
@@ -43,6 +46,8 @@
|
|
|
43
46
|
margin: 0;
|
|
44
47
|
padding: 0;
|
|
45
48
|
z-index: 2000;
|
|
49
|
+
max-height: clamp(300px, 40vh, 40vh);
|
|
50
|
+
overflow: auto;
|
|
46
51
|
}
|
|
47
52
|
&__option {
|
|
48
53
|
padding: var(--spacing-2xs) var(--spacing-s);
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@use "../../../1-settings/class-vars";
|
|
2
|
+
|
|
3
|
+
#{class-vars.$base-class} {
|
|
4
|
+
.time-input {
|
|
5
|
+
&__wrapper {
|
|
6
|
+
[class*="utds-icon-before-clock"]::before {
|
|
7
|
+
font-size: 1.1rem;
|
|
8
|
+
}
|
|
9
|
+
input[type=text].text-input--clear-icon-visible {
|
|
10
|
+
padding: 0 var(--spacing-4xl) 0 var(--spacing-xs);
|
|
11
|
+
}
|
|
12
|
+
.text-input__clear-button {
|
|
13
|
+
right: var(--spacing-xl);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
&__clock-icon {
|
|
17
|
+
&--static {
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: 50%;
|
|
20
|
+
transform: translateY(-50%);
|
|
21
|
+
right: 8px;
|
|
22
|
+
}
|
|
23
|
+
&--is-disabled {
|
|
24
|
+
color: var(--form-ele-disabled-color);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -43,5 +43,40 @@
|
|
|
43
43
|
display: block;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
+
|
|
47
|
+
&__plain {
|
|
48
|
+
.menu-item__title {
|
|
49
|
+
a[href] {
|
|
50
|
+
border-radius: var(--radius-circle);
|
|
51
|
+
border: none;
|
|
52
|
+
box-shadow: none;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
color: var(--gray-color);
|
|
55
|
+
display: flex;
|
|
56
|
+
font-size: var(--font-size-xs);
|
|
57
|
+
justify-content: flex-start;
|
|
58
|
+
line-height: 1.7;
|
|
59
|
+
margin: 0;
|
|
60
|
+
min-height: unset;
|
|
61
|
+
padding: var(--spacing-2xs) var(--spacing);
|
|
62
|
+
text-align: left;
|
|
63
|
+
text-decoration: none;
|
|
64
|
+
width: 100%;
|
|
65
|
+
position: relative;
|
|
66
|
+
|
|
67
|
+
&:hover {
|
|
68
|
+
background: var(--hover-gray-color);
|
|
69
|
+
color: var(--primary-color);
|
|
70
|
+
box-shadow: none;
|
|
71
|
+
}
|
|
72
|
+
&:active {
|
|
73
|
+
transform: none;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
&-blank {
|
|
77
|
+
font-size: var(--font-size-xs);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
46
81
|
}
|
|
47
82
|
}
|
|
@@ -27,11 +27,12 @@
|
|
|
27
27
|
}
|
|
28
28
|
.menu-item {
|
|
29
29
|
&__title {
|
|
30
|
-
a {
|
|
30
|
+
a[href].menu-item__link-title {
|
|
31
31
|
flex: 1 0 auto;
|
|
32
32
|
max-width: 100%;
|
|
33
33
|
box-sizing: border-box;
|
|
34
34
|
padding: var(--spacing-2xs) var(--spacing);
|
|
35
|
+
margin: 0;
|
|
35
36
|
display: block;
|
|
36
37
|
border-radius: var(--radius-circle);
|
|
37
38
|
position: relative;
|
|
@@ -59,6 +60,10 @@
|
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
}
|
|
63
|
+
|
|
64
|
+
&-blank {
|
|
65
|
+
padding: var(--spacing-2xs) var(--spacing);
|
|
66
|
+
}
|
|
62
67
|
}
|
|
63
68
|
|
|
64
69
|
button {
|
|
@@ -8,12 +8,40 @@
|
|
|
8
8
|
padding: 0;
|
|
9
9
|
}
|
|
10
10
|
.vertical-menu {
|
|
11
|
+
font-size: var(--font-size-xs);
|
|
12
|
+
|
|
13
|
+
&__header {
|
|
14
|
+
font-size: var(--font-size);
|
|
15
|
+
|
|
16
|
+
& + ul {
|
|
17
|
+
margin-left: calc(0px - var(--spacing));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
11
20
|
li > ul {
|
|
12
21
|
margin-left: var(--spacing-s);
|
|
13
22
|
}
|
|
14
23
|
|
|
24
|
+
&__title {
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: row;
|
|
27
|
+
align-items: center;
|
|
28
|
+
|
|
29
|
+
.menu-item__chevron {
|
|
30
|
+
min-height: unset;
|
|
31
|
+
min-width: unset;
|
|
32
|
+
padding: var(--spacing-xs);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&__plain {
|
|
36
|
+
margin: var(--spacing-2xs) 0;
|
|
37
|
+
padding: var(--spacing-2xs) var(--spacing);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
15
41
|
button.vertical-menu__button-title,
|
|
16
|
-
a[href].vertical-menu__link-title
|
|
42
|
+
a[href].vertical-menu__link-title,
|
|
43
|
+
button.menu-item__button-title,
|
|
44
|
+
a[href].menu-item__link-title,{
|
|
17
45
|
border-radius: var(--radius-circle);
|
|
18
46
|
border: none;
|
|
19
47
|
box-shadow: none;
|
|
@@ -77,6 +105,22 @@
|
|
|
77
105
|
transform: rotate(90deg);
|
|
78
106
|
}
|
|
79
107
|
}
|
|
108
|
+
|
|
109
|
+
.flyout-menu {
|
|
110
|
+
padding: 0;
|
|
111
|
+
|
|
112
|
+
& > ul > li {
|
|
113
|
+
padding: 0 var(--spacing-s);
|
|
114
|
+
|
|
115
|
+
&:first-child {
|
|
116
|
+
padding-top: var(--spacing-s);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&:last-child {
|
|
120
|
+
padding-bottom: var(--spacing-s);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
80
124
|
}
|
|
81
125
|
|
|
82
126
|
.menu-item--mega-menu {
|
package/dist/style.css
CHANGED
|
@@ -210,6 +210,52 @@ variables and settings
|
|
|
210
210
|
padding-top: var(--spacing-l);
|
|
211
211
|
padding-bottom: var(--spacing-l);
|
|
212
212
|
}
|
|
213
|
+
.utah-design-system .p-spacing-s {
|
|
214
|
+
padding: var(--spacing-s);
|
|
215
|
+
}
|
|
216
|
+
.utah-design-system .pt-spacing-s {
|
|
217
|
+
padding-top: var(--spacing-s);
|
|
218
|
+
}
|
|
219
|
+
.utah-design-system .pr-spacing-s {
|
|
220
|
+
padding-right: var(--spacing-s);
|
|
221
|
+
}
|
|
222
|
+
.utah-design-system .pb-spacing-s {
|
|
223
|
+
padding-bottom: var(--spacing-s);
|
|
224
|
+
}
|
|
225
|
+
.utah-design-system .pl-spacing-s {
|
|
226
|
+
padding-left: var(--spacing-s);
|
|
227
|
+
}
|
|
228
|
+
.utah-design-system .px-spacing-s {
|
|
229
|
+
padding-left: var(--spacing-s);
|
|
230
|
+
padding-right: var(--spacing-s);
|
|
231
|
+
}
|
|
232
|
+
.utah-design-system .py-spacing-s {
|
|
233
|
+
padding-top: var(--spacing-s);
|
|
234
|
+
padding-bottom: var(--spacing-s);
|
|
235
|
+
}
|
|
236
|
+
.utah-design-system .p-spacing-xs {
|
|
237
|
+
padding: var(--spacing-xs);
|
|
238
|
+
}
|
|
239
|
+
.utah-design-system .pt-spacing-xs {
|
|
240
|
+
padding-top: var(--spacing-xs);
|
|
241
|
+
}
|
|
242
|
+
.utah-design-system .pr-spacing-xs {
|
|
243
|
+
padding-right: var(--spacing-xs);
|
|
244
|
+
}
|
|
245
|
+
.utah-design-system .pb-spacing-xs {
|
|
246
|
+
padding-bottom: var(--spacing-xs);
|
|
247
|
+
}
|
|
248
|
+
.utah-design-system .pl-spacing-xs {
|
|
249
|
+
padding-left: var(--spacing-xs);
|
|
250
|
+
}
|
|
251
|
+
.utah-design-system .px-spacing-xs {
|
|
252
|
+
padding-left: var(--spacing-xs);
|
|
253
|
+
padding-right: var(--spacing-xs);
|
|
254
|
+
}
|
|
255
|
+
.utah-design-system .py-spacing-xs {
|
|
256
|
+
padding-top: var(--spacing-xs);
|
|
257
|
+
padding-bottom: var(--spacing-xs);
|
|
258
|
+
}
|
|
213
259
|
.utah-design-system .m-auto {
|
|
214
260
|
margin: auto;
|
|
215
261
|
}
|
|
@@ -1021,6 +1067,66 @@ variables and settings
|
|
|
1021
1067
|
padding-bottom: var(--spacing-l);
|
|
1022
1068
|
}
|
|
1023
1069
|
|
|
1070
|
+
.utah-design-system .p-spacing-s {
|
|
1071
|
+
padding: var(--spacing-s);
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
.utah-design-system .pt-spacing-s {
|
|
1075
|
+
padding-top: var(--spacing-s);
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
.utah-design-system .pr-spacing-s {
|
|
1079
|
+
padding-right: var(--spacing-s);
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
.utah-design-system .pb-spacing-s {
|
|
1083
|
+
padding-bottom: var(--spacing-s);
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
.utah-design-system .pl-spacing-s {
|
|
1087
|
+
padding-left: var(--spacing-s);
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
.utah-design-system .px-spacing-s {
|
|
1091
|
+
padding-left: var(--spacing-s);
|
|
1092
|
+
padding-right: var(--spacing-s);
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
.utah-design-system .py-spacing-s {
|
|
1096
|
+
padding-top: var(--spacing-s);
|
|
1097
|
+
padding-bottom: var(--spacing-s);
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
.utah-design-system .p-spacing-xs {
|
|
1101
|
+
padding: var(--spacing-xs);
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
.utah-design-system .pt-spacing-xs {
|
|
1105
|
+
padding-top: var(--spacing-xs);
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
.utah-design-system .pr-spacing-xs {
|
|
1109
|
+
padding-right: var(--spacing-xs);
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
.utah-design-system .pb-spacing-xs {
|
|
1113
|
+
padding-bottom: var(--spacing-xs);
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
.utah-design-system .pl-spacing-xs {
|
|
1117
|
+
padding-left: var(--spacing-xs);
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
.utah-design-system .px-spacing-xs {
|
|
1121
|
+
padding-left: var(--spacing-xs);
|
|
1122
|
+
padding-right: var(--spacing-xs);
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
.utah-design-system .py-spacing-xs {
|
|
1126
|
+
padding-top: var(--spacing-xs);
|
|
1127
|
+
padding-bottom: var(--spacing-xs);
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1024
1130
|
.utah-design-system .m-auto {
|
|
1025
1131
|
margin: auto;
|
|
1026
1132
|
}
|
|
@@ -3304,6 +3410,10 @@ base color swatches for the design system
|
|
|
3304
3410
|
color: var(--form-ele-disabled-color);
|
|
3305
3411
|
}
|
|
3306
3412
|
|
|
3413
|
+
.utah-design-system .combo-box-input__chevron[disabled]:active {
|
|
3414
|
+
transform: translateY(-50%);
|
|
3415
|
+
}
|
|
3416
|
+
|
|
3307
3417
|
.utah-design-system .combo-box-input__inner-wrapper .text-input__clear-button {
|
|
3308
3418
|
right: var(--spacing-xl);
|
|
3309
3419
|
}
|
|
@@ -3325,6 +3435,8 @@ base color swatches for the design system
|
|
|
3325
3435
|
margin: 0;
|
|
3326
3436
|
padding: 0;
|
|
3327
3437
|
z-index: 2000;
|
|
3438
|
+
max-height: clamp(300px, 40vh, 40vh);
|
|
3439
|
+
overflow: auto;
|
|
3328
3440
|
}
|
|
3329
3441
|
|
|
3330
3442
|
.utah-design-system .combo-box-input__option {
|
|
@@ -3638,6 +3750,29 @@ base color swatches for the design system
|
|
|
3638
3750
|
border-bottom: 0;
|
|
3639
3751
|
}
|
|
3640
3752
|
|
|
3753
|
+
.utah-design-system .time-input__wrapper [class*=utds-icon-before-clock]::before {
|
|
3754
|
+
font-size: 1.1rem;
|
|
3755
|
+
}
|
|
3756
|
+
|
|
3757
|
+
.utah-design-system .time-input__wrapper input[type=text].text-input--clear-icon-visible {
|
|
3758
|
+
padding: 0 var(--spacing-4xl) 0 var(--spacing-xs);
|
|
3759
|
+
}
|
|
3760
|
+
|
|
3761
|
+
.utah-design-system .time-input__wrapper .text-input__clear-button {
|
|
3762
|
+
right: var(--spacing-xl);
|
|
3763
|
+
}
|
|
3764
|
+
|
|
3765
|
+
.utah-design-system .time-input__clock-icon--static {
|
|
3766
|
+
position: absolute;
|
|
3767
|
+
top: 50%;
|
|
3768
|
+
transform: translateY(-50%);
|
|
3769
|
+
right: 8px;
|
|
3770
|
+
}
|
|
3771
|
+
|
|
3772
|
+
.utah-design-system .time-input__clock-icon--is-disabled {
|
|
3773
|
+
color: var(--form-ele-disabled-color);
|
|
3774
|
+
}
|
|
3775
|
+
|
|
3641
3776
|
.character-count {
|
|
3642
3777
|
text-align: right;
|
|
3643
3778
|
font-size: var(--font-size-s);
|
|
@@ -4333,6 +4468,39 @@ base color swatches for the design system
|
|
|
4333
4468
|
display: block;
|
|
4334
4469
|
}
|
|
4335
4470
|
|
|
4471
|
+
.utah-design-system .menu-item__plain .menu-item__title a[href] {
|
|
4472
|
+
border-radius: var(--radius-circle);
|
|
4473
|
+
border: none;
|
|
4474
|
+
box-shadow: none;
|
|
4475
|
+
box-sizing: border-box;
|
|
4476
|
+
color: var(--gray-color);
|
|
4477
|
+
display: flex;
|
|
4478
|
+
font-size: var(--font-size-xs);
|
|
4479
|
+
justify-content: flex-start;
|
|
4480
|
+
line-height: 1.7;
|
|
4481
|
+
margin: 0;
|
|
4482
|
+
min-height: unset;
|
|
4483
|
+
padding: var(--spacing-2xs) var(--spacing);
|
|
4484
|
+
text-align: left;
|
|
4485
|
+
text-decoration: none;
|
|
4486
|
+
width: 100%;
|
|
4487
|
+
position: relative;
|
|
4488
|
+
}
|
|
4489
|
+
|
|
4490
|
+
.utah-design-system .menu-item__plain .menu-item__title a[href]:hover {
|
|
4491
|
+
background: var(--hover-gray-color);
|
|
4492
|
+
color: var(--primary-color);
|
|
4493
|
+
box-shadow: none;
|
|
4494
|
+
}
|
|
4495
|
+
|
|
4496
|
+
.utah-design-system .menu-item__plain .menu-item__title a[href]:active {
|
|
4497
|
+
transform: none;
|
|
4498
|
+
}
|
|
4499
|
+
|
|
4500
|
+
.utah-design-system .menu-item__plain .menu-item__title-blank {
|
|
4501
|
+
font-size: var(--font-size-xs);
|
|
4502
|
+
}
|
|
4503
|
+
|
|
4336
4504
|
.utah-design-system .pagination ul {
|
|
4337
4505
|
display: flex;
|
|
4338
4506
|
list-style-type: none;
|
|
@@ -4434,30 +4602,31 @@ Media Sizes - SCSS Variables
|
|
|
4434
4602
|
margin-left: var(--spacing);
|
|
4435
4603
|
}
|
|
4436
4604
|
|
|
4437
|
-
.utah-design-system .menu-side-panel .menu-item__title a {
|
|
4605
|
+
.utah-design-system .menu-side-panel .menu-item__title a[href].menu-item__link-title {
|
|
4438
4606
|
flex: 1 0 auto;
|
|
4439
4607
|
max-width: 100%;
|
|
4440
4608
|
box-sizing: border-box;
|
|
4441
4609
|
padding: var(--spacing-2xs) var(--spacing);
|
|
4610
|
+
margin: 0;
|
|
4442
4611
|
display: block;
|
|
4443
4612
|
border-radius: var(--radius-circle);
|
|
4444
4613
|
position: relative;
|
|
4445
4614
|
transition: all var(--timing-quick) ease-in-out;
|
|
4446
4615
|
}
|
|
4447
4616
|
|
|
4448
|
-
.utah-design-system .menu-side-panel .menu-item__title a:hover {
|
|
4617
|
+
.utah-design-system .menu-side-panel .menu-item__title a[href].menu-item__link-title:hover {
|
|
4449
4618
|
box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
|
|
4450
4619
|
color: var(--primary-color);
|
|
4451
4620
|
}
|
|
4452
4621
|
|
|
4453
|
-
.utah-design-system .menu-side-panel .menu-item__title a.menu-item--selected {
|
|
4622
|
+
.utah-design-system .menu-side-panel .menu-item__title a[href].menu-item__link-title.menu-item--selected {
|
|
4454
4623
|
font-weight: bold;
|
|
4455
4624
|
border-top-left-radius: 0;
|
|
4456
4625
|
border-bottom-left-radius: 0;
|
|
4457
4626
|
box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
|
|
4458
4627
|
}
|
|
4459
4628
|
|
|
4460
|
-
.utah-design-system .menu-side-panel .menu-item__title a.menu-item--selected::after {
|
|
4629
|
+
.utah-design-system .menu-side-panel .menu-item__title a[href].menu-item__link-title.menu-item--selected::after {
|
|
4461
4630
|
content: "";
|
|
4462
4631
|
position: absolute;
|
|
4463
4632
|
left: -3px;
|
|
@@ -4468,6 +4637,10 @@ Media Sizes - SCSS Variables
|
|
|
4468
4637
|
border-radius: var(--radius-circle);
|
|
4469
4638
|
}
|
|
4470
4639
|
|
|
4640
|
+
.utah-design-system .menu-side-panel .menu-item__title-blank {
|
|
4641
|
+
padding: var(--spacing-2xs) var(--spacing);
|
|
4642
|
+
}
|
|
4643
|
+
|
|
4471
4644
|
.utah-design-system .menu-side-panel .menu-item button {
|
|
4472
4645
|
min-height: unset;
|
|
4473
4646
|
min-width: unset;
|
|
@@ -4537,12 +4710,43 @@ Media Sizes - SCSS Variables
|
|
|
4537
4710
|
padding: 0;
|
|
4538
4711
|
}
|
|
4539
4712
|
|
|
4713
|
+
.utah-design-system .vertical-menu {
|
|
4714
|
+
font-size: var(--font-size-xs);
|
|
4715
|
+
}
|
|
4716
|
+
|
|
4717
|
+
.utah-design-system .vertical-menu__header {
|
|
4718
|
+
font-size: var(--font-size);
|
|
4719
|
+
}
|
|
4720
|
+
|
|
4721
|
+
.utah-design-system .vertical-menu__header + ul {
|
|
4722
|
+
margin-left: calc(0px - var(--spacing));
|
|
4723
|
+
}
|
|
4724
|
+
|
|
4540
4725
|
.utah-design-system .vertical-menu li > ul {
|
|
4541
4726
|
margin-left: var(--spacing-s);
|
|
4542
4727
|
}
|
|
4543
4728
|
|
|
4729
|
+
.utah-design-system .vertical-menu__title {
|
|
4730
|
+
display: flex;
|
|
4731
|
+
flex-direction: row;
|
|
4732
|
+
align-items: center;
|
|
4733
|
+
}
|
|
4734
|
+
|
|
4735
|
+
.utah-design-system .vertical-menu__title .menu-item__chevron {
|
|
4736
|
+
min-height: unset;
|
|
4737
|
+
min-width: unset;
|
|
4738
|
+
padding: var(--spacing-xs);
|
|
4739
|
+
}
|
|
4740
|
+
|
|
4741
|
+
.utah-design-system .vertical-menu__title__plain {
|
|
4742
|
+
margin: var(--spacing-2xs) 0;
|
|
4743
|
+
padding: var(--spacing-2xs) var(--spacing);
|
|
4744
|
+
}
|
|
4745
|
+
|
|
4544
4746
|
.utah-design-system .vertical-menu button.vertical-menu__button-title,
|
|
4545
|
-
.utah-design-system .vertical-menu a[href].vertical-menu__link-title
|
|
4747
|
+
.utah-design-system .vertical-menu a[href].vertical-menu__link-title,
|
|
4748
|
+
.utah-design-system .vertical-menu button.menu-item__button-title,
|
|
4749
|
+
.utah-design-system .vertical-menu a[href].menu-item__link-title {
|
|
4546
4750
|
border-radius: var(--radius-circle);
|
|
4547
4751
|
border: none;
|
|
4548
4752
|
box-shadow: none;
|
|
@@ -4562,24 +4766,32 @@ Media Sizes - SCSS Variables
|
|
|
4562
4766
|
}
|
|
4563
4767
|
|
|
4564
4768
|
.utah-design-system .vertical-menu button.vertical-menu__button-title:hover,
|
|
4565
|
-
.utah-design-system .vertical-menu a[href].vertical-menu__link-title:hover
|
|
4769
|
+
.utah-design-system .vertical-menu a[href].vertical-menu__link-title:hover,
|
|
4770
|
+
.utah-design-system .vertical-menu button.menu-item__button-title:hover,
|
|
4771
|
+
.utah-design-system .vertical-menu a[href].menu-item__link-title:hover {
|
|
4566
4772
|
background: var(--hover-gray-color);
|
|
4567
4773
|
color: var(--primary-color);
|
|
4568
4774
|
box-shadow: none;
|
|
4569
4775
|
}
|
|
4570
4776
|
|
|
4571
4777
|
.utah-design-system .vertical-menu button.vertical-menu__button-title:active,
|
|
4572
|
-
.utah-design-system .vertical-menu a[href].vertical-menu__link-title:active
|
|
4778
|
+
.utah-design-system .vertical-menu a[href].vertical-menu__link-title:active,
|
|
4779
|
+
.utah-design-system .vertical-menu button.menu-item__button-title:active,
|
|
4780
|
+
.utah-design-system .vertical-menu a[href].menu-item__link-title:active {
|
|
4573
4781
|
transform: none;
|
|
4574
4782
|
}
|
|
4575
4783
|
|
|
4576
4784
|
.utah-design-system .vertical-menu button.vertical-menu__button-title.menu-item--selected_parent,
|
|
4577
|
-
.utah-design-system .vertical-menu a[href].vertical-menu__link-title.menu-item--selected_parent
|
|
4785
|
+
.utah-design-system .vertical-menu a[href].vertical-menu__link-title.menu-item--selected_parent,
|
|
4786
|
+
.utah-design-system .vertical-menu button.menu-item__button-title.menu-item--selected_parent,
|
|
4787
|
+
.utah-design-system .vertical-menu a[href].menu-item__link-title.menu-item--selected_parent {
|
|
4578
4788
|
font-weight: bold;
|
|
4579
4789
|
}
|
|
4580
4790
|
|
|
4581
4791
|
.utah-design-system .vertical-menu button.vertical-menu__button-title.menu-item--selected,
|
|
4582
|
-
.utah-design-system .vertical-menu a[href].vertical-menu__link-title.menu-item--selected
|
|
4792
|
+
.utah-design-system .vertical-menu a[href].vertical-menu__link-title.menu-item--selected,
|
|
4793
|
+
.utah-design-system .vertical-menu button.menu-item__button-title.menu-item--selected,
|
|
4794
|
+
.utah-design-system .vertical-menu a[href].menu-item__link-title.menu-item--selected {
|
|
4583
4795
|
font-weight: bold;
|
|
4584
4796
|
box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
|
|
4585
4797
|
color: var(--primary-color);
|
|
@@ -4617,6 +4829,22 @@ Media Sizes - SCSS Variables
|
|
|
4617
4829
|
transform: rotate(90deg);
|
|
4618
4830
|
}
|
|
4619
4831
|
|
|
4832
|
+
.utah-design-system .vertical-menu .flyout-menu {
|
|
4833
|
+
padding: 0;
|
|
4834
|
+
}
|
|
4835
|
+
|
|
4836
|
+
.utah-design-system .vertical-menu .flyout-menu > ul > li {
|
|
4837
|
+
padding: 0 var(--spacing-s);
|
|
4838
|
+
}
|
|
4839
|
+
|
|
4840
|
+
.utah-design-system .vertical-menu .flyout-menu > ul > li:first-child {
|
|
4841
|
+
padding-top: var(--spacing-s);
|
|
4842
|
+
}
|
|
4843
|
+
|
|
4844
|
+
.utah-design-system .vertical-menu .flyout-menu > ul > li:last-child {
|
|
4845
|
+
padding-bottom: var(--spacing-s);
|
|
4846
|
+
}
|
|
4847
|
+
|
|
4620
4848
|
.utah-design-system .menu-item--mega-menu .vertical-menu li > ul {
|
|
4621
4849
|
margin-left: 0;
|
|
4622
4850
|
}
|
|
@@ -4898,6 +5126,66 @@ variables and settings
|
|
|
4898
5126
|
padding-bottom: var(--spacing-l);
|
|
4899
5127
|
}
|
|
4900
5128
|
|
|
5129
|
+
.utah-design-system .p-spacing-s {
|
|
5130
|
+
padding: var(--spacing-s);
|
|
5131
|
+
}
|
|
5132
|
+
|
|
5133
|
+
.utah-design-system .pt-spacing-s {
|
|
5134
|
+
padding-top: var(--spacing-s);
|
|
5135
|
+
}
|
|
5136
|
+
|
|
5137
|
+
.utah-design-system .pr-spacing-s {
|
|
5138
|
+
padding-right: var(--spacing-s);
|
|
5139
|
+
}
|
|
5140
|
+
|
|
5141
|
+
.utah-design-system .pb-spacing-s {
|
|
5142
|
+
padding-bottom: var(--spacing-s);
|
|
5143
|
+
}
|
|
5144
|
+
|
|
5145
|
+
.utah-design-system .pl-spacing-s {
|
|
5146
|
+
padding-left: var(--spacing-s);
|
|
5147
|
+
}
|
|
5148
|
+
|
|
5149
|
+
.utah-design-system .px-spacing-s {
|
|
5150
|
+
padding-left: var(--spacing-s);
|
|
5151
|
+
padding-right: var(--spacing-s);
|
|
5152
|
+
}
|
|
5153
|
+
|
|
5154
|
+
.utah-design-system .py-spacing-s {
|
|
5155
|
+
padding-top: var(--spacing-s);
|
|
5156
|
+
padding-bottom: var(--spacing-s);
|
|
5157
|
+
}
|
|
5158
|
+
|
|
5159
|
+
.utah-design-system .p-spacing-xs {
|
|
5160
|
+
padding: var(--spacing-xs);
|
|
5161
|
+
}
|
|
5162
|
+
|
|
5163
|
+
.utah-design-system .pt-spacing-xs {
|
|
5164
|
+
padding-top: var(--spacing-xs);
|
|
5165
|
+
}
|
|
5166
|
+
|
|
5167
|
+
.utah-design-system .pr-spacing-xs {
|
|
5168
|
+
padding-right: var(--spacing-xs);
|
|
5169
|
+
}
|
|
5170
|
+
|
|
5171
|
+
.utah-design-system .pb-spacing-xs {
|
|
5172
|
+
padding-bottom: var(--spacing-xs);
|
|
5173
|
+
}
|
|
5174
|
+
|
|
5175
|
+
.utah-design-system .pl-spacing-xs {
|
|
5176
|
+
padding-left: var(--spacing-xs);
|
|
5177
|
+
}
|
|
5178
|
+
|
|
5179
|
+
.utah-design-system .px-spacing-xs {
|
|
5180
|
+
padding-left: var(--spacing-xs);
|
|
5181
|
+
padding-right: var(--spacing-xs);
|
|
5182
|
+
}
|
|
5183
|
+
|
|
5184
|
+
.utah-design-system .py-spacing-xs {
|
|
5185
|
+
padding-top: var(--spacing-xs);
|
|
5186
|
+
padding-bottom: var(--spacing-xs);
|
|
5187
|
+
}
|
|
5188
|
+
|
|
4901
5189
|
.utah-design-system .m-auto {
|
|
4902
5190
|
margin: auto;
|
|
4903
5191
|
}
|