@linzjs/lui 17.1.3 → 17.3.1
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 +21 -0
- package/README.md +1 -1
- package/dist/components/LuiSearchBox/LuiSearchBox.d.ts +24 -0
- package/dist/components/LuiSidePanel/LuiSidePanel.d.ts +7 -0
- package/dist/components/LuiSidePanel/LuiSidePanelHelper.d.ts +7 -0
- package/dist/components/lol/LOLSearchBox.d.ts +7 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +198 -0
- package/dist/index.js.map +1 -1
- package/dist/lui.css +58 -8
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +194 -1
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiSearchBox/LuiSearchBox.scss +55 -0
- package/dist/scss/Components/LuiSearchInput/LuiSearchInput.scss +7 -5
- package/dist/scss/base.scss +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
|
+
@use '../../Foundation/Variables/FontVars.scss' as fonts;
|
|
3
|
+
@use "../../Foundation/Utilities" as *;
|
|
4
|
+
|
|
5
|
+
.LuiSearchBox {
|
|
6
|
+
display: block;
|
|
7
|
+
max-width: 800px;
|
|
8
|
+
|
|
9
|
+
@include breakpoint(sm) {
|
|
10
|
+
display: flex;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&-right {
|
|
14
|
+
margin-top: 8px;
|
|
15
|
+
width: auto;
|
|
16
|
+
max-width: 600px;
|
|
17
|
+
min-height: 40px;
|
|
18
|
+
|
|
19
|
+
@include breakpoint(sm) {
|
|
20
|
+
height: 3rem;
|
|
21
|
+
margin-top: 0px;
|
|
22
|
+
width: 75%;
|
|
23
|
+
min-height: 56px;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.LuiSearchBox-button {
|
|
29
|
+
width: 220px;
|
|
30
|
+
height: 2.5rem;
|
|
31
|
+
display: flex;
|
|
32
|
+
justify-content: space-between;
|
|
33
|
+
align-items: center;
|
|
34
|
+
margin: 0px;
|
|
35
|
+
border-radius: 3px 0 0 3px;
|
|
36
|
+
|
|
37
|
+
@include breakpoint(sm) {
|
|
38
|
+
max-width: 200px;
|
|
39
|
+
width: 25%;
|
|
40
|
+
height: 3.5rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
box-shadow: 0px 2px 3px 0px #00000040,
|
|
44
|
+
0px 0px 3px 0px #00000026;
|
|
45
|
+
color: colors.$charcoal;
|
|
46
|
+
|
|
47
|
+
&-icon {
|
|
48
|
+
fill: colors.$charcoal;
|
|
49
|
+
|
|
50
|
+
svg * {
|
|
51
|
+
color: colors.$charcoal;
|
|
52
|
+
fill: colors.$charcoal;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
@use "sass:math";
|
|
9
9
|
|
|
10
10
|
$breakpoint: 599px;
|
|
11
|
-
$input-wrapper-height-sm:
|
|
11
|
+
$input-wrapper-height-sm: 40px;
|
|
12
12
|
$input-wrapper-height-lg: 56px;
|
|
13
13
|
|
|
14
14
|
.LuiSearchInput {
|
|
@@ -40,7 +40,7 @@ $input-wrapper-height-lg: 56px;
|
|
|
40
40
|
|
|
41
41
|
min-height: $input-wrapper-height-lg;
|
|
42
42
|
|
|
43
|
-
@media (max-
|
|
43
|
+
@media (max-width: breakpoints.$breakpoint-sm) {
|
|
44
44
|
min-height: $input-wrapper-height-sm
|
|
45
45
|
}
|
|
46
46
|
}
|
|
@@ -60,7 +60,7 @@ $input-wrapper-height-lg: 56px;
|
|
|
60
60
|
padding-left: 48px;
|
|
61
61
|
padding-right: 48px;
|
|
62
62
|
|
|
63
|
-
@media (max-
|
|
63
|
+
@media (max-width: breakpoints.$breakpoint-sm) {
|
|
64
64
|
margin-top: math.div($input-wrapper-height-sm - $input-height, 2);
|
|
65
65
|
}
|
|
66
66
|
|
|
@@ -75,7 +75,8 @@ $input-wrapper-height-lg: 56px;
|
|
|
75
75
|
top: 16px;
|
|
76
76
|
|
|
77
77
|
$icon-height: 24px;
|
|
78
|
-
|
|
78
|
+
|
|
79
|
+
@media (max-width: breakpoints.$breakpoint-sm) {
|
|
79
80
|
top: math.div($input-wrapper-height-sm - $icon-height, 2);
|
|
80
81
|
}
|
|
81
82
|
|
|
@@ -90,7 +91,8 @@ $input-wrapper-height-lg: 56px;
|
|
|
90
91
|
top: 16px;
|
|
91
92
|
|
|
92
93
|
$icon-height: 24px;
|
|
93
|
-
|
|
94
|
+
|
|
95
|
+
@media (max-width: breakpoints.$breakpoint-sm) {
|
|
94
96
|
top: math.div($input-wrapper-height-sm - $icon-height, 2);
|
|
95
97
|
}
|
|
96
98
|
|
package/dist/scss/base.scss
CHANGED
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
@forward "./Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss";
|
|
67
67
|
@forward "./Components/LuiFormElements/LuiTextInput/LuiTextInput.scss";
|
|
68
68
|
@forward "./Components/LuiSearchInput/LuiSearchInput.scss";
|
|
69
|
+
@forward "./Components/LuiSearchBox/LuiSearchBox.scss";
|
|
69
70
|
@forward "./Components/LuiForms/LuiComboSelect/LuiComboSelect.scss";
|
|
70
71
|
@forward "./Components/LuiFormElements/LuiFileInputBox.scss";
|
|
71
72
|
@forward "./Components/LuiFormSection/LuiFormSectionHeader.scss";
|
package/package.json
CHANGED