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

package/src/components/SButtonToggle.vue

@@ -1,200 +1,200 @@
-<template>
-  <q-btn-toggle
-    v-model="btnValue"
-    @update:modelValue="
-      val => {
-        $emit('update:model-value', val);
-      }
-    "
-    no-caps
-    no-wrap
-    outline
-    unelevated
-    :ripple="false"
-    color="Grey_Lighten-2"
-    text-color="Grey_Lighten-2"
-    toggle-color="positive"
-    toggle-text-color="positive"
-    padding="8px 24px"
-    class="s-btn-toggle"
-    :class="size === 'md' ? 's-btn-toggle-md' : 's-btn-toggle-sm'"
-  />
-</template>
-
-<script>
-  import { ref, defineComponent, watch } from 'vue';
-  import { QBtnToggle } from 'quasar';
-
-  export default defineComponent({
-    name: 'SButtonToggle',
-    components: {
-      QBtnToggle,
-    },
-    props: {
-      modelValue: [Number, String, Object],
-      size: {
-        type: String,
-        default: 'sm',
-      },
-    },
-    setup(props) {
-      const btnValue = ref(props.modelValue);
-      watch(
-        () => props.modelValue,
-        newVal => {
-          btnValue.value = newVal;
-        },
-      );
-
-      return {
-        btnValue,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-btn-toggle {
-    .q-btn {
-      &:first-of-type {
-        border-radius: 4px 0 0 4px;
-      }
-
-      &:last-of-type {
-        border-radius: 0 4px 4px 0;
-      }
-
-      &:before {
-        border-left: 1px solid $Grey_Lighten-2 !important;
-      }
-
-      &:hover {
-        > .q-focus-helper {
-          background-color: $positive !important;
-          opacity: 1 !important;
-
-          &:before,
-          &:after {
-            background-color: $positive !important;
-            opacity: 1;
-          }
-        }
-
-        .q-btn__content {
-          > span {
-            color: white !important;
-          }
-        }
-
-        + .q-btn:not(.text-positive):before {
-          border-left: none !important;
-        }
-      }
-
-      &:not(:last-child) {
-        &:hover {
-          box-shadow: 1px 0 0 $positive !important;
-          transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-          z-index: 1;
-        }
-      }
-
-      .q-btn--active {
-        background: $positive !important;
-        color: white !important;
-
-        &:before {
-          border: 1px solid $positive !important;
-        }
-
-        .q-btn__content {
-          > span {
-            color: white !important;
-          }
-        }
-      }
-    }
-
-    .text-positive {
-      &:before {
-        border: 1px solid $positive !important;
-      }
-
-      &:not(:last-child) {
-        &:before {
-          border-right: none !important;
-        }
-
-        &.q-btn {
-          box-shadow: 1px 0 0 $positive !important;
-          z-index: 2;
-        }
-      }
-
-      & + .q-btn {
-        &:before {
-          border-left: none !important;
-        }
-      }
-
-      &.q-btn--active {
-        &:hover {
-          .q-btn__content {
-            > span {
-              color: white !important;
-            }
-          }
-        }
-      }
-
-      &:hover {
-        > .q-focus-helper {
-          background-color: $positive !important;
-          opacity: 1 !important;
-
-          &:before,
-          &:after {
-            background-color: $positive !important;
-            opacity: 1;
-          }
-        }
-
-        .q-btn__content {
-          > span {
-            color: white !important;
-          }
-        }
-      }
-    }
-  }
-
-  .s-btn-toggle-sm {
-    .q-btn {
-      padding: $button-padding-sm !important;
-
-      .q-btn__content {
-        > span {
-          line-height: $default-line-height;
-          font-size: $default-font !important;
-          font-weight: $default-font-weight;
-        }
-      }
-    }
-  }
-
-  .s-btn-toggle-md {
-    .q-btn {
-      padding: $button-padding-md !important;
-
-      .q-btn__content {
-        > span {
-          line-height: $line-height-md !important;
-          font-size: $font-md !important;
-          font-weight: $font-weight-md !important;
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <q-btn-toggle
+    v-model="btnValue"
+    @update:modelValue="
+      val => {
+        $emit('update:model-value', val);
+      }
+    "
+    no-caps
+    no-wrap
+    outline
+    unelevated
+    :ripple="false"
+    color="Grey_Lighten-2"
+    text-color="Grey_Lighten-2"
+    toggle-color="positive"
+    toggle-text-color="positive"
+    padding="8px 24px"
+    class="s-btn-toggle"
+    :class="size === 'md' ? 's-btn-toggle-md' : 's-btn-toggle-sm'"
+  />
+</template>
+
+<script>
+  import { ref, defineComponent, watch } from 'vue';
+  import { QBtnToggle } from 'quasar';
+
+  export default defineComponent({
+    name: 'SButtonToggle',
+    components: {
+      QBtnToggle,
+    },
+    props: {
+      modelValue: [Number, String, Object],
+      size: {
+        type: String,
+        default: 'sm',
+      },
+    },
+    setup(props) {
+      const btnValue = ref(props.modelValue);
+      watch(
+        () => props.modelValue,
+        newVal => {
+          btnValue.value = newVal;
+        },
+      );
+
+      return {
+        btnValue,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-btn-toggle {
+    .q-btn {
+      &:first-of-type {
+        border-radius: 4px 0 0 4px;
+      }
+
+      &:last-of-type {
+        border-radius: 0 4px 4px 0;
+      }
+
+      &:before {
+        border-left: 1px solid $Grey_Lighten-2 !important;
+      }
+
+      &:hover {
+        > .q-focus-helper {
+          background-color: $positive !important;
+          opacity: 1 !important;
+
+          &:before,
+          &:after {
+            background-color: $positive !important;
+            opacity: 1;
+          }
+        }
+
+        .q-btn__content {
+          > span {
+            color: white !important;
+          }
+        }
+
+        + .q-btn:not(.text-positive):before {
+          border-left: none !important;
+        }
+      }
+
+      &:not(:last-child) {
+        &:hover {
+          box-shadow: 1px 0 0 $positive !important;
+          transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+          z-index: 1;
+        }
+      }
+
+      .q-btn--active {
+        background: $positive !important;
+        color: white !important;
+
+        &:before {
+          border: 1px solid $positive !important;
+        }
+
+        .q-btn__content {
+          > span {
+            color: white !important;
+          }
+        }
+      }
+    }
+
+    .text-positive {
+      &:before {
+        border: 1px solid $positive !important;
+      }
+
+      &:not(:last-child) {
+        &:before {
+          border-right: none !important;
+        }
+
+        &.q-btn {
+          box-shadow: 1px 0 0 $positive !important;
+          z-index: 2;
+        }
+      }
+
+      & + .q-btn {
+        &:before {
+          border-left: none !important;
+        }
+      }
+
+      &.q-btn--active {
+        &:hover {
+          .q-btn__content {
+            > span {
+              color: white !important;
+            }
+          }
+        }
+      }
+
+      &:hover {
+        > .q-focus-helper {
+          background-color: $positive !important;
+          opacity: 1 !important;
+
+          &:before,
+          &:after {
+            background-color: $positive !important;
+            opacity: 1;
+          }
+        }
+
+        .q-btn__content {
+          > span {
+            color: white !important;
+          }
+        }
+      }
+    }
+  }
+
+  .s-btn-toggle-sm {
+    .q-btn {
+      padding: $button-padding-sm !important;
+
+      .q-btn__content {
+        > span {
+          line-height: $default-line-height;
+          font-size: $default-font !important;
+          font-weight: $default-font-weight;
+        }
+      }
+    }
+  }
+
+  .s-btn-toggle-md {
+    .q-btn {
+      padding: $button-padding-md !important;
+
+      .q-btn__content {
+        > span {
+          line-height: $line-height-md !important;
+          font-size: $font-md !important;
+          font-weight: $font-weight-md !important;
+        }
+      }
+    }
+  }
+</style>

package/src/components/SCaution.vue

@@ -1,102 +1,102 @@
-<template>
-  <q-banner
-    dense
-    rounded
-    class="text-Grey_Darken-4 col relative-position s-caution"
-    :class="{
-      's-caution__title': title,
-      's-caution__page bg-Caution_Bg': !useModal,
-      'bg-Red_Lighten-5': useModal,
-    }"
-  >
-    <div v-if="title" class="s-caution-title">{{ title }}</div>
-    <ul>
-      <slot />
-    </ul>
-    <q-icon
-      v-if="!useModal"
-      class="s-caution-icon"
-      size="240px"
-      :name="cautionOutlineIcon"
-    />
-  </q-banner>
-</template>
-<script>
-import { defineComponent } from 'vue';
-import { QBanner, QIcon } from 'quasar';
-import { cautionOutlineIcon } from '../assets/icons.js';
-
-export default defineComponent({
-  name: 'SCaution',
-  components: {
-    QBanner,
-    QIcon,
-  },
-  props: {
-    title: { type: String, default: '' },
-    useModal: { type: Boolean, default: false },
-  },
-  setup() {
-    return {
-      cautionOutlineIcon,
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-
-.s-caution {
-  padding: 20px 0;
-  border-radius: 4px;
-  overflow: hidden;
-  max: {
-    height: 100%;
-    width: 100%;
-  }
-  ul {
-    margin: 0;
-    padding: 0;
-    margin-left: $caution-margin-left;
-    li {
-      list-style: none;
-      font-size: $default-font;
-      line-height: $double-line-height;
-      &:before {
-        content: "-";
-        font-size: 14px;
-        line-height: 20px;
-        margin-right: 12px;
-      }
-    }
-  }
-  .s-caution-icon {
-    position: absolute;
-    right: -41px;
-    bottom: -34px;
-    color: $Caution_Icon;
-    opacity: 0.24;
-  }
-}
-.s-caution__page {
-  border: 1px solid $Red_Lighten-3;
-}
-.s-caution__title {
-  border-left: 8px solid $Red_Lighten-1;
-  .s-caution-title {
-    width: 100%;
-    height: 30px;
-    line-height: 30px;
-    color: $Red_Default;
-    font: {
-      size: 18px;
-      weight: 700;
-    }
-    margin: {
-      left: $caution-margin-left;
-      bottom: 16px;
-    }
-  }
-}
-</style>
+<template>
+  <q-banner
+    dense
+    rounded
+    class="text-Grey_Darken-4 col relative-position s-caution"
+    :class="{
+      's-caution__title': title,
+      's-caution__page bg-Caution_Bg': !useModal,
+      'bg-Red_Lighten-5': useModal,
+    }"
+  >
+    <div v-if="title" class="s-caution-title">{{ title }}</div>
+    <ul>
+      <slot />
+    </ul>
+    <q-icon
+      v-if="!useModal"
+      class="s-caution-icon"
+      size="240px"
+      :name="cautionOutlineIcon"
+    />
+  </q-banner>
+</template>
+<script>
+import { defineComponent } from 'vue';
+import { QBanner, QIcon } from 'quasar';
+import { cautionOutlineIcon } from '../assets/icons.js';
+
+export default defineComponent({
+  name: 'SCaution',
+  components: {
+    QBanner,
+    QIcon,
+  },
+  props: {
+    title: { type: String, default: '' },
+    useModal: { type: Boolean, default: false },
+  },
+  setup() {
+    return {
+      cautionOutlineIcon,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+
+.s-caution {
+  padding: 20px 0;
+  border-radius: 4px;
+  overflow: hidden;
+  max: {
+    height: 100%;
+    width: 100%;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    margin-left: $caution-margin-left;
+    li {
+      list-style: none;
+      font-size: $default-font;
+      line-height: $double-line-height;
+      &:before {
+        content: "-";
+        font-size: 14px;
+        line-height: 20px;
+        margin-right: 12px;
+      }
+    }
+  }
+  .s-caution-icon {
+    position: absolute;
+    right: -41px;
+    bottom: -34px;
+    color: $Caution_Icon;
+    opacity: 0.24;
+  }
+}
+.s-caution__page {
+  border: 1px solid $Red_Lighten-3;
+}
+.s-caution__title {
+  border-left: 8px solid $Red_Lighten-1;
+  .s-caution-title {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    color: $Red_Default;
+    font: {
+      size: 18px;
+      weight: 700;
+    }
+    margin: {
+      left: $caution-margin-left;
+      bottom: 16px;
+    }
+  }
+}
+</style>