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

package/src/css/default.scss

@@ -28,13 +28,32 @@ $sellmate-spacings: (
 );
 
 $direction-positions: (
-  'l': (left),
-  'r': (right),
-  't': (top),
-  'b': (bottom),
-  'x': (left, right),
-  'y': (top, bottom),
-  'a': (left, right, top, bottom)
+  'l': (
+    left,
+  ),
+  'r': (
+    right,
+  ),
+  't': (
+    top,
+  ),
+  'b': (
+    bottom,
+  ),
+  'x': (
+    left,
+    right,
+  ),
+  'y': (
+    top,
+    bottom,
+  ),
+  'a': (
+    left,
+    right,
+    top,
+    bottom,
+  ),
 );
 
 @mixin spacing($property, $size, $position) {
@@ -80,127 +99,146 @@ $colorList: (
   '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_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': '#FFBC81',
-  'Orange_Lighten-4': '#FFD5AF',
-  'Orange_Lighten-5': '#FFEAD7',
-  'Orange_Lighten-6': '#FEF1EA',
   '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',
+  // Grey Palette
+  'grey_95': '#222222',
+  'grey_90': '#333333',
+  'grey_85': '#444444',
+  'grey_80': '#555555',
+  'grey_70': '#737373',
+  'grey_65': '#888888',
+  'grey_55': '#aaaaaa',
+  'grey_45': '#cccccc',
+  'grey_35': '#D8D8D8',
+  'grey_30': '#e1e1e1',
+  'grey_25': '#E5E5E5',
+  'grey_20': '#eeeeee',
+  'grey_10': '#f6f6f6',
+  'grey_05': '#f9f9f9',
+
+  // Red Palette
+  'red_99': '#220000',
+  'red_95': '#440000',
+  'red_90': '#5E0000',
+  'red_85': '#820000',
+  'red_80': '#AD0000',
+  'red_75': '#E30000',
+  'red_70': '#FB4444',
+  'red_60': '#FF7C7C',
+  'red_45': '#FFB5B5',
+  'red_30': '#FFD3D3',
+  'red_20': '#FCE6E6',
+  'red_15': '#FCEFEF',
+
+  // Orange Palette
+  'orange_99': '#2F1100',
+  'orange_95': '#4D1B00',
+  'orange_90': '#752A00',
+  'orange_85': '#9B3700',
+  'orange_75': '#CE4900',
+  'orange_65': '#FF6B00',
+  'orange_60': '#FF7F22',
+  'orange_55': '#FFA452',
+  'orange_45': '#FFBC81',
+  'orange_35': '#FFD5AF',
+  'orange_20': '#FFEAD7',
+  'orange_10': '#FEF1EA',
+
+  // Olive Palette
+  'olive_95': '#2C2C00',
+  'olive_90': '#454500',
+  'olive_80': '#636300',
+  'olive_70': '#838300',
+  'olive_65': '#A5A500',
+  'olive_55': '#C7C700',
+  'olive_45': '#dddd12',
+  'olive_30': '#eeee37',
+  'olive_20': '#f6f65f',
+  'olive_15': '#fafaa1',
+  'olive_10': '#fbfbbf',
+  'olive_05': '#fefed9',
+
+  // Yellow Palette
+  'yellow_95': '#322700',
+  'yellow_90': '#453702',
+  'yellow_80': '#6c5602',
+  'yellow_70': '#9c7a00',
+  'yellow_60': '#c49900',
+  'yellow_50': '#ebb800',
+  'yellow_45': '#FFC700',
+  'yellow_40': '#ffd643',
+  'yellow_30': '#fee17c',
+  'yellow_25': '#ffe99e',
+  'yellow_20': '#fef1c4',
+  'yellow_10': '#fff7dd',
+
+  // Green Palette
+  'green_99': '#001d0b',
+  'green_95': '#003013',
+  'green_90': '#00461c',
+  'green_85': '#006629',
+  'green_80': '#007b31',
+  'green_75': '#00973c',
+  'green_70': '#12b553',
+  'green_65': '#2bce6c',
+  'green_55': '#6de39c',
+  'green_45': '#acf4c9',
+  'green_25': '#d4fae3',
+  'green_15': '#e8f9ef',
+
+  // Steelblue Palette
+  'steelblue_99': '#021a25',
+  'steelblue_95': '#02212f',
+  'steelblue_90': '#032d40',
+  'steelblue_85': '#033f59',
+  'steelblue_80': '#06587d',
+  'steelblue_75': '#066d9b',
+  'steelblue_70': '#128fc7',
+  'steelblue_65': '#229fd7',
+  'steelblue_60': '#50bff0',
+  'steelblue_45': '#a4e2fd',
+  'steelblue_25': '#d9f2fd',
+  'steelblue_10': '#ecf8fd',
+
+  // Oceanblue Palette
+  'oceanblue_99': '#011428',
+  'oceanblue_95': '#03172d',
+  'oceanblue_90': '#051d36',
+  'oceanblue_85': '#07284a',
+  'oceanblue_80': '#004177',
+  'oceanblue_75': '#025497',
+  'oceanblue_70': '#006ac1',
+  'oceanblue_65': '#1f8ae1',
+  'oceanblue_60': '#5cb0f3',
+  'oceanblue_50': '#9cd1fc',
+  'oceanblue_25': '#d5ebfe',
+  'oceanblue_15': '#eaf5fe',
+
+  // Brilliantblue Palette
+  'brilliantblue_99': '#001226',
+  'brilliantblue_95': '#001b39',
+  'brilliantblue_90': '#002b5e',
+  'brilliantblue_85': '#004290',
+  'brilliantblue_80': '#005cc9',
+  'brilliantblue_75': '#0075ff',
+  'brilliantblue_70': '#2d8dff',
+  'brilliantblue_60': '#64abff',
+  'brilliantblue_50': '#93c4ff',
+  'brilliantblue_40': '#bbdaff',
+  'brilliantblue_25': '#d9eaff',
+  'brilliantblue_20': '#e6f1ff',
+  'brilliantblue_10': '#eff6ff',
+  'brilliantblue_05': '#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',
   'white': '#ffffff',
   'black': '#000000',
 );
 
-
 $positions: 'top', 'right', 'left', 'bottom';
 
 @mixin position($name, $color) {
@@ -211,8 +249,7 @@ $positions: 'top', 'right', 'left', 'bottom';
   }
 }
 
-@each $name,
-$color in $colorList {
+@each $name, $color in $colorList {
   .s-border-#{$name} {
     border: 1px solid unquote($color);
   }
@@ -220,8 +257,7 @@ $color in $colorList {
   @include position($name, $color);
 }
 
-@each $name,
-$color in $colorList {
+@each $name, $color in $colorList {
   .s-border-color-#{$name} {
     border-color: unquote($color);
   }
@@ -250,22 +286,21 @@ $color in $colorList {
   }
 }
 
-
 /*********** border-radius ***********/
 // QUASAR
 // rounded-borders - border-radius: 2px
 
 // 반복되는 border-radius 값 설정을 위한 맵
 $radius-sizes: (
-  "xxs": 4,
-  "xs": 6,
-  "sm": 8,
-  "md": 10,
-  "lg": 12,
-  "xl": 14,
-  "xxl": 16,
-  "chip": 40,
-  "rounded": 2,
+  'xxs': 4,
+  'xs': 6,
+  'sm': 8,
+  'md': 10,
+  'lg': 12,
+  'xl': 14,
+  'xxl': 16,
+  'chip': 40,
+  'rounded': 2,
 );
 
 // 일반적인 border-radius
@@ -303,7 +338,6 @@ $radius-sizes: (
   }
 }
 
-
 // 특정 모서리의 radius 제거
 .s-border-top-left-radius-none {
   border-top-left-radius: 0;
@@ -356,11 +390,8 @@ $fontWeight: (
   font-weight: $weight;
 }
 
-@each $sizeKey,
-$size in $fontSize {
-
-  @each $weightKey,
-  $weight in $fontWeight {
+@each $sizeKey, $size in $fontSize {
+  @each $weightKey, $weight in $fontWeight {
     .font-#{$sizeKey}-#{$weightKey} {
       @include fonts(#{$size}, #{$weight});
     }
@@ -392,6 +423,6 @@ $sellmate-gap-sizes: (
     row-gap: #{$size}px;
   }
   .s-gap-#{$name} {
-    gap: #{$size}px
+    gap: #{$size}px;
   }
 }

package/src/css/extends.scss

@@ -7,7 +7,7 @@
     height: 16px;
 
     .q-checkbox__bg {
-      border: 1px solid $Grey_Default;
+      border: 1px solid $grey_65;
       width: 16px;
       height: 16px;
       padding: 0 2.5px;
@@ -33,6 +33,27 @@
 }
 
 %select {
+  &.q-field {
+    .q-field__control:hover {
+      &:before,
+      &:after {
+        border-color: $grey_55 !important;
+      }
+    }
+    &.q-field--error {
+      &:not(.q-field--focused) {
+        .q-field__control::after {
+          border-color: $red_70 !important;
+        }
+      }
+      &.q-field--focused {
+        .q-field__control::after {
+          border-color: $grey_55 !important;
+        }
+      }
+    }
+  }
+
   .q-field__inner {
     .q-field__control {
       background: white;
@@ -41,13 +62,13 @@
       height: $default-height;
 
       &:after {
-        border: 1px solid $Grey_Lighten-1;
+        border: 1px solid $grey_55;
         box-shadow: none;
       }
 
       &:hover,
       &:active {
-        background: $Grey_Lighten-5;
+        background: $grey_10;
       }
 
       &-container {
@@ -55,7 +76,7 @@
           font-size: $default-font;
           min-height: 0;
           padding: $select-padding !important;
-          color: $Grey_Darken-4;
+          color: $grey_90;
 
           > span {
             display: block;
@@ -77,7 +98,7 @@
 
         .q-icon {
           font-size: $default-font;
-          color: $Grey_Default;
+          color: $grey_65;
           width: $icon-size-sm;
           height: $icon-size-sm;
         }
@@ -87,11 +108,11 @@
     .q-field__bottom {
       padding: 8px 0px 0px 0px;
       font-size: 12px;
-      color: $Grey_Darken-1;
+      color: $grey_70;
 
       .q-field__messages {
         div[role='alert'] {
-          color: $Red_Default;
+          color: $red_75;
         }
       }
     }
@@ -101,23 +122,23 @@
     .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 {
             > span {
-              color: $Grey_Default;
+              color: $grey_65;
             }
           }
         }
 
         .q-field__append {
           .q-icon {
-            color: $Grey_Default;
+            color: $grey_65;
           }
         }
       }
@@ -135,13 +156,13 @@
           > span {
             font-size: $default-font;
             font-weight: $default-font-weight;
-            color: $Grey_Darken-4;
+            color: $grey_90;
           }
         }
       }
 
       &--active {
-        color: $Grey_Darken-4 !important;
+        color: $grey_90 !important;
       }
     }