@quaffui/quaff 0.1.0-prealpha

package/dist/css/mixins/menu.scss

@@ -0,0 +1,70 @@
+@mixin menu {
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  box-shadow: var(--elevate2);
+  background-color: var(--surface);
+  z-index: 11;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: auto;
+  width: 100%;
+  max-height: 50vh;
+  max-width: none !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: 0.875rem;
+  font-weight: normal;
+  text-transform: none;
+  color: var(--on-surface);
+  line-height: normal;
+  text-align: left;
+  border-radius: 0.25rem;
+  transform: scale(0.8) translateY(120%);
+  transition: var(--speed2) all, 0s background-color;
+
+  &--active {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1) translateY(100%);
+  }
+
+  * {
+    white-space: inherit !important;
+  }
+
+  > a {
+    padding: 0.75rem 1rem;
+    border-radius: 0;
+  }
+
+  > a:not(.row) {
+    display: block;
+  }
+
+  > a:is(:hover, :focus, .active) {
+    background-color: var(--active);
+  }
+
+  &__dense {
+    top: 0;
+    bottom: auto;
+    transform: none !important;
+    border-radius: inherit;
+  }
+
+  &__maximized {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    max-height: none;
+    min-height: auto;
+    z-index: 100;
+    border-radius: 0;
+    transform: none !important;
+  }
+}

package/dist/css/mixins/selection.scss

@@ -0,0 +1,184 @@
+// type can be: checkbox, radio or switch
+@mixin selection($type) {
+  width: auto;
+  height: auto;
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+
+  @if $type == checkbox or $type == radio {
+    > input {
+      width: 1.5rem;
+      height: 1.5rem;
+      opacity: 0;
+    }
+
+    > span:not(:empty) {
+      padding-left: 0.25rem;
+    }
+
+    > input:is(:focus, :hover) + span::before {
+      background-color: var(--active);
+      box-shadow: 0 0 0 0.5rem var(--active);
+    }
+
+    > input:checked + span::before,
+    &--icon > input:checked + span > i {
+      color: var(--primary);
+    }
+  }
+
+  > span {
+    display: inline-flex;
+    align-items: center;
+    color: var(--on-background);
+    font-size: 0.875rem;
+  }
+
+  // the second selector was actually .icon > span > i before refactoring
+  > span::before,
+  &--icon > span > i {
+    font-family: var(--font-icon);
+    font-weight: normal;
+    font-style: normal;
+    font-size: 1.5rem;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+    text-align: center;
+    overflow: hidden;
+    width: 1.5rem;
+    height: 1.5rem;
+    box-sizing: border-box;
+    margin: 0 auto;
+    outline: none;
+    color: var(--primary);
+    position: absolute;
+    left: -1.5rem;
+    background-color: transparent;
+    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%);
+    }
+  }
+
+  @if $type == checkbox {
+    > span::before {
+      content: "check_box_outline_blank";
+    }
+
+    > input:checked + span::before {
+      content: "check_box";
+      font-variation-settings: "FILL" 1;
+    }
+  }
+
+  @if $type == radio {
+    > span::before {
+      content: "radio_button_unchecked";
+    }
+
+    > input:checked + span::before {
+      content: "radio_button_checked";
+    }
+  }
+
+  &--icon > span::before {
+    content: "" !important;
+    font-variation-settings: unset !important;
+  }
+
+  // selectors were just for .icon (...) before refactoring
+  &--icon > input:checked + span > i:first-child,
+  &--icon > span > i:last-child {
+    opacity: 0;
+  }
+
+  // selectors were just for .icon (...) before refactoring
+  &--icon > input:checked + span > i:last-child,
+  &--icon > span > i:first-child {
+    opacity: 1;
+  }
+
+  > input:disabled + span {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  & + & {
+    margin-left: 0.5rem;
+  }
+}

package/dist/css/mixins/table.scss

@@ -0,0 +1,36 @@
+@mixin table {
+  width: 100%;
+  border-spacing: 0;
+  font-size: 0.875rem;
+  color: var(--on-background);
+  text-align: left;
+  border-radius: 0;
+
+  :is(th, td) {
+    width: 1%;
+    text-align: inherit;
+    // from &--md, as default, it was 0.5rem prior
+    padding: 0.75rem;
+  }
+
+  th {
+    font-weight: 500;
+  }
+
+  :is(th, td) {
+    border-bottom: 0.0625rem solid var(--outline);
+  }
+
+  &--sm,
+  &--dense :is(th, td) {
+    padding: 0;
+  }
+
+  &--md :is(th, td) {
+    padding: 0.75rem;
+  }
+
+  &--lg :is(th, td) {
+    padding: 1rem;
+  }
+}

package/dist/css/mixins.scss

@@ -0,0 +1,135 @@
+@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;
+
+  &-#{$position} {
+    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

@@ -0,0 +1,70 @@
+// 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} {
+      @include elevate($value, "top");
+      @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/colors.module.scss

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

package/dist/css/theme/theme.dark.scss

@@ -0,0 +1,36 @@
+body.dark {
+  --primary: rgba(var(--primary-dark));
+  --on-primary: rgba(var(--on-primary-dark));
+  --primary-container: rgba(var(--primary-container-dark));
+  --on-primary-container: rgba(var(--on-primary-container-dark));
+  --secondary: rgba(var(--secondary-dark));
+  --on-secondary: rgba(var(--on-secondary-dark));
+  --secondary-container: rgba(var(--secondary-container-dark));
+  --on-secondary-container: rgba(var(--on-secondary-container-dark));
+  --tertiary: rgba(var(--tertiary-dark));
+  --on-tertiary: rgba(var(--on-tertiary-dark));
+  --tertiary-container: rgba(var(--tertiary-container-dark));
+  --on-tertiary-container: rgba(var(--on-tertiary-container-dark));
+  --error: rgba(var(--error-dark));
+  --error-container: rgba(var(--error-container-dark));
+  --on-error: rgba(var(--on-error-dark));
+  --on-error-container: rgba(var(--on-error-container-dark));
+  --background: rgba(var(--background-dark));
+  --on-background: rgba(var(--on-background-dark));
+  --surface: rgba(var(--surface-dark));
+  --on-surface: rgba(var(--on-surface-dark));
+  --on-surface-2: rgba(var(--on-surface-dark), 0.08);
+  --on-surface-4: rgba(var(--on-surface-dark), 0.12);
+  --surface-variant: rgba(var(--surface-variant-dark));
+  --on-surface-variant: rgba(var(--on-surface-variant-dark));
+  --on-surface-variant-2: rgba(var(--on-surface-variant-dark), 0.08);
+  --on-surface-variant-4: rgba(var(--on-surface-variant-dark), 0.12);
+  --outline: rgba(var(--outline-dark));
+  --inverse-on-surface: rgba(var(--inverse-on-surface-dark));
+  --inverse-surface: rgba(var(--inverse-surface-dark));
+  --inverse-primary: rgba(var(--inverse-primary-dark));
+  --shadow: rgba(var(--shadow-dark));
+  --surface-tint: rgba(var(--surface-tint-dark));
+  --outline-variant: rgba(var(--outline-variant-dark));
+  --scrim: rgba(var(--scrim-dark));
+}