quasar-ui-sellmate-ui-kit 2.2.2 → 2.2.4

package/src/components/SMarkupTable.vue

@@ -51,7 +51,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-markup-table {
   border-radius: 8px !important;

package/src/components/SPagination.vue

@@ -175,7 +175,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-pagination {
     display: flex;

package/src/components/SRadio.vue

@@ -24,7 +24,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../css/variable.scss';
+@import '../css/quasar.variables.scss';
 
 .s-radio {
   & > .q-radio__inner {

package/src/components/SRouteTab.vue

@@ -25,7 +25,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-route-tab {
   padding: $tab-padding;

package/src/components/SSelect.vue

@@ -26,7 +26,6 @@
     :menu-offset="[0, 4]"
     menu-self="top left"
     menu-anchor="bottom start"
-    @update:modelValue="val => $emit('update:modelValue', val)"
   >
     <template v-for="(_, slotName, index) in $slots" #[slotName]="data">
       <!-- eslint-disable-next-line -->
@@ -189,7 +188,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
   @import '../css/extends.scss';
 
   .s-select {

package/src/components/SSelectCheckbox.vue

@@ -179,7 +179,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
   @import '../css/extends.scss';
 
   .s-select-checkbox {

package/src/components/SSelectCustom.vue

@@ -124,7 +124,7 @@ export default defineComponent({
 
 <style lang="scss">
 @import "../css/extends.scss";
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 .s-select-custom {
   @extend %select;
 }

package/src/components/SSelectGroupCheckbox.vue

@@ -176,7 +176,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
   @import '../css/extends.scss';
 
   .s-select-checkbox {

package/src/components/SSelectSearch.vue

@@ -126,7 +126,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
   @import '../css/extends.scss';
 
   .s-select-search {

package/src/components/SSelectSearchAutoComplete.vue

@@ -133,7 +133,7 @@
 
 <style lang="scss">
   @import '../css/extends.scss';
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
   .s-select-search-auto-complete-options-wrapper {
     position: absolute;
     background: white;

package/src/components/SSelectSearchCheckbox.vue

@@ -269,7 +269,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 @import "../css/extends.scss";
 
 .s-select-checkbox {

package/src/components/STab.vue

@@ -30,7 +30,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 
 .s-tab {
   padding: $tab-padding;

package/src/components/STable.vue

@@ -249,7 +249,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
   @import '../css/extends.scss';
 
   .s-table {

package/src/components/STimePicker.vue

@@ -124,7 +124,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .s-time-picker {
     width: fit-content;

package/src/components/SToggle.vue

@@ -15,7 +15,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 .s-toggle {
   height: $default-content-height;
   .q-toggle__inner {

package/src/components/STooltip.vue

@@ -134,7 +134,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import "../css/variable.scss";
+@import "../css/quasar.variables.scss";
 .s-tooltip {
   padding: $tooltip-padding;
   border-radius: $button-border-radius;

package/src/components/TimePickerCard.vue

@@ -309,7 +309,7 @@
 </script>
 
 <style lang="scss">
-  @import '../css/variable.scss';
+  @import '../css/quasar.variables.scss';
 
   .time-picker-card {
     height: 124px;

package/src/css/app.scss

@@ -1,14 +1,14 @@
+// $
+@import './quasar.variables.scss';
 @import './default.scss';
-@font-face {
-  font-family: 'Pretendard';
-  src: url('./fonts/PretendardVariable.woff2');
-};
+
 .q-field {
+  font-size: $body-font-size;
   &--outlined {
     .q-field__control {
-      padding: 0 4px 0 8px;
+      border-radius: $generic-border-radius;
       &:before {
-        border: 1px solid rgba(0,0,0,.24);
+        border: 1px solid rgba(0, 0, 0, 0.24);
       }
       &:hover:after {
         border: 1px solid;
@@ -30,14 +30,14 @@
   &--dense {
     .q-field__control,
     .q-field__marginal {
-      height: 32px;
+      height: 100%;
     }
   }
   &--auto-height {
     &.q-field--dense {
       .q-field__control,
       .q-field__native {
-        min-height: 32px;
+        min-height: 28px;
       }
     }
     .q-field__control-container {
@@ -54,17 +54,20 @@
     }
   }
 }
+
 .q-textarea {
   .q-field__control {
     height: auto;
   }
 }
+
 .disabled {
   border: 1px solid $Grey_Lighten-2;
   background: $Grey_Lighten-4 !important;
   color: $Grey_Default !important;
   cursor: not-allowed;
 }
+
 .q-tab {
   border: 1px solid $Grey_Lighten-2;
   border-bottom: transparent;
@@ -80,9 +83,11 @@
     border-bottom: 1px solid $Grey_Lighten-2;
   }
 }
+
 .q-card {
   border-radius: 8px !important;
 }
+
 .no-hover {
   &.q-focus-helper,
   &.q-focusable:focus > .q-focus-helper,

package/src/css/extends.scss

@@ -1,4 +1,4 @@
-@import './variable.scss';
+@import './quasar.variables.scss';
 
 %checkbox {
   .q-checkbox__inner {
@@ -14,7 +14,7 @@
       top: 0;
       left: 0;
       .q-checkbox__svg {
-        width: 11.43px !important; 
+        width: 11.43px !important;
         margin: auto;
       }
     }
@@ -124,4 +124,4 @@
       }
     }
   }
-}
+}

package/src/css/{variable.scss → quasar.variables.scss}

@@ -1,189 +1,189 @@
-$primary: #051d36;
-$secondary: #555555;
-$accent: #9c27b0;
-
-$positive: #0075ff;
-$negative: #e30000;
-$info: #00cd52;
-$warning: #f2c037;
-
-$Red_Darken-5: #220000;
-$Red_Darken-4: #440000;
-$Red_Darken-3: #5e0000;
-$Red_Darken-2: #820000;
-$Red_Darken-1: #ad0000;
-$Red_Default: #e30000;
-$Red_Lighten-1: #fb4444;
-$Red_Lighten-2: #ff7c7c;
-$Red_Lighten-3: #ffb5b5;
-$Red_Lighten-4: #ffd3d3;
-$Red_Lighten-5: #fce6e6;
-$Red_Lighten-6: #fcefef;
-$Caution_Bg: #FEF1F1;
-$Caution_Icon: #fd9595;
-
-$Orange_Darken-5: #2f1100;
-$Orange_Darken-4: #4d1b00;
-$Orange_Darken-3: #752a00;
-$Orange_Darken-2: #9b3700;
-$Orange_Darken-1: #ce4900;
-$Orange_Default: #ff6b00;
-$Orange_Lighten-1: #ff7f22;
-$Orange_Lighten-2: #ffa452;
-$Orange_Lighten-3: #ffbb96;
-$Orange_Lighten-4: #ffbc81;
-$Orange_Lighten-5: #ffd5af;
-$Orange_Lighten-6: #ffead7;
-
-$Header_Alert: #ff7a00; // header alert
-
-$Yellow_Darken-5: #553d00;
-$Yellow_Darken-4: #7d5a00;
-$Yellow_Darken-3: #a87900;
-$Yellow_Darken-2: #cd9400;
-$Yellow_Darken-1: #f3be00;
-$Yellow_Default: #ffc700;
-$Yellow_Lighten-1: #ffd359;
-$Yellow_Lighten-2: #ffdf87;
-$Yellow_Lighten-3: #ffecb9;
-$Yellow_Lighten-4: #fff3d0;
-$Yellow_Lighten-5: #fff6de;
-$Yellow_Lighten-6: #fffbf2;
-
-$Greenish-yellow_Darken-5: #2c2c00;
-$Greenish-yellow_Darken-4: #454500;
-$Greenish-yellow_Darken-3: #636300;
-$Greenish-yellow_Darken-2: #838300;
-$Greenish-Yellow_Darken-1: #a5a500;
-$Greenish-Yellow_Default: #c7c700;
-$Greenish-Yellow_Lighten-1: #e0e01f;
-$Greenish-Yellow_Lighten-2: #f3f354;
-$Greenish-Yellow_Lighten-3: #ffff80;
-$Greenish-Yellow_Lighten-4: #fafab2;
-$Greenish-Yellow_Lighten-5: #fafad8;
-$Greenish-Yellow_Lighten-6: #f9f9e4;
-
-$Green_Darken-5: #001d0b;
-$Green_Darken-4: #003013;
-$Green_Darken-3: #00461c;
-$Green_Darken-2: #006629;
-$Green_Darken-1: #007b31;
-$Green_Default: #00973c;
-$Green_Lighten-1: #01BB4B;
-$Green_Lighten-2: #05d358;
-$Green_Lighten-3: #3ee882;
-$Green_Lighten-4: #87edb0;
-$Green_Lighten-5: #c4f9d9;
-$Green_Lighten-6: #e8f9ef;
-
-$Blue_A_Darken-5: #021a25;
-$Blue_A_Darken-4: #02212f;
-$Blue_A_Darken-3: #032d40;
-$Blue_A_Darken-2: #033f59;
-$Blue_A_Darken-1: #06587d;
-$Blue_A_Default: #066d9b;
-$Blue_A_Lighten-1: #128fc7;
-$Blue_A_Lighten-2: #229fd7;
-$Blue_A_Lighten-3: #50bff0;
-$Blue_A_Lighten-4: #a4e2fd;
-$Blue_A_Lighten-5: #d9f2fd;
-$Blue_A_Lighten-6: #ecf8fd;
-
-$Blue_B_Darken-5: #011428;
-$Blue_B_Darken-4: #03172d;
-$Blue_B_Darken-3: #051d36;
-$Blue_B_Darken-2: #07284a;
-$Blue_B_Darken-1: #004177;
-$Blue_B_Default: #025497;
-$Blue_B_Lighten-1: #006ac1;
-$Blue_B_Lighten-2: #1f8ae1;
-$Blue_B_Lighten-3: #5cb0f3;
-$Blue_B_Lighten-4: #9cd1fc;
-$Blue_B_Lighten-5: #d5ebfe;
-$Blue_B_Lighten-6: #eaf5fe;
-
-$Blue_C_Darken-5: #001226;
-$Blue_C_Darken-4: #001b39;
-$Blue_C_Darken-3: #002b5e;
-$Blue_C_Darken-2: #004290;
-$Blue_C_Darken-1: #005cc9;
-$Blue_C_Default: #0075ff;
-$Blue_C_Lighten-1: #2d8dff;
-$Blue_C_Lighten-2: #64abff;
-$Blue_C_Lighten-3: #93c4ff;
-$Blue_C_Lighten-4: #bbdaff;
-$Blue_C_Lighten-5: #d9eaff;
-$Blue_C_Lighten-6: #e6f1ff;
-$Blue_C_Lighten-7: #eff6ff;
-$Blue_C_Lighten-8: #f5faff; // table-title
-
-$Grey_Darken-5: #222222;
-$Grey_Darken-4: #333333;
-$Grey_Darken-3: #444444;
-$Grey_Darken-2: #555555;
-$Grey_Darken-1: #737373;
-$Grey_Default: #888888;
-$Grey_Lighten-1: #aaaaaa;
-$Grey_Lighten-2: #cccccc;
-$Grey_Lighten-3: #e1e1e1;
-$Grey_Lighten-4: #eeeeee;
-$Grey_Lighten-5: #f6f6f6;
-$Grey_Lighten-6: #f9f9f9;
-$Grey_Lighten-7: #e5e5e5;
-$Grey_Lighten-8: #d8d8d8;
-
-$th-bg: #f5faff;
-
-$body-font-size: 12px !default; // 기준이 되는 font-size를 지정
-$space-base: 16px !default;
-$typography-font-family: 'Pretendard' !default;
-$font-family: 'Pretendard' !default;
-
-$generic-border-radius: 2px !default;
-
-//button 고정
-$button-border-radius: 4px !default;
-$button-padding-xs: 2px 8px !important;
-$button-padding-sm: 4px 12px !important;
-$button-padding-md: 4px 20px !important;
-$button-with-icon-padding-xs: 2px 12px 2px 10px !important;
-$button-with-icon-padding-sm: 4px 12px 4px 10px !important;
-$button-with-icon-padding-md: 4px 20px 4px 16px !important;
-
-
-// 12px 기준
-$default-font: 12px;
-$default-font-weight: 400;
-$default-line-height: 165%;
-$default-content-height: 20px;
-$default-height: 28px;
-$default-content-size: 1.667em; // icon에 사용 20px
-$default-icon-size: 1.334em; // 16px
-$icon-size-sm: 1em; // 12px
-$icon-size-md: 1.429em; // 20px
-$icon-size-lg: 1.667em; // 24px
-
-$double-line-height: 180%;
-$default-icon-margin: 8px;
-$between-margin-sm: 4px;
-$between-margin-md: 8px;
-$pagination-size: 26px;
-$pagination-margin: 0 4px;
-$with-icon-padding: 4px 8px 4px 12px;
-$select-padding: 4px 0 4px 12px;
-$select-menu-padding: 6px 12px;
-$tab-padding: 12px 32px;
-$tooltip-padding: 8px 20px;
-
-$caution-margin-left: 44px;
-$table-tr-height: 40px;
-$table-th-padding: 0 16px;
-$table-td-padding: 0 12px;
-
-// 16px 기준 (button md size)
-$font-md: 16px !default;
-$font-weight-md: 500;
-$icon-size: 1.5em; // 24px
-$line-height-md: 1.625em; // 26px
-
-$font-weight-lg: 700;
+$primary: #051d36;
+$secondary: #555555;
+$accent: #9c27b0;
+
+$positive: #0075ff;
+$negative: #e30000;
+$info: #00cd52;
+$warning: #f2c037;
+
+$Red_Darken-5: #220000;
+$Red_Darken-4: #440000;
+$Red_Darken-3: #5e0000;
+$Red_Darken-2: #820000;
+$Red_Darken-1: #ad0000;
+$Red_Default: #e30000;
+$Red_Lighten-1: #fb4444;
+$Red_Lighten-2: #ff7c7c;
+$Red_Lighten-3: #ffb5b5;
+$Red_Lighten-4: #ffd3d3;
+$Red_Lighten-5: #fce6e6;
+$Red_Lighten-6: #fcefef;
+$Caution_Bg: #FEF1F1;
+$Caution_Icon: #fd9595;
+
+$Orange_Darken-5: #2f1100;
+$Orange_Darken-4: #4d1b00;
+$Orange_Darken-3: #752a00;
+$Orange_Darken-2: #9b3700;
+$Orange_Darken-1: #ce4900;
+$Orange_Default: #ff6b00;
+$Orange_Lighten-1: #ff7f22;
+$Orange_Lighten-2: #ffa452;
+$Orange_Lighten-3: #ffbb96;
+$Orange_Lighten-4: #ffbc81;
+$Orange_Lighten-5: #ffd5af;
+$Orange_Lighten-6: #ffead7;
+
+$Header_Alert: #ff7a00; // header alert
+
+$Yellow_Darken-5: #553d00;
+$Yellow_Darken-4: #7d5a00;
+$Yellow_Darken-3: #a87900;
+$Yellow_Darken-2: #cd9400;
+$Yellow_Darken-1: #f3be00;
+$Yellow_Default: #ffc700;
+$Yellow_Lighten-1: #ffd359;
+$Yellow_Lighten-2: #ffdf87;
+$Yellow_Lighten-3: #ffecb9;
+$Yellow_Lighten-4: #fff3d0;
+$Yellow_Lighten-5: #fff6de;
+$Yellow_Lighten-6: #fffbf2;
+
+$Greenish-yellow_Darken-5: #2c2c00;
+$Greenish-yellow_Darken-4: #454500;
+$Greenish-yellow_Darken-3: #636300;
+$Greenish-yellow_Darken-2: #838300;
+$Greenish-Yellow_Darken-1: #a5a500;
+$Greenish-Yellow_Default: #c7c700;
+$Greenish-Yellow_Lighten-1: #e0e01f;
+$Greenish-Yellow_Lighten-2: #f3f354;
+$Greenish-Yellow_Lighten-3: #ffff80;
+$Greenish-Yellow_Lighten-4: #fafab2;
+$Greenish-Yellow_Lighten-5: #fafad8;
+$Greenish-Yellow_Lighten-6: #f9f9e4;
+
+$Green_Darken-5: #001d0b;
+$Green_Darken-4: #003013;
+$Green_Darken-3: #00461c;
+$Green_Darken-2: #006629;
+$Green_Darken-1: #007b31;
+$Green_Default: #00973c;
+$Green_Lighten-1: #01BB4B;
+$Green_Lighten-2: #05d358;
+$Green_Lighten-3: #3ee882;
+$Green_Lighten-4: #87edb0;
+$Green_Lighten-5: #c4f9d9;
+$Green_Lighten-6: #e8f9ef;
+
+$Blue_A_Darken-5: #021a25;
+$Blue_A_Darken-4: #02212f;
+$Blue_A_Darken-3: #032d40;
+$Blue_A_Darken-2: #033f59;
+$Blue_A_Darken-1: #06587d;
+$Blue_A_Default: #066d9b;
+$Blue_A_Lighten-1: #128fc7;
+$Blue_A_Lighten-2: #229fd7;
+$Blue_A_Lighten-3: #50bff0;
+$Blue_A_Lighten-4: #a4e2fd;
+$Blue_A_Lighten-5: #d9f2fd;
+$Blue_A_Lighten-6: #ecf8fd;
+
+$Blue_B_Darken-5: #011428;
+$Blue_B_Darken-4: #03172d;
+$Blue_B_Darken-3: #051d36;
+$Blue_B_Darken-2: #07284a;
+$Blue_B_Darken-1: #004177;
+$Blue_B_Default: #025497;
+$Blue_B_Lighten-1: #006ac1;
+$Blue_B_Lighten-2: #1f8ae1;
+$Blue_B_Lighten-3: #5cb0f3;
+$Blue_B_Lighten-4: #9cd1fc;
+$Blue_B_Lighten-5: #d5ebfe;
+$Blue_B_Lighten-6: #eaf5fe;
+
+$Blue_C_Darken-5: #001226;
+$Blue_C_Darken-4: #001b39;
+$Blue_C_Darken-3: #002b5e;
+$Blue_C_Darken-2: #004290;
+$Blue_C_Darken-1: #005cc9;
+$Blue_C_Default: #0075ff;
+$Blue_C_Lighten-1: #2d8dff;
+$Blue_C_Lighten-2: #64abff;
+$Blue_C_Lighten-3: #93c4ff;
+$Blue_C_Lighten-4: #bbdaff;
+$Blue_C_Lighten-5: #d9eaff;
+$Blue_C_Lighten-6: #e6f1ff;
+$Blue_C_Lighten-7: #eff6ff;
+$Blue_C_Lighten-8: #f5faff; // table-title
+
+$Grey_Darken-5: #222222;
+$Grey_Darken-4: #333333;
+$Grey_Darken-3: #444444;
+$Grey_Darken-2: #555555;
+$Grey_Darken-1: #737373;
+$Grey_Default: #888888;
+$Grey_Lighten-1: #aaaaaa;
+$Grey_Lighten-2: #cccccc;
+$Grey_Lighten-3: #e1e1e1;
+$Grey_Lighten-4: #eeeeee;
+$Grey_Lighten-5: #f6f6f6;
+$Grey_Lighten-6: #f9f9f9;
+$Grey_Lighten-7: #e5e5e5;
+$Grey_Lighten-8: #d8d8d8;
+
+$th-bg: #f5faff;
+
+$body-font-size: 12px !default; // 기준이 되는 font-size를 지정
+$space-base: 16px !default;
+$typography-font-family: 'Pretendard' !default;
+$font-family: 'Pretendard' !default;
+
+$generic-border-radius: 2px !important;
+
+//button 고정
+$button-border-radius: 4px !default;
+$button-padding-xs: 2px 8px !important;
+$button-padding-sm: 4px 12px !important;
+$button-padding-md: 4px 20px !important;
+$button-with-icon-padding-xs: 2px 12px 2px 10px !important;
+$button-with-icon-padding-sm: 4px 12px 4px 10px !important;
+$button-with-icon-padding-md: 4px 20px 4px 16px !important;
+
+
+// 12px 기준
+$default-font: 12px;
+$default-font-weight: 400;
+$default-line-height: 165%;
+$default-content-height: 20px;
+$default-height: 28px;
+$default-content-size: 1.667em; // icon에 사용 20px
+$default-icon-size: 1.334em; // 16px
+$icon-size-sm: 1em; // 12px
+$icon-size-md: 1.429em; // 20px
+$icon-size-lg: 1.667em; // 24px
+
+$double-line-height: 180%;
+$default-icon-margin: 8px;
+$between-margin-sm: 4px;
+$between-margin-md: 8px;
+$pagination-size: 26px;
+$pagination-margin: 0 4px;
+$with-icon-padding: 4px 8px 4px 12px;
+$select-padding: 4px 0 4px 12px;
+$select-menu-padding: 6px 12px;
+$tab-padding: 12px 32px;
+$tooltip-padding: 8px 20px;
+
+$caution-margin-left: 44px;
+$table-tr-height: 40px;
+$table-th-padding: 0 16px;
+$table-td-padding: 0 12px;
+
+// 16px 기준 (button md size)
+$font-md: 16px !default;
+$font-weight-md: 500;
+$icon-size: 1.5em; // 24px
+$line-height-md: 1.625em; // 26px
+
+$font-weight-lg: 700;

package/src/index.scss

@@ -1 +1,9 @@
-@import 'quasar/src/css/variables.sass';
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 400;
+	font-display: swap;
+	src: local('Pretendard Regular'), url('../src/css/fonts/Pretendard-Regular.subset.woff2') format('woff2');
+}
+
+@import '../src/css/app.scss';
+