@linzjs/lui 21.44.5-1 → 21.45.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/CHANGELOG.md +7 -0
- package/dist/assets/icons/c_report.svg +1 -0
- package/dist/assets/svg-content.d.ts +1 -1
- package/dist/assets/svg-content.tsx +9 -0
- package/dist/index.js +7 -3
- package/dist/index.js.map +1 -1
- package/dist/lui.css +149 -6
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +7 -3
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/ContextMenu/context-menu.scss +7 -4
- package/dist/scss/Components/ExpandingSection/expanding-section.scss +4 -4
- package/dist/scss/Components/Footer/footer.scss +6 -2
- package/dist/scss/Components/Header/header.scss +5 -5
- package/dist/scss/Components/HeaderV2/header-v2.scss +7 -5
- package/dist/scss/Components/HelpSection/help-section.scss +8 -6
- package/dist/scss/Components/LOLCommonMenu/LOLAuthorisedLink.scss +2 -2
- package/dist/scss/Components/LOLCommonMenu/LOLDrawerMenu.scss +3 -3
- package/dist/scss/Components/LOLCommonMenu/LOLFirmSwitcherMenu.scss +2 -1
- package/dist/scss/Components/LuiErrorPage/LuiErrorPage.scss +1 -1
- package/dist/scss/Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss +3 -3
- package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss +2 -2
- package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss +4 -6
- package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss +1 -0
- package/dist/scss/Components/LuiLoadingSpinner/LuiLoadingSpinner.scss +6 -4
- package/dist/scss/Components/LuiMultiSwitch/LuiMultiSwitch.scss +2 -2
- package/dist/scss/Components/LuiSearchInput/LuiSearchInput.scss +5 -1
- package/dist/scss/Components/LuiShadow/LuiShadow.scss +2 -0
- package/dist/scss/Components/LuiSplitButton/LuiSplitButton.scss +7 -6
- package/dist/scss/Components/LuiTabs/LuiTab/LuiTab.scss +7 -6
- package/dist/scss/Components/Menu/menu.scss +4 -4
- package/dist/scss/Components/MenuV2/menu-v2.scss +5 -5
- package/dist/scss/Components/Messaging/messaging.scss +6 -5
- package/dist/scss/Components/Modal/modal.scss +11 -11
- package/dist/scss/Components/Notifications/notifications.scss +4 -4
- package/dist/scss/Elements/Buttons/buttons.scss +8 -6
- package/dist/scss/Elements/Forms/FormComponents/Inputs.scss +7 -5
- package/dist/scss/Elements/Forms/FormComponents/RadiosCheckboxes.scss +7 -6
- package/dist/scss/Elements/Tables/tables.scss +6 -5
- package/dist/scss/Elements/Tooltips/tippy.scss +3 -3
- package/dist/scss/Foundation/Utilities/Placeholder.scss +2 -2
- package/dist/scss/Global/GenericElements/Link.scss +1 -0
- package/dist/scss/Global/GenericElements/Typography.scss +15 -2
- package/dist/scss/Global/helpers.scss +5 -5
- package/dist/scss/Vendor/print.scss +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
3
|
+
@use "../../Foundation/Variables/SpacingVars.scss"as spacing;
|
|
4
|
+
@use "../../Foundation/Utilities" as *;
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Here is where we can override the styles of react-menu
|
|
@@ -71,6 +71,7 @@ li.lui-select-menuItem {
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.lui-select-menuItemText {
|
|
74
|
+
@include fonts.font-regular();
|
|
74
75
|
color: colors.$charcoal;
|
|
75
76
|
margin: 0;
|
|
76
77
|
padding-left: spacing.$unit-lg;
|
|
@@ -111,6 +112,7 @@ li.lui-select-menu-group {
|
|
|
111
112
|
div[role='menuitem'] {
|
|
112
113
|
padding: spacing.$unit-xs spacing.$unit-xs spacing.$unit-xs 2.5rem;
|
|
113
114
|
text-decoration: none;
|
|
115
|
+
@include fonts.font-regular();
|
|
114
116
|
height: 40px;
|
|
115
117
|
}
|
|
116
118
|
//overwrite the hover color
|
|
@@ -125,6 +127,7 @@ li.lui-select-menu-group {
|
|
|
125
127
|
div[role='menuitem'] {
|
|
126
128
|
padding-left: 0px;
|
|
127
129
|
text-decoration: none;
|
|
130
|
+
@include fonts.font-regular();
|
|
128
131
|
height: 40px;
|
|
129
132
|
}
|
|
130
133
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
3
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
4
|
+
@use "../../Foundation/Utilities/" as *;
|
|
5
5
|
|
|
6
6
|
.lui {
|
|
7
7
|
&-expand {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use "../../Core" as lui;
|
|
2
|
+
@use "../../Foundation/Utilities" as *;
|
|
3
3
|
|
|
4
4
|
// This builds on the NZ Govt footer SCSS which lives in a separate folder
|
|
5
5
|
|
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
h3,
|
|
52
52
|
h4 {
|
|
53
53
|
margin-top: 0;
|
|
54
|
+
@include lui.font-regular;
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
a {
|
|
@@ -194,6 +195,7 @@ $FooterCopyWriteForceLineBreak: toRem(250px);
|
|
|
194
195
|
a {
|
|
195
196
|
color: lui.$snow;
|
|
196
197
|
font-size: toRem(14px);
|
|
198
|
+
@include lui.font-regular();
|
|
197
199
|
text-decoration: none;
|
|
198
200
|
line-height: toRem(24px);
|
|
199
201
|
&:hover {
|
|
@@ -205,6 +207,7 @@ $FooterCopyWriteForceLineBreak: toRem(250px);
|
|
|
205
207
|
.luiAppFooter-copyright {
|
|
206
208
|
color: lui.$snow;
|
|
207
209
|
font-size: toRem(14px);
|
|
210
|
+
@include lui.font-regular();
|
|
208
211
|
line-height: toRem(24px);
|
|
209
212
|
opacity: 0.8;
|
|
210
213
|
margin: 0;
|
|
@@ -220,6 +223,7 @@ $FooterCopyWriteForceLineBreak: toRem(250px);
|
|
|
220
223
|
grid-row-start: 1;
|
|
221
224
|
grid-row-end: -1;
|
|
222
225
|
}
|
|
226
|
+
|
|
223
227
|
}
|
|
224
228
|
|
|
225
229
|
.luiAppFooter-linzName {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
2
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
3
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
4
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
5
|
+
@use "../../Foundation/Utilities" as *;
|
|
6
6
|
|
|
7
7
|
$headerRowHeightSm: 60px;
|
|
8
8
|
$headerRowHeightMd: 85px;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
2
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
3
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
4
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
5
|
+
@use "../../Foundation/Utilities" as *;
|
|
6
6
|
|
|
7
7
|
$headerRowHeightSmV2: 56px;
|
|
8
8
|
$headerRowHeightMdV2: 85px;
|
|
@@ -138,6 +138,7 @@ $headerElementPadding: spacing.$unit-xs;
|
|
|
138
138
|
color: colors.$white;
|
|
139
139
|
font-size: 20px;
|
|
140
140
|
line-height: 24px;
|
|
141
|
+
@include fonts.font-regular;
|
|
141
142
|
}
|
|
142
143
|
}
|
|
143
144
|
}
|
|
@@ -207,6 +208,7 @@ $headerElementPadding: spacing.$unit-xs;
|
|
|
207
208
|
text-align: center;
|
|
208
209
|
border-radius: 4px;
|
|
209
210
|
padding: 6px 6px;
|
|
211
|
+
@include fonts.font-regular;
|
|
210
212
|
font-size: 14px;
|
|
211
213
|
white-space: nowrap;
|
|
212
214
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
3
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
4
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
5
|
+
@use "../../Foundation/Utilities" as *;
|
|
6
6
|
|
|
7
7
|
.lui-help-section {
|
|
8
8
|
ol.lui-help-numbering {
|
|
@@ -13,7 +13,9 @@
|
|
|
13
13
|
counter-increment: lui-list-counter;
|
|
14
14
|
position: relative;
|
|
15
15
|
margin: spacing.$unit-xl 0 0 spacing.$unit-xl;
|
|
16
|
-
|
|
16
|
+
p:first-child {
|
|
17
|
+
@include fonts.font-regular;
|
|
18
|
+
}
|
|
17
19
|
&:before {
|
|
18
20
|
content: counter(lui-list-counter);
|
|
19
21
|
position: absolute;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
3
3
|
|
|
4
4
|
.LOLAuthorisedLink {
|
|
5
5
|
& .lui-menu-drawer-option {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
2
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
3
3
|
@use '../../Foundation/Variables/FontVars.scss' as fonts;
|
|
4
|
-
@use
|
|
4
|
+
@use "../../Foundation/Utilities" as *;
|
|
5
5
|
|
|
6
6
|
.LOLDrawerMenu {
|
|
7
7
|
display: flex;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
2
|
@use '../../Foundation/Variables/FontVars.scss' as fonts;
|
|
3
3
|
|
|
4
4
|
.LOLFirmSwitcherMenu {
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
padding: 0;
|
|
7
7
|
|
|
8
8
|
&-header {
|
|
9
|
+
@include fonts.font-regular;
|
|
9
10
|
font-size: fonts.$base-font-size;
|
|
10
11
|
line-height: 1.3;
|
|
11
12
|
text-align: right;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@use '../../../Foundation/Variables/ColorVars' as colors;
|
|
3
3
|
@use '../../../Foundation/Variables/SpacingVars' as spacing;
|
|
4
4
|
@use '../../../Foundation/Utilities/ScreenReadersOnly' as screen;
|
|
5
|
-
@use
|
|
5
|
+
@use "../../../Foundation/Utilities" as *;
|
|
6
6
|
|
|
7
7
|
.LuiRadioInput-fieldset {
|
|
8
8
|
border: none;
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
&:has(input:focus-visible):before {
|
|
75
75
|
@include focusStyle;
|
|
76
76
|
}
|
|
77
|
-
}
|
|
77
|
+
}
|
|
78
78
|
|
|
79
79
|
.LuiRadioInput--hasError {
|
|
80
80
|
.LuiRadioInput-label:before {
|
|
@@ -145,4 +145,4 @@
|
|
|
145
145
|
&:after {
|
|
146
146
|
background-color: colors.$warning;
|
|
147
147
|
}
|
|
148
|
-
}
|
|
148
|
+
}
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.LuiSelect-select {
|
|
20
|
+
@include fonts.font-regular();
|
|
20
21
|
margin-bottom: 0;
|
|
21
22
|
border: 1px solid colors.$silver;
|
|
22
23
|
border-radius: MiscVars.$borderRadius;
|
|
@@ -124,8 +125,7 @@
|
|
|
124
125
|
color: colors.$charcoal;
|
|
125
126
|
}
|
|
126
127
|
|
|
127
|
-
.LuiSelect-error-icon,
|
|
128
|
-
.LuiSelect-warning-icon {
|
|
128
|
+
.LuiSelect-error-icon, .LuiSelect-warning-icon {
|
|
129
129
|
position: absolute;
|
|
130
130
|
left: 0;
|
|
131
131
|
top: 2px;
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
position: relative;
|
|
20
20
|
|
|
21
21
|
textarea {
|
|
22
|
+
@include fonts.font-regular;
|
|
22
23
|
@include luiFluidType.fluidType--size(
|
|
23
24
|
14px,
|
|
24
25
|
16px,
|
|
@@ -52,8 +53,7 @@
|
|
|
52
53
|
display: block;
|
|
53
54
|
}
|
|
54
55
|
|
|
55
|
-
&.hasError,
|
|
56
|
-
&.hasWarning {
|
|
56
|
+
&.hasError, &.hasWarning {
|
|
57
57
|
.LuiTextAreaInput-wrapper {
|
|
58
58
|
position: relative;
|
|
59
59
|
|
|
@@ -107,8 +107,7 @@
|
|
|
107
107
|
position: relative;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
.LuiTextAreaInput-error,
|
|
111
|
-
.LuiTextAreaInput-warning {
|
|
110
|
+
.LuiTextAreaInput-error, .LuiTextAreaInput-warning {
|
|
112
111
|
position: relative;
|
|
113
112
|
display: flex;
|
|
114
113
|
@include fonts.font-semibold;
|
|
@@ -123,8 +122,7 @@
|
|
|
123
122
|
color: colors.$error;
|
|
124
123
|
}
|
|
125
124
|
|
|
126
|
-
.LuiTextAreaInput-error-icon,
|
|
127
|
-
.LuiTextAreaInput-warning-icon {
|
|
125
|
+
.LuiTextAreaInput-error-icon, .LuiTextAreaInput-warning-icon {
|
|
128
126
|
position: absolute;
|
|
129
127
|
left: 0;
|
|
130
128
|
top: 2px;
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
}
|
|
14
14
|
.LuiLoadingSpinner-SupportText-container {
|
|
15
15
|
position: absolute;
|
|
16
|
-
top:
|
|
17
|
-
bottom:
|
|
18
|
-
left:
|
|
19
|
-
right:
|
|
16
|
+
top:0;
|
|
17
|
+
bottom:0;
|
|
18
|
+
left:0;
|
|
19
|
+
right:0;
|
|
20
20
|
display: flex;
|
|
21
21
|
align-items: center;
|
|
22
22
|
justify-content: center;
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
display: flex;
|
|
26
26
|
flex-direction: column;
|
|
27
27
|
align-items: center;
|
|
28
|
+
@include fonts.font-regular;
|
|
28
29
|
color: colors.$sea;
|
|
29
30
|
width: 300px;
|
|
30
31
|
// The spinner is nested inside the supporting text version, so we remove the positioning etc
|
|
@@ -34,6 +35,7 @@
|
|
|
34
35
|
margin: 0;
|
|
35
36
|
}
|
|
36
37
|
p {
|
|
38
|
+
@include fonts.font-regular;
|
|
37
39
|
}
|
|
38
40
|
}
|
|
39
41
|
}
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
&[aria-checked='true'] {
|
|
36
36
|
background-color: lui.$sea;
|
|
37
37
|
color: white;
|
|
38
|
-
box-shadow: inset 0 3px 6px rgba(0,
|
|
39
|
-
text-shadow: 0 3px 6px rgba(0,
|
|
38
|
+
box-shadow: inset 0 3px 6px rgba(0,0,0,.4);
|
|
39
|
+
text-shadow: 0 3px 6px rgba(0,0,0,.4);
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
@@ -49,6 +49,7 @@ $input-wrapper-height-lg: 56px;
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.LuiSearchInput-input {
|
|
52
|
+
@include fonts.font-regular();
|
|
52
53
|
@include forms.formPlaceholder;
|
|
53
54
|
|
|
54
55
|
$input-height: 40px;
|
|
@@ -89,7 +90,7 @@ $input-wrapper-height-lg: 56px;
|
|
|
89
90
|
|
|
90
91
|
&-enabled {
|
|
91
92
|
svg {
|
|
92
|
-
fill: colors.$sea
|
|
93
|
+
fill: colors.$sea
|
|
93
94
|
}
|
|
94
95
|
}
|
|
95
96
|
}
|
|
@@ -124,6 +125,7 @@ $input-wrapper-height-lg: 56px;
|
|
|
124
125
|
}
|
|
125
126
|
|
|
126
127
|
.LuiSearchInput-resultEntry {
|
|
128
|
+
@include fonts.font-regular();
|
|
127
129
|
font-size: 16px;
|
|
128
130
|
cursor: pointer;
|
|
129
131
|
padding: 5px 20px;
|
|
@@ -137,6 +139,7 @@ $input-wrapper-height-lg: 56px;
|
|
|
137
139
|
}
|
|
138
140
|
|
|
139
141
|
.LuiSearchInput-resultHeader {
|
|
142
|
+
@include fonts.font-regular();
|
|
140
143
|
font-size: 14px;
|
|
141
144
|
padding: 5px 20px;
|
|
142
145
|
line-height: 18px;
|
|
@@ -145,6 +148,7 @@ $input-wrapper-height-lg: 56px;
|
|
|
145
148
|
}
|
|
146
149
|
|
|
147
150
|
.LuiSearchInput-disclaimer {
|
|
151
|
+
@include fonts.font-regular();
|
|
148
152
|
font-size: 14px;
|
|
149
153
|
padding: 5px 20px;
|
|
150
154
|
line-height: 20px;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
@use '../../Elements/Buttons/buttons.scss' as buttons;
|
|
2
2
|
@use '../../Foundation/Variables/ColorVars.scss' as colors;
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
3
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
4
|
+
@use "../../Foundation/Variables/SpacingVars.scss"as spacing;
|
|
5
5
|
@use '../../Foundation/Variables/MiscVars.scss' as misc;
|
|
6
|
-
@use
|
|
6
|
+
@use "../../Foundation/Utilities" as *;
|
|
7
7
|
|
|
8
8
|
.lui-split-button {
|
|
9
9
|
display: flex;
|
|
@@ -57,10 +57,10 @@
|
|
|
57
57
|
.lui-expand-icon {
|
|
58
58
|
color: colors.$sea;
|
|
59
59
|
}
|
|
60
|
-
border-left:
|
|
60
|
+
border-left:0;
|
|
61
61
|
}
|
|
62
62
|
&-secondary:hover {
|
|
63
|
-
border-left:
|
|
63
|
+
border-left:0;
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
}
|
|
@@ -90,11 +90,12 @@ li.lui-split-button-menuItem {
|
|
|
90
90
|
|
|
91
91
|
&:hover {
|
|
92
92
|
background-color: colors.$polar;
|
|
93
|
-
border-right: 1px solid white;
|
|
93
|
+
border-right: 1px solid white ;
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.lui-split-button-menuItemText {
|
|
98
|
+
@include fonts.font-regular();
|
|
98
99
|
color: colors.$charcoal;
|
|
99
100
|
margin: 0;
|
|
100
101
|
padding-left: spacing.$unit-lg;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use "../../../Foundation/Variables/MiscVars.scss" as misc;
|
|
2
|
+
@use "../../../Foundation/Variables/ColorVars.scss" as colors;
|
|
3
3
|
@use '../../../Foundation/Variables/FontVars.scss' as fonts;
|
|
4
4
|
@use '../../../Foundation/Variables/SpacingVars.scss' as spacing;
|
|
5
|
-
@use
|
|
5
|
+
@use "../../../Foundation/Utilities" as *;
|
|
6
6
|
|
|
7
7
|
.LuiTab {
|
|
8
8
|
background: transparent;
|
|
9
9
|
border-radius: 0;
|
|
10
10
|
color: colors.$base-type-color;
|
|
11
11
|
min-width: spacing.$unit-xxl * 2;
|
|
12
|
+
@include fonts.font-regular;
|
|
12
13
|
display: flex;
|
|
13
14
|
position: relative;
|
|
14
15
|
justify-content: center;
|
|
@@ -23,11 +24,11 @@
|
|
|
23
24
|
width: 100%;
|
|
24
25
|
}
|
|
25
26
|
&--error {
|
|
26
|
-
// Border bottom doesn't cover the grey line underneath,
|
|
27
|
+
// Border bottom doesn't cover the grey line underneath,
|
|
27
28
|
// so adding an after element to be offset by 1px to cover the line in a nice panic red.
|
|
28
29
|
&:after {
|
|
29
30
|
display: block;
|
|
30
|
-
content:
|
|
31
|
+
content: "";
|
|
31
32
|
position: absolute;
|
|
32
33
|
left: 0;
|
|
33
34
|
right: 0;
|
|
@@ -37,7 +38,7 @@
|
|
|
37
38
|
}
|
|
38
39
|
}
|
|
39
40
|
|
|
40
|
-
&:disabled
|
|
41
|
+
&:disabled{
|
|
41
42
|
cursor: not-allowed;
|
|
42
43
|
color: colors.$disabled-color;
|
|
43
44
|
background: colors.$disabled-bg-color;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
2
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
3
3
|
@use '../../Foundation/Variables/FontVars.scss' as fonts;
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
4
|
+
@use "../../Foundation/Utilities" as *;
|
|
5
|
+
@use "../Header/header.scss" as header;
|
|
6
6
|
|
|
7
7
|
@mixin menu-container {
|
|
8
8
|
text-align: left;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
2
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
3
3
|
@use '../../Foundation/Variables/FontVars.scss' as fonts;
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
6
|
-
@use
|
|
4
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
5
|
+
@use "../../Foundation/Utilities" as *;
|
|
6
|
+
@use "../HeaderV2/header-v2.scss" as header;
|
|
7
7
|
|
|
8
8
|
@mixin LuiHeaderMenuV2-drop-content {
|
|
9
9
|
text-align: left;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
2
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
3
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
4
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
5
|
+
@use "../../Foundation/Utilities" as *;
|
|
6
6
|
|
|
7
7
|
@mixin message-base-styling {
|
|
8
8
|
border-left: spacing.$unit-xl solid colors.$silver;
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
p {
|
|
17
17
|
margin: 0;
|
|
18
|
+
@include fonts.font-regular;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
h2 {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
3
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
4
|
+
@use "../../Foundation/Utilities" as *;
|
|
5
5
|
|
|
6
6
|
.lui-modal {
|
|
7
7
|
padding: spacing.$unit-lg;
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
}
|
|
48
48
|
&-header {
|
|
49
49
|
color: colors.$white;
|
|
50
|
-
|
|
50
|
+
|
|
51
51
|
&-title {
|
|
52
52
|
display: flex;
|
|
53
53
|
justify-content: space-between;
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
border-radius: 50%;
|
|
86
86
|
background-color: transparent;
|
|
87
87
|
text-align: center;
|
|
88
|
-
float: right;
|
|
88
|
+
float: right;
|
|
89
89
|
}
|
|
90
90
|
&-btn-size {
|
|
91
91
|
font-size: toRem(32px);
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
h1 {
|
|
98
98
|
color: colors.$white;
|
|
99
99
|
}
|
|
100
|
-
path
|
|
100
|
+
path{
|
|
101
101
|
fill: rgb(255 255 255 / 70%);
|
|
102
102
|
}
|
|
103
103
|
}
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
h1 {
|
|
107
107
|
color: colors.$surfie;
|
|
108
108
|
}
|
|
109
|
-
path
|
|
109
|
+
path{
|
|
110
110
|
fill: colors.$gray;
|
|
111
111
|
}
|
|
112
112
|
}
|
|
@@ -123,13 +123,13 @@
|
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
.lui-modal-header-buttons
|
|
126
|
+
.lui-modal-header-buttons{
|
|
127
127
|
padding-left: 12px;
|
|
128
128
|
display: flex;
|
|
129
|
-
button
|
|
129
|
+
button{
|
|
130
130
|
padding-left: 8px;
|
|
131
131
|
padding-right: 0px;
|
|
132
|
-
float:
|
|
132
|
+
float:none;
|
|
133
133
|
display: flex;
|
|
134
134
|
}
|
|
135
135
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
1
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
2
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
3
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
4
|
+
@use "../../Foundation/Utilities" as *;
|
|
5
5
|
|
|
6
6
|
.lui-large-feature-notification {
|
|
7
7
|
width: 100%;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use "sass:math";
|
|
2
2
|
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
6
|
-
@use
|
|
7
|
-
@use
|
|
3
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
4
|
+
@use "../../Foundation/Variables/FontVars.scss" as fonts;
|
|
5
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
6
|
+
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
7
|
+
@use "../../Foundation/Utilities" as *;
|
|
8
8
|
|
|
9
9
|
// button variables only used for this file
|
|
10
10
|
$strokeWeight: 1px;
|
|
@@ -215,6 +215,7 @@ a.lui-button {
|
|
|
215
215
|
colors.$tertiary-active-btn,
|
|
216
216
|
#fff
|
|
217
217
|
);
|
|
218
|
+
@include fonts.font-regular();
|
|
218
219
|
|
|
219
220
|
border: none;
|
|
220
221
|
margin: 2px; //account for the slightly smaller button size;
|
|
@@ -324,6 +325,7 @@ a.lui-button {
|
|
|
324
325
|
// border bottom mimics what we have for text link styling
|
|
325
326
|
//border-bottom: 1px solid;
|
|
326
327
|
text-decoration: underline;
|
|
328
|
+
@include fonts.font-regular();
|
|
327
329
|
// remove the padding and margin off the buttons - used for text only buttons
|
|
328
330
|
padding: 0;
|
|
329
331
|
margin: 0;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
@use
|
|
1
|
+
@use "../../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
|
+
@use "../../../Foundation/Variables/MiscVars.scss" as misc;
|
|
3
|
+
@use "../../../Foundation/Variables/FontVars.scss" as fonts;
|
|
4
|
+
@use "../../../Foundation/Variables/FormVars.scss" as forms;
|
|
5
|
+
@use "../../../Foundation/Utilities/" as *;
|
|
6
6
|
|
|
7
7
|
// All this is now legacy, deprecated styling.
|
|
8
8
|
// In order to access these styles, use a wrapping div with the class LuiDeprecatedForms as close to the desired form/elements as possible
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
input:not([type='checkbox']):not([type='radio']),
|
|
23
23
|
textarea,
|
|
24
24
|
select {
|
|
25
|
+
@include fonts.font-regular;
|
|
25
26
|
font-size: $my-font-size;
|
|
26
27
|
color: colors.$input-text;
|
|
27
28
|
border: forms.$input-border-width solid colors.$silver;
|
|
@@ -47,6 +48,7 @@
|
|
|
47
48
|
|
|
48
49
|
select {
|
|
49
50
|
@include appearance(none);
|
|
51
|
+
@include fonts.font-regular;
|
|
50
52
|
cursor: pointer;
|
|
51
53
|
-webkit-font-smoothing: antialiased;
|
|
52
54
|
-moz-osx-font-smoothing: grayscale;
|