@appscode/design-system 2.0.18 → 2.0.19-alpha.10

package/components/_buttons.scss

@@ -1,779 +0,0 @@
-// .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: $primary-90;
-//           color: $black-5;
-//         }
-
-//         &:focus {
-//           background-color: $primary-90;
-//           color: $black-5;
-//         }
-//       }
-
-//       &.transparent-bg {
-//         background-color: transparent;
-//         border: 1px solid $primary-10;
-
-//         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 $primary-10;
-//   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 $primary-10;
-
-//     .ac-counter-arrow {
-//       background-color: transparent;
-//       border: none;
-//       cursor: pointer;
-//       color: $primary-10;
-//       height: 23px;
-
-//       &:hover {
-//         color: $primary-10;
-//       }
-
-//       &:first-child {
-//         border-bottom: 1px solid $primary-10;
-//       }
-//     }
-//   }
-// }
-
-// // 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) {
-// }