@linzjs/lui 11.4.0 → 11.8.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 +28 -0
- package/dist/components/LuiBadge/LuiBadge.d.ts +8 -0
- package/dist/components/LuiBadge/LuiBadge.stories.d.ts +9 -0
- package/dist/components/LuiBadge/LuiBadge.test.d.ts +1 -0
- package/dist/lui.cjs.development.js +7 -2
- package/dist/lui.cjs.development.js.map +1 -1
- package/dist/lui.cjs.production.min.js +1 -1
- package/dist/lui.cjs.production.min.js.map +1 -1
- package/dist/lui.css +57 -4
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +7 -2
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiBadge/LuiBadge.scss +51 -0
- package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss +0 -1
- package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss +17 -3
- package/dist/scss/Foundation/Variables/FormVars.scss +1 -0
- package/dist/scss/base.scss +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@use '../../Foundation/Variables/FormVars' as luiForms;
|
|
2
|
+
@use "../../Foundation/Variables/MiscVars.scss" as misc;
|
|
3
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
4
|
+
@use '../../Foundation/Variables/FontVars.scss' as fonts;
|
|
5
|
+
@use '../../Foundation/Variables/SpacingVars.scss' as spacing;
|
|
6
|
+
@use "../../Foundation/Utilities" as *;
|
|
7
|
+
|
|
8
|
+
.LuiBadge {
|
|
9
|
+
@include fonts.font-semibold();
|
|
10
|
+
color: colors.$fuscous;
|
|
11
|
+
background: transparent;
|
|
12
|
+
border: 1px solid colors.$fuscous;
|
|
13
|
+
border-radius: 4px;
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
font-size: rem(12px);
|
|
16
|
+
line-height: rem(16px);
|
|
17
|
+
margin-top: 0;
|
|
18
|
+
padding: {
|
|
19
|
+
top: spacing.$unit-xxs * 0.5; // 2px
|
|
20
|
+
right: spacing.$unit-xxs; // 4px
|
|
21
|
+
bottom: spacing.$unit-xxs * 0.5; //2px
|
|
22
|
+
left: spacing.$unit-xxs; // 4px
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.LuiBadge--sm {
|
|
27
|
+
font-size: rem(10px);
|
|
28
|
+
line-height: rem(14px);
|
|
29
|
+
padding: {
|
|
30
|
+
right: spacing.$unit-xxs; // 4px
|
|
31
|
+
left: spacing.$unit-xxs; // 4px
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.LuiBadge--lg {
|
|
36
|
+
font-size: rem(14px);
|
|
37
|
+
line-height: rem(20px);
|
|
38
|
+
padding: {
|
|
39
|
+
right: spacing.$unit-xs; // 8px
|
|
40
|
+
left: spacing.$unit-xs; // 8px
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.LuiBadge--fill {
|
|
45
|
+
background: colors.$snow;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.LuiBadge--warning {
|
|
49
|
+
border-color: colors.$warning;
|
|
50
|
+
color: colors.$warning;
|
|
51
|
+
}
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
@use '../../../Foundation/Variables/FormVars' as luiForms;
|
|
2
2
|
@use '../../../Foundation/Variables/FontVars' as luiFonts;
|
|
3
3
|
@use '../../../Foundation/Variables/LuiColors' as luiColors;
|
|
4
|
+
@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
|
|
5
|
+
@use '../../../Foundation/Utilities/REM.scss' as rem;
|
|
6
|
+
|
|
7
|
+
$input-spacing: luiSpacing.$unit-xs; // 8px
|
|
8
|
+
|
|
9
|
+
$label-font-size: rem.rem(14px);
|
|
10
|
+
$label-line-height: luiSpacing.$unit-md;
|
|
4
11
|
|
|
5
12
|
.LuiTextInput {
|
|
6
13
|
margin-bottom: 24px;
|
|
@@ -11,6 +18,11 @@
|
|
|
11
18
|
}
|
|
12
19
|
|
|
13
20
|
.LuiTextInput-label {
|
|
21
|
+
margin-bottom: $input-spacing;
|
|
22
|
+
line-height: $label-line-height;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.LuiTextInput-label-text {
|
|
14
26
|
@include luiForms.formLabel;
|
|
15
27
|
}
|
|
16
28
|
|
|
@@ -59,7 +71,7 @@
|
|
|
59
71
|
bottom: 14px;
|
|
60
72
|
left: 16px;
|
|
61
73
|
}
|
|
62
|
-
|
|
74
|
+
width: 100%;
|
|
63
75
|
transition: all 0.15 ease-in-out;
|
|
64
76
|
transition: border 0.2s ease;
|
|
65
77
|
|
|
@@ -85,12 +97,12 @@
|
|
|
85
97
|
}
|
|
86
98
|
|
|
87
99
|
.LuiTextInput-error {
|
|
100
|
+
@include luiFonts.font-semibold();
|
|
88
101
|
position: relative;
|
|
89
|
-
display: flex;
|
|
90
102
|
color: luiColors.$error;
|
|
91
103
|
text-align: left;
|
|
92
104
|
padding-left: 22px;
|
|
93
|
-
font-size:
|
|
105
|
+
font-size: $label-font-size;
|
|
94
106
|
line-height: 20px;
|
|
95
107
|
margin-top: 2px;
|
|
96
108
|
}
|
|
@@ -103,6 +115,8 @@
|
|
|
103
115
|
|
|
104
116
|
.LuiTextInput-mandatory {
|
|
105
117
|
display: inline-block;
|
|
118
|
+
@include luiFonts.font-semibold();
|
|
119
|
+
font-size: $label-font-size;
|
|
106
120
|
width: 10px;
|
|
107
121
|
margin: 0 0 0 -10px;
|
|
108
122
|
color: luiColors.$error;
|
package/dist/scss/base.scss
CHANGED
|
@@ -69,10 +69,11 @@
|
|
|
69
69
|
@forward "./Components/LuiFormSection/LuiFormSectionHeader.scss";
|
|
70
70
|
@forward "./Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss";
|
|
71
71
|
@forward "./Components/LuiShadow/LuiShadow.scss";
|
|
72
|
+
@forward "./Components/LuiBadge/LuiBadge.scss";
|
|
72
73
|
|
|
73
74
|
// The following have scss next to the component that is yet to be hooked up with the react implementation
|
|
74
75
|
// LuiTabs
|
|
75
76
|
@forward "./Components/LuiTabs/LuiTabs.scss";
|
|
76
77
|
|
|
77
78
|
// LuiIcon
|
|
78
|
-
@forward "./Components/LuiIcon/LuiIcons.scss";
|
|
79
|
+
@forward "./Components/LuiIcon/LuiIcons.scss";
|
package/package.json
CHANGED