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

package/vue-components/v3/sidebar/Sidebar.vue

@@ -35,205 +35,5 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style lang="scss">
-.ac-left-sidebar-wrapper {
-  position: fixed;
-  top: 0px;
-  z-index: 9999;
-  background-color: $primary-20;
-  width: 250px;
-  transition: 0.3s ease-in-out;
-}
-
-.ac-left-sidebar {
-  .menu-list {
-    &.ac-menu-list {
-      height: calc(100vh - 80px);
-      overflow-y: auto;
-      padding-top: 4px;
-      scrollbar-color: $white-100 transparent;
-
-      /* width */
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      li {
-        &.is-open {
-          a {
-            &.ac-dropdown-button {
-              .ac-arrow-down {
-                transform: rotate(-180deg);
-                transform-origin: 5px;
-              }
-            }
-          }
-
-          ul {
-            li {
-              a {
-                strong {
-                  font-weight: 500;
-                }
-              }
-            }
-          }
-        }
-
-        a {
-          font-style: normal;
-          font-weight: 500;
-          font-size: 13px;
-          line-height: 16px;
-          color: $primary-97;
-          position: relative;
-          z-index: 1;
-          padding: 10px 15px 10px 24px;
-          transition: 0.3s ease-in-out;
-          display: flex;
-          align-items: center;
-
-          &:after {
-            position: absolute;
-            content: "";
-            left: 10px;
-            top: 0;
-            width: calc(100% - 20px);
-            height: 100%;
-            background: $primary;
-            border-radius: 4px;
-            z-index: -1;
-            transition: 0.3s ease-in-out;
-            opacity: 0;
-            visibility: hidden;
-          }
-
-          strong {
-            max-width: calc(100% - 65px);
-            // line-break: anywhere;
-            white-space: break-spaces;
-            display: flex;
-            align-items: center;
-            overflow: hidden;
-            font-weight: 500;
-            transition: 0.3s ease-in-out;
-          }
-
-          &.ac-dropdown-button {
-            user-select: none;
-
-            .ac-arrow-down {
-              position: absolute;
-              margin-right: 0;
-              right: 20px;
-              transition: transform 0.3s;
-              transform-origin: 4px;
-              color: $black-70;
-            }
-          }
-
-          &:hover {
-            background-color: transparent;
-
-            &:after {
-              color: $primary;
-              opacity: 0.2;
-              visibility: visible;
-            }
-
-            span {
-              color: $primary-97;
-
-              img {
-                filter: brightness(10);
-              }
-            }
-          }
-
-          span {
-            margin-right: 12px;
-            width: 16px;
-            height: 16px;
-            color: $black-30;
-            font-size: 16px;
-
-            img {
-              width: 100%;
-              filter: brightness(10);
-              transition: 0.3s ease-in-out;
-            }
-          }
-        }
-
-        ul {
-          max-height: 0;
-          transition: max-height 0.2s ease-out;
-          margin: 0;
-          padding: 0;
-          border-left: none;
-          overflow: hidden;
-
-          li {
-            a {
-              padding-left: 52px;
-              font-size: 12px;
-              padding-top: 10px;
-              padding-bottom: 10px;
-            }
-          }
-        }
-      }
-    }
-    a {
-      &.is-active {
-        background-color: transparent;
-        &::after {
-          opacity: 1 !important;
-          visibility: visible !important;
-        }
-      }
-    }
-  }
-}
-
-.sidebar-collapsed:not(.is-hoverable) {
-  .ac-left-sidebar-wrapper {
-    width: 60px;
-    .ac-left-sidebar {
-      .menu-list {
-        &.ac-menu-list {
-          li {
-            a {
-              padding: 10px 15px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-
-              span {
-                margin: 0;
-              }
-              strong {
-                opacity: 0;
-                visibility: hidden;
-              }
-            }
-            ul {
-              li {
-                a {
-                  padding-left: 15px;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@import "../../../vue-components/styles/components/left-sidebar";
 </style>

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -46,7 +46,7 @@ watch(
 </script>
 
 <template>
-  <li ref="sidebarItem">
+  <li ref="sidebarItem" data-testid="cluster-sidebar-item">
     <router-link
       :id="id"
       :title="title"

package/vue-components/v3/tab/Tabs.vue

@@ -9,28 +9,5 @@
 </template>
 
 <style lang="scss">
-.tabs {
-  &.ac-tabs {
-    ul {
-      border-color: $primary-90;
-    }
-    a {
-      padding: 8px 20px;
-      color: $primary-10;
-      font-weight: 500;
-      color: $black-40;
-      &:hover {
-        border-bottom-color: $black-40;
-      }
-    }
-    li {
-      &.is-active {
-        a {
-          border-bottom-color: $primary;
-          color: $primary;
-        }
-      }
-    }
-  }
-}
+@import "../../../vue-components/styles/components/tabs";
 </style>

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

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