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

package/vue-components/styles/components/_table.scss

@@ -1,430 +0,0 @@
-// 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