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

package/components/_ac-alert-box.scss

@@ -1,262 +1,205 @@
-// for alert message
-.ac-notification {
-  background-color: #dee7f5;
-  font-size: 13px;
-  color: $primary;
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  overflow: hidden;
-  border: 1px solid $primary;
-  border-radius: 4px;
-  justify-content: flex-start;
-  position: relative;
-  z-index: 1;
-  min-width: 280px;
-
-  p {
-    color: $primary;
-
-    .close-icon {
-      padding-right: 10px;
-      font-size: 15px;
-    }
-
-    a {
-      text-decoration: underline;
-      color: $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: $danger;
-    width: 40px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.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-error
-.ac-notification.is-error {
-  @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: $white-100-lighter;
-    }
-  }
-
-  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-error
-.ac-toast.is-error {
-  @include acToast($danger);
-}
-
-// is-warning
-.ac-toast.is-warning {
-  @include acToast($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-error
+// .ac-notification.is-error {
+//   @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: $white-100-lighter;
+//     }
+//   }
+
+//   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-error
+// .ac-toast.is-error {
+//   @include acToast($danger);
+// }
+
+// // is-warning
+// .ac-toast.is-warning {
+//   @include acToast($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) {
+// }