@appscode/design-system 2.0.6-alpha.2 → 2.0.7

package/vue-components/v3/table/Table.vue

@@ -260,5 +260,457 @@ onUpdated(() => {
 </template>
 
 <style lang="scss">
-@import "../../../vue-components/styles/components/table";
+// 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) {
+}
 </style>

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

@@ -1,117 +0,0 @@
-.ac-accordion-wrapper {
-  &.is-marginless {
-    .single-accordion-item {
-      margin: 0;
-      padding: 0;
-
-      .accordion-heading {
-        padding: 10px 20px;
-        position: relative;
-        z-index: 1;
-
-        &::after {
-          position: absolute;
-          content: "";
-          left: 0;
-          top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: $primary;
-        }
-      }
-    }
-  }
-
-  .single-accordion-item {
-    background-color: $white-100;
-    padding: 15px 20px;
-    margin-bottom: 15px;
-    border-radius: 4px;
-    border: 1px solid $primary-90;
-
-    &.open {
-      .accordion-heading {
-        margin-bottom: 10px;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .accordion-heading {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      h3 {
-        cursor: pointer;
-      }
-
-      button {
-        font-size: 12px;
-        letter-spacing: 0.1px;
-      }
-
-      .icon {
-        width: 20px;
-        height: 20px;
-        border: 1px solid $primary-90;
-        line-height: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 10px;
-        border-radius: 50%;
-        cursor: pointer;
-      }
-    }
-
-    .accordion-body {
-      max-height: 0;
-      transition: max-height 0.2s ease-out;
-      overflow: hidden;
-
-      p {
-        font-size: 13px;
-        color: $primary-20;
-        line-height: 1.6;
-      }
-    }
-  }
-}
-
-.overview-body {
-  .ac-accordion-wrapper {
-    &.is-marginless {
-      .single-accordion-item {
-        .accordion-heading {
-          padding-bottom: 0;
-        }
-      }
-    }
-  }
-}
-
-/****************************************
-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) {
-}

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

@@ -1,16 +0,0 @@
-// @import "button";
-// @import "input";
-// @import "accordion";
-// @import "modal";
-// @import "navbar";
-// @import "options";
-// @import "table";
-
-// @import "tabs";
-@import "navbar";
-@import "terminal";
-@import "multi-select";
-@import "report";
-@import "getkeeper";
-@import "ui-builder/ui-builder";
-@import "ui-builder/vue-open-api";

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

@@ -1,59 +0,0 @@
-.button {
-  &.ac-button {
-    padding: 8px 16px;
-    font-weight: 500;
-    line-height: 1;
-
-    &.is-primary {
-      &.is-light {
-        color: $primary;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-    &.is-warning {
-      &.is-light {
-        color: $yellow-30;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-
-    &.is-success {
-      &.is-light {
-        color: $green-30;
-        &:focus:not(:hover) {
-          color: inherit;
-        }
-      }
-    }
-    &.is-light {
-      &.is-loading {
-        &::after {
-          border-color: transparent transparent $primary-5 $primary-5 !important;
-        }
-      }
-      &.is-outlined {
-        &:hover {
-          border-color: inherit;
-        }
-      }
-    }
-
-    &.is-small {
-      padding: 4px 12px;
-      &:not(.is-rounded) {
-        border-radius: 4px;
-      }
-    }
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-    }
-  }
-}
-button.is-primary {
-  background-color: $primary;
-}

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

@@ -1,32 +0,0 @@
-.dropdown-group {
-  margin-bottom: 8px;
-}
-.dropdown-action {
-  .dropdown-content {
-    min-width: 220px;
-    max-width: 500px;
-    max-height: calc(100vh - 200px);
-    overflow-y: auto;
-    border: 1px solid $primary-90;
-
-    label {
-      padding: 8px 16px;
-      display: flex;
-      border-bottom: 1px solid $primary-95;
-      color: $primary-20;
-      font-weight: 500;
-    }
-    .dropdown-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
-      padding: 8px 16px;
-      color: $primary-20;
-      &:hover {
-        background-color: $primary-97;
-        color: $primary;
-      }
-    }
-  }
-}