@appscode/design-system 1.1.0 → 2.0.0

package/base/utilities/{_default.scss → _global.scss}

@@ -1,162 +1,56 @@
-// default layout css
-.ac-system-body {
-  display: grid;
-  grid-gap: 0px;
-  grid-template-columns: 270px calc(100% - 270px);
-  padding-top: 50px;
-
-  &.is-fullwidth {
-    grid-template-columns: auto !important;
-
-    &.has-info-content {
-      grid-template-columns: 270px calc(100% - 540px) 270px;
-    }
-  }
-
-  &.has-info-content {
-    grid-template-columns: 270px calc(100% - 540px) 270px;
-
-    .ac-system-content {
-      &.pr-15 {
-        padding-right: 0 !important;
-      }
-    }
-  }
-
-  &.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: $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;
-      grid-template-columns: 270px calc(100% - 270px);
-
-      .is-fullwidth {
-        .ac-system-content {
-          padding-left: 0;
-        }
-      }
-    }
-
-    .is-fullwidth {
-      grid-template-columns: auto;
-
-      &.has-info-content {
-        grid-template-columns: calc(100% - 260px) 240px;
-      }
-
-      .ac-system-content {
-        padding-left: 20px;
-      }
-    }
-
-    .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 $ac-white-light;
-          height: 100%;
+// border left, right, top, bottom none
+$positions: (
+  "b": "bottom",
+  "t": "top",
+  "l": "left",
+  "r": "right",
+);
 
-          ul.menu-list-wrapper {
-            padding-top: 10px;
-          }
-        }
-      }
-    }
+@each $key, $position in $positions {
+  .b-#{$key}-n {
+    border-#{$position}: none !important;
   }
+}
 
-  &.has-deploy-flow {
-    grid-template-columns: 65% 35%;
+// border position 1px
+@each $key, $position in $positions {
+  .b-#{$key}-1 {
+    border-#{$position}: 1px solid $primary-90;
   }
+}
 
-  .ac-system-left-sidebar {
-    border-right: 1px solid $ac-white-light;
-    box-shadow: none;
-
-    &.is-expanded {
-      z-index: 998;
-
-      .ac-product-logo {
-        width: 270px !important;
-        justify-content: flex-start !important;
-      }
+// border 1px
+.b-1 {
+  border: 1px solid $primary-90;
+}
 
-      .menu-list {
-        box-shadow: 2px -1px 8px rgba(26, 80, 151, 0.16);
-
-        &.ac-menu-list {
-          width: 270px !important;
-          background-color: $ac-white;
-
-          li {
-            a {
-              strong {
-                display: block !important;
-              }
-            }
-
-            ul {
-              li {
-                a {
-                  padding-left: 50px !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+.is-fullwidth {
+  width: 100%;
+}
+.is-fullheight {
+  height: 100%;
 }
 
-.ac-system-body {
-  &.is-preview-step {
-    grid-template-columns: calc(100% - 270px) 270px !important;
+// for ellipsis
+@for $i from 0 through 10 {
+  .is-ellipsis-#{$i} {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: #{$i};
+    -webkit-line-clamp: #{$i};
+    box-orient: vertical;
+    -webkit-box-orient: vertical;
   }
 }
 
 .form-content {
-  width: 720px;
+  width: 800px;
 }
 
-.dropdown-content {
-  background-color: $ac-white;
-}
+// .dropdown-content {
+//   background-color: $white-100;
+// }
 
 // color swatch start
 input[type="color"] {
@@ -186,33 +80,37 @@ input[type="color"]::-moz-color-swatch {
   border-radius: 50%;
 }
 
+hr {
+  background-color: $primary-90;
+}
+
 // color swatch end
 
-.is-dark-theme {
-  .dropdown-content {
-    background-color: $dark-bg-light;
-  }
-}
+// .is-dark-theme {
+//   .dropdown-content {
+//     background-color: $black-80;
+//   }
+// }
 
-.ac-preloader {
-  color: $ac-color-text;
-}
+// .ac-preloader {
+//   color: $primary-10;
+// }
 
-.section-padding {
-  padding: 100px 0;
-}
+// .section-padding {
+//   padding: 100px 0;
+// }
 
-.section-padding-60 {
-  padding: 60px 0;
-}
+// .section-padding-60 {
+//   padding: 60px 0;
+// }
 
-.short-section-padding {
-  padding: 50px 0;
-}
+// .short-section-padding {
+//   padding: 50px 0;
+// }
 
-.section-divider {
-  background-color: $ac-white-light;
-}
+// .section-divider {
+//   background-color: $primary-90;
+// }
 
 .is-auto-hight {
   height: auto !important;
@@ -237,44 +135,6 @@ input[type="color"]::-moz-color-swatch {
   border: none !important;
 }
 
-.b-1 {
-  border: 1px solid $ac-white-light;
-}
-
-// border left, right, top, bottom none
-$positions: (
-  "b": "bottom",
-  "t": "top",
-  "l": "left",
-  "r": "right",
-);
-
-@each $key, $position in $positions {
-  .b-#{$key}-n {
-    border-#{$position}: none !important;
-  }
-}
-
-// border 1px
-@each $key, $position in $positions {
-  .b-#{$key}-1 {
-    border-#{$position}: 1px solid $ac-white-light;
-  }
-}
-
-// for ellipsis
-@for $i from 0 through 10 {
-  .is-ellipsis-#{$i} {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    line-clamp: #{$i};
-    -webkit-line-clamp: #{$i};
-    box-orient: vertical;
-    -webkit-box-orient: vertical;
-  }
-}
-
 .is-disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -315,17 +175,17 @@ $positions: (
   vertical-align: middle;
 }
 
-.is-flex-start {
-  justify-content: flex-start !important;
-}
+// .is-flex-start {
+//   justify-content: flex-start !important;
+// }
 
-.is-flex-center {
-  justify-content: center !important;
-}
+// .is-flex-center {
+//   justify-content: center !important;
+// }
 
-.is-flex-end {
-  justify-content: flex-end;
-}
+// .is-flex-end {
+//   justify-content: flex-end;
+// }
 
 .ac-vcentered {
   display: flex;
@@ -348,13 +208,13 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -395,33 +255,33 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-moz-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-ms-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     height: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &::-moz-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &::-ms-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -452,13 +312,13 @@ $positions: (
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
     border-radius: 50px;
     width: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: $ac-gray-lightest;
+    background-color: $black-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
@@ -466,7 +326,6 @@ $positions: (
   }
 }
 
-// flex end
 .is-transparent-bg {
   background-color: transparent !important;
 }
@@ -484,35 +343,35 @@ $positions: (
   background-color: transparent;
 }
 
-.is-error {
-  font-size: 12px;
-  line-height: 22px;
-  color: $ac-red;
-  text-align: left;
-}
+// .is-danger {
+//   font-size: 12px;
+//   line-height: 22px;
+//   color: $danger;
+//   text-align: left;
+// }
 
-p.is-error {
-  color: $ac-red;
+p.is-danger {
+  color: $danger;
 }
 
 code {
-  color: $ac-color-heading;
+  color: $primary-5;
 }
 
 .is-dark-theme {
   code {
-    background-color: $dark-bg-light;
-    color: $ac-full-white;
+    background-color: $black-80;
+    color: $white-100;
   }
 }
 
-.has-text-danger{
-  color: $ac-danger !important;
+.has-text-danger {
+  color: $danger !important;
 }
 
-.responsive-only {
-  display: none;
-}
+// .responsive-only {
+//   display: none;
+// }
 
 button {
   &:focus {
@@ -522,53 +381,53 @@ button {
 }
 
 // line title global start
-.ac-line-title {
-  position: relative;
-  z-index: 1;
-  margin-bottom: 10px;
-
-  &:after {
-    position: absolute;
-    content: "";
-    left: 0;
-    top: 12px;
-    width: 100%;
-    height: 1px;
-    background-color: $ac-white-light;
-  }
-
-  h5 {
-    color: $ac-color-text;
-    background-color: $ac-white;
-    z-index: 2;
-    display: inline-block;
-    position: relative;
-    padding-right: 5px;
-    font-family: "roboto";
-  }
-}
+// .ac-line-title {
+//   position: relative;
+//   z-index: 1;
+//   margin-bottom: 10px;
+
+//   &:after {
+//     position: absolute;
+//     content: "";
+//     left: 0;
+//     top: 12px;
+//     width: 100%;
+//     height: 1px;
+//     background-color: $primary-90;
+//   }
+
+//   h5 {
+//     color: $primary-10;
+//     background-color: $white-100;
+//     z-index: 2;
+//     display: inline-block;
+//     position: relative;
+//     padding-right: 5px;
+//     font-family: "roboto";
+//   }
+// }
 
 // line title global end
 // docs preview start
-.docs-preview {
-  pre {
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    font-size: 12px;
-    font-weight: 600;
-    padding: 2px 5px;
-  }
-}
+// .docs-preview {
+//   pre {
+//     margin: 0;
+//     display: inline-flex;
+//     align-items: center;
+//     font-size: 12px;
+//     font-weight: 600;
+//     padding: 2px 5px;
+//   }
+// }
 
 // docs preview end
 // background color start
 .is-bg-white {
-  background-color: $ac-white !important;
+  background-color: $white-100 !important;
 }
 
 .bg-white {
-  background-color: $ac-white !important;
+  background-color: $white-100 !important;
 }
 
 // background color end
@@ -699,8 +558,8 @@ $border_color_4: transparent transparent #585d6e transparent;
 
   &.is-button-info {
     .tooltip-inner {
-      background: $ac-white;
-      color: $ac-primary;
+      background: $white-100;
+      color: $primary;
       border-radius: 4px;
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
@@ -714,14 +573,14 @@ $border_color_4: transparent transparent #585d6e transparent;
       border-style: solid;
       position: absolute;
       margin: 5px;
-      border-color: $ac-white;
+      border-color: $white-100;
     }
   }
 
   &.is-errors-tooltip {
     .tooltip-inner {
-      background: $ac-white;
-      color: $ac-danger;
+      background: $white-100;
+      color: $danger;
       border-radius: 4px;
       padding: 5px 20px 4px;
       box-shadow: $ac-shadow-1;
@@ -741,7 +600,7 @@ $border_color_4: transparent transparent #585d6e transparent;
       border-style: solid;
       position: absolute;
       margin: 5px;
-      border-color: $ac-white;
+      border-color: $white-100;
     }
   }
 
@@ -837,45 +696,45 @@ $border_color_4: transparent transparent #585d6e transparent;
 // Customize tooltip end
 
 // ac-footer sticky start
-.ac-footer-action {
-  margin-top: 10px;
-  padding-top: 10px;
-  background-color: $ac-white;
-  padding: 10px 20px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-left: -20px;
-  border: none;
-  border-radius: 0;
-  border-top: 1px solid $ac-white-light;
-
-  &.is-sticky {
-    position: sticky;
-    bottom: 0;
-    width: calc(100% + 20px);
-    margin-bottom: -4px;
-    z-index: 999;
-    border: none;
-    border-top: 1px solid $ac-white-light;
-    box-shadow: none;
-  }
-}
+// .ac-footer-action {
+//   margin-top: 10px;
+//   padding-top: 10px;
+//   background-color: $white-100;
+//   padding: 10px 20px;
+//   margin-left: 0;
+//   margin-right: 0;
+//   margin-left: -20px;
+//   border: none;
+//   border-radius: 0;
+//   border-top: 1px solid $primary-90;
+
+//   &.is-sticky {
+//     position: sticky;
+//     bottom: 0;
+//     width: calc(100% + 20px);
+//     margin-bottom: -4px;
+//     z-index: 999;
+//     border: none;
+//     border-top: 1px solid $primary-90;
+//     box-shadow: none;
+//   }
+// }
 
 // status css
 .status {
   height: 10px;
   width: 10px;
   border-radius: 50%;
-  background-color: $ac-gray-lightest;
-  border: 2px solid $ac-white;
+  background-color: $black-80;
+  border: 2px solid $white-100;
   display: inline-flex;
 
   &.is-success {
     background-color: #27ae60;
   }
 
-  &.is-error {
-    background-color: #eb5757;
+  &.is-danger {
+    background-color: $danger;
   }
 }
 
@@ -897,20 +756,20 @@ Responsive Classes
 
 // Extra small devices (portrait phones, less than 576px)
 @media (max-width: 575.98px) {
-  .responsive-only {
-    display: block;
-  }
+  // .responsive-only {
+  //   display: block;
+  // }
 
-  .ac-system-body {
-    grid-gap: 15px;
-    grid-template-columns: 70px calc(100% - 100px);
+  // .ac-system-body {
+  //   grid-gap: 15px;
+  //   grid-template-columns: 70px calc(100% - 100px);
 
-    .ac-system-content {
-      &.mr-20 {
-        margin-right: 0 !important;
-      }
-    }
-  }
+  //   .ac-system-content {
+  //     &.mr-20 {
+  //       margin-right: 0 !important;
+  //     }
+  //   }
+  // }
 }
 
 // Small devices (landscape phones, 576px and up)
@@ -919,18 +778,18 @@ Responsive Classes
 
 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) and (max-width: 991.98px) {
-  .ac-system-body {
-    grid-gap: 15px;
-    grid-template-columns: 240px calc(100% - 255px);
-  }
+  // .ac-system-body {
+  //   grid-gap: 15px;
+  //   grid-template-columns: 240px calc(100% - 255px);
+  // }
 }
 
 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) and (max-width: 1199.98px) {
-  .ac-system-body {
-    grid-gap: 0px;
-    grid-template-columns: 240px calc(100% - 260px);
-  }
+  // .ac-system-body {
+  //   grid-gap: 0px;
+  //   grid-template-columns: 240px calc(100% - 260px);
+  // }
 }
 
 // Extra large devices (large desktops, 1200px and up)
@@ -939,8 +798,8 @@ Responsive Classes
 
 // FHD devices
 @media (min-width: 1408px) and (max-width: 1600) {
-  .ac-system-body {
-    grid-gap: 0px;
-    grid-template-columns: 240px calc(100% - 260px);
-  }
+  // .ac-system-body {
+  //   grid-gap: 0px;
+  //   grid-template-columns: 240px calc(100% - 260px);
+  // }
 }