quasar-ui-sellmate-ui-kit 3.14.14 → 3.14.16

package/src/components/SInputNumber.vue

@@ -20,7 +20,7 @@
         dense
         unelevated
         :ripple="false"
-        color="Grey_Lighten-4"
+        color="grey_20"
         :icon="minusIcon"
         @click="minusNumber"
       />
@@ -29,7 +29,7 @@
         dense
         unelevated
         :ripple="false"
-        color="Grey_Lighten-4"
+        color="grey_20"
         :icon="plusIcon"
         @click="plusNumber"
       />
@@ -96,19 +96,19 @@
         padding: 0;
         height: 28px;
         &:before {
-          border: 1px solid $Grey_Lighten-1;
+          border: 1px solid $grey_55;
         }
         &-container {
           padding: $with-icon-padding;
           height: $default-height;
           .q-field__native {
-            color: $Grey_Darken-4;
+            color: $grey_90;
             padding: 0;
             font-weight: $default-font-weight;
             font-size: $default-font;
           }
           input::placeholder {
-            color: $Grey_Lighten-1;
+            color: $grey_55;
           }
         }
 
@@ -127,7 +127,7 @@
               width: 100%;
               height: 100%;
               .q-icon {
-                color: $Grey_Default;
+                color: $grey_65;
                 font-size: $default-font;
               }
             }
@@ -139,11 +139,11 @@
       }
       .q-field__bottom {
         padding: 8px 0px 0px 0px;
-        color: $Grey_Darken-1;
+        color: $grey_70;
         font-size: $default-font;
         .q-field__messages {
           div[role='alert'] {
-            color: $Red_Lighten-1;
+            color: $red_70;
           }
         }
       }
@@ -164,15 +164,15 @@
   .q-field--disabled.s-input-number {
     .q-field__inner {
       .q-field__control {
-        background-color: $Grey_Lighten-4 !important;
-        color: $Grey_Default !important;
+        background-color: $grey_20 !important;
+        color: $grey_65 !important;
         &:before {
-          border: 1px solid $Grey_Lighten-2;
+          border: 1px solid $grey_45;
         }
         &-container {
           opacity: 1 !important;
           .q-field__native {
-            color: $Grey_Default;
+            color: $grey_65;
           }
         }
         .q-field__append {

package/src/components/SMarkupTable.vue

@@ -22,121 +22,122 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import { QMarkupTable, QInnerLoading } from 'quasar';
+  import { defineComponent } from 'vue';
+  import { QMarkupTable, QInnerLoading } from 'quasar';
 
-export default defineComponent({
-  name: 'SMarkupTable',
-  components: {
-    QMarkupTable, QInnerLoading,
-  },
-  props: {
-    separator: {
-      type: String,
-      default: 'Horizontal',
+  export default defineComponent({
+    name: 'SMarkupTable',
+    components: {
+      QMarkupTable,
+      QInnerLoading,
     },
-    header: {
-      type: String,
-      default: 'top',
+    props: {
+      separator: {
+        type: String,
+        default: 'Horizontal',
+      },
+      header: {
+        type: String,
+        default: 'top',
+      },
+      noHover: {
+        type: Boolean,
+        default: false,
+      },
     },
-    noHover: {
-      type: Boolean,
-      default: false,
+    setup() {
+      return {};
     },
-  },
-  setup() {
-    return {};
-  },
-});
+  });
 </script>
 
 <style lang="scss" scoped>
-@import "../css/quasar.variables.scss";
+  @import '../css/quasar.variables.scss';
 
-.s-markup-table {
-  border-radius: 8px !important;
-  border: 1px solid $Grey_Lighten-3;
-  :deep(>.q-table) {
-    > thead {
-      min-height: 0;
-      > tr {
-        height: $table-tr-height;
-        > th {
-          padding: $table-th-padding ;
-          font-size: $default-font;
-          font-weight: $font-weight-md;
-          word-break: keep-all;
-          white-space: nowrap;
+  .s-markup-table {
+    border-radius: 8px !important;
+    border: 1px solid $grey_30;
+    :deep(> .q-table) {
+      > thead {
+        min-height: 0;
+        > tr {
+          height: $table-tr-height;
+          > th {
+            padding: $table-th-padding;
+            font-size: $default-font;
+            font-weight: $font-weight-md;
+            word-break: keep-all;
+            white-space: nowrap;
+          }
         }
       }
-    }
-    > tbody {
-      > tr {
-        min-height: 0px;
-        height: $table-tr-height;
-        > th {
-          font-size: $default-font;
-        }
-        > td {
+      > tbody {
+        > tr {
+          min-height: 0px;
           height: $table-tr-height;
-          padding: $table-td-padding;
-          font-size: $default-font;
-          &:before{
-            background:none;
+          > th {
+            font-size: $default-font;
+          }
+          > td {
+            height: $table-tr-height;
+            padding: $table-td-padding;
+            font-size: $default-font;
+            &:before {
+              background: none;
+            }
+          }
+          &:hover {
+            background-color: $grey_05;
           }
-        }
-        &:hover {
-          background-color: $Grey_Lighten-6;
         }
       }
     }
   }
-}
-.s-markup-table.header-top {
-  :deep(>.q-table) {
-    thead {
-      background: $th-bg;
+  .s-markup-table.header-top {
+    :deep(> .q-table) {
+      thead {
+        background: $th-bg;
+      }
     }
   }
-}
-.s-markup-table.header-left {
-  :deep(>.q-table) {
-    > tbody {
-      > tr {
-        > th {
-          background: $th-bg;
-          font-weight: $font-weight-lg;
-          border-bottom: 1px solid $Grey_Lighten-3;
-          padding: 0 16px;
-          &:not(:first-of-type) {
-            border-left: 1px solid $Grey_Lighten-3;
-          }
-        }
-        > th:not(:first-of-type) {
-          border-left: 1px solid $Grey_Lighten-3;
-        }
-        &:last-of-type {
+  .s-markup-table.header-left {
+    :deep(> .q-table) {
+      > tbody {
+        > tr {
           > th {
-            border-bottom: none;
+            background: $th-bg;
+            font-weight: $font-weight-lg;
+            border-bottom: 1px solid $grey_30;
+            padding: 0 16px;
+            &:not(:first-of-type) {
+              border-left: 1px solid $grey_30;
+            }
+          }
+          > th:not(:first-of-type) {
+            border-left: 1px solid $grey_30;
+          }
+          &:last-of-type {
+            > th {
+              border-bottom: none;
+            }
+          }
+          > td {
+            padding: 0 12px;
           }
-        }
-        > td {
-          padding: 0 12px;
         }
       }
     }
   }
-}
-.s-markup-table.tr-no-hover {
-  :deep(>.q-table) {
-    > tbody {
-      > tr:hover {
-        background-color: transparent;
-        > td:before {
+  .s-markup-table.tr-no-hover {
+    :deep(> .q-table) {
+      > tbody {
+        > tr:hover {
           background-color: transparent;
+          > td:before {
+            background-color: transparent;
+          }
         }
       }
     }
   }
-}
 </style>

package/src/components/SPagination.vue

@@ -15,7 +15,7 @@
         type="button"
         align="center"
         class="bg-transparent first-btn"
-        text-color="Grey_Darken-2"
+        text-color="grey_80"
         :icon="paginationFirstIcon"
         @click="updateModelValue('goFirst')"
       />
@@ -28,7 +28,7 @@
         type="button"
         align="center"
         class="left-btn"
-        text-color="Grey_Darken-2"
+        text-color="grey_80"
         :icon="paginationLeftIcon"
         @click="updateModelValue('goLeft')"
       />
@@ -44,7 +44,7 @@
         unelevated
         :ripple="false"
         :label="pageNumber"
-        text-color="Grey_Darken-2"
+        text-color="grey_80"
         type="button"
         align="center"
         @click="perPage > 1 ? updateModelValue(pageNumber) : null"
@@ -72,7 +72,7 @@
         type="button"
         align="center"
         class="right-btn"
-        text-color="Grey_Darken-2"
+        text-color="grey_80"
         :icon="paginationRightIcon"
         @click="updateModelValue('goRight')"
       />
@@ -85,7 +85,7 @@
         type="button"
         align="center"
         class="last-btn"
-        text-color="Grey_Darken-2"
+        text-color="grey_80"
         :icon="paginationLastIcon"
         @click="updateModelValue('goLast')"
       />
@@ -233,7 +233,7 @@
       justify-content: center;
       &:hover {
         &:before {
-          border: 1px solid $Blue_B_Lighten-1;
+          border: 1px solid $oceanblue_70;
         }
         .q-focus-helper {
           opacity: 0 !important;
@@ -244,10 +244,10 @@
         }
         .q-btn__content {
           .q-icon {
-            color: $Blue_B_Lighten-1;
+            color: $oceanblue_70;
           }
           > span {
-            color: $Blue_B_Lighten-1;
+            color: $oceanblue_70;
           }
         }
       }
@@ -286,7 +286,7 @@
       }
       .pagination-active-btn {
         &:before {
-          background: $Blue_B_Lighten-1 !important;
+          background: $oceanblue_70 !important;
         }
         .q-btn__content {
           > span {
@@ -302,10 +302,10 @@
         }
         .q-btn__content {
           .q-icon {
-            color: $Grey_Default;
+            color: $grey_65;
           }
           > span {
-            color: $Grey_Default;
+            color: $grey_65;
           }
         }
       }

package/src/components/SRadio.vue

@@ -9,70 +9,70 @@
 </template>
 
 <script>
-import { QRadio } from 'quasar';
-import { defineComponent } from 'vue';
+  import { QRadio } from 'quasar';
+  import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'SRadio',
-  components: {
-    QRadio,
-  },
-  props: {
-    length: Number,
-  },
-});
+  export default defineComponent({
+    name: 'SRadio',
+    components: {
+      QRadio,
+    },
+    props: {
+      length: Number,
+    },
+  });
 </script>
 
 <style lang="scss">
-@import '../css/quasar.variables.scss';
+  @import '../css/quasar.variables.scss';
 
-.s-radio {
-  & > .q-radio__inner {
-    min-width: $default-icon-size;
-    width: $default-icon-size;
-    height: $default-icon-size;
-    color: $Grey_Default;
-    &:before {
-      opacity: 0 !important;
+  .s-radio {
+    & > .q-radio__inner {
+      min-width: $default-icon-size;
+      width: $default-icon-size;
+      height: $default-icon-size;
+      color: $grey_65;
+      &:before {
+        opacity: 0 !important;
+      }
+      &:hover {
+        color: $positive;
+      }
     }
-    &:hover {
-      color: $positive;
+    .q-radio__label {
+      padding-left: $default-icon-margin;
+      color: $grey_90;
+      line-height: $default-content-height;
     }
-  }
-  .q-radio__label {
-    padding-left: $default-icon-margin;
-    color: $Grey_Darken-4;
-    line-height: $default-content-height;
-  }
-  &[aria-checked="true"] {
-    .q-radio__inner {
-      .q-radio__bg {
-        .q-radio__check {
-          transform: scale3d(1.2, 1.2, 1);
+    &[aria-checked='true'] {
+      .q-radio__inner {
+        .q-radio__bg {
+          .q-radio__check {
+            transform: scale3d(1.2, 1.2, 1);
+          }
         }
       }
     }
   }
-}
-.disabled.s-radio {
-  opacity: 1 !important;
-  border: none;
-  background: none !important;
-  .q-radio__inner {
-    color: $Grey_Lighten-2 !important;
-    background: $Grey_Lighten-4;
+  .disabled.s-radio {
+    opacity: 1 !important;
+    border: none;
+    background: none !important;
+    .q-radio__inner {
+      color: $grey_45 !important;
+      background: $grey_20;
+    }
   }
-}
-.radio-margin-sm {
-  margin-right: 20px;
-  &:last-of-type {
-    margin-right: 0;
+  .radio-margin-sm {
+    margin-right: 20px;
+    &:last-of-type {
+      margin-right: 0;
+    }
   }
-}
-.radio-margin-lg {
-  margin-right: 40px;
-  &:last-of-type {
-    margin-right: 0;
+  .radio-margin-lg {
+    margin-right: 40px;
+    &:last-of-type {
+      margin-right: 0;
+    }
   }
-}
 </style>

package/src/components/SRouteTab.vue

@@ -30,10 +30,10 @@
   .s-route-tab {
     padding: $tab-padding;
     border-radius: $button-border-radius $button-border-radius 0 0;
-    border: 1px solid $Grey_Lighten-2;
+    border: 1px solid $grey_45;
     border-bottom: 1px solid $positive;
-    background: $Grey_Lighten-5;
-    color: $Grey_Default;
+    background: $grey_10;
+    color: $grey_65;
     min-height: 0;
     .q-tab__content {
       padding: 0;

package/src/components/SSelect.vue

@@ -220,19 +220,19 @@
     &.q-field--disabled {
       .q-field__control > .q-field__prepend {
         opacity: 1 !important;
-        border-right: 1px solid $Grey_Lighten-2;
+        border-right: 1px solid $grey_45;
       }
     }
 
     .q-field__prepend {
-      background-color: $Grey_Lighten-5;
+      background-color: $grey_10;
       height: auto;
-      border-right: 1px solid $Grey_Lighten-1;
+      border-right: 1px solid $grey_55;
       padding: $button-padding-sm;
       .include-label {
         font-size: $default-font;
         font-weight: $default-font-weight;
-        color: $Grey_Darken-4;
+        color: $grey_90;
       }
     }
   }
@@ -246,7 +246,7 @@
             min-height: 0;
             height: $default-height;
             padding: $select-padding !important;
-            color: $Grey_Darken-4;
+            color: $grey_90;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -276,12 +276,12 @@
     @extend %select-menu-list;
     .group-title {
       opacity: 1 !important;
-      background: $Grey_Lighten-5 !important;
+      background: $grey_10 !important;
       border: none;
-      border-top: 1px solid $Grey_Lighten-3;
+      border-top: 1px solid $grey_30;
       .q-item__section {
         .q-item__label {
-          color: $Grey_Darken-4 !important;
+          color: $grey_90 !important;
         }
       }
     }
@@ -291,7 +291,7 @@
         background: white !important;
         border: none !important;
         .q-item__section {
-          color: $Grey_Lighten-1 !important;
+          color: $grey_55 !important;
         }
       }
     }

package/src/components/SSelectCheckbox.vue

@@ -29,7 +29,7 @@
         <q-item-section side v-if="!opt.disable">
           <s-checkbox :modelValue="selected" @update:modelValue="toggleOption(opt)" />
         </q-item-section>
-        <q-item-section v-if="opt[optionGroup]" class="text-Grey_Darken-4 group-title">
+        <q-item-section v-if="opt[optionGroup]" class="text-grey_90 group-title">
           {{ opt[optionGroup] }}
         </q-item-section>
         <q-item-section avatar v-if="opt.logo">
@@ -203,7 +203,7 @@
       height: $default-height;
       width: 100%;
       padding: $select-padding !important;
-      color: $Grey_Darken-4;
+      color: $grey_90;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -221,10 +221,10 @@
     > .q-virtual-scroll__content {
       > .q-item.disabled {
         border: none;
-        color: $Grey_Darken-4 !important;
+        color: $grey_90 !important;
         opacity: 1 !important;
-        background: $Grey_Lighten-5 !important;
-        border-top: 1px solid $Grey_Lighten-3 !important;
+        background: $grey_10 !important;
+        border-top: 1px solid $grey_30 !important;
         &:not(.q-manual-focusable):first-of-type {
           border-top: none !important;
         }

package/src/components/SSelectGroupCheckbox.vue

@@ -27,7 +27,7 @@
       </div>
       <q-item v-if="options.length === filteredOptions.length" dense class="total-opt flex">
         <q-item-section
-          class="s-px-sm s-py-xxs flex row s-gap-10 justify-start text-Grey_Darken-4 cursor-pointer"
+          class="s-px-sm s-py-xxs flex row s-gap-10 justify-start text-grey_90 cursor-pointer"
           @click="toggleTotalOption(!isAllChecked)"
         >
           <s-checkbox :model-value="isAllChecked" @update:model-value="toggleTotalOption" />
@@ -38,7 +38,7 @@
     <template #option="{ opt }">
       <q-item dense class="flex grouping-opt">
         <q-item-section
-          class="s-px-sm s-py-xxs flex row justify-start text-Grey_Darken-4 cursor-pointer"
+          class="s-px-sm s-py-xxs flex row justify-start text-grey_90 cursor-pointer"
           :class="opt[optionGroup] ? 'group-title' : 'group-content'"
           @click="toggleItem(opt)"
           ><s-checkbox v-model="model" :val="opt" @update:model-value="updateItem(opt)" />{{
@@ -295,7 +295,7 @@
       height: $default-height;
       width: 100%;
       padding: $select-padding !important;
-      color: $Grey_Darken-4;
+      color: $grey_90;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -322,7 +322,7 @@
     > .q-virtual-scroll__content {
       > .q-item.grouping-opt {
         border: none;
-        color: $Grey_Darken-4 !important;
+        color: $grey_90 !important;
         opacity: 1 !important;
         height: auto;
         padding: 0;
@@ -336,9 +336,9 @@
           }
         }
         > .group-title {
-          background-color: $Grey_Lighten-5;
+          background-color: $grey_10;
           padding: 6px 12px;
-          border-top: 1px solid $Grey_Lighten-3 !important;
+          border-top: 1px solid $grey_30 !important;
           line-height: 20px;
           font-weight: 700;
           &:first-of-type {
@@ -355,7 +355,7 @@
     }
     .q-item:not(.s-select-no-option) {
       &:hover {
-        background-color: $Blue_C_Default !important;
+        background-color: $brilliantblue_75 !important;
         .q-item__section:not(.group-title) {
           color: white !important;
           .q-checkbox[aria-checked='true'] {

package/src/components/SSelectSearch.vue

@@ -235,7 +235,7 @@
       height: $default-height;
       width: 100%;
       padding: $select-padding !important;
-      color: $Grey_Darken-4;
+      color: $grey_90;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -270,6 +270,6 @@
   .disabled.s-select-option {
     border: none;
     background: none !important;
-    color: $Grey_Default !important;
+    color: $grey_65 !important;
   }
 </style>