@swiftwc/ui 0.0.0-dev.4 → 0.0.0-dev.40

package/scss/_dev.scss

@@ -1,68 +0,0 @@
-@layer final {
-  #console {
-    position: fixed;
-    left: 30%;
-    bottom: 50%;
-    z-index: 999999999;
-  }
-
-  #tb {
-    position: fixed;
-    box-shadow: inset 0 0 0 12px greenyellow;
-    top: env(titlebar-area-y);
-    width: env(titlebar-area-width);
-    left: env(titlebar-area-x);
-    height: env(titlebar-area-height);
-    z-index: 999999999;
-  }
-
-  #sa {
-    position: fixed;
-    box-shadow: inset 0 0 0 10px green;
-    inset: env(safe-area-inset-top) env(safe-area-inset-right)
-      env(safe-area-inset-bottom) env(safe-area-inset-left);
-    z-index: 999999999;
-  }
-
-  #kb {
-    display: grid;
-    position: fixed;
-    box-shadow: inset 0 0 0 8px red;
-    background-color: rosybrown;
-    top: env(keyboard-inset-top, var(--keyboard-inset-top));
-    /* right: env(keyboard-inset-right, 0); */
-    left: env(keyboard-inset-left, 0);
-    /* bottom: env(keyboard-inset-bottom, 0px); */
-    height: env(keyboard-inset-height, var(--keyboard-inset-height));
-    width: env(keyboard-inset-width, 100lvw);
-    z-index: 999999999;
-  }
-
-  #dv {
-    position: fixed;
-    box-shadow: inset 0 0 0 6px blue;
-    top: 0vh;
-    left: 0vw;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999999999;
-  }
-  #sv {
-    position: fixed;
-    box-shadow: inset 0 0 0 4px magenta;
-    top: 0svh;
-    left: 0svw;
-    width: 100svw;
-    height: 100svh;
-    z-index: 999999999;
-  }
-  #lv {
-    position: fixed;
-    box-shadow: inset 0 0 0 2px maroon;
-    top: 0lvh;
-    left: 0lvw;
-    width: 100lvw;
-    height: 100lvh;
-    z-index: 999999999;
-  }
-}

package/scss/components/_tab-bar-stack.scss

@@ -1,101 +0,0 @@
-@use '../vars';
-@use '../mixins';
-
-@layer #{vars.$components-layer} {
-  // [is='tab-bar'] > scroll-view {
-  //   display: grid;
-  //   // border-radius: inherit;
-  // }
-
-  // tab-bar-stack {
-  // box-shadow: inset 0 0 0 12px firebrick;
-  // }
-
-  @include mixins.if-iphone-portrait {
-    [is='tab-bar']>scroll-view {
-      grid-auto-flow: column;
-
-      // @include mixins.contain-overscroll;
-
-      // grid-auto-flow: column;
-
-      // overflow: auto clip;
-    }
-
-    tab-bar-stack {
-      grid-auto-flow: column;
-      margin-block: 0 !important; // scroll-view > * override
-    }
-  }
-
-  @include mixins.if-ipad-portrait {
-    tab-bar-stack {
-      grid-auto-flow: column;
-
-      [is='tab-bar'][open] & {
-        grid-auto-flow: row;
-
-        align-content: start;
-
-        row-gap: 0.5rem;
-      }
-
-      [is='tab-bar']:not([open]) & {
-        margin-block: 0 !important; // scroll-view > * override
-      }
-    }
-
-    scroll-view {
-      [is='tab-bar']>& {
-        @include mixins.contain-overscroll;
-
-        grid-auto-flow: column;
-
-        overflow: auto clip;
-      }
-
-      [is='tab-bar'][open]>& {
-        // padding-block-start: 30px;
-        grid-auto-flow: row;
-
-        overflow: clip auto;
-
-        @include mixins.make-scrollable;
-      }
-    }
-  }
-
-  @include mixins.if-iphone-landscape {
-    tab-bar-stack {
-      align-content: start;
-
-      row-gap: 0.5rem;
-    }
-
-    [is='tab-bar']>scroll-view {
-      overflow: clip auto;
-      @include mixins.contain-overscroll;
-      @include mixins.make-scrollable;
-    }
-  }
-
-  @include mixins.if-ipad-landscape {
-    tab-bar-stack {
-      align-content: start;
-
-      row-gap: 0.5rem;
-    }
-
-    [is='tab-bar']>scroll-view {
-      //
-
-
-      overflow: clip auto;
-      @include mixins.contain-overscroll;
-
-      @include mixins.make-scrollable;
-    }
-
-
-  }
-}

package/scss/components/_toolbars.scss

@@ -1,100 +0,0 @@
-@use '../vars';
-@use '../mixins';
-
-@layer #{vars.$components-layer} {
-
-  navigation-bar,
-  bottom-bar {
-    position: absolute;
-
-    // background-color: blue;
-    box-shadow: inset 0 0 4px red;
-
-    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
-    pointer-events: none;
-
-    grid-template-columns: auto 1fr auto;
-
-    // place-items: center;
-    // place-content: center;
-    // align-items: stretch;
-    // justify-items: center;
-    // align-content: stretch;
-    // justify-content: center;
-
-    >* {
-      pointer-events: all;
-
-      align-self: center;
-    }
-  }
-
-  navigation-bar {
-    // padding-inline: calc(
-    //     var(--safe-area-inset-left, 0px) + var(--navbar-area-inset-left, 0px)
-    //   )
-    //   calc(
-    //     var(--safe-area-inset-right, 0px) + var(--navbar-area-inset-right, 0px)
-    //   );
-
-    inset: 0 0 auto 0;
-
-    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
-
-    padding-block-start: var(--safe-area-inset-top);
-
-    // dialog & {
-    //   transform: translateY(max(-33cqw, -200px));
-    //   inset: auto;
-    // }
-  }
-
-  bottom-bar {
-    // padding-inline: calc(
-    //     var(--safe-area-inset-left, 0px) + var(--toolbar-area-inset-left, 0px)
-    //   )
-    //   calc(
-    //     var(--safe-area-inset-right, 0px) + var(--toolbar-area-inset-right, 0px)
-    //   );
-
-    inset: auto 0 0 0;
-
-    height: calc(var(--safe-area-inset-bottom) + var(--tool-bar-height));
-
-    padding-block-end: var(--safe-area-inset-bottom);
-  }
-
-  ::part(toolbar-leading-stack),
-  ::part(toolbar-principal-stack),
-  ::part(toolbar-trailing-stack) {
-    display: grid;
-
-    grid-auto-flow: column;
-    grid-template-columns: minmax(0, 1fr);
-
-    column-gap: var(--toolbar-col-gap);
-  }
-
-  @include mixins.if-ipad-sheet-fits {
-    [is='sheet-view'] {
-
-      navigation-bar,
-      bottom-bar {
-        --safe-area-inset-left: 0px;
-        --safe-area-inset-right: 0px;
-        // padding-inline: 0;
-      }
-
-      navigation-bar {
-        --safe-area-inset-top: 0px;
-        // padding-block-start: 0;
-        // height: var(--navigation-bar-height);
-      }
-
-      bottom-bar {
-        --safe-area-inset-bottom: 0px;
-        // padding-block-end: 0;
-      }
-    }
-  }
-}

package/scss/transitions/_dialog.scss

@@ -1,32 +0,0 @@
-@use '../vars';
-@use '../mixins';
-
-@layer #{vars.$transitions-layer} {
-  [is='sheet-view'][open] {
-    transform: translateY(var(--view-transition-dialog-onscreen-y));
-
-    @include mixins.if-ipad-sheet-fits {
-      @include mixins.if-2col-split-view-fits {
-        navigation-split-view & {
-          margin-inline-start: var(--safe-area-inset-left);
-        }
-      }
-    }
-
-    &::backdrop {
-      background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
-    }
-
-    @starting-style {
-      &::backdrop {
-        background-color: transparent;
-      }
-    }
-
-    @starting-style {
-      & {
-        transform: translateY(var(--view-transition-dialog-offscreen-y));
-      }
-    }
-  }
-}