@appscode/design-system 1.1.0 → 2.0.0

package/components/_ac-alert-box.scss

@@ -1,263 +1,205 @@
-// for alert message
-.ac-notification {
-  background-color: #dee7f5;
-  font-size: $font-size-small;
-  color: $ac-primary;
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  overflow: hidden;
-  border: 1px solid $ac-primary;
-  border-radius: 4px;
-  justify-content: flex-start;
-  position: relative;
-  z-index: 1;
-  min-width: 280px;
-
-  p {
-    color: $ac-primary;
-
-    .close-icon {
-      padding-right: 10px;
-      font-size: 15px;
-    }
-
-    a {
-      text-decoration: underline;
-      color: $ac-primary;
-
-      &:hover {
-        color: hsla(
-          var(--hsl-hue),
-          var(--hsl-saturation),
-          calc(var(--hsl-lightness) - 10%),
-          1
-        );
-      }
-    }
-  }
-
-  button.close {
-    background-color: transparent;
-    cursor: pointer;
-    right: 0px;
-    position: absolute;
-    box-shadow: none;
-    border: none;
-    font-size: 14px;
-    color: $ac-danger;
-    width: 40px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-
-.toast {
-  box-shadow: $ac-shadow-sm;
-  border: 1px solid $ac-white-light;
-  width: 350px;
-
-  .toast-header {
-    padding: 8px 12px;
-    border-bottom: 1px solid $ac-white-light;
-
-    .button {
-      &:hover {
-        color: #000000;
-      }
-    }
-  }
-
-  .toast-body {
-    padding: 8px 12px;
-  }
-}
-
-// mixin for .ac-notification
-@mixin acNotification($colorName) {
-  background-color: scale-color($color: $colorName, $lightness: 80%);
-  color: $ac-white;
-  border-color: $colorName;
-
-  p {
-    color: $colorName;
-
-    a {
-      color: $colorName;
-
-      &:hover {
-        color: $colorName;
-        opacity: 0.8;
-      }
-    }
-  }
-}
-@mixin acPrimaryNotification() {
-  background-color: hsla(
-    var(--hsl-hue),
-    var(--hsl-saturation),
-    var(--hsl-lightness),
-    0.2
-  );
-  color: $ac-white;
-  border-color: $ac-primary;
-
-  p {
-    color: $ac-primary;
-
-    a {
-      color: $ac-primary;
-
-      &:hover {
-        color: $ac-primary;
-        opacity: 0.8;
-      }
-    }
-  }
-}
-
-// is-primary
-.ac-notification.is-primary {
-  @include acPrimaryNotification();
-}
-
-// is.info
-.ac-notification.is-info {
-  @include acNotification($ac-info);
-}
-
-// is.success
-.ac-notification.is-success {
-  @include acNotification($ac-green);
-}
-
-// is-error
-.ac-notification.is-error {
-  @include acNotification($ac-danger);
-}
-
-// is-warning
-.ac-notification.is-warning {
-  @include acNotification($ac-warning);
-}
-
-/*====================================
-AC Toast
-=====================================*/
-
-.ac-toast {
-  width: 350px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-  border-radius: 4px;
-  position: relative;
-  padding-right: 30px;
-  margin-bottom: 10px;
-
-  * {
-    color: $ac-white;
-  }
-
-  p {
-    padding-left: 16px;
-
-    i.fa {
-      padding-right: 0 !important;
-      margin-right: 4px;
-    }
-  }
-
-  a {
-    font-weight: 500;
-    text-decoration: underline;
-    padding: 0 15px;
-
-    &:hover {
-      color: $ac-white-lighter;
-    }
-  }
-
-  button.close-button {
-    border-radius: 0px;
-    background-color: transparent;
-    border: none;
-    color: $ac-white;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 5px;
-    height: 100%;
-    width: 30px;
-    z-index: 1;
-    cursor: pointer;
-    border-left: 1px solid #dddddd;
-  }
-}
-
-// mixin for .ac-toast
-@mixin acToast($colorName) {
-  background-color: $colorName;
-  color: $ac-white;
-  border-color: $colorName;
-}
-
-// is-primary
-.ac-toast.is-primary {
-  @include acToast($ac-primary);
-}
-
-// is-info
-.ac-toast.is-info {
-  @include acToast($ac-info);
-}
-
-// is.success
-.ac-toast.is-success {
-  @include acToast($ac-green);
-}
-
-// is-error
-.ac-toast.is-error {
-  @include acToast($ac-danger);
-}
-
-// is-warning
-.ac-toast.is-warning {
-  @include acToast($ac-warning);
-}
-
-// dark theme start
-.is-dark-theme {
-  .ac-notification.is-error {
-    background-color: $dark-bg-light;
-  }
-}
-// dark theme end
-/****************************************
-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) {
-}
+// .toast {
+//   box-shadow: $ac-shadow-sm;
+//   border: 1px solid $primary-90;
+//   width: 350px;
+
+//   .toast-header {
+//     padding: 8px 12px;
+//     border-bottom: 1px solid $primary-90;
+
+//     .button {
+//       &:hover {
+//         color: #000000;
+//       }
+//     }
+//   }
+
+//   .toast-body {
+//     padding: 8px 12px;
+//   }
+// }
+
+// // mixin for .ac-notification
+// @mixin acNotification($colorName) {
+//   background-color: scale-color($color: $colorName, $lightness: 80%);
+//   color: $white-100;
+//   border-color: $colorName;
+
+//   p {
+//     color: $colorName;
+
+//     a {
+//       color: $colorName;
+
+//       &:hover {
+//         color: $colorName;
+//         opacity: 0.8;
+//       }
+//     }
+//   }
+// }
+// @mixin acPrimaryNotification() {
+//   background-color: hsla(
+//     var(--hsl-hue),
+//     var(--hsl-saturation),
+//     var(--hsl-lightness),
+//     0.2
+//   );
+//   color: $white-100;
+//   border-color: $primary;
+
+//   p {
+//     color: $primary;
+
+//     a {
+//       color: $primary;
+
+//       &:hover {
+//         color: $primary;
+//         opacity: 0.8;
+//       }
+//     }
+//   }
+// }
+
+// // is-primary
+// .ac-notification.is-primary {
+//   @include acPrimaryNotification();
+// }
+
+// // is.info
+// .ac-notification.is-info {
+//   @include acNotification($info);
+// }
+
+// // is.success
+// .ac-notification.is-success {
+//   @include acNotification($success);
+// }
+
+// // is-danger
+// .ac-notification.is-danger {
+//   @include acNotification($danger);
+// }
+
+// // is-warning
+// .ac-notification.is-warning {
+//   @include acNotification($warning);
+// }
+
+// /*====================================
+// AC Toast
+// =====================================*/
+
+// .ac-toast {
+//   width: 350px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   font-size: 13px;
+//   border-radius: 4px;
+//   position: relative;
+//   padding-right: 30px;
+//   margin-bottom: 10px;
+
+//   * {
+//     color: $white-100;
+//   }
+
+//   p {
+//     padding-left: 16px;
+
+//     i.fa {
+//       padding-right: 0 !important;
+//       margin-right: 4px;
+//     }
+//   }
+
+//   a {
+//     font-weight: 500;
+//     text-decoration: underline;
+//     padding: 0 15px;
+
+//     &:hover {
+//       color: $primary-90;
+//     }
+//   }
+
+//   button.close-button {
+//     border-radius: 0px;
+//     background-color: transparent;
+//     border: none;
+//     color: $white-100;
+//     position: absolute;
+//     right: 0;
+//     top: 0;
+//     padding: 5px;
+//     height: 100%;
+//     width: 30px;
+//     z-index: 1;
+//     cursor: pointer;
+//     border-left: 1px solid #dddddd;
+//   }
+// }
+
+// // mixin for .ac-toast
+// @mixin acToast($colorName) {
+//   background-color: $colorName;
+//   color: $white-100;
+//   border-color: $colorName;
+// }
+
+// // is-primary
+// .ac-toast.is-primary {
+//   @include acToast($primary);
+// }
+
+// // is-info
+// .ac-toast.is-info {
+//   @include acToast($info);
+// }
+
+// // is.success
+// .ac-toast.is-success {
+//   @include acToast($success);
+// }
+
+// // is-danger
+// .ac-toast.is-danger {
+//   @include acToast($danger);
+// }
+
+// // is-warning
+// .ac-toast.is-warning {
+//   @include acToast($warning);
+// }
+
+// // dark theme start
+// .is-dark-theme {
+//   .ac-notification.is-danger {
+//     background-color: $black-80;
+//   }
+// }
+// // dark theme end
+// /****************************************
+// 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) {
+// }

package/components/_ac-calendar.scss

@@ -5,19 +5,19 @@
     height: 45px !important;
     padding: 15px !important;
     font-weight: normal !important;
-    font-size: $font-size-small !important;
+    font-size: 13px !important;
   }
 
   .vc-highlight {
     width: 45px !important;
-    background-color: $ac-primary !important;
+    background-color: $primary !important;
     height: 45px !important;
   }
 
   .vc-weeks {
     padding: 25px 30px !important;
     font-weight: normal !important;
-    font-size: $font-size-small !important;
+    font-size: 13px !important;
   }
 
   .vc-weekday {
@@ -27,7 +27,7 @@
     margin-right: -30px !important;
     margin-bottom: 25px !important;
     font-weight: 500;
-    font-size: $font-size-small !important;
+    font-size: 13px !important;
   }
 
   .vc-bg-blue-200 {

package/components/_ac-code-highlight.scss

@@ -1,16 +1,18 @@
 .ac-code-highlight {
   pre {
-    font-size: $font-size-small;
-    color: $ac-color-text;
-    background-color: $ac-white-lighter;
+    font-size: 13px;
+    color: $primary-10;
+    background-color: $primary-90;
   }
+
   &.is-dark {
     pre {
-      background-color: $ac-color-text;
-      color: $ac-white;
+      background-color: $primary-10;
+      color: $white-100;
     }
   }
 }
+
 code[class*="language-"],
 pre[class*="language-"] {
   font-size: 14px !important;
@@ -19,7 +21,7 @@ pre[class*="language-"] {
 .editor-writable {
   width: 100%;
   border-radius: 4px !important;
-  border: 1px solid $ac-white-light !important;
+  border: 1px solid $white-100 !important;
 }
 
 .monaco-editor {
@@ -32,21 +34,16 @@ pre[class*="language-"] {
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
+@media (max-width: 575.98px) {}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}