@natachah/vanilla-frontend 0.1.7 → 0.1.8

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 (5) hide show
  1. package/docs/src/js/doc-layout.js +1 -1
  2. package/docs/src/scss/layout.scss +1 -0
  3. package/{natachah-vanilla-frontend-0.1.7.tgz → natachah-vanilla-frontend-0.1.8.tgz} +0 -0
  4. package/package.json +1 -1
  5. package/scss/components/_drawer.scss +13 -9
package/docs/src/js/doc-layout.js CHANGED
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
18
18
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
19
19
  <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
20
20
  </svg>
21
- 0.1.7
21
+ 0.1.8
22
22
  </span>
23
23
  </li>
24
24
  <li>
package/docs/src/scss/layout.scss CHANGED
@@ -46,6 +46,7 @@ doc-layout {
46
46
 
47
47
  --drawer-display: grid;
48
48
  --drawer-transform: translatex(-100%);
49
+ --drawer-position: 0 auto 0 0;
49
50
 
50
51
  // Set the grid for the sidebar based on the parent grid
51
52
  grid-area: aside;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@natachah/vanilla-frontend",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "description": "A vanilla frontend framework",
5
5
  "keywords": [
6
6
  "html5",
package/scss/components/_drawer.scss CHANGED
@@ -17,9 +17,9 @@
17
17
  background-color: var(--drawer-background, var(--color-body));
18
18
 
19
19
  // Make the drawer as sticky for mobile
20
- position: sticky;
20
+ position: fixed;
21
21
  z-index: var(--drawer-index, 2);
22
- inset: var(--drawer-position, 0);
22
+ inset: var(--drawer-position, auto 0) auto auto;
23
23
 
24
24
  // Set the size
25
25
  width: var(--drawer-width, 320px);
@@ -55,35 +55,39 @@
55
55
  }
56
56
 
57
57
  .drawer-button {
58
+
58
59
  rect {
59
60
  transform-origin: center;
60
61
 
61
62
  @media screen and (prefers-reduced-motion: no-preference) {
62
- transition: y .25s ease-in-out .25s, rotate .25s ease-in-out, opacity 0ms .25s;
63
+ transition: y .25s ease-in-out .25s, rotate .25s ease-in-out;
63
64
  }
64
65
  }
65
66
 
66
- // Active
67
67
  &[aria-expanded=true] {
68
68
 
69
- // Remove the middle bar
70
- rect:not(:first-child, :last-child) {
71
- opacity: 0;
69
+ @media screen and (prefers-reduced-motion: no-preference) {
70
+ rect {
71
+ transition: y .25s ease-in-out, rotate .25s ease-in-out .25s;
72
+ }
72
73
  }
73
74
 
74
- // Change the first bar
75
75
  rect:first-child {
76
76
  y: calc(50% - var(--svg-line-size, 10px) / 2);
77
77
  rotate: 45deg;
78
78
  }
79
79
 
80
- // Change the last bar
80
+ rect:not(:first-child, :last-child) {
81
+ opacity: 0;
82
+ }
83
+
81
84
  rect:last-child {
82
85
  y: calc(50% - var(--svg-line-size, 10px) / 2);
83
86
  rotate: -45deg;
84
87
  }
85
88
 
86
89
  }
90
+
87
91
  }
88
92
 
89
93
  body #backdrop {