@pathscale/ui 1.2.6 → 1.2.8

package/dist/components/floating-dock/FloatingDock.css

@@ -1,208 +1,208 @@
-@layer components {
-  /* -------------------------------------------------------------------------------------------------
-   * Dock container
-   * -----------------------------------------------------------------------------------------------*/
-  .floating-dock {
-    position: relative;
-    display: inline-flex;
-    align-items: flex-end;
-    overflow: visible;
-  }
-
-  .floating-dock__bar {
-    position: relative;
-    display: flex;
-    align-items: flex-end;
-    overflow: visible;
-  }
-
-  .floating-dock__bar--horizontal {
-    flex-direction: row;
-  }
-
-  .floating-dock__bar--vertical {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Background panel — original soft-edge shape with a subtle glass treatment.
-   * Per customer feedback: keep the prior shape/borders, only add a glass feel.
-   * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__bg {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    border-radius: 1rem;
-    background-color: color-mix(in srgb, var(--color-base-100) 55%, transparent);
-    backdrop-filter: blur(12px) saturate(160%);
-    -webkit-backdrop-filter: blur(12px) saturate(160%);
-    box-shadow:
-      inset 0 1px 0 0 var(--color-base-300),
-      0 1px 0 0 var(--color-base-100);
-    pointer-events: none;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Item wrapper — original look: rounded pill, semi-opaque, hover bumps opacity.
-   * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    background-color: transparent;
-    opacity: 0.8;
-    transform-origin: bottom center;
-    will-change: transform;
-    transition: opacity 150ms ease;
-  }
-
-  .floating-dock__item:hover {
-    opacity: 1;
-  }
-
-  .floating-dock__item:active {
-    opacity: 0.6;
-  }
-
-  .floating-dock__button-reset {
-    appearance: none;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    cursor: pointer;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Icon container
-   * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    will-change: transform;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Tooltip
-   * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__tooltip {
-    position: fixed;
-    z-index: 9999;
-    width: fit-content;
-    pointer-events: none;
-    white-space: pre;
-    border-radius: var(--radius-field, 0.375rem);
-    border: 1px solid var(--color-base-300);
-    background-color: color-mix(in srgb, var(--color-base-100) 75%, transparent);
-    backdrop-filter: blur(8px) saturate(160%);
-    -webkit-backdrop-filter: blur(8px) saturate(160%);
-    color: var(--color-base-content);
-    padding: 0.125rem 0.5rem;
-    font-size: 0.75rem;
-    opacity: 0;
-    animation: floating-dock-fade-in 150ms ease forwards;
-  }
-
-  @keyframes floating-dock-fade-in {
-    to {
-      opacity: 1;
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Mobile
-   * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__mobile {
-    position: relative;
-    display: block;
-  }
-
-  .floating-dock__mobile-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    background-color: var(--color-base-200);
-    border: none;
-    padding: 0;
-    cursor: pointer;
-  }
-
-  .floating-dock__mobile-popup {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .floating-dock__mobile-popup--top {
-    inset: auto 0 100% 0;
-    margin-bottom: 0.5rem;
-  }
-
-  .floating-dock__mobile-popup--bottom {
-    inset: 100% 0 auto 0;
-    margin-top: 0.5rem;
-  }
-
-  .floating-dock__mobile-popup--left {
-    right: 100%;
-    top: 0;
-    margin-right: 0.5rem;
-  }
-
-  .floating-dock__mobile-popup--right {
-    left: 100%;
-    top: 0;
-    margin-left: 0.5rem;
-  }
-
-  .floating-dock__mobile-item {
-    opacity: 0;
-    animation: floating-dock-fade-in 200ms ease forwards;
-  }
-
-  .floating-dock__menu-icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-  }
-
-  /* a11y */
-  @media (prefers-reduced-transparency: reduce) {
-    .floating-dock__bg,
-    .floating-dock__tooltip {
-      backdrop-filter: none;
-      -webkit-backdrop-filter: none;
-      background-color: var(--color-base-100);
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Responsive: hide desktop on small, mobile on large
-   * -----------------------------------------------------------------------------------------------*/
-  @media (max-width: 767px) {
-    .floating-dock__bar {
-      display: none;
-    }
-
-    /* mobileMode="dock": show the full bar on mobile instead of burger */
-    .floating-dock__bar--mobile-dock {
-      display: flex;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .floating-dock__mobile {
-      display: none;
-    }
-
-    .floating-dock__bar--mobile-dock {
-      display: none;
-    }
-  }
-}
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Dock container
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-end;
+    overflow: visible;
+  }
+
+  .floating-dock__bar {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    overflow: visible;
+  }
+
+  .floating-dock__bar--horizontal {
+    flex-direction: row;
+  }
+
+  .floating-dock__bar--vertical {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Background panel — original soft-edge shape with a subtle glass treatment.
+   * Per customer feedback: keep the prior shape/borders, only add a glass feel.
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__bg {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: 1rem;
+    background-color: color-mix(in srgb, var(--color-base-100) 55%, transparent);
+    backdrop-filter: blur(12px) saturate(160%);
+    -webkit-backdrop-filter: blur(12px) saturate(160%);
+    box-shadow:
+      inset 0 1px 0 0 var(--color-base-300),
+      0 1px 0 0 var(--color-base-100);
+    pointer-events: none;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Item wrapper — original look: rounded pill, semi-opaque, hover bumps opacity.
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background-color: transparent;
+    opacity: 0.8;
+    transform-origin: bottom center;
+    will-change: transform;
+    transition: opacity 150ms ease;
+  }
+
+  .floating-dock__item:hover {
+    opacity: 1;
+  }
+
+  .floating-dock__item:active {
+    opacity: 0.6;
+  }
+
+  .floating-dock__button-reset {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Icon container
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    will-change: transform;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Tooltip
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__tooltip {
+    position: fixed;
+    z-index: 9999;
+    width: fit-content;
+    pointer-events: none;
+    white-space: pre;
+    border-radius: var(--radius-field, 0.375rem);
+    border: 1px solid var(--color-base-300);
+    background-color: color-mix(in srgb, var(--color-base-100) 75%, transparent);
+    backdrop-filter: blur(8px) saturate(160%);
+    -webkit-backdrop-filter: blur(8px) saturate(160%);
+    color: var(--color-base-content);
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    opacity: 0;
+    animation: floating-dock-fade-in 150ms ease forwards;
+  }
+
+  @keyframes floating-dock-fade-in {
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Mobile
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__mobile {
+    position: relative;
+    display: block;
+  }
+
+  .floating-dock__mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background-color: var(--color-base-200);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .floating-dock__mobile-popup {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .floating-dock__mobile-popup--top {
+    inset: auto 0 100% 0;
+    margin-bottom: 0.5rem;
+  }
+
+  .floating-dock__mobile-popup--bottom {
+    inset: 100% 0 auto 0;
+    margin-top: 0.5rem;
+  }
+
+  .floating-dock__mobile-popup--left {
+    right: 100%;
+    top: 0;
+    margin-right: 0.5rem;
+  }
+
+  .floating-dock__mobile-popup--right {
+    left: 100%;
+    top: 0;
+    margin-left: 0.5rem;
+  }
+
+  .floating-dock__mobile-item {
+    opacity: 0;
+    animation: floating-dock-fade-in 200ms ease forwards;
+  }
+
+  .floating-dock__menu-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  }
+
+  /* a11y */
+  @media (prefers-reduced-transparency: reduce) {
+    .floating-dock__bg,
+    .floating-dock__tooltip {
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+      background-color: var(--color-base-100);
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Responsive: hide desktop on small, mobile on large
+   * -----------------------------------------------------------------------------------------------*/
+  @media (max-width: 767px) {
+    .floating-dock__bar {
+      display: none;
+    }
+
+    /* mobileMode="dock": show the full bar on mobile instead of burger */
+    .floating-dock__bar--mobile-dock {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .floating-dock__mobile {
+      display: none;
+    }
+
+    .floating-dock__bar--mobile-dock {
+      display: none;
+    }
+  }
+}