@appscode/design-system 2.4.27-alpha1 → 2.4.28

package/vue-components/styles/components/_widget-menu.scss

@@ -6,7 +6,7 @@
 //     .menu-list-wrapper {
 //       li {
 //         a {
-//           font-size: 13px;
+//           font-size: 1rem;
 //           font-weight: 400;
 //           color: $color-heading;
 //           display: block;
@@ -80,7 +80,7 @@
 //           &::after {
 //             position: absolute;
 //             content: "";
-//             left: 13px;
+//             left: 14px;
 //             top: 18.4px;
 //             width: 20px;
 //             height: 1px;
@@ -89,7 +89,7 @@
 //           }
 
 //           a {
-//             font-size: 13px;
+//             font-size: 1rem;
 //             font-weight: 500;
 //             color: $color-heading;
 
@@ -118,7 +118,7 @@
 
 //     p {
 //       font-weight: 500;
-//       font-weight: 13px;
+//       font-weight: 14px;
 //     }
 
 //     i.fa-check-circle {
@@ -137,7 +137,7 @@
 //     background-color: $color-border;
 
 //     p {
-//       font-size: 13px;
+//       font-size: 1rem;
 //       font-weight: 600;
 //       color: $color-heading;
 //     }
@@ -154,7 +154,7 @@
 //       background-color: $white-100;
 //       text-align: left;
 //       color: $color-heading;
-//       font-size: 13px;
+//       font-size: 1rem;
 //       font-weight: 500;
 
 //       &:hover {

package/vue-components/styles/components/_wizard.scss

@@ -9,7 +9,7 @@
 //   font-family: $font-paragraph;
 //   font-style: normal;
 //   font-weight: normal;
-//   font-size: 13px;
+//   font-size: 1rem;
 //   line-height: 100%;
 //   color: $color-heading;
 //   margin-bottom: 10px;
@@ -83,7 +83,7 @@
 //     font-family: $font-paragraph;
 //     font-style: normal;
 //     font-weight: 500;
-//     font-size: 13px;
+//     font-size: 1rem;
 //     line-height: 16px;
 //     color: $color-heading;
 //     margin-right: 16px;
@@ -127,7 +127,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: 500;
-//       font-size: 14px;
+//       font-size: 1rem;
 //       line-height: 19px;
 //       color: $color-heading;
 //     }
@@ -187,7 +187,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: 500;
-//       font-size: 13px;
+//       font-size: 1rem;
 //       line-height: 16px;
 //       color: $color-heading;
 //     }
@@ -252,7 +252,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: normal;
-//       font-size: 13px;
+//       font-size: 1rem;
 //       line-height: 16px;
 //       color: $color-heading;
 //       display: flex;
@@ -286,7 +286,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: normal;
-//       font-size: 13px;
+//       font-size: 1rem;
 //       line-height: 18px;
 //       display: block;
 //       color: $color-heading;
@@ -330,7 +330,7 @@
 //       font-family: $font-paragraph;
 //       font-style: normal;
 //       font-weight: 500;
-//       font-size: 13px;
+//       font-size: 1rem;
 //       line-height: 16px;
 //       display: flex;
 //       align-items: center;
@@ -486,7 +486,7 @@
 //   p {
 //     font-family: $font-paragraph;
 //     font-style: normal;
-//     font-size: 13px;
+//     font-size: 1rem;
 //     line-height: 18px;
 //     color: $white-100;
 //     font-weight: 400;
@@ -529,7 +529,7 @@
 //     text-align: center;
 //     font-family: $font-paragraph;
 //     font-weight: 500;
-//     font-size: 13px;
+//     font-size: 1rem;
 //     line-height: 19px;
 //     color: $color-heading;
 //     margin: 0 10px 10px 0;

package/vue-components/styles/components/ac-toaster/_ac-toasted.scss

@@ -3,7 +3,7 @@
   min-width: 350px !important;
   min-height: 40px !important;
   justify-content: flex-start !important;
-  font-size: 13px !important;
+  font-size: 1rem !important;
   font-weight: 500 !important;
   padding-right: 35px !important;
   box-shadow: none !important;
@@ -49,7 +49,7 @@
 }
 
 .ac-toast-action {
-  font-size: 13px !important;
+  font-size: 1rem !important;
   font-weight: 400 !important;
   color: inherit !important;
   font-family: Roboto, sans-serif !important;

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

@@ -1,6 +1,6 @@
 .ac-notification {
   background-color: $primary-95;
-  font-size: 13px;
+  font-size: 1rem;
   color: $ac-primary;
   min-height: 36px;
   display: flex;

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

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 13px;
+  font-size: 1rem;
   border-radius: 4px;
   position: relative;
   padding-right: 30px;

package/vue-components/styles/components/bbum/_card-team.scss

@@ -73,7 +73,7 @@
     }
 
     .meta {
-      font-size: 13px;
+      font-size: 1rem;
       color: $color-text;
       margin-bottom: 20px;
     }
@@ -87,7 +87,7 @@
         &:not(:first-child) {
           list-style: disc;
         }
-        font-size: 13px;
+        font-size: 1rem;
         color: $color-text;
       }
     }

package/vue-components/styles/components/bbum/_left-sidebar.scss

@@ -20,7 +20,7 @@
 
       .user-info {
         h3 {
-          font-size: 13px;
+          font-size: 1rem;
           line-height: 1;
           margin-bottom: 5px;
         }
@@ -38,7 +38,7 @@
         li {
           a {
             display: flex;
-            font-size: 13px;
+            font-size: 1rem;
             color: $color-heading;
             align-items: center;
             font-weight: 500;

package/vue-components/styles/components/bbum/_sign-up-notification.scss

@@ -44,7 +44,7 @@
     right: 10px;
     top: 10px;
     background-color: lighten($color: $danger, $amount: 40);
-    font-size: 13px;
+    font-size: 1rem;
     transition: 0.3s ease-in-out;
     &:hover {
       background-color: $danger;
@@ -75,7 +75,7 @@
 
     p {
       color: $color-heading;
-      font-size: 13px;
+      font-size: 1rem;
       margin-bottom: 10px;
     }
   }

package/vue-components/styles/components/bbum/_single-post-preview.scss

@@ -72,7 +72,7 @@
 
     p {
       color: $color-heading;
-      font-size: 13px;
+      font-size: 1rem;
       line-height: 160%;
     }
 

package/vue-components/styles/components/bbum/_user-profile.scss

@@ -47,7 +47,7 @@
           line-height: 1.4;
 
           span {
-            font-size: 14px;
+            font-size: 1rem;
             line-height: 1.5;
             font-weight: 400;
             display: block;
@@ -61,7 +61,7 @@
       }
 
       p {
-        font-size: 14px;
+        font-size: 1rem;
         color: $color-heading;
         line-height: 160%;
         margin-bottom: 10px;
@@ -92,7 +92,7 @@
           display: flex;
           align-items: center;
           margin-bottom: 10px;
-          font-size: 13px;
+          font-size: 1rem;
           &:last-child {
             margin-bottom: 0;
           }

package/vue-components/styles/components/cards/_cluster.scss

@@ -91,7 +91,7 @@
       }
       strong {
         color: $color-heading;
-        font-size: 13px;
+        font-size: 1rem;
         font-weight: 400;
       }
     }

package/vue-components/styles/components/cards/_features.scss

@@ -19,7 +19,7 @@
   }
   .c-body {
     p {
-      color: #0c365a;
+      color: $color-text;
     }
   }
 }

package/vue-components/styles/components/cards/_info.scss

@@ -43,7 +43,7 @@
       }
 
       strong {
-        font-size: 13px;
+        font-size: 1rem;
         font-weight: 400;
         color: $color-heading;
       }

package/vue-components/styles/components/cards/_monitoring.scss

@@ -19,7 +19,7 @@
   }
   .c-body {
     p {
-      color: #0c365a;
+      color: $color-text;
     }
   }
 }

package/vue-components/styles/components/cards/_payment-card.scss

@@ -118,7 +118,7 @@
 
       span {
         display: block;
-        font-size: 13px;
+        font-size: 1rem;
       }
     }
   }
@@ -138,7 +138,7 @@
         display: flex;
 
         .user-name {
-          font-size: 14px;
+          font-size: 1rem;
           font-weight: 500;
           color: $white-100;
           margin-right: 10px;
@@ -206,7 +206,7 @@
       justify-content: space-between;
 
       p.user-name {
-        font-size: 14px;
+        font-size: 1rem;
         color: $white-100;
         margin-top: 10px;
       }

package/vue-components/styles/components/cards/_subscription-card.scss

@@ -53,7 +53,7 @@
       font-family: $font-heading;
       font-style: normal;
       font-weight: 600;
-      font-size: 14px;
+      font-size: 1rem;
       line-height: 16px;
       color: $color-text;
       margin-bottom: 10px;
@@ -78,7 +78,7 @@
         font-family: $font-paragraph;
         font-style: normal;
         font-weight: normal;
-        font-size: 14px;
+        font-size: 1rem;
         line-height: 16px;
         padding-bottom: 8px;
         color: $color-text;

package/vue-components/styles/components/cards/_vendor.scss

@@ -1,7 +1,7 @@
 // vendor cards start
 .ac-single-card.vendor-card {
-  border: 1px solid $color-border;
-  transition: 0.3s ease-in-out;
+  outline: 1px solid $color-border;
+  transition: 0s ease-in-out;
   border-radius: 2px;
   display: flex;
   flex-direction: column;
@@ -23,7 +23,7 @@
 
   .ac-card-name {
     p {
-      font-size: 13px;
+      font-size: 1rem;
       color: $color-heading;
       line-height: 1;
       font-weight: 500;
@@ -52,10 +52,10 @@
     }
   }
   &.is-selected {
-    border: 1px solid $ac-primary !important;
+    outline: 2px solid $ac-primary !important;
   }
   &:hover {
-    border: 1px solid $ac-primary;
+    outline: 2px solid $ac-primary;
 
     .ac-card-title {
       h4 {

package/vue-components/styles/components/form-fields/_check-radio-switch.scss

@@ -179,8 +179,8 @@
   .switch {
     position: relative;
     display: inline-block;
-    width: 36px;
-    height: 18px;
+    width: 40px;
+    height: 22px;
 
     input {
       position: absolute;
@@ -213,8 +213,8 @@
       &:before {
         content: "";
         position: absolute;
-        height: 12px;
-        width: 12px;
+        height: 16px;
+        width: 16px;
         left: 4px;
         bottom: 3px;
         background-color: white;

package/vue-components/styles/components/form-fields/_image-upload.scss

@@ -26,7 +26,7 @@
     }
 
     .drag-and-drop-msg {
-      font-size: 13px;
+      font-size: 1rem;
       color: $color-text;
       font-weight: 400;
       margin-bottom: 10px;

package/vue-components/styles/components/form-fields/_input-card.scss

@@ -55,7 +55,7 @@
     .ac-single-radio,
     .ac-single-checkbox {
       label {
-        font-size: 13px;
+        font-size: 1rem;
         line-height: 20px;
         color: $color-heading;
         padding-left: 25px !important;
@@ -207,7 +207,7 @@
       font-family: $font-heading;
       font-style: normal;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 1rem;
       line-height: 24px;
       color: $color-heading;
     }
@@ -217,7 +217,7 @@
     font-family: $font-paragraph;
     font-style: normal;
     font-weight: normal;
-    font-size: 13px;
+    font-size: 1rem;
     line-height: 140%;
     color: $color-heading;
 

package/vue-components/styles/components/form-fields/_input.scss

@@ -87,7 +87,7 @@
   &.borderless-input {
     input {
       border: none;
-      font-size: 13px;
+      font-size: 1rem;
       padding: 4px 7px;
       height: 30px;
       background-color: $white-100;
@@ -136,8 +136,8 @@
     }
 
     label {
-      top: 13px;
-      font-size: 13px;
+      top: 14px;
+      font-size: 1rem;
 
       &.show-label {
         font-size: 12px;
@@ -153,7 +153,7 @@
         .icon {
           height: 45px;
           width: 30px;
-          font-size: 13px;
+          font-size: 1rem;
         }
       }
     }
@@ -163,7 +163,7 @@
     input,
     select {
       height: 36px;
-      font-size: 13px;
+      font-size: 1rem;
       font-weight: 400;
     }
 
@@ -186,7 +186,7 @@
 
     label {
       top: 8px;
-      font-size: 13px;
+      font-size: 1rem;
 
       &.switch-label {
         top: 0;
@@ -211,7 +211,7 @@
         .icon {
           height: 36px;
           width: 25px;
-          font-size: 13px;
+          font-size: 1rem;
         }
       }
     }
@@ -221,7 +221,7 @@
     input,
     select {
       height: 32px;
-      font-size: 13px;
+      font-size: 1rem;
       font-weight: 400;
     }
 
@@ -252,7 +252,7 @@
 
     label {
       top: 6px;
-      font-size: 13px;
+      font-size: 1rem;
 
       &.switch-label {
         top: 0;
@@ -269,7 +269,7 @@
         .icon {
           height: 32px;
           width: 25px;
-          font-size: 13px;
+          font-size: 1rem;
         }
       }
     }
@@ -280,7 +280,7 @@
   }
 
   label {
-    font-size: 13px;
+    font-size: 1rem;
     left: 15px;
     top: 11px;
     cursor: text;
@@ -303,7 +303,7 @@
       top: -9px;
       left: 10px;
       padding: 0 5px;
-      font-size: 13px;
+      font-size: 1rem;
       color: $gray-40;
 
       &:after {
@@ -366,7 +366,7 @@
         a {
           color: $color-heading;
           display: block;
-          font-size: 13px;
+          font-size: 1rem;
           padding: 8px 20px;
           transition: 0.3s;
 
@@ -417,7 +417,7 @@
     border-radius: 4px;
     border: 1px solid $color-border-dark;
     padding: 8px 15px;
-    font-size: 13px;
+    font-size: 1rem;
 
     &:hover {
       border-color: $ac-primary;
@@ -445,7 +445,7 @@
       padding-left: 30px;
     }
 
-    transition: background-color 0.3s ease-in-out;
+    transition: background-color 0.1s ease-in-out;
   }
 
   .ac-card {
@@ -459,7 +459,7 @@
 
   b.isRequired {
     color: $danger;
-    font-size: 13px;
+    font-size: 1rem;
     position: absolute;
     right: 5px;
     z-index: 9;

package/vue-components/styles/components/inbox/all.scss

@@ -14,6 +14,7 @@
     z-index: 99;
     background-color: #fff;
     padding: 20px;
+    border-bottom: 1px solid $color-border;
     // box-shadow: $ac-shadow-1;
   }
 }
@@ -32,29 +33,13 @@
   z-index: 9;
   width: calc(100% + 40px);
   margin-left: -20px;
-  &:after {
-    position: absolute;
-    content: "";
-    left: 0;
-    top: 0;
-    width: 0px;
-    height: 100%;
-    border-radius: 4px 0 0 4px;
-    background-color: $ac-primary;
-    opacity: 0;
-    visibility: hidden;
-    transition: 0.2s ease-in-out;
-  }
+  border-bottom: 1px solid $color-border;
+
   &.is-unread {
     background-color: $primary-light-gray;
   }
   &:hover {
-    background-color: $primary-95;
-    &::after {
-      opacity: 1;
-      visibility: visible;
-      width: 4px;
-    }
+    background-color: hsla(var(--secondary-hue), 12%, 95%);
   }
 }