@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

package/dist/css/mixins/field.scss

@@ -1,432 +0,0 @@
-@mixin field {
-  $root: &;
-  $label: #{$root}__label;
-  $labelActive: #{$root}__label--active;
-
-  height: 3rem;
-  margin-bottom: 2rem;
-  border-radius: 0.25rem;
-
-  &--sm,
-  &--dense {
-    height: 2.5rem;
-  }
-
-  &--lg {
-    height: 3.5rem;
-  }
-
-  &--xl {
-    height: 4rem;
-  }
-
-  &:not(&--has-border) {
-    border-radius: 0.25rem 0.25rem 0 0;
-  }
-
-  &--rounded#{$root}--sm,
-  &--rounded#{$root}--dense {
-    border-radius: 1.25rem;
-  }
-
-  &--rounded {
-    border-radius: 1.5rem;
-  }
-
-  &--rounded#{$root}--lg {
-    border-radius: 1.75rem;
-  }
-
-  &--rounded#{$root}--xl {
-    border-radius: 2rem;
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: inherit;
-    background-color: inherit;
-  }
-
-  &--filled::before {
-    background-color: var(--surface-variant);
-    color: var(--on-surface-variant);
-  }
-
-  & > :is(i, img, svg, .loader) {
-    position: absolute;
-    top: 50%;
-    left: auto;
-    right: 1rem;
-    transform: translateY(-50%);
-    cursor: pointer;
-    z-index: 0;
-  }
-
-  &--bordered,
-  &--filled,
-  &--rounded {
-    > :is(i, img, svg, .loader) {
-      left: auto;
-      right: 1rem;
-    }
-  }
-
-  > :is(i, img, svg, .loader):first-child {
-    left: 1rem;
-    right: auto;
-  }
-
-  &--bordered,
-  &--rounded,
-  &--outlined,
-  &--filled {
-    > :is(i, img, svg, .loader):first-child {
-      left: 1rem;
-      right: auto;
-    }
-  }
-
-  &--error > i {
-    color: var(--error);
-  }
-
-  > .loader {
-    border-width: 0.1875rem;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  /* input, textarea and select */
-  > select,
-  input[type^="date"],
-  input[type^="time"],
-  input[type="search"] {
-    appearance: none;
-    cursor: pointer;
-  }
-
-  input[type^="date"]::-webkit-inner-spin-button,
-  input[type^="date"]::-webkit-calendar-picker-indicator,
-  input[type^="time"]::-webkit-inner-spin-button,
-  input[type^="time"]::-webkit-calendar-picker-indicator {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    cursor: pointer;
-  }
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button,
-  input[type="number"] {
-    appearance: none;
-    -moz-appearance: textfield;
-  }
-
-  input[type="file"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-    opacity: 0;
-    cursor: pointer;
-  }
-
-  input[type="search"]::-webkit-search-decoration,
-  input[type="search"]::-webkit-search-cancel-button,
-  input[type="search"]::-webkit-search-results-button,
-  input[type="search"]::-webkit-search-results-decoration {
-    display: none;
-  }
-
-  > :is(input, textarea, select) {
-    border: 0.0625rem solid transparent;
-    padding: 0 0.9375rem;
-    font-family: inherit;
-    font-size: 1rem;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    z-index: 1;
-    background: none;
-    resize: none;
-  }
-
-  > :is(input, textarea, select):focus {
-    border: 0.125rem solid transparent;
-    padding: 0 0.875rem;
-  }
-
-  &--has-border {
-    > :is(input, textarea, select) {
-      border-color: var(--outline);
-    }
-
-    > :is(input, textarea, select):focus {
-      border-color: var(--primary);
-    }
-  }
-
-  &--rounded {
-    > :is(input, textarea, select) {
-      padding-left: 1.4376rem;
-      padding-right: 1.4376rem;
-    }
-
-    > :is(input, textarea, select):focus {
-      padding-left: 1.375rem;
-      padding-right: 1.375rem;
-    }
-  }
-
-  &--prepend {
-    > :is(input, textarea, select) {
-      padding-left: 2.9375rem;
-    }
-    > .slider {
-      margin-left: 3.5rem;
-    }
-    > :is(input, textarea, select):focus {
-      padding-left: 2.875rem;
-    }
-  }
-
-  &--append {
-    > :is(input, textarea, select) {
-      padding-right: 2.9375rem;
-    }
-    > .slider {
-      margin-right: 3.5rem;
-    }
-
-    > :is(input, textarea, select):focus {
-      padding-right: 2.875rem;
-    }
-  }
-
-  &:not(&--has-border, &--rounded) > :is(input, textarea, select) {
-    border-bottom-color: var(--outline);
-
-    &:focus {
-      border-bottom-color: var(--primary);
-    }
-  }
-
-  &--rounded {
-    &:not(#{$root}--has-border, #{$root}--fill) > :is(input, textarea, select),
-    &:not(#{$root}--has-border) > :is(input, textarea, select):focus {
-      box-shadow: var(--elevate1);
-    }
-
-    &:not(#{$root}--has-border, #{$root}--fill) > :is(input, textarea, select):focus {
-      box-shadow: var(--elevate2);
-    }
-  }
-
-  &-error:not(&--has-border, &--rounded) > :is(input, textarea, select),
-  &-error:not(&--has-border, &--rounded) > :is(input, textarea, select):focus {
-    border-bottom-color: var(--error);
-  }
-
-  &-error#{$root}--has-border > :is(input, textarea, select),
-  &-error#{$root}--has-border > :is(input, textarea, select):focus {
-    border-color: var(--error);
-  }
-
-  & > :disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &--sm.textarea,
-  &--dense.textarea {
-    height: 4.5rem;
-  }
-
-  &.textarea {
-    height: 5.5rem;
-  }
-
-  &--lg.textarea {
-    height: 6.5rem;
-  }
-
-  &--xl.textarea {
-    height: 7.5rem;
-  }
-
-  & > select > option {
-    background-color: var(--surface);
-    color: var(--on-surface);
-  }
-
-  &--label {
-    & > input,
-    & > select {
-      &,
-      &:focus {
-        padding-top: 1rem;
-      }
-    }
-
-    > textarea {
-      padding-top: 1.375rem;
-    }
-
-    > #{$label} {
-      position: absolute;
-      top: 50%;
-      left: 1rem;
-      font-size: 1rem;
-      transform: translateY(-50%);
-      transition:
-        var(--speed2) all,
-        0s background-color;
-      z-index: 0;
-    }
-  }
-
-  &--label#{$root}--sm > textarea {
-    padding-top: 1.125rem;
-  }
-
-  &--label#{$root}--lg > textarea {
-    padding-top: 1.625rem;
-  }
-
-  &--label#{$root}--xl > textarea {
-    padding-top: 1.875rem;
-  }
-
-  &--label#{$root}--has-border:not(&--filled) > :is(input, select) {
-    padding-top: 0;
-  }
-
-  &--sm:not(&--label) > textarea,
-  &--sm#{$root}--has-border:not(&--filled) > textarea {
-    padding-top: 0.625rem;
-  }
-
-  &:not(&--label) > textarea,
-  &--has-border:not(&--filled) > textarea {
-    padding-top: 0.875rem;
-  }
-
-  &--lg:not(&--label) > textarea,
-  &--lg#{$root}--has-border:not(&--filled) > textarea {
-    padding-top: 1.125rem;
-  }
-
-  &--xl:not(&--label) > textarea,
-  &--xl#{$root}--has-border:not(&--filled) > textarea {
-    padding-top: 1.375rem;
-  }
-
-  &--label#{$root}--sm.textarea > #{$label} {
-    top: 1.25rem;
-  }
-
-  &--label.textarea > #{$label} {
-    top: 1.5rem;
-  }
-
-  &--label#{$root}--lg.textarea > #{$label} {
-    top: 1.75rem;
-  }
-
-  &--label#{$root}--xl.textarea > #{$label} {
-    top: 2rem;
-  }
-
-  &--label#{$root}--rounded > #{$label} {
-    left: 1.5rem;
-  }
-
-  &--label#{$root}--prepend > #{$label} {
-    left: 3rem;
-  }
-
-  &--label > #{$label}#{$labelActive},
-  &--label > [placeholder]:focus ~ #{$label},
-  &--label > [placeholder]:not(:placeholder-shown) ~ #{$label} {
-    font-size: 0.75rem;
-    transform: translateY(-120%);
-    z-index: 1;
-  }
-
-  &--label#{$root}--has-border:not(&--filled) > #{$label}#{$labelActive},
-  &--label#{$root}--has-border:not(&--filled) > [placeholder]:focus ~ #{$label},
-  &--label#{$root}--has-border:not(&--filled) > [placeholder]:not(:placeholder-shown) ~ #{$label} {
-    font-size: 0.75rem;
-    top: 0%;
-    left: 1rem;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
-
-  &--label#{$root}--has-border#{$root}--rounded:not(&--filled) > #{$label}#{$labelActive},
-  &--label#{$root}--has-border#{$root}--rounded:not(&--filled) > [placeholder]:focus ~ #{$label},
-  &--label#{$root}--has-border#{$root}--rounded:not(&--filled)
-    > [placeholder]:not(:placeholder-shown)
-    ~ #{$label} {
-    left: 1.5rem;
-    z-index: 1;
-  }
-
-  &--label > :focus ~ #{$label} {
-    color: var(--primary);
-  }
-
-  &--error > #{$label} {
-    color: var(--error) !important;
-  }
-
-  & > #{$label}.required::after,
-  &.required > #{$label}::after {
-    content: " * ";
-  }
-
-  &__helper,
-  &__error {
-    position: absolute;
-    left: 1rem;
-    bottom: 0;
-    transform: translateY(100%);
-    font-size: 0.75rem;
-    background: none !important;
-    padding-top: 0.125rem;
-  }
-
-  &__helper {
-    &a {
-      color: var(--primary);
-    }
-  }
-
-  &__error {
-    color: var(--error) !important;
-  }
-
-  &--rounded {
-    #{$root}__helper,
-    #{$root}__error {
-      left: 1.5rem;
-    }
-  }
-
-  &--error > &__helper {
-    display: none;
-  }
-}

package/dist/css/mixins.scss

@@ -1,136 +0,0 @@
-@import "mixins/field.scss";
-@import "mixins/menu.scss";
-@import "mixins/selection.scss";
-@import "mixins/table.scss";
-
-// Spaces
-@mixin padding($pos: "a", $size: "sm") {
-  $position: map.get($positions, $pos);
-  $space: map.get($spaces, $size);
-
-  padding#{$position}: $space;
-}
-
-@mixin margin($pos: "a", $size: "sm") {
-  $position: map.get($positions, $pos);
-  $space: map.get($spaces, $size);
-
-  margin#{$position}: $space;
-}
-
-@mixin gap($space: "sm") {
-  gap: map.get($spaces, $space);
-}
-
-//States
-@mixin elevate($strength, $position) {
-  $coeff: 1;
-  @if $position == "top" {
-    $coeff: -1;
-  }
-  $elevate: 0.125rem * $strength;
-
-  box-shadow: 0 $elevate * $coeff $elevate 0 rgb(0, 0, 0, 0.24 + 0.08 * $strength);
-}
-
-@mixin border($color: var(--outline)) {
-  border: 0.0625rem solid $color;
-}
-
-@mixin transparent($ripple: false) {
-  background-color: transparent;
-  background: transparent;
-  color: inherit;
-
-  &:is(:focus, :hover) > .q-icon {
-    font-variation-settings: "FILL" 1;
-  }
-
-  @if $ripple {
-    &::after {
-      background-image: radial-gradient(circle, rgb(150, 150, 150, 0.2) 1%, transparent 1%);
-    }
-  }
-}
-
-//Layout
-@mixin include-drawers($baseWidth, $pos, $el) {
-  // Left drawer
-  &.left ~ .q-#{$el} {
-    width: calc(#{$baseWidth} - #{$L_Drawer});
-  }
-
-  // Right drawer
-  &.right ~ .q-#{$el} {
-    width: calc(#{$baseWidth} - #{$R_Drawer});
-  }
-
-  // Left drawer + Right drawer
-  &.left ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) {
-    width: calc(#{$baseWidth} - #{$LR_Drawer});
-  }
-}
-
-// Images
-@mixin responsive($parent: null) {
-  object-fit: cover;
-  object-position: center;
-  transition:
-    var(--speed3) transform,
-    var(--speed3) border-radius,
-    var(--speed3) padding;
-  width: 100%;
-  height: 100%;
-
-  @include margin("x", "auto");
-
-  @if $parent != null {
-    width: 2.5rem;
-    border: 0.25rem solid transparent;
-  }
-}
-
-@mixin btn-image($parent: "btn") {
-  &.q-#{$parent}--sm > &__img--responsive {
-    height: 2rem;
-    width: 2rem;
-  }
-
-  &.q-#{$parent}--lg > &__img--responsive {
-    height: 3rem;
-    width: 3rem;
-  }
-
-  &.q-#{$parent}--xl > &__img--responsive {
-    height: 3.5rem;
-    width: 3.5rem;
-  }
-
-  > .q-#{$parent}__img {
-    margin-inline: -0.5rem;
-
-    &:not(&--responsive) {
-      min-width: 1.5rem;
-      max-width: 1.5rem;
-      min-height: 1.5rem;
-      max-height: 1.5rem;
-    }
-
-    &--responsive {
-      @include responsive($parent);
-
-      $marginSize: -1.5rem;
-      @if $parent == "chip" {
-        $marginSize: -1rem;
-      }
-
-      margin-left: $marginSize;
-      margin-right: -0.5rem;
-
-      &.q-#{$parent}__img--trailing {
-        margin-left: -0.5rem;
-        margin-right: $marginSize;
-      }
-    }
-  }
-}

package/dist/css/states.scss

@@ -1,75 +0,0 @@
-// DISABLED
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-
-  &::before,
-  &::after {
-    all: unset;
-  }
-}
-
-// BORDERED
-.border {
-  @include border;
-}
-
-// ELEVATED
-
-.elevate {
-  &-none {
-    box-shadow: none;
-  }
-
-  $elevations: (
-    "sm": 1,
-    "md": 2,
-    "lg": 3,
-  );
-
-  @each $elevation, $value in $elevations {
-    &-#{$elevation} {
-      &-top {
-        @include elevate($value, "top");
-      }
-      &-bottom {
-        @include elevate($value, "bottom");
-      }
-    }
-  }
-}
-
-// TRANSPARENT
-.transparent {
-  @include transparent;
-}
-
-// WITH RIPPLE EFFECT
-.ripple {
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    border-radius: inherit;
-    background-position: center;
-    opacity: 0;
-    transition: none;
-    background-image: radial-gradient(circle, rgb(255, 255, 255, 0.4) 1%, transparent 1%);
-  }
-
-  &:is(:focus, :hover)::after {
-    background-size: 15000%;
-    opacity: 1;
-    transition: var(--speed2) background-size linear;
-  }
-
-  &:active::after {
-    background-size: 5000%;
-    opacity: 0;
-    transition: none;
-  }
-}

package/dist/css/theme/bridge.scss

@@ -1,15 +0,0 @@
-// Use this for things we might refactor at a later point, e.g beer css variables
-:root {
-  --size: 16px;
-  --font: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
-  --font-icon: "Material Symbols Outlined";
-  --speed1: 0.1s;
-  --speed2: 0.2s;
-  --speed3: 0.3s;
-  --speed4: 0.4s;
-  --active: rgb(0 0 0 / 0.1);
-}
-
-body.dark {
-  --active: rgb(255 255 255 / 0.2);
-}