@appscode/design-system 2.0.18 → 2.0.19-alpha.10

package/vue-components/styles/components/select-box/_ac-select-box.scss

@@ -0,0 +1,49 @@
+// .ac-select-box {
+//   select {
+//     background-color: $info-light;
+//     border: 1px solid $primary-10;
+//     font-size: 13px;
+//     height: 42px;
+//     padding-left: 20px;
+
+//     option {
+//       box-shadow: $ac-shadow-1;
+//     }
+
+//     &:hover {
+//       border: 1px solid $black-80;
+//     }
+
+//     &:focus {
+//       outline: none;
+//       box-shadow: none;
+//       border: 1px solid $primary;
+//     }
+//   }
+
+//   &.is-small {
+//     select {
+//       height: 36px;
+//       padding-left: 15px;
+//     }
+
+//     &.select:not(.is-multiple):not(.is-loading)::after {
+//       top: 50%;
+//       margin-top: 0px;
+//     }
+//   }
+
+//   &.select:not(.is-multiple):not(.is-loading)::after {
+//     border-color: $primary-10;
+//   }
+// }
+
+// .is-dark-theme {
+//   .select {
+//     select {
+//       background-color: $black-80;
+//       color: $white-100;
+//       border: 1px solid $primary-90;
+//     }
+//   }
+// }

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

@@ -0,0 +1,2 @@
+@import "ac-select-box";
+@import "multi-select";

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

@@ -0,0 +1 @@
+@import "left-sidebar";

package/vue-components/styles/components/sidebar/_left-sidebar.scss

@@ -0,0 +1,222 @@
+.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;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            line-clamp: 1;
+            -webkit-line-clamp: 1;
+            box-orient: vertical;
+            -webkit-box-orient: vertical;
+            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;
+              }
+              .ac-arrow-down {
+                display: none;
+                // change
+              }
+              strong {
+                opacity: 0;
+                visibility: hidden;
+                display: none;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                line-clamp: 1;
+                -webkit-line-clamp: 1;
+                box-orient: vertical;
+                -webkit-box-orient: vertical;
+                transition: 0.3s ease-in-out;
+                // change
+              }
+            }
+            ul {
+              li {
+                a {
+                  padding-left: 15px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/{components → vue-components/styles/components}/ui-builder/_ui-builder.scss

@@ -1,4 +1,4 @@
-@import "../input-card";
+@import "../../components/form-fields/input-card";
 
 .ac-object-field-wrapper {
   display: grid;
@@ -369,39 +369,6 @@
   }
 }
 
-.up-down-buttons {
-  border-radius: 4px;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-  max-width: 36px;
-  margin-bottom: 0 !important;
-  button {
-    width: 36px;
-    height: 18px;
-    cursor: pointer;
-    border: none;
-    color: $primary;
-    background-color: $primary-90;
-    transition: 0.3s ease-in-out;
-    &:hover {
-      background-color: $primary-80;
-    }
-    &.is-primary {
-      background-color: $primary;
-      color: $white-100;
-      &:hover {
-        background-color: $primary-30;
-      }
-    }
-    .icon {
-      margin: 0;
-      padding: 0;
-      width: auto;
-      height: auto;
-    }
-  }
-}
 // buttons
 .button {
   &.ac-button {
@@ -421,11 +388,11 @@
   }
 }
 
-.button[disabled] {
-  &.is-ghost {
-    border-color: transparent !important;
-  }
-}
+// .button[disabled] {
+//   &.is-ghost {
+//     border-color: transparent !important;
+//   }
+// }
 
 p.is-error,
 span.is-error {

package/vue-components/v3/accordion/Accordion.vue

@@ -31,121 +31,5 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 <style lang="scss" scoped>
-.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) {
-}
+@import "../../../vue-components/styles/components/accordion";
 </style>

package/vue-components/v3/alert/Alert.vue

@@ -17,222 +17,5 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style lang="scss" scoped>
-// for alert message
-.ac-notification {
-  background-color: #dee7f5;
-  font-size: 13px;
-  color: $primary;
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  overflow: hidden;
-  border: 1px solid $primary;
-  border-radius: 4px;
-  justify-content: flex-start;
-  position: relative;
-  z-index: 1;
-  min-width: 280px;
-
-  p {
-    color: $primary;
-
-    .close-icon {
-      padding-right: 10px;
-      font-size: 15px;
-    }
-
-    a {
-      text-decoration: underline;
-      color: $primary;
-
-      &:hover {
-        color: hsla(
-          var(--hsl-hue),
-          var(--hsl-saturation),
-          calc(var(--hsl-lightness) - 10%),
-          1
-        );
-      }
-    }
-  }
-
-  button.close {
-    background-color: transparent;
-    cursor: pointer;
-    right: 0px;
-    position: absolute;
-    box-shadow: none;
-    border: none;
-    font-size: 14px;
-    color: $danger;
-    width: 40px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-// mixin for .ac-notification
-@mixin acNotification($colorName) {
-  background-color: scale-color($color: $colorName, $lightness: 80%);
-  color: $white-100;
-  border-color: $colorName;
-
-  p {
-    color: $colorName;
-
-    a {
-      color: $colorName;
-
-      &:hover {
-        color: $colorName;
-        opacity: 0.8;
-      }
-    }
-  }
-}
-@mixin acPrimaryNotification() {
-  background-color: hsla(
-    var(--hsl-hue),
-    var(--hsl-saturation),
-    var(--hsl-lightness),
-    0.2
-  );
-  color: $white-100;
-  border-color: $primary;
-
-  p {
-    color: $primary;
-
-    a {
-      color: $primary;
-
-      &:hover {
-        color: $primary;
-        opacity: 0.8;
-      }
-    }
-  }
-}
-
-// is-primary
-.ac-notification.is-primary {
-  @include acPrimaryNotification();
-}
-
-// is.info
-.ac-notification.is-info {
-  @include acNotification($info);
-}
-
-// is.success
-.ac-notification.is-success {
-  @include acNotification($success);
-}
-
-// is-danger
-.ac-notification.is-danger {
-  @include acNotification($danger);
-}
-
-// is-warning
-.ac-notification.is-warning {
-  @include acNotification($warning);
-}
-
-/*====================================
-AC Toast
-=====================================*/
-
-.ac-toast {
-  width: 350px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-  border-radius: 4px;
-  position: relative;
-  padding-right: 30px;
-  margin-bottom: 10px;
-
-  * {
-    color: $white-100;
-  }
-
-  p {
-    padding-left: 16px;
-
-    i.fa {
-      padding-right: 0 !important;
-      margin-right: 4px;
-    }
-  }
-
-  a {
-    font-weight: 500;
-    text-decoration: underline;
-    padding: 0 15px;
-
-    &:hover {
-      color: $black-70;
-    }
-  }
-
-  button.close-button {
-    border-radius: 0px;
-    background-color: transparent;
-    border: none;
-    color: $white-100;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 5px;
-    height: 100%;
-    width: 30px;
-    z-index: 1;
-    cursor: pointer;
-    border-left: 1px solid #dddddd;
-  }
-}
-
-// mixin for .ac-toast
-@mixin acToast($colorName) {
-  background-color: $colorName;
-  color: $white-100;
-  border-color: $colorName;
-}
-
-// is-primary
-.ac-toast.is-primary {
-  @include acToast($primary);
-}
-
-// is-info
-.ac-toast.is-info {
-  @include acToast($info);
-}
-
-// is.success
-.ac-toast.is-success {
-  @include acToast($success);
-}
-
-// is-danger
-.ac-toast.is-danger {
-  @include acToast($danger);
-}
-
-// is-warning
-.ac-toast.is-warning {
-  @include acToast($warning);
-}
-
-// dark theme start
-// .is-dark-theme {
-//   .ac-notification.is-danger {
-//     background-color: $black-80;
-//   }
-// }
+@import "../../../vue-components/styles/components/alert/alert";
 </style>