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

package/components/_ac-table.scss

@@ -1,503 +0,0 @@
-// .table-container {
-//   &.ac-table-container {
-//     &::-webkit-scrollbar {
-//       height: 7px;
-//     }
-
-//     /* Track */
-//     &::-webkit-scrollbar-track {
-//       background-color: #d1d4de;
-//       border-radius: 10px;
-//     }
-
-//     /* Handle */
-//     &::-webkit-scrollbar-thumb {
-//       background-color: $primary-90;
-//       border-radius: 10px;
-//     }
-
-//     /* Handle on hover */
-//     &::-webkit-scrollbar-thumb:hover {
-//       background-color: $primary-90;
-//     }
-//   }
-// }
-
-// // INFO TABLE START
-// .table.ac-info-table {
-//   background-color: transparent;
-
-//   &.is-fullwidth {
-//     tbody {
-//       tr {
-//         td {
-//           &:first-child {
-//             width: 1%;
-//           }
-//         }
-//       }
-//     }
-//   }
-
-//   padding: 10px;
-//   border-radius: 4px;
-
-//   tbody {
-//     display: block;
-//     padding: 5px 20px;
-
-//     tr {
-//       td {
-//         border: none;
-//         font-size: 13px;
-//         color: $primary-20;
-//         font-weight: 400;
-//         padding: 3px 0px;
-//         min-width: 230px;
-
-//         &:first-child {
-//           font-weight: 400;
-//           padding-right: 10px;
-//           color: $primary-5;
-//         }
-//       }
-//     }
-//   }
-// }
-
-// // INFO TABLE END
-
-// // GENERAL TABLE START
-// .table.ac-table {
-//   background-color: transparent;
-//   margin-bottom: 0;
-
-//   thead {
-//     background-color: $primary-90;
-//     font-size: 13px;
-//     font-family: $font-heading;
-//     line-height: initial;
-
-//     tr {
-//       border-bottom: 1px solid $primary-90;
-
-//       th {
-//         padding: 6px 20px;
-//         color: $primary-5;
-//         border: none;
-//         font-weight: 500;
-//         // background-color: $primary-97;
-
-//         &.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 {
-//       &.is-link {
-//         cursor: pointer;
-//       }
-//       border-bottom: 1px solid var(--ac-white-light);
-
-//       td {
-//         font-size: 13px;
-//         padding: 5px 20px;
-//         color: $primary-10;
-//         border: none;
-
-//         a {
-//           color: $primary-5;
-//           transition: 0.3s ease-in-out;
-//           font-weight: 400;
-//         }
-
-//         .tags {
-//           .tag {
-//             a {
-//               color: $primary;
-//               font-weight: 500;
-//               transition: 0.3s ease-in-out;
-
-//               &: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;
-//           }
-//         }
-//       }
-
-//       .options-items {
-//         a:hover {
-//           color: $white-100;
-//           text-decoration: none;
-//         }
-//       }
-
-//       &.is-selected {
-//         background-color: $white-100 !important;
-//         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;
-//       }
-
-//       &.is-hoverless {
-//         box-shadow: none !important;
-//         transform: none !important;
-//         background-color: $white-100 !important;
-//       }
-
-//       transition: 0.3s ease-in-out;
-//     }
-//   }
-
-//   .increase-width {
-//     position: relative;
-//     visibility: hidden;
-//     width: 36px;
-
-//     .increase-innner {
-//       border-bottom: 1px solid var(--ac-white-light);
-//       border-top: 1px solid var(--ac-white-light);
-//       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-90;
-//           border-bottom: 1px solid $primary-90;
-//           border-right: 1px solid $primary-90;
-
-//           &:first-child {
-//             border-left: 1px solid $primary-90;
-//           }
-//         }
-//       }
-//     }
-
-//     tbody {
-//       tr {
-//         &:hover {
-//           box-shadow: none;
-//         }
-
-//         td {
-//           font-size: 13px;
-//           color: $primary-20;
-//           background-color: transparent;
-//           border-bottom: 1px solid $primary-90;
-//           border-right: 1px solid $primary-90;
-
-//           &:first-child {
-//             border-left: 1px solid $primary-90;
-//           }
-
-//           &: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-90;
-//                 }
-
-//                 &::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) {
-// }