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

package/components/_ac-table.scss

@@ -0,0 +1,503 @@
+// .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) {
+// }