quasar-ui-sellmate-ui-kit 3.1.7 → 3.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SDropdown.vue

@@ -2,7 +2,7 @@
   <q-btn
     outline
     split
-    :color="!color ? 'Grey_Default' : color"
+    :color="$attrs.color || 'Grey_Default'"
     no-caps
     no-wrap
     unelevated
@@ -12,10 +12,10 @@
     menu-self="top start"
     class="s-dropdown"
     :class="{
-      'use-color': color,
       's-dropdown-xs': size === 'xs',
       's-dropdown-sm': size === 'sm',
       's-dropdown-md': size === 'md',
+      's-dropdown-lg': size === 'lg',
     }"
   >
     <q-menu :class="menuClass" class="s-dropdown-menu" :offset="[0, 4]">
@@ -68,7 +68,6 @@
         type: String,
         default: 'sm',
       },
-      color: String,
       menuClass: String,
       optionLabel: {
         type: String,
@@ -91,143 +90,162 @@
 <style lang="scss">
   @import '../css/quasar.variables.scss';
 
+  @mixin textSize($padding, $lineHeight, $fontSize, $fontWeight, $iconSize, $iconMargin) {
+    .block {
+      padding: $padding;
+      line-height: $lineHeight;
+      font: {
+        size: $fontSize;
+        weight: $fontWeight;
+      }
+    }
+
+    .q-icon {
+      font-size: $iconSize;
+      margin: $iconMargin;
+    }
+  }
+
   .s-dropdown {
     min-height: 0;
     padding: 0 !important;
+    line-height: normal;
 
     .q-btn__content {
       min-height: 0;
       align-items: center;
-
       .block {
-        color: $Grey_Darken-4;
-        line-height: $default-content-height;
-        border-right: 1px solid $Grey_Default !important;
-        font-size: $default-font;
-        font-weight: $default-font-weight;
+        border-right: 1px solid color-mix(in srgb, white 25%, transparent);
+        height: 100%;
       }
-
       .q-icon {
         padding: 0;
         border-right: none;
-        font-size: $default-font;
-        width: $icon-size-sm;
-        height: $icon-size-sm;
+        color: white;
       }
     }
-    // hover 추가
-    &.q-btn {
+
+    &.q-btn--outline {
+      .q-btn__content {
+        .block {
+          color: currentColor;
+          border-right: 1px solid currentColor;
+        }
+        .q-icon {
+          color: currentColor;
+        }
+      }
+
       &:hover {
         &.q-focusable:focus,
         &.q-manual-focusable--focused,
         &.q-hoverable:hover {
           > .q-focus-helper {
-            opacity: 0.3;
-            transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
             &:before {
-              opacity: 1.4;
-              transition: none;
+              opacity: 0;
             }
             &:after {
-              opacity: 0;
-              transition: none;
+              opacity: 0.55;
             }
           }
         }
       }
+    }
 
-      &.q-btn--outline {
-        &:hover {
-          &.q-focusable:focus,
-          &.q-manual-focusable--focused,
-          &.q-hoverable:hover {
-            > .q-focus-helper {
-              &:before {
-                opacity: 0;
-              }
-              &:after {
-                opacity: 0.55;
-              }
-            }
+    &:hover {
+      &.q-focusable:focus,
+      &.q-manual-focusable--focused,
+      &.q-hoverable:hover {
+        > .q-focus-helper {
+          opacity: 0.3;
+          transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
+          &:before {
+            opacity: 1.4;
+            transition: none;
+          }
+          &:after {
+            opacity: 0;
+            transition: none;
           }
         }
       }
     }
-  }
 
-  .use-color {
-    .q-btn__content {
-      .block {
-        color: currentColor;
-        border-right: 1px solid currentColor !important;
+    &.s-dropdown-xs {
+      min-width: 67px;
+      .q-btn__content {
+        @include textSize(
+          2px 6px 2px 8px,
+          $default-content-height,
+          $default-font,
+          $default-font-weight,
+          $default-font,
+          5px 5px 5px 4px
+        );
       }
     }
-  }
-
-  .s-dropdown-xs {
-    min-width: 67px;
-    height: 24px;
 
-    .q-btn__content {
-      span {
-        padding: 1px 8px 1px 10px;
-      }
-
-      .q-icon {
-        margin: 5px 4px 5px 6px;
+    &.s-dropdown-sm {
+      min-width: 75px;
+      .q-btn__content {
+        @include textSize(
+          4px 10px 4px 12px,
+          $default-content-height,
+          $default-font,
+          $default-font-weight,
+          $default-font,
+          7px 8px
+        );
       }
     }
-  }
-
-  .s-dropdown-sm {
-    min-width: 75px;
-    height: 28px;
 
-    .q-btn__content {
-      span {
-        padding: 3px 10px 3px 12px;
-      }
+    &.s-dropdown-md {
+      min-width: 107px;
 
-      .q-icon {
-        margin: 8px;
+      .q-btn__content {
+        @include textSize(
+          6px 16px 6px 20px,
+          $default-content-height,
+          $font-md,
+          $font-weight-md,
+          $default-font,
+          11px 12px
+        );
       }
     }
-  }
 
-  .s-dropdown-md {
-    min-width: 107px;
-    height: 34px;
+    &.s-dropdown-lg {
+      min-width: 107px;
 
-    .q-btn__content {
-      .block {
-        padding: 2.4px 10px 2.4px 12px; // 가운데 바가 있어 상하 1px 줄임
-        font-size: $font-md;
-        font-weight: $font-weight-md;
+      .q-btn__content {
+        @include textSize(
+          16px 24px 16px 28px,
+          30px,
+          18px,
+          $font-weight-md,
+          $icon-size-lg,
+          19px 20px
+        );
       }
-
-      .q-icon {
-        margin: 11px 12px;
-      }
-    }
-  }
-
-  .s-dropdown.disabled {
-    opacity: 1 !important;
-    border: none;
-    padding: 0;
-    &:before {
-      border: 1px solid $Grey_Lighten-2;
-      background: $Grey_Lighten-3 !important;
     }
 
-    .q-btn__content {
-      > span {
-        color: $Grey_Default;
+    &.disabled {
+      opacity: 1 !important;
+      border: none;
+      padding: 0;
+      &:before {
+        border: 1px solid $Grey_Lighten-2;
+        background: $Grey_Lighten-3 !important;
       }
 
-      .block {
-        line-height: $default-content-height !important;
-        border-right: 1px solid $Grey_Lighten-2 !important;
+      .q-btn__content {
+        > .block {
+          color: $Grey_Default;
+        }
+
+        .block {
+          border-right: 1px solid $Grey_Lighten-2 !important;
+        }
       }
     }
   }