@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha15

package/dist/css/index.scss

@@ -56,6 +56,7 @@ $positions: (
 @import "$components/radio";
 @import "$components/railbar";
 @import "$components/select";
+@import "$components/separator";
 @import "$components/table";
 @import "$components/tabs";
 @import "$components/toggle";

package/dist/css/mixins/field-mixins.scss

@@ -0,0 +1,53 @@
+@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") {
+  $border-radius: if($variant == "outlined", 0.25rem, calc(var(--wrapper-height) / 2));
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: -0.0625rem;
+    bottom: -0.0625rem;
+    width: calc(var(--wrapper-height) / 2);
+    height: var(--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.3125rem);
+    @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.scss

@@ -1,4 +1,3 @@
-@import "mixins/field.scss";
 @import "mixins/menu.scss";
 @import "mixins/selection.scss";
 @import "mixins/table.scss";
@@ -56,17 +55,19 @@
 //Layout
 @mixin include-drawers($baseWidth, $pos, $el) {
   // Left drawer
-  &.left ~ .q-#{$el} {
+  &.q-drawer--left ~ .q-#{$el} {
     width: calc(#{$baseWidth} - #{$L_Drawer});
   }
 
   // Right drawer
-  &.right ~ .q-#{$el} {
+  &.q-drawer--right ~ .q-#{$el} {
     width: calc(#{$baseWidth} - #{$R_Drawer});
   }
 
   // Left drawer + Right drawer
-  &.left ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) {
+  &.q-drawer--left
+    ~ .q-drawer--active.q-drawer--right:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
+    ~ .q-#{$el} {
     width: calc(#{$baseWidth} - #{$LR_Drawer});
   }
 }

package/dist/css/ripple.scss

@@ -16,8 +16,15 @@
   }
 
   &--effect {
-    position: relative;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     overflow: hidden;
+    background: none;
+    pointer-events: none;
+    z-index: 999;
   }
 }
 

package/dist/css/shared/q-field.scss

@@ -0,0 +1,318 @@
+@use "sass:math";
+@import "../mixins/field-mixins.scss";
+
+$transition-duration: 0.2s;
+
+.q-field {
+  display: flex;
+  --wrapper-height: 3rem;
+
+  &--dense {
+    --wrapper-height: 2.5rem;
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  &__wrapper {
+    --decorator-color: var(--outline);
+    display: flex;
+    position: relative;
+    height: var(--wrapper-height);
+  }
+
+  &--rounded#{&}--active &__wrapper {
+    $clip-x1: 1.25rem;
+    $clip-x2: 1.5rem;
+    $clip-y: 0.125rem;
+
+    // clip path has to go beyond 0% and 100% for y because of the floating label
+    clip-path: polygon(
+      0% -20%,
+      $clip-x1 -20%,
+      $clip-x1 $clip-y,
+      $clip-x2 $clip-y,
+      $clip-x2 -20%,
+      100% -20%,
+      100% 120%,
+      0% 120%
+    );
+  }
+
+  &--default &__wrapper,
+  &--filled &__wrapper {
+    border-bottom: 0.0625rem solid var(--decorator-color);
+  }
+
+  &--focus#{&}--default &__wrapper,
+  &--focus#{&}--filled &__wrapper {
+    border-bottom: 0.0625rem solid var(--decorator-color);
+    box-shadow: inset 0 -0.0625rem 0 var(--decorator-color);
+  }
+
+  &--has-border &__wrapper {
+    border: 0.0625rem solid var(--decorator-color);
+  }
+
+  &--focus#{&}--has-border &__wrapper {
+    box-shadow:
+      inset 0.0625rem 0 0 var(--decorator-color),
+      inset -0.0625rem 0 0 var(--decorator-color),
+      inset 0 0.0625rem 0 0 var(--decorator-color),
+      inset 0 -0.0625rem 0 0 var(--decorator-color);
+  }
+
+  &__wrapper {
+    border-radius: 0px;
+  }
+
+  &--rounded &__wrapper {
+    border-radius: calc(var(--wrapper-height) / 2);
+  }
+
+  &--outlined &__wrapper {
+    border-radius: 0.25rem;
+  }
+
+  &--filled &__wrapper {
+    background-color: var(--surface-variant);
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+
+  &--label#{&}--active#{&}--has-border &__wrapper {
+    border-top-color: transparent;
+    box-shadow: none;
+  }
+
+  &--label#{&}--focus#{&}--has-border &__wrapper {
+    box-shadow:
+      inset 0.0625rem 0 0 var(--decorator-color),
+      inset -0.0625rem 0 0 var(--decorator-color),
+      inset 0 -0.0625rem 0 0 var(--decorator-color);
+  }
+
+  &--label#{&}--active#{&}--rounded &__wrapper {
+    @include border-substitute("rounded");
+  }
+
+  &--label#{&}--active#{&}--outlined &__wrapper {
+    @include border-substitute("outlined");
+  }
+
+  // in case we have no label
+  &__label {
+    display: none;
+  }
+
+  &--label &__label {
+    display: flex;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 1rem;
+    line-height: calc(var(--wrapper-height) - 0.25rem);
+    color: var(--decorator-color);
+    pointer-events: none;
+    transition:
+      color $transition-duration ease 0s,
+      left $transition-duration ease 0s,
+      top $transition-duration ease 0s,
+      font-size $transition-duration ease 0s,
+      line-height $transition-duration ease 0s,
+      border-color $transition-duration ease 0s;
+    will-change: top, left, font-size, line-height;
+  }
+
+  &--default &__label,
+  &--filled &__label {
+    left: 1rem;
+  }
+
+  &--default:not(#{&}--dense) &__label,
+  &--filled:not(#{&}--dense) &__label {
+    top: 0.0625rem;
+  }
+
+  &--slot-prepend#{&}--default &__label,
+  &--slot-prepend#{&}--filled &__label {
+    left: calc(0.5rem + var(--slot-prepend-width));
+  }
+
+  &--active#{&}--default &__label,
+  &--active#{&}--filled &__label {
+    top: 0.6875rem;
+  }
+
+  &--rounded &__label {
+    left: 1.4375rem;
+  }
+
+  &--slot-prepend#{&}--rounded &__label {
+    left: calc(0.5rem + var(--slot-prepend-width));
+  }
+
+  &--active#{&}--rounded &__label {
+    left: 1.4375rem;
+  }
+
+  &--label#{&}--has-border#{&}--focus &__wrapper {
+    &::before,
+    &::after {
+      box-shadow: inset 0 0.0625rem 0 var(--decorator-color);
+    }
+  }
+
+  &--outlined &__label {
+    left: 0.75rem;
+  }
+
+  &--slot-prepend#{&}--outlined &__label {
+    left: calc(0.5rem + var(--slot-prepend-width));
+  }
+
+  // active state should not account for prepend slot width
+  &--active#{&}--outlined &__label {
+    left: 0.75rem;
+  }
+
+  &--active#{&}--has-border &__label::after {
+    content: "";
+    display: block;
+    margin-left: 0.25rem;
+    flex-grow: 1;
+    border-top-width: 0.0625rem;
+    border-top-style: solid;
+    border-top-color: var(--decorator-color);
+    min-width: 0.625rem;
+    height: 0.5rem;
+    pointer-events: none;
+    transition: border-color $transition-duration ease 0s;
+    opacity: 1 !important;
+  }
+
+  &--active#{&}--rounded &__label {
+    right: calc(var(--wrapper-height) / 2 - 0.125rem);
+  }
+
+  &--active#{&}--outlined &__label {
+    right: 1.375rem;
+  }
+
+  &--active &__label {
+    font-size: 0.75rem;
+    line-height: 0px;
+    margin-top: -0.0625rem;
+  }
+
+  &--active#{&}--default &__label,
+  &--active#{&}--filled &__label {
+    margin-top: 0px;
+  }
+
+  &--focus &__wrapper {
+    --decorator-color: var(--primary);
+  }
+
+  &--focus#{&}--has-border &__label::after {
+    border-top-width: 0.125rem;
+  }
+
+  &__input {
+    @include reset-form-element;
+    font-size: 1rem;
+    height: 100%;
+    color: unset;
+    flex-grow: 1;
+  }
+
+  &--default &__input,
+  &--filled &__input {
+    padding: 0 1rem;
+    padding-top: 0.9375rem;
+  }
+
+  &--focus#{&}--default &__input,
+  &--focus#{&}--filled &__input {
+    padding-top: 1rem;
+  }
+
+  &--rounded &__input {
+    padding: 0 1.4375rem;
+  }
+
+  &--outlined &__input {
+    padding: 0 0.75rem;
+  }
+
+  &--slot-prepend &__input {
+    padding-left: 0.5rem !important;
+  }
+
+  &--slot-append &__input {
+    padding-right: 0.5rem !important;
+  }
+
+  &__hint,
+  &__error {
+    font-size: 0.75rem;
+    text-align: left;
+    left: 1rem;
+    padding-top: 0.125rem;
+  }
+
+  &--error &__label,
+  &__error {
+    color: var(--error);
+  }
+
+  &--error &__wrapper,
+  &--error#{&}--focus &__wrapper {
+    --decorator-color: var(--error);
+  }
+
+  &__slot- {
+    &prepend,
+    &append,
+    &before,
+    &after {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__slot-prepend {
+    padding-left: 0.75rem;
+  }
+
+  &--rounded &__slot-prepend {
+    padding-left: 1rem;
+  }
+
+  &__slot-append {
+    padding-right: 0.75rem;
+  }
+
+  &--rounded &__slot-append {
+    padding-right: 1rem;
+  }
+
+  &__slot-before {
+    padding-right: 0.75rem;
+  }
+
+  &__slot-after {
+    padding-left: 0.75rem;
+  }
+
+  &--disable {
+    opacity: 0.5;
+    &,
+    * {
+      cursor: not-allowed;
+    }
+  }
+}