@appscode/design-system 1.1.0 → 2.0.0

package/components/_ac-content-layout.scss

@@ -1,165 +1,165 @@
-.ac-content-layout {
-  background-color: transparent;
-  padding: 0;
-  border-radius: 0;
-  height: 100%;
-  border: none;
-
-  &.style-2 {
-    border: 1px solid $ac-white-light;
-    box-shadow: none;
-    padding: 0;
-    border-radius: 4px;
-
-    .ac-content-header {
-      background-color: $ac-white-light;
-
-      &.is-bg-white {
-        .ac-cheader-left {
-          .ac-content-title {
-            h5 {
-              font-size: 16px;
-            }
-          }
-        }
-      }
-    }
-
-    .ac-content {
-      padding: 15px 20px;
-
-      .ac-footer-action {
-        margin-left: -20px;
-        margin-right: -20px;
-      }
-    }
-  }
-
-  &.is-dark {
-    background-color: $ac-color-heading;
-
-    .ac-content-header {
-      &.drag-n-drop {
-        padding: 15px 20px 0;
-      }
-
-      .ac-cheader-left {
-        .ac-content-title {
-          h3 {
-            color: $ac-white;
-          }
-        }
-      }
-    }
-  }
-
-  .ac-content-header {
-    display: grid;
-    grid-template-columns: auto auto;
-    align-items: center;
-    width: 100%;
-    padding: 0 20px;
-    min-height: 40px;
-    grid-gap: 15px;
-
-    &.is-bg-available {
-      background-color: $table-header;
-    }
-
-    &.drag-n-drop {
-      padding: 15px 20px 0;
-    }
-
-    .ac-cheader-left {
-      .ac-content-title {
-        h5 {
-          line-height: 1;
-        }
-
-        p {
-          margin-top: 0;
-          font-size: 13px;
-          color: $ac-color-text;
-        }
-      }
-    }
-
-    .ac-cheader-right {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-    }
-  }
-}
-
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-  .ac-content-layout {
-    .ac-content-header {
-      grid-template-columns: 150px 530px;
-      overflow-x: auto;
-
-      .ac-cheader-left {
-        .ac-content-title {
-          h3 {
-            font-size: 16px;
-            line-height: 18px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-  .ac-content-layout {
-    .ac-content-header {
-      grid-template-columns: 150px 530px;
-      overflow-x: auto;
-
-      .ac-cheader-left {
-        .ac-content-title {
-          h3 {
-            font-size: 16px;
-            line-height: 18px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-  .ac-content-layout {
-    .ac-content-header {
-      grid-template-columns: 150px 550px;
-      overflow-x: auto;
-
-      .ac-cheader-left {
-        .ac-content-title {
-          h3 {
-            font-size: 16px;
-            line-height: 18px;
-          }
-
-          p {
-            font-size: 13px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 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-content-layout {
+//   background-color: transparent;
+//   padding: 0;
+//   border-radius: 0;
+//   height: 100%;
+//   border: none;
+
+//   &.style-2 {
+//     border: 1px solid $primary-90;
+//     box-shadow: none;
+//     padding: 0;
+//     border-radius: 4px;
+
+//     .ac-content-header {
+//       background-color: $primary-90;
+
+//       &.is-bg-white {
+//         .ac-cheader-left {
+//           .ac-content-title {
+//             h5 {
+//               font-size: 16px;
+//             }
+//           }
+//         }
+//       }
+//     }
+
+//     .ac-content {
+//       padding: 15px 20px;
+
+//       .ac-footer-action {
+//         margin-left: -20px;
+//         margin-right: -20px;
+//       }
+//     }
+//   }
+
+//   &.is-dark {
+//     background-color: $primary-5;
+
+//     .ac-content-header {
+//       &.drag-n-drop {
+//         padding: 15px 20px 0;
+//       }
+
+//       .ac-cheader-left {
+//         .ac-content-title {
+//           h3 {
+//             color: $white-100;
+//           }
+//         }
+//       }
+//     }
+//   }
+
+//   .ac-content-header {
+//     display: grid;
+//     grid-template-columns: auto auto;
+//     align-items: center;
+//     width: 100%;
+//     padding: 0 20px;
+//     min-height: 40px;
+//     grid-gap: 15px;
+
+//     &.is-bg-available {
+//       background-color: $table-header;
+//     }
+
+//     &.drag-n-drop {
+//       padding: 15px 20px 0;
+//     }
+
+//     .ac-cheader-left {
+//       .ac-content-title {
+//         h5 {
+//           line-height: 1;
+//         }
+
+//         p {
+//           margin-top: 0;
+//           font-size: 13px;
+//           color: $primary-10;
+//         }
+//       }
+//     }
+
+//     .ac-cheader-right {
+//       display: flex;
+//       justify-content: flex-end;
+//       align-items: center;
+//     }
+//   }
+// }
+
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {
+//   .ac-content-layout {
+//     .ac-content-header {
+//       grid-template-columns: 150px 530px;
+//       overflow-x: auto;
+
+//       .ac-cheader-left {
+//         .ac-content-title {
+//           h3 {
+//             font-size: 16px;
+//             line-height: 18px;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {
+//   .ac-content-layout {
+//     .ac-content-header {
+//       grid-template-columns: 150px 530px;
+//       overflow-x: auto;
+
+//       .ac-cheader-left {
+//         .ac-content-title {
+//           h3 {
+//             font-size: 16px;
+//             line-height: 18px;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {
+//   .ac-content-layout {
+//     .ac-content-header {
+//       grid-template-columns: 150px 550px;
+//       overflow-x: auto;
+
+//       .ac-cheader-left {
+//         .ac-content-title {
+//           h3 {
+//             font-size: 16px;
+//             line-height: 18px;
+//           }
+
+//           p {
+//             font-size: 13px;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// // 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) {
+// }

package/components/_ac-drag.scss

@@ -12,20 +12,20 @@
 
     h5 {
       font-size: 16px;
-      font-family: $ac-family-paragraph;
-      color: $ac-color-text;
+      font-family: $font-paragraph;
+      color: $primary-10;
       font-weight: 500;
     }
   }
 
   .dragable-list-items {
-    background-color: $ac-white-lighter;
+    background-color: $primary-90;
     border-radius: 4px;
     max-height: 400px;
 
     .is-highlight {
-      background-color: $ac-white;
-      border: 1px dashed $ac-gray-lightest;
+      background-color: $white-100;
+      border: 1px dashed $black-80;
       border-radius: 4px;
       margin: 4px 0;
       overflow: hidden;
@@ -38,15 +38,15 @@
         padding-bottom: 4px;
 
         &.is-not-change {
-          background-color: $ac-white-lighter;
+          background-color: $primary-90;
           margin-left: -40px !important;
           padding-left: 80px;
         }
 
         span,
         strong {
-          font-size: $font-size-small;
-          color: $ac-color-text;
+          font-size: 13px;
+          color: $primary-10;
           padding: 0 5px;
           font-weight: 500;
           display: block;
@@ -68,7 +68,7 @@
             margin-left: -35px;
 
             &:hover {
-              background-color: $ac-white;
+              background-color: $white-100;
               box-shadow: $ac-shadow-1;
               cursor: move;
 
@@ -84,7 +84,7 @@
             }
 
             input[type="text"] {
-              background-color: $ac-white-light;
+              background-color: $primary-90;
               border: none;
               font-weight: 500;
               padding: 4px 5px;
@@ -122,7 +122,7 @@
                   margin: 0;
                   height: auto;
                   line-height: 0;
-                  font-size: $font-size-tiny;
+                  font-size: 11px;
 
                   &:hover {
                     color: #a4afb7;
@@ -135,6 +135,7 @@
 
         ul {
           li {
+
             span,
             strong {
               font-weight: 400;
@@ -243,5 +244,4 @@ Responsive Classes
 }
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}