@appscode/design-system 2.0.5 → 2.0.6-alpha.2

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