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

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