tera-system-ui 0.0.51 → 0.0.53

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 (4) hide show
  1. package/dist/actions/clickOutside.js +1 -1
  2. package/dist/components/side-navigation/SideNavigationLayout.svelte +2 -0
  3. package/dist/components/side-navigation/sidenav.scss +116 -107
  4. package/package.json +1 -1
package/dist/actions/clickOutside.js CHANGED
@@ -13,7 +13,7 @@ export function clickOutside(node, data) {
13
13
  document.addEventListener('click', handleClick, true);
14
14
  return {
15
15
  destroy() {
16
- document.removeEventListener('click', handleClick, true);
16
+ document.addEventListener('click', handleClick, true);
17
17
  }
18
18
  };
19
19
  }
package/dist/components/side-navigation/SideNavigationLayout.svelte CHANGED
@@ -11,7 +11,9 @@
11
11
  data-side-nav-state="compact"
12
12
  >
13
13
  <SideNavigation language={language}/>
14
+ <div class="side-nav-backdrop">
14
15
 
16
+ </div>
15
17
  <section class="side-nav_main-content">
16
18
  {@render children?.()}
17
19
  </section>
package/dist/components/side-navigation/sidenav.scss CHANGED
@@ -1,149 +1,158 @@
1
1
  :root {
2
- --sidebar-width: 0;
3
- --sidebar-transition-duration: 0.2s;
4
- --sidebar-main-margin-left: 0;
5
- --sidebar-border-width: 0;
2
+ --sidebar-width: 0;
3
+ --sidebar-transition-duration: 0.2s;
4
+ --sidebar-main-margin-left: 0;
5
+ --sidebar-border-width: 0;
6
6
  }
7
7
 
8
8
  .side-nav_main-layout {
9
- transition: padding-left var(--sidebar-transition-duration);
9
+ transition: padding-left var(--sidebar-transition-duration);
10
10
  }
11
11
 
12
12
  .side-nav_main-side-bar {
13
- container-type: inline-size;
14
- z-index: 50;
15
- width: var(--sidebar-width);
16
- overflow-x: hidden;
17
- border-right: var(--sidebar-border-width) solid theme('colors.neutral.token.5');
18
- height: 100dvh;
19
- position: fixed;
20
- top: 0;
21
- left: 0;
22
- bottom: 0;
23
-
24
- transition: width var(--sidebar-transition-duration);
25
- background: theme('colors.neutral.token.1');
26
-
27
- ul {
13
+ container-type: inline-size;
14
+ z-index: 50;
28
15
  width: var(--sidebar-width);
16
+ overflow-x: hidden;
17
+ border-right: var(--sidebar-border-width) solid theme('colors.neutral.token.5');
18
+ height: 100dvh;
19
+ position: fixed;
20
+ top: 0;
21
+ left: 0;
22
+ bottom: 0;
23
+
29
24
  transition: width var(--sidebar-transition-duration);
30
- }
25
+ background: theme('colors.neutral.token.1');
31
26
 
27
+ ul {
28
+ width: var(--sidebar-width);
29
+ transition: width var(--sidebar-transition-duration);
30
+ }
32
31
  }
33
32
 
34
33
 
35
34
  .sm-hidden {
36
- opacity: 0;
37
- transition: opacity var(--sidebar-transition-duration);
35
+ opacity: 0;
36
+ transition: opacity var(--sidebar-transition-duration);
38
37
  }
39
38
 
40
39
  @container (min-width: 3rem) {
41
- .sm-hidden {
42
- opacity: 1;
43
- }
40
+ .sm-hidden {
41
+ opacity: 1;
42
+ }
44
43
  }
45
44
 
46
45
  .side-nav_main-content {
47
- margin-left: var(--sidebar-main-margin-left);
48
- transition: margin-left var(--sidebar-transition-duration);
46
+ margin-left: var(--sidebar-main-margin-left);
47
+ transition: margin-left var(--sidebar-transition-duration);
49
48
  }
50
49
 
50
+ .side-nav-backdrop {
51
+ //display: none;
52
+ z-index: -1;
53
+ position: fixed;
54
+ opacity: 0;
55
+ left: 0;
56
+ transition: opacity var(--sidebar-transition-duration),
57
+ left var(--sidebar-transition-duration);
58
+
59
+ }
51
60
 
52
61
  .side-nav_main-layout {
53
- &[data-side-nav-state="expand"], &[data-side-nav-temporary-expand="true"] {
54
- --sidebar-width: 16.5rem;
55
- --sidebar-border-width: 1px;
56
- .header-brand-logo {
57
- display: none;
62
+ &[data-side-nav-state="expand"], &[data-side-nav-temporary-expand="true"] {
63
+ --sidebar-width: 16.5rem;
64
+ --sidebar-border-width: 1px;
65
+
66
+ .header-brand-logo {
67
+ display: none;
68
+ }
69
+ }
70
+
71
+ &[data-side-nav-state="expand"] {
72
+ .side-nav-backdrop {
73
+ display: block;
74
+ top: 0;
75
+ bottom: 0;
76
+ right: 0;
77
+ left: var(--sidebar-width);
78
+ z-index: 100;
79
+ @apply bg-neutral-token-12/30 backdrop-blur-sm;
80
+ //background: yellow;
81
+ opacity: 1;
82
+ }
58
83
  }
59
- }
60
84
  }
61
85
 
62
86
  @media (min-width: theme('screens.md')) {
63
- :root {
64
- --sidebar-main-margin-left: 3rem;
65
- --sidebar-border-width: 1px;
66
- --sidebar-width: 3rem;
67
- }
87
+ :root {
88
+ --sidebar-main-margin-left: 3rem;
89
+ --sidebar-border-width: 1px;
90
+ --sidebar-width: 3rem;
91
+ }
68
92
  }
69
93
 
70
94
  @media (min-width: theme('screens.xl')) {
71
- :root {
72
- --sidebar-main-margin-left: var(--sidebar-width);
73
- --sidebar-width: 16.5rem;
74
- }
75
- .header-brand-logo {
76
- display: none;
77
- }
78
- .side-nav_main-layout {
79
- &[data-side-nav-state="compact"] {
80
- --sidebar-main-margin-left: 3rem;
81
- --sidebar-width: 3rem;
82
- .header-brand-logo {
83
- display: block;
84
- }
95
+ :root {
96
+ --sidebar-main-margin-left: var(--sidebar-width);
97
+ --sidebar-width: 16.5rem;
85
98
  }
99
+ .header-brand-logo {
100
+ display: none;
101
+ }
102
+ .side-nav_main-layout {
103
+ &[data-side-nav-state="compact"] {
104
+ --sidebar-main-margin-left: 3rem;
105
+ --sidebar-width: 3rem;
106
+
107
+ .header-brand-logo {
108
+ display: block;
109
+ }
110
+ }
86
111
 
87
- &[data-side-nav-temporary-expand="true"] {
88
- --sidebar-width: 16.5rem;
112
+ &[data-side-nav-temporary-expand="true"] {
113
+ --sidebar-width: 16.5rem;
89
114
 
115
+ }
90
116
  }
91
- }
92
117
  }
93
118
 
94
119
 
95
120
  .side-nav_item {
96
- color: theme('colors.neutral.token.13');
97
-
98
- a {
99
- display: flex;
100
- gap: 0.5rem;
101
- align-items: center;
102
- width: 100%;
103
- position: relative;
104
- white-space: nowrap;
105
- @apply px-3 py-3 font-semibold;
106
- }
107
-
108
- svg {
109
- &.icon {
110
- min-width: 24px;
121
+ color: theme('colors.neutral.token.13');
122
+
123
+ a {
124
+ display: flex;
125
+ gap: 0.5rem;
126
+ align-items: center;
127
+ width: 100%;
128
+ position: relative;
129
+ white-space: nowrap;
130
+ @apply px-3 py-3 font-semibold;
131
+ }
132
+
133
+ svg {
134
+ &.icon {
135
+ min-width: 24px;
136
+ }
111
137
  }
112
- }
113
-
114
- &.selected a {
115
- //background-color: theme('colors.neutral.token.11');
116
- color: theme('colors.neutral.token.1');
117
- //@apply rounded-full;
118
- }
119
-
120
- &.selected {
121
- a::after {
122
- content: '';
123
- position: absolute;
124
- inset-inline: 0.25rem;
125
- inset-block: 0.2rem;
126
- background: theme('colors.neutral.token.11');
127
- border-radius: theme('borderRadius.DEFAULT');
128
- z-index: 0;
138
+
139
+ &.selected a {
140
+ color: theme('colors.neutral.token.1');
141
+ }
142
+
143
+ &.selected {
144
+ a::after {
145
+ content: '';
146
+ position: absolute;
147
+ inset-inline: 0.25rem;
148
+ inset-block: 0.2rem;
149
+ background: theme('colors.neutral.token.11');
150
+ border-radius: theme('borderRadius.DEFAULT');
151
+ z-index: 0;
152
+ }
153
+ }
154
+
155
+ &:hover {
156
+ background-color: theme('colors.neutral.token.3');
129
157
  }
130
- }
131
-
132
- //&.selected {
133
- // a::after {
134
- // content: '';
135
- // position: absolute;
136
- // left: 0;
137
- // top: 0;
138
- // bottom: 0;
139
- // width: 4px;
140
- // height: 100%;
141
- // background: theme('colors.primary.token.4');
142
- // border-radius: 4px 0 0 4px;
143
- // }
144
- //}
145
-
146
- &:hover {
147
- background-color: theme('colors.neutral.token.3');
148
- }
149
158
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tera-system-ui",
3
- "version": "0.0.51",
3
+ "version": "0.0.53",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",