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

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,3 +1,9 @@
+// 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;
@@ -6,9 +12,14 @@ body {
   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/components/_ac-accordion.scss

@@ -1,117 +1,117 @@
-.ac-accordion-wrapper {
-  &.is-marginless {
-    .single-accordion-item {
-      margin: 0;
-      padding: 0;
-
-      .accordion-heading {
-        padding: 10px 20px;
-        position: relative;
-        z-index: 1;
-
-        &::after {
-          position: absolute;
-          content: "";
-          left: 0;
-          top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: $primary;
-        }
-      }
-    }
-  }
-
-  .single-accordion-item {
-    background-color: $white-100;
-    padding: 15px 20px;
-    margin-bottom: 15px;
-    border-radius: 4px;
-    border: 1px solid $primary-90;
-
-    &.open {
-      .accordion-heading {
-        margin-bottom: 10px;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .accordion-heading {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      h3 {
-        cursor: pointer;
-      }
-
-      button {
-        font-size: 12px;
-        letter-spacing: 0.1px;
-      }
-
-      .icon {
-        width: 20px;
-        height: 20px;
-        border: 1px solid $primary-90;
-        line-height: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 10px;
-        border-radius: 50%;
-        cursor: pointer;
-      }
-    }
-
-    .accordion-body {
-      max-height: 0;
-      transition: max-height 0.2s ease-out;
-      overflow: hidden;
-
-      p {
-        font-size: 13px;
-        color: $primary-10;
-        line-height: 1.6;
-      }
-    }
-  }
-}
-
-.overview-body {
-  .ac-accordion-wrapper {
-    &.is-marginless {
-      .single-accordion-item {
-        .accordion-heading {
-          padding-bottom: 0;
-        }
-      }
-    }
-  }
-}
-
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+// .ac-accordion-wrapper {
+//   &.is-marginless {
+//     .single-accordion-item {
+//       margin: 0;
+//       padding: 0;
+
+//       .accordion-heading {
+//         padding: 10px 20px;
+//         position: relative;
+//         z-index: 1;
+
+//         &::after {
+//           position: absolute;
+//           content: "";
+//           left: 0;
+//           top: 0;
+//           width: 4px;
+//           height: 100%;
+//           background-color: $primary;
+//         }
+//       }
+//     }
+//   }
+
+//   .single-accordion-item {
+//     background-color: $white-100;
+//     padding: 15px 20px;
+//     margin-bottom: 15px;
+//     border-radius: 4px;
+//     border: 1px solid $primary-90;
+
+//     &.open {
+//       .accordion-heading {
+//         margin-bottom: 10px;
+//       }
+//     }
+
+//     &:last-child {
+//       margin-bottom: 0;
+//     }
+
+//     .accordion-heading {
+//       display: flex;
+//       align-items: center;
+//       justify-content: space-between;
+
+//       h3 {
+//         cursor: pointer;
+//       }
+
+//       button {
+//         font-size: 12px;
+//         letter-spacing: 0.1px;
+//       }
+
+//       .icon {
+//         width: 20px;
+//         height: 20px;
+//         border: 1px solid $primary-90;
+//         line-height: 20px;
+//         display: flex;
+//         justify-content: center;
+//         align-items: center;
+//         font-size: 10px;
+//         border-radius: 50%;
+//         cursor: pointer;
+//       }
+//     }
+
+//     .accordion-body {
+//       max-height: 0;
+//       transition: max-height 0.2s ease-out;
+//       overflow: hidden;
+
+//       p {
+//         font-size: 13px;
+//         color: $primary-10;
+//         line-height: 1.6;
+//       }
+//     }
+//   }
+// }
+
+// .overview-body {
+//   .ac-accordion-wrapper {
+//     &.is-marginless {
+//       .single-accordion-item {
+//         .accordion-heading {
+//           padding-bottom: 0;
+//         }
+//       }
+//     }
+//   }
+// }
+
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {
+// }
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {
+// }
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {
+// }
+
+// // Large devices (desktops, 992px and up)
+// @media (min-width: 992px) and (max-width: 1199.98px) {
+// }
+
+// // Extra large devices (large desktops, 1200px and up)
+// @media (min-width: 1200px) {
+// }