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

package/src/css/components/toggle.scss

@@ -1,13 +1,13 @@
-.q-toggle {
-  &__label {
-    @include set-typography($body2);
-
-    padding-left: var(--qas-spacing-sm) !important;
-  }
-
-  &.disabled {
-    .q-toggle__label {
-      color: $grey-6;
-    }
-  }
-}
+.q-toggle {
+  &__label {
+    @include set-typography($body2);
+
+    padding-left: var(--qas-spacing-sm) !important;
+  }
+
+  &.disabled {
+    .q-toggle__label {
+      color: $grey-6;
+    }
+  }
+}

package/src/css/mixins/index.scss

@@ -1,3 +1,3 @@
-@import './set-button';
-@import './set-brand';
-@import './set-typography';
+@import './set-button';
+@import './set-brand';
+@import './set-typography';

package/src/css/mixins/set-brand.scss

@@ -1,15 +1,15 @@
-@mixin set-brand($name, $color) {
-  :root {
-    --q-#{$name}: #{$color};
-  }
-
-  .text-#{$name} {
-    color: $color !important;
-    color: var(--q-#{$name}) !important;
-  }
-
-  .bg-#{$name} {
-    background: $color !important;
-    background: var(--q-#{$name}) !important;
-  }
-}
+@mixin set-brand($name, $color) {
+  :root {
+    --q-#{$name}: #{$color};
+  }
+
+  .text-#{$name} {
+    color: $color !important;
+    color: var(--q-#{$name}) !important;
+  }
+
+  .bg-#{$name} {
+    background: $color !important;
+    background: var(--q-#{$name}) !important;
+  }
+}

package/src/css/mixins/set-button.scss

@@ -1,26 +1,26 @@
-@mixin set-button(
-  $variant,
-  $icon-only: false,
-  $no-hover-on-white: false,
-  $color: false,
-  $ellipsis: false
-) {
-  @extend .qas-btn;
-  @extend .qas-btn--#{$variant};
-
-  @if $variant == tertiary and $color {
-    @extend .qas-btn--tertiary-#{$color};
-  }
-
-  @if $icon-only {
-    @extend .qas-btn--#{$variant}-icon-only;
-  }
-
-  @if $no-hover-on-white {
-    @extend .qas-btn--no-hover-on-white;
-  }
-
-  @if $ellipsis {
-    @extend .qas-btn--ellipsis;
-  }
-}
+@mixin set-button(
+  $variant,
+  $icon-only: false,
+  $no-hover-on-white: false,
+  $color: false,
+  $ellipsis: false
+) {
+  @extend .qas-btn;
+  @extend .qas-btn--#{$variant};
+
+  @if $variant == tertiary and $color {
+    @extend .qas-btn--tertiary-#{$color};
+  }
+
+  @if $icon-only {
+    @extend .qas-btn--#{$variant}-icon-only;
+  }
+
+  @if $no-hover-on-white {
+    @extend .qas-btn--no-hover-on-white;
+  }
+
+  @if $ellipsis {
+    @extend .qas-btn--ellipsis;
+  }
+}

package/src/css/mixins/set-typography.scss

@@ -1,8 +1,8 @@
-@use 'sass:map';
-
-@mixin set-typography($name, $important: false) {
-  font-size: if($important, map.get($name, 'size') !important, map.get($name, 'size'));
-  font-weight: if($important, map.get($name, 'weight') !important, map.get($name, 'weight'));
-  letter-spacing: if($important, map.get($name, 'letter-spacing') !important, map.get($name, 'letter-spacing'));
-  line-height: if($important, map.get($name, 'line-height') !important, map.get($name, 'line-height'));
-}
+@use 'sass:map';
+
+@mixin set-typography($name, $important: false) {
+  font-size: if($important, map.get($name, 'size') !important, map.get($name, 'size'));
+  font-weight: if($important, map.get($name, 'weight') !important, map.get($name, 'weight'));
+  letter-spacing: if($important, map.get($name, 'letter-spacing') !important, map.get($name, 'letter-spacing'));
+  line-height: if($important, map.get($name, 'line-height') !important, map.get($name, 'line-height'));
+}

package/src/css/plugins/index.scss

@@ -1,2 +1,2 @@
-@import './notify';
-@import './loading';
+@import './notify';
+@import './loading';

package/src/css/plugins/loading.scss

@@ -1,5 +1,5 @@
-.q-loading.qas-loading {
-  .q-loading__backdrop {
-    opacity: 0.9;
-  }
-}
+.q-loading.qas-loading {
+  .q-loading__backdrop {
+    opacity: 0.9;
+  }
+}

package/src/css/plugins/notify.scss

@@ -1,100 +1,100 @@
-.q-notification {
-  &:not(.boot-notification).qas-notification {
-    margin-top: 80px;
-    max-width: 560px;
-  }
-
-  &.qas-notification {
-    &--error::before,
-    &--success::before {
-      border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
-      bottom: 0;
-      content: '';
-      left: calc(var(--qas-spacing-md) * -1);
-      position: relative;
-      top: 0;
-      width: 4px;
-    }
-
-    &--error::before {
-      background-color: var(--q-negative);
-    }
-
-    &--success::before {
-      background-color: var(--q-positive);
-    }
-
-    .q-notification__actions {
-      align-self: start;
-      padding-top: var(--qas-spacing-xs);
-
-      .q-btn {
-        color: white !important;
-        height: var(--qas-spacing-md);
-        min-height: auto;
-        min-width: auto;
-        padding: 0;
-        text-align: center;
-        text-transform: none;
-        width: var(--qas-spacing-md);
-
-        &__content {
-          height: var(--qas-spacing-md);
-
-          span {
-            align-self: center;
-            height: var(--qas-spacing-md);
-            line-height: 0.9;
-            width: var(--qas-spacing-md);
-          }
-        }
-      }
-    }
-
-    .q-notification__content {
-      .q-icon {
-        margin-right: var(--qas-spacing-sm);
-      }
-    }
-  }
-
-  &.boot-notification {
-    // classe do quasar adc fixo 10px de margin-bottom
-    margin-top: 0;
-    margin-bottom: calc(var(--qas-spacing-xl) - 10px);
-    max-width: 480px;
-    width: calc(100% - 20px);
-
-    &--has-link {
-      transition: var(--qas-generic-transition);
-
-      &:not(:has(.boot-notification__close-button:hover)):hover .boot-notification__title {
-        color: var(--q-primary) !important;
-      }
-    }
-
-    .boot-notification__close-button {
-      position: absolute;
-      right: calc(var(--qas-spacing-sm) * -1);
-      top: 0;
-    }
-
-    .q-notification__wrapper {
-      position: relative;
-
-      &::before {
-        background-color: var(--q-primary);
-        bottom: calc((var(--qas-spacing-sm)) * -1);
-        content: '';
-        left: calc((var(--qas-spacing-md)) * -1);
-        position: absolute;
-        top: calc((var(--qas-spacing-sm)) * -1);
-        width: 4px;
-      }
-    }
-  }
-
-  @media (max-width: $breakpoint-xs) {
-    margin-top: 40px;
-  }
-}
+.q-notification {
+  &:not(.boot-notification).qas-notification {
+    margin-top: 80px;
+    max-width: 560px;
+  }
+
+  &.qas-notification {
+    &--error::before,
+    &--success::before {
+      border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
+      bottom: 0;
+      content: '';
+      left: calc(var(--qas-spacing-md) * -1);
+      position: relative;
+      top: 0;
+      width: 4px;
+    }
+
+    &--error::before {
+      background-color: var(--q-negative);
+    }
+
+    &--success::before {
+      background-color: var(--q-positive);
+    }
+
+    .q-notification__actions {
+      align-self: start;
+      padding-top: var(--qas-spacing-xs);
+
+      .q-btn {
+        color: white !important;
+        height: var(--qas-spacing-md);
+        min-height: auto;
+        min-width: auto;
+        padding: 0;
+        text-align: center;
+        text-transform: none;
+        width: var(--qas-spacing-md);
+
+        &__content {
+          height: var(--qas-spacing-md);
+
+          span {
+            align-self: center;
+            height: var(--qas-spacing-md);
+            line-height: 0.9;
+            width: var(--qas-spacing-md);
+          }
+        }
+      }
+    }
+
+    .q-notification__content {
+      .q-icon {
+        margin-right: var(--qas-spacing-sm);
+      }
+    }
+  }
+
+  &.boot-notification {
+    // classe do quasar adc fixo 10px de margin-bottom
+    margin-top: 0;
+    margin-bottom: calc(var(--qas-spacing-xl) - 10px);
+    max-width: 480px;
+    width: calc(100% - 20px);
+
+    &--has-link {
+      transition: var(--qas-generic-transition);
+
+      &:not(:has(.boot-notification__close-button:hover)):hover .boot-notification__title {
+        color: var(--q-primary) !important;
+      }
+    }
+
+    .boot-notification__close-button {
+      position: absolute;
+      right: calc(var(--qas-spacing-sm) * -1);
+      top: 0;
+    }
+
+    .q-notification__wrapper {
+      position: relative;
+
+      &::before {
+        background-color: var(--q-primary);
+        bottom: calc((var(--qas-spacing-sm)) * -1);
+        content: '';
+        left: calc((var(--qas-spacing-md)) * -1);
+        position: absolute;
+        top: calc((var(--qas-spacing-sm)) * -1);
+        width: 4px;
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    margin-top: 40px;
+  }
+}

package/src/css/utils/background.scss

@@ -1,34 +1,34 @@
-// Repeat
-.bg-no-repeat {
-  background-repeat: no-repeat !important;
-}
-
-// Sizes
-.bg-size-contain {
-  background-size: contain !important;
-}
-
-.bg-size-cover {
-  background-size: cover !important;
-}
-
-// Positions
-.bg-position-bottom {
-  background-position: bottom !important;
-}
-
-.bg-position-center {
-  background-position: center !important;
-}
-
-.bg-position-left {
-  background-position: left !important;
-}
-
-.bg-position-right {
-  background-position: right !important;
-}
-
-.bg-position-top {
-  background-position: top !important;
-}
+// Repeat
+.bg-no-repeat {
+  background-repeat: no-repeat !important;
+}
+
+// Sizes
+.bg-size-contain {
+  background-size: contain !important;
+}
+
+.bg-size-cover {
+  background-size: cover !important;
+}
+
+// Positions
+.bg-position-bottom {
+  background-position: bottom !important;
+}
+
+.bg-position-center {
+  background-position: center !important;
+}
+
+.bg-position-left {
+  background-position: left !important;
+}
+
+.bg-position-right {
+  background-position: right !important;
+}
+
+.bg-position-top {
+  background-position: top !important;
+}

package/src/css/utils/border-radius.scss

@@ -1,29 +1,29 @@
-// https://quasar.dev/style/other-helper-classes#border-related
-.rounded-borders-sm {
-  border-radius: calc(#{$generic-border-radius} / 2) !important;
-}
-
-.rounded-borders-lg {
-  border-radius: calc(#{$generic-border-radius} * 2) !important;
-}
-
-// Compositions
-.rounded-borders-top {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.rounded-borders-right {
-  border-bottom-left-radius: 0 !important;
-  border-top-left-radius: 0 !important;
-}
-
-.rounded-borders-bottom {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-}
-
-.rounded-borders-left {
-  border-bottom-right-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-}
+// https://quasar.dev/style/other-helper-classes#border-related
+.rounded-borders-sm {
+  border-radius: calc(#{$generic-border-radius} / 2) !important;
+}
+
+.rounded-borders-lg {
+  border-radius: calc(#{$generic-border-radius} * 2) !important;
+}
+
+// Compositions
+.rounded-borders-top {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.rounded-borders-right {
+  border-bottom-left-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+}
+
+.rounded-borders-bottom {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.rounded-borders-left {
+  border-bottom-right-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}

package/src/css/utils/border.scss

@@ -1,42 +1,42 @@
-// Colors
-%border-color {
-  &:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right) {
-    border-width: 1px !important;
-  }
-}
-
-@mixin set-border-color($name, $color) {
-  .border-#{$name} {
-    border: 0 solid $color !important;
-
-    @extend %border-color;
-  }
-}
-
-@include set-border-color(primary, $primary);
-@include set-border-color(primary-contrast, $primary-contrast);
-@include set-border-color(secondary, $secondary);
-@include set-border-color(secondary-contrast, $secondary-contrast);
-@include set-border-color('grey', $border-grey);
-
-// Direction
-.border-top {
-  border-top-width: 1px !important;
-}
-
-.border-left {
-  border-left-width: 1px !important;
-}
-
-.border-bottom {
-  border-bottom-width: 1px !important;
-}
-
-.border-right {
-  border-right-width: 1px !important;
-}
-
-.bordered {
-  border: 1px solid $grey-4;
-  border-radius: $generic-border-radius;
-}
+// Colors
+%border-color {
+  &:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right) {
+    border-width: 1px !important;
+  }
+}
+
+@mixin set-border-color($name, $color) {
+  .border-#{$name} {
+    border: 0 solid $color !important;
+
+    @extend %border-color;
+  }
+}
+
+@include set-border-color(primary, $primary);
+@include set-border-color(primary-contrast, $primary-contrast);
+@include set-border-color(secondary, $secondary);
+@include set-border-color(secondary-contrast, $secondary-contrast);
+@include set-border-color('grey', $border-grey);
+
+// Direction
+.border-top {
+  border-top-width: 1px !important;
+}
+
+.border-left {
+  border-left-width: 1px !important;
+}
+
+.border-bottom {
+  border-bottom-width: 1px !important;
+}
+
+.border-right {
+  border-right-width: 1px !important;
+}
+
+.bordered {
+  border: 1px solid $grey-4;
+  border-radius: $generic-border-radius;
+}

package/src/css/utils/container.scss

@@ -1,36 +1,36 @@
-.container,
-.container-xs,
-.container-sm,
-.container-md,
-.container-lg,
-.container-xl {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1280px;
-  width: calc(100% - 80px);
-
-  &.spaced {
-    padding-bottom: var(--qas-spacing-md);
-    padding-top: var(--qas-spacing-md);
-  }
-
-  @media (max-width: $breakpoint-xs) {
-    width: calc(100% - var(--qas-spacing-2xl));
-  }
-}
-
-.container-xs {
-  max-width: $breakpoint-xs !important;
-}
-
-.container-sm {
-  max-width: $breakpoint-sm !important;
-}
-
-.container-md {
-  max-width: $breakpoint-md !important;
-}
-
-.container-lg {
-  max-width: $breakpoint-lg !important;
-}
+.container,
+.container-xs,
+.container-sm,
+.container-md,
+.container-lg,
+.container-xl {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1280px;
+  width: calc(100% - 80px);
+
+  &.spaced {
+    padding-bottom: var(--qas-spacing-md);
+    padding-top: var(--qas-spacing-md);
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    width: calc(100% - var(--qas-spacing-2xl));
+  }
+}
+
+.container-xs {
+  max-width: $breakpoint-xs !important;
+}
+
+.container-sm {
+  max-width: $breakpoint-sm !important;
+}
+
+.container-md {
+  max-width: $breakpoint-md !important;
+}
+
+.container-lg {
+  max-width: $breakpoint-lg !important;
+}

package/src/css/utils/fonts.scss

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
-
-body {
-  font-family: Nunito, sans-serif;
-}
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
+
+body {
+  font-family: Nunito, sans-serif;
+}

package/src/css/utils/index.scss

@@ -1,10 +1,10 @@
-@import './background';
-@import './border';
-@import './border-radius';
-@import './container';
-@import './fonts';
-@import './line-height';
-@import './opacity';
-@import './scroll';
-@import './text';
-@import './unset';
+@import './background';
+@import './border';
+@import './border-radius';
+@import './container';
+@import './fonts';
+@import './line-height';
+@import './opacity';
+@import './scroll';
+@import './text';
+@import './unset';