@dxos/ui-theme 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/src/css/layout/main.css

@@ -0,0 +1,212 @@
+/**
+ * Main
+ */
+
+@layer dx-components {
+  /**
+   * Main Web app.
+   */
+  .dx-main-bounce-layout {
+    @apply fixed overflow-auto overscroll-auto;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    z-index: 0;
+  }
+
+  /**
+   * Main Mobile app.
+   */
+  .dx-main-mobile-layout {
+    @apply absolute inset-0 overflow-hidden flex flex-col;
+  }
+
+  /** TODO(burdon): Reconcile with dx-main-bounce-layout */
+  .dx-main-content-padding-transitions {
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
+  }
+
+  /**
+   *
+   */
+  .dx-main-intrinsic-size {
+    inline-size: calc(100dvw - 2 * var(--main-spacing));
+    transition-property: inline-size;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+
+    @media (width >= theme(--breakpoint-lg)) {
+      &[data-sidebar-left-state='closed'][data-sidebar-right-state='closed'] {
+        inline-size: calc(100dvw - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='closed'] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='closed'] {
+        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - 2 * var(--main-spacing));
+      }
+
+      &[data-sidebar-left-state='closed'][data-sidebar-right-state='collapsed'] {
+        inline-size: calc(100dvw - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='collapsed'] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='collapsed'] {
+        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+
+      &[data-sidebar-left-state='closed'][data-sidebar-right-state='expanded'] {
+        inline-size: calc(100dvw - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='expanded'] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='expanded'] {
+        inline-size: calc(
+          100dvw - var(--dx-nav-sidebar-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing)
+        );
+      }
+    }
+  }
+}
+
+@layer dx-components {
+  .dx-main-sidebar {
+    @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    @apply border-primary-separator rounded-md;
+    @apply backdrop-blur-md;
+    .dark & {
+      @apply backdrop-blur-lg;
+    }
+    background-color: var(--color-sidebar-surface);
+    --surface-bg: var(--color-sidebar-surface);
+
+    transition-property: inset-inline-start, inset-inline-end, inline-size;
+    inset-block-start: max(0.5rem, env(safe-area-inset-top));
+    inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
+    inline-size: calc(100dvw - 3rem);
+    z-index: 7;
+
+    @media (width >= theme(--breakpoint-lg)) {
+      @apply top-0 bottom-0 rounded-none border-y-0;
+    }
+
+    &[data-resizing='false'] {
+      @apply duration-200;
+    }
+
+    &[data-side='is'] {
+      @apply -start-[100vw] border-e;
+      border-inline-end-width: var(--border-width-landmark-line) !important;
+      border-inline-end-style: solid;
+      z-index: 8;
+
+      &[data-state='expanded'] {
+        inset-inline-start: max(0.5rem, env(safe-area-inset-left));
+        @media (width >= theme(--breakpoint-lg)) {
+          @apply start-0;
+        }
+      }
+
+      @media (width >= theme(--breakpoint-sm)) {
+        @apply w-(--dx-nav-sidebar-size);
+      }
+
+      @media (width >= theme(--breakpoint-lg)) {
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
+
+        &[data-state='collapsed'] {
+          @apply w-(--dx-l0-size) start-0;
+        }
+        &[data-state='expanded'] {
+          @apply w-(--dx-nav-sidebar-size);
+        }
+      }
+    }
+
+    &[data-side='ie'] {
+      @apply -end-[100vw] border-s;
+      border-inline-start-width: var(--border-width-landmark-line);
+      border-inline-start-style: solid;
+
+      &[data-state='expanded'] {
+        inset-inline-end: max(0.5rem, env(safe-area-inset-right));
+        @media (width >= theme(--breakpoint-lg)) {
+          @apply end-0;
+        }
+      }
+
+      @media (width >= theme(--breakpoint-sm)) {
+        @apply w-(--dx-complementary-sidebar-size);
+      }
+
+      @media (width >= theme(--breakpoint-lg)) {
+        border-inline-end-width: 0;
+
+        &[data-state='collapsed'] {
+          @apply w-(--dx-r0-size) end-0;
+        }
+        &[data-state='expanded'] {
+          @apply w-(--dx-complementary-sidebar-size);
+        }
+      }
+    }
+  }
+
+  .dx-main-overlay {
+    @apply fixed inset-0 bg-scrim-surface;
+    transition-property: opacity;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    @apply opacity-0 hidden;
+    z-index: 6;
+
+    &[data-state='open'] {
+      @apply opacity-100 block;
+
+      @media (width >= theme(--breakpoint-lg)) {
+        @apply opacity-100 hidden;
+      }
+    }
+  }
+
+  /**
+   * Main content padding.
+   */
+  .dx-main-content-padding {
+    padding-inline-start: 0;
+    scroll-padding-inline-start: 0;
+    padding-inline-end: 0;
+    scroll-padding-inline-end: 0;
+
+    @media (width >= theme(--breakpoint-lg)) {
+      &[data-sidebar-left-state='collapsed'] {
+        padding-inline-start: var(--dx-l0-size);
+        scroll-padding-inline-start: var(--dx-l0-size);
+      }
+      &[data-sidebar-left-state='expanded'] {
+        padding-inline-start: var(--dx-nav-sidebar-size);
+        scroll-padding-inline-start: var(--dx-nav-sidebar-size);
+      }
+
+      &[data-sidebar-right-state='collapsed'] {
+        padding-inline-end: var(--dx-r0-size);
+        scroll-padding-inline-end: var(--dx-r0-size);
+      }
+      &[data-sidebar-right-state='expanded'] {
+        padding-inline-end: var(--dx-complementary-sidebar-size);
+        scroll-padding-inline-end: var(--dx-complementary-sidebar-size);
+      }
+    }
+  }
+}

package/src/{styles/layers → css/layout}/native.css

@@ -1,20 +1,22 @@
-@layer utilities {
+/**
+ * Native app
+ */
 
+@layer dx-components {
   /**
    * Native app drag regions.
    * For Tauri apps, the data-tauri-drag-region attribute is applied
    * automatically by plugin-native (Tauri doesn't support -webkit-app-region).
    * The CSS properties below are for Electron/PWA compatibility.
    */
-  .app-drag {
+  .dx-app-drag {
     -webkit-user-select: none;
     -webkit-app-region: drag;
     --app-region: drag;
   }
 
-  .app-no-drag {
+  .dx-app-no-drag {
     -webkit-app-region: no-drag;
     --app-region: no-drag;
   }
-
 }

package/src/css/layout/positioning.css

@@ -0,0 +1,19 @@
+/**
+ * Positioning
+ */
+
+@layer dx-components {
+  .dx-contain-layout {
+    contain: layout;
+  }
+
+  .dx-sticky-top-0 {
+    --sticky-top: 0;
+  }
+  .dx-sticky-top-from-topbar-bottom {
+    --sticky-top: var(--dx-topbar-size);
+  }
+  .dx-sticky-bottom-from-statusbar-bottom {
+    --sticky-bottom: var(--dx-statusbar-size);
+  }
+}