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

package/src/components/SDialog.vue

@@ -8,28 +8,15 @@
           round
           dense
           v-close-popup
-          color="Grey_Default"
+          color="grey_65"
           :ripple="false"
           @click="$emit('handleClose')"
         />
       </q-card-actions>
       <q-card-section class="modal-title">
-        <div
-          v-if="withHeaderIcon"
-          class="flex items-center justify-center modal-icon"
-        >
-          <q-icon
-            v-if="type === 'info'"
-            :name="infoOutlineIcon"
-            size="32px"
-            color="positive"
-          />
-          <q-icon
-            v-else
-            :name="warningOutlineIcon"
-            size="32px"
-            color="negative"
-          />
+        <div v-if="withHeaderIcon" class="flex items-center justify-center modal-icon">
+          <q-icon v-if="type === 'info'" :name="infoOutlineIcon" size="32px" color="positive" />
+          <q-icon v-else :name="warningOutlineIcon" size="32px" color="negative" />
         </div>
         {{ title }}
       </q-card-section>
@@ -75,176 +62,165 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import {
-  QDialog,
-  QCard,
-  QCardSection,
-  QBtn,
-  QIcon,
-  QCardActions,
-} from 'quasar';
-import {
-  infoOutlineIcon,
-  warningOutlineIcon,
-  closeIcon,
-} from '../assets/icons';
+  import { defineComponent } from 'vue';
+  import { QDialog, QCard, QCardSection, QBtn, QIcon, QCardActions } from 'quasar';
+  import { infoOutlineIcon, warningOutlineIcon, closeIcon } from '../assets/icons';
 
-export default defineComponent({
-  name: 'SConfirm',
-  components: {
-    QDialog,
-    QCard,
-    QCardSection,
-    QCardActions,
-    QBtn,
-    QIcon,
-  },
-  props: {
-    withHeaderIcon: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'info',
-    },
-    buttonLabel: {
-      type: String,
-      default: '',
-    },
-    twoButtons: {
-      type: Boolean,
-      default: false,
-    },
-    secondButtonLabel: {
-      type: String,
-      default: '',
-    },
-    firstBtnColor: {
-      type: String,
-      default: '',
-    },
-    secondBtnColor: {
-      type: String,
-      default: '',
+  export default defineComponent({
+    name: 'SConfirm',
+    components: {
+      QDialog,
+      QCard,
+      QCardSection,
+      QCardActions,
+      QBtn,
+      QIcon,
     },
-    firstBtnOutLine: {
-      type: Boolean,
-      default: false,
+    props: {
+      withHeaderIcon: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      content: {
+        type: String,
+        default: '',
+      },
+      type: {
+        type: String,
+        default: 'info',
+      },
+      buttonLabel: {
+        type: String,
+        default: '',
+      },
+      twoButtons: {
+        type: Boolean,
+        default: false,
+      },
+      secondButtonLabel: {
+        type: String,
+        default: '',
+      },
+      firstBtnColor: {
+        type: String,
+        default: '',
+      },
+      secondBtnColor: {
+        type: String,
+        default: '',
+      },
+      firstBtnOutLine: {
+        type: Boolean,
+        default: false,
+      },
+      secondBtnOutLine: {
+        type: Boolean,
+        default: false,
+      },
+      btnVertical: {
+        type: Boolean,
+        default: false,
+      },
     },
-    secondBtnOutLine: {
-      type: Boolean,
-      default: false,
+    emits: ['handleClose', 'handleFirst', 'handleSecond'],
+    setup() {
+      return {
+        infoOutlineIcon,
+        warningOutlineIcon,
+        closeIcon,
+      };
     },
-    btnVertical: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['handleClose', 'handleFirst', 'handleSecond'],
-  setup() {
-    return {
-      infoOutlineIcon,
-      warningOutlineIcon,
-      closeIcon,
-    };
-  },
-});
+  });
 </script>
 
 <style lang="scss">
-@import "../css/quasar.variables.scss";
+  @import '../css/quasar.variables.scss';
 
-.s-confirm {
-  border-radius: 8px;
-  padding: 40px 24px;
-  width: 504px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  .modal-close-button {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    .q-btn {
-      color: $Grey_Darken-2;
+  .s-confirm {
+    border-radius: 8px;
+    padding: 40px 24px;
+    width: 504px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .modal-close-button {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      width: 24px;
+      height: 24px;
       padding: 0;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      min: {
-        height: 0;
-        width: 0;
-      }
-      .q-focusable:focus .q-focus-helper,
-      .q-hoverable:hover .q-focus-helper {
-        background: inherit !important;
-        opacity: 0;
-      }
-      .q-icon {
+      .q-btn {
+        color: $grey_80;
+        padding: 0;
         width: 100%;
         height: 100%;
+        align-items: center;
+        justify-content: center;
+        min: {
+          height: 0;
+          width: 0;
+        }
+        .q-focusable:focus .q-focus-helper,
+        .q-hoverable:hover .q-focus-helper {
+          background: inherit !important;
+          opacity: 0;
+        }
+        .q-icon {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
-  }
-  .modal-title {
-    padding: 0 0 16px;
-    text-align: center;
-    color: $Grey_Darken-5;
-    font: {
-      size: 20px;
-      weight: 700;
-    }
-    .modal-icon {
+    .modal-title {
+      padding: 0 0 16px;
       text-align: center;
-      width: 32px;
-      height: 32px;
-      margin: 0 auto 16px;
-    }
-  }
-  .modal-content {
-    padding: 0 0 32px;
-    text-align: center;
-    font: {
-      size: 14px;
-      weight: 400;
+      color: $grey_95;
+      font: {
+        size: 20px;
+        weight: 700;
+      }
+      .modal-icon {
+        text-align: center;
+        width: 32px;
+        height: 32px;
+        margin: 0 auto 16px;
+      }
     }
-  }
-  .modal-buttons {
-    text-align: center;
-    padding: 0;
-    width: 100%;
-    height: 42px;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    .q-btn {
-      min-width: 76px;
-      padding: 8px 24px;
-      margin: 0 4px;
-      height: 42px;
+    .modal-content {
+      padding: 0 0 32px;
+      text-align: center;
       font: {
-        weight: 500;
-        size: 18px;
+        size: 14px;
+        weight: 400;
       }
-      &__content {
-        height: 100%;
+    }
+    .modal-buttons {
+      text-align: center;
+      padding: 0;
+      width: 100%;
+      height: 42px;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      .q-btn {
+        min-width: 76px;
+        padding: 8px 24px;
+        margin: 0 4px;
+        height: 42px;
+        font: {
+          weight: 500;
+          size: 18px;
+        }
+        &__content {
+          height: 100%;
+        }
       }
     }
   }
-}
 </style>

package/src/components/SDropdown.vue

@@ -2,7 +2,7 @@
   <q-btn
     outline
     split
-    :color="$attrs.color || 'Grey_Default'"
+    :color="$attrs.color || 'grey_65'"
     no-caps
     no-wrap
     unelevated
@@ -234,18 +234,18 @@
       border: none;
       padding: 0;
       &:before {
-        border: 1px solid $Grey_Lighten-2;
-        background: $Grey_Lighten-3 !important;
+        border: 1px solid $grey_45;
+        background: $grey_30 !important;
       }
 
       .q-btn__content {
         > .block,
         > .q-icon {
-          color: $Grey_Default;
+          color: $grey_65;
         }
 
         .block {
-          border-right: 1px solid $Grey_Lighten-2 !important;
+          border-right: 1px solid $grey_45 !important;
         }
       }
     }
@@ -264,7 +264,7 @@
 
       &:not(.q-item--clickable) {
         cursor: default;
-        color: $Grey_Lighten-1;
+        color: $grey_55;
       }
     }
 

package/src/components/SEditor.vue

@@ -19,7 +19,7 @@
       <q-btn flat dense :ripple="false" size="sm">
         <q-icon name="image" />
         <q-menu>
-          <q-card class="q-pa-sm bg-Grey_Lighten-5">
+          <q-card class="q-pa-sm bg-grey_10">
             <q-card-section class="q-pa-none">
               <q-input
                 class="bg-white font-12-400"
@@ -37,7 +37,7 @@
                   :label="imgUploadBtnLabel"
                   @click="onOkClick"
                   v-close-popup
-                  color="Blue_B_Default"
+                  color="oceanblue_75"
                   class="bg-white"
                 />
               </div>

package/src/components/SFilePicker.vue

@@ -14,8 +14,8 @@
     </template>
     <!-- NOTE: slot에 오버라이드 되어서 무조건 노출로 변경 -->
     <template #prepend v-if="true">
-      <q-icon :name="attachFileIcon20" size="20px" color="Grey_Darken-1" @click.stop />
-      <div v-if="displayPlaceholder" class="file-placeholder text-Grey_Lighten-2" @click.stop>
+      <q-icon :name="attachFileIcon20" size="20px" color="grey_70" @click.stop />
+      <div v-if="displayPlaceholder" class="file-placeholder text-grey_45" @click.stop>
         {{ placeholder }}
       </div>
     </template>
@@ -104,11 +104,11 @@
 
         &:hover,
         &:active {
-          background: $Grey_Lighten-5;
+          background: $grey_10;
         }
 
         &:after {
-          border: 1px solid $Grey_Lighten-1;
+          border: 1px solid $grey_55;
           box-shadow: none;
         }
 
@@ -139,7 +139,7 @@
             > div {
               font-size: $default-font;
               overflow: hidden;
-              color: $Grey_Darken-5;
+              color: $grey_95;
               word-break: keep-all;
               white-space: nowrap;
               text-overflow: ellipsis;
@@ -176,16 +176,16 @@
     .q-field__inner {
       .q-field__control {
         opacity: 1 !important;
-        background: $Grey_Lighten-3;
+        background: $grey_30;
 
         &:after {
-          border: 1px solid $Grey_Lighten-2;
+          border: 1px solid $grey_45;
         }
 
         &-container {
           .q-field__native {
             > span {
-              color: $Grey_Default;
+              color: $grey_65;
             }
           }
         }
@@ -194,11 +194,11 @@
           opacity: 1 !important;
 
           .file-placeholder {
-            color: $Grey_Default !important;
+            color: $grey_65 !important;
           }
 
           .q-icon {
-            color: $Grey_Default !important;
+            color: $grey_65 !important;
           }
         }
       }

package/src/components/SHelp.vue

@@ -17,7 +17,7 @@
         dense
         :ripple="false"
         :icon="closeIcon"
-        color="Grey_Default"
+        color="grey_65"
         @click="helpPopup = false"
         class="close-btn q-pa-none"
         size="20px"
@@ -74,7 +74,7 @@
     min-height: $default-height;
     height: $default-height;
     &:before {
-      border-color: $Grey_Lighten-2;
+      border-color: $grey_45;
     }
     .q-btn__content {
       .q-icon {
@@ -83,7 +83,7 @@
       }
       > .block {
         font-size: $default-font;
-        color: $Grey_Darken-4;
+        color: $grey_90;
         line-height: $default-content-height;
         height: $default-content-height;
       }
@@ -103,7 +103,7 @@
     border-radius: 8px;
     padding: 20px 32px;
     position: relative;
-    color: $Grey_Darken-4;
+    color: $grey_90;
     .close-btn {
       position: absolute;
       top: 12px;

package/src/components/SInput.vue

@@ -35,7 +35,7 @@
     </template>
     <template v-slot:before v-if="label || insideLabel">
       <div v-if="!insideLabel" class="input-label">{{ label }}</div>
-      <div v-else-if="insideLabel" class="input-addon bg-Grey_Lighten-5">
+      <div v-else-if="insideLabel" class="input-addon bg-grey_10">
         {{ insideLabel }}
       </div>
     </template>
@@ -163,18 +163,18 @@
         padding: 0;
         height: 28px;
         &:before {
-          border: 1px solid $Grey_Lighten-1;
+          border: 1px solid $grey_55;
         }
         &-container {
           padding: $button-padding-sm;
           .q-field__native {
             font-size: $default-font;
             font-weight: $default-font-weight;
-            color: $Grey_Darken-4;
+            color: $grey_90;
             padding: 0;
           }
           input::placeholder {
-            color: $Grey_Lighten-1;
+            color: $grey_55;
           }
           .q-field__prefix {
             padding: 0 4px 0 0;
@@ -189,7 +189,7 @@
           padding: 0 8px 0 0;
           height: 100%;
           .q-icon {
-            color: $Grey_Default;
+            color: $grey_65;
             font-size: 12px;
           }
         }
@@ -198,20 +198,20 @@
           height: $default-height;
           .q-icon {
             font-size: 16px;
-            color: $Grey_Default;
+            color: $grey_65;
           }
         }
       }
       .q-field__bottom {
         padding: 8px 0px 0px 0px;
-        color: $Grey_Darken-1;
+        color: $grey_70;
         font-size: 12px;
         .q-field__messages {
           div[role='alert'] {
-            color: $Red_Lighten-1;
+            color: $red_70;
           }
           .error-msg {
-            color: $Red_Default;
+            color: $red_75;
             flex-wrap: nowrap;
             width: 250px;
             gap: 4px;
@@ -227,18 +227,18 @@
       padding: 0;
       .input-label {
         padding: 4px 12px 4px 0;
-        color: $Grey_Darken-4;
+        color: $grey_90;
         font: {
           size: $default-font;
           weight: $default-font-weight;
         }
       }
       .input-addon {
-        color: $Grey_Darken-4;
+        color: $grey_90;
         height: 100%;
         line-height: 150%;
         padding: $button-padding-sm;
-        border: 1px solid $Grey_Lighten-1;
+        border: 1px solid $grey_55;
         border: {
           right: none;
           radius: 2px 0 0 2px;
@@ -253,16 +253,16 @@
       .q-field__inner {
         .q-field__control {
           opacity: 1 !important;
-          background: $Grey_Lighten-4;
+          background: $grey_20;
           &:after {
-            border: 1px solid $Grey_Lighten-2;
+            border: 1px solid $grey_45;
           }
           &-container {
             .q-field__native {
-              color: $Grey_Default;
+              color: $grey_65;
             }
             & > input::placeholder {
-              color: $Grey_Default;
+              color: $grey_65;
             }
           }
         }
@@ -295,7 +295,7 @@
           top: -28px;
           display: flex;
           align-items: center;
-          color: $Grey_Lighten-1;
+          color: $grey_55;
           padding: 0;
         }
       }
@@ -303,7 +303,7 @@
     .q-field__after {
       height: 28px;
       font-size: 12px;
-      color: $Grey_Lighten-1;
+      color: $grey_55;
       align-items: end;
       padding-left: 8px;
     }
@@ -334,7 +334,7 @@
         padding-top: 4px;
         .q-field__counter {
           padding: 0;
-          color: $Grey_Lighten-2;
+          color: $grey_45;
           font-size: 12px;
         }
       }