@appscode/design-system 2.0.93 → 2.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.93",
+  "version": "2.0.95",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/alert/_alert.scss

@@ -16,6 +16,7 @@
 
   p {
     color: $ac-primary;
+    margin-bottom: 0 !important;
 
     .close-icon {
       padding-right: 10px;

package/vue-components/v3/notification/AlertBox.vue

@@ -46,8 +46,8 @@ const getSanitizedHtml = (content: string) => {
 
 <template>
   <!-- alert-message area start  -->
-  <!-- plsease, use this class name ('.is-info' 'is-success', 'is-danger', 'is-warning') -->
-  <div class="ac-notification is-${notificationType} mb-15" :class="backgroundColor">
+  <!-- use this class name ('.is-info' 'is-success', 'is-danger', 'is-warning') -->
+  <div class="ac-notifications mb-15" :class="backgroundColor">
     <p>
       <i v-if="!hideIcon" :class="`fa ${iconClass} mr-5`"></i><span v-html="getSanitizedHtml(content)"></span>
       <ac-button
@@ -62,215 +62,3 @@ const getSanitizedHtml = (content: string) => {
   </div>
   <!-- alert-message area end -->
 </template>
-
-<style lang="scss" scoped>
-// for alert message
-.ac-notification {
-  background-color: $primary-95;
-  font-size: 13px;
-  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;
-    margin-bottom: 0;
-
-    .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: $danger;
-    width: 40px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-// 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: $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($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: $gray-70;
-    }
-  }
-
-  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($ac-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: $gray-80;
-//   }
-// }
-</style>