@inc2734/unitone-css 0.94.3 → 0.95.0

package/src/layout-primitives/with-sidebar/_with-sidebar.scss

@@ -1,337 +1,3 @@
-@use 'sass:list';
-@use 'sass:selector';
-@use 'sass:string';
+@forward './with-sidebar-core';
 
-@mixin _aside() {
-  flex-basis: var(--unitone--sidebar-width);
-  flex-grow: 1;
-  min-width: 1rem;
-}
-
-@mixin _main() {
-  flex-basis: 0;
-  flex-grow: 999;
-  min-width: min(100%, var(--unitone--content-min-width));
-  max-width: min(100%, var(--unitone--content-max-width));
-}
-
-$selector-main-aside: (
-  ':not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar:right"]',
-  ':not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-sidebar:left"])',
-  '[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar:left"]'
-);
-
-$selector-aside-main: (
-  ':not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar:left"]',
-  '[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar:right"]',
-  '[data-unitone-layout~="-revert"]:not([data-unitone-layout~="-sidebar:left"])'
-);
-
-$selector-right-sidebar: (
-  '[data-unitone-layout~="-sidebar:right"]',
-  ':not([data-unitone-layout~="-sidebar:left"])'
-);
-
-$selector-left-sidebar: (
-  '[data-unitone-layout~="-sidebar:left"]',
-);
-
-@mixin abstract-with-sidebar() {
-  --unitone--sidebar-width: auto;
-  --unitone--content-min-width: 50%;
-  --unitone--content-max-width: 100%;
-  --unitone--gap: var(--unitone--global--gap);
-  --unitone--column-gap: var(--unitone--gap);
-  --unitone--row-gap: var(--unitone--gap);
-  --unitone--align-items: stretch;
-  --unitone--overflow: visible;
-
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: var(--unitone--column-gap);
-  row-gap: var(--unitone--row-gap);
-  align-items: var(--unitone--align-items);
-  overflow: var(--unitone--overflow);
-
-  &:where(#{ $selector-main-aside }) > :first-child,
-  &:where(#{ $selector-aside-main }) > :nth-child(2) {
-    @include _main();
-  }
-
-  &:where(#{ $selector-main-aside }) > :nth-child(2),
-  &:where(#{ $selector-aside-main }) > :first-child {
-    @include _aside();
-  }
-
-  &[data-unitone-layout~="-revert"] {
-    flex-direction: row-reverse;
-  }
-
-  &:where([data-unitone-layout*="-divider\:"]) {
-    --unitone--divider-width: 1px;
-    --unitone--divider-style: solid;
-    --unitone--divider-color: var(--unitone--color--gray);
-
-    visibility: hidden;
-
-    &[data-unitone-layout~="divider:initialized"] {
-      visibility: visible;
-    }
-
-    > * {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: var(--unitone--align-items);
-    }
-
-    > ::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      user-select: none;
-      pointer-events: none;
-      border-width: 0;
-      border-style: var(--unitone--divider-style);
-      border-color: var(--unitone--divider-color);
-    }
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      // When -bol / -linewrap is added, the vertical/horizontal layout may switch.
-      // This will break the design.
-      // This is necessary to prevent this.
-      --unitone--content-min-width: 100% !important;
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:stripe"] {
-    align-items: stretch;
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      row-gap: 0;
-
-      &:where(#{ $selector-main-aside }) > :first-child,
-      &:where(#{ $selector-aside-main }) > :nth-child(2) {
-        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-top-width: var(--unitone--divider-width);
-          border-bottom-width: var(--unitone--divider-width);
-        }
-      }
-
-      &:where(#{ $selector-aside-main }) > :first-child {
-        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-        padding-bottom: calc(var(--unitone--row-gap));
-
-        &::before {
-          border-top-width: var(--unitone--divider-width);
-        }
-      }
-
-       &:where(#{ $selector-main-aside }) > :nth-child(2) {
-        padding-top: var(--unitone--row-gap);
-        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-bottom-width: var(--unitone--divider-width);
-        }
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      column-gap: 0;
-
-      > * {
-        padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-        padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
-      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
-        &::before {
-          border-right-width: var(--unitone--divider-width);
-          border-left-width: var(--unitone--divider-width);
-        }
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
-      &:where([data-unitone-layout~="-revert"]) > :first-child {
-        &::before {
-          border-right-width: var(--unitone--divider-width);
-        }
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:divide"] {
-    align-items: stretch;
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      row-gap: 0;
-
-      > :first-child {
-        &::before {
-          border-width: 0 0 var(--unitone--divider-width);
-        }
-      }
-
-      &:where(#{ $selector-main-aside }) > :first-child {
-        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-main-aside }) > :nth-child(2) {
-        padding-top: var(--unitone--row-gap);
-      }
-
-      &:where(#{ $selector-aside-main }) > :first-child {
-        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-aside-main }) > :nth-child(2) {
-        padding-top: var(--unitone--row-gap);
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      column-gap: 0;
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
-      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
-        padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-right-width: var(--unitone--divider-width);
-        }
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
-      &:where([data-unitone-layout~="-revert"]) > :first-child {
-        padding-left: var(--unitone--column-gap);
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:slash"] {
-    --unitone--divider-height: 2rem;
-
-    gap: 0;
-    align-items: stretch;
-
-    > :first-child::before {
-      right: auto;
-      height: var(--unitone--divider-height);
-      border-left-width: var(--unitone--divider-width);
-      border-color: color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
-      transform: rotate(22.5deg);
-    }
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      > :first-child {
-        padding-bottom: var(--unitone--row-gap);
-
-        &::before {
-          inset:
-            100%
-            auto
-            auto
-            calc(50% - var(--unitone--divider-width) / 2);
-        }
-      }
-
-      > :nth-child(2) {
-        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-height));
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
-      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
-        padding-right: var(--unitone--column-gap);
-
-        &::before {
-          right: auto;
-          bottom: auto;
-          left: 100%;
-        }
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
-      &:where([data-unitone-layout~="-revert"]) > :first-child {
-        padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:bordered"] {
-    gap: 0;
-    align-items: stretch;
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      > ::before {
-        border-width: var(--unitone--divider-width);
-      }
-
-      > :nth-child(2)::before {
-        border-top-width: 0;
-      }
-
-      &:where(#{ $selector-main-aside }) > :first-child {
-        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-main-aside }) > :nth-child(2) {
-        padding:
-          var(--unitone--row-gap)
-          calc(var(--unitone--row-gap) + var(--unitone--divider-width))
-          calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-aside-main }) > :first-child {
-        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-aside-main }) > :nth-child(2) {
-        padding:
-          var(--unitone--row-gap)
-          calc(var(--unitone--row-gap) + var(--unitone--divider-width))
-          calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      > * {
-        padding: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-width: var(--unitone--divider-width);
-        }
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
-      &:where([data-unitone-layout~="-revert"]) > :first-child {
-        padding-left: var(--unitone--column-gap);
-
-        &::before {
-          border-left: 0;
-        }
-      }
-    }
-  }
-}
-
-@mixin with-sidebar() {
-  [data-unitone-layout~="with-sidebar"] {
-    @include abstract-with-sidebar();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/with-sidebar/with-sidebar' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/with-sidebar' instead.";

package/src/layout-primitives/with-sidebar/react.jsx

@@ -0,0 +1,3 @@
+import '../../behaviors/dividers';
+
+export { WithSidebar } from './index';