@linzjs/lui 16.2.2 → 16.2.5

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 (23) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/components/LuiBanner/LuiBanner.d.ts +3 -3
  3. package/dist/components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.d.ts +1 -0
  4. package/dist/components/LuiStaticMessage/LuiStaticMessage.d.ts +5 -2
  5. package/dist/index.js +4 -3
  6. package/dist/index.js.map +1 -1
  7. package/dist/lui.css +33 -9
  8. package/dist/lui.css.map +1 -1
  9. package/dist/lui.esm.js +4 -3
  10. package/dist/lui.esm.js.map +1 -1
  11. package/dist/scss/Components/LuiBadge/LuiBadge.scss +1 -1
  12. package/dist/scss/Components/LuiError/LuiError.scss +5 -5
  13. package/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss +40 -24
  14. package/dist/scss/Components/LuiFormElements/LuiFileInputBox.scss +7 -7
  15. package/dist/scss/Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss +17 -16
  16. package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss +37 -32
  17. package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss +37 -36
  18. package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss +42 -39
  19. package/dist/scss/Components/LuiFormSection/LuiFormSectionHeader.scss +4 -5
  20. package/dist/scss/Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss +4 -4
  21. package/dist/scss/Components/LuiForms/LuiComboSelect/LuiComboSelect.scss +11 -11
  22. package/dist/scss/Components/LuiShadow/LuiShadow.scss +6 -6
  23. package/package.json +1 -1
package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss CHANGED
@@ -1,13 +1,13 @@
1
- @use '../../../Foundation/Variables/FormVars' as luiForms;
2
- @use '../../../Foundation/Variables/FontVars' as luiFonts;
3
- @use '../../../Foundation/Variables/LuiColors' as luiColors;
4
- @use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
1
+ @use '../../../Foundation/Variables/FormVars' as forms;
2
+ @use '../../../Foundation/Variables/FontVars' as fonts;
3
+ @use '../../../Foundation/Variables/LuiColors' as colors;
4
+ @use '../../../Foundation/Variables/SpacingVars' as spacing;
5
5
  @use '../../../Foundation/Variables/MiscVars' as MiscVars;
6
6
  @use '../../../Foundation/Utilities/REM' as rem;
7
7
 
8
- $input-spacing: luiSpacing.$unit-xs; // 8px
8
+ $input-spacing: spacing.$unit-xs; // 8px
9
9
 
10
- $label-line-height: luiSpacing.$unit-md;
10
+ $label-line-height: spacing.$unit-md;
11
11
 
12
12
  .LuiTextInput {
13
13
  margin-bottom: 24px;
@@ -16,10 +16,11 @@ $label-line-height: luiSpacing.$unit-md;
16
16
  .LuiTextInput-label {
17
17
  margin-bottom: $input-spacing;
18
18
  line-height: $label-line-height;
19
+ position: relative;
19
20
  }
20
21
 
21
22
  .LuiTextInput-label-text {
22
- @include luiForms.formLabel;
23
+ @include forms.formLabel;
23
24
  }
24
25
 
25
26
  .LuiTextInput-inputWrapper {
@@ -28,10 +29,10 @@ $label-line-height: luiSpacing.$unit-md;
28
29
  box-shadow: -1px 0 0 0 transparent;
29
30
  border-radius: 4px;
30
31
  transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s,
31
- border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
32
+ border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
32
33
 
33
34
  .hasError & {
34
- box-shadow: -8px 0px 0 0 luiColors.$error;
35
+ box-shadow: -8px 0px 0 0 colors.$error;
35
36
  border-radius: 4px;
36
37
  }
37
38
  }
@@ -53,19 +54,19 @@ $label-line-height: luiSpacing.$unit-md;
53
54
  }
54
55
 
55
56
  .LuiTextInput-input {
56
- @include luiFonts.font-regular();
57
- @include luiForms.formPlaceholder;
57
+ @include fonts.font-regular();
58
+ @include forms.formPlaceholder;
58
59
  margin-bottom: 0;
59
- border: 1px solid luiColors.$silver;
60
+ border: 1px solid colors.$silver;
60
61
  border-radius: MiscVars.$borderRadius;
61
- height: luiSpacing.$unit-xl;
62
- color: luiColors.$charcoal;
63
- caret-color: luiColors.$charcoal;
62
+ height: spacing.$unit-xl;
63
+ color: colors.$charcoal;
64
+ caret-color: colors.$charcoal;
64
65
  padding: {
65
- top: luiSpacing.$unit-sm;
66
- right: luiSpacing.$unit-lg;
67
- bottom: luiSpacing.$unit-sm;
68
- left: luiSpacing.$unit-xs * 2;
66
+ top: spacing.$unit-sm;
67
+ right: spacing.$unit-lg;
68
+ bottom: spacing.$unit-sm;
69
+ left: spacing.$unit-xs * 2;
69
70
  }
70
71
  width: 100%;
71
72
  transition: all 0.15 ease-in-out;
@@ -73,37 +74,39 @@ $label-line-height: luiSpacing.$unit-md;
73
74
 
74
75
  &:hover,
75
76
  &:active {
76
- border-color: luiColors.$input-focus;
77
+ border-color: colors.$input-focus;
77
78
  }
78
79
 
79
80
  &:focus {
80
81
  outline: none;
81
- border-color: luiColors.$input-focus;
82
+ border-color: colors.$input-focus;
82
83
  }
83
84
 
84
85
  .hasError & {
85
- border-color: luiColors.$error;
86
+ border-color: colors.$error;
86
87
  }
87
88
 
88
89
  .isDisabled & {
89
- border-color: luiColors.$silver;
90
- background-color: luiColors.$lily;
90
+ border-color: colors.$silver;
91
+ background-color: colors.$lily;
91
92
  cursor: not-allowed;
92
93
  }
93
94
  }
94
95
 
95
- .LuiTextInput-iconPosition{
96
+ .LuiTextInput-iconPosition {
96
97
  position: absolute;
97
- right:7px;
98
- top:17%;
98
+ right: 7px;
99
+ top: 17%;
99
100
 
100
101
  svg {
101
- fill: luiColors.$fuscous;
102
+ fill: colors.$fuscous;
102
103
  }
103
104
  }
104
105
 
105
106
  .LuiTextInput-padlock-icon {
106
107
  // base64 encoded version of `assets/icons/lock.svg`. referring to svg via it's path causes downstream import errors.
108
+
109
+ // TODO swap for LuiCheckbox LuiICon method
107
110
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyMiI+PHBhdGggZD0iTTE0IDcuNUgxM1Y1LjVDMTMgMi43NCAxMC43NiAwLjUgOCAwLjVDNS4yNCAwLjUgMyAyLjc0IDMgNS41VjcuNUgyQzAuOSA3LjUgMCA4LjQgMCA5LjVWMTkuNUMwIDIwLjYgMC45IDIxLjUgMiAyMS41SDE0QzE1LjEgMjEuNSAxNiAyMC42IDE2IDE5LjVWOS41QzE2IDguNCAxNS4xIDcuNSAxNCA3LjVaTTggMTYuNUM2LjkgMTYuNSA2IDE1LjYgNiAxNC41QzYgMTMuNCA2LjkgMTIuNSA4IDEyLjVDOS4xIDEyLjUgMTAgMTMuNCAxMCAxNC41QzEwIDE1LjYgOS4xIDE2LjUgOCAxNi41Wk0xMS4xIDcuNUg0LjlWNS41QzQuOSAzLjc5IDYuMjkgMi40IDggMi40QzkuNzEgMi40IDExLjEgMy43OSAxMS4xIDUuNVY3LjVaIiBmaWxsPSIjNkI2OTY2IiAvPjwvc3ZnPg==');
108
111
  background-repeat: no-repeat;
109
112
  background-position: right 12px center;
@@ -111,12 +114,12 @@ $label-line-height: luiSpacing.$unit-md;
111
114
  }
112
115
 
113
116
  .LuiTextInput-error {
114
- @include luiFonts.font-semibold();
117
+ @include fonts.font-semibold();
115
118
  position: relative;
116
- color: luiColors.$error;
119
+ color: colors.$error;
117
120
  text-align: left;
118
121
  padding-left: 22px;
119
- font-size: luiForms.$label-font-size;
122
+ font-size: forms.$label-font-size;
120
123
  line-height: 20px;
121
124
  margin-top: 2px;
122
125
  }
@@ -128,12 +131,12 @@ $label-line-height: luiSpacing.$unit-md;
128
131
  }
129
132
 
130
133
  .LuiTextInput-mandatory {
131
- display: inline-block;
132
- @include luiFonts.font-semibold();
133
- font-size: luiForms.$label-font-size;
134
- width: 10px;
135
- margin: 0 0 0 -10px;
136
- color: luiColors.$error;
134
+ position: absolute;
135
+ left: -12px;
136
+ top: -2px;
137
+ @include fonts.font-semibold();
138
+ font-size: forms.$label-font-size;
139
+ color: colors.$error;
137
140
  }
138
141
 
139
142
  .LuiFieldWrapper {
@@ -149,12 +152,12 @@ $label-line-height: luiSpacing.$unit-md;
149
152
  }
150
153
 
151
154
  &.LuiFieldWrapper--error {
152
- box-shadow: -12px 0px 0 0 luiColors.$error;
155
+ box-shadow: -12px 0px 0 0 colors.$error;
153
156
  border-radius: 4px;
154
157
 
155
158
  // !--------- This can't live here! Needs to go in specific input-------!
156
159
  input {
157
- border-color: luiColors.$error;
160
+ border-color: colors.$error;
158
161
  }
159
162
  }
160
163
  }
package/dist/scss/Components/LuiFormSection/LuiFormSectionHeader.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../Foundation/Variables/LuiColors' as luiColors;
1
+ @use '../../Foundation/Variables/LuiColors' as colors;
2
2
  @use '../../Foundation/Variables/SpacingVars' as spacing;
3
3
  @use '../../Foundation/Variables/BreakpointVars' as breakpoints;
4
4
  @use "../../Foundation/Utilities" as *;
@@ -8,7 +8,7 @@
8
8
  display: flex;
9
9
  flex-direction: column;
10
10
  padding: 1rem;
11
- background-color: luiColors.$white;
11
+ background-color: colors.$white;
12
12
 
13
13
  @include breakpoint(md) {
14
14
  flex-direction: row;
@@ -33,14 +33,13 @@
33
33
  .LuiFormSectionHeader-details {
34
34
  padding: 0;
35
35
  width: 100%;
36
- background-color: luiColors.$white;
36
+ background-color: colors.$white;
37
37
  flex-grow: 2;
38
38
 
39
39
  @include breakpoint(md) {
40
40
  width: 70%;
41
41
  border-radius: 5px;
42
42
  margin-top: spacing.$unit-sm;
43
- background-color: luiColors.$white;
44
-
43
+ background-color: colors.$white;
45
44
  }
46
45
  }
package/dist/scss/Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss CHANGED
@@ -1,10 +1,10 @@
1
- @use '../../../Foundation/Variables/LuiColors' as luiColors;
1
+ @use '../../../Foundation/Variables/LuiColors' as colors;
2
2
  @use '../../../Foundation/Variables/SpacingVars' as spacing;
3
3
 
4
4
  .HelpInfo {
5
5
  margin: 0;
6
6
  display: flex;
7
- color: luiColors.$fuscous;
7
+ color: colors.$fuscous;
8
8
  }
9
9
 
10
10
  .HelpInfo-icon {
@@ -12,5 +12,5 @@
12
12
 
13
13
  margin-left: spacing.$unit-sm;
14
14
  margin-right: spacing.$unit-xs;
15
- fill: luiColors.$fuscous;
16
- }
15
+ fill: colors.$fuscous;
16
+ }
package/dist/scss/Components/LuiForms/LuiComboSelect/LuiComboSelect.scss CHANGED
@@ -1,17 +1,17 @@
1
- @use '../../../Foundation/Variables/FormVars' as luiForms;
2
- @use '../../../Foundation/Variables/LuiColors' as luiColors;
3
- @use '../../../Foundation/Variables/FontVars' as luiFonts;
4
- @use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
1
+ @use '../../../Foundation/Variables/FormVars' as forms;
2
+ @use '../../../Foundation/Variables/LuiColors' as colors;
3
+ @use '../../../Foundation/Variables/FontVars' as fonts;
4
+ @use '../../../Foundation/Variables/SpacingVars' as spacing;
5
5
  @use '../../../Foundation/Utilities/REM' as rem;
6
6
 
7
7
  .LuiComboSelect-label-text {
8
- @include luiForms.formLabel();
8
+ @include forms.formLabel();
9
9
  }
10
10
 
11
11
  .hasError {
12
12
  .LuiComboSelect__control {
13
- border-color: luiColors.$error;
14
- box-shadow: -8px 0px 0 0 luiColors.$error;
13
+ border-color: colors.$error;
14
+ box-shadow: -8px 0px 0 0 colors.$error;
15
15
  border-radius: 4px;
16
16
  }
17
17
  }
@@ -19,13 +19,13 @@
19
19
  .LuiComboSelect-error {
20
20
  position: relative;
21
21
  display: flex;
22
- @include luiFonts.font-semibold;
23
- color: luiColors.$error;
22
+ @include fonts.font-semibold;
23
+ color: colors.$error;
24
24
  text-align: left;
25
- padding-left: luiSpacing.$unit-md;
25
+ padding-left: spacing.$unit-md;
26
26
  font-size: rem.rem(14px);
27
27
  line-height: rem.rem(20px);
28
- margin-top: luiSpacing.$unit-xxs;
28
+ margin-top: spacing.$unit-xxs;
29
29
  }
30
30
 
31
31
  .LuiComboSelect-error-icon {
package/dist/scss/Components/LuiShadow/LuiShadow.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use '../../Foundation/Variables/LuiColors' as luiColors;
2
- @use '../../Foundation/Variables/SpacingVars' as luiSpacing;
1
+ @use '../../Foundation/Variables/LuiColors' as colors;
2
+ @use '../../Foundation/Variables/SpacingVars' as spacing;
3
3
 
4
4
  // ========================
5
5
  // Lui Shadow wrapper
@@ -8,9 +8,9 @@
8
8
  // ========================
9
9
 
10
10
  .LuiShadow {
11
- box-shadow: 0 0 luiSpacing.$unit-md 1px rgba(0, 113, 152, 0.1);
11
+ box-shadow: 0 0 spacing.$unit-md 1px rgba(0, 113, 152, 0.1);
12
12
  border-radius: 5px;
13
- padding: luiSpacing.$unit-md;
14
- margin-top: luiSpacing.$unit-sm;
15
- background-color: luiColors.$white;
13
+ padding: spacing.$unit-md;
14
+ margin-top: spacing.$unit-sm;
15
+ background-color: colors.$white;
16
16
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "16.2.2",
2
+ "version": "16.2.5",
3
3
  "license": "MIT",
4
4
  "repository": {
5
5
  "type": "git",