@appscode/design-system 2.0.22-alpha.6 → 2.0.22

package/package.json

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

package/vue-components/styles/base/utilities/_global.scss

@@ -763,20 +763,66 @@ $border_color_4: transparent transparent #585d6e transparent;
 
 // Status css
 // ac-footer sticky end
-.information-center {
-  min-height: calc(100vh - 0px);
-  padding: 20px;
-  border-left: 1px solid hsl(208, 77%, 90%);
-  width: 330px;
-  margin-left: auto;
-  position: fixed;
-  right: 0;
-  background: #fff;
-  top: 0;
-  z-index: 9999;
-  box-shadow: -3px 2px 10px 3px rgba(0, 0, 0, 0.1);
-
-  .info-title {
-    display: flex;
+
+// terminal scss end
+.is-dark-theme {
+  a {
+    &:hover {
+      color: #485fc7;
+    }
   }
 }
+
+/****************************************
+Responsive Classes
+*****************************************/
+
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+  // .responsive-only {
+  //   display: block;
+  // }
+
+  // .ac-system-body {
+  //   grid-gap: 15px;
+  //   grid-template-columns: 70px calc(100% - 100px);
+
+  //   .ac-system-content {
+  //     &.mr-20 {
+  //       margin-right: 0 !important;
+  //     }
+  //   }
+  // }
+}
+
+// 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) {
+  // .ac-system-body {
+  //   grid-gap: 15px;
+  //   grid-template-columns: 240px calc(100% - 255px);
+  // }
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  // .ac-system-body {
+  //   grid-gap: 0px;
+  //   grid-template-columns: 240px calc(100% - 260px);
+  // }
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}
+
+// FHD devices
+@media (min-width: 1408px) and (max-width: 1600) {
+  // .ac-system-body {
+  //   grid-gap: 0px;
+  //   grid-template-columns: 240px calc(100% - 260px);
+  // }
+}

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

@@ -7,7 +7,6 @@
 @import "header/all";
 @import "select-box/all";
 @import "sidebar/all";
-@import "sidebar-tabs/all";
 
 @import "button";
 @import "terminal";

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

@@ -407,9 +407,9 @@
   }
 
   label {
-    font-size: 13px;
-    left: 15px;
-    top: 8px;
+    font-size: 16px;
+    left: 20px;
+    top: 11px;
     cursor: text;
     color: $primary-10;
     position: absolute;
@@ -426,10 +426,10 @@
 
     &.show-label {
       top: -10px;
-      left: 10px;
+      left: 15px;
       padding: 0 5px;
       font-size: 13px;
-      color: $black-40;
+      color: $black-5;
 
       &::after {
         background-color: $white-100;

package/vue-components/styles/components/ui-builder/_ui-builder.scss

@@ -144,55 +144,64 @@
   }
 }
 
+.is-visibility-hidden {
+  visibility: hidden !important;
+  height: 0 !important;
+  opacity: 0 !important;
+}
+
 // nested elements end
 
-// .table-wrapper {
-//   overflow-x: auto;
+.table-wrapper {
+  overflow-x: auto;
 
-//   .table-inner {
-//     min-width: 630px;
+  .table-inner {
+    min-width: 630px;
 
-//     .thead {
-//       background-color: $primary-90;
+    .thead {
+      background-color: $primary-90;
 
-//       .tr {
-//         .th {
-//           font-weight: 600;
-//         }
-//       }
-//     }
+      .tr {
+        .th {
+          font-weight: 600;
+        }
 
-//     .thead,
-//     .tbody {
-//       .tr {
-//         display: flex;
-//         flex-wrap: nowrap;
-//         align-items: center;
-//         justify-content: space-between;
-
-//         .th,
-//         .td {
-//           width: 20%;
-//           font-size: 13px;
-//           min-width: 150px;
-//           padding: 6px 20px;
-//         }
-//       }
-//     }
+        border-top: 1px solid var(--ac-white-light);
+        border-bottom: 1px solid var(--ac-white-light);
+      }
+    }
 
-//     .tbody {
-//       .tr {
-//         border-bottom: 1px solid $primary-90;
-//       }
-//     }
-//   }
+    .thead,
+    .tbody {
+      .tr {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: space-between;
+
+        .th,
+        .td {
+          width: 20%;
+          font-size: 13px;
+          min-width: 150px;
+          padding: 6px 20px;
+        }
+      }
+    }
 
-//   .is-selected {
-//     border: 1px solid $primary;
-//     border-bottom: 1px solid $primary !important;
-//     border-radius: 4px;
-//   }
-// }
+    .tbody {
+      .tr {
+        border-bottom: 1px solid $primary-90;
+      }
+    }
+  }
+
+  .is-selected {
+    border: 1px solid $primary;
+    border-bottom: 1px solid $primary !important;
+    border-radius: 4px;
+  }
+}
 
 .is-collapsed {
   &.ac-nested-elements::before,
@@ -207,16 +216,16 @@
   gap: 16px;
   grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
 }
-// .table {
-//   tr {
-//     &.is-selected {
-//       background-color: $primary-97;
-//       strong {
-//         color: $primary;
-//       }
-//     }
-//   }
-// }
+.table {
+  tr {
+    &.is-selected {
+      background-color: $primary-97;
+      strong {
+        color: $primary;
+      }
+    }
+  }
+}
 // dark theme start
 // .is-dark-theme {
 //   .nested-body {
@@ -360,57 +369,24 @@
   }
 }
 
-.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;
+// buttons
+.button {
+  &.ac-button {
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
+      &.is-square {
+        width: 36px;
+        align-items: center;
+        justify-content: center;
       }
     }
-    .icon {
-      margin: 0;
-      padding: 0;
-      width: auto;
-      height: auto;
+    &.is-tinny {
+      height: 24px;
+      padding: 0 8px;
     }
   }
 }
-// buttons
-// .button {
-//   &.ac-button {
-//     &.is-medium {
-//       font-size: 1rem;
-//       height: 36px;
-//       &.is-square {
-//         width: 36px;
-//         align-items: center;
-//         justify-content: center;
-//       }
-//     }
-//     &.is-tinny {
-//       height: 24px;
-//       padding: 0 8px;
-//     }
-//   }
-// }
 
 // .button[disabled] {
 //   &.is-ghost {
@@ -423,10 +399,26 @@ span.is-error {
   color: $danger;
   font-weight: 400;
 }
-.circle-list-shape {
-  width: 6px;
-  height: 6px;
-  background-color: $black-40;
-  display: flex;
-  border-radius: 50%;
+
+/****************************************
+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/ui-builder/_vue-open-api.scss

@@ -5,7 +5,7 @@
 
     .form-left-item {
       margin-right: 16px;
-      width: calc(100% - 108px);
+      width: calc(100% - 104px);
     }
   }
 }
@@ -518,11 +518,57 @@
       }
     }
 
+    input,
+    .ac-card,
+    textarea {
+      background-color: $white-100;
+      color: $primary-10;
+      height: 45px;
+      font-weight: 400;
+      width: 100%;
+      border-radius: 4px;
+      border: 1px solid $primary-80;
+      padding: 8px 16px;
+      font-size: 13px;
+
+      &:hover {
+        border-color: $black-70;
+      }
+
+      &.bg-white {
+        background-color: $white-100;
+      }
+
+      &.StripeElement--focus {
+        border: 1px solid $primary;
+      }
+
+      &:focus {
+        border: 1px solid $primary;
+        outline: none;
+        background-color: $white-100;
+      }
+
+      &[type="password"] {
+        padding-right: 40px;
+      }
+
+      &[type="search"] {
+        padding-left: 30px;
+      }
+
+      transition: background-color 0.3s ease-in-out;
+    }
+
     .ac-card {
       height: 36px;
       padding: 10px 20px;
     }
 
+    textarea {
+      height: 55px;
+    }
+
     b.isRequired {
       color: $danger;
       font-size: 13px;

package/vue-components/v3/editor/Editor.vue

@@ -10,6 +10,10 @@ interface Props {
   editorHeight?: number | string;
   editorTheme?: string;
   wordWrap?: string;
+  validation?: {
+    schema?: Record<string, unknown>;
+    uri: string;
+  };
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
   editorHeight: 40,
   editorTheme: "",
   wordWrap: "on",
+  validation: () => ({ uri: "" }),
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -111,22 +116,10 @@ watch(
 
 <template>
   <div>
-    <editor-tabs
-      v-if="!readOnly"
-      @tabchange="activeTab = $event"
-      :active-tab="activeTab"
-    />
-    <monaco-editor
-      v-if="activeTab === 'edit'"
-      @editorDidMount="onEditorMount"
-      key="edit"
-      class="is-clipped"
-      :class="computeHightInClass"
-      :style="computeHightInStyle"
-      :value="editorContent"
-      @change="onChange"
-      :language="language"
-      :options="{
+    <editor-tabs v-if="!readOnly" @tabchange="activeTab = $event" :active-tab="activeTab" />
+    <monaco-editor v-if="activeTab === 'edit'" @editorDidMount="onEditorMount" key="edit" class="is-clipped"
+      :class="computeHightInClass" :style="computeHightInStyle" :value="editorContent" @change="onChange"
+      :language="language" :options="{
         minimap: {
           enabled: calcShowMinimap,
         },
@@ -134,18 +127,9 @@ watch(
         readOnly: readOnly,
         wordWrap: wordWrap,
         scrollBeyondLastLine: false,
-      }"
-      data-testid="monaco-editor-edit-section"
-    />
-    <monaco-editor
-      v-if="activeTab === 'preview'"
-      key="preview"
-      class="is-clipped"
-      :class="computeHightInClass"
-      :style="computeHightInStyle"
-      :value="editorContent"
-      :language="language"
-      :options="{
+      }" :validation="validation" data-testid="monaco-editor-edit-section" />
+    <monaco-editor v-if="activeTab === 'preview'" key="preview" class="is-clipped" :class="computeHightInClass"
+      :style="computeHightInStyle" :value="editorContent" :language="language" :options="{
         minimap: {
           enabled: calcShowMinimap,
         },
@@ -153,10 +137,7 @@ watch(
         readOnly: true,
         wordWrap: wordWrap,
         scrollBeyondLastLine: false,
-      }"
-      :original="originalEditorContent"
-      :diff-editor="true"
-      data-testid="monaco-editor-preview-section"
-    />
+      }" :original="originalEditorContent" :diff-editor="true" :validation="validation"
+      data-testid="monaco-editor-preview-section" />
   </div>
 </template>

package/vue-components/v3/editor/MonacoEditor.vue

@@ -22,6 +22,10 @@ export default defineComponent({
         return {};
       },
     },
+    validation: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   emits: ["editorWillMount", "editorDidMount", "change"],
   setup(props) {
@@ -47,21 +51,73 @@ export default defineComponent({
     this.initMonaco();
   },
   beforeUnmount() {
+    monaco.editor.getModels().forEach((model) => model.dispose());
     this.editor && this.editor.dispose();
   },
   methods: {
     initMonaco() {
       this.$emit("editorWillMount", this.monaco);
-      const { value, language, theme, options } = this;
-      this.editor = monaco.editor[
-        this.diffEditor ? "createDiffEditor" : "create"
-      ](this.$el, {
-        value: value,
-        language: language,
-        theme: theme,
-        ...options,
-      });
-      this.diffEditor && this._setModel(this.value, this.original);
+      const { value, language, theme, options, original, validation } = this;
+
+      if (!this.diffEditor) {
+        const modifiedModel = monaco.editor.createModel(
+          value,
+          language,
+          monaco.Uri.parse("file:///file.yaml")
+        );
+
+        if (validation.uri) {
+          const schemas = [
+            {
+              fileMatch: ["file:///file.yaml"],
+              schema: validation.schema
+                ? JSON.parse(
+                  JSON.stringify({
+                    ...validation.schema,
+                    $schema: "http://json-schema.org/schema#",
+                  })
+                )
+                : undefined,
+              uri: validation.uri,
+            },
+          ];
+          // yaml validation
+          if (this.$monacoYaml) {
+            this.$monacoYaml.update({
+              schemas,
+            });
+          }
+
+          // json validation
+          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            enableSchemaRequest: true,
+            schemas,
+            allowComments: true,
+          });
+        }
+
+        this.editor = monaco.editor.create(this.$el, {
+          automaticLayout: true,
+          model: modifiedModel,
+          theme: theme,
+          fixedOverflowWidgets: true,
+          ...options,
+        });
+      } else {
+        const originalModel = monaco.editor.createModel(original, language);
+        const modifiedModel = monaco.editor.createModel(value, language);
+        this.editor = monaco.editor.createDiffEditor(this.$el, {
+          automaticLayout: true,
+          theme: theme,
+          fixedOverflowWidgets: true,
+          ...options,
+        });
+        this.editor.setModel({
+          original: originalModel,
+          modified: modifiedModel,
+        });
+      }
 
       // @event `change`
       const editor = this._getEditor();
@@ -74,15 +130,6 @@ export default defineComponent({
 
       this.$emit("editorDidMount", this.editor);
     },
-    _setModel(value, original) {
-      const { language } = this;
-      const originalModel = monaco.editor.createModel(original, language);
-      const modifiedModel = monaco.editor.createModel(value, language);
-      this.editor.setModel({
-        original: originalModel,
-        modified: modifiedModel,
-      });
-    },
     _setValue(value) {
       let editor = this._getEditor();
       if (editor) return editor.setValue(value);
@@ -128,4 +175,4 @@ export default defineComponent({
     },
   },
 });
-</script>
+</script>

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue

@@ -5,4 +5,200 @@
   </div>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.sidebar-tabs {
+  width: 220px;
+  border-right: 1px solid $primary-95;
+  padding: 8px;
+  height: calc(100vh - 50px);
+  ul {
+    li {
+      a {
+        display: flex;
+        align-items: center;
+        color: $primary-10;
+        position: relative;
+        z-index: 1;
+        padding: 8px 16px;
+        font-weight: 500;
+        transition: 0.3s ease-in-out;
+        align-items: center;
+        justify-content: space-between;
+
+        &:after {
+          position: absolute;
+          content: "";
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background-color: $primary-95;
+          border-radius: 4px;
+          z-index: -1;
+          opacity: 0;
+          visibility: hidden;
+          transition: 0.3s ease-in-out;
+        }
+        &:hover {
+          color: $primary;
+
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: $primary-97;
+          }
+        }
+        &.is-active {
+          color: $primary;
+          &:hover {
+            &::after {
+              background-color: $primary-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+          }
+          &.is-danger {
+            color: $danger;
+            &:hover {
+              &::after {
+                background-color: $red-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $red-95;
+            }
+          }
+          &.is-success {
+            color: $success;
+            &:hover {
+              &::after {
+                background-color: $green-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $green-95;
+            }
+          }
+          &.is-warning {
+            color: $warning;
+            &:hover {
+              &::after {
+                background-color: $yellow-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $yellow-95;
+            }
+          }
+        }
+        &.is-danger {
+          color: $danger;
+          &:hover {
+            &::after {
+              background-color: $red-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
+        }
+        &.is-success {
+          color: $success;
+          &:hover {
+            &::after {
+              background-color: $green-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
+        }
+        &.is-warning {
+          color: $warning;
+          &:hover {
+            &::after {
+              background-color: $yellow-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
+        }
+      }
+      &.is-open {
+        transition: 0.3s ease-in-out;
+        ul {
+          max-height: 250px;
+        }
+      }
+      ul {
+        margin-left: 20px;
+        position: relative;
+        z-index: 1;
+        max-height: 0;
+        transition: 0.3s ease-in-out !important;
+        overflow: hidden;
+        &:after {
+          position: absolute;
+          content: "";
+          left: 4px;
+          top: 0;
+          width: 1px;
+          height: calc(100% - 10px);
+          background-color: $primary-90;
+        }
+        li {
+          a {
+            &:after {
+              left: -8px;
+              opacity: 0 !important;
+              visibility: hidden !important;
+            }
+            &::before {
+              position: absolute;
+              content: "";
+              left: 0;
+              top: 50%;
+              margin-top: -4px;
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              background-color: $primary;
+              transition: 0.3s ease-in-out;
+              opacity: 0;
+              visibility: hidden;
+            }
+            &:hover:not(&.is-active) {
+              &::before {
+                opacity: 1;
+                visibility: visible;
+                background-color: $primary-80;
+              }
+            }
+            &.is-active {
+              &::before {
+                opacity: 1;
+                visibility: visible;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue

@@ -26,4 +26,19 @@ withDefaults(defineProps<Props>(), {
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.sidebar-tabs-wrapper {
+  position: fixed;
+  background-color: $white-100;
+}
+.pl-220 {
+  padding-left: 220px;
+}
+.content-wrapper {
+  padding-bottom: 40px;
+  width: 100%;
+  &:has(.form-footer) {
+    padding-bottom: 0;
+  }
+}
+</style>

package/vue-components/v3/tabs/EditorTabs.vue

@@ -17,7 +17,7 @@ defineEmits(["tabchange"]);
 </script>
 
 <template>
-  <tabs-body>
+  <tabs-body class="mt-10">
     <tabs class="is-line">
       <tab-item :is-active="activeTab === 'edit'">
         <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>

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

@@ -1,2 +0,0 @@
-@import "./sidebar-tabs";
-@import "./sidebar-tabs-layout";

package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs-layout.scss

@@ -1,16 +0,0 @@
-.sidebar-tabs-layout {
-  .sidebar-tabs-wrapper {
-    position: fixed;
-    background-color: $white-100;
-  }
-  .pl-220 {
-    padding-left: 220px;
-  }
-  .content-wrapper {
-    padding-bottom: 40px;
-    width: 100%;
-    &:has(.form-footer) {
-      padding-bottom: 0;
-    }
-  }
-}

package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss

@@ -1,195 +0,0 @@
-.sidebar-tabs {
-  width: 220px;
-  border-right: 1px solid $primary-95;
-  padding: 8px;
-  height: calc(100vh - 50px);
-  ul {
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        color: $primary-10;
-        position: relative;
-        z-index: 1;
-        padding: 8px 16px;
-        font-weight: 500;
-        transition: 0.3s ease-in-out;
-        align-items: center;
-        justify-content: space-between;
-
-        &:after {
-          position: absolute;
-          content: "";
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          background-color: $primary-95;
-          border-radius: 4px;
-          z-index: -1;
-          opacity: 0;
-          visibility: hidden;
-          transition: 0.3s ease-in-out;
-        }
-        &:hover {
-          color: $primary;
-
-          &:after {
-            opacity: 1;
-            visibility: visible;
-            background-color: $primary-97;
-          }
-        }
-        &.is-active {
-          color: $primary;
-          &:hover {
-            &::after {
-              background-color: $primary-90;
-            }
-          }
-          &:after {
-            opacity: 1;
-            visibility: visible;
-          }
-          &.is-danger {
-            color: $danger;
-            &:hover {
-              &::after {
-                background-color: $red-90;
-              }
-            }
-            &:after {
-              opacity: 1;
-              visibility: visible;
-              background-color: $red-95;
-            }
-          }
-          &.is-success {
-            color: $success;
-            &:hover {
-              &::after {
-                background-color: $green-90;
-              }
-            }
-            &:after {
-              opacity: 1;
-              visibility: visible;
-              background-color: $green-95;
-            }
-          }
-          &.is-warning {
-            color: $warning;
-            &:hover {
-              &::after {
-                background-color: $yellow-90;
-              }
-            }
-            &:after {
-              opacity: 1;
-              visibility: visible;
-              background-color: $yellow-95;
-            }
-          }
-        }
-        &.is-danger {
-          color: $danger;
-          &:hover {
-            &::after {
-              background-color: $red-90;
-            }
-          }
-          &:after {
-            opacity: 1;
-            visibility: visible;
-            background-color: transparent;
-          }
-        }
-        &.is-success {
-          color: $success;
-          &:hover {
-            &::after {
-              background-color: $green-90;
-            }
-          }
-          &:after {
-            opacity: 1;
-            visibility: visible;
-            background-color: transparent;
-          }
-        }
-        &.is-warning {
-          color: $warning;
-          &:hover {
-            &::after {
-              background-color: $yellow-90;
-            }
-          }
-          &:after {
-            opacity: 1;
-            visibility: visible;
-            background-color: transparent;
-          }
-        }
-      }
-      &.is-open {
-        transition: 0.3s ease-in-out;
-        ul {
-          max-height: 250px;
-        }
-      }
-      ul {
-        margin-left: 20px;
-        position: relative;
-        z-index: 1;
-        max-height: 0;
-        transition: 0.3s ease-in-out !important;
-        overflow: hidden;
-        &:after {
-          position: absolute;
-          content: "";
-          left: 4px;
-          top: 0;
-          width: 1px;
-          height: calc(100% - 10px);
-          background-color: $primary-90;
-        }
-        li {
-          a {
-            &:after {
-              left: -8px;
-              opacity: 0 !important;
-              visibility: hidden !important;
-            }
-            &::before {
-              position: absolute;
-              content: "";
-              left: 0;
-              top: 50%;
-              margin-top: -4px;
-              width: 8px;
-              height: 8px;
-              border-radius: 50%;
-              background-color: $primary;
-              transition: 0.3s ease-in-out;
-              opacity: 0;
-              visibility: hidden;
-            }
-            &:hover:not(&.is-active) {
-              &::before {
-                opacity: 1;
-                visibility: visible;
-                background-color: $primary-80;
-              }
-            }
-            &.is-active {
-              &::before {
-                opacity: 1;
-                visibility: visible;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}