@quaffui/quaff 0.1.0-prealpha7 → 0.1.0-prealpha9

package/dist/components/icon/QIcon.svelte

@@ -1,20 +1,13 @@
 <script>import { createClasses, createStyles } from "../../utils/props";
 import { isNumber } from "../../utils/types";
 import { sizes } from "../../composables/use-size";
+import { useSize } from "../../composables/use-size";
 export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
-let sizeStyle;
-$: {
-  if (isNumber(size)) {
-    sizeStyle = `${size}px`;
-  } else if (typeof size === "string" && !sizes.includes(size)) {
-    sizeStyle = size;
-  } else {
-    sizeStyle = void 0;
-  }
-}
 $:
-  classes = createClasses([type, filled && "filled", sizes.includes(size) && size], {
+  sizeObj = useSize(size);
+$:
+  classes = createClasses([type, filled && "filled", sizeObj.class], {
     component: "q-icon",
     userClasses,
     quaffClasses: [color && `text-${color}`]
@@ -22,7 +15,7 @@ $:
 $:
   style = createStyles(
     {
-      "--size": sizeStyle
+      "--size": sizeObj.style
     },
     userStyles
   );

package/dist/components/icon/props.d.ts

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export type QIconSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string | number;
+import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
+export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
 export interface QIconProps extends NativeProps {
     /**

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
 import QFooter from "./footer/QFooter.svelte";
+import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
 import QInput from "./input/QInput.svelte";
 import QSelect from "./select/QSelect.svelte";
@@ -27,4 +28,4 @@ import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -9,6 +9,7 @@ import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
 import QFooter from "./footer/QFooter.svelte";
+import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
 import QInput from "./input/QInput.svelte";
 import QSelect from "./select/QSelect.svelte";
@@ -27,4 +28,4 @@ import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/layout/index.scss

@@ -9,6 +9,8 @@
   --right-drawer-width: 300px;
 }
 
+$contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
+
 .q-layout {
   position: relative;
   width: 100%;
@@ -17,7 +19,7 @@
   min-height: 100%;
   overflow: hidden;
 
-  & > :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
+  & > #{$contentSlot} {
     height: 100%;
     overflow: auto;
     transition: padding var(--speed3);
@@ -35,18 +37,18 @@
   min-height: unset;
   border-radius: 0;
 
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
+  &--fixed {
     position: fixed;
 
     &::before {
       margin: 0;
     }
   }
+
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
 }
 
 .q-layout > .q-footer {
@@ -60,12 +62,7 @@
   min-height: unset;
   border-radius: 0;
 
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
+  &--fixed {
     position: fixed;
 
     &::before {
@@ -73,7 +70,12 @@
     }
   }
 
-  & ~ :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
+
+  & ~ #{$contentSlot} {
     padding-bottom: var(--footer-height);
   }
 }
@@ -89,28 +91,28 @@
   overflow: auto;
   transition: all var(--speed3);
 
-  &.above {
+  &--above {
     z-index: 105;
   }
 
-  &.fixed {
+  &--fixed {
     position: fixed;
   }
 
-  &.left {
+  &--left {
     left: 0px;
     width: var(--left-railbar-width);
 
-    &.bordered {
+    &.q-railbar--bordered {
       border-right: 0.0625rem solid var(--outline);
     }
   }
 
-  &.right {
+  &--right {
     right: 0px;
     width: var(--right-railbar-width);
 
-    &.bordered {
+    &.q-railbar--bordered {
       border-left: 0.0625rem solid var(--outline);
     }
   }
@@ -149,29 +151,20 @@
 }
 
 .q-layout > .q-drawer {
-  //TODO Problems with z-index between multiple layouts
   z-index: 101;
   border-radius: 0;
 
-  &.above {
+  &--above {
     z-index: 104;
   }
 
-  &.border-radius {
-    &__left {
-      &--top {
-        border-top-left-radius: 16px;
-      }
-      &--bottom {
-        border-bottom-left-radius: 16px;
-      }
-    }
-    &__right {
-      &--top {
-        border-top-right-radius: 16px;
-      }
-      &--bottom {
-        border-bottom-right-radius: 16px;
+  $horizontal: "left", "right";
+  $vertical: "top", "bottom";
+
+  @each $vPos in $vertical {
+    @each $hPos in $horizontal {
+      &--#{$vPos}-#{$hPos}-radius {
+        border-#{$vPos}-#{$hPos}-radius: 16px;
       }
     }
   }
@@ -245,33 +238,35 @@ $elements: (
 
 // Offset for content
 .q-layout {
-  & > .q-header ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-header ~ #{$contentSlot} {
     padding-top: var(--header-height);
   }
-  & > .q-footer ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-footer ~ #{$contentSlot} {
     padding-bottom: var(--footer-height);
   }
-  & > .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+
+  & > .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--overlay) ~ #{$contentSlot} {
     padding-left: $L_Drawer;
   }
-  & > .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-drawer.q-drawer--active.q-drawer--right:not(.q-drawer--overlay) ~ #{$contentSlot} {
     padding-right: $R_Drawer;
   }
-  & > .q-railbar.left:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+
+  & > .q-railbar.q-railbar--left:not([style="display: none"]) {
+    & ~ #{$contentSlot} {
       padding-left: $L_Railbar;
     }
 
-    & ~ .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    & ~ .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--overlay) ~ #{$contentSlot} {
       padding-left: $L_Full;
     }
   }
-  & > .q-railbar.right:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-railbar.q-railbar--right:not([style="display: none"]) {
+    & ~ #{$contentSlot} {
       padding-right: $R_Railbar;
     }
 
-    & ~ .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    & ~ .q-drawer.q-drawer--active.q-drawer--right:not(.q-drawer--overlay) ~ #{$contentSlot} {
       padding-right: $R_Full;
     }
   }
@@ -280,31 +275,48 @@ $elements: (
 // Inline offset for header, footer and drawers
 .q-layout {
   @each $pos, $el in $elements {
-    & > .q-railbar.left:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.left {
+    & > .q-railbar.q-railbar--left:not([style="display: none"]) {
+      &:not(.q-railbar--offset-#{$pos}) ~ .q-#{$el},
+      & ~ .q-drawer.q-drawer--left {
         left: $L_Railbar;
       }
 
-      & ~ .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+      &
+        ~ .q-drawer.q-drawer--active.q-drawer--left:not(
+          .q-drawer--offset-#{$pos},
+          .q-drawer--overlay
+        )
+        ~ .q-#{$el} {
         left: $L_Full;
       }
     }
-    & > .q-railbar.right:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.right {
+    & > .q-railbar.q-railbar--right:not([style="display: none"]) {
+      &:not(.q-railbar--offset-#{$pos}) ~ .q-#{$el},
+      & ~ .q-drawer.q-drawer--right {
         right: $R_Railbar;
       }
 
-      & ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+      &
+        ~ .q-drawer.q-drawer--active.q-drawer--right:not(
+          .q-drawer--offset-#{$pos},
+          .q-drawer--overlay
+        )
+        ~ .q-#{$el} {
         right: $R_Full;
       }
     }
 
-    & > .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+    &
+      > .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
+      ~ .q-#{$el} {
       left: $L_Drawer;
     }
-    & > .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+    &
+      > .q-drawer.q-drawer--active.q-drawer--right:not(
+        .q-drawer--offset-#{$pos},
+        .q-drawer--overlay
+      )
+      ~ .q-#{$el} {
       right: $R_Drawer;
     }
   }
@@ -313,40 +325,40 @@ $elements: (
 // Width for header and footer
 .q-layout {
   @each $pos, $el in $elements {
-    & > .q-railbar.left:not(.offset-#{$pos}, [style="display: none"]) {
+    & > .q-railbar.q-railbar--left:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
       // Left railbar
       & ~ .q-#{$el} {
         width: without($L_Railbar);
       }
 
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+      & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
         @include include-drawers(without($L_Railbar), $pos, $el);
       }
 
-      & ~ .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
+      & ~ .q-railbar.q-railbar--right:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
         // Left railbar + Right railbar
         & ~ .q-#{$el} {
           width: without($LR_Railbar);
         }
 
-        & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+        & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
           @include include-drawers(without($LR_Railbar), $pos, $el);
         }
       }
     }
 
-    & > .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
+    & > .q-railbar.q-railbar--right:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
       // Right railbar
       & ~ .q-#{$el} {
         width: without($R_Railbar);
       }
 
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+      & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
         @include include-drawers(without($R_Railbar), $pos, $el);
       }
     }
 
-    & > .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+    & > .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
       @include include-drawers(100%, $pos, $el);
     }
   }
@@ -354,19 +366,21 @@ $elements: (
 
 // Height for railbars and drawers
 .q-layout {
-  & > .q-railbar,
-  & > .q-drawer {
-    &.offset-top.offset-bottom {
-      height: calc(100% - var(--header-height) - var(--footer-height));
+  $drawerTypes: ".q-railbar", ".q-drawer";
+
+  @each $drawerType in $drawerTypes {
+    & > #{$drawerType} {
+      &#{$drawerType}--offset-top#{$drawerType}--offset-bottom {
+        height: calc(100% - var(--header-height) - var(--footer-height));
+      }
     }
-  }
 
-  @each $pos, $el in $elements {
-    & > .q-railbar,
-    & > .q-drawer {
-      &.offset-#{$pos} {
-        #{$pos}: var(--#{$el}-height);
-        height: calc(100% - var(--#{$el}-height));
+    @each $pos, $el in $elements {
+      & > #{$drawerType} {
+        &#{$drawerType}--offset-#{$pos} {
+          #{$pos}: var(--#{$el}-height);
+          height: calc(100% - var(--#{$el}-height));
+        }
       }
     }
   }

package/dist/components/list/index.scss

@@ -31,6 +31,7 @@
   gap: 1rem;
 
   min-width: 100%;
+  max-width: 100%;
   min-height: 56px;
   margin-top: 0 !important;
   margin: 0;

package/dist/components/private/QApi.svelte

@@ -112,7 +112,9 @@ function handleDrawer(QDocument, doc, e) {
                   {/if}
                 </span>
               </div>
-              <div slot="line1" class="q-mt-sm prop-description">{@html doc.description}</div>
+              <div slot="line1" class="q-mt-sm prop-description" style="white-space: normal;">
+                {@html doc.description}
+              </div>
             </QItemSection>
           </QItem>
         {/each}

package/dist/components/progress/QCircularProgress.svelte

@@ -1,9 +1,10 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { useSize } from "../../composables/use-size";
+import { createClasses } from "../../utils/props";
 import { isNumber } from "../../utils/types";
 export let value = 0, indeterminate = false, size = "2em", color = void 0, thickness = 5, userClasses = void 0;
 export { userClasses as class };
 $:
-  spinnerSize = isNumber(size) ? `${size}px` : size;
+  spinnerSize = useSize(size);
 $:
   classes = createClasses([indeterminate && "indeterminate"], {
     component: "q-circular-progress",
@@ -12,7 +13,7 @@ $:
   });
 </script>
 
-<svg class={classes} height={spinnerSize} width={spinnerSize} viewBox="25 25 50 50">
+<svg class={classes} height={spinnerSize.style} width={spinnerSize.style} viewBox="25 25 50 50">
   <circle
     class="path"
     cx="50"

package/dist/components/progress/QCircularProgress.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         value?: number | undefined;
         indeterminate?: boolean | undefined;
-        size?: string | number | undefined;
+        size?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         color?: QCircularProgressProps["color"];
         thickness?: number | undefined;
         class?: string | undefined;

package/dist/components/progress/props.d.ts

@@ -1,20 +1,37 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QLinearProgressProps extends NativeProps {
+    /**
+     * @default 0
+     */
     value: number;
+    /**
+     * @default left
+     */
     from: "left" | "right";
+    /**
+     * @default false
+     */
     rounded: boolean;
 }
 export interface QCircularProgressProps extends NativeProps {
+    /**
+     * @default 0
+     */
     value: number;
+    /**
+     * @default false
+     */
     indeterminate: boolean;
-    size: string | number;
+    /**
+     * @default 2em
+     */
+    size: CssValue | number;
+    /**
+     * @default undefined
+     */
     color?: string;
+    /**
+     * @default 5
+     */
     thickness: number;
 }
-export declare const QLinearProgressPropsDefaults: {
-    userClasses?: string | undefined;
-    userStyles?: string | undefined;
-    value: number;
-    from: string;
-    rounded: boolean;
-};

package/dist/components/progress/props.js

@@ -1,7 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QLinearProgressPropsDefaults = {
-    value: 0,
-    from: "left",
-    rounded: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/railbar/QRailbar.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from "svelte";
 import { createClasses, createStyles } from "../../utils/props";
-import { isNumber } from "../../utils/types";
+import { useSize } from "../../composables/use-size";
+import { derived } from "svelte/store";
 export let width = 88, side = "left", bordered = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");
@@ -8,20 +9,23 @@ let drawerType;
 $:
   drawerType = side === "left" ? "drawerLeft" : "drawerRight";
 $:
-  classes = createClasses([
-    "q-railbar",
-    "surface",
-    side,
-    bordered && "bordered",
-    $ctx && $ctx[drawerType].offset.top && "offset-top",
-    $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
-    $ctx && $ctx[drawerType].fixed && "fixed",
-    getBorderRadiusClasses(side, $ctx),
-    $ctx && prepareZIndexClass($ctx, side),
-    userClasses
-  ]);
+  classes = createClasses(
+    [
+      side,
+      bordered && "bordered",
+      $ctx && $ctx[drawerType].offset.top && "offset-top",
+      $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
+      $ctx && $ctx[drawerType].fixed && "fixed",
+      $borderRadiusClasses,
+      $zIndexClass
+    ],
+    {
+      component: "q-railbar",
+      userClasses
+    }
+  );
 $:
-  widthStyle = ctx === void 0 ? isNumber(width) ? `${width}px` : width : void 0;
+  widthStyle = !$ctx && useSize(width).style;
 $:
   style = createStyles(
     {
@@ -29,22 +33,37 @@ $:
     },
     userStyles
   );
-function getBorderRadiusClasses(sideProp, context) {
-  let prefix = "border-radius" + (sideProp === "left" ? "__right" : "__left");
-  return createClasses([
-    context && context[drawerType].offset.top !== false && context && context[drawerType].drawer === false ? prefix + "--top" : void 0,
-    context && context[drawerType].offset.bottom !== false && context && context[drawerType].drawer === false ? prefix + "--bottom" : void 0
-  ]);
-}
-function prepareZIndexClass(context, sideProp) {
-  let drawer = sideProp === "left" ? context.drawerLeft : context.drawerRight;
-  let pos;
-  for (pos of ["top", "bottom"]) {
-    if (!drawer.offset[pos] && drawer.overlay) {
-      return "above";
+$:
+  borderRadiusClasses = ctx && // No border radius if this isn't a layout railbar
+  derived(ctx, (context) => {
+    const borderSide = side === "left" ? "right" : "left";
+    const shouldHaveRadius = (pos) => {
+      let appBarEl = pos === "top" ? context["header"] : context["footer"];
+      if (context[drawerType].drawer) {
+        return false;
+      }
+      return !appBarEl?.display || context[drawerType].offset[pos];
+    };
+    return createClasses(
+      [
+        shouldHaveRadius("top") && `top-${borderSide}-radius`,
+        shouldHaveRadius("bottom") && `bottom-${borderSide}-radius`
+      ],
+      {
+        component: "q-railbar"
+      }
+    );
+  });
+$:
+  zIndexClass = ctx && derived(ctx, (context) => {
+    let drawer = side === "left" ? context.drawerLeft : context.drawerRight;
+    let pos;
+    for (pos of ["top", "bottom"]) {
+      if (!drawer.offset[pos] && drawer.overlay) {
+        return "above";
+      }
     }
-  }
-}
+  });
 </script>
 
 <nav class={classes} {style}>

package/dist/components/railbar/QRailbar.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QRailbarProps } from "./props";
 declare const __propDef: {
     props: {
-        width?: string | number | undefined;
+        width?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         side?: "left" | "right" | undefined;
         bordered?: boolean | undefined;
         class?: string | undefined;

package/dist/components/railbar/index.scss

@@ -0,0 +1,39 @@
+.q-railbar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  vertical-align: middle;
+
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  padding: 0.5rem;
+
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  height: auto;
+  width: auto;
+  gap: 1rem;
+
+  color: var(--on-surface);
+  background-color: var(--surface);
+
+  z-index: 100;
+  transform: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__left {
+    left: 0;
+  }
+  &__right {
+    right: 0;
+  }
+}