@appscode/design-system 2.0.6-alpha.1 → 2.0.6

package/{vue-components/styles/base → base}/utilities/_grid.scss

@@ -22,7 +22,7 @@
   grid-column: auto;
 }
 
-@for $i from 0 through 32 {
+@for $i from 0 through 30 {
   .gap-#{$i} {
     gap: #{$i}px;
   }

package/components/_ac-modal.scss

@@ -0,0 +1,212 @@
+// // modal start
+// .ac-modal {
+//   // position: relative;
+//   min-height: 100vh;
+//   position: fixed;
+//   width: 100%;
+//   left: 0;
+//   top: 0;
+//   z-index: 9999;
+
+//   &:after {
+//     position: absolute;
+//     content: "";
+//     left: 0;
+//     top: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: $black-5;
+//     z-index: -1;
+//     opacity: 0.5;
+//   }
+
+//   &.is-small {
+//     .ac-modal-inner {
+//       border-radius: 4px;
+//       width: 446px;
+//     }
+//   }
+
+//   &.is-normal {
+//     .ac-modal-inner {
+//       width: 518px;
+//     }
+//   }
+
+//   &.is-medium {
+//     .ac-modal-inner {
+//       width: 800px;
+//     }
+//   }
+
+//   &.is-large {
+//     .ac-modal-inner {
+//       width: 1000px !important;
+//     }
+//   }
+
+//   .ac-modal-inner {
+//     margin: 0 auto;
+//     background-color: $white-100;
+//     border-radius: 4px;
+//     overflow: hidden;
+//     box-shadow: 12px 26px 118px rgba(0, 0, 0, 0.16);
+
+//     .ac-modal-header {
+//       background-color: $white-100;
+//       padding: 10px 20px;
+//       display: flex;
+//       align-items: center;
+//       justify-content: space-between;
+//       border: 1px solid $primary-90;
+
+//       h6 {
+//         color: $primary-10;
+//       }
+
+//       .ms-close-button {
+//         button {
+//           cursor: pointer;
+//           padding: 3px 5px;
+//           color: $primary-10;
+//         }
+//       }
+//     }
+
+//     .ac-modal-body {
+//       padding: 20px;
+//       max-height: calc(100vh - 230px);
+//       overflow-y: auto;
+
+//       .ac-modal-content {
+//         img {
+//           // width: 100%;
+//           height: auto;
+//         }
+
+//         .action-message {
+//           p {
+//             font-size: 16px;
+//             margin-bottom: 10px;
+
+//             &:last-child {
+//               margin-bottom: 0;
+//             }
+
+//             &.is-description {
+//               font-family: $font-heading;
+//               font-weight: 400;
+//               color: $primary-20;
+
+//               strong {
+//                 font-weight: 500;
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+
+//     .ac-modal-footer {
+//       border-top: 1px solid $primary-90;
+//       padding: 10px 20px;
+//     }
+//   }
+// }
+
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {
+//   .ac-modal {
+//     &.is-small {
+//       .ac-modal-inner {
+//         width: 266px;
+//       }
+//     }
+
+//     &.is-normal {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     &.is-medium {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     &.is-large {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     .action-message.pt-35.pb-35 {
+//       padding-top: 20px !important;
+//       padding-bottom: 20px !important;
+//     }
+//   }
+// }
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {
+//   .ac-modal {
+//     &.is-small {
+//       .ac-modal-inner {
+//         width: 266px;
+//       }
+//     }
+
+//     &.is-normal {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     &.is-medium {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     &.is-large {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+//   }
+// }
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {
+//   .ac-modal {
+//     &.is-normal {
+//       .ac-modal-inner {
+//         width: calc(100% - 50px);
+//       }
+//     }
+
+//     &.is-medium {
+//       .ac-modal-inner {
+//         width: calc(100% - 50px);
+//       }
+//     }
+
+//     &.is-large {
+//       .ac-modal-inner {
+//         width: calc(100% - 50px);
+//       }
+//     }
+//   }
+// }
+
+// // Large devices (desktops, 992px and up)
+// @media (min-width: 992px) and (max-width: 1199.98px) {
+// }
+
+// // Extra large devices (large desktops, 1200px and up)
+// @media (min-width: 1200px) {
+// }

package/components/_ac-options.scss

@@ -0,0 +1,122 @@
+// .ac-options {
+//   position: relative;
+//   z-index: 9;
+
+//   &.is-horaizental {
+//     .option-dots {
+//       flex-direction: row;
+
+//       span {
+//         margin-bottom: 0;
+//         margin-right: 2px;
+//       }
+//     }
+//   }
+
+//   &.is-centered {
+//     .option-dots {
+//       align-items: center;
+//     }
+
+//     .options-items {
+//       left: 50%;
+//     }
+//   }
+
+//   &.is-right {
+//     .option-dots {
+//       align-items: flex-end;
+//       padding: 0 10px;
+//       margin-right: -10px;
+//     }
+
+//     .options-items {
+//       right: 0px;
+//     }
+//   }
+
+//   .option-dots {
+//     display: flex;
+//     flex-direction: column;
+//     cursor: pointer;
+//     align-items: flex-start;
+//     border: none;
+//     background-color: transparent;
+//     transition: 0.3 ease-in-out;
+
+//     &:hover {
+//       color: $primary;
+//     }
+
+//     span {
+//       width: 4px;
+//       height: 4px;
+//       background-color: $primary-20;
+//       border-radius: 50%;
+//       margin-bottom: 1px;
+//     }
+//   }
+
+//   .options-items {
+//     border-radius: 4px;
+//     position: absolute;
+//     z-index: 99;
+//     background-color: $white-100;
+//     min-width: 160px;
+//     top: 30px;
+//     padding: 5px 0;
+//     border: 1px solid $primary-90;
+
+//     li {
+//       .list-button {
+//         width: 100%;
+//         background-color: transparent;
+//         border: none;
+//         cursor: pointer;
+//         font-weight: 400;
+//         text-align: left;
+//         color: $primary-20;
+//         font-size: 13px;
+//         padding: 10px 30px;
+//         display: block;
+
+//         &:hover {
+//           background-color: $black-60;
+//           color: $primary;
+//         }
+
+//         span {
+//           background-color: transparent;
+
+//           &.icon {
+//             margin-right: 5px;
+//           }
+//         }
+//       }
+
+//       a {
+//         font-size: 13px;
+//         padding: 7px 15px;
+//         display: block;
+//         text-decoration: none !important;
+//         color: $primary-10 !important;
+//         border: none;
+
+//         &:hover {
+//           background-color: $black-60;
+//           color: $primary !important;
+//         }
+//       }
+//     }
+//   }
+// }
+
+// // dark theme start
+// .is-dark-theme {
+//   .ac-options {
+//     .options-items {
+//       --ac-white: var(--dark-bg-light);
+//     }
+//   }
+// }
+// // dark theme end