@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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

@@ -0,0 +1,351 @@
+@use "sass:math";
+@use "../mixins";
+
+.q-field {
+  $transition-duration: 0.2s;
+  $wrapper-height: 3rem;
+  $wrapper-height-dense: 2.5rem;
+
+  display: flex;
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  &__wrapper {
+    --decorator-color: var(--outline);
+    display: flex;
+    position: relative;
+    height: $wrapper-height;
+  }
+
+  &--dense &__wrapper {
+    height: $wrapper-height-dense;
+  }
+
+  &--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: math.div($wrapper-height, 2);
+  }
+
+  &--rounded#{&}--dense &__wrapper {
+    border-radius: math.div($wrapper-height-dense, 2);
+  }
+
+  &--outlined &__wrapper {
+    border-radius: 0.25rem;
+  }
+
+  &--filled &__wrapper {
+    background-color: var(--surface-container-highest);
+  }
+
+  &--filled:not(&--rounded) &__wrapper {
+    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 mixins.border-substitute("rounded", $wrapper-height);
+  }
+
+  &--label#{&}--active#{&}--rounded#{&}--dense &__wrapper {
+    @include mixins.border-substitute("rounded", $wrapper-height-dense, true);
+  }
+
+  &--label#{&}--active#{&}--outlined &__wrapper {
+    @include mixins.border-substitute("outlined", $wrapper-height);
+  }
+
+  &--label#{&}--active#{&}--outlined#{&}--dense &__wrapper {
+    @include mixins.border-substitute("outlined", $wrapper-height-dense, true);
+  }
+
+  // in case we have no label
+  &__label {
+    display: none;
+  }
+
+  &--label &__label {
+    display: flex;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 1rem;
+    line-height: $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;
+  }
+
+  &--label#{&}--dense &__label {
+    line-height: $wrapper-height-dense - 0.25rem;
+  }
+
+  &--default &__label,
+  &--filled &__label {
+    left: 1rem;
+  }
+
+  &--default:not(#{&}--dense) &__label,
+  &--filled:not(#{&}--dense) &__label {
+    top: 0.0625rem;
+  }
+
+  &--snippet-prepend#{&}--default &__label,
+  &--snippet-prepend#{&}--filled &__label {
+    left: calc(0.5rem + var(--snippet-prepend-width));
+  }
+
+  &--active#{&}--default &__label,
+  &--active#{&}--filled &__label {
+    top: 0.6875rem;
+  }
+
+  &--rounded &__label {
+    left: 1.4375rem;
+  }
+
+  &--snippet-prepend#{&}--rounded &__label {
+    left: calc(0.5rem + var(--snippet-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;
+  }
+
+  &--snippet-prepend#{&}--outlined &__label {
+    left: calc(0.5rem + var(--snippet-prepend-width));
+  }
+
+  // active state should not account for prepend snippet 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: math.div($wrapper-height, 2) - 0.125rem;
+  }
+
+  &--active#{&}--rounded#{&}--dense &__label {
+    right: math.div($wrapper-height-dense, 2) - 0.125rem;
+  }
+
+  &--active#{&}--outlined &__label {
+    right: 1.375rem;
+  }
+
+  &--active#{&}--outlined#{&}--dense &__label {
+    right: 1.125rem;
+  }
+
+  &--active &__label {
+    font-size: 0.75rem;
+    line-height: 0px;
+    margin-top: -0.0625rem;
+  }
+
+  &--active#{&}--dense &__label {
+    line-height: 0px;
+  }
+
+  &--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 mixins.reset-form-element;
+    font-size: 1rem;
+    height: 100%;
+    color: unset;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  &--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;
+  }
+
+  &--snippet-prepend &__input {
+    padding-left: 0.5rem !important;
+  }
+
+  &--snippet-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);
+  }
+
+  &__snippet- {
+    &prepend,
+    &append,
+    &before,
+    &after {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__snippet-prepend {
+    padding-left: 0.75rem;
+  }
+
+  &--rounded &__snippet-prepend {
+    padding-left: 1rem;
+  }
+
+  &__snippet-append {
+    padding-right: 0.75rem;
+  }
+
+  &--rounded &__snippet-append {
+    padding-right: 1rem;
+  }
+
+  &__snippet-before {
+    padding-right: 0.75rem;
+  }
+
+  &__snippet-after {
+    padding-left: 0.75rem;
+  }
+
+  &--disable {
+    opacity: 0.5;
+    &,
+    * {
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/css/theme/_color-classes.scss

@@ -0,0 +1,332 @@
+.bg-primary {
+  background-color: var(--primary) !important;
+}
+.text-primary {
+  color: var(--primary) !important;
+}
+.border-primary {
+  border-color: var(--primary) !important;
+}
+.bg-on-primary {
+  background-color: var(--on-primary) !important;
+}
+.text-on-primary {
+  color: var(--on-primary) !important;
+}
+.border-on-primary {
+  border-color: var(--on-primary) !important;
+}
+.primary {
+  @extend .bg-primary;
+  @extend .text-on-primary;
+}
+
+.bg-primary-container {
+  background-color: var(--primary-container) !important;
+}
+.text-primary-container {
+  color: var(--primary-container) !important;
+}
+.border-primary-container {
+  border-color: var(--primary-container) !important;
+}
+.bg-on-primary-container {
+  background-color: var(--on-primary-container) !important;
+}
+.text-on-primary-container {
+  color: var(--on-primary-container) !important;
+}
+.border-on-primary-container {
+  border-color: var(--on-primary-container) !important;
+}
+.primary-container {
+  @extend .bg-primary-container;
+  @extend .text-on-primary-container;
+}
+
+.bg-secondary {
+  background-color: var(--secondary) !important;
+}
+.text-secondary {
+  color: var(--secondary) !important;
+}
+.border-secondary {
+  border-color: var(--secondary) !important;
+}
+.bg-on-secondary {
+  background-color: var(--on-secondary) !important;
+}
+.text-on-secondary {
+  color: var(--on-secondary) !important;
+}
+.border-on-secondary {
+  border-color: var(--on-secondary) !important;
+}
+.secondary {
+  @extend .bg-secondary;
+  @extend .text-on-secondary;
+}
+
+.bg-secondary-container {
+  background-color: var(--secondary-container) !important;
+}
+.text-secondary-container {
+  color: var(--secondary-container) !important;
+}
+.border-secondary-container {
+  border-color: var(--secondary-container) !important;
+}
+.bg-on-secondary-container {
+  background-color: var(--on-secondary-container) !important;
+}
+.text-on-secondary-container {
+  color: var(--on-secondary-container) !important;
+}
+.border-on-secondary-container {
+  border-color: var(--on-secondary-container) !important;
+}
+.secondary-container {
+  @extend .bg-secondary-container;
+  @extend .text-on-secondary-container;
+}
+
+.bg-tertiary {
+  background-color: var(--tertiary) !important;
+}
+.text-tertiary {
+  color: var(--tertiary) !important;
+}
+.border-tertiary {
+  border-color: var(--tertiary) !important;
+}
+.bg-on-tertiary {
+  background-color: var(--on-tertiary) !important;
+}
+.text-on-tertiary {
+  color: var(--on-tertiary) !important;
+}
+.border-on-tertiary {
+  border-color: var(--on-tertiary) !important;
+}
+.tertiary {
+  @extend .bg-tertiary;
+  @extend .text-on-tertiary;
+}
+
+.bg-tertiary-container {
+  background-color: var(--tertiary-container) !important;
+}
+.text-tertiary-container {
+  color: var(--tertiary-container) !important;
+}
+.border-tertiary-container {
+  border-color: var(--tertiary-container) !important;
+}
+.bg-on-tertiary-container {
+  background-color: var(--on-tertiary-container) !important;
+}
+.text-on-tertiary-container {
+  color: var(--on-tertiary-container) !important;
+}
+.border-on-tertiary-container {
+  border-color: var(--on-tertiary-container) !important;
+}
+.tertiary-container {
+  @extend .bg-tertiary-container;
+  @extend .text-on-tertiary-container;
+}
+
+.bg-error {
+  background-color: var(--error) !important;
+}
+.text-error {
+  color: var(--error) !important;
+}
+.border-error {
+  border-color: var(--error) !important;
+}
+.bg-on-error {
+  background-color: var(--on-error) !important;
+}
+.text-on-error {
+  color: var(--on-error) !important;
+}
+.border-on-error {
+  border-color: var(--on-error) !important;
+}
+.error {
+  @extend .bg-error;
+  @extend .text-on-error;
+}
+
+.bg-error-container {
+  background-color: var(--error-container) !important;
+}
+.text-error-container {
+  color: var(--error-container) !important;
+}
+.border-error-container {
+  border-color: var(--error-container) !important;
+}
+.bg-on-error-container {
+  background-color: var(--on-error-container) !important;
+}
+.text-on-error-container {
+  color: var(--on-error-container) !important;
+}
+.border-on-error-container {
+  border-color: var(--on-error-container) !important;
+}
+.error-container {
+  @extend .bg-error-container;
+  @extend .text-on-error-container;
+}
+
+.bg-background {
+  background-color: var(--background) !important;
+}
+.text-background {
+  color: var(--background) !important;
+}
+.border-background {
+  border-color: var(--background) !important;
+}
+.bg-on-background {
+  background-color: var(--on-background) !important;
+}
+.text-on-background {
+  color: var(--on-background) !important;
+}
+.border-on-background {
+  border-color: var(--on-background) !important;
+}
+.background {
+  @extend .bg-background;
+  @extend .text-on-background;
+}
+
+.bg-surface {
+  background-color: var(--surface) !important;
+}
+.text-surface {
+  color: var(--surface) !important;
+}
+.border-surface {
+  border-color: var(--surface) !important;
+}
+.bg-on-surface {
+  background-color: var(--on-surface) !important;
+}
+.text-on-surface {
+  color: var(--on-surface) !important;
+}
+.border-on-surface {
+  border-color: var(--on-surface) !important;
+}
+.surface {
+  @extend .bg-surface;
+  @extend .text-on-surface;
+}
+
+.bg-surface-variant {
+  background-color: var(--surface-variant) !important;
+}
+.text-surface-variant {
+  color: var(--surface-variant) !important;
+}
+.border-surface-variant {
+  border-color: var(--surface-variant) !important;
+}
+.bg-on-surface-variant {
+  background-color: var(--on-surface-variant) !important;
+}
+.text-on-surface-variant {
+  color: var(--on-surface-variant) !important;
+}
+.border-on-surface-variant {
+  border-color: var(--on-surface-variant) !important;
+}
+.surface-variant {
+  @extend .bg-surface-variant;
+  @extend .text-on-surface-variant;
+}
+
+.bg-outline {
+  background-color: var(--outline) !important;
+}
+.text-outline {
+  color: var(--outline) !important;
+}
+.border-outline {
+  border-color: var(--outline) !important;
+}
+
+.bg-inverse-surface {
+  background-color: var(--inverse-surface) !important;
+}
+.text-inverse-surface {
+  color: var(--inverse-surface) !important;
+}
+.border-inverse-surface {
+  border-color: var(--inverse-surface) !important;
+}
+
+.bg-inverse-on-surface {
+  background-color: var(--inverse-on-surface) !important;
+}
+.text-inverse-on-surface {
+  color: var(--inverse-on-surface) !important;
+}
+.border-inverse-on-surface {
+  border-color: var(--inverse-on-surface) !important;
+}
+
+.bg-inverse-primary {
+  background-color: var(--inverse-primary) !important;
+}
+.text-inverse-primary {
+  color: var(--inverse-primary) !important;
+}
+.border-inverse-primary {
+  border-color: var(--inverse-primary) !important;
+}
+
+.bg-shadow {
+  background-color: var(--shadow) !important;
+}
+.text-shadow {
+  color: var(--shadow) !important;
+}
+.border-shadow {
+  border-color: var(--shadow) !important;
+}
+
+.bg-surface-tint {
+  background-color: var(--surface-tint) !important;
+}
+.text-surface-tint {
+  color: var(--surface-tint) !important;
+}
+.border-surface-tint {
+  border-color: var(--surface-tint) !important;
+}
+
+.bg-outline-variant {
+  background-color: var(--outline-variant) !important;
+}
+.text-outline-variant {
+  color: var(--outline-variant) !important;
+}
+.border-outline-variant {
+  border-color: var(--outline-variant) !important;
+}
+
+.bg-scrim {
+  background-color: var(--scrim) !important;
+}
+.text-scrim {
+  color: var(--scrim) !important;
+}
+.border-scrim {
+  border-color: var(--scrim) !important;
+}