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

package/src/css/default.scss

@@ -1,875 +1,875 @@
-/*********** spacing ***********/
-// QUASAR
-// q-@@-none - none
-// q-@@-xs - 4px
-// q-@@-sm - 8px
-// q-@@-md - 16px
-// q-@@-lg - 24px
-// q-@@-xl - 48px
-
-// SELLMATE
-// s-@@-xxs - 6px
-// s-@@-xs - 10px
-// s-@@-sm - 12px
-// s-@@-md - 18px
-// s-@@-lg - 20px
-// 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;
-}
-
-.s-pb-sm {
-  padding-bottom: 12px;
-}
-
-.s-pr-sm {
-  padding-right: 12px;
-}
-
-.s-pl-sm {
-  padding-left: 12px;
-}
-
-.s-py-sm {
-  padding-top: 12px !important;
-  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;
-}
-
-.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',
-  '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': '#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',
-  // 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) {
-
-  @each $posi in $positions {
-    .s-border-#{$posi}-#{$name} {
-      border-#{$posi}: 1px solid unquote($color);
-    }
-  }
-}
-
-@each $name,
-$color in $colorList {
-  .s-border-#{$name} {
-    border: 1px solid unquote($color);
-  }
-
-  @include position($name, $color);
-}
-
-@each $name,
-$color in $colorList {
-  .s-border-color-#{$name} {
-    border-color: unquote($color);
-  }
-
-  .text-#{$name} {
-    color: unquote($color);
-  }
-
-  .bg-#{$name} {
-    background-color: unquote($color);
-  }
-
-  @include position($name, $color);
-}
-
-// QUASAR
-// no-border - border: none;
-
-@each $position in $positions {
-  .s-border-#{$position}-none {
-    border-#{$position}: none !important;
-  }
-}
-
-
-/*********** border-radius ***********/
-// 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;
-}
-
-.s-border-radius-bottom-xxs {
-  border-radius: 0 0 4px 4px;
-}
-
-.s-border-radius-bottom-xs {
-  border-radius: 0 0 6px 6px;
-}
-
-.s-border-radius-bottom-sm {
-  border-radius: 0 0 8px 8px;
-}
-
-.s-border-radius-bottom-md {
-  border-radius: 0 0 10px 10px;
-}
-
-.s-border-radius-bottom-lg {
-  border-radius: 0 0 12px 12px;
-}
-
-.s-border-radius-bottom-xl {
-  border-radius: 0 0 14px 14px;
-}
-
-.s-border-radius-bottom-xxl {
-  border-radius: 0 0 16px 16px;
-}
-
-.s-border-top-left-radius-none {
-  border-top-left-radius: 0;
-}
-
-.s-border-top-right-radius-none {
-  border-top-right-radius: 0;
-}
-
-.s-border-bottom-left-radius-none {
-  border-bottom-left-radius: 0;
-}
-
-.s-border-bottom-right-radius-none {
-  border-bottom-right-radius: 0;
-}
-
-/*********** font ***********/
-$fontSize: (
-  '9': 9,
-  '10': 10,
-  '11': 11,
-  '12': 12,
-  '13': 13,
-  '14': 14,
-  '15': 15,
-  '16': 16,
-  '17': 17,
-  '18': 18,
-  '19': 19,
-  '20': 20,
-  '24': 24,
-  '40': 40,
-  '66': 66,
-);
-$fontWeight: (
-  '400': 400,
-  '500': 500,
-  '600': 600,
-  '700': 700,
-);
-
-@mixin fonts($size, $weight) {
-  font-size: $size + 'px';
-  font-weight: $weight;
-}
-
-@each $sizeKey, $size in $fontSize {
-  .font-#{$sizeKey} {
-    @include fonts(#{$size}, 400);
-  }
-  @each $weightKey, $weight in $fontWeight {
-    .font-#{$sizeKey}-#{$weightKey} {
-      @include fonts(#{$size}, #{$weight});
-    }
-  }
-}
+/*********** spacing ***********/
+// QUASAR
+// q-@@-none - none
+// q-@@-xs - 4px
+// q-@@-sm - 8px
+// q-@@-md - 16px
+// q-@@-lg - 24px
+// q-@@-xl - 48px
+
+// SELLMATE
+// s-@@-xxs - 6px
+// s-@@-xs - 10px
+// s-@@-sm - 12px
+// s-@@-md - 18px
+// s-@@-lg - 20px
+// 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;
+}
+
+.s-pb-sm {
+  padding-bottom: 12px;
+}
+
+.s-pr-sm {
+  padding-right: 12px;
+}
+
+.s-pl-sm {
+  padding-left: 12px;
+}
+
+.s-py-sm {
+  padding-top: 12px !important;
+  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;
+}
+
+.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',
+  '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': '#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',
+  // 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) {
+
+  @each $posi in $positions {
+    .s-border-#{$posi}-#{$name} {
+      border-#{$posi}: 1px solid unquote($color);
+    }
+  }
+}
+
+@each $name,
+$color in $colorList {
+  .s-border-#{$name} {
+    border: 1px solid unquote($color);
+  }
+
+  @include position($name, $color);
+}
+
+@each $name,
+$color in $colorList {
+  .s-border-color-#{$name} {
+    border-color: unquote($color);
+  }
+
+  .text-#{$name} {
+    color: unquote($color);
+  }
+
+  .bg-#{$name} {
+    background-color: unquote($color);
+  }
+
+  @include position($name, $color);
+}
+
+// QUASAR
+// no-border - border: none;
+
+@each $position in $positions {
+  .s-border-#{$position}-none {
+    border-#{$position}: none !important;
+  }
+}
+
+
+/*********** border-radius ***********/
+// 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;
+}
+
+.s-border-radius-bottom-xxs {
+  border-radius: 0 0 4px 4px;
+}
+
+.s-border-radius-bottom-xs {
+  border-radius: 0 0 6px 6px;
+}
+
+.s-border-radius-bottom-sm {
+  border-radius: 0 0 8px 8px;
+}
+
+.s-border-radius-bottom-md {
+  border-radius: 0 0 10px 10px;
+}
+
+.s-border-radius-bottom-lg {
+  border-radius: 0 0 12px 12px;
+}
+
+.s-border-radius-bottom-xl {
+  border-radius: 0 0 14px 14px;
+}
+
+.s-border-radius-bottom-xxl {
+  border-radius: 0 0 16px 16px;
+}
+
+.s-border-top-left-radius-none {
+  border-top-left-radius: 0;
+}
+
+.s-border-top-right-radius-none {
+  border-top-right-radius: 0;
+}
+
+.s-border-bottom-left-radius-none {
+  border-bottom-left-radius: 0;
+}
+
+.s-border-bottom-right-radius-none {
+  border-bottom-right-radius: 0;
+}
+
+/*********** font ***********/
+$fontSize: (
+  '9': 9,
+  '10': 10,
+  '11': 11,
+  '12': 12,
+  '13': 13,
+  '14': 14,
+  '15': 15,
+  '16': 16,
+  '17': 17,
+  '18': 18,
+  '19': 19,
+  '20': 20,
+  '24': 24,
+  '40': 40,
+  '66': 66,
+);
+$fontWeight: (
+  '400': 400,
+  '500': 500,
+  '600': 600,
+  '700': 700,
+);
+
+@mixin fonts($size, $weight) {
+  font-size: $size + 'px';
+  font-weight: $weight;
+}
+
+@each $sizeKey, $size in $fontSize {
+  .font-#{$sizeKey} {
+    @include fonts(#{$size}, 400);
+  }
+  @each $weightKey, $weight in $fontWeight {
+    .font-#{$sizeKey}-#{$weightKey} {
+      @include fonts(#{$size}, #{$weight});
+    }
+  }
+}