srcdev-nuxt-components 9.1.49 → 9.1.50

package/app/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -57,152 +57,152 @@ watch(
 
 <style lang="css">
 @layer components {
-@layer deep-expanding-menu-setup {
-  @position-try --anchor-left {
-    inset: auto;
-    top: calc(anchor(bottom) + 10px);
-    left: calc(anchor(left) + 10px);
-  }
+  @layer deep-expanding-menu-setup {
+    @position-try --anchor-left {
+      inset: auto;
+      top: calc(anchor(bottom) + 10px);
+      left: calc(anchor(left) + 10px);
+    }
 
-  @position-try-fallbacks --anchor-right {
-    inset: auto;
-    top: calc(anchor(bottom) + 10px);
-    right: calc(anchor(right) + 10px);
-  }
+    @position-try-fallbacks --anchor-right {
+      inset: auto;
+      top: calc(anchor(bottom) + 10px);
+      right: calc(anchor(right) + 10px);
+    }
 
-  .deep-expanding-menu {
-    --_gap-between-top-level-items: 24px;
+    .deep-expanding-menu {
+      --_gap-between-top-level-items: 24px;
 
-    container-type: inline-size;
-    display: grid;
-    grid-template-areas: "element-stack";
+      container-type: inline-size;
+      display: grid;
+      grid-template-areas: "element-stack";
 
-    .inner {
-      grid-area: element-stack;
-      display: flex;
-      gap: var(--_gap-between-top-level-items);
-      align-items: center;
+      .inner {
+        grid-area: element-stack;
+        display: flex;
+        gap: var(--_gap-between-top-level-items);
+        align-items: center;
 
-      .navigation-link,
-      .navigation-group-toggle {
-        all: unset;
-        border-bottom: 2px solid transparent;
-        padding-block: 8px;
+        .navigation-link,
+        .navigation-group-toggle {
+          all: unset;
+          border-bottom: 2px solid transparent;
+          padding-block: 8px;
 
-        transition: border-color 200ms;
+          transition: border-color 200ms;
 
-        &:hover {
-          cursor: pointer;
-          border-color: light-dark(var(--blue-10), var(--slate-00));
-        }
+          &:hover {
+            cursor: pointer;
+            border-color: light-dark(var(--blue-10), var(--slate-00));
+          }
 
-        &:focus {
-          border-color: light-dark(var(--blue-10), var(--slate-00));
-        }
+          &:focus {
+            border-color: light-dark(var(--blue-10), var(--slate-00));
+          }
 
-        &:focus-visible {
-          border-color: light-dark(var(--blue-10), var(--slate-00));
+          &:focus-visible {
+            border-color: light-dark(var(--blue-10), var(--slate-00));
+          }
         }
-      }
 
-      .navigation-group {
-        --_icon-transform: scaleY(1);
-        position: relative;
+        .navigation-group {
+          --_icon-transform: scaleY(1);
+          position: relative;
 
-        .navigation-group-toggle {
-          anchor-name: var(--_anchor-name);
+          .navigation-group-toggle {
+            anchor-name: var(--_anchor-name);
 
-          display: flex;
-          align-items: center;
-          gap: 12px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
 
-          .icon {
-            display: block;
-            font-size: 1.2rem;
+            .icon {
+              display: block;
+              font-size: 1.2rem;
 
-            transform: var(--_icon-transform);
-            transition: transform 200ms;
+              transform: var(--_icon-transform);
+              transition: transform 200ms;
+            }
           }
-        }
 
-        .navigation-group-panel {
-          display: none;
-          position: absolute;
-          position-anchor: var(--_anchor-name);
-          margin: 0;
-          /* inset: auto; */
-          top: calc(anchor(bottom) + 10px);
-          left: calc(anchor(left) + 0px);
-
-          opacity: 0;
-          transition:
-            opacity 200ms,
-            display 200ms,
-            overlay 200ms;
-          transition-behavior: allow-discrete;
-
-          width: min(100%, 50vw);
-
-          background-color: white;
-          border: 1px solid black;
-          border-radius: 12px;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          padding: 12px;
-          overflow: clip;
-
-          &:popover-open {
-            display: block;
-            opacity: 1;
-
-            @starting-style {
+          .navigation-group-panel {
+            display: none;
+            position: absolute;
+            position-anchor: var(--_anchor-name);
+            margin: 0;
+            /* inset: auto; */
+            top: calc(anchor(bottom) + 10px);
+            left: calc(anchor(left) + 0px);
+
+            opacity: 0;
+            transition:
+              opacity 200ms,
+              display 200ms,
+              overlay 200ms;
+            transition-behavior: allow-discrete;
+
+            width: min(100%, 50vw);
+
+            background-color: white;
+            border: 1px solid black;
+            border-radius: 12px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            padding: 12px;
+            overflow: clip;
+
+            &:popover-open {
               display: block;
-              opacity: 0;
+              opacity: 1;
+
+              @starting-style {
+                display: block;
+                opacity: 0;
+              }
             }
-          }
 
-          h4 {
-            color: var(--slate-10);
-          }
+            h4 {
+              color: var(--slate-10);
+            }
 
-          .navigation-group-list {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 12px;
-            padding-inline-start: 0;
-            margin-block-end: 8px;
+            .navigation-group-list {
+              display: grid;
+              grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+              gap: 12px;
+              padding-inline-start: 0;
+              margin-block-end: 8px;
 
-            .navigation-group-item {
-              display: block;
+              .navigation-group-item {
+                display: block;
 
-              a.navigation-group-link {
-                display: inline-block;
-                color: var(--slate-10);
-                text-decoration: none;
-                padding-block: 8px;
+                a.navigation-group-link {
+                  display: inline-block;
+                  color: var(--slate-10);
+                  text-decoration: none;
+                  padding-block: 8px;
 
-                border-bottom: 2px solid transparent;
+                  border-bottom: 2px solid transparent;
 
-                transition: border-color 200ms;
+                  transition: border-color 200ms;
 
-                &:hover {
-                  cursor: pointer;
-                  border-color: var(--slate-10);
-                }
+                  &:hover {
+                    cursor: pointer;
+                    border-color: var(--slate-10);
+                  }
 
-                &:focus-visible {
-                  border-color: var(--slate-10);
+                  &:focus-visible {
+                    border-color: var(--slate-10);
+                  }
                 }
               }
             }
           }
-        }
 
-        &:has(.navigation-group-panel:popover-open) {
-          --_icon-transform: scaleY(-1);
+          &:has(.navigation-group-panel:popover-open) {
+            --_icon-transform: scaleY(-1);
+          }
         }
       }
     }
   }
 }
-}
 </style>