@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha14

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,52 @@
+@mixin reset-form-element {
+  padding: 0px;
+  background: none;
+  border: none;
+  border-radius: 0px;
+  outline: none;
+  appearance: none;
+  font-family: inherit;
+}
+
+@mixin clip-border($clip-height, $clip-width) {
+  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: calc(var(--border-width) * -1);
+    bottom: calc(var(--border-width) * -1);
+    width: calc(var(--wrapper-height) / 2);
+    height: var(--wrapper-height);
+    border: var(--border-width) solid transparent;
+    border-top-color: var(--decorator-color);
+    border-radius: $border-radius;
+  }
+
+  &::before {
+    left: calc(var(--border-width) * -1);
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    $clip-height: 0.125rem;
+    $clip-width: if($variant == "outlined", 0.9375rem, 0.3125rem);
+    @include clip-border($clip-height, $clip-width);
+  }
+
+  &::after {
+    right: calc(var(--border-width) * -1);
+    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,17 @@
 //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

@@ -1,5 +1,5 @@
 .q-ripple {
-  background-color: var(--ripple-color, white);
+  background-color: var(--ripple-color, var(--outline));
   opacity: 0.2;
   position: absolute;
   border-radius: 50%;

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

@@ -0,0 +1,305 @@
+@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);
+    --border-width: 0.0625rem;
+    display: flex;
+    position: relative;
+    height: var(--wrapper-height);
+  }
+
+  &--default &__wrapper,
+  &--filled &__wrapper {
+    border-bottom: var(--border-width) solid var(--decorator-color);
+  }
+
+  &--has-border &__wrapper {
+    border: var(--border-width) solid 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;
+  }
+
+  &--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: 1px;
+  }
+
+  &--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;
+  }
+
+  &--has-border#{&}--focus &__label {
+    transform: translateX(-0.0625rem);
+  }
+
+  &--label#{&}--rounded#{&}--focus &__wrapper::before {
+    @include clip-border(0.3125rem, 0.4375rem);
+  }
+
+  &--label#{&}--outlined#{&}--focus &__wrapper::before {
+    @include clip-border(0.3125rem, 1.0625rem);
+  }
+
+  &--rounded#{&}--focus &__input {
+    padding-left: 1.375rem;
+  }
+
+  &--outlined#{&}--focus &__input {
+    padding-left: 0.6875rem;
+  }
+
+  &--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: var(--border-width);
+    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);
+  }
+
+  &--active#{&}--outlined &__label {
+    right: 0.25rem;
+  }
+
+  &--active &__label {
+    font-size: 0.75rem;
+    line-height: 0px;
+    margin-top: calc(var(--border-width) * -1);
+  }
+
+  &--active#{&}--default &__label,
+  &--active#{&}--filled &__label {
+    margin-top: 0px;
+  }
+
+  &--focus &__wrapper {
+    --decorator-color: var(--primary);
+    --border-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: 15px;
+  }
+
+  &--focus#{&}--default &__input,
+  &--focus#{&}--filled &__input {
+    padding-top: 1rem;
+  }
+
+  &--rounded &__input {
+    padding: 0 23px;
+  }
+
+  &--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;
+    }
+  }
+
+  // prevent content moving up due to bottom border
+  &--focus#{&}--default &__slot-prepend,
+  &--focus#{&}--default &__slot-append,
+  &--focus#{&}--filled &__slot-prepend,
+  &--focus#{&}--filled &__slot-append {
+    margin-bottom: -0.0625rem;
+  }
+
+  &__slot-prepend {
+    padding-left: 12px;
+  }
+
+  &--rounded &__slot-prepend {
+    padding-left: 16px;
+  }
+
+  &--focus#{&}--has-border &__slot-prepend {
+    margin-left: -1px;
+  }
+
+  &__slot-append {
+    padding-right: 12px;
+  }
+
+  &--rounded &__slot-append {
+    padding-right: 16px;
+  }
+
+  &--focus#{&}--has-border &__slot-append {
+    margin-right: -1px;
+  }
+
+  &__slot-before {
+    padding-right: 0.75rem;
+  }
+
+  &__slot-after {
+    padding-left: 0.75rem;
+  }
+
+  &--disable {
+    opacity: 0.5;
+    &,
+    * {
+      cursor: not-allowed;
+    }
+  }
+}