@uniai-fe/uds-templates 0.4.13 → 0.4.15

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/styles.css +19 -14
  2. package/package.json +1 -1
  3. package/src/page-frame/desktop/styles/page/nav.scss +16 -7
  4. package/src/page-frame/desktop/styles/variables.scss +10 -9
package/dist/styles.css CHANGED
@@ -3,25 +3,26 @@
3
3
  --uds-page-frame-background: var(--color-common-100);
4
4
  --uds-page-header-height: 7.2rem;
5
5
  --uds-page-header-border: var(--color-border-standard-cool-gray);
6
- --uds-page-header-padding-horizontal: var(--spacing-padding-9, 2.8rem);
7
- --uds-page-header-padding-vertical: var(--spacing-padding-5, 1.2rem);
6
+ --uds-page-header-padding-horizontal: var(--spacing-padding-9);
7
+ --uds-page-header-padding-vertical: var(--spacing-padding-5);
8
8
  --uds-page-header-background: var(--uds-page-frame-background);
9
- --uds-page-header-item-gap: var(--spacing-padding-5, 1.2rem);
9
+ --uds-page-header-item-gap: var(--spacing-padding-5);
10
10
  --uds-page-nav-width: 7.2rem;
11
11
  --uds-page-nav-body-padding-vertical: var(--spacing-padding-9);
12
+ --uds-page-nav-body-padding-horizontal: 0px;
12
13
  --uds-page-nav-border: var(--color-border-standard-cool-gray);
13
14
  --uds-page-nav-background: var(--uds-page-frame-background);
14
- --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
15
+ --uds-page-nav-logo-height: var(--uds-page-header-height);
15
16
  --uds-page-nav-list-padding-horizontal: 0rem;
16
17
  --uds-page-nav-list-padding-vertical: 0rem;
17
- --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
18
- --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
18
+ --uds-page-nav-item-height: var(--theme-size-medium-2);
19
+ --uds-page-nav-item-gap: var(--spacing-gap-6);
19
20
  --uds-page-nav-item-color-default: var(--color-label-standard);
20
21
  --uds-page-nav-item-color-active: var(--color-primary-default);
21
- --uds-page-nav-icon-size: var(--theme-size-small-2, 2.4rem);
22
+ --uds-page-nav-icon-size: var(--theme-size-small-2);
22
23
  --uds-page-body-background: var(--uds-page-frame-background);
23
- --uds-page-body-padding-horizontal: var(--spacing-padding-9, 2.8rem);
24
- --uds-page-body-padding-vertical: var(--spacing-padding-9, 2.8rem);
24
+ --uds-page-body-padding-horizontal: var(--spacing-padding-9);
25
+ --uds-page-body-padding-vertical: var(--spacing-padding-9);
25
26
  --frame-device-height: 812px;
26
27
  --frame-device-width: 480px;
27
28
  --frame-safe-area-top: env(safe-area-inset-top, 0px);
@@ -234,7 +235,7 @@
234
235
  .page-frame-nav-body {
235
236
  width: 100%;
236
237
  height: calc(100% - var(--uds-page-nav-logo-height));
237
- padding: var(--uds-page-nav-body-padding-vertical);
238
+ padding: var(--uds-page-nav-body-padding-vertical) var(--uds-page-nav-body-padding-horizontal);
238
239
  display: flex;
239
240
  flex-direction: column;
240
241
  overflow: auto;
@@ -291,13 +292,17 @@
291
292
  color: inherit;
292
293
  }
293
294
 
294
- .page-frame-nav-item.is-selected .page-frame-nav-category,
295
- .page-frame-nav-item:hover .page-frame-nav-category {
295
+ .page-frame-nav-item.is-selected .page-frame-nav-category {
296
296
  color: var(--uds-page-nav-item-color-active);
297
297
  }
298
+ .page-frame-nav-item.is-selected .page-frame-nav-category-icon svg path {
299
+ fill: var(--uds-page-nav-item-color-active);
300
+ }
298
301
 
299
- .page-frame-nav-item.is-selected .page-frame-nav-category-icon svg path,
300
- .page-frame-nav-item:hover .page-frame-nav-category-icon svg path {
302
+ .page-frame-nav-category:hover {
303
+ color: var(--uds-page-nav-item-color-active);
304
+ }
305
+ .page-frame-nav-category:hover .page-frame-nav-category-icon svg path {
301
306
  fill: var(--uds-page-nav-item-color-active);
302
307
  }
303
308
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-templates",
3
- "version": "0.4.13",
3
+ "version": "0.4.15",
4
4
  "description": "UNIAI Design System; UI Templates Package",
5
5
  "type": "module",
6
6
  "private": false,
package/src/page-frame/desktop/styles/page/nav.scss CHANGED
@@ -26,7 +26,8 @@
26
26
  .page-frame-nav-body {
27
27
  width: 100%;
28
28
  height: calc(100% - var(--uds-page-nav-logo-height));
29
- padding: var(--uds-page-nav-body-padding-vertical);
29
+ padding: var(--uds-page-nav-body-padding-vertical)
30
+ var(--uds-page-nav-body-padding-horizontal);
30
31
 
31
32
  display: flex;
32
33
  flex-direction: column;
@@ -91,14 +92,22 @@
91
92
  color: inherit;
92
93
  }
93
94
 
94
- .page-frame-nav-item.is-selected .page-frame-nav-category,
95
- .page-frame-nav-item:hover .page-frame-nav-category {
96
- color: var(--uds-page-nav-item-color-active);
95
+ .page-frame-nav-item.is-selected {
96
+ .page-frame-nav-category {
97
+ color: var(--uds-page-nav-item-color-active);
98
+ }
99
+
100
+ .page-frame-nav-category-icon svg path {
101
+ fill: var(--uds-page-nav-item-color-active);
102
+ }
97
103
  }
98
104
 
99
- .page-frame-nav-item.is-selected .page-frame-nav-category-icon svg path,
100
- .page-frame-nav-item:hover .page-frame-nav-category-icon svg path {
101
- fill: var(--uds-page-nav-item-color-active);
105
+ .page-frame-nav-category:hover {
106
+ color: var(--uds-page-nav-item-color-active);
107
+
108
+ .page-frame-nav-category-icon svg path {
109
+ fill: var(--uds-page-nav-item-color-active);
110
+ }
102
111
  }
103
112
 
104
113
  .page-frame-nav-depth {
package/src/page-frame/desktop/styles/variables.scss CHANGED
@@ -3,27 +3,28 @@
3
3
 
4
4
  --uds-page-header-height: 7.2rem;
5
5
  --uds-page-header-border: var(--color-border-standard-cool-gray);
6
- --uds-page-header-padding-horizontal: var(--spacing-padding-9, 2.8rem);
7
- --uds-page-header-padding-vertical: var(--spacing-padding-5, 1.2rem);
6
+ --uds-page-header-padding-horizontal: var(--spacing-padding-9);
7
+ --uds-page-header-padding-vertical: var(--spacing-padding-5);
8
8
  --uds-page-header-background: var(--uds-page-frame-background);
9
- --uds-page-header-item-gap: var(--spacing-padding-5, 1.2rem);
9
+ --uds-page-header-item-gap: var(--spacing-padding-5);
10
10
 
11
11
  --uds-page-nav-width: 7.2rem;
12
12
  --uds-page-nav-body-padding-vertical: var(--spacing-padding-9);
13
+ --uds-page-nav-body-padding-horizontal: 0px;
13
14
  --uds-page-nav-border: var(--color-border-standard-cool-gray);
14
15
  --uds-page-nav-background: var(--uds-page-frame-background);
15
16
 
16
- --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
17
+ --uds-page-nav-logo-height: var(--uds-page-header-height);
17
18
 
18
19
  --uds-page-nav-list-padding-horizontal: 0rem;
19
20
  --uds-page-nav-list-padding-vertical: 0rem;
20
- --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
21
- --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
21
+ --uds-page-nav-item-height: var(--theme-size-medium-2);
22
+ --uds-page-nav-item-gap: var(--spacing-gap-6);
22
23
  --uds-page-nav-item-color-default: var(--color-label-standard);
23
24
  --uds-page-nav-item-color-active: var(--color-primary-default);
24
- --uds-page-nav-icon-size: var(--theme-size-small-2, 2.4rem);
25
+ --uds-page-nav-icon-size: var(--theme-size-small-2);
25
26
 
26
27
  --uds-page-body-background: var(--uds-page-frame-background);
27
- --uds-page-body-padding-horizontal: var(--spacing-padding-9, 2.8rem);
28
- --uds-page-body-padding-vertical: var(--spacing-padding-9, 2.8rem);
28
+ --uds-page-body-padding-horizontal: var(--spacing-padding-9);
29
+ --uds-page-body-padding-vertical: var(--spacing-padding-9);
29
30
  }