@bildvitta/quasar-ui-asteroid 3.17.0-beta.21 → 3.17.0-beta.22

package/src/css/components/button.scss

@@ -1,116 +1,116 @@
-.qas-btn {
-  $root: &;
-
-  box-shadow: none;
-  min-height: 48px !important;
-  padding: var(--qas-spacing-xs) var(--qas-spacing-lg) !important;
-  text-transform: initial !important;
-  transition: color var(--qas-generic-transition), background-color var(--qas-generic-transition);
-
-  .q-icon {
-    font-size: 24px !important;
-  }
-
-  &:disabled {
-    opacity: 1 !important;
-  }
-
-  &:not(&--primary):not(:disabled):not(&--no-hover-on-white.qas-btn--tertiary-white):hover {
-    color: var(--q-primary-contrast) !important;
-  }
-
-  &--primary {
-    background-color: var(--q-primary) !important;
-    color: white !important;
-
-    &:disabled {
-      background-color: $grey-4 !important;
-      color: $grey-8 !important;
-    }
-
-    &:not(:disabled):hover {
-      background-color: var(--q-primary-contrast) !important;
-    }
-  }
-
-  &--secondary {
-    border: 1px solid currentColor !important;
-    color: var(--q-primary) !important;
-    position: relative;
-
-    &:disabled {
-      color: $grey-6 !important;
-    }
-  }
-
-  &--primary,
-  &--secondary {
-    &-icon-only {
-      height: 48px !important;
-      min-width: auto !important;
-      padding: 0 !important;
-      width: 48px !important;
-    }
-  }
-
-  &--tertiary {
-    min-height: 24px !important;
-    padding: 0 !important;
-
-    &:disabled {
-      color: $grey-6 !important;
-    }
-
-    &-grey-10 {
-      color: $grey-10 !important;
-    }
-
-    &-primary {
-      color: var(--q-primary) !important;
-    }
-
-    &-white {
-      color: white !important;
-    }
-
-    &-icon-only {
-      height: 24px !important;
-      min-width: auto !important;
-      padding: 0 !important;
-      width: 24px !important;
-    }
-  }
-
-  &--ellipsis {
-    width: 100%;
-
-    .q-btn__content {
-      flex-wrap: nowrap;
-
-      .block {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  &.q-btn {
-    &::before {
-      display: none;
-    }
-  }
-
-  .q-icon.on-left {
-    margin-right: var(--qas-spacing-xs);
-  }
-
-  .q-icon.on-right {
-    margin-left: var(--qas-spacing-xs);
-  }
-
-  .q-ripple,
-  .q-focus-helper {
-    display: none;
-  }
-}
+.qas-btn {
+  $root: &;
+
+  box-shadow: none;
+  min-height: 48px !important;
+  padding: var(--qas-spacing-xs) var(--qas-spacing-lg) !important;
+  text-transform: initial !important;
+  transition: color var(--qas-generic-transition), background-color var(--qas-generic-transition);
+
+  .q-icon {
+    font-size: 24px !important;
+  }
+
+  &:disabled {
+    opacity: 1 !important;
+  }
+
+  &:not(&--primary):not(:disabled):not(&--no-hover-on-white.qas-btn--tertiary-white):hover {
+    color: var(--q-primary-contrast) !important;
+  }
+
+  &--primary {
+    background-color: var(--q-primary) !important;
+    color: white !important;
+
+    &:disabled {
+      background-color: $grey-4 !important;
+      color: $grey-8 !important;
+    }
+
+    &:not(:disabled):hover {
+      background-color: var(--q-primary-contrast) !important;
+    }
+  }
+
+  &--secondary {
+    border: 1px solid currentColor !important;
+    color: var(--q-primary) !important;
+    position: relative;
+
+    &:disabled {
+      color: $grey-6 !important;
+    }
+  }
+
+  &--primary,
+  &--secondary {
+    &-icon-only {
+      height: 48px !important;
+      min-width: auto !important;
+      padding: 0 !important;
+      width: 48px !important;
+    }
+  }
+
+  &--tertiary {
+    min-height: 24px !important;
+    padding: 0 !important;
+
+    &:disabled {
+      color: $grey-6 !important;
+    }
+
+    &-grey-10 {
+      color: $grey-10 !important;
+    }
+
+    &-primary {
+      color: var(--q-primary) !important;
+    }
+
+    &-white {
+      color: white !important;
+    }
+
+    &-icon-only {
+      height: 24px !important;
+      min-width: auto !important;
+      padding: 0 !important;
+      width: 24px !important;
+    }
+  }
+
+  &--ellipsis {
+    width: 100%;
+
+    .q-btn__content {
+      flex-wrap: nowrap;
+
+      .block {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  &.q-btn {
+    &::before {
+      display: none;
+    }
+  }
+
+  .q-icon.on-left {
+    margin-right: var(--qas-spacing-xs);
+  }
+
+  .q-icon.on-right {
+    margin-left: var(--qas-spacing-xs);
+  }
+
+  .q-ripple,
+  .q-focus-helper {
+    display: none;
+  }
+}

package/src/css/components/checkbox.scss

@@ -1,14 +1,14 @@
-.q-checkbox {
-  &__label {
-    @include set-typography($body1);
-
-    padding-left: var(--qas-spacing-sm) !important;
-  }
-
-  &.disabled {
-    .q-checkbox__label,
-    .q-checkbox__inner {
-      color: $grey-6;
-    }
-  }
-}
+.q-checkbox {
+  &__label {
+    @include set-typography($body1);
+
+    padding-left: var(--qas-spacing-sm) !important;
+  }
+
+  &.disabled {
+    .q-checkbox__label,
+    .q-checkbox__inner {
+      color: $grey-6;
+    }
+  }
+}

package/src/css/components/editor.scss

@@ -1,7 +1,7 @@
-.q-editor {
-  &__content {
-    @include set-typography($body1);
-
-    color: $grey-10;
-  }
-}
+.q-editor {
+  &__content {
+    @include set-typography($body1);
+
+    color: $grey-10;
+  }
+}

package/src/css/components/field.scss

@@ -1,88 +1,88 @@
-.q-field {
-  $root: &;
-
-  .q-field__append,
-  .q-field__prepend {
-    will-change: transform;
-    transition: transform var(--qas-generic-transition);
-  }
-
-  .q-field__label {
-    will-change: transform;
-  }
-
-  &__label,
-  &--dense &__label {
-    @include set-typography($body2);
-  }
-
-  &--dense {
-    .q-textarea {
-      height: 100%;
-    }
-
-    .q-icon {
-      font-size: 18px !important;
-    }
-  }
-
-  &__native,
-  &__input,
-  &--dense &__native,
-  &--dense &__input {
-    @include set-typography($body2);
-
-    color: $grey-10;
-
-    &::placeholder {
-      color: $grey-6;
-    }
-  }
-
-  // Somente fields com label
-  &--float.q-field--labeled,
-  &--focused.q-field--labeled {
-    transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
-
-    &:not(&.qas-select--filter):not(&.qas-select--has-icon) .q-field__label {
-      transform: translateY(-10px) scale(0.85) !important;
-    }
-
-    &.qas-select--filter:not(&.qas-select--has-icon) .q-field__label {
-      transform: translateY(-8px) scale(0.85) !important;
-    }
-
-    .q-field__prepend,
-    .q-field__append {
-      transition: transform var(--qas-generic-transition);
-      transform: translateY(6px) !important;
-    }
-  }
-
-  .q-field__label {
-    transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
-  }
-
-  &--float.qas-numeric-input--has-icon,
-  &--focused.qas-numeric-input--has-icon,
-  &--float.qas-select--has-icon:not(.qas-select--filter),
-  &--focused.qas-select--has-icon:not(.qas-select--filter),
-  &--float.qas-input--has-icon,
-  &--focused.qas-input--has-icon {
-    .q-field__label {
-      transform: translate(-24px, -14px) scale(0.85) !important;
-    }
-  }
-
-  &--float.qas-select--has-icon.qas-select--filter,
-  &--focused.qas-select--has-icon.qas-select--filter {
-    .q-field__label {
-      transform: translate(-24px, -8px) scale(0.85) !important;
-    }
-  }
-
-  &--outlined .q-field__control {
-    background-color: white;
-    border-radius: $generic-border-radius;
-  }
-}
+.q-field {
+  $root: &;
+
+  .q-field__append,
+  .q-field__prepend {
+    will-change: transform;
+    transition: transform var(--qas-generic-transition);
+  }
+
+  .q-field__label {
+    will-change: transform;
+  }
+
+  &__label,
+  &--dense &__label {
+    @include set-typography($body2);
+  }
+
+  &--dense {
+    .q-textarea {
+      height: 100%;
+    }
+
+    .q-icon {
+      font-size: 18px !important;
+    }
+  }
+
+  &__native,
+  &__input,
+  &--dense &__native,
+  &--dense &__input {
+    @include set-typography($body2);
+
+    color: $grey-10;
+
+    &::placeholder {
+      color: $grey-6;
+    }
+  }
+
+  // Somente fields com label
+  &--float.q-field--labeled,
+  &--focused.q-field--labeled {
+    transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
+
+    &:not(&.qas-select--filter):not(&.qas-select--has-icon) .q-field__label {
+      transform: translateY(-10px) scale(0.85) !important;
+    }
+
+    &.qas-select--filter:not(&.qas-select--has-icon) .q-field__label {
+      transform: translateY(-8px) scale(0.85) !important;
+    }
+
+    .q-field__prepend,
+    .q-field__append {
+      transition: transform var(--qas-generic-transition);
+      transform: translateY(6px) !important;
+    }
+  }
+
+  .q-field__label {
+    transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
+  }
+
+  &--float.qas-numeric-input--has-icon,
+  &--focused.qas-numeric-input--has-icon,
+  &--float.qas-select--has-icon:not(.qas-select--filter),
+  &--focused.qas-select--has-icon:not(.qas-select--filter),
+  &--float.qas-input--has-icon,
+  &--focused.qas-input--has-icon {
+    .q-field__label {
+      transform: translate(-24px, -14px) scale(0.85) !important;
+    }
+  }
+
+  &--float.qas-select--has-icon.qas-select--filter,
+  &--focused.qas-select--has-icon.qas-select--filter {
+    .q-field__label {
+      transform: translate(-24px, -8px) scale(0.85) !important;
+    }
+  }
+
+  &--outlined .q-field__control {
+    background-color: white;
+    border-radius: $generic-border-radius;
+  }
+}

package/src/css/components/index.scss

@@ -1,10 +1,10 @@
-@import './base';
-@import './button';
-@import './checkbox';
-@import './editor';
-@import './field';
-@import './item';
-@import './radio';
-@import './scrollbar';
-@import './tabs';
-@import './toggle';
+@import './base';
+@import './button';
+@import './checkbox';
+@import './editor';
+@import './field';
+@import './item';
+@import './radio';
+@import './scrollbar';
+@import './tabs';
+@import './toggle';

package/src/css/components/item.scss

@@ -1,52 +1,52 @@
-.q-item {
-  font-size: 16px;
-
-  &:not(.disabled) {
-    font-weight: 600;
-  }
-
-  &:not(&--clickable) {
-    color: $grey-8;
-  }
-
-  &.q-router-link--active {
-    background-color: transparent !important;
-    font-weight: 600;
-
-    &::before {
-      background-color: var(--q-primary);
-      bottom: 0;
-      color: var(--q-primary);
-      content: '';
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 4px;
-    }
-  }
-
-  &--clickable:not(&--active) {
-    color: $grey-10;
-    transition: var(--qas-generic-transition);
-
-    &:not(&.q-router-link--active):hover {
-      color: var(--q-primary-contrast);
-    }
-  }
-
-  &__label--caption {
-    transition: var(--qas-generic-transition);
-  }
-
-  &__section--avatar {
-    min-width: 0;
-  }
-
-  & .q-focus-helper {
-    display: none;
-  }
-
-  &__section--side {
-    padding-right: var(--qas-spacing-sm);
-  }
-}
+.q-item {
+  font-size: 16px;
+
+  &:not(.disabled) {
+    font-weight: 600;
+  }
+
+  &:not(&--clickable) {
+    color: $grey-8;
+  }
+
+  &.q-router-link--active {
+    background-color: transparent !important;
+    font-weight: 600;
+
+    &::before {
+      background-color: var(--q-primary);
+      bottom: 0;
+      color: var(--q-primary);
+      content: '';
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 4px;
+    }
+  }
+
+  &--clickable:not(&--active) {
+    color: $grey-10;
+    transition: var(--qas-generic-transition);
+
+    &:not(&.q-router-link--active):hover {
+      color: var(--q-primary-contrast);
+    }
+  }
+
+  &__label--caption {
+    transition: var(--qas-generic-transition);
+  }
+
+  &__section--avatar {
+    min-width: 0;
+  }
+
+  & .q-focus-helper {
+    display: none;
+  }
+
+  &__section--side {
+    padding-right: var(--qas-spacing-sm);
+  }
+}

package/src/css/components/radio.scss

@@ -1,18 +1,18 @@
-.q-radio {
-  &__label {
-    @include set-typography($body2);
-
-    padding-left: var(--qas-spacing-sm) !important;
-  }
-
-  &__inner::before {
-    color: $primary;
-  }
-
-  &.disabled {
-    .q-radio__label,
-    .q-radio__inner {
-      color: $grey-6;
-    }
-  }
-}
+.q-radio {
+  &__label {
+    @include set-typography($body2);
+
+    padding-left: var(--qas-spacing-sm) !important;
+  }
+
+  &__inner::before {
+    color: $primary;
+  }
+
+  &.disabled {
+    .q-radio__label,
+    .q-radio__inner {
+      color: $grey-6;
+    }
+  }
+}

package/src/css/components/scrollbar.scss

@@ -1,20 +1,20 @@
-// Webkit browsers
-::-webkit-scrollbar {
-  background: var(--qas-scrollbar-background);
-  border-radius: var(--qas-scrollbar-border-radius);
-  height: var(--qas-scrollbar-size);
-  width: var(--qas-scrollbar-size);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--qas-scrollbar-thumb-background);
-  background-clip: padding-box;
-  border: 1px solid rgba(0%, 0%, 0%, 0%);
-  border-radius: var(--qas-scrollbar-border-radius);
-  transition: background-color var(--qas-generic-transition);
-  width: var(--qas-scrollbar-size);
-
-  &:hover {
-    background: var(--qas-scrollbar-thumb-background-hover);
-  }
-}
+// Webkit browsers
+::-webkit-scrollbar {
+  background: var(--qas-scrollbar-background);
+  border-radius: var(--qas-scrollbar-border-radius);
+  height: var(--qas-scrollbar-size);
+  width: var(--qas-scrollbar-size);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--qas-scrollbar-thumb-background);
+  background-clip: padding-box;
+  border: 1px solid rgba(0%, 0%, 0%, 0%);
+  border-radius: var(--qas-scrollbar-border-radius);
+  transition: background-color var(--qas-generic-transition);
+  width: var(--qas-scrollbar-size);
+
+  &:hover {
+    background: var(--qas-scrollbar-thumb-background-hover);
+  }
+}

package/src/css/components/tabs.scss

@@ -1,3 +1,3 @@
-.q-tabs__arrow {
-  color: $primary;
-}
+.q-tabs__arrow {
+  color: $primary;
+}