@appscode/design-system 2.6.22-alpha-0.0.9 → 2.6.22-alpha-0.0.10

package/package.json

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

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

@@ -24,9 +24,7 @@ const props = defineProps({
         <!-- Iterate through the items inside each section -->
         <slot name="sidebar-item" v-for="(item, idx) in data.items" :key="idx" :item="item">
           <a :href="item.link || '#'" class="sidebar-item" :class="{ 'is-active': item.isActive }">
-            <span class="icon">
-              <component :is="item.icon || CogIcon" />
-            </span>
+            <span class="icon"><component :is="item.icon || CogIcon" /></span>
             <span>{{ item.text }}</span>
           </a>
         </slot>
@@ -34,51 +32,3 @@ const props = defineProps({
     </div>
   </div>
 </template>
-
-<style lang="scss">
-// sidebar items
-.sidebar-style-2 {
-  border: 1px solid $color-border;
-  border-radius: 4px;
-  box-shadow: 8px 4px 14px 0px rgba(0, 0, 0, 0.05);
-
-  .left-sidebar {
-    width: 250px;
-  }
-
-  .sidebar-items {
-    display: flex;
-    flex-direction: column;
-
-    .sidebar-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      color: $color-text;
-      padding: 8px 16px;
-      transition: 0.1s ease-in-out;
-
-      &:last-child {
-        margin-bottom: 8px;
-      }
-
-      &:hover {
-        background-color: $primary-light-gray;
-      }
-
-      &.is-active {
-        background-color: $ac-primary;
-        color: $white-100;
-      }
-    }
-
-    label {
-      padding: 8px 16px;
-      border-bottom: 1px solid $color-border;
-      text-transform: uppercase;
-      font-weight: 400;
-      color: #616161;
-    }
-  }
-}
-</style>