@appscode/design-system 1.1.0-beta.25 → 1.1.0-beta.26

package/components/_wizard.scss

@@ -15,7 +15,7 @@
 //   margin-bottom: 10px;
 // }
 
-// label action start
+// // label action start
 // .label-action {
 //   align-items: center;
 //   height: 21px;
@@ -112,7 +112,6 @@
 
 // select card start
 
-
 // select card end
 
 // final state start
@@ -566,16 +565,21 @@
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {}
+@media (max-width: 575.98px) {
+}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {}
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {}
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {
+}

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

@@ -198,7 +198,6 @@
 }
 
 .is-collapsed {
-
   &.ac-nested-elements::before,
   &.ac-nested-elements::after {
     display: none;
@@ -211,7 +210,16 @@
   flex-wrap: wrap;
   gap: 15px;
 }
-
+.table {
+  tr {
+    &.is-selected {
+      background-color: $primary-97;
+      strong {
+        color: $primary;
+      }
+    }
+  }
+}
 // dark theme start
 // .is-dark-theme {
 //   .nested-body {
@@ -221,6 +229,81 @@
 //   }
 // }
 
+// label action start
+.label-action {
+  align-items: center;
+  height: 21px;
+
+  .ac-single-input {
+    label {
+      margin-top: 2px;
+    }
+  }
+
+  button:not(.is-text) {
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.3s ease-in-out;
+
+    img {
+      width: 15px;
+    }
+
+    &.label-icon {
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+      padding: 0;
+      transition: 0.3s ease-in-out;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  &:hover {
+    button {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .ms-close-button,
+  .ac-modal-footer {
+    .buttons {
+      button {
+        opacity: 1;
+        visibility: visible;
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
+  .label-icon {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+
+    img {
+      width: 16px;
+    }
+  }
+
+  strong {
+    font-family: $font-paragraph;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+    color: $primary-10;
+    margin-right: 16px;
+  }
+}
+
 //For resource input from
 .resource-input {
   display: grid;
@@ -244,21 +327,64 @@
   top: 7px;
 }
 
+.ac-final-state {
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .state-left {
+    h5 {
+      font-family: $font-paragraph;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 19px;
+      color: $primary-10;
+    }
+
+    button {
+      &.ac-button {
+        opacity: 0;
+        visibility: hidden;
+        transition: 0.3s ease-in-out;
+      }
+    }
+  }
+
+  &:hover {
+    .state-left {
+      button {
+        &.ac-button {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+
 // dark theme end
 /****************************************
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {}
+@media (max-width: 575.98px) {
+}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {}
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {}
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {
+}

package/package.json

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

package/vue-components/v3/notification/AlertBox.vue

@@ -85,6 +85,7 @@ const getSanitizedHtml = (content: string) => {
 
   p {
     color: $primary;
+    margin-bottom: 0;
 
     .close-icon {
       padding-right: 10px;