quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.5

package/src/css/extends.scss

@@ -1,154 +1,154 @@
-@import './quasar.variables.scss';
-
-%checkbox {
-  .q-checkbox__inner {
-    min-width: 0;
-    width: 16px;
-    height: 16px;
-    .q-checkbox__bg {
-      border: 1px solid $Grey_Default;
-      width: 16px;
-      height: 16px;
-      padding: 0 2.5px;
-      background: white;
-      top: 0;
-      left: 0;
-      .q-checkbox__svg {
-        width: 11.43px !important;
-        margin: auto;
-      }
-    }
-    &--indet,
-    &--truthy {
-      color: $positive !important;
-      .q-checkbox__bg {
-        border: none;
-        background: $positive;
-      }
-    }
-  }
-}
-
-%select {
-  .q-field__inner {
-    .q-field__control {
-      background: white;
-      padding: 0;
-      min-height: 0;
-      height: $default-height;
-      &:after {
-        border: 1px solid $Grey_Lighten-1;
-        box-shadow: none;
-      }
-      &:hover, &:active {
-        background: $Grey_Lighten-5;
-      }
-      &-container {
-        .q-field__native {
-          font-size: $default-font;
-          min-height: 0;
-          padding: $select-padding !important;
-          color: $Grey_Darken-4;
-          > span {
-            max-height: $default-height;
-          }
-          > .q-placeholder {
-            min-height: 100%;
-          }
-        }
-      }
-      .q-field__append {
-        min-height: 0;
-        height: inherit;
-        padding: $default-icon-margin;
-        .q-icon {
-          font-size: $default-font;
-          color: $Grey_Default;
-          width: $icon-size-sm;
-          height: $icon-size-sm;
-        }
-      }
-    }
-    .q-field__bottom {
-      padding: 8px 0px 0px 0px;
-      font-size:12px;
-      color: $Grey_Darken-1;
-      .q-field__messages{
-        div[role="alert"]{
-          color: $Red_Default;
-        }
-      }
-    }
-  }
-
-  &.q-field--disabled{
-    .q-field__inner {
-      .q-field__control {
-        opacity: 1 !important;
-        background: $Grey_Lighten-4;
-
-        &:after {
-          border: 1px solid $Grey_Lighten-2;
-        }
-
-        &-container {
-          .q-field__native {
-            > span {
-              color: $Grey_Default;
-            }
-          }
-        }
-
-        .q-field__append {
-          .q-icon {
-            color: $Grey_Default;
-          }
-        }
-      }
-    }
-  }
-}
-
-%select-menu-list {
-  .q-virtual-scroll__content {
-    .q-item {
-      padding: $select-menu-padding;
-      &__section {
-        .q-item__label {
-          > span {
-            font-size: $default-font;
-            font-weight: $default-font-weight;
-            color: $Grey_Darken-4;
-          }
-        }
-      }
-      &--active {
-        color: $Grey_Darken-4 !important;
-      }
-    }
-    .q-manual-focusable--focused {
-      background: $positive;
-      color: white !important;
-      .q-focus-helper {
-        opacity: 0 !important;
-      }
-      .q-item__section {
-        .q-item__label {
-          > span {
-            color: white !important;
-          }
-        }
-        .q-checkbox {
-          .q-checkbox__inner {
-            &--indet,
-            &--truthy {
-              .q-checkbox__bg {
-                border: 1px solid white !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@import './quasar.variables.scss';
+
+%checkbox {
+  .q-checkbox__inner {
+    min-width: 0;
+    width: 16px;
+    height: 16px;
+    .q-checkbox__bg {
+      border: 1px solid $Grey_Default;
+      width: 16px;
+      height: 16px;
+      padding: 0 2.5px;
+      background: white;
+      top: 0;
+      left: 0;
+      .q-checkbox__svg {
+        width: 11.43px !important;
+        margin: auto;
+      }
+    }
+    &--indet,
+    &--truthy {
+      color: $positive !important;
+      .q-checkbox__bg {
+        border: none;
+        background: $positive;
+      }
+    }
+  }
+}
+
+%select {
+  .q-field__inner {
+    .q-field__control {
+      background: white;
+      padding: 0;
+      min-height: 0;
+      height: $default-height;
+      &:after {
+        border: 1px solid $Grey_Lighten-1;
+        box-shadow: none;
+      }
+      &:hover, &:active {
+        background: $Grey_Lighten-5;
+      }
+      &-container {
+        .q-field__native {
+          font-size: $default-font;
+          min-height: 0;
+          padding: $select-padding !important;
+          color: $Grey_Darken-4;
+          > span {
+            max-height: $default-height;
+          }
+          > .q-placeholder {
+            min-height: 100%;
+          }
+        }
+      }
+      .q-field__append {
+        min-height: 0;
+        height: inherit;
+        padding: $default-icon-margin;
+        .q-icon {
+          font-size: $default-font;
+          color: $Grey_Default;
+          width: $icon-size-sm;
+          height: $icon-size-sm;
+        }
+      }
+    }
+    .q-field__bottom {
+      padding: 8px 0px 0px 0px;
+      font-size:12px;
+      color: $Grey_Darken-1;
+      .q-field__messages{
+        div[role="alert"]{
+          color: $Red_Default;
+        }
+      }
+    }
+  }
+
+  &.q-field--disabled{
+    .q-field__inner {
+      .q-field__control {
+        opacity: 1 !important;
+        background: $Grey_Lighten-4;
+
+        &:after {
+          border: 1px solid $Grey_Lighten-2;
+        }
+
+        &-container {
+          .q-field__native {
+            > span {
+              color: $Grey_Default;
+            }
+          }
+        }
+
+        .q-field__append {
+          .q-icon {
+            color: $Grey_Default;
+          }
+        }
+      }
+    }
+  }
+}
+
+%select-menu-list {
+  .q-virtual-scroll__content {
+    .q-item {
+      padding: $select-menu-padding;
+      &__section {
+        .q-item__label {
+          > span {
+            font-size: $default-font;
+            font-weight: $default-font-weight;
+            color: $Grey_Darken-4;
+          }
+        }
+      }
+      &--active {
+        color: $Grey_Darken-4 !important;
+      }
+    }
+    .q-manual-focusable--focused {
+      background: $positive;
+      color: white !important;
+      .q-focus-helper {
+        opacity: 0 !important;
+      }
+      .q-item__section {
+        .q-item__label {
+          > span {
+            color: white !important;
+          }
+        }
+        .q-checkbox {
+          .q-checkbox__inner {
+            &--indet,
+            &--truthy {
+              .q-checkbox__bg {
+                border: 1px solid white !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/css/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;
-
-//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;
+
+//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;