@linzjs/lui 11.1.1 → 11.1.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.
- package/CHANGELOG.md +28 -0
- package/dist/components/LuiIcon/LuiIcon.d.ts +0 -1
- package/dist/components/LuiTabs/LuiTab/LuiTab.d.ts +0 -1
- package/dist/components/LuiTabs/LuiTabsGroup/LuiTabsGroup.d.ts +0 -1
- package/dist/components/LuiTabs/LuiTabsPanel/LuiTabsPanel.d.ts +0 -1
- package/dist/index.d.ts +6 -1
- package/dist/lui.cjs.development.js +587 -383
- 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 +76 -0
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +583 -384
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiIcon/LuiIcons.scss +91 -0
- package/dist/scss/Components/LuiTabs/LuiTab/LuiTab.scss +45 -0
- package/dist/scss/Components/LuiTabs/LuiTabs.scss +3 -0
- package/dist/scss/Components/LuiTabs/LuiTabsGroup/LuiTabsGroup.scss +10 -0
- package/dist/scss/Components/LuiTabs/LuiTabsPanel/LuiTabsPanel.scss +9 -0
- package/dist/scss/base.scss +5 -3
- package/package.json +1 -1
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
@use "../../Foundation/Variables/ColorVars.scss" as colors;
|
|
2
|
+
|
|
3
|
+
// Component starts
|
|
4
|
+
|
|
5
|
+
$icon-xl: 64px;
|
|
6
|
+
$icon-lg: 48px;
|
|
7
|
+
$icon-md: 24px;
|
|
8
|
+
$icon-sm: 16px;
|
|
9
|
+
$icon-xs: 12px;
|
|
10
|
+
|
|
11
|
+
.LuiIcon {
|
|
12
|
+
display: inline-block;
|
|
13
|
+
height: 100%;
|
|
14
|
+
width: 100%;
|
|
15
|
+
|
|
16
|
+
> svg {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.LuiIcon--xl {
|
|
22
|
+
max-height: $icon-xl;
|
|
23
|
+
max-width: $icon-xl;
|
|
24
|
+
|
|
25
|
+
> svg {
|
|
26
|
+
height: $icon-xl;
|
|
27
|
+
width: $icon-xl;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.LuiIcon--lg {
|
|
32
|
+
max-height: $icon-lg;
|
|
33
|
+
max-width: $icon-lg;
|
|
34
|
+
|
|
35
|
+
> svg {
|
|
36
|
+
height: $icon-lg;
|
|
37
|
+
width: $icon-lg;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.LuiIcon--md {
|
|
42
|
+
height: $icon-md;
|
|
43
|
+
max-height: $icon-md;
|
|
44
|
+
max-width: $icon-md;
|
|
45
|
+
width: $icon-md;
|
|
46
|
+
|
|
47
|
+
> svg {
|
|
48
|
+
height: $icon-md;
|
|
49
|
+
width: $icon-md;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.LuiIcon--sm {
|
|
54
|
+
max-height: $icon-sm;
|
|
55
|
+
max-width: $icon-sm;
|
|
56
|
+
|
|
57
|
+
> svg {
|
|
58
|
+
height: $icon-sm;
|
|
59
|
+
width: $icon-sm;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.LuiIcon--xs {
|
|
64
|
+
max-height: $icon-xs;
|
|
65
|
+
max-width: $icon-xs;
|
|
66
|
+
|
|
67
|
+
> svg {
|
|
68
|
+
height: $icon-xs;
|
|
69
|
+
width: $icon-xs;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.LuiIcon--warning {
|
|
74
|
+
fill: colors.$warning;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.LuiIcon--error {
|
|
78
|
+
fill: colors.$error;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.LuiIcon--success {
|
|
82
|
+
fill: colors.$success;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.LuiIcon--interactive {
|
|
86
|
+
fill: colors.$sea;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.LuiIcon--disabled {
|
|
90
|
+
fill: colors.$disabled-color;
|
|
91
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
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
|
+
|
|
7
|
+
.LuiTab {
|
|
8
|
+
background: transparent;
|
|
9
|
+
border-radius: 0;
|
|
10
|
+
color: colors.$base-type-color;
|
|
11
|
+
min-width: spacing.$unit-xxl * 2;
|
|
12
|
+
@include fonts.font-regular;
|
|
13
|
+
|
|
14
|
+
&:focus {
|
|
15
|
+
background-color: rgba(colors.$persian, 0.2);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.LuiTabsGroup--justified & {
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.LuiTab--active,
|
|
24
|
+
.LuiTab--active:focus {
|
|
25
|
+
@include fonts.font-semibold;
|
|
26
|
+
position: relative;
|
|
27
|
+
outline: none;
|
|
28
|
+
background: transparent;
|
|
29
|
+
|
|
30
|
+
&:after {
|
|
31
|
+
content: '';
|
|
32
|
+
display: block;
|
|
33
|
+
height: 4px;
|
|
34
|
+
width: 100%;
|
|
35
|
+
padding: 0 32px;
|
|
36
|
+
left: 0;
|
|
37
|
+
right: 0;
|
|
38
|
+
bottom: -1px;
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
background: linear-gradient(270deg, colors.$downy 1%, colors.$persian 100%);
|
|
41
|
+
border-top-left-radius: 3px;
|
|
42
|
+
border-top-right-radius: 3px;
|
|
43
|
+
position: absolute;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
.LuiTabsPanel {
|
|
2
|
+
display: none;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.LuiTabsPanel--active {
|
|
6
|
+
display: block;
|
|
7
|
+
overflow: auto; // fixed the parent adopting the top margins of the content (collapsing margins)
|
|
8
|
+
// No padding is placed on the panel so you have full access to the content area. So any padding for margins needs to be added in your content.
|
|
9
|
+
}
|
package/dist/scss/base.scss
CHANGED
|
@@ -60,7 +60,9 @@
|
|
|
60
60
|
@forward "./Components/Spinner/spinner.scss";
|
|
61
61
|
@forward "./Components/LuiFormElements/LuiFileInputBox.scss";
|
|
62
62
|
|
|
63
|
+
// The following have scss next to the component that is yet to be hooked up with the react implementation
|
|
63
64
|
// LuiTabs
|
|
64
|
-
@forward "
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
@forward "./Components/LuiTabs/LuiTabs.scss";
|
|
66
|
+
|
|
67
|
+
// LuiIcon
|
|
68
|
+
@forward "./Components/LuiIcon/LuiIcons.scss";
|
package/package.json
CHANGED