@appscode/design-system 1.1.0 → 2.0.0

package/components/_ac-table.scss

@@ -1,502 +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: $ac-white-light;
-      border-radius: 10px;
-    }
-
-    /* Handle on hover */
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: $ac-white-light;
-    }
-  }
-}
-
-// 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: $font-size-small;
-        color: $ac-color-value;
-        font-weight: 400;
-        padding: 3px 0px;
-        min-width: 230px;
-
-        &:first-child {
-          font-weight: 400;
-          padding-right: 10px;
-          color: $ac-color-heading;
-        }
-      }
-    }
-  }
-}
-
-// INFO TABLE END
-
-// GENERAL TABLE START
-.table.ac-table {
-  background-color: transparent;
-  margin-bottom: 0;
-
-  thead {
-    background-color: $ac-white-lighter;
-    font-size: $font-size-small;
-    font-family: $ac-family-heading;
-    line-height: initial;
-
-    tr {
-      border-bottom: 1px solid $ac-white-light;
-
-      th {
-        padding: 6px 20px;
-        color: $ac-color-heading;
-        border: none;
-        font-weight: 500;
-
-        &.sorting {
-          cursor: pointer;
-          position: relative;
-
-          &.sorting-asc {
-            &::before {
-              color: $ac-color-heading;
-            }
-          }
-
-          &.sorting-desc {
-            &::after {
-              color: $ac-color-heading;
-            }
-          }
-
-          &: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 $ac-primary;
-      border-radius: 4px;
-      border-bottom: none;
-      color: $ac-black;
-    }
-
-    tr {
-      &.is-link {
-        cursor: pointer;
-      }
-      border-bottom: 1px solid var(--ac-white-light);
-
-      td {
-        font-size: $font-size-small;
-        padding: 5px 20px;
-        color: $ac-color-text;
-        border: none;
-
-        a {
-          color: $ac-color-heading;
-          transition: 0.3s ease-in-out;
-          font-weight: 400;
-        }
-
-        .tags {
-          .tag {
-            a {
-              color: $ac-primary;
-              font-weight: 500;
-              transition: 0.3s ease-in-out;
-
-              &:hover {
-                color: $ac-color-heading;
-              }
-            }
-          }
-        }
-
-        &.is-error {
-          color: $ac-danger;
-        }
-
-        .image-with-status {
-          margin-right: 20px;
-          position: relative;
-          z-index: 1;
-          display: inline-flex;
-
-          &.is-danger {
-            background-color: $ac-danger;
-          }
-
-          i.fa {
-            position: absolute;
-            background-color: $ac-primary;
-            color: $ac-white;
-            font-size: $font-size-tiny;
-            width: 15px;
-            height: 15px;
-            text-align: center;
-            line-height: 15px;
-            border-radius: 50%;
-            right: -5px;
-            top: 5px;
-
-            &.fa-close {
-              background-color: $ac-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: $ac-white;
-          text-decoration: none;
-        }
-      }
-
-      &.is-selected {
-        background-color: $ac-white !important;
-        transform: matrix(1, 0, 0, 1, 0, 0) !important;
-        box-shadow: inset 0 0 0 1px $ac-primary;
-        border-radius: 4px;
-        border-bottom: none;
-        color: $ac-black;
-      }
-
-      &.is-hoverless {
-        box-shadow: none !important;
-        transform: none !important;
-        background-color: $ac-white !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: $ac-white-lighter;
-    }
-  }
-
-  td {
-    &.increase-width {
-      .increase-innner {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &.ac-label-texted {
-    thead {
-      tr {
-        th {
-          border-top: 1px solid $ac-white-light;
-          border-bottom: 1px solid $ac-white-light;
-          border-right: 1px solid $ac-white-light;
-
-          &:first-child {
-            border-left: 1px solid $ac-white-light;
-          }
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        &:hover {
-          box-shadow: none;
-        }
-
-        td {
-          font-size: $font-size-small;
-          color: $ac-color-value;
-          background-color: transparent;
-          border-bottom: 1px solid $ac-white-light;
-          border-right: 1px solid $ac-white-light;
-
-          &:first-child {
-            border-left: 1px solid $ac-white-light;
-          }
-
-          &:first-child {
-            color: $ac-color-heading;
-            border-radius: 0;
-          }
-
-          &:last-child {
-            border-radius: 0;
-          }
-
-          .ac-single-checkbox {
-            .is-checkradio[type="checkbox"] {
-              &.ac-checkbox + label {
-                color: $ac-link-black;
-
-                &::before {
-                  height: 16px;
-                  width: 16px;
-                  background-color: $ac-white-light;
-                }
-
-                &::after {
-                  top: 6px;
-                  left: 6px;
-                  border-color: $ac-gray-lightest;
-                  width: 0.3rem;
-                  height: 0.5rem;
-                }
-              }
-
-              &:checked + label::before {
-                background-color: $ac-primary;
-                border-color: $ac-primary;
-              }
-
-              &:checked + label::after {
-                border-color: $ac-white-lighter;
-              }
-            }
-          }
-
-          .is-checkradio[type="checkbox"].ac-checkbox:checked + label::before {
-            background-color: $ac-primary;
-            border-color: $ac-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: $ac-color-heading;
-
-      tr {
-        th {
-          color: $ac-white;
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        td {
-          color: $ac-white;
-        }
-
-        &:nth-child(odd) {
-          background-color: $ac-color-value;
-        }
-
-        &:nth-child(even) {
-          background-color: $ac-color-heading;
-        }
-
-        &:hover {
-          background-color: $ac-primary;
-
-          td {
-            color: $ac-white;
-          }
-        }
-      }
-    }
-  }
-}
-
-.table.ac-table tbody tr:hover td a:not(.tag a) {
-  text-decoration: underline;
-  color: $ac-primary;
-}
-
-// table inner shadow
-.table-inner-shadow {
-  border-radius: 0px;
-  background: $ac-white-lighter;
-  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) {
-}
+// .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) {
+// }