@appscode/design-system 2.2.57 → 2.2.59

package/package.json

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

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

@@ -624,7 +624,7 @@ li {
         &.multiselect__option--disabled {
           border-top: none !important;
           margin-top: 0 !important;
-          padding-top: 0 !important;
+          padding-top: 12px !important;
         }
       }
     }
@@ -638,7 +638,7 @@ li {
     font-weight: 700 !important;
     font-size: 12px !important;
     border-top: 1px solid $color-border-light;
-    min-height: 24px;
+    min-height: 24px !important;
     padding-top: 16px !important;
     margin-top: 4px !important;
   }

package/vue-components/v3/header/Header.vue

@@ -8,12 +8,14 @@ interface Props {
   title?: string;
   isContainer?: boolean;
   topValue?: string;
+  custom?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   title: "No Title",
   isContainer: false,
   topValue: "86px",
+  custom: false,
 });
 </script>
 
@@ -22,9 +24,12 @@ withDefaults(defineProps<Props>(), {
     <div class="is-flex is-justify-content-space-between" :class="{ container: isContainer }">
       <header-items>
         <header-item>
-          <transition name="fade" mode="out-in" appear>
-            <h4 :key="title">{{ title }} <slot name="controls-metadata" /></h4>
-          </transition>
+          <div v-if="custom">
+            <slot name="custom" />
+          </div>
+          <div v-else>
+            <h4 :key="title">{{ title }}</h4>
+          </div>
         </header-item>
         <slot name="header-left-controls" />
       </header-items>
@@ -37,94 +42,4 @@ withDefaults(defineProps<Props>(), {
 
 <style lang="scss" scoped>
 @import "../../../vue-components/styles/components/header/header";
-
-// footer control start
-// .form-footer-controls {
-//   .form-footer-control {
-//     display: inline-block;
-//     margin-left: 8px;
-//     vertical-align: middle;
-
-//     &:first-child {
-//       margin-left: 0;
-//     }
-//   }
-// }
-
-// .dashboard-header {
-//   padding: 10px 20px;
-//   border-radius: 4px;
-//   background-color: $white-100;
-//   min-height: 75px;
-//   display: table;
-//   width: 100%;
-//   border-left: 5px solid $ac-primary;
-//   border-bottom: 1px solid $color-border;
-//   border-top: 1px solid $color-border;
-//   border-right: 1px solid $color-border;
-
-//   .dashboard-header-wrapper {
-//     height: 100%;
-//     display: table;
-//     width: 100%;
-
-//     .dashboard-header-inner {
-//       display: table-cell;
-//       vertical-align: middle;
-//     }
-//   }
-// }
-
-// .dashboard-header-inner-top {
-//   height: 100%;
-//   vertical-align: middle;
-//   display: table-cell;
-// }
-
-// .dashboard-header.is-chart-available {
-//   padding: 10px 30px;
-
-//   .dashboard-header-wrapper {
-//     height: 100%;
-//     display: table;
-//     width: 100%;
-
-//     .dashboard-header-inner {
-//       display: table-cell;
-//       vertical-align: middle;
-//     }
-//   }
-// }
-
-// .resource {
-//   display: flex;
-//   align-items: center;
-//   border-left: 1px solid $color-border;
-//   padding: 0 1.5rem;
-//   margin-top: -10px;
-//   margin-bottom: -10px;
-//   .r-icon {
-//     display: flex;
-//     align-items: center;
-//     max-width: 40px;
-//   }
-
-//   .r-data {
-//     margin-left: 0.8rem;
-//     .request,
-//     .limit {
-//       font-weight: 500;
-//       min-width: 50px;
-//       text-align: center;
-//     }
-//     .request {
-//       font-weight: 300;
-//     }
-//     hr {
-//       margin: 0;
-//       padding: 0;
-//       background-color: $color-border;
-//     }
-//   }
-// }
 </style>