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

package/components/_ac-content-layout.scss

@@ -1,165 +0,0 @@
-// .ac-content-layout {
-//   background-color: transparent;
-//   padding: 0;
-//   border-radius: 0;
-//   height: 100%;
-//   border: none;
-
-//   &.style-2 {
-//     border: 1px solid $primary-90;
-//     box-shadow: none;
-//     padding: 0;
-//     border-radius: 4px;
-
-//     .ac-content-header {
-//       background-color: $primary-90;
-
-//       &.is-bg-white {
-//         .ac-cheader-left {
-//           .ac-content-title {
-//             h5 {
-//               font-size: 16px;
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     .ac-content {
-//       padding: 15px 20px;
-
-//       .ac-footer-action {
-//         margin-left: -20px;
-//         margin-right: -20px;
-//       }
-//     }
-//   }
-
-//   &.is-dark {
-//     background-color: $primary-5;
-
-//     .ac-content-header {
-//       &.drag-n-drop {
-//         padding: 15px 20px 0;
-//       }
-
-//       .ac-cheader-left {
-//         .ac-content-title {
-//           h3 {
-//             color: $white-100;
-//           }
-//         }
-//       }
-//     }
-//   }
-
-//   .ac-content-header {
-//     display: grid;
-//     grid-template-columns: auto auto;
-//     align-items: center;
-//     width: 100%;
-//     padding: 0 20px;
-//     min-height: 40px;
-//     grid-gap: 15px;
-
-//     &.is-bg-available {
-//       background-color: $table-header;
-//     }
-
-//     &.drag-n-drop {
-//       padding: 15px 20px 0;
-//     }
-
-//     .ac-cheader-left {
-//       .ac-content-title {
-//         h5 {
-//           line-height: 1;
-//         }
-
-//         p {
-//           margin-top: 0;
-//           font-size: 13px;
-//           color: $primary-10;
-//         }
-//       }
-//     }
-
-//     .ac-cheader-right {
-//       display: flex;
-//       justify-content: flex-end;
-//       align-items: center;
-//     }
-//   }
-// }
-
-// /****************************************
-// Responsive Classes
-// *****************************************/
-// // Extra small devices (portrait phones, less than 576px)
-// @media (max-width: 575.98px) {
-//   .ac-content-layout {
-//     .ac-content-header {
-//       grid-template-columns: 150px 530px;
-//       overflow-x: auto;
-
-//       .ac-cheader-left {
-//         .ac-content-title {
-//           h3 {
-//             font-size: 16px;
-//             line-height: 18px;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-// // Small devices (landscape phones, 576px and up)
-// @media (min-width: 576px) and (max-width: 767.98px) {
-//   .ac-content-layout {
-//     .ac-content-header {
-//       grid-template-columns: 150px 530px;
-//       overflow-x: auto;
-
-//       .ac-cheader-left {
-//         .ac-content-title {
-//           h3 {
-//             font-size: 16px;
-//             line-height: 18px;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-// // Medium devices (tablets, 768px and up)
-// @media (min-width: 768px) and (max-width: 991.98px) {
-//   .ac-content-layout {
-//     .ac-content-header {
-//       grid-template-columns: 150px 550px;
-//       overflow-x: auto;
-
-//       .ac-cheader-left {
-//         .ac-content-title {
-//           h3 {
-//             font-size: 16px;
-//             line-height: 18px;
-//           }
-
-//           p {
-//             font-size: 13px;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-// // 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-modal.scss

@@ -1,212 +0,0 @@
-// // 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

@@ -1,122 +0,0 @@
-// .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

package/components/_ac-select-box.scss

@@ -1,49 +0,0 @@
-.ac-select-box {
-  select {
-    background-color: $info-light;
-    border: 1px solid $primary-10;
-    font-size: 13px;
-    height: 42px;
-    padding-left: 20px;
-
-    option {
-      box-shadow: $ac-shadow-1;
-    }
-
-    &:hover {
-      border: 1px solid $black-80;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
-      border: 1px solid $primary;
-    }
-  }
-
-  &.is-small {
-    select {
-      height: 36px;
-      padding-left: 15px;
-    }
-
-    &.select:not(.is-multiple):not(.is-loading)::after {
-      top: 50%;
-      margin-top: 0px;
-    }
-  }
-
-  &.select:not(.is-multiple):not(.is-loading)::after {
-    border-color: $primary-10;
-  }
-}
-
-.is-dark-theme {
-  .select {
-    select {
-      background-color: $black-80;
-      color: $white-100;
-      border: 1px solid $primary-90;
-    }
-  }
-}