@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.3

package/vue-components/v3/button/Button.vue

@@ -1,8 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  tooltip?: string;
+  isLoaderActive?: boolean;
+  disabled?: boolean;
+  iconClass?: string;
+  iconImage?: string;
+  iconImageWidth?: number;
+  modifierClasses?: string;
+  titleModifierClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  tooltip: undefined,
+  isLoaderActive: false,
+  disabled: false,
+  iconClass: "",
+  iconImage: "",
+  iconImageWidth: undefined,
+  modifierClasses: "is-primary",
+  titleModifierClass: "",
+});
+
+const emit = defineEmits(["click"]);
+
+const handleClick = (e: Event) => {
+  if (!props.disabled) emit("click", e);
+};
+</script>
+
 <template>
   <button
-    class="button ac-button is-extra-small"
+    class="button ac-button"
     :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
-    :disabled="disabled ? true : null"
+    :disabled="disabled ? true : undefined"
     @click="handleClick"
     :title="tooltip"
   >
@@ -20,59 +52,800 @@
   </button>
 </template>
 
-<script>
-import { defineComponent } from "vue";
-export default defineComponent({
-  props: {
-    // button title
-    title: {
-      type: String,
-      default: "",
-    },
-    tooltip: {
-      type: String,
-      defualt: undefined
-    },
-    // for loader
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
-    // for disability
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // for icon
-    iconClass: {
-      type: String,
-      default: "",
-    },
-    iconImage: {
-      type: String,
-      default: "",
-    },
-    iconImageWidth: {
-      type: Number,
-      default: undefined,
-    },
-    // modifier class
-    modifierClasses: {
-      type: String,
-      default: "is-primary",
-    },
-    titleModifierClass: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["click"],
-
-  methods: {
-    handleClick(e) {
-      if (!this.disabled) this.$emit("click", e);
-    },
-  },
-});
-</script>
+<style lang="scss" scoped>
+.button {
+  &.ac-button {
+    padding: 8px 18px;
+    font-weight: 500;
+    line-height: 1;
+    &.is-square {
+      border: 1px solid $primary-95;
+    }
+    &.is-small {
+      padding: 4px 9px;
+    }
+  }
+}
+button.is-primary {
+  background-color: $ac-primary;
+}
+// .button {
+//   transition: 86ms ease-in-out;
+
+//   // ac-button
+//   &.ac-button {
+//     border-color: $primary;
+//     border-radius: 4px;
+//     font-size: 14px;
+//     font-family: $font-paragraph;
+//     letter-spacing: 0.2px;
+//     color: $primary;
+//     font-weight: 500;
+//     height: 36px;
+//     padding-left: 25px;
+//     padding-right: 25px;
+//     line-height: 1;
+//     &:focus-visible {
+//       outline: none;
+//     }
+
+//     &:hover {
+//       border-color: hsla(
+//         var(--hsl-hue),
+//         var(--hsl-saturation),
+//         calc(var(--hsl-lightness) - 9%),
+//         1
+//       );
+//       color: hsla(
+//         var(--hsl-hue),
+//         var(--hsl-saturation),
+//         calc(var(--hsl-lightness) - 9%),
+//         1
+//       );
+//     }
+
+//     &.underline-button {
+//       text-decoration-line: underline;
+//       border: none;
+//       padding: 0;
+//       height: unset;
+//       letter-spacing: 1px;
+
+//       &.is-primary {
+//         color: $primary;
+//         background-color: transparent;
+
+//         &:hover {
+//           background-color: unset;
+//         }
+//       }
+//     }
+
+//     &.is-disabled {
+//       opacity: 0.5 !important;
+//     }
+
+//     &.is-rounded {
+//       border-radius: 9999px;
+//     }
+
+//     .ac-icon {
+//       margin-left: 25px;
+//       background-color: $white-100;
+//       color: $primary;
+//       padding: 2px 6px;
+//       border-radius: 4px;
+//       width: 20px;
+//       height: 20px;
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       font-size: 12px;
+//     }
+
+//     &.is-small {
+//       height: 36px;
+//       font-size: 13px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       padding-left: 25px;
+//       padding-right: 25px;
+//     }
+
+//     &.is-extra-small {
+//       height: 32px;
+//       font-size: 12px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       padding-left: 20px;
+//       padding-right: 20px;
+//     }
+
+//     &.is-tiny {
+//       height: 28px;
+//       font-size: 11px;
+//       letter-spacing: 0px;
+//       font-weight: 400;
+//       padding-left: 15px;
+//       padding-right: 15px;
+//       line-height: 1;
+//     }
+//     &.is-extra-tiny {
+//       height: 22px;
+//       font-size: 11px;
+//       letter-spacing: 0px;
+//       font-weight: 400;
+//       padding-left: 10px;
+//       padding-right: 10px;
+//       line-height: 1;
+//     }
+//     &.is-normal {
+//       height: 45px;
+//       font-size: 15px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       padding-left: 25px;
+//       padding-right: 25px;
+//     }
+
+//     &.is-medium {
+//       height: 58px;
+//       font-size: 18px;
+//       padding-left: 45px;
+//       padding-right: 45px;
+//     }
+
+//     &.is-large {
+//       height: 48px;
+//       font-size: 16px;
+//       padding-left: 45px;
+//       padding-right: 45px;
+//     }
+
+//     &.is-square {
+//       width: 52px;
+//       height: 52px;
+//       padding: 0;
+//       &:hover {
+//         svg {
+//           color: $white-100;
+//         }
+//       }
+//       &.is-gray {
+//         background-color: $primary-90;
+//         color: $black-80;
+//         border-color: transparent;
+
+//         img {
+//           width: 16px;
+//         }
+
+//         i.fa {
+//           font-size: 18px;
+//           color: $black-80;
+//         }
+
+//         &:hover {
+//           background-color: $black-80;
+//         }
+//       }
+
+//       &.is-outlined-gray {
+//         border: 1px solid $primary-90;
+//         font-size: 15px;
+//       }
+
+//       &.is-transparent {
+//         background-color: transparent;
+//         color: $black-40;
+
+//         &:hover {
+//           background-color: $white-100-lighter;
+//           color: $ac-black;
+//         }
+
+//         &:focus {
+//           background-color: $white-100-lighter;
+//           color: $ac-black;
+//         }
+//       }
+
+//       &.transparent-bg {
+//         background-color: transparent;
+//         border: 1px solid $ac-label-text;
+
+//         img {
+//           &:hover {
+//             filter: brightness(1) !important;
+//           }
+//         }
+//       }
+
+//       &.is-normal {
+//         height: 45px;
+//         width: 45px;
+//       }
+
+//       &.is-small {
+//         width: 36px;
+//         height: 36px;
+//         font-size: 15px;
+//       }
+//       &.is-extra-small {
+//         width: 32px;
+//         height: 32px;
+//         font-size: 14px;
+//       }
+//       &.is-tinny {
+//         width: 25px;
+//         height: 25px;
+//         font-size: 12px;
+
+//         i.fa {
+//           font-size: 13px;
+//         }
+//       }
+//     }
+
+//     &.is-transparent {
+//       padding: 0;
+//       height: auto;
+//       border: none;
+//       font-size: 14px;
+//       font-weight: 500;
+//       background-color: transparent;
+//       color: $primary-10;
+
+//       &.is-primary {
+//         background-color: transparent;
+//         color: $primary;
+
+//         &:hover {
+//           background-color: transparent;
+//           color: $primary;
+//         }
+//       }
+
+//       &.is-danger {
+//         background-color: transparent;
+//         color: $danger;
+
+//         &:hover {
+//           background-color: transparent;
+//           color: $danger;
+//         }
+//       }
+
+//       &.is-small {
+//         letter-spacing: 0px;
+//         font-size: 13px;
+//       }
+
+//       &:focus {
+//         box-shadow: none;
+//         outline: none;
+//       }
+//     }
+
+//     &.is-white {
+//       background-color: $white-100;
+//       border: none;
+//     }
+
+//     &.is-light {
+//       background-color: $primary-90;
+//       border: none;
+
+//       &:hover {
+//         background-color: darken(#e7e7e7, 9);
+//       }
+//     }
+
+//     &.is-dark {
+//       background-color: $black-30;
+//       border: none;
+//       color: $white-100;
+
+//       &:hover {
+//         background-color: $primary-20;
+//       }
+//     }
+
+//     &.is-black {
+//       background-color: $primary-10;
+//       border: none;
+//       color: $white-100;
+
+//       &:hover {
+//         background-color: hsla(0, 0, calc(var(--hsl-lightness) - 9%), 1);
+//       }
+//     }
+
+//     &.is-text {
+//       background-color: $white-100;
+//       border: none;
+
+//       &:hover {
+//         box-shadow: none;
+//         box-shadow: none;
+//         color: hsla(
+//           var(--hsl-hue),
+//           var(--hsl-saturation),
+//           calc(var(--hsl-lightness) - 10%),
+//           1
+//         );
+//       }
+
+//       &:focus {
+//         box-shadow: none;
+//         box-shadow: none;
+//         color: hsla(
+//           var(--hsl-hue),
+//           var(--hsl-saturation),
+//           calc(var(--hsl-lightness) - 10%),
+//           1
+//         );
+//       }
+//     }
+
+//     &.is-static {
+//       border: none;
+//       background-color: $primary-90;
+//       color: $white-100;
+//     }
+
+//     // ac-button from mixin
+//     &.is-primary {
+//       @include ac-button($primary);
+//     }
+
+//     &.is-link {
+//       @include ac-button($info);
+//     }
+
+//     &.is-info {
+//       @include ac-button($info);
+//     }
+
+//     &.is-success {
+//       @include ac-button($success);
+//     }
+
+//     &.is-warning {
+//       @include ac-button($warning);
+//     }
+
+//     &.is-danger {
+//       @include ac-button($danger);
+//     }
+
+//     &.is-green {
+//       @include ac-button($success);
+//     }
+//   }
+
+//   // play button
+//   &.ac-play-button {
+//     width: 60px;
+//     height: 60px;
+//     background-color: transparent;
+//     transition: 0.3s ease-in-out;
+//     border: 2px solid $black-30;
+//     color: $black-30;
+
+//     i.fa {
+//       padding-left: 5px;
+//     }
+
+//     // ac-button from mixin
+//     &.is-primary {
+//       @include ac-play-button($primary);
+//     }
+
+//     &.is-link {
+//       @include ac-play-button($info);
+//     }
+
+//     &.is-info {
+//       @include ac-play-button($info);
+//     }
+
+//     &.is-success {
+//       @include ac-play-button($success);
+//     }
+
+//     &.is-warning {
+//       @include ac-play-button($warning);
+//     }
+
+//     &.is-danger {
+//       @include ac-play-button($danger);
+//     }
+
+//     &.is-large {
+//       width: auto;
+//       display: inline-block;
+//       padding: 0 25px 0 4px;
+//       height: 53px;
+//       border: 1px solid $primary;
+
+//       .ac-play {
+//         width: 44px;
+//         height: 44px;
+//         font-size: 16px;
+//         line-height: 44px;
+//         display: inline-block;
+//         border: 1px solid $primary;
+//         border-radius: 50%;
+//         margin-right: 10px;
+//       }
+
+//       span {
+//         font-size: 16px;
+//         font-weight: 600;
+//         color: $primary;
+//       }
+//     }
+//   }
+// }
+
+// .ac-play-button-wrapper {
+//   display: flex;
+//   align-items: center;
+
+//   .ac-play-button {
+//     height: 52px;
+//     width: 52px;
+//     margin-bottom: 0;
+//     margin-right: 10px;
+//     background-color: $primary;
+
+//     i.fa {
+//       color: $white-100;
+//     }
+//   }
+
+//   p {
+//     font-size: 16px;
+//     font-weight: 600;
+//     display: block;
+//     color: $primary-10;
+
+//     span {
+//       font-size: 12px;
+//       display: block;
+//       font-weight: 400;
+//     }
+//   }
+
+//   &:hover {
+//     p {
+//       color: $primary;
+//     }
+//   }
+// }
+
+// // counter button start
+// .ac-counter-button {
+//   background-color: transparent;
+//   border: 1px solid $ac-label-text;
+//   border-radius: 4px;
+//   height: 46px;
+//   overflow: hidden;
+//   display: inline-flex;
+//   align-items: center;
+
+//   .ac-counter {
+//     min-width: 50px;
+//     text-align: left;
+//     padding: 0;
+//     height: 100%;
+//     overflow: hidden;
+
+//     input[type="number"] {
+//       border: none;
+//       height: 100%;
+//       padding: 10px;
+//       font-size: 15px;
+//       font-weight: 500;
+//       color: $primary-20;
+//       background-color: transparent;
+//       width: 100%;
+//       -moz-appearance: textfield;
+
+//       /* Chrome, Safari, Edge, Opera */
+//       &::-webkit-outer-spin-button,
+//       &::-webkit-inner-spin-button {
+//         -webkit-appearance: none;
+//         margin: 0;
+//       }
+
+//       &:focus {
+//         outline: none;
+//         background-color: $white-100;
+//       }
+//     }
+//   }
+
+//   // .ac-counter-button .ac-counter {
+//   //   padding: 0;
+//   //   height: 100%;
+//   // }
+
+//   .ac-counter-arrow-wrapper {
+//     height: 100%;
+//     color: $primary-10;
+//     border-left: 1px solid $ac-label-text;
+
+//     .ac-counter-arrow {
+//       background-color: transparent;
+//       border: none;
+//       cursor: pointer;
+//       color: $ac-label-text;
+//       height: 23px;
+
+//       &:hover {
+//         color: $primary-10;
+//       }
+
+//       &:first-child {
+//         border-bottom: 1px solid $ac-label-text;
+//       }
+//     }
+//   }
+// }
+
+// // counter button end
+
+// // up down button start
+// .up-down-buttons {
+//   border-radius: 4px;
+//   overflow: hidden;
+//   margin-right: 10px;
+//   position: relative;
+//   z-index: 1;
+//   max-width: 44px;
+
+//   &.is-small {
+//     max-width: 36px;
+
+//     .up-down-button {
+//       width: 36px;
+//       height: 18px;
+//     }
+//   }
+
+//   .up-down-button {
+//     background-color: $primary-90;
+//     border: none;
+//     display: block;
+//     cursor: pointer;
+//     width: 44px;
+//     height: 22.5px;
+//     color: #a4a4a4;
+
+//     &.is-info {
+//       background-color: $primary;
+//       color: $white-100;
+//       transition: 0.3s;
+//     }
+
+//     &:disabled {
+//       cursor: not-allowed;
+//       opacity: 0.8;
+//     }
+//   }
+// }
+
+// // up down button end
+
+// .ac-options:not(.list-button) {
+//   button {
+//     display: flex;
+//     flex-direction: column;
+
+//     span {
+//       width: 5px;
+//       height: 5px;
+//       border-radius: 50%;
+//       background-color: $primary-20;
+//       margin-bottom: 3px;
+
+//       &:last-child {
+//         margin-bottom: 0;
+//       }
+//     }
+//   }
+// }
+
+// // dark theme start
+// .is-dark-theme {
+//   .button.ac-button.is-primary.is-light {
+//     background-color: $primary;
+//     color: $white-100;
+//     &:hover {
+//       opacity: 0.8;
+//     }
+//   }
+//   .button.ac-button.is-danger.is-light {
+//     background-color: $danger;
+//     color: $white-100;
+//     &:hover {
+//       opacity: 0.8;
+//     }
+//   }
+//   .button.ac-button {
+//     --ac-white: #ffffff;
+//     &.is-white {
+//       --ac-white: #2e323c;
+//     }
+//   }
+//   .button.ac-button.is-text {
+//     background-color: transparent;
+//   }
+// }
+// // dark theme end
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {
+//   .button {
+//     &.ac-button {
+//       font-size: 14px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       height: 30px;
+//       padding-left: 20px;
+//       padding-right: 20px;
+
+//       &.is-medium {
+//         height: 38px;
+//         font-size: 15px;
+//       }
+
+//       &.is-large {
+//         height: 42px;
+//         font-size: 16px;
+//       }
+
+//       .ac-icon {
+//         padding: 3px;
+//         font-size: 10px;
+//       }
+//     }
+
+//     &.ac-play-button {
+//       width: 50px;
+//       height: 50px;
+//     }
+//   }
+
+//   .ac-counter-button {
+//     height: 42px;
+//   }
+// }
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {
+//   .button {
+//     &.ac-button {
+//       font-size: 14px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       height: 36px;
+//       padding-left: 30px;
+//       padding-right: 30px;
+
+//       &.is-medium {
+//         height: 38px;
+//         font-size: 15px;
+//       }
+
+//       &.is-large {
+//         height: 42px;
+//         font-size: 16px;
+//       }
+
+//       .ac-icon {
+//         padding: 3px;
+//         font-size: 10px;
+//       }
+//     }
+
+//     &.ac-play-button {
+//       width: 50px;
+//       height: 50px;
+//     }
+//   }
+
+//   .ac-counter-button {
+//     height: 42px;
+//   }
+// }
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {
+//   .button {
+//     &.ac-button {
+//       font-size: 14px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       height: 36px;
+//       padding-left: 30px;
+//       padding-right: 30px;
+
+//       &.is-small {
+//         letter-spacing: 0px;
+//         line-height: 1;
+//       }
+
+//       &.is-medium {
+//         height: 38px;
+//         font-size: 15px;
+//       }
+
+//       &.is-large {
+//         height: 42px;
+//         font-size: 16px;
+//       }
+
+//       .ac-icon {
+//         padding: 3px;
+//         font-size: 10px;
+//       }
+//     }
+
+//     &.ac-play-button {
+//       width: 50px;
+//       height: 50px;
+//     }
+//   }
+
+//   .ac-counter-button {
+//     height: 42px;
+//   }
+// }
+
+// // Large devices (desktops, 992px and up)
+// @media (min-width: 992px) and (max-width: 1199.98px) {
+//   .button {
+//     &.ac-button {
+//       font-size: 15px;
+//       letter-spacing: 0px;
+//       font-weight: 500;
+//       height: 38px;
+//       padding-left: 30px;
+//       padding-right: 30px;
+
+//       &.is-medium {
+//         height: 40px;
+//         font-size: 15px;
+//       }
+
+//       &.is-large {
+//         height: 44px;
+//         font-size: 16px;
+//       }
+
+//       .ac-icon {
+//         padding: 3px;
+//         font-size: 10px;
+//       }
+//     }
+
+//     &.ac-play-button {
+//       width: 50px;
+//       height: 50px;
+//     }
+//   }
+
+//   .ac-counter-button {
+//     height: 42px;
+//   }
+// }
+
+// // Extra large devices (large desktops, 1200px and up)
+// @media (min-width: 1200px) {
+// }
+</style>