@nathapp/na-cli 1.0.1-rc.6 → 1.0.2

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_button.scss

@@ -0,0 +1,280 @@
+@use "sass:list";
+@use "sass:map";
+@use "@core/scss/template/mixins" as templateMixins;
+@use "@configured-variables" as variables;
+
+/* 👉 Button
+ Above map but opacity values as key and variant as value */
+
+$btn-active-overlay-opacity: (
+  0.08: (outlined, flat, text, plain),
+  0.24: (tonal),
+);
+$btn-hover-overlay-opacity: (
+  0: (elevated),
+  0.08: (outlined, flat, text, plain),
+  0.24: (tonal),
+);
+$btn-focus-overlay-opacity: (
+  0.08: (outlined, flat, text, plain),
+  0.24: (tonal),
+);
+
+body .v-btn {
+  // ℹ️ This is necessary because as we have darker overlay on hover for elevated variant, button text doesn't get dimmed
+  // This style is already applied to `.v-icon`
+  .v-btn__content {
+    z-index: 0;
+  }
+
+  transition: all 0.135s ease; /* Add transition */
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  // Add transition on hover
+  &:not(.v-btn--loading) .v-btn__overlay {
+    transition: opacity 0.15s ease-in-out;
+    will-change: opacity;
+  }
+
+  // box-shadow
+  @each $color-name in variables.$theme-colors-name {
+    &:not(.v-btn--disabled) {
+      &.bg-#{$color-name}.v-btn--variant-elevated {
+        &,
+        &:hover,
+        &:active,
+        &:focus {
+          @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+        }
+      }
+    }
+  }
+
+  /*
+    Loop over $btn-active-overlay-opacity map and add active styles for each variant.
+    Group variants with same opacity value.
+  */
+  @each $opacity, $variants in $btn-active-overlay-opacity {
+    $overlay-selectors: ();
+    $underlay-selectors: ();
+
+    // append each variant to selectors list
+    @each $variant in $variants {
+      $overlay-selectors: list.append($overlay-selectors, "&.v-btn--variant-#{$variant}:active > .v-btn__overlay,");
+      $underlay-selectors: list.append($underlay-selectors, "&.v-btn--variant-#{$variant}:active > .v-btn__underlay,");
+    }
+
+    #{$overlay-selectors} {
+      --v-hover-opacity: #{$opacity};
+
+      opacity: var(--v-hover-opacity);
+    }
+
+    #{$underlay-selectors} {
+      opacity: 0;
+    }
+  }
+
+  @each $opacity, $variants in $btn-focus-overlay-opacity {
+    $selectors: ();
+
+    // append each variant to selectors list
+    @each $variant in $variants {
+      $selectors: list.append($selectors, "&.v-btn--variant-#{$variant}:focus > .v-btn__overlay,");
+    }
+
+    #{$selectors} {
+      opacity: $opacity;
+    }
+  }
+
+  /*
+    Loop over $btn-hover-overlay-opacity map and add hover styles for each variant.
+    Group variants with same opacity value.
+  */
+  @each $opacity, $variants in $btn-hover-overlay-opacity {
+    $selectors: ();
+
+    // append each variant to selectors list
+    @each $variant in $variants {
+      $selectors: list.append($selectors, "&.v-btn--variant-#{$variant}:hover > .v-btn__overlay,");
+    }
+
+    #{$selectors} {
+      --v-hover-opacity: #{$opacity};
+    }
+  }
+
+  // Default (elevated) button
+  &--variant-elevated,
+  &--variant-flat {
+    // We want a darken color on hover
+    &:not(.v-btn--loading, .v-btn--disabled) {
+      @each $color-name in variables.$theme-colors-name {
+        &.bg-#{$color-name} {
+          &:hover,
+          &:active,
+          &:focus {
+            background-color: rgb(var(--v-theme-#{$color-name}-darken-1)) !important;
+          }
+        }
+      }
+    }
+  }
+
+  // Outlined button
+  &:not(.v-btn--icon, .v-tab).v-btn--variant-text {
+    &.v-btn--size-default {
+      padding-inline: 0.75rem;
+    }
+
+    &.v-btn--size-small {
+      padding-inline: 0.5625rem;
+    }
+
+    &.v-btn--size-large {
+      padding-inline: 1rem;
+    }
+  }
+
+  // Button border-radius
+  &:not(.v-btn--icon).v-btn--size-x-small {
+    border-radius: 2px;
+  }
+
+  &:not(.v-btn--icon).v-btn--size-small {
+    border-radius: 4px;
+    line-height: 1.125rem;
+    padding-block: 0;
+    padding-inline: 0.875rem;
+  }
+
+  &:not(.v-btn--icon).v-btn--size-default {
+    .v-btn__content,
+    .v-btn__append,
+    .v-btn__prepend {
+      .v-icon {
+        --v-icon-size-multiplier: 0.7113;
+
+        block-size: 1rem;
+        font-size: 1rem;
+        inline-size: 1rem;
+      }
+
+      .v-icon--start {
+        margin-inline: -2px 6px;
+      }
+
+      .v-icon--end {
+        margin-inline: 6px -2px;
+      }
+    }
+  }
+
+  &:not(.v-btn--icon).v-btn--size-large {
+    --v-btn-height: 3rem;
+
+    border-radius: 8px;
+    line-height: 1.625rem;
+    padding-block: 0;
+    padding-inline: 1.625rem;
+  }
+
+  &:not(.v-btn--icon).v-btn--size-x-large {
+    border-radius: 10px;
+  }
+
+  // icon buttons
+  &.v-btn--icon.v-btn--density-default {
+    block-size: var(--v-btn-height);
+    inline-size: var(--v-btn-height);
+
+    &.v-btn--size-default {
+      .v-icon {
+        --v-icon-size-multiplier: 0.978 !important;
+
+        block-size: 1.375rem;
+        font-size: 1.375rem;
+        inline-size: 1.375rem;
+      }
+    }
+
+    &.v-btn--size-small {
+      --v-btn-height: 2.125rem;
+
+      .v-icon {
+        block-size: 1.25rem;
+        font-size: 1.25rem;
+        inline-size: 1.25rem;
+      }
+    }
+
+    &.v-btn--size-large {
+      --v-btn-height: 2.625rem;
+
+      .v-icon {
+        block-size: 1.75rem;
+        font-size: 1.75rem;
+        inline-size: 1.75rem;
+      }
+    }
+  }
+
+  &-group.v-btn-toggle {
+    .v-btn {
+      border-radius: 0.5rem;
+      block-size: 52px !important;
+      border-inline-end: none;
+      inline-size: 52px !important;
+
+      &.v-btn--density-comfortable {
+        border-radius: 0.375rem;
+        block-size: 44px !important;
+        inline-size: 44px !important;
+      }
+
+      &.v-btn--density-compact {
+        border-radius: 0.25rem;
+        block-size: 36px !important;
+        inline-size: 36px !important;
+      }
+
+      &.v-btn--icon .v-icon {
+        block-size: 1.5rem;
+        color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+        font-size: 1.5rem;
+        inline-size: 1.5rem;
+      }
+
+      &.v-btn--icon.v-btn--active {
+        .v-icon {
+          color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+        }
+      }
+    }
+
+    &.v-btn-group {
+      align-items: center;
+      padding: 7px;
+      border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+      block-size: 66px;
+
+      .v-btn.v-btn--active {
+        .v-btn__overlay {
+          --v-activated-opacity: 0.08;
+        }
+      }
+
+      &.v-btn-group--density-compact {
+        block-size: 50px;
+      }
+
+      &.v-btn-group--density-comfortable {
+        block-size: 58px;
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_cards.scss

@@ -0,0 +1,3 @@
+.v-card-subtitle {
+  color: rgba(var(--v-theme-on-background), 0.55);
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_checkbox.scss

@@ -0,0 +1,57 @@
+@use "sass:list";
+@use "sass:map";
+@use "@styles/variables/vuetify";
+@use "@configured-variables" as variables;
+
+// 👉 Checkbox
+.v-checkbox {
+  // We adjusted it to vertically align the label
+
+  .v-selection-control--disabled {
+    --v-disabled-opacity: 0.45;
+  }
+
+  // Remove extra space below the label
+  .v-input__details {
+    min-block-size: unset !important;
+    padding-block-start: 0 !important;
+  }
+}
+
+// 👉 checkbox size and box shadow
+.v-checkbox-btn {
+  // 👉 Checkbox icon opacity
+  .v-selection-control__input > .v-icon {
+    opacity: 1;
+  }
+
+  &.v-selection-control--dirty {
+    @each $color-name in variables.$theme-colors-name {
+      .v-selection-control__wrapper.text-#{$color-name} {
+        .v-selection-control__input {
+          /* ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */
+          .v-icon {
+            filter: drop-shadow(0 2px 6px rgba(var(--v-theme-#{$color-name}), 0.3));
+          }
+        }
+      }
+    }
+  }
+}
+
+// checkbox icon size
+.v-checkbox,
+.v-checkbox-btn {
+  &.v-selection-control {
+    .v-selection-control__input {
+      svg {
+        font-size: 1.5rem;
+      }
+    }
+
+    .v-label {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      line-height: 1.375rem;
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_chip.scss

@@ -0,0 +1,102 @@
+// 👉 Chip
+.v-chip {
+  line-height: 1.25rem;
+
+  .v-chip__close {
+    margin-inline: 4px -6px !important;
+
+    .v-icon {
+      opacity: 0.7;
+    }
+  }
+
+  .v-chip__content {
+    .v-icon {
+      block-size: 20px;
+      font-size: 20px;
+      inline-size: 20px;
+    }
+  }
+
+  &:not(.v-chip--variant-elevated) {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+
+  &.v-chip--variant-elevated {
+    background-color: rgba(var(--v-theme-on-surface), var(--v-activated-opacity));
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+
+  &:not([class*="text-"]) {
+    --v-activated-opacity: 0.08;
+  }
+
+  // common style for all sizes
+  &.v-chip--size-default,
+  &.v-chip--size-small {
+    .v-icon--start,
+    .v-chip__filter {
+      margin-inline-start: 0 !important;
+    }
+
+    &:not(.v-chip--pill) {
+      .v-avatar--start {
+        margin-inline: -6px 4px;
+      }
+
+      .v-avatar--end {
+        margin-inline: 4px -6px;
+      }
+    }
+  }
+
+  // small size
+  &:not(.v-chip--pill).v-chip--size-small {
+    --v-chip-height: 24px;
+
+    &.v-chip--label {
+      border-radius: 0.25rem;
+    }
+
+    font-size: 13px;
+
+    .v-avatar {
+      --v-avatar-height: 16px;
+    }
+
+    .v-chip__close {
+      font-size: 16px;
+      max-block-size: 16px;
+      max-inline-size: 16px;
+    }
+  }
+
+  // extra small size
+  &:not(.v-chip--pill).v-chip--size-x-small {
+    --v-chip-height: 20px;
+
+    &.v-chip--label {
+      border-radius: 0.25rem;
+      padding-inline: 0.625rem;
+    }
+
+    font-size: 13px;
+
+    .v-avatar {
+      --v-avatar-height: 16px;
+    }
+
+    .v-chip__close {
+      font-size: 16px;
+      max-block-size: 16px;
+      max-inline-size: 16px;
+    }
+  }
+
+  // default size
+  &:not(.v-chip--pill).v-chip--size-default {
+    .v-avatar {
+      --v-avatar-height: 20px;
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_dialog.scss

@@ -0,0 +1,27 @@
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+// 👉 Dialog
+body .v-dialog {
+  // dialog custom close btn
+  .v-dialog-close-btn {
+    border-radius: 0.375rem;
+    background-color: rgb(var(--v-theme-surface)) !important;
+    block-size: 2rem;
+    inline-size: 2rem;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    transform: translate(0.5rem, -0.5rem);
+
+    @include layoutsMixins.rtl {
+      transform: translate(-0.5rem, -0.5rem);
+    }
+
+    &:hover {
+      transform: translate(0.3125rem, -0.3125rem);
+
+      @include layoutsMixins.rtl {
+        transform: translate(-0.3125rem, -0.3125rem);
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@core/scss/template/libs/vuetify/components/_expansion-panels.scss

@@ -0,0 +1,106 @@
+@use "@core/scss/base/mixins";
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+// 👉 Expansion panels
+body .v-layout .v-application__wrap .v-expansion-panels {
+  .v-expansion-panel {
+    margin-block-start: 0 !important;
+
+    // expansion panel arrow font size
+    .v-expansion-panel-title {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+      font-weight: 500;
+
+      .v-expansion-panel-title__icon {
+        transition: transform 0.2s ease-in-out;
+
+        .v-icon {
+          block-size: 1.25rem !important;
+          font-size: 1.25rem !important;
+          inline-size: 1.25rem !important;
+        }
+      }
+    }
+
+    .v-expansion-panel-title,
+    .v-expansion-panel-title--active,
+    .v-expansion-panel-title:hover,
+    .v-expansion-panel-title:focus,
+    .v-expansion-panel-title:focus-visible,
+    .v-expansion-panel-title--active:focus,
+    .v-expansion-panel-title--active:hover {
+      .v-expansion-panel-title__overlay {
+        opacity: 0 !important;
+      }
+    }
+
+    // Set Elevation when panel open
+    &:not(.v-expansion-panels--variant-accordion) {
+      &.v-expansion-panel--active {
+        .v-expansion-panel__shadow {
+          @include mixins.elevation(6);
+        }
+      }
+    }
+  }
+
+  // custom style for expansion panels
+  &.expansion-panels-width-border {
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    border-radius: 0.375rem;
+
+    .v-expansion-panel-title {
+      background-color: rgb(var(--v-theme-grey-light));
+      border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+      margin-block-end: -1px;
+    }
+
+    .v-expansion-panel-text {
+      .v-expansion-panel-text__wrapper {
+        padding: 1.25rem;
+      }
+    }
+  }
+
+  &:not(.no-icon-rotate, .expansion-panels-width-border) {
+    .v-expansion-panel {
+      .v-expansion-panel-title__icon {
+        .v-icon {
+          @include layoutsMixins.rtl {
+            transform: scaleX(-1);
+          }
+        }
+      }
+
+      &.v-expansion-panel--active {
+        .v-expansion-panel-title__icon {
+          transform: rotate(90deg);
+
+          @include layoutsMixins.rtl {
+            transform: rotate(-90deg);
+          }
+        }
+      }
+    }
+  }
+
+  &:not(.expansion-panels-width-border) {
+    .v-expansion-panel {
+      &:not(:last-child) {
+        margin-block-end: 0.5rem;
+      }
+
+      &:not(:first-child)::after {
+        content: none;
+      }
+
+      // ℹ️ we have to use below style of increase the specificity and override the default style
+      /* stylelint-disable-next-line no-descending-specificity */
+      &:first-child:not(:last-child),
+      &:not(:first-child, :last-child),
+      &:not(:first-child) {
+        border-radius: 0.375rem !important;
+      }
+    }
+  }
+}