@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

package/dist/css/mixins/_design.scss

@@ -0,0 +1,63 @@
+@use "../variables";
+
+@mixin elevate($strength, $position: null) {
+  $coeff: 1;
+  @if $position == "top" {
+    $coeff: -1;
+  }
+  $elevate: 0.125rem * $strength;
+
+  box-shadow: 0 $elevate * $coeff $elevate 0 with-alpha(var(--shadow), calc(24% + (8% * $strength)));
+}
+
+@mixin border($color: var(--outline), $position: variables.$border-positions) {
+  @if index($list: $position, $value: top) {
+    border-top: 0.0625rem solid $color;
+  }
+
+  @if index($list: $position, $value: right) {
+    border-right: 0.0625rem solid $color;
+  }
+
+  @if index($list: $position, $value: bottom) {
+    border-bottom: 0.0625rem solid $color;
+  }
+
+  @if index($list: $position, $value: left) {
+    border-left: 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%);
+    }
+  }
+}
+
+@mixin overlay($color: null, $opacity: null) {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  border-radius: inherit;
+
+  background-color: $color;
+  opacity: $opacity;
+}
+
+@function with-alpha($color-variable: null, $percentage: null) {
+  @return color-mix(in srgb, $color-variable $percentage, transparent);
+}

package/dist/css/mixins/_field.scss

@@ -0,0 +1,64 @@
+@use "sass:math";
+
+@mixin reset-form-element {
+  padding: 0px;
+  background: none;
+  border: none;
+  border-radius: 0px;
+  outline: none;
+  appearance: none;
+  font-family: inherit;
+}
+
+@mixin clip-border($clip-width, $clip-height) {
+  clip-path: polygon(
+    0% 0%,
+    0% 100%,
+    100% 100%,
+    100% $clip-height,
+    calc(100% - #{$clip-width}) $clip-height,
+    calc(100% - #{$clip-width}) 0%
+  );
+}
+
+@mixin border-substitute($variant: "outlined", $wrapper-height, $dense: false) {
+  $border-radius: if($variant == "outlined", 0.25rem, math.div($wrapper-height, 2));
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: -0.0625rem;
+    bottom: -0.0625rem;
+    width: math.div($wrapper-height, 2);
+    height: $wrapper-height;
+    border: 0.0625rem solid transparent;
+    border-top-color: var(--decorator-color);
+    border-radius: $border-radius;
+    box-sizing: border-box;
+  }
+
+  &::before {
+    left: -0.0625rem;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    $clip-height: 0.25rem;
+    $clip-width: if($variant == "outlined", 0.9375rem, 0.25rem);
+
+    @if $dense == true and $variant == "outlined" {
+      $clip-width: math.div($clip-width, 1.4);
+    }
+
+    @if $dense == true and $variant != "outlined" {
+      $clip-width: 0rem;
+    }
+
+    @include clip-border($clip-width, $clip-height);
+  }
+
+  &::after {
+    right: -0.0625rem;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+}

package/dist/css/mixins/_image.scss

@@ -0,0 +1,63 @@
+@use "$css/variables";
+
+@mixin responsive($parent: null) {
+  object-fit: cover;
+  object-position: center;
+  transition:
+    variables.$speed3 transform,
+    variables.$speed3 border-radius,
+    variables.$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 > .q-#{$parent}__img--responsive {
+    height: 2rem;
+    width: 2rem;
+  }
+
+  &.q-#{$parent}--lg > .q-#{$parent}__img--responsive {
+    height: 3rem;
+    width: 3rem;
+  }
+
+  &.q-#{$parent}--xl > .q-#{$parent}__img--responsive {
+    height: 3.5rem;
+    width: 3.5rem;
+  }
+
+  & > .q-#{$parent}__img {
+    margin-inline: -0.5rem;
+  }
+
+  & > .q-#{$parent}__img:not(.q-#{$parent}__img--responsive) {
+    min-width: 1.5rem;
+    max-width: 1.5rem;
+    min-height: 1.5rem;
+    max-height: 1.5rem;
+  }
+
+  & > .q-#{$parent}__img.q-#{$parent}__img--responsive {
+    @include responsive($parent);
+
+    $marginSize: -1.5rem;
+    @if $parent == "chip" {
+      $marginSize: -1rem;
+    }
+
+    margin-left: $marginSize !important;
+
+    &.q-#{$parent}__img--trailing {
+      margin-left: -0.5rem;
+      margin-right: $marginSize;
+    }
+  }
+}

package/dist/css/mixins/_index.scss

@@ -0,0 +1,9 @@
+@import "design";
+@import "field";
+@import "image";
+@import "layout";
+@import "menu";
+@import "selection";
+@import "spaces";
+@import "table";
+@import "typography";

package/dist/css/mixins/_layout.scss

@@ -0,0 +1,20 @@
+@use "../variables";
+
+@mixin include-drawers($baseWidth, $pos, $el) {
+  // Left drawer
+  &.q-drawer--left ~ .q-#{$el} {
+    width: calc(#{$baseWidth} - #{variables.$left-drawer});
+  }
+
+  // Right drawer
+  &.q-drawer--right ~ .q-#{$el} {
+    width: calc(#{$baseWidth} - #{variables.$right-drawer});
+  }
+
+  // Left drawer + Right drawer
+  &.q-drawer--left
+    ~ .q-drawer--active.q-drawer--right:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
+    ~ .q-#{$el} {
+    width: calc(#{$baseWidth} - #{variables.$left-right-drawer});
+  }
+}

package/dist/css/mixins/{menu.scss → _menu.scss}

@@ -1,3 +1,5 @@
+@use "$css/variables";
+
 @mixin menu {
   opacity: 0;
   visibility: hidden;
@@ -22,7 +24,9 @@
   text-align: left;
   border-radius: 0.25rem;
   transform: scale(0.8) translateY(120%);
-  transition: var(--speed2) all, 0s background-color;
+  transition:
+    variables.$speed2 all,
+    0s background-color;
 
   &--active {
     opacity: 1;
@@ -44,7 +48,7 @@
   }
 
   > a:is(:hover, :focus, .active) {
-    background-color: var(--active);
+    background-color: var(--secondary-container);
   }
 
   &__dense {

package/dist/css/mixins/{selection.scss → _selection.scss}

@@ -1,3 +1,6 @@
+@use "$css/mixins/design";
+@use "$css/variables";
+
 // type can be: checkbox, radio or switch
 @mixin selection($type) {
   width: auto;
@@ -20,8 +23,8 @@
     }
 
     > input:is(:focus, :hover) + span::before {
-      background-color: var(--active);
-      box-shadow: 0 0 0 0.5rem var(--active);
+      background-color: design.with-alpha(var(--primary), 10%);
+      box-shadow: 0 0 0 0.5rem design.with-alpha(var(--primary), 10%);
     }
 
     > input:checked + span::before,
@@ -68,71 +71,8 @@
     border-radius: 50%;
     user-select: none;
     z-index: 1;
-    box-shadow: 0 0 0 0 var(--active);
-    transition: var(--speed1) all;
-  }
-
-  @if $type == switch {
-    > input {
-      width: 3.25rem;
-      height: 2rem;
-      opacity: 0;
-    }
-
-    > span::before,
-    &--icon > span > i {
-      position: absolute;
-      left: 0;
-      top: 50%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      transition: var(--speed2) all;
-      font-size: 1rem;
-      user-select: none;
-      min-width: auto;
-      content: "";
-      color: var(--surface-variant);
-      background-color: var(--outline);
-      transform: translate(-3rem, -50%) scale(0.6);
-    }
-
-    &--icon > span > i {
-      transform: translate(-3rem, -50%) scale(1);
-    }
-
-    > input:is(:focus, :hover) + span::before,
-    &--icon > input:is(:focus, :hover) + span > i {
-      box-shadow: 0 0 0 0.5rem var(--active);
-    }
-
-    > input:checked + span::after {
-      border: none;
-      background-color: var(--primary);
-    }
-
-    > input:checked + span::before,
-    &--icon > input:checked + span > i {
-      content: "check";
-      color: var(--primary);
-      background-color: var(--on-primary);
-      transform: translate(-1.75rem, -50%) scale(1);
-    }
-
-    > span::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 50%;
-      background-color: var(--active);
-      border: 0.125rem solid var(--outline);
-      box-sizing: border-box;
-      width: 3.25rem;
-      height: 2rem;
-      border-radius: 2rem;
-      transform: translate(-3.25rem, -50%);
-    }
+    box-shadow: 0 0 0 0 design.with-alpha(var(--primary), 10%);
+    transition: variables.$speed1 all;
   }
 
   @if $type == checkbox {

package/dist/css/mixins/_spaces.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+@use "sass:string";
+@use "../variables";
+
+@mixin space($type: null, $spaces...) {
+  @each $space in $spaces {
+    $pos: string.slice($space, 1, 1);
+    @if not map.has-key(variables.$positions, $pos) {
+      @error "Position error for #{$type}, \"#{$pos}\" is not a valid position. Should be one of a, x, y, t, r, b or l";
+    }
+    $pos: map.get(variables.$positions, $pos);
+
+    $spacing: string.slice($space, 3);
+    @if not map.has-key(variables.$spaces, $spacing) {
+      @error "Spacing error for #{$type}, \"#{$space}\" is not a valid spacing. Should be one of auto, none, xs, sm, md, lg or xl";
+    }
+    $spacing: map.get(variables.$spaces, $spacing);
+
+    #{$type}#{$pos}: $spacing;
+  }
+}
+
+@mixin padding($paddings...) {
+  @include space("padding", $paddings...);
+}
+
+@mixin margin($margins...) {
+  @include space("margin", $margins...);
+}
+
+@mixin gap($space: "sm") {
+  @if not map.has-key(variables.$spaces, $space) {
+    @error "Spacing error for gap, \"#{$space}\" is not a valid spacing. Should be one of auto, none, xs, sm, md, lg or xl";
+  }
+  gap: map.get(variables.$spaces, $space);
+}

package/dist/css/mixins/_typography.scss

@@ -0,0 +1,7 @@
+@mixin typography($name: null) {
+  font-family: var(--typescale-#{$name}-font-family-name);
+  font-weight: var(--typescale-#{$name}-font-weight);
+  font-size: var(--typescale-#{$name}-font-size);
+  line-height: var(--typescale-#{$name}-line-height);
+  letter-spacing: var(--typescale-#{$name}-letter-spacing);
+}