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

package/components/_widget-menu.scss

@@ -14,7 +14,7 @@
 //           padding-left: 20px;
 
 //           &.is-active {
-//             background-color: $ac-bg;
+//             background-color: transparent;
 //             color: $primary;
 //           }
 
@@ -161,7 +161,7 @@
 //         &:after {
 //           width: 100%;
 //           border-radius: 0;
-//           background-color: $ac-bg;
+//           background-color: transparent;
 //         }
 //       }
 //     }
@@ -252,21 +252,16 @@
 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/_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
@@ -298,7 +297,7 @@
 //   .wizard-title,
 //   .wizard-title.has-line {
 //     span {
-//       background-color: $ac-label-text;
+//       background-color: $primary-10;
 //     }
 //   }
 
@@ -457,7 +456,7 @@
 // .card-checkbox {
 //   width: 358px;
 //   height: 115px;
-//   border: 1px solid $ac-label-text;
+//   border: 1px solid $primary-10;
 // }
 
 // checkbox card end
@@ -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/bbum/_information-center.scss

@@ -81,7 +81,7 @@
           content: "";
           width: 100%;
           height: 100%;
-          background-color: $ac-black;
+          background-color: $black-5;
           z-index: -1;
           opacity: 0.2;
         }
@@ -111,7 +111,7 @@
             top: 0;
             width: 100%;
             height: 100%;
-            background-color: $ac-black;
+            background-color: $black-5;
             opacity: 0.3;
             z-index: -1;
           }
@@ -169,6 +169,7 @@
     }
   }
 }
+
 .ac-system-body.has-ui-builder {
   .information-center .information-center-inner {
     top: 140px;
@@ -187,6 +188,7 @@
     }
   }
 }
+
 // dark theme end
 // Extra small devices (portrait phones, less than 576px)
 @media (max-width: 575.98px) {
@@ -196,17 +198,13 @@
 }
 
 // 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/bbum/_mobile-desktop.scss

@@ -30,7 +30,7 @@
     left: 50%;
     top: 7px;
     transform: translate(-50%, -50%);
-    background-color: $ac-bg;
+    background-color: transparent;
     border-radius: 10px;
   }
 
@@ -44,7 +44,7 @@
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background-color: $ac-bg;
+    background-color: transparent;
     display: block;
     position: absolute;
     top: 2px;
@@ -120,7 +120,7 @@
   .left-content {
     padding: 20px;
     border-radius: 4px;
-    background-color: $ac-bg;
+    background-color: transparent;
 
     h3 {
       margin-bottom: 30px;
@@ -131,7 +131,7 @@
 
   .right-content {
     border-radius: 4px;
-    background-color: $ac-bg;
+    background-color: transparent;
   }
 }
 
@@ -139,21 +139,16 @@
 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/bbum/_single-post-preview.scss

@@ -180,17 +180,21 @@
               left: 24px;
               z-index: -2;
             }
+
             &:hover {
               &:nth-child(2) {
                 z-index: 1;
               }
+
               &:nth-child(3) {
                 z-index: 2;
               }
+
               img {
                 transform: scale(1.2);
               }
             }
+
             img {
               width: 18px;
               transition: 0.3s ease-in-out;
@@ -226,7 +230,7 @@
         cursor: pointer;
         display: block;
         width: 50%;
-        border-right: 1px solid $white-100-light !important;
+        border-right: 1px solid $white-100 !important;
         padding: 10px;
 
         &:last-child {
@@ -278,17 +282,13 @@
 }
 
 // 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

@@ -153,7 +153,7 @@
     min-width: 630px;
 
     .thead {
-      background-color: $white-100-lighter;
+      background-color: $primary-90;
 
       .tr {
         .th {
@@ -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/components/ui-builder/_vue-open-api.scss

@@ -66,7 +66,7 @@
 .vue-form-scema-body {
   .left-content {
     width: 650px;
-    background-color: $white-100-lighter;
+    background-color: $primary-90;
     padding: 30px;
   }
 

package/layouts/_code-preview.scss

@@ -9,7 +9,7 @@
     background-color: $white-100;
 
     &.ac-bg {
-      background-color: $ac-bg;
+      background-color: transparent;
     }
 
     &.is-fullwidth {
@@ -58,13 +58,13 @@
 
       /* Handle */
       &::-webkit-scrollbar-thumb {
-        background-color: $ac-gray-light;
+        background-color: $black-50;
         border-radius: 10px;
       }
 
       /* Handle on hover */
       &::-webkit-scrollbar-thumb:hover {
-        background-color: $ac-gray-light;
+        background-color: $black-50;
       }
 
       .number {
@@ -110,6 +110,7 @@
 // new code preview
 .ac-components {
   margin: 20px;
+
   .single-component {
     // box-shadow: $ac-shadow-1;
     border: 1px solid $primary-90;
@@ -253,9 +254,7 @@ Responsive Classes
 }
 
 // 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.20",
+  "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/alert/Alert.vue

@@ -232,7 +232,7 @@ AC Toast
 // dark theme start
 // .is-dark-theme {
 //   .ac-notification.is-danger {
-//     background-color: $dark-bg-light;
+//     background-color: $black-80;
 //   }
 // }
 </style>

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

@@ -79,7 +79,7 @@ const handleClick = (e: Event) => {
   }
 }
 button.is-primary {
-  background-color: $ac-primary;
+  background-color: $primary;
 }
 // .button {
 //   transition: 86ms ease-in-out;
@@ -252,19 +252,19 @@ button.is-primary {
 //         color: $black-40;
 
 //         &:hover {
-//           background-color: $white-100-lighter;
-//           color: $ac-black;
+//           background-color: $primary-90;
+//           color: $black-5;
 //         }
 
 //         &:focus {
-//           background-color: $white-100-lighter;
-//           color: $ac-black;
+//           background-color: $primary-90;
+//           color: $black-5;
 //         }
 //       }
 
 //       &.transparent-bg {
 //         background-color: transparent;
-//         border: 1px solid $ac-label-text;
+//         border: 1px solid $primary-10;
 
 //         img {
 //           &:hover {
@@ -540,7 +540,7 @@ button.is-primary {
 // // counter button start
 // .ac-counter-button {
 //   background-color: transparent;
-//   border: 1px solid $ac-label-text;
+//   border: 1px solid $primary-10;
 //   border-radius: 4px;
 //   height: 46px;
 //   overflow: hidden;
@@ -587,13 +587,13 @@ button.is-primary {
 //   .ac-counter-arrow-wrapper {
 //     height: 100%;
 //     color: $primary-10;
-//     border-left: 1px solid $ac-label-text;
+//     border-left: 1px solid $primary-10;
 
 //     .ac-counter-arrow {
 //       background-color: transparent;
 //       border: none;
 //       cursor: pointer;
-//       color: $ac-label-text;
+//       color: $primary-10;
 //       height: 23px;
 
 //       &:hover {
@@ -601,7 +601,7 @@ button.is-primary {
 //       }
 
 //       &:first-child {
-//         border-bottom: 1px solid $ac-label-text;
+//         border-bottom: 1px solid $primary-10;
 //       }
 //     }
 //   }

package/vue-components/v3/footer/Status.vue

@@ -28,15 +28,9 @@ withDefaults(defineProps<Props>(), {
       :modifier-classes="item.color"
     >
       <span class="icon">
-        <HeroiconsCheckBadge
-          v-if="item.color === `has-text-success`"
-          :size="20"
-        />
-        <HeroiconsLoadingBadge
-          v-else-if="item.color === `has-text-warning`"
-          :size="20"
-        />
-        <HeroiconsCrossBadge v-else :size="20" />
+        <HeroiconsCheckBadge v-if="item.color === `has-text-success`" />
+        <HeroiconsLoadingBadge v-else-if="item.color === `has-text-warning`" />
+        <HeroiconsCrossBadge v-else />
       </span>
       <span>{{ item.label }}</span>
     </footer-item>

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

@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
       <header-items>
         <header-item>
           <transition name="fade" mode="out-in" appear>
-            <h5 :key="title">{{ title }}</h5>
+            <h4 :key="title">{{ title }}</h4>
           </transition>
         </header-item>
         <slot name="header-left-controls" />

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;
@@ -281,7 +282,7 @@ AC Toast
 // dark theme start
 // .is-dark-theme {
 //   .ac-notification.is-danger {
-//     background-color: $dark-bg-light;
+//     background-color: $black-80;
 //   }
 // }
 </style>