@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

package/dist/components/breadcrumbs/index.scss

@@ -1,20 +0,0 @@
-// QBreadcrumbs
-.q-breadcrumbs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &__separator:first-child {
-    display: none;
-  }
-}
-
-// QBreadcrumbsEl
-.q-breadcrumbs.q-breadcrumbs__el {
-  display: flex;
-  align-items: center;
-
-  & > .q-icon {
-    @include margin("r");
-  }
-}

package/dist/components/button/index.scss

@@ -1,78 +0,0 @@
-.q-btn {
-  position: relative;
-  cursor: pointer;
-  text-decoration: none;
-  border: none;
-  font-family: inherit;
-  outline: inherit;
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  min-width: 2.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--on-primary);
-  padding: 0 1.5rem;
-  background-color: var(--primary);
-  margin: 0 0.5rem;
-  border-radius: 1.25rem;
-  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
-  user-select: none;
-  gap: 1rem;
-  line-height: normal;
-  @extend .elevate-sm-bottom;
-  @extend .ripple;
-
-  $sizeMap: (
-    "sm": -1,
-    "lg": 1,
-    "xl": 2,
-  );
-
-  @each $size, $val in $sizeMap {
-    &.q-btn--#{$size} {
-      height: 2.5rem + 0.5 * $val;
-      min-width: 2.5rem + 0.5 * $val;
-      border-radius: 1.25rem + 0.25 * $val;
-      font-size: 1rem + 0.125 * $val;
-    }
-  }
-
-  &.q-btn[aria-disabled] {
-    @extend .disabled;
-  }
-
-  &.q-btn--outlined {
-    @include transparent($ripple: true);
-    @include border(var(--primary));
-    color: var(--primary);
-  }
-
-  &.q-btn--unelevated {
-    @extend .elevate-none;
-  }
-
-  &.q-btn--flat {
-    @include transparent($ripple: true);
-    @extend .elevate-none;
-  }
-
-  &.q-btn--rectangle {
-    border-radius: 0.5rem;
-  }
-
-  &.q-btn--circle {
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
-    padding: 0;
-  }
-
-  & > :is(.q-icon, .q-circular-progress) {
-    margin: 0 -0.5rem;
-  }
-
-  @include btn-image;
-}

package/dist/components/card/index.scss

@@ -1,53 +0,0 @@
-// QCard
-.q-card {
-  display: block;
-  border-radius: 0.75rem;
-  transition: var(--speed-3) transform, var(--speed-3) padding, var(--speed-3) border-radius;
-  @include padding("a", "md");
-  @extend .elevate-sm-bottom;
-
-  &.q-card--bordered {
-    box-sizing: border-box;
-    @include border();
-    @extend .elevate-none;
-  }
-
-  &.q-card--flat {
-    @extend .elevate-none;
-  }
-
-  &.q-card--rounded {
-    border-radius: 2rem;
-  }
-
-  & > .q-card__title {
-    @include margin("b");
-  }
-}
-
-// QCardSection
-.q-card > .q-card__section {
-  @include padding;
-
-  &.q-card__section--horizontal {
-    @extend .row;
-    border-radius: 0;
-
-    &:not(.q-card__title + .q-card__section) {
-      @include margin("t");
-    }
-  }
-}
-
-// QCardActions
-.q-card > .q-card__actions {
-  display: flex;
-
-  &.q-card__actions--vertical {
-    flex-direction: column;
-  }
-
-  &:not(.q-card__title + .q-card__actions) {
-    @include margin("t");
-  }
-}

package/dist/components/chip/index.scss

@@ -1,83 +0,0 @@
-// QChip
-.q-chip {
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  min-width: 2.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  background-color: var(--secondary);
-  color: var(--on-secondary);
-  text-transform: none;
-  border-radius: 0.5em;
-  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
-  line-height: normal;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-
-  @extend .ripple;
-  @extend .no-select;
-  @include padding("x", "md");
-  @include margin("x");
-  @include gap("md");
-  @include btn-image("chip");
-
-  &.q-chip--sm {
-    height: 2rem;
-    min-width: 2rem;
-  }
-
-  &.q-chip--lg {
-    height: 3rem;
-    min-width: 3rem;
-  }
-
-  &.q-chip--bordered {
-    @include transparent($ripple: true);
-    @include border(var(--secondary));
-    color: var(--secondary);
-  }
-
-  &.q-chip--rounded {
-    border-radius: 1.25rem;
-
-    &.q-chip--sm {
-      border-radius: 1rem;
-    }
-
-    &.q-chip--lg {
-      border-radius: 1.5rem;
-    }
-  }
-
-  &.q-chip--filled {
-    background-color: var(--secondary-container);
-    color: var(--on-secondary-container);
-    border: none;
-  }
-
-  &.q-chip--vertical {
-    flex-direction: column;
-    height: auto;
-    max-height: none;
-
-    @include padding("y");
-    @include gap("xs");
-  }
-
-  &.q-chip[aria-disabled="true"] {
-    @extend .disabled;
-    &.q-chip--bordered {
-      border-color: var(--on-surface);
-    }
-  }
-}
-
-// QChip icons
-.q-chip > .q-icon {
-  --size: 1.25rem;
-  margin-inline: -0.5rem;
-}

package/dist/components/dialog/index.scss

@@ -1,27 +0,0 @@
-dialog.q-dialog {
-  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-
-  &:is(.left, .right, .top, .bottom) {
-    border-radius: 0;
-  }
-  &.modal::backdrop {
-    display: block;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  &.animating {
-    animation: shake 0.15s;
-  }
-}
-
-@keyframes shake {
-  0% {
-    scale: 1;
-  }
-  50% {
-    scale: 1.04;
-  }
-  100% {
-    scale: 1;
-  }
-}

package/dist/components/drawer/index.scss

@@ -1,54 +0,0 @@
-.q-drawer {
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  right: auto;
-  bottom: 0;
-  left: auto;
-  height: 100%;
-  transition: all var(--speed3), background-color 0s;
-  overflow: auto;
-  padding: 8px;
-
-  &.fixed {
-    position: fixed;
-  }
-
-  &.left {
-    left: 0px;
-    transform: translate(-100%);
-    width: var(--left-drawer-width);
-    &.bordered {
-      border-right: 0.0625rem solid var(--outline);
-    }
-  }
-
-  &.right {
-    right: 0px;
-    transform: translate(100%);
-    width: var(--right-drawer-width);
-
-    &.bordered {
-      border-left: 0.0625rem solid var(--outline);
-    }
-  }
-
-  &.active {
-    transform: translate(0);
-  }
-
-  &.offset {
-    &-top {
-      top: var(--header-height);
-      height: calc(100% - var(--header-height));
-
-      &.offset-bottom {
-        height: calc(100% - var(--header-height) - var(--footer-height));
-      }
-    }
-    &-bottom {
-      bottom: var(--footer-height);
-      height: calc(100% - var(--footer-height));
-    }
-  }
-}

package/dist/components/footer/index.scss

@@ -1,5 +0,0 @@
-.q-footer {
-  width: 100%;
-  height: var(--footer-height);
-  transition: all var(--speed3);
-}

package/dist/components/icon/index.scss

@@ -1,18 +0,0 @@
-$icon-font: "Material Symbols Outlined";
-
-.q-icon {
-  overflow: visible;
-  font-family: $icon-font;
-
-  &--outlined {
-    $icon-font: "Material Symbols Outlined";
-  }
-
-  &--rounded {
-    $icon-font: "Material Symbols Rounded";
-  }
-
-  &--sharp {
-    $icon-font: "Material Symbols Sharp";
-  }
-}

package/dist/components/layout/index.scss

@@ -1,370 +0,0 @@
-:root {
-  --header-height: 64px;
-  --footer-height: 80px;
-
-  --left-railbar-width: 88px;
-  --right-railbar-width: 88px;
-
-  --left-drawer-width: 300px;
-  --right-drawer-width: 300px;
-}
-
-.q-layout {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-width: 100%;
-  min-height: 100%;
-  overflow: hidden;
-
-  & > :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
-    height: 100%;
-    overflow: auto;
-    transition: padding var(--speed3);
-  }
-}
-
-.q-layout > .q-header {
-  z-index: 103;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: auto;
-  left: 0px;
-  height: var(--header-height);
-  min-height: unset;
-  border-radius: 0;
-
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
-    position: fixed;
-
-    &::before {
-      margin: 0;
-    }
-  }
-}
-
-.q-layout > .q-footer {
-  z-index: 103;
-  position: absolute;
-  top: auto;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  height: var(--footer-height);
-  min-height: unset;
-  border-radius: 0;
-
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
-    position: fixed;
-
-    &::before {
-      margin: 0;
-    }
-  }
-
-  & ~ :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
-    padding-bottom: var(--footer-height);
-  }
-}
-
-.q-layout > .q-railbar {
-  z-index: 102;
-  position: absolute;
-  top: 0px;
-  right: auto;
-  bottom: 0px;
-  left: auto;
-  height: 100%;
-  overflow: auto;
-  transition: all var(--speed3);
-
-  &.above {
-    z-index: 105;
-  }
-
-  &.fixed {
-    position: fixed;
-  }
-
-  &.left {
-    left: 0px;
-    width: var(--left-railbar-width);
-
-    &.bordered {
-      border-right: 0.0625rem solid var(--outline);
-    }
-  }
-
-  &.right {
-    right: 0px;
-    width: var(--right-railbar-width);
-
-    &.bordered {
-      border-left: 0.0625rem solid var(--outline);
-    }
-  }
-
-  & > .q-list > .q-item {
-    flex-direction: column;
-    border-radius: 2rem;
-    align-items: center;
-    justify-content: center;
-    padding: 0 8px;
-    gap: 0.25em;
-
-    &.wave::after {
-      all: unset;
-    }
-
-    & > .q-item__section {
-      justify-content: start;
-    }
-
-    & > i {
-      transition: var(--speed1) padding linear;
-      padding-inline: 0.25em;
-    }
-
-    &:is(:hover, :focus, .active) > i {
-      background-color: var(--secondary-container);
-      color: var(--on-secondary-container);
-      padding: 0 1rem;
-      font-variation-settings: "FILL" 1, "wght" 400, "opsz" 24;
-    }
-  }
-}
-
-.q-layout > .q-drawer {
-  //TODO Problems with z-index between multiple layouts
-  z-index: 101;
-  border-radius: 0;
-
-  &.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;
-      }
-    }
-  }
-
-  & .q-list > .q-item.q-link {
-    border-radius: 2rem;
-
-    &::before {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      border-radius: inherit;
-      background: var(--secondary-container);
-      z-index: -1;
-      transform: scaleX(0.32);
-      transition-duration: 0.2s;
-      transition-property: transform, opacity;
-      transition-timing-function: linear;
-    }
-
-    &.active {
-      color: var(--on-secondary-container);
-
-      &::before {
-        opacity: 1;
-        transform: scaleX(1);
-      }
-    }
-
-    &:hover {
-      background-color: var(--on-surface-variant-2);
-      font-variation-settings: "GRAD" 50;
-    }
-  }
-}
-
-// Offsets
-$L_Railbar: var(--left-railbar-width);
-$R_Railbar: var(--right-railbar-width);
-$LR_Railbar: calc(#{$L_Railbar} + #{$R_Railbar});
-
-$L_Drawer: var(--left-drawer-width);
-$R_Drawer: var(--right-drawer-width);
-$LR_Drawer: calc(#{$L_Drawer} + #{$R_Drawer});
-
-$L_Full: calc(#{$L_Railbar} + #{$L_Drawer});
-$R_Full: calc(#{$R_Railbar} + #{$R_Drawer});
-
-$L_Railbar-R_Drawer: calc(#{$L_Railbar} + #{$R_Drawer});
-$R_Railbar-L_Drawer: calc(#{$R_Railbar} + #{$L_Drawer});
-
-$L_Full-R_Railbar: calc(#{$L_Full} + #{$R_Railbar});
-$L_Full-R_Drawer: calc(#{$L_Full} + #{$R_Drawer});
-$R_Full-L_Railbar: calc(#{$R_Full} + #{$L_Railbar});
-$R_Full-L_Drawer: calc(#{$R_Full} + #{$L_Drawer});
-
-$Full: calc(#{$L_Full} + #{$R_Full});
-
-$elements: (
-  top: "header",
-  bottom: "footer",
-);
-
-@function without($toSub) {
-  @return calc(100% - #{$toSub});
-}
-
-// Offset for content
-.q-layout {
-  & > .q-header ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-    padding-top: var(--header-height);
-  }
-  & > .q-footer ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-    padding-bottom: var(--footer-height);
-  }
-  & > .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-    padding-left: $L_Drawer;
-  }
-  & > .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-    padding-right: $R_Drawer;
-  }
-  & > .q-railbar.left:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-      padding-left: $L_Railbar;
-    }
-
-    & ~ .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-      padding-left: $L_Full;
-    }
-  }
-  & > .q-railbar.right:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-      padding-right: $R_Railbar;
-    }
-
-    & ~ .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-      padding-right: $R_Full;
-    }
-  }
-}
-
-// 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 {
-        left: $L_Railbar;
-      }
-
-      & ~ .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
-        left: $L_Full;
-      }
-    }
-    & > .q-railbar.right:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.right {
-        right: $R_Railbar;
-      }
-
-      & ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
-        right: $R_Full;
-      }
-    }
-
-    & > .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
-      left: $L_Drawer;
-    }
-    & > .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
-      right: $R_Drawer;
-    }
-  }
-}
-
-// Width for header and footer
-.q-layout {
-  @each $pos, $el in $elements {
-    & > .q-railbar.left:not(.offset-#{$pos}, [style="display: none"]) {
-      // Left railbar
-      & ~ .q-#{$el} {
-        width: without($L_Railbar);
-      }
-
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
-        @include include-drawers(without($L_Railbar), $pos, $el);
-      }
-
-      & ~ .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
-        // Left railbar + Right railbar
-        & ~ .q-#{$el} {
-          width: without($LR_Railbar);
-        }
-
-        & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
-          @include include-drawers(without($LR_Railbar), $pos, $el);
-        }
-      }
-    }
-
-    & > .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
-      // Right railbar
-      & ~ .q-#{$el} {
-        width: without($R_Railbar);
-      }
-
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
-        @include include-drawers(without($R_Railbar), $pos, $el);
-      }
-    }
-
-    & > .q-drawer.active:not(.offset-#{$pos}, .overlay) {
-      @include include-drawers(100%, $pos, $el);
-    }
-  }
-}
-
-// Height for railbars and drawers
-.q-layout {
-  & > .q-railbar,
-  & > .q-drawer {
-    &.offset-top.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));
-      }
-    }
-  }
-}