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

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

@@ -403,24 +403,24 @@
   }
 }
 // buttons
-// .button {
-//   &.ac-button {
-//     &.is-medium {
-//       font-size: 1rem;
-//       height: 36px;
-//     }
-//     &.is-tinny {
-//       height: 24px;
-//       padding: 0 8px;
-//     }
-//   }
-// }
+.button {
+  &.ac-button {
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+    &.is-tinny {
+      height: 24px;
+      padding: 0 8px;
+    }
+  }
+}
 
-// .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/styles/components → components}/ui-builder/_vue-open-api.scss

@@ -619,41 +619,41 @@
 }
 
 // button scss
-// .button {
-//   &.ac-button {
-//     padding: 8px 16px;
-//     font-weight: 500;
-//     line-height: 1;
-
-//     &.is-light {
-//       &.is-loading {
-//         &::after {
-//           border-color: transparent transparent #1c1c1c #1c1c1c !important;
-//         }
-//       }
-//     }
-//     &.is-ghost {
-//       border-color: transparent !important;
-//     }
-//     &.is-square {
-//       border: 1px solid $primary-95;
-//     }
-//     &.is-small {
-//       padding: 4px 9px;
-//     }
-//     &.is-medium {
-//       font-size: 1rem;
-//       height: 36px;
-//     }
-//   }
-//   &:focus {
-//     outline: none;
-//     box-shadow: none;
-//   }
-// }
-// button.is-primary {
-//   background-color: $primary;
-// }
+.button {
+  &.ac-button {
+    padding: 8px 16px;
+    font-weight: 500;
+    line-height: 1;
+
+    &.is-light {
+      &.is-loading {
+        &::after {
+          border-color: transparent transparent #1c1c1c #1c1c1c !important;
+        }
+      }
+    }
+    &.is-ghost {
+      border-color: transparent !important;
+    }
+    &.is-square {
+      border: 1px solid $primary-95;
+    }
+    &.is-small {
+      padding: 4px 9px;
+    }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+    }
+  }
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+button.is-primary {
+  background-color: $primary;
+}
 
 .is-refresh {
   i.fa {

package/main.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 // customize bulma css
-@import "@/components/vue-components/styles/base/utilities/_customize-bulma.scss";
+@import "@/assets/design-system/base/utilities/_customize-bulma.scss";
 
 // Third party CSS
 @import "../node_modules/bulma/bulma.sass";
@@ -11,13 +11,13 @@
 @import "vue-multiselect/dist/vue-multiselect.css";
 
 // BASE
-@import "@/components/vue-components/styles/base/utilities/all";
+@import "./base/utilities/all";
 
 // LAYOUTS
-@import "@/components/vue-components/styles/layouts/all";
+@import "./layouts/all";
 
 // COMPONENTS
-@import "@/components/vue-components/styles/components/all";
+@import "./components/all";
 
 // //BASE - Base styles, variables, mixins
 // @import "base/video-player";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.6-alpha.2",
+  "version": "2.0.7",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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

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

package/vue-components/v3/button/Button.vue

@@ -70,5 +70,63 @@ const showUnpluginIcon = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@import "../../../vue-components/styles/components/button";
+.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 #1c1c1c #1c1c1c !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;
+}
 </style>

package/vue-components/v3/dropdown/DropdownAction.vue

@@ -60,5 +60,36 @@ onClickOutside(actionDropdown, () => emit("update:modelValue", false));
   <!-- dropdown end -->
 </template>
 <style lang="scss">
-@import "../../../vue-components/styles/components/dropdown";
+.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;
+      }
+    }
+  }
+}
 </style>

package/vue-components/v3/form-fields/AcSingleInput.vue

@@ -18,6 +18,4 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 
-<style lang="scss">
-@import "../../../vue-components/styles/components/input";
-</style>
+<style lang="scss"></style>

package/vue-components/v3/modal/Modal.vue

@@ -143,5 +143,220 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-@import "../../../vue-components/styles/components/modal";
+// modal start
+.ac-modal {
+  // position: relative;
+  min-height: 100vh;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+  .ac-button {
+    &.is-white {
+      margin-right: -10px;
+    }
+  }
+
+  &:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $primary-5;
+    z-index: -1;
+    opacity: 0.5;
+  }
+
+  &.is-small {
+    .ac-modal-inner {
+      border-radius: 4px;
+      width: 446px;
+    }
+  }
+
+  &.is-normal {
+    .ac-modal-inner {
+      width: 518px;
+    }
+  }
+
+  &.is-medium {
+    .ac-modal-inner {
+      width: 800px;
+    }
+  }
+
+  &.is-large {
+    .ac-modal-inner {
+      width: 1000px !important;
+    }
+  }
+
+  .ac-modal-inner {
+    margin: 0 auto;
+    background-color: $white-100;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 12px 26px 118px rgba(0, 0, 0, 0.16);
+
+    .ac-modal-header {
+      background-color: $white-100;
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid $primary-90;
+
+      h6 {
+        color: $primary-10;
+      }
+
+      .ms-close-button {
+        button {
+          cursor: pointer;
+          padding: 3px 5px;
+          color: $primary-10;
+        }
+      }
+    }
+
+    .ac-modal-body {
+      padding: 20px;
+      max-height: calc(100vh - 230px);
+      overflow-y: auto;
+
+      .ac-modal-content {
+        img {
+          // width: 100%;
+          height: auto;
+        }
+
+        .action-message {
+          p {
+            font-size: 16px;
+            margin-bottom: 10px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            &.is-description {
+              font-weight: 400;
+              color: $primary-10;
+
+              strong {
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .ac-modal-footer {
+      border-top: 1px solid $primary-90;
+      padding: 10px 20px;
+    }
+  }
+}
+
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+  .ac-modal {
+    &.is-small {
+      .ac-modal-inner {
+        width: 266px;
+      }
+    }
+
+    &.is-normal {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    &.is-medium {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    &.is-large {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    .action-message.pt-35.pb-35 {
+      padding-top: 20px !important;
+      padding-bottom: 20px !important;
+    }
+  }
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .ac-modal {
+    &.is-small {
+      .ac-modal-inner {
+        width: 266px;
+      }
+    }
+
+    &.is-normal {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    &.is-medium {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    &.is-large {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+  }
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .ac-modal {
+    &.is-normal {
+      .ac-modal-inner {
+        width: calc(100% - 50px);
+      }
+    }
+
+    &.is-medium {
+      .ac-modal-inner {
+        width: calc(100% - 50px);
+      }
+    }
+
+    &.is-large {
+      .ac-modal-inner {
+        width: calc(100% - 50px);
+      }
+    }
+  }
+}
+
+// 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>