quasar-ui-sellmate-ui-kit 3.2.19 → 3.2.21

package/src/css/default.scss

@@ -16,85 +16,42 @@
 // s-@@-xl - 22px
 // s-@@-xxl - 30px
 
-// padding
-.s-pa-xxs {
-  padding: 6px;
-}
-
-.s-pt-xxs {
-  padding-top: 6px;
-}
-
-.s-pb-xxs {
-  padding-bottom: 6px;
-}
-
-.s-pr-xxs {
-  padding-right: 6px;
-}
-
-.s-pl-xxs {
-  padding-left: 6px;
-}
-
-.s-py-xxs {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-.s-px-xxs {
-  padding-right: 6px;
-  padding-left: 6px;
-}
-
-.s-pa-xs {
-  padding: 10px;
-}
-
-.s-pt-xs {
-  padding-top: 10px;
-}
-
-.s-pb-xs {
-  padding-bottom: 10px;
-}
-
-.s-pr-xs {
-  padding-right: 10px;
-}
-
-.s-pl-xs {
-  padding-left: 10px;
-}
-
-.s-py-xs {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.s-px-xs {
-  padding-right: 10px;
-  padding-left: 10px;
-}
-
-.s-pa-sm {
-  padding: 12px;
-}
-
-.s-pt-sm {
-  padding-top: 12px;
-}
+/***** spacing *****/
+$sellmate-spacings: (
+  'xxs': 6,
+  'xs': 10,
+  'sm': 12,
+  'md': 18,
+  'lg': 20,
+  'xl': 22,
+  'xxl': 30,
+);
 
-.s-pb-sm {
-  padding-bottom: 12px;
-}
+$direction-positions: (
+  'l': (left),
+  'r': (right),
+  't': (top),
+  'b': (bottom),
+  'x': (left, right),
+  'y': (top, bottom),
+  'a': (left, right, top, bottom)
+);
 
-.s-pr-sm {
-  padding-right: 12px;
+@mixin spacing($property, $size, $position) {
+  @each $dir in map-get($direction-positions, $position) {
+    #{$property}-#{$dir}: #{$size}px;
+  }
 }
 
-.s-pl-sm {
-  padding-left: 12px;
+@each $key, $value in $sellmate-spacings {
+  @each $p in ('t', 'r', 'b', 'l', 'x', 'y', 'a') {
+    .s-m#{$p}-#{$key} {
+      @include spacing(margin, #{$value}, #{$p});
+    }
+    .s-p#{$p}-#{$key} {
+      @include spacing(padding, #{$value}, #{$p});
+    }
+  }
 }
 
 .s-py-sm {
@@ -102,376 +59,19 @@
   padding-bottom: 12px !important;
 }
 
-.s-px-sm {
-  padding-right: 12px;
-  padding-left: 12px;
-}
-
-.s-pa-md {
-  padding: 18px;
-}
-
-.s-pt-md {
-  padding-top: 18px;
-}
-
-.s-pb-md {
-  padding-bottom: 18px;
-}
-
-.s-pr-md {
-  padding-right: 18px;
-}
-
-.s-pl-md {
-  padding-left: 18px;
-}
-
-.s-py-md {
-  padding-top: 18px;
-  padding-bottom: 18px;
-}
-
-.s-px-md {
-  padding-right: 18px;
-  padding-left: 18px;
-}
-
-.s-pa-lg {
-  padding: 20px;
-}
-
-.s-pt-lg {
-  padding-top: 20px;
-}
-
-.s-pb-lg {
-  padding-bottom: 20px;
-}
-
-.s-pr-lg {
-  padding-right: 20px;
-}
-
-.s-pl-lg {
-  padding-left: 20px;
-}
-
-.s-py-lg {
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
 .s-px-lg {
   padding-right: 20px !important;
   padding-left: 20px !important;
 }
 
-.s-pa-xl {
-  padding: 22px;
-}
-
-.s-pt-xl {
-  padding-top: 22px;
-}
-
-.s-pb-xl {
-  padding-bottom: 22px;
-}
-
-.s-pr-xl {
-  padding-right: 22px;
-}
-
-.s-pl-xl {
-  padding-left: 22px;
-}
-
-.s-py-xl {
-  padding-top: 22px;
-  padding-bottom: 22px;
-}
-
-.s-px-xl {
-  padding-right: 22px;
-  padding-left: 22px;
-}
-
-.s-pa-xxl {
-  padding: 30px;
-}
-
-.s-pt-xxl {
-  padding-top: 30px;
-}
-
-.s-pb-xxl {
-  padding-bottom: 30px;
-}
-
-.s-pr-xxl {
-  padding-right: 30px;
-}
-
-.s-pl-xxl {
-  padding-left: 30px;
-}
-
-.s-py-xxl {
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-
-.s-px-xxl {
-  padding-right: 30px;
-  padding-left: 30px;
-}
-
-.s-pa-none {
-  padding: 0 !important;
-}
-
-// margin
-.s-ma-xxs {
-  margin: 6px;
-}
-
-.s-mt-xxs {
-  margin-top: 6px;
-}
-
-.s-mb-xxs {
-  margin-bottom: 6px;
-}
-
-.s-mr-xxs {
-  margin-right: 6px;
-}
-
-.s-ml-xxs {
-  margin-left: 6px;
-}
-
-.s-my-xxs {
-  margin-top: 6px;
-  margin-bottom: 6px;
-}
-
-.s-mx-xxs {
-  margin-left: 6px;
-  margin-right: 6px;
-}
-
-.s-ma-xs {
-  margin: 10px;
-}
-
-.s-mt-xs {
-  margin-top: 10px;
-}
-
-.s-mb-xs {
-  margin-bottom: 10px;
-}
-
-.s-mr-xs {
-  margin-right: 10px;
-}
-
-.s-ml-xs {
-  margin-left: 10px;
-}
-
-.s-my-xs {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.s-mx-xs {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.s-ma-sm {
-  margin: 12px;
-}
-
-.s-mt-sm {
-  margin-top: 12px;
-}
-
-.s-mb-sm {
-  margin-bottom: 12px;
-}
-
 .s-mr-sm {
-  margin-right: 12px;
-}
-
-.s-ml-sm {
-  margin-left: 12px;
-}
-
-.s-my-sm {
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
-
-.s-mx-sm {
-  margin-left: 12px;
-  margin-right: 12px;
-}
-
-.s-ma-md {
-  margin: 18px;
-}
-
-.s-mt-md {
-  margin-top: 18px;
-}
-
-.s-mb-md {
-  margin-bottom: 18px;
-}
-
-.s-mr-md {
-  margin-right: 18px;
-}
-
-.s-ml-md {
-  margin-left: 18px;
-}
-
-.s-my-md {
-  margin-top: 18px;
-  margin-bottom: 18px;
-}
-
-.s-mx-md {
-  margin-left: 18px;
-  margin-right: 18px;
-}
-
-.s-ma-lg {
-  margin: 20px;
-}
-
-.s-mt-lg {
-  margin-top: 20px;
-}
-
-.s-mb-lg {
-  margin-bottom: 20px;
+  margin-right: 12px !important;
 }
 
 .s-mr-lg {
   margin-right: 20px !important; // rfid issue-history
 }
 
-.s-ml-lg {
-  margin-left: 20px;
-}
-
-.s-my-lg {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.s-mx-lg {
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
-.s-ma-xl {
-  margin: 22px;
-}
-
-.s-mt-xl {
-  margin-top: 22px;
-}
-
-.s-mb-xl {
-  margin-bottom: 22px;
-}
-
-.s-mr-xl {
-  margin-right: 22px;
-}
-
-.s-ml-xl {
-  margin-left: 22px;
-}
-
-.s-my-xl {
-  margin-top: 22px;
-  margin-bottom: 22px;
-}
-
-.s-mx-xl {
-  margin-left: 22px;
-  margin-right: 22px;
-}
-
-.s-ma-xxl {
-  margin: 30px;
-}
-
-.s-mt-xxl {
-  margin-top: 30px;
-}
-
-.s-mb-xxl {
-  margin-bottom: 30px;
-}
-
-.s-mr-xxl {
-  margin-right: 30px;
-}
-
-.s-ml-xxl {
-  margin-left: 30px;
-}
-
-.s-my-xxl {
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
-.s-mx-xxl {
-  margin-left: 30px;
-  margin-right: 30px;
-}
-
-.s-ma-xxl {
-  margin: 30px;
-}
-
-.s-mt-xxl {
-  margin-top: 30px;
-}
-
-.s-mb-xxl {
-  margin-bottom: 30px;
-}
-
-.s-mr-xxl {
-  margin-right: 30px;
-}
-
-.s-ml-xxl {
-  margin-left: 30px;
-}
-
-.s-my-xxl {
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
-.s-mx-xxl {
-  margin-left: 30px;
-  margin-right: 30px;
-}
-
 $colorList: (
   'primary': '#051d36',
   'secondary': '#555555',
@@ -604,7 +204,6 @@ $colorList: (
 $positions: 'top', 'right', 'left', 'bottom';
 
 @mixin position($name, $color) {
-
   @each $posi in $positions {
     .s-border-#{$posi}-#{$name} {
       border-#{$posi}: 1px solid unquote($color);
@@ -652,170 +251,56 @@ $color in $colorList {
 // QUASAR
 // rounded-borders - border-radius: 2px
 
-.s-border-radius-xxs {
-  border-radius: 4px !important;
-}
-
-.s-border-radius-xs {
-  border-radius: 6px;
-}
-
-.s-border-radius-sm {
-  border-radius: 8px !important;
-  // rfid issue-history 에 필요
-}
-
-.s-border-radius-md {
-  border-radius: 10px;
-}
-
-.s-border-radius-lg {
-  border-radius: 12px;
-}
-
-.s-border-radius-xl {
-  border-radius: 14px;
-}
-
-.s-border-radius-xxl {
-  border-radius: 16px;
-}
-
-.s-border-radius-chip {
-  border-radius: 40px;
-}
-
-.s-border-radius-left-rounded {
-  border-radius: 2px 0 0 2px;
-}
-
-.s-border-radius-left-xxs {
-  border-radius: 4px 0 0 4px;
-}
-
-.s-border-radius-left-xs {
-  border-radius: 6px 0 0 6px;
-}
-
-.s-border-radius-left-sm {
-  border-radius: 8px 0 0 8px;
-}
-
-.s-border-radius-left-md {
-  border-radius: 10px 0 0 10px;
-}
-
-.s-border-radius-left-lg {
-  border-radius: 12px 0 0 12px;
-}
-
-.s-border-radius-left-xl {
-  border-radius: 14px 0 0 14px;
-}
-
-.s-border-radius-left-xxl {
-  border-radius: 16px 0 0 16px;
-}
-
-.s-border-radius-right-rounded {
-  border-radius: 0 2px 2px 0;
-}
-
-.s-border-radius-right-xxs {
-  border-radius: 0 4px 4px 0;
-}
-
-.s-border-radius-right-xs {
-  border-radius: 0 6px 6px 0;
-}
-
-.s-border-radius-right-sm {
-  border-radius: 0 8px 8px 0;
-}
-
-.s-border-radius-right-md {
-  border-radius: 0 10px 10px 0;
-}
-
-.s-border-radius-right-lg {
-  border-radius: 0 12px 12px 0;
-}
-
-.s-border-radius-right-xl {
-  border-radius: 0 14px 14px 0;
-}
-
-.s-border-radius-right-xxl {
-  border-radius: 0 16px 16px 0;
-}
-
-// QUASAR
-// no-border-radius - border-radius: none;
-
-.s-border-radius-top-rounded {
-  border-radius: 2px 2px 0 0;
-}
-
-.s-border-radius-top-xxs {
-  border-radius: 4px 4px 0 0;
-}
-
-.s-border-radius-top-xs {
-  border-radius: 6px 6px 0 0;
-}
-
-.s-border-radius-top-sm {
-  border-radius: 8px 8px 0 0;
-}
-
-.s-border-radius-top-md {
-  border-radius: 10px 10px 0 0;
-}
-
-.s-border-radius-top-lg {
-  border-radius: 12px 12px 0 0;
-}
-
-.s-border-radius-top-xl {
-  border-radius: 14px 14px 0 0;
-}
-
-.s-border-radius-top-xxl {
-  border-radius: 16px 16px 0 0;
-}
-
-.s-border-radius-bottom-rounded {
-  border-radius: 0 0 2px 2px;
-}
+// 반복되는 border-radius 값 설정을 위한 맵
+$radius-sizes: (
+  "xxs": 4,
+  "xs": 6,
+  "sm": 8,
+  "md": 10,
+  "lg": 12,
+  "xl": 14,
+  "xxl": 16,
+  "chip": 40,
+  "rounded": 2,
+);
 
-.s-border-radius-bottom-xxs {
-  border-radius: 0 0 4px 4px;
+// 일반적인 border-radius
+@each $name, $size in $radius-sizes {
+  .s-border-radius-#{$name} {
+    border-radius: #{$size}px !important;
+  }
 }
 
-.s-border-radius-bottom-xs {
-  border-radius: 0 0 6px 6px;
+// 왼쪽만 둥글게 처리
+@each $name, $size in $radius-sizes {
+  .s-border-radius-left-#{$name} {
+    border-radius: #{$size}px 0 0 #{$size}px;
+  }
 }
 
-.s-border-radius-bottom-sm {
-  border-radius: 0 0 8px 8px;
+// 오른쪽만 둥글게 처리
+@each $name, $size in $radius-sizes {
+  .s-border-radius-right-#{$name} {
+    border-radius: 0 #{$size}px #{$size}px 0;
+  }
 }
 
-.s-border-radius-bottom-md {
-  border-radius: 0 0 10px 10px;
+// 상단만 둥글게 처리
+@each $name, $size in $radius-sizes {
+  .s-border-radius-top-#{$name} {
+    border-radius: #{$size}px #{$size}px 0 0;
+  }
 }
 
-.s-border-radius-bottom-lg {
-  border-radius: 0 0 12px 12px;
+// 하단만 둥글게 처리
+@each $name, $size in $radius-sizes {
+  .s-border-radius-bottom-#{$name} {
+    border-radius: 0 0 #{$size}px #{$size}px;
+  }
 }
 
-.s-border-radius-bottom-xl {
-  border-radius: 0 0 14px 14px;
-}
-
-.s-border-radius-bottom-xxl {
-  border-radius: 0 0 16px 16px;
-}
 
+// 특정 모서리의 radius 제거
 .s-border-top-left-radius-none {
   border-top-left-radius: 0;
 }
@@ -832,6 +317,11 @@ $color in $colorList {
   border-bottom-right-radius: 0;
 }
 
+// no-border-radius 처리 (Quasar framework 관련 주석 참고)
+.no-border-radius {
+  border-radius: 0;
+}
+
 /*********** font ***********/
 $fontSize: (
   '9': 9,
@@ -858,17 +348,46 @@ $fontWeight: (
 );
 
 @mixin fonts($size, $weight) {
-  font-size: $size + 'px';
+  font-size: #{$size}px;
   font-weight: $weight;
 }
 
-@each $sizeKey, $size in $fontSize {
-  .font-#{$sizeKey} {
-    @include fonts(#{$size}, 400);
-  }
-  @each $weightKey, $weight in $fontWeight {
+@each $sizeKey,
+$size in $fontSize {
+
+  @each $weightKey,
+  $weight in $fontWeight {
     .font-#{$sizeKey}-#{$weightKey} {
       @include fonts(#{$size}, #{$weight});
     }
   }
 }
+
+/***** gap *****/
+$sellmate-gap-sizes: (
+  '0': 0,
+  '4': 4,
+  '6': 6,
+  '8': 8,
+  '10': 10,
+  '12': 12,
+  '16': 16,
+  '18': 18,
+  '20': 20,
+  '22': 22,
+  '24': 24,
+  '30': 30,
+  '48': 48,
+);
+
+@each $name, $size in $sellmate-gap-sizes {
+  .s-gap-x-#{$name} {
+    column-gap: #{$size}px;
+  }
+  .s-gap-y-#{$name} {
+    row-gap: #{$size}px;
+  }
+  .s-gap-#{$name} {
+    gap: #{$size}px
+  }
+}