dev

frontend/src/components/calc/button/index.vue

@@ -1,116 +1,120 @@
 <script lang="tsx">
-import { defineComponent, renderSlot } from "vue"
-import { RouterLink } from "vue-router"
+import { defineComponent, renderSlot } from 'vue'
+import { RouterLink } from 'vue-router'
 
 export default defineComponent({
-  name: "CalcButton",
+  name: 'CalcButton',
   props: {
     small: {
       type: Boolean,
-      default: false
+      default: false,
     },
     to: {
       type: String,
-      default: null
+      default: null,
     },
     class: {
       type: [String],
-      default: ""
+      default: '',
     },
     icon: {
-      type: String
+      type: String,
     },
     type: {
       type: String,
-      default: "primary"
+      default: 'primary',
     },
     disabled: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  emits: ["click"],
-  setup(props, { slots,emit }) {
+  emits: ['click'],
+  setup(props, { slots, emit }) {
     return () => {
       const proerpties = {
         to: props.to,
         class: {
           [props.class]: !!props.class,
-          "i-button cursor-pointer outline-none text-shadow": true,
-          "small": props.small,
-          [`icon-${props.icon}`]: !!props.icon
+          'i-button cursor-pointer outline-none text-shadow': true,
+          small: props.small,
+          [`icon-${props.icon}`]: !!props.icon,
         },
         onClick: (e: MouseEvent) => {
           if (props.to) {
             e.preventDefault()
           }
-          emit("click", e)
+          emit('click', e)
         },
-        disabled: props.disabled
+        disabled: props.disabled,
       }
-      const content = renderSlot(slots, "default")
-      return props.to ? <RouterLink {...proerpties}>{content}</RouterLink> : <button {...proerpties}>{content}</button>
+      const content = renderSlot(slots, 'default')
+      return props.to ? (
+        <RouterLink {...proerpties}>{content}</RouterLink>
+      ) : (
+        <button {...proerpties}>{content}</button>
+      )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss">
 .i-button {
-    min-width: 56px;
-    height: 24px;
-    // line-height: 20px;
+  min-width: 56px;
+  height: 24px;
+  // line-height: 20px;
 
-    // font-size: 12px;
+  // font-size: 12px;
+  color: #e9c556;
+  background: linear-gradient(#223768, #122438);
+  border: 1px solid #755f44;
+  border-radius: 2px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  transition: all 200ms ease-in-out;
+
+  &[class*='icon-'] {
+    min-width: 1px;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none !important;
+    transition: all 0.2s ease-in-out;
+  }
+
+  &:hover {
+    color: #fee97d;
+    background: linear-gradient(#2d4e9f, #153051);
+    //  border: 1px solid #e3c18a;
+  }
+
+  &:active {
     color: #e9c556;
-    background: linear-gradient(#223768, #122438);
-    border: 1px solid #755f44;
+    background: linear-gradient(#2d4e9f, #122438);
+    border: 1px solid #e3c18a;
+  }
+
+  &:disabled {
+    color: #696969;
+    background: linear-gradient(#353535, #1c1c1c);
+    border: 1px solid #414141;
     border-radius: 2px;
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    transition: all 200ms ease-in-out;
-
-    &[class*="icon-"] {
-      min-width: 1px;
-      width: 28px;
-      height: 28px;
-      padding: 0;
-      border: none !important;
-      transition: all 0.2s ease-in-out;
-    }
-
-    &:hover {
-      color: #fee97d;
-      background: linear-gradient(#2d4e9f, #153051);
-      //  border: 1px solid #e3c18a;
-    }
-
-    &:active {
-      color: #e9c556;
-      background: linear-gradient(#2d4e9f, #122438);
-      border: 1px solid #e3c18a;
-    }
-
-    &:disabled {
-      color: #696969;
-      background: linear-gradient(#353535, #1c1c1c);
-      border: 1px solid #414141;
-      border-radius: 2px;
-    }
-
-    &.small {
-      min-width: 28px;
-      height: 20px;
-      // line-height: 20px;
-      font-size: 12px;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
   }
 
-  .i-href {
-    display: block;
-    text-decoration: none;
+  &.small {
+    min-width: 28px;
+    height: 20px;
+    // line-height: 20px;
+    font-size: 12px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
+}
+
+.i-href {
+  display: block;
+  text-decoration: none;
+}
 </style>