npm - @appscode/design-system - Versions diffs - 2.4.26 → 2.4.27-alpha-2 - Mend

@appscode/design-system 2.4.26 → 2.4.27-alpha-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

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

@@ -118,7 +118,7 @@
       span {
         display: block;
-        font-size: 13px;
+        font-size: 14px;
       }
     }
   }

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

@@ -23,7 +23,7 @@
   .ac-card-name {
     p {
-      font-size: 13px;
+      font-size: 14px;
       color: $color-heading;
       line-height: 1;
       font-weight: 500;

package/vue-components/styles/components/editor/_filtered-file-editor.scss CHANGED Viewed

@@ -147,7 +147,7 @@
                 span {
                   img {
                     margin-right: 5px;
-                    height: 13px;
+                    height: 14px;
                   }
                 }
               }

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

@@ -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 CHANGED Viewed

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

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

@@ -55,7 +55,7 @@
     .ac-single-radio,
     .ac-single-checkbox {
       label {
-        font-size: 13px;
+        font-size: 14px;
         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: 14px;
       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: 14px;
     line-height: 140%;
     color: $color-heading;

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

@@ -87,7 +87,7 @@
   &.borderless-input {
     input {
       border: none;
-      font-size: 13px;
+      font-size: 14px;
       padding: 4px 7px;
       height: 30px;
       background-color: $white-100;
@@ -136,8 +136,8 @@
     }
     label {
-      top: 13px;
-      font-size: 13px;
+      top: 14px;
+      font-size: 14px;
       &.show-label {
         font-size: 12px;
@@ -153,7 +153,7 @@
         .icon {
           height: 45px;
           width: 30px;
-          font-size: 13px;
+          font-size: 14px;
         }
       }
     }
@@ -163,7 +163,7 @@
     input,
     select {
       height: 36px;
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 400;
     }
@@ -186,7 +186,7 @@
     label {
       top: 8px;
-      font-size: 13px;
+      font-size: 14px;
       &.switch-label {
         top: 0;
@@ -211,7 +211,7 @@
         .icon {
           height: 36px;
           width: 25px;
-          font-size: 13px;
+          font-size: 14px;
         }
       }
     }
@@ -221,7 +221,7 @@
     input,
     select {
       height: 32px;
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 400;
     }
@@ -252,7 +252,7 @@
     label {
       top: 6px;
-      font-size: 13px;
+      font-size: 14px;
       &.switch-label {
         top: 0;
@@ -269,7 +269,7 @@
         .icon {
           height: 32px;
           width: 25px;
-          font-size: 13px;
+          font-size: 14px;
         }
       }
     }
@@ -280,7 +280,7 @@
   }
   label {
-    font-size: 13px;
+    font-size: 14px;
     left: 15px;
     top: 11px;
     cursor: text;
@@ -303,7 +303,7 @@
       top: -9px;
       left: 10px;
       padding: 0 5px;
-      font-size: 13px;
+      font-size: 14px;
       color: $gray-40;
       &:after {
@@ -366,7 +366,7 @@
         a {
           color: $color-heading;
           display: block;
-          font-size: 13px;
+          font-size: 14px;
           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: 14px;
     &: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: 14px;
     position: absolute;
     right: 5px;
     z-index: 9;

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

@@ -0,0 +1,73 @@
+.inbox-sidebar {
+  width: 460px;
+  border-right: 1px solid $color-border;
+  // padding: 20px;
+  // box-shadow: 2px 0px 6px 2px rgba(0, 0, 0, 0.04);
+  position: sticky;
+  top: 60px;
+  @include until-widescreen {
+    width: 360px;
+  }
+  .head {
+    position: sticky;
+    top: 0px;
+    z-index: 99;
+    background-color: #fff;
+    padding: 20px;
+    border-bottom: 1px solid $color-border;
+    // box-shadow: $ac-shadow-1;
+  }
+}
+.message-list {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-inline: 20px;
+}
+.single-message {
+  transition: 0.2s ease-in-out;
+  padding: 10px 20px;
+  border-radius: 4px;
+  position: relative;
+  z-index: 9;
+  width: calc(100% + 40px);
+  margin-left: -20px;
+  border-bottom: 1px solid $color-border;
+  &.is-unread {
+    background-color: $primary-light-gray;
+  }
+  &:hover {
+    background-color: hsla(var(--secondary-hue), 12%, 95%);
+  }
+}
+.message-details {
+  max-width: 768px;
+  margin: 36px 32px 32px 64px;
+  @include until-widescreen {
+    margin: 36px 16px 16px 16px;
+  }
+}
+.recommended-actions {
+  border-radius: 8px;
+  box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.06);
+  border: 1px solid $color-border;
+  overflow: hidden;
+  .recommended-heading {
+    padding: 10px 20px;
+    border-bottom: 1px solid $color-border;
+    background-color: $secondary-light-gray;
+  }
+  .recommended-body {
+    padding: 12px 8px;
+    .single-action {
+      background-color: hsla(var(--secondary-hue), 12%, 98%);
+      border: 1px solid $color-border;
+      padding: 16px 20px;
+      border-radius: 4px;
+    }
+  }
+}

package/vue-components/styles/components/navbar/_menu-content.scss CHANGED Viewed

@@ -91,7 +91,7 @@
         padding-bottom: 20px;
         p {
-          font-size: 13px;
+          font-size: 14px;
           color: $color-heading;
         }
@@ -107,7 +107,7 @@
         margin-top: 20px;
         p {
-          font-size: 13px;
+          font-size: 14px;
           color: $color-heading;
         }
@@ -159,7 +159,7 @@
         .left-content {
           p {
             font-weight: 500;
-            font-size: 13px;
+            font-size: 14px;
             line-height: 19px;
             margin-bottom: 15px;
@@ -181,7 +181,7 @@
             border: none;
             margin: 0;
             padding: 10px;
-            font-size: 13px;
+            font-size: 14px;
             &.is-active {
               background-color: $ac-primary;
@@ -254,7 +254,7 @@
         border-top: 1px solid $color-border;
         text-align: center;
         font-weight: 500;
-        font-size: 13px;
+        font-size: 14px;
         color: $color-heading;
         display: block;
         padding: 10px 20px;
@@ -273,7 +273,7 @@
           padding: 8px 15px;
           color: $color-heading;
           transition: 0.3s ease-in-out;
-          font-size: 13px;
+          font-size: 14px;
           &:hover {
             background-color: $primary-95;
@@ -324,7 +324,7 @@
         .profile-info {
           p {
             color: $color-heading;
-            font-size: 13px;
+            font-size: 14px;
             font-weight: 500;
             line-height: 1.3;
           }
@@ -431,12 +431,12 @@
         li {
           display: block;
-          font-size: 13px;
+          font-size: 14px;
           a {
             display: block;
             color: $color-heading !important;
             padding: 10px 20px !important;
-            font-size: 13px !important;
+            font-size: 14px !important;
             transition: 0.2s;
             border-bottom: 1px solid $color-border;
@@ -485,7 +485,7 @@
                     span {
                       display: block;
-                      font-size: 13px;
+                      font-size: 14px;
                       margin-top: 4px;
                       line-height: 150%;
                     }

package/vue-components/styles/components/select-box/_ac-select-box.scss CHANGED Viewed

@@ -2,7 +2,7 @@
 //   select {
 //     background-color: $info-light;
 //     border: 1px solid $primary-10;
-//     font-size: 13px;
+//     font-size: 14px;
 //     height: 42px;
 //     padding-left: 20px;

package/vue-components/styles/components/select-box/_multi-select.scss CHANGED Viewed

@@ -8,7 +8,7 @@
     border-radius: 4px;
     border: 1px solid $color-border-dark;
     padding: 6px 30px 8px 15px;
-    font-size: 13px;
+    font-size: 14px;
     border-radius: 4px;
     &:hover {
@@ -20,7 +20,7 @@
       padding: 0;
       // padding-top: 2px !important;
       font-weight: 500;
-      font-size: 13px;
+      font-size: 14px;
     }
     .multiselect__tags-wrap {
@@ -55,7 +55,7 @@
       padding-left: 0;
       left: 0px;
       // top: 2px;
-      font-size: 13px !important;
+      font-size: 14px !important;
       font-weight: 500;
       color: $color-heading;
       line-height: 1.5;
@@ -76,7 +76,7 @@
       .multiselect__option {
         padding: 4px 16px;
         min-height: 32px;
-        font-size: 13px;
+        font-size: 14px;
         display: flex;
         align-items: center;
@@ -85,7 +85,7 @@
         }
         p {
-          font-size: 13px;
+          font-size: 14px;
           color: $color-heading;
         }
@@ -146,7 +146,7 @@
   span {
     label {
       padding-left: 15px !important;
-      font-size: 13px !important;
+      font-size: 14px !important;
       color: $primary-10 !important;
       &:after {
@@ -163,12 +163,12 @@
     color: $color-text;
     font-weight: 400;
     line-height: 1.6;
-    font-size: 13px;
+    font-size: 14px;
   }
 }
 .multiselect__tags > span {
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1;
   color: $color-heading;
 }
@@ -207,7 +207,7 @@
   &.is-small {
     label {
-      font-size: 13px;
+      font-size: 14px;
       top: 6px;
       &.show-label {
@@ -246,7 +246,7 @@
     .multiselect .multiselect__tags {
       min-height: 32px !important;
       padding: 4px 30px 4px 15px;
-      font-size: 13px;
+      font-size: 14px;
       .multiselect__single {
         font-size: 12px;
@@ -254,14 +254,14 @@
       .multiselect__placeholder {
         padding: 5px 0 0;
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 500;
       }
     }
     .multiselect__input,
     .multiselect__single {
-      font-size: 13px !important;
+      font-size: 14px !important;
       font-weight: 500;
       line-height: 1.5;
       // padding-bottom: 4px;
@@ -271,14 +271,14 @@
       &::placeholder {
         font-weight: 500;
         line-height: 1.6;
-        font-size: 13px;
+        font-size: 14px;
       }
     }
   }
   &.is-extra-small {
     label {
-      font-size: 13px;
+      font-size: 14px;
       top: 6px;
       font-weight: 500;
@@ -320,7 +320,7 @@
     .multiselect .multiselect__tags {
       min-height: 32px !important;
       padding: 3px 30px 4px 15px;
-      font-size: 13px;
+      font-size: 14px;
       display: flex;
       align-items: center;
@@ -331,14 +331,14 @@
       .multiselect__placeholder {
         padding: 5px 0 0;
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 500;
       }
     }
     .multiselect__input,
     .multiselect__single {
-      font-size: 13px !important;
+      font-size: 14px !important;
       font-weight: 500;
       line-height: 1.5;
       // padding-bottom: 4px;
@@ -348,7 +348,7 @@
       &::placeholder {
         font-weight: 500;
         line-height: 1.6;
-        font-size: 13px;
+        font-size: 14px;
       }
     }
   }
@@ -397,14 +397,14 @@
   }
   label {
-    font-size: 13px;
+    font-size: 14px;
     left: 15px;
     top: 8px;
     cursor: text;
     color: $color-heading;
     position: absolute;
     z-index: 99;
-    transition: 0.3s ease-in-out;
+    transition: 0.1s ease-in-out;
     .is-required {
       img {
@@ -418,8 +418,9 @@
       top: -10px;
       left: 10px;
       padding: 0 5px;
-      font-size: 13px;
+      font-size: 12px;
       color: $gray-40;
+      font-weight: 500;
       &::after {
         background-color: $white-100;
@@ -448,7 +449,7 @@
 li {
   .multiselect__option {
-    font-size: 13px;
+    font-size: 14px;
     color: $color-heading;
     &:has(input[type="checkbox"]) {

package/vue-components/styles/components/sidebar/_left-sidebar.scss CHANGED Viewed

@@ -89,7 +89,7 @@
         a {
           font-style: normal;
           font-weight: 500;
-          font-size: 13px;
+          font-size: 14px;
           line-height: 16px;
           color: $white-100;
           position: relative;

package/vue-components/styles/components/ui-builder/_ui-builder.scss CHANGED Viewed

@@ -20,7 +20,7 @@
   }
   p {
-    font-size: 13px;
+    font-size: 14px;
     margin-bottom: 10px;
     color: $color-text;
   }
@@ -193,7 +193,7 @@
 //         .th,
 //         .td {
 //           width: 20%;
-//           font-size: 13px;
+//           font-size: 14px;
 //           min-width: 150px;
 //           padding: 6px 20px;
 //         }
@@ -313,7 +313,7 @@
   strong {
     font-style: normal;
     font-weight: 500;
-    font-size: 13px;
+    font-size: 14px;
     line-height: 16px;
     color: $color-heading;
     margin-right: 16px;