@linzjs/lui 17.18.2 → 17.20.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 +9 -0
- package/dist/assets/icons/blackwhite_greyscale.svg +1 -0
- package/dist/assets/icons/dealings.svg +1 -0
- package/dist/assets/icons/memorials.svg +1 -0
- package/dist/assets/icons/print.svg +1 -0
- package/dist/assets/icons/regenerate.svg +1 -0
- package/dist/assets/svg-content.d.ts +1 -1
- package/dist/assets/svg-content.tsx +49 -0
- package/dist/components/LuiSideMenu/LuiSideMenu.d.ts +5 -0
- package/dist/components/LuiSideMenu/LuiSideMenuItem.d.ts +10 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +35 -0
- package/dist/index.js.map +1 -1
- package/dist/lui.css +89 -0
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +34 -1
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiSideMenu/LuiSideMenu.scss +112 -0
- package/dist/scss/base.scss +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,112 @@
|
|
|
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
|
+
|
|
6
|
+
$nav-width-expanded: 15rem;
|
|
7
|
+
$nav-width-collapsed: 3rem;
|
|
8
|
+
|
|
9
|
+
.LuiSideMenu {
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.LuiSideMenu-wrapper {
|
|
14
|
+
display: flex;
|
|
15
|
+
background-color: colors.$white;
|
|
16
|
+
bottom: 0;
|
|
17
|
+
box-shadow: 0 0 15px 0 rgba(0, 113, 152, 0.2);
|
|
18
|
+
transition: all 0.2s ease-in-out;
|
|
19
|
+
z-index: 2;
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 0;
|
|
22
|
+
max-width: $nav-width-collapsed;
|
|
23
|
+
width: 100%;
|
|
24
|
+
|
|
25
|
+
&:hover {
|
|
26
|
+
max-width: $nav-width-expanded;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.LuiSideMenu-listItem {
|
|
31
|
+
border-bottom: 1px solid colors.$lily;
|
|
32
|
+
position: relative;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.LuiSideMenu-link {
|
|
36
|
+
color: colors.$charcoal;
|
|
37
|
+
// pos Relative so icon can be positioned relative to the link
|
|
38
|
+
position: relative;
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
height: spacing.$unit-xl;
|
|
43
|
+
padding-left: spacing.$unit-sm;
|
|
44
|
+
transition: background 0.3s ease-in-out;
|
|
45
|
+
// Nav button hover state
|
|
46
|
+
&:hover {
|
|
47
|
+
background: colors.$polar;
|
|
48
|
+
color: colors.$teal;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Nav button visited state
|
|
52
|
+
&:visited {
|
|
53
|
+
color: colors.$charcoal;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Nav button disabled state
|
|
57
|
+
&--disabled {
|
|
58
|
+
cursor: default;
|
|
59
|
+
opacity: 0.5;
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Nav button active state
|
|
64
|
+
&--active {
|
|
65
|
+
color: colors.$white !important;
|
|
66
|
+
background-color: colors.$sea;
|
|
67
|
+
@include fonts.font-semibold();
|
|
68
|
+
|
|
69
|
+
svg {
|
|
70
|
+
fill: white;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// ensure no change on hover for active
|
|
74
|
+
&:hover {
|
|
75
|
+
background: colors.$sea;
|
|
76
|
+
color: colors.$white;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// create small element (tab) to push past right column for active page
|
|
80
|
+
&::after {
|
|
81
|
+
content: '';
|
|
82
|
+
display: block;
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 0;
|
|
85
|
+
right: spacing.$unit-xxs * -1;
|
|
86
|
+
bottom: 0;
|
|
87
|
+
border-radius: 0 5px 5px 0;
|
|
88
|
+
width: spacing.$unit-xxs;
|
|
89
|
+
background-color: colors.$sea;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Make the navigation text fade in and out when transitioning the nav
|
|
94
|
+
// from closed to open
|
|
95
|
+
.navText {
|
|
96
|
+
opacity: 0;
|
|
97
|
+
transition: opacity 0.2s ease-in-out 0.1s;
|
|
98
|
+
transform: translateX(-200%);
|
|
99
|
+
white-space: nowrap;
|
|
100
|
+
padding-left: 12px;
|
|
101
|
+
overflow: hidden;
|
|
102
|
+
|
|
103
|
+
.LuiSideMenu-wrapper:hover & {
|
|
104
|
+
opacity: 1;
|
|
105
|
+
transform: translateX(0);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.LuiSideMenu-wrapper:hover .LuiSideMenu-link--active::after {
|
|
111
|
+
right: spacing.$unit-xxs * -1;
|
|
112
|
+
}
|
package/dist/scss/base.scss
CHANGED
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
@forward './Components/LuiBadge/LuiBadge.scss';
|
|
76
76
|
@forward './Components/LuiAccordicardStatic/LuiAccordicardStatic.scss';
|
|
77
77
|
@forward './Components/LuiAccordicard/LuiAccordicard.scss';
|
|
78
|
+
@forward './Components/LuiSideMenu/LuiSideMenu.scss';
|
|
78
79
|
|
|
79
80
|
// The following have scss next to the component that is yet to be hooked up with the react implementation
|
|
80
81
|
// LuiTabs
|
package/package.json
CHANGED