quasar-ui-sellmate-ui-kit 2.3.2 → 3.0.1

package/src/components/SButton.vue

@@ -1,206 +1,206 @@
-<template>
-  <q-btn
-    class="s-button"
-    no-caps
-    no-wrap
-    unelevated
-    :color="color"
-    :ripple="false"
-    :class="{
-      's-button-md': size === 'md',
-      's-button-sm': size === 'sm',
-      's-button-xs': size === 'xs',
-      'icon-with': $attrs.icon && $attrs.label,
-      'icon-only': $attrs.icon && !$attrs.label,
-      'no-hover': noHover,
-    }"
-  >
-    <template v-for="(_, slotName, index) in $slots" :key="index">
-      <slot :name="slotName"></slot>
-    </template>
-  </q-btn>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import { QBtn } from 'quasar';
-
-export default defineComponent({
-  name: 'SButton',
-  components: { QBtn },
-  props: {
-    size: {
-      type: String,
-      default: 'sm',
-    },
-    color: {
-      type: String,
-      default: 'Blue_B_Default',
-    },
-    noHover: {
-      type: Boolean,
-      default: false,
-    },
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-
-// TODO: hover 색 맞추기
-.s-button {
-  &.q-btn {
-    min-height: 0;
-    height: fit-content;
-    justify-content: center;
-    &.icon-with {
-      > .q-btn__content {
-        align-items: center;
-      }
-    }
-    &.icon-only {
-      padding: 5px;
-    }
-    > .q-btn__content {
-      height: 100%;
-      > span {
-        height: 100%;
-      }
-    }
-  }
-  &: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;
-        }
-      }
-    }
-  }
-
-  &.q-btn--outline {
-    &:hover {
-      &.q-focusable:focus,
-      &.q-manual-focusable--focused,
-      &.q-hoverable:hover {
-        > .q-focus-helper {
-          &:before {
-            opacity: 0;
-          }
-          &:after {
-            opacity: 0.55;
-          }
-        }
-      }
-    }
-  }
-}
-.s-button-xs {
-  &.q-btn {
-    height: 24px;
-    padding: $button-padding-xs;
-    font-weight: $default-font-weight;
-    font-size: $default-font;
-    line-height: $default-content-height;
-    min-width: 60px;
-    &.icon-with {
-      padding: $button-with-icon-padding-xs;
-      .q-icon {
-        font-size: $icon-size-sm;
-      }
-      .on-left {
-        margin-right: $between-margin-sm;
-      }
-    }
-    &.icon-only {
-      min-width: 24px;
-      min-height: 24px;
-      padding: 4px !important;
-      .q-icon {
-        font-size: $default-icon-size;
-      }
-    }
-    > .q-btn__content {
-      height: $default-content-height;
-    }
-  }
-}
-.s-button-sm {
-  &.q-btn {
-    height: 28px;
-    padding: $button-padding-sm;
-    font-weight: $default-font-weight;
-    font-size: $default-font;
-    line-height: $default-content-height;
-    min-width: 70px;
-    &.icon-with {
-      padding: $button-with-icon-padding-sm;
-      .q-icon {
-        font-size: $default-icon-size;
-      }
-      .on-left {
-        margin-right: $between-margin-sm;
-      }
-    }
-    &.icon-only {
-      min-width: 28px;
-      min-height: 28px;
-      padding: 6px !important;
-      .q-icon {
-        font-size: $default-icon-size;
-      }
-    }
-    > .q-btn__content {
-      height: $default-content-height;
-    }
-  }
-}
-.s-button-md {
-  padding: $button-padding-md;
-  font-weight: $default-font-weight;
-  font-size: $font-md;
-  line-height: $line-height-md;
-  min-width: 100px;
-  &.icon-with {
-    padding: $button-with-icon-padding-md;
-    .q-icon {
-      font-size: $icon-size;
-    }
-    .on-left {
-      margin-right: $between-margin-md;
-    }
-  }
-  &.icon-only {
-    min-width: 34px;
-    min-height: 34px;
-    padding: 5px !important ;
-    .q-icon {
-      font-size: $icon-size;
-    }
-  }
-  > .q-btn__content {
-    max-height: $line-height-md;
-  }
-}
-
-.s-button.q-btn--outline.disabled,
-.s-button.disabled {
-  background: $Grey_Lighten-3 !important;
-  opacity: 1 !important;
-  color: $Grey_Default !important;
-  border: none !important;
-  &:before {
-    border: 1px solid $Grey_Lighten-2;
-  }
-}
-</style>
+<template>
+  <q-btn
+    class="s-button"
+    no-caps
+    no-wrap
+    unelevated
+    :color="color"
+    :ripple="false"
+    :class="{
+      's-button-md': size === 'md',
+      's-button-sm': size === 'sm',
+      's-button-xs': size === 'xs',
+      'icon-with': $attrs.icon && $attrs.label,
+      'icon-only': $attrs.icon && !$attrs.label,
+      'no-hover': noHover,
+    }"
+  >
+    <template v-for="(_, slotName, index) in $slots" :key="index">
+      <slot :name="slotName"></slot>
+    </template>
+  </q-btn>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { QBtn } from 'quasar';
+
+export default defineComponent({
+  name: 'SButton',
+  components: { QBtn },
+  props: {
+    size: {
+      type: String,
+      default: 'sm',
+    },
+    color: {
+      type: String,
+      default: 'Blue_B_Default',
+    },
+    noHover: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+
+// TODO: hover 색 맞추기
+.s-button {
+  &.q-btn {
+    min-height: 0;
+    height: fit-content;
+    justify-content: center;
+    &.icon-with {
+      > .q-btn__content {
+        align-items: center;
+      }
+    }
+    &.icon-only {
+      padding: 5px;
+    }
+    > .q-btn__content {
+      height: 100%;
+      > span {
+        height: 100%;
+      }
+    }
+  }
+  &: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;
+        }
+      }
+    }
+  }
+
+  &.q-btn--outline {
+    &:hover {
+      &.q-focusable:focus,
+      &.q-manual-focusable--focused,
+      &.q-hoverable:hover {
+        > .q-focus-helper {
+          &:before {
+            opacity: 0;
+          }
+          &:after {
+            opacity: 0.55;
+          }
+        }
+      }
+    }
+  }
+}
+.s-button-xs {
+  &.q-btn {
+    height: 24px;
+    padding: $button-padding-xs;
+    font-weight: $default-font-weight;
+    font-size: $default-font;
+    line-height: $default-content-height;
+    min-width: 60px;
+    &.icon-with {
+      padding: $button-with-icon-padding-xs;
+      .q-icon {
+        font-size: $icon-size-sm;
+      }
+      .on-left {
+        margin-right: $between-margin-sm;
+      }
+    }
+    &.icon-only {
+      min-width: 24px;
+      min-height: 24px;
+      padding: 4px !important;
+      .q-icon {
+        font-size: $default-icon-size;
+      }
+    }
+    > .q-btn__content {
+      height: $default-content-height;
+    }
+  }
+}
+.s-button-sm {
+  &.q-btn {
+    height: 28px;
+    padding: $button-padding-sm;
+    font-weight: $default-font-weight;
+    font-size: $default-font;
+    line-height: $default-content-height;
+    min-width: 70px;
+    &.icon-with {
+      padding: $button-with-icon-padding-sm;
+      .q-icon {
+        font-size: $default-icon-size;
+      }
+      .on-left {
+        margin-right: $between-margin-sm;
+      }
+    }
+    &.icon-only {
+      min-width: 28px;
+      min-height: 28px;
+      padding: 6px !important;
+      .q-icon {
+        font-size: $default-icon-size;
+      }
+    }
+    > .q-btn__content {
+      height: $default-content-height;
+    }
+  }
+}
+.s-button-md {
+  padding: $button-padding-md;
+  font-weight: $default-font-weight;
+  font-size: $font-md;
+  line-height: $line-height-md;
+  min-width: 100px;
+  &.icon-with {
+    padding: $button-with-icon-padding-md;
+    .q-icon {
+      font-size: $icon-size;
+    }
+    .on-left {
+      margin-right: $between-margin-md;
+    }
+  }
+  &.icon-only {
+    min-width: 34px;
+    min-height: 34px;
+    padding: 5px !important ;
+    .q-icon {
+      font-size: $icon-size;
+    }
+  }
+  > .q-btn__content {
+    max-height: $line-height-md;
+  }
+}
+
+.s-button.q-btn--outline.disabled,
+.s-button.disabled {
+  background: $Grey_Lighten-3 !important;
+  opacity: 1 !important;
+  color: $Grey_Default !important;
+  border: none !important;
+  &:before {
+    border: 1px solid $Grey_Lighten-2;
+  }
+}
+</style>

package/src/components/SButtonGroup.vue

@@ -1,41 +1,41 @@
-<template>
-  <q-btn-group
-    class="s-btn-group"
-    :class="{ 'no-hover': noHover }"
-    flat
-    unelevated
-  >
-    <slot></slot>
-  </q-btn-group>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import { QBtnGroup } from 'quasar';
-
-export default defineComponent({
-  name: 'SButtonGroup',
-  components: {
-    QBtnGroup,
-  },
-  props: {
-    noHover: {
-      type: Boolean,
-      default: false,
-    },
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-
-.s-btn-group {
-  .disabled {
-    border: none;
-    &::before {
-      border: 1px solid $Grey_Lighten-2;
-    }
-  }
-}
-</style>
+<template>
+  <q-btn-group
+    class="s-btn-group"
+    :class="{ 'no-hover': noHover }"
+    flat
+    unelevated
+  >
+    <slot></slot>
+  </q-btn-group>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { QBtnGroup } from 'quasar';
+
+export default defineComponent({
+  name: 'SButtonGroup',
+  components: {
+    QBtnGroup,
+  },
+  props: {
+    noHover: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+
+.s-btn-group {
+  .disabled {
+    border: none;
+    &::before {
+      border: 1px solid $Grey_Lighten-2;
+    }
+  }
+}
+</style>