@appscode/design-system 1.0.43-alpha.18 → 1.0.43-alpha.181

package/base/utilities/_default.scss

@@ -4,6 +4,7 @@
   grid-gap: 0px;
   grid-template-columns: 270px calc(100% - 270px);
   padding-top: 50px;
+
   &.is-fullwidth {
     grid-template-columns: auto !important;
 
@@ -22,27 +23,36 @@
     }
   }
 
+  &.in-ui-builder {
+    grid-template-columns: calc(100% - 270px) 270px !important;
+  }
+
   &.has-ui-builder {
     grid-template-columns: 70px calc(100% - 70px);
     grid-gap: 0;
+
     .inner-header {
       position: sticky;
       top: 100px;
-      background-color: #fff;
+      background-color: $ac-white;
       z-index: 997;
     }
+
     .ac-system-content {
       &.pr-15 {
         padding-right: 0 !important;
       }
+
       .ac-terminal {
         width: calc(100% - 290px);
         left: 289px;
       }
     }
+
     .ac-system-left-sidebar.is-expanded {
       z-index: 998;
     }
+
     &.expanded-sidebar {
       grid-gap: 0px;
       z-index: 9;
@@ -70,15 +80,18 @@
     .ac-system-body {
       padding-top: 0;
       grid-template-columns: 220px calc(100% - 440px) 220px;
+
       .ac-system-left-sidebar {
         border-right: none !important;
         height: calc(100vh - 60px);
+
         .ac-left-sidebar-wrapper {
           position: fixed;
           top: 140px;
           width: 219px;
-          border-right: 1px solid #e7e7e7;
+          border-right: 1px solid $ac-white-light;
           height: 100%;
+
           ul.menu-list-wrapper {
             padding-top: 10px;
           }
@@ -94,6 +107,7 @@
   .ac-system-left-sidebar {
     border-right: 1px solid $ac-white-light;
     box-shadow: none;
+
     &.is-expanded {
       z-index: 998;
 
@@ -129,10 +143,55 @@
     }
   }
 }
+.ac-system-body {
+  &.is-preview-step {
+    grid-template-columns: calc(100% - 270px) 270px !important;
+  }
+}
 .form-content {
   width: 720px;
 }
 
+.dropdown-content {
+  background-color: $ac-white;
+}
+
+// color swatch start
+input[type="color"] {
+  -webkit-appearance: none;
+  border: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid #777;
+  margin-left: 3px;
+  padding: 2px;
+  cursor: pointer;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+// input[type="color"]::-moz-color-swatch,
+input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 50%;
+}
+input[type="color"]::-moz-color-swatch {
+  border: none;
+  border-radius: 50%;
+}
+// color swatch end
+
+.is-dark-theme {
+  .dropdown-content {
+    background-color: $dark-bg-light;
+  }
+}
+
+.ac-preloader {
+  color: $ac-color-text;
+}
+
 .section-padding {
   padding: 100px 0;
 }
@@ -166,21 +225,27 @@
 .is-not-fixed {
   position: inherit !important;
 }
+
 .b-1 {
   border: 1px solid $ac-white-light;
 }
+
 .b-t-1 {
   border-top: 1px solid $ac-white-light;
 }
+
 .b-b-1 {
   border-bottom: 1px solid $ac-white-light;
 }
+
 .b-l-1 {
   border-left: 1px solid $ac-white-light;
 }
+
 .b-r-1 {
   border-right: 1px solid $ac-white-light;
 }
+
 // border none
 .is-border-none {
   border: none !important;
@@ -206,6 +271,7 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 .no-data-image {
   img {
     width: 250px;
@@ -226,6 +292,23 @@
     -webkit-box-orient: vertical;
   }
 }
+// toast css third-party
+
+.toasted-container {
+  .ac-toast-action.mr-10 {
+    text-decoration: underline !important;
+  }
+  .has-report-issue {
+    padding-right: 140px !important;
+  }
+}
+.is-dark-theme {
+  .toasted-container {
+    i.fa {
+      color: #ffffff !important;
+    }
+  }
+}
 
 // flex start
 .is-middle-alignment {
@@ -409,9 +492,20 @@
   color: $ac-red;
   text-align: left;
 }
+p.is-error {
+  color: $ac-red;
+}
 code {
   color: $ac-color-heading;
 }
+
+.is-dark-theme {
+  code {
+    background-color: $dark-bg-light;
+    color: $ac-full-white;
+  }
+}
+
 .is-danger:not(.ac-button) {
   color: $ac-danger !important;
 }
@@ -433,37 +527,57 @@ button {
   height: 18px;
   letter-spacing: 0.1px;
   color: $ac-color-heading;
+
+  a {
+    &:hover {
+      color: $ac-color-text;
+    }
+  }
+
   &.is-available {
     background-color: #27b064;
     color: $ac-white;
   }
+
   &.is-success {
     background-color: $ac-green;
     color: $ac-white;
+
     &.is-light {
       background-color: rgba(39, 176, 100, 0.2);
       color: $ac-green;
     }
   }
+
   &.is-primary {
     background-color: $ac-primary;
     color: $ac-white;
+
     &.is-light {
       background-color: rgba(25, 113, 189, 0.2);
       color: $ac-primary;
     }
   }
+
   &.is-gray {
     background-color: #e5e9f2;
-    color: #666;
+    color: $ac-gray-darker;
   }
+
   &.is-warning {
     background-color: $ac-warning;
-    color: $ac-white !important;
+    color: $ac-white;
+
+    &.is-light {
+      background-color: #ffd58b42;
+      color: #c88b21;
+    }
   }
+
   &.is-danger {
     background-color: $ac-red;
     color: $ac-white !important;
+
     &.is-light {
       background-color: rgba(234, 61, 47, 0.2);
       color: $ac-red !important;
@@ -475,6 +589,7 @@ button {
   .icon {
     margin-bottom: 0.5rem;
   }
+
   .tag {
     a {
       font-weight: 500;
@@ -652,6 +767,147 @@ $border_color_4: transparent transparent #585d6e transparent;
     }
   }
 }
+// tooltip in vue-open-api
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  &.is-button-info {
+    .tooltip-inner {
+      background: $ac-white;
+      color: $ac-primary;
+      border-radius: 4px;
+      padding: 5px 20px 4px;
+      box-shadow: $ac-shadow-1;
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .tooltip-arrow {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      position: absolute;
+      margin: 5px;
+      border-color: $ac-white;
+    }
+  }
+
+  &.is-errors-tooltip {
+    .tooltip-inner {
+      background: $ac-white;
+      color: $ac-danger;
+      border-radius: 4px;
+      padding: 5px 20px 4px;
+      box-shadow: $ac-shadow-1;
+      font-weight: 500;
+      font-size: 13px;
+
+      .errors-wrapper {
+        .error-element {
+          padding: 5px 0;
+        }
+      }
+    }
+
+    .tooltip-arrow {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      position: absolute;
+      margin: 5px;
+      border-color: $ac-white;
+    }
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+    $color: #f9f9f9;
+
+    .popover-inner {
+      background: $color;
+      color: black;
+      padding: 24px;
+      border-radius: 4px;
+      box-shadow: $ac-shadow-1;
+    }
+
+    .popover-arrow {
+      border-color: $color;
+    }
+  }
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.15s, visibility 0.15s;
+  }
+
+  &[aria-hidden="false"] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.15s;
+  }
+}
 
 // Customize tooltip end
 
@@ -701,6 +957,15 @@ $border_color_4: transparent transparent #585d6e transparent;
 // Status css
 // ac-footer sticky end
 
+// terminal scss end
+.is-dark-theme {
+  a {
+    &:hover {
+      color: #485fc7;
+    }
+  }
+}
+
 /****************************************
 Responsive Classes
 *****************************************/

package/base/utilities/_derived-variables.scss

@@ -10,7 +10,6 @@ $ac-color-heading: var(--ac-text-heading);
 
 // Link colors
 $ac-link: $ac-blue;
-$ac-link-black: #32325d;
 $ac-link-visited: $ac-purple;
 
 // Box Shadow

package/base/utilities/_initial-variables.scss

@@ -1,7 +1,5 @@
 // Typography
-@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-// font rubik
-@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");
 
 $ac-family-heading: "Roboto", sans-serif;
 $ac-family-paragraph: "Roboto", sans-serif;
@@ -25,10 +23,10 @@ $font-size-tiny: 11px;
 // Base Color
 $ac-orange: #ff8000;
 $ac-yellow: #f7ad2a;
-$ac-green: #27b064;
+$ac-green: #158748;
 $ac-blue: #0aafff;
 $ac-purple: #791e94;
-$ac-red: #ea3d2f;
+$ac-red: #ff3729;
 
 // Products Color
 $voyager-primary: #2d2a78;
@@ -51,9 +49,9 @@ $swift-primary: #3f51b6;
   --hsl-saturation: 77%;
   --hsl-lightness: 42%;
   --contrast-threshold: 60%;
-
-  --bg-color: #ffffff;
+  --ac-bg: #ffffff;
   --ac-white: #ffffff;
+  --ac-full-white: #ffffff;
   --ac-gray-dark: #5f5f5f;
   --ac-gray-light: #8d8d8d;
   --ac-gray-lightest: #d1d1d1;
@@ -62,17 +60,20 @@ $swift-primary: #3f51b6;
 
   --ac-black: #000000;
   --ac-color-text-90: #323232;
+  --ac-link-black: #32325d;
   --ac-gray-darker: #494949;
   --ac-gray: #767676;
   --ac-gray-lighter: #a4a4a4;
+  --ac-white-text: #b4c0cc;
+
   // theme color
   --dark-bg: #21272e;
   --dark-bg-light: #2e323c;
 
-  --ac-input-bg-color: #eceff4;
+  --ac-blue-light: #eceff4;
   --ac-bg-light-gray: #f4f6f9;
   --table-header: #e4e8ef;
-  --ac-border: #a6abbd;
+  --ac-label-text: #a6abbd;
 
   --font-hsl-hue: 0;
   --font-hsl-saturation: 0%;
@@ -84,6 +85,7 @@ $swift-primary: #3f51b6;
     var(--hsl-lightness),
     1
   );
+
   --ac-text: hsla(
     var(--font-hsl-hue),
     calc(var(--font-hsl-saturation) + 10%),
@@ -103,13 +105,14 @@ $swift-primary: #3f51b6;
   );
 }
 
-$ac-bg: var(--bg-color);
+$ac-bg: var(--ac-bg);
 $ac-primary: var(--ac-primary);
 $ac-color-value: var(--ac-color-value);
 
 // Colors
 $ac-black: var(--ac-black);
-$ac-color-text-90: var(ac-color-text-90);
+$ac-color-text-90: var(--ac-color-text-90);
+$ac-link-black: var(--ac-link-black);
 $ac-gray-darker: var(--ac-gray-darker);
 $ac-gray-dark: var(--ac-gray-dark);
 $ac-gray: var(--ac-gray);
@@ -119,179 +122,17 @@ $ac-gray-lightest: var(--ac-gray-lightest);
 $ac-white-light: var(--ac-white-light);
 $ac-white-lighter: var(--ac-white-lighter);
 $ac-white: var(--ac-white);
+$ac-full-white: var(--ac-full-white);
 
-$ac-input-bg-color: var(--ac-input-bg-color);
+$ac-blue-light: var(--ac-blue-light);
 $ac-bg-light-gray: var(--ac-bg-light-gray);
 $table-header: var(--table-header);
-$ac-border: var(--ac-border);
+$ac-label-text: var(--ac-label-text);
 
 // for dark theme CSS
 $dark-bg: var(--dark-bg);
 $dark-bg-light: var(--dark-bg-light);
 
-.is-dark-theme {
-  --ac-white: #21272e;
-  --ac-black: #b4c0cc;
-  --ac-text-heading: #b4c0cc;
-  --ac-text: #98a6b4;
-  --ac-gray-light: #424242;
-  --ac-gray-lightest: #777777;
-  --ac-white-light: #3f3f3f;
-  --ac-white-lighter: #2e323c;
-  --ac-color-value: hsl(
-    var(--font-hsl-hue),
-    var(--font-hsl-saturation),
-    calc(var(--font-hsl-lightness) + 60%)
-  );
-}
-
-.is-dark-theme {
-  --ac-border: #404040;
-
-  body {
-    background-color: $dark-bg;
-
-    .ac-navbar-area {
-      background-color: $dark-bg-light;
-      --ac-white: #ffffff;
-      --ac-white-lighter: #f1f1f1;
-
-      .ac-navbar {
-        .search-item {
-          background-color: rgba(0, 0, 0, 0.2);
-        }
-
-        .ac-navbar-menu {
-          .ac-menu-item {
-            .quick-access {
-              --ac-white: $dark-bg-light;
-            }
-
-            .ac-menu-content {
-              background-color: $dark-bg-light;
-
-              &::after {
-                --ac-white: $dark-bg-light;
-              }
-
-              .user-profile-wrapper {
-                --ac-white: $dark-bg-light;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .ac-options {
-      .options-items {
-        --ac-white: $dark-bg-light;
-      }
-    }
-
-    h6.wizard-title.has-line:after {
-      --ac-input-bg-color: #555;
-    }
-
-    .ac-payment-card,
-    .ac-single-card,
-    .button.ac-button,
-    .option-dots {
-      --ac-white: #b4c0cc;
-    }
-
-    .tabs {
-      a {
-        border-bottom: 1px solid $ac-white-lighter;
-      }
-    }
-
-    .nested-body {
-      code {
-        background-color: $dark-bg-light;
-      }
-    }
-
-    .ac-single-input {
-      input,
-      .file-input,
-      .ac-dropdown-content {
-        background-color: transparent;
-      }
-
-      label {
-        color: #999999;
-      }
-    }
-
-    .ac-single-card {
-      background-color: $dark-bg-light;
-
-      &.style-three {
-        background-color: $dark-bg-light;
-      }
-
-      .ac-card-body {
-        p {
-          color: #999999;
-        }
-      }
-    }
-
-    .information-center {
-      .information-center-inner {
-        .info-body {
-          .block-list {
-            background-color: $dark-bg-light;
-          }
-        }
-      }
-    }
-
-    .single-subscription-card {
-      background-color: $dark-bg-light;
-    }
-
-    .pricing-card-wrpper {
-      &.offer-card {
-        background-color: $dark-bg-light;
-      }
-
-      .ac-card {
-        background-color: $dark-bg-light;
-      }
-    }
-
-    .ac-certificate-info {
-      --ac-bg-light-gray: $dark-bg-light;
-    }
-
-    // multiselect
-    .multi-select-wrapper {
-      // .multiselect .multiselect__tags {
-      //   --ac-border: #404040;
-      // }
-      .multiselect__content-wrapper {
-        background-color: $dark-bg-light;
-
-        .multiselect__content .multiselect__element .multiselect__option {
-          color: #b4c0cc;
-        }
-
-        .multiselect__option--group {
-          color: #b4c0cc;
-          background-color: $dark-bg-light;
-        }
-
-        .multiselect__option--selected {
-          color: #b4c0cc;
-          background-color: $dark-bg-light;
-        }
-      }
-    }
-  }
-}
-
 /* Deafult Margin & Padding view-height & view-width */
 @for $i from 0 through 100 {
   .m-#{$i} {

package/base/utilities/_mixin.scss

@@ -83,23 +83,7 @@
     &:hover {
       background-color: $colorName;
       color: $ac-white;
-
-      @if (type_of($colorName) == "color") {
-        box-shadow: 0px
-          6px
-          12px
-          scale-color($color: $colorName, $lightness: 70%);
-      } @else {
-        box-shadow: 0px
-          6px
-          12px
-          hsla(
-            var(--hsl-hue),
-            var(--hsl-saturation),
-            var(--hsl-lightness),
-            0.3
-          );
-      }
+      box-shadow: none;
 
       img {
         filter: brightness(100) !important;