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

package/vue-components/v3/table/Table.vue

@@ -260,457 +260,5 @@ onUpdated(() => {
 </template>
 
 <style lang="scss">
-// INFO TABLE END
-
-// GENERAL TABLE START
-.table.ac-table {
-  background-color: transparent;
-  margin-bottom: 0;
-
-  thead {
-    background-color: $primary-95;
-    font-size: 13px;
-    line-height: initial;
-
-    tr {
-      border-bottom: 1px solid $primary-95;
-
-      th {
-        padding: 10px 20px;
-        color: $primary-5;
-        border: none;
-        font-weight: 500;
-        // background-color: $primary-97;
-        // text-transform: uppercase;
-        font-weight: 500;
-
-        &.sorting {
-          cursor: pointer;
-          position: relative;
-
-          &.sorting-asc {
-            &::before {
-              color: $primary-5;
-            }
-          }
-
-          &.sorting-desc {
-            &::after {
-              color: $primary-5;
-            }
-          }
-
-          &:after,
-          &::before {
-            position: absolute;
-            color: #808998;
-            top: 0.4em;
-            font-size: 13px;
-            font-weight: 1000;
-            display: block;
-          }
-
-          &:before {
-            right: 1em;
-            content: "\2191";
-          }
-
-          &:after {
-            right: 0.5em;
-            content: "\2193";
-          }
-        }
-      }
-    }
-  }
-
-  tbody {
-    &.is-selected {
-      transform: matrix(1, 0, 0, 1, 0, 0) !important;
-      box-shadow: inset 0 0 0 1px $primary;
-      border-radius: 4px;
-      border-bottom: none;
-      color: $black-5;
-    }
-
-    tr {
-      border-bottom: 1px solid $primary-90;
-      &.is-link {
-        cursor: pointer;
-      }
-      &.is-selected {
-        background-color: $primary-97 !important;
-        transform: matrix(1, 0, 0, 1, 0, 0) !important;
-        box-shadow: inset 0 0 0 1.2px $primary;
-        border-radius: 4px;
-        border-bottom: none;
-        color: $black-5;
-        transition: 0.3s ease-in-out;
-        .tag {
-          background-color: $primary-80;
-        }
-        &:hover {
-          background-color: $primary-95 !important;
-          transform: matrix(1, 0, 0, 1, 0, 0) !important;
-          box-shadow: inset 0 0 0 1.2px $primary !important;
-        }
-      }
-
-      &.is-hoverless {
-        box-shadow: none !important;
-        transform: none !important;
-        background-color: $white-100 !important;
-      }
-      td {
-        font-size: 13px;
-        padding: 5px 20px;
-        color: $primary-10;
-        border: none;
-
-        a:not(.tag a) {
-          color: $primary;
-          font-weight: 500 !important;
-          transition: 0.3s ease-in-out;
-          font-weight: 400;
-        }
-
-        .tags {
-          .tag {
-            a {
-              color: $primary;
-              transition: 0.3s ease-in-out;
-              font-weight: 500;
-
-              &:hover {
-                color: $primary-5;
-              }
-            }
-          }
-        }
-
-        &.is-danger {
-          color: $danger;
-        }
-
-        .image-with-status {
-          margin-right: 20px;
-          position: relative;
-          z-index: 1;
-          display: inline-flex;
-
-          &.is-danger {
-            background-color: $danger;
-          }
-
-          i.fa {
-            position: absolute;
-            background-color: $primary;
-            color: $white-100;
-            font-size: 11px;
-            width: 15px;
-            height: 15px;
-            text-align: center;
-            line-height: 15px;
-            border-radius: 50%;
-            right: -5px;
-            top: 5px;
-
-            &.fa-close {
-              background-color: $danger;
-            }
-          }
-
-          img {
-            width: 20px;
-            height: 20px;
-            object-fit: cover;
-            border-radius: 50%;
-          }
-        }
-
-        .collapsible-row {
-          max-height: 0;
-          overflow-y: hidden;
-
-          &.is-active {
-            max-height: 60vh;
-            overflow-y: overlay;
-            animation: expand 0.5s ease-in-out;
-          }
-
-          &.is-closed {
-            max-height: 0;
-            overflow-y: hidden;
-            animation: collapse 0.5s ease-in-out;
-          }
-        }
-
-        white-space: nowrap;
-      }
-
-      .options-items {
-        a:hover {
-          color: $white-100;
-          text-decoration: none;
-        }
-      }
-
-      transition: 0.3s ease-in-out;
-    }
-  }
-
-  .increase-width {
-    position: relative;
-    visibility: hidden;
-    width: 36px;
-
-    .increase-innner {
-      border-bottom: 1px solid $primary-90;
-      border-top: 1px solid $primary-90;
-      bottom: -1px;
-      left: 0;
-      position: absolute;
-      right: -451px;
-      top: -1px;
-      visibility: visible;
-      background-color: $primary-90;
-    }
-  }
-
-  td {
-    &.increase-width {
-      .increase-innner {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &.is-bordered {
-    thead {
-      tr {
-        th {
-          border-top: 1px solid $primary-95;
-          border-bottom: 1px solid $primary-95;
-          border-right: 1px solid $primary-95;
-          background-color: $primary-97;
-
-          &:first-child {
-            border-left: 1px solid transparent;
-          }
-          &:last-child {
-            border-right: 1px solid transparent;
-          }
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        &:hover {
-          box-shadow: none;
-        }
-
-        td {
-          font-size: 13px;
-          color: $primary-20;
-          background-color: transparent;
-          border-bottom: 1px solid $primary-95;
-          border-right: 1px solid $primary-95;
-          &:last-child {
-            border-right: 1px solid transparent;
-          }
-          &:first-child {
-            border-left: 1px solid transparent;
-          }
-
-          &:first-child {
-            color: $primary-5;
-            border-radius: 0;
-          }
-
-          &:last-child {
-            border-radius: 0;
-          }
-
-          .ac-single-checkbox {
-            .is-checkradio[type="checkbox"] {
-              &.ac-checkbox + label {
-                color: $primary-20;
-
-                &::before {
-                  height: 16px;
-                  width: 16px;
-                  background-color: $primary-95;
-                }
-
-                &::after {
-                  top: 6px;
-                  left: 6px;
-                  border-color: $black-80;
-                  width: 0.3rem;
-                  height: 0.5rem;
-                }
-              }
-
-              &:checked + label::before {
-                background-color: $primary;
-                border-color: $primary;
-              }
-
-              &:checked + label::after {
-                border-color: $primary-90;
-              }
-            }
-          }
-
-          .is-checkradio[type="checkbox"].ac-checkbox:checked + label::before {
-            background-color: $primary;
-            border-color: $primary;
-          }
-
-          .is-checkradio[type="checkbox"] + label::before,
-          .is-checkradio[type="checkbox"] + label:before {
-            top: 3px;
-          }
-        }
-      }
-    }
-  }
-
-  &.ac-separate-tr {
-    border-collapse: separate;
-    border-spacing: 0px 5px;
-
-    tbody {
-      tr {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &.is-middle-aligned {
-    thead {
-      tr {
-        th {
-          vertical-align: middle;
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        td {
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-
-  &.is-dark {
-    thead {
-      background-color: $primary-5;
-
-      tr {
-        th {
-          color: $white-100;
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        td {
-          color: $white-100;
-        }
-
-        &:nth-child(odd) {
-          background-color: $primary-20;
-        }
-
-        &:nth-child(even) {
-          background-color: $primary-5;
-        }
-
-        &:hover {
-          background-color: $primary;
-
-          td {
-            color: $white-100;
-          }
-        }
-      }
-    }
-  }
-}
-
-.table.ac-table tbody tr:hover td a:not(.tag a) {
-  text-decoration: underline;
-  color: $primary;
-}
-
-// table inner shadow
-.table-inner-shadow {
-  border-radius: 0px;
-  background: $primary-90;
-  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
-}
-
-@keyframes expand {
-  from {
-    max-height: 0;
-    overflow-y: hidden;
-  }
-  1% {
-    overflow-y: hidden;
-  }
-  99% {
-    overflow-y: hidden;
-  }
-  to {
-    max-height: 60vh;
-    overflow-y: overlay;
-  }
-}
-
-@keyframes collapse {
-  from {
-    max-height: 60vh;
-    overflow-y: overlay;
-  }
-  1% {
-    overflow-y: hidden;
-  }
-  99% {
-    overflow-y: hidden;
-  }
-  to {
-    max-height: 0;
-    overflow-y: hidden;
-  }
-}
-
-// GENERAL TABLE 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) {
-}
+@import "../../../vue-components/styles/components/table";
 </style>

package/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) {
-// }