@appscode/design-system 0.0.21-alpha.3 → 0.4.27

package/base/utilities/_default.scss

@@ -4,8 +4,9 @@
   grid-gap: 0px;
   grid-template-columns: 270px calc(100% - 270px);
   padding-top: 50px;
+
   &.is-fullwidth {
-    grid-template-columns: auto;
+    grid-template-columns: auto !important;
 
     &.has-info-content {
       grid-template-columns: 270px calc(100% - 540px) 270px;
@@ -22,23 +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;
-      z-index: 9;
+      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: 99;
+      z-index: 998;
     }
+
     &.expanded-sidebar {
       grid-gap: 0px;
       z-index: 9;
@@ -66,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;
           }
@@ -88,11 +105,11 @@
   }
 
   .ac-system-left-sidebar {
-    background-color: $ac-white;
     border-right: 1px solid $ac-white-light;
     box-shadow: none;
+
     &.is-expanded {
-      z-index: 9;
+      z-index: 998;
 
       .ac-product-logo {
         width: 270px !important;
@@ -126,9 +143,73 @@
     }
   }
 }
+
+.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;
+}
+
+.section-padding-60 {
+  padding: 60px 0;
+}
+
+.short-section-padding {
+  padding: 50px 0;
+}
+
 .section-divider {
   background-color: $ac-white-light;
 }
@@ -150,45 +231,35 @@
 .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;
 }
 
-.b-b-n {
-  border-bottom: none !important;
-}
-
-.b-t-n {
-  border-top: none !important;
+.b-1 {
+  border: 1px solid $ac-white-light;
 }
 
-.b-l-n {
-  border-left: none !important;
-}
+// border left, right, top, bottom none
+$positions: (
+  "b": "bottom",
+  "t": "top",
+  "l": "left",
+  "r": "right",
+);
 
-.b-r-n {
-  border-right: none !important;
+@each $key, $position in $positions {
+  .b-#{$key}-n {
+    border-#{$position}: none !important;
+  }
 }
 
-.is-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+// border 1px
+@each $key, $position in $positions {
+  .b-#{$key}-1 {
+    border-#{$position}: 1px solid $ac-white-light;
+  }
 }
 
 // for ellipsis
@@ -204,6 +275,39 @@
   }
 }
 
+.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.no-data-image {
+  img {
+    width: 250px;
+    height: auto;
+    padding: 20px;
+  }
+}
+
+// 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 {
   display: flex;
@@ -244,13 +348,13 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -291,33 +395,33 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-moz-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-ms-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
   }
 
   &::-moz-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
   }
 
   &::-ms-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -348,13 +452,13 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
     border-radius: 50px;
     width: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #929292;
+    background-color: $ac-gray-lightest;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -377,7 +481,7 @@
 
 .is-transparent {
   border: none;
-  background: transparent;
+  background-color: transparent;
 }
 
 .is-error {
@@ -385,15 +489,24 @@
   line-height: 22px;
   color: $ac-red;
   text-align: left;
+}
 
-  i.fa {
-    padding-right: 4px;
-  }
+p.is-error {
+  color: $ac-red;
 }
+
 code {
   color: $ac-color-heading;
 }
-.is-danger:not(.ac-button) {
+
+.is-dark-theme {
+  code {
+    background-color: $dark-bg-light;
+    color: $ac-full-white;
+  }
+}
+
+.has-text-danger{
   color: $ac-danger !important;
 }
 
@@ -408,61 +521,6 @@ button {
   }
 }
 
-.tag:not(body) {
-  background-color: #e5e9f2;
-  font-size: 11px;
-  height: 18px;
-  letter-spacing: 0.1px;
-  color: $ac-color-heading;
-  &.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;
-  }
-  &.is-warning {
-    background-color: $ac-warning;
-    color: $ac-white !important;
-  }
-  &.is-danger {
-    background-color: $ac-red;
-    color: $ac-white !important;
-    &.is-light {
-      background-color: rgba(234, 61, 47, 0.2);
-      color: $ac-red !important;
-    }
-  }
-}
-
-.tags {
-  .icon {
-    margin-bottom: 0.5rem;
-  }
-  .tag {
-    a {
-      font-weight: 500;
-    }
-  }
-}
-
 // line title global start
 .ac-line-title {
   position: relative;
@@ -476,12 +534,12 @@ button {
     top: 12px;
     width: 100%;
     height: 1px;
-    background: $ac-white-light;
+    background-color: $ac-white-light;
   }
 
   h5 {
     color: $ac-color-text;
-    background: $ac-white;
+    background-color: $ac-white;
     z-index: 2;
     display: inline-block;
     position: relative;
@@ -634,13 +692,155 @@ $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
 
 // ac-footer sticky start
 .ac-footer-action {
   margin-top: 10px;
   padding-top: 10px;
-  background: $ac-white;
+  background-color: $ac-white;
   padding: 10px 20px;
   margin-left: 0;
   margin-right: 0;
@@ -666,7 +866,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   height: 10px;
   width: 10px;
   border-radius: 50%;
-  background: $ac-grey-lightest;
+  background-color: $ac-gray-lightest;
   border: 2px solid $ac-white;
   display: inline-flex;
 
@@ -682,6 +882,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

@@ -1,28 +1,15 @@
-// Typography
-$ac-size-small: $ac-size-7;
-$ac-size-normal: $ac-size-6;
-$ac-size-medium: $ac-size-5;
-$ac-size-large: $ac-size-4;
-
 // color
 $ac-info: $ac-blue;
 $ac-success: $ac-primary;
 $ac-warning: $ac-yellow;
 $ac-danger: $ac-red;
 
-// bg-color
-$ac-bg-dark: #2c2e42;
-$ac-modal-header-bg: #e8e8e8;
-$ac-input-bg-color: #eceff4;
-$ac-bg-light-gray: #f4f6f9;
-$table-header: #e4e8ef;
 // Text colors
-$ac-color-text: #393e46;
-$ac-color-heading: #1c1c1c;
+$ac-color-text: var(--ac-text);
+$ac-color-heading: var(--ac-text-heading);
 
 // Link colors
 $ac-link: $ac-blue;
-$ac-link-black: #32325d;
 $ac-link-visited: $ac-purple;
 
 // Box Shadow
@@ -30,3 +17,9 @@ $ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
 $ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
 $ac-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
   0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+
+$ac-shadow-sm: 0 1px 4px rgba(26, 80, 151, 0.16);
+$ac-shadow-xl: 0px 8px 57px rgba(0, 0, 0, 0.16);
+$ac-shadow-lg: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
+  0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+

package/base/utilities/_grid.scss

@@ -0,0 +1,29 @@
+.grid {
+  display: grid;
+}
+
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+.grid-cols-none {
+  grid-template-columns: none;
+}
+
+@for $i from 1 through 12 {
+  .col-span-#{$i} {
+    grid-column: span #{$i} / span #{$i};
+  }
+}
+
+.col-auto {
+  grid-column: auto;
+}
+
+@for $i from 0 through 30 {
+  .gap-#{$i} {
+    gap: #{$i}px;
+  }
+}