@appscode/design-system 2.0.19-alpha.5 → 2.0.19-alpha.7

package/vue-components/styles/components/_ac-alert-box.scss

@@ -1,205 +0,0 @@
-// .toast {
-//   box-shadow: $ac-shadow-sm;
-//   border: 1px solid $primary-90;
-//   width: 350px;
-
-//   .toast-header {
-//     padding: 8px 12px;
-//     border-bottom: 1px solid $primary-90;
-
-//     .button {
-//       &:hover {
-//         color: #000000;
-//       }
-//     }
-//   }
-
-//   .toast-body {
-//     padding: 8px 12px;
-//   }
-// }
-
-// // mixin for .ac-notification
-// @mixin acNotification($colorName) {
-//   background-color: scale-color($color: $colorName, $lightness: 80%);
-//   color: $white-100;
-//   border-color: $colorName;
-
-//   p {
-//     color: $colorName;
-
-//     a {
-//       color: $colorName;
-
-//       &:hover {
-//         color: $colorName;
-//         opacity: 0.8;
-//       }
-//     }
-//   }
-// }
-// @mixin acPrimaryNotification() {
-//   background-color: hsla(
-//     var(--hsl-hue),
-//     var(--hsl-saturation),
-//     var(--hsl-lightness),
-//     0.2
-//   );
-//   color: $white-100;
-//   border-color: $primary;
-
-//   p {
-//     color: $primary;
-
-//     a {
-//       color: $primary;
-
-//       &:hover {
-//         color: $primary;
-//         opacity: 0.8;
-//       }
-//     }
-//   }
-// }
-
-// // is-primary
-// .ac-notification.is-primary {
-//   @include acPrimaryNotification();
-// }
-
-// // is.info
-// .ac-notification.is-info {
-//   @include acNotification($info);
-// }
-
-// // is.success
-// .ac-notification.is-success {
-//   @include acNotification($success);
-// }
-
-// // is-danger
-// .ac-notification.is-danger {
-//   @include acNotification($danger);
-// }
-
-// // is-warning
-// .ac-notification.is-warning {
-//   @include acNotification($warning);
-// }
-
-// /*====================================
-// AC Toast
-// =====================================*/
-
-// .ac-toast {
-//   width: 350px;
-//   display: flex;
-//   align-items: center;
-//   justify-content: space-between;
-//   font-size: 13px;
-//   border-radius: 4px;
-//   position: relative;
-//   padding-right: 30px;
-//   margin-bottom: 10px;
-
-//   * {
-//     color: $white-100;
-//   }
-
-//   p {
-//     padding-left: 16px;
-
-//     i.fa {
-//       padding-right: 0 !important;
-//       margin-right: 4px;
-//     }
-//   }
-
-//   a {
-//     font-weight: 500;
-//     text-decoration: underline;
-//     padding: 0 15px;
-
-//     &:hover {
-//       color: $primary-90;
-//     }
-//   }
-
-//   button.close-button {
-//     border-radius: 0px;
-//     background-color: transparent;
-//     border: none;
-//     color: $white-100;
-//     position: absolute;
-//     right: 0;
-//     top: 0;
-//     padding: 5px;
-//     height: 100%;
-//     width: 30px;
-//     z-index: 1;
-//     cursor: pointer;
-//     border-left: 1px solid #dddddd;
-//   }
-// }
-
-// // mixin for .ac-toast
-// @mixin acToast($colorName) {
-//   background-color: $colorName;
-//   color: $white-100;
-//   border-color: $colorName;
-// }
-
-// // is-primary
-// .ac-toast.is-primary {
-//   @include acToast($primary);
-// }
-
-// // is-info
-// .ac-toast.is-info {
-//   @include acToast($info);
-// }
-
-// // is.success
-// .ac-toast.is-success {
-//   @include acToast($success);
-// }
-
-// // is-danger
-// .ac-toast.is-danger {
-//   @include acToast($danger);
-// }
-
-// // is-warning
-// .ac-toast.is-warning {
-//   @include acToast($warning);
-// }
-
-// // dark theme start
-// .is-dark-theme {
-//   .ac-notification.is-danger {
-//     background-color: $black-80;
-//   }
-// }
-// // dark theme end
-// /****************************************
-// Responsive Classes
-// *****************************************/
-// // Extra small devices (portrait phones, less than 576px)
-// @media (max-width: 575.98px) {
-// }
-
-// // Small devices (landscape phones, 576px and up)
-// @media (min-width: 576px) and (max-width: 767.98px) {
-// }
-
-// // Medium devices (tablets, 768px and up)
-// @media (min-width: 768px) and (max-width: 991.98px) {
-// }
-
-// // 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/vue-components/styles/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) {
-// }