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

package/base/utilities/_layouts.scss

@@ -0,0 +1,157 @@
+// default layout css
+.ac-system-body {
+  display: grid;
+  grid-gap: 0px;
+  grid-template-columns: 250px calc(100% - 250px);
+  padding-top: 50px;
+  transition: 0.3s ease-in-out;
+
+  &.is-fullwidth {
+    grid-template-columns: auto !important;
+
+    // &.has-info-content {
+    //   grid-template-columns: 250px calc(100% - 540px) 250px;
+    // }
+  }
+
+  // &.has-info-content {
+  //   grid-template-columns: 250px calc(100% - 540px) 250px;
+
+  //   .ac-system-content {
+  //     &.pr-15 {
+  //       padding-right: 0 !important;
+  //     }
+  //   }
+  // }
+
+  // &.in-ui-builder {
+  //   grid-template-columns: calc(100% - 250px) 250px !important;
+  // }
+
+  // &.has-ui-builder {
+  //   grid-template-columns: 70px calc(100% - 70px);
+  //   grid-gap: 0;
+
+  //   .inner-header {
+  //     position: sticky;
+  //     top: 100px;
+  //     background-color: $white-100;
+  //     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: 250px calc(100% - 250px);
+
+  //   //   .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 $primary-90;
+  //   //       height: 100%;
+
+  //   //       ul.menu-list-wrapper {
+  //   //         padding-top: 10px;
+  //   //       }
+  //   //     }
+  //   //   }
+  //   // }
+  // }
+
+  // &.has-deploy-flow {
+  //   grid-template-columns: 65% 35%;
+  // }
+
+  // .ac-system-left-sidebar {
+  //   // border-right: 1px solid $primary-90;
+  //   // box-shadow: none;
+
+  //   &.is-expanded {
+  //     z-index: 998;
+
+  //     .ac-product-logo {
+  //       width: 250px !important;
+  //       justify-content: flex-start !important;
+  //     }
+
+  //     .menu-list {
+  //       box-shadow: 2px -1px 8px rgba(26, 80, 151, 0.16);
+
+  //       &.ac-menu-list {
+  //         width: 250px !important;
+  //         background-color: $white-100;
+
+  //         li {
+  //           a {
+  //             strong {
+  //               display: block !important;
+  //             }
+  //           }
+
+  //           ul {
+  //             li {
+  //               a {
+  //                 padding-left: 50px !important;
+  //               }
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+}
+// sidebar collapsed 
+.sidebar-collapsed {
+  .ac-system-body {
+    grid-template-columns: 60px calc(100% - 60px);
+  }
+}
+// .ac-system-body {
+//   &.is-preview-step {
+//     grid-template-columns: calc(100% - 250px) 250px !important;
+//   }
+// }

package/base/utilities/_spacing.scss

@@ -0,0 +1,96 @@
+/*  Margin & Padding view-height & view-width */
+@for $i from 0 through 100 {
+  .m-#{$i} {
+    margin: #{$i}px !important;
+  }
+
+  .mt-#{$i} {
+    margin-top: #{$i}px !important;
+  }
+
+  .mb-#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+
+  .ml-#{$i} {
+    margin-left: #{$i}px !important;
+  }
+
+  .mr-#{$i} {
+    margin-right: #{$i}px !important;
+  }
+
+  .p-#{$i} {
+    padding: #{$i}px !important;
+  }
+
+  .pt-#{$i} {
+    padding-top: #{$i}px !important;
+  }
+
+  .pb-#{$i} {
+    padding-bottom: #{$i}px !important;
+  }
+
+  .pl-#{$i} {
+    padding-left: #{$i}px !important;
+  }
+
+  .pr-#{$i} {
+    padding-right: #{$i}px !important;
+  }
+
+  .vh-#{$i} {
+    height: #{$i}vh !important;
+  }
+
+  .vw-#{$i} {
+    width: #{$i}vw !important;
+  }
+
+  .font-#{$i} {
+    font-size: #{$i}px !important;
+  }
+}
+
+/* Deafult height & widht */
+@for $i from 0 through 300 {
+  .height-#{$i} {
+    height: #{$i}px !important;
+  }
+
+  .width-#{$i} {
+    width: #{$i}px !important;
+  }
+}
+
+.height-auto {
+  height: auto !important;
+}
+
+.width-auto {
+  width: auto !important;
+}
+
+/* Deafult z-index and font-weight*/
+@for $i from 0 through 10 {
+  .z-index-#{$i} {
+    z-index: #{$i} !important;
+  }
+
+  .font-weight-#{$i*100} {
+    font-weight: #{$i * 100} !important;
+  }
+}
+
+.mx-auto {
+  margin: 0 auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}

package/base/utilities/_typography.scss

@@ -1,14 +1,25 @@
+// Typography
+@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");
+
+$font-heading: "Roboto", sans-serif;
+$font-paragraph: "Roboto", sans-serif;
+
 html,
 body {
-  background-color: $ac-bg;
+  background-color: transparent;
   font-family: $font-paragraph;
   font-weight: 400;
   font-size: 13px;
   color: $primary-10;
 }
+
 p {
-  font-size: 13px;
+  font-size: 1rem;
+  font-family: $font-paragraph;
+  font-weight: 400;
+  line-height: 150%;
 }
+
 h1,
 h2,
 h3,
@@ -16,7 +27,7 @@ h4,
 h5,
 h6 {
   font-family: $font-heading;
-  font-weight: 500;
+  font-weight: 600;
   color: $primary-5;
 }
 
@@ -81,6 +92,26 @@ a {
   color: $primary;
 }
 
+.text-xm {
+  font-size: 0.769rem; //10px
+}
+
+.text-sm {
+  font-size: 0.846rem; //11px
+}
+
+.text-base {
+  font-size: 1rem; //13px
+}
+
+.text-lg {
+  font-size: 1.077rem; //14px
+}
+
+.text-xl {
+  font-size: 1.231rem; //16px
+}
+
 hr {
   background-color: $black-60;
   border: none;
@@ -100,6 +131,7 @@ strong {
 .is-font-bold {
   font-weight: 700;
 }
+
 .material-icons {
   font-size: 1em;
-}
+}

package/base/utilities/dark-theme.scss

@@ -1,5 +1,5 @@
 $dark-bg: var(--dark-bg);
-$dark-bg-light: var(--dark-bg-light);
+$black-8: var(--dark-bg-light);
 
 .is-dark-theme {
   --ac-bg: var(--dark-bg);
@@ -17,10 +17,4 @@ $dark-bg-light: var(--dark-bg-light);
   --ac-white-lightest: #1f2229;
   --ac-label-text: #8c8c8c;
   --ac-bg-light-gray: #252830;
-
-  --ac-color-value: hsl(
-    var(--font-hsl-hue),
-    var(--font-hsl-saturation),
-    calc(var(--font-hsl-lightness) + 60%)
-  );
-}
+}