npm - @appscode/design-system - Versions diffs - 2.0.41-alpha.9 → 2.0.41 - Mend

@appscode/design-system 2.0.41-alpha.9 → 2.0.41

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 (63) hide show

package/vue-components/styles/base/utilities/_typography.scss CHANGED Viewed

@@ -6,7 +6,7 @@ $font-paragraph: "Roboto", sans-serif;
 html,
 body {
-  background-color: transparent;
+  background-color: $white-100;
   font-family: $font-paragraph;
   font-weight: 400;
   font-size: 13px;
@@ -87,11 +87,25 @@ h6 {
   }
 }
+.content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $color-heading;
+  }
+  p {
+    color: $color-text;
+  }
+}
 a:not(.ac-button) {
   font-family: $font-paragraph;
-  color: $primary;
+  color: $ac-primary;
   &:hover {
-    color: $primary;
+    color: $ac-primary;
   }
 }
@@ -138,3 +152,6 @@ strong {
 .material-icons {
   font-size: 1em;
 }
+.has-text-primary {
+  color: $ac-primary;
+}

package/vue-components/styles/components/_ac-calendar.scss CHANGED Viewed

@@ -10,7 +10,7 @@
   .vc-highlight {
     width: 45px !important;
-    background-color: $primary !important;
+    background-color: $ac-primary !important;
     height: 45px !important;
   }

package/vue-components/styles/components/_ac-tags.scss CHANGED Viewed

@@ -33,12 +33,12 @@
 //   }
 //   &.is-primary {
-//     background-color: $primary;
+//     background-color: $ac-primary;
 //     color: $white-100;
 //     &.is-light {
 //       background-color: rgba(25, 113, 189, 0.2);
-//       color: $primary;
+//       color: $ac-primary;
 //     }
 //   }

package/vue-components/styles/components/_accordion.scss CHANGED Viewed

@@ -16,7 +16,7 @@
           top: 0;
           width: 4px;
           height: 100%;
-          background-color: $primary;
+          background-color: $ac-primary;
         }
       }
     }

package/vue-components/styles/components/_button.scss CHANGED Viewed

@@ -1,16 +1,41 @@
 .button {
+  color: $color-text;
+  background-color: $white-100;
   &.ac-button {
     padding: 8px 16px;
     font-weight: 500;
     line-height: 1;
     &.is-primary {
+      background-color: $ac-primary;
+      &:hover {
+        background-color: $primary-30;
+      }
       &.is-light {
-        color: $primary;
+        color: $ac-primary;
+        background-color: $primary-95;
+        &:hover {
+          background-color: $primary-90;
+        }
         &:focus:not(:hover) {
           color: inherit;
         }
       }
+      &:disabled:not(.is-light) {
+        background-color: $ac-primary;
+        border-color: $ac-primary;
+      }
+      &.is-outlined {
+        border-color: $ac-primary;
+        color: $ac-primary;
+        background-color: transparent;
+        &:hover {
+          border-color: $primary-30;
+          background-color: $ac-primary;
+          color: $white-100;
+        }
+      }
     }
     &.is-warning {
       &.is-light {
@@ -71,7 +96,7 @@
   }
 }
 button.is-primary {
-  background-color: $primary;
+  background-color: $ac-primary;
 }
 .up-down-buttons {
   border-radius: 4px;
@@ -85,7 +110,7 @@ button.is-primary {
     height: 18px;
     cursor: pointer;
     border: none;
-    color: $primary;
+    color: $ac-primary;
     background-color: $color-border;
     transition: 0.3s ease-in-out;
     margin: 0 !important;
@@ -94,7 +119,7 @@ button.is-primary {
       background-color: $primary-80;
     }
     &.is-primary {
-      background-color: $primary;
+      background-color: $ac-primary;
       color: $white-100;
       &:hover {
         background-color: $primary-30;

package/vue-components/styles/components/_direct-deploy.scss CHANGED Viewed

@@ -6,7 +6,7 @@
 //     color: $color-heading;
 //     margin-bottom: 10px;
 //     .fa {
-//       color: $primary;
+//       color: $ac-primary;
 //     }
 //   }

package/vue-components/styles/components/_dropdown.scss CHANGED Viewed

@@ -25,7 +25,7 @@
       color: $color-text;
       &:hover {
         background-color: $primary-97;
-        color: $primary;
+        color: $ac-primary;
       }
     }
   }

package/vue-components/styles/components/_getkeeper.scss CHANGED Viewed

@@ -79,7 +79,7 @@
       }
       &.is-active {
-        background-color: $primary;
+        background-color: $ac-primary;
         color: $white-100;
       }
     }

package/vue-components/styles/components/_options.scss CHANGED Viewed

@@ -62,7 +62,7 @@
     transition: 0.3 ease-in-out;
     &:hover {
-      color: $primary;
+      color: $ac-primary;
     }
     span {
@@ -104,7 +104,7 @@
         &:hover {
           background-color: $color-border;
-          color: $primary;
+          color: $ac-primary;
         }
         span {
@@ -126,7 +126,7 @@
         &:hover {
           background-color: $color-border;
-          color: $primary !important;
+          color: $ac-primary !important;
         }
       }
     }

package/vue-components/styles/components/_overview-page.scss CHANGED Viewed

@@ -50,7 +50,7 @@
         font-weight: 500;
         &:hover {
-          color: $primary;
+          color: $ac-primary;
         }
       }
     }

package/vue-components/styles/components/_pagination.scss CHANGED Viewed

@@ -16,7 +16,7 @@
 //         border-radius: 4px;
 //         &:hover {
-//           background-color: $primary;
+//           background-color: $ac-primary;
 //           color: $white-100;
 //           border: 1px solid
 //             hsla(
@@ -72,16 +72,16 @@
 // }
 // ul > li > a.previous {
-//   border: 1px solid $primary;
+//   border: 1px solid $ac-primary;
 //   background-color: $color-border;
-//   color: $primary;
+//   color: $ac-primary;
 // }
 // ul > li > a.next {
-//   border: 1px solid $primary;
+//   border: 1px solid $ac-primary;
 //   background-color: $color-border;
-//   color: $primary;
+//   color: $ac-primary;
 // }

package/vue-components/styles/components/_preloader.scss CHANGED Viewed

@@ -14,7 +14,7 @@
   animation: spinner 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
   width: 2em;
   height: 2em;
-  background-color: $primary;
+  background-color: $ac-primary;
 }
 .spinner:after {

package/vue-components/styles/components/_preview-modal.scss CHANGED Viewed

@@ -18,7 +18,7 @@
   }
   &:hover {
-    background-color: $primary;
+    background-color: $ac-primary;
   }
 }
@@ -108,7 +108,7 @@
             li {
               &.is-active {
                 a {
-                  background-color: $primary;
+                  background-color: $ac-primary;
                   border-radius: 5px;
                   color: $white-100;
                   padding: 10px 10px;

package/vue-components/styles/components/_progress-bar.scss CHANGED Viewed

@@ -18,7 +18,7 @@
     border: 1px solid $primary-10;
     border-radius: 10px;
     box-shadow: 0 0 2px $primary-10;
-    color: $primary;
+    color: $ac-primary;
     display: inline-flex;
     font-family: sans-serif;
     font-weight: bold;
@@ -90,7 +90,7 @@
   &::-webkit-progress-value {
     border-radius: 5px;
-    background-color: $primary;
+    background-color: $ac-primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -106,7 +106,7 @@
   &::-moz-progress-bar {
     border-radius: 5px;
-    background-color: $primary;
+    background-color: $ac-primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -122,7 +122,7 @@
   &::-ms-fill {
     border-radius: 5px;
-    background-color: $primary;
+    background-color: $ac-primary;
     background-image: linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.15) 25%,
@@ -224,19 +224,19 @@
     &::-webkit-progress-value {
       border-radius: 5px;
-      background-color: $primary;
+      background-color: $ac-primary;
       background-size: 10px 10px;
     }
     &::-moz-progress-bar {
       border-radius: 5px;
-      background-color: $primary;
+      background-color: $ac-primary;
       background-size: 10px 10px;
     }
     &::-ms-fill {
       border-radius: 5px;
-      background-color: $primary;
+      background-color: $ac-primary;
       background-size: 10px 10px;
       border: none;
     }

package/vue-components/styles/components/_table.scss CHANGED Viewed

@@ -65,7 +65,7 @@
   tbody {
     &.is-selected {
       transform: matrix(1, 0, 0, 1, 0, 0) !important;
-      box-shadow: inset 0 0 0 1px $primary;
+      box-shadow: inset 0 0 0 1px $ac-primary;
       border-radius: 4px;
       border-bottom: none;
       color: $black-5;
@@ -79,7 +79,7 @@
       &.is-selected {
         background-color: $primary-97 !important;
         transform: matrix(1, 0, 0, 1, 0, 0) !important;
-        box-shadow: inset 0 0 0 1.2px $primary;
+        box-shadow: inset 0 0 0 1.2px $ac-primary;
         border-radius: 4px;
         border-bottom: none;
         color: $black-5;
@@ -90,7 +90,7 @@
         &:hover {
           background-color: $primary-95 !important;
           transform: matrix(1, 0, 0, 1, 0, 0) !important;
-          box-shadow: inset 0 0 0 1.2px $primary !important;
+          box-shadow: inset 0 0 0 1.2px $ac-primary !important;
         }
       }
@@ -106,7 +106,7 @@
         border: none;
         a:not(.tag a) {
-          color: $primary;
+          color: $ac-primary;
           font-weight: 500 !important;
           transition: 0.3s ease-in-out;
           font-weight: 400;
@@ -115,7 +115,7 @@
         .tags {
           .tag {
             a {
-              color: $primary;
+              color: $ac-primary;
               transition: 0.3s ease-in-out;
               font-weight: 500;
@@ -142,7 +142,7 @@
           i.fa {
             position: absolute;
-            background-color: $primary;
+            background-color: $ac-primary;
             color: $white-100;
             font-size: 11px;
             width: 15px;
@@ -291,8 +291,8 @@
               }
               &:checked + label::before {
-                background-color: $primary;
-                border-color: $primary;
+                background-color: $ac-primary;
+                border-color: $ac-primary;
               }
               &:checked + label::after {
@@ -302,8 +302,8 @@
           }
           .is-checkradio[type="checkbox"].ac-checkbox:checked + label::before {
-            background-color: $primary;
-            border-color: $primary;
+            background-color: $ac-primary;
+            border-color: $ac-primary;
           }
           .is-checkradio[type="checkbox"] + label::before,
@@ -370,7 +370,7 @@
         }
         &:hover {
-          background-color: $primary;
+          background-color: $ac-primary;
           td {
             color: $white-100;
@@ -383,14 +383,14 @@
 .table.ac-table tbody tr:hover td a:not(.tag a) {
   text-decoration: underline;
-  color: $primary;
+  color: $ac-primary;
 }
 // table inner shadow
 .table-inner-shadow {
   border-radius: 0px;
   background: $color-border;
-  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
+  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px $white-100;
 }
 @keyframes expand {

package/vue-components/styles/components/_tabs.scss CHANGED Viewed

@@ -13,8 +13,8 @@
 //           &.is-active {
 //             a {
 //               font-weight: 500;
-//               border-bottom-color: $primary;
-//               border-bottom: 2px solid $primary !important;
+//               border-bottom-color: $ac-primary;
+//               border-bottom: 2px solid $ac-primary !important;
 //               border-width: 2px;
 //             }
 //           }
@@ -28,7 +28,7 @@
 //             padding: 6px 16px;
 //             &:hover {
-//               border-bottom-color: $primary;
+//               border-bottom-color: $ac-primary;
 //             }
 //           }
 //         }
@@ -56,7 +56,7 @@
 //             position: relative;
 //             border-color: $color-border;
 //             z-index: 1;
-//             color: $primary;
+//             color: $ac-primary;
 //             &:after {
 //               position: absolute;
@@ -66,7 +66,7 @@
 //               width: 100%;
 //               height: 4px;
 //               border-radius: 4px 4px 0 0;
-//               background-color: $primary;
+//               background-color: $ac-primary;
 //             }
 //             a {
@@ -131,10 +131,10 @@
 //           &.is-active {
 //             a {
 //               color: $white-100;
-//               background-color: $primary;
+//               background-color: $ac-primary;
 //               &:hover {
-//                 background-color: $primary;
+//                 background-color: $ac-primary;
 //               }
 //             }
 //           }
@@ -162,7 +162,7 @@
 //         li {
 //           &.is-active {
 //             a {
-//               border-bottom: 3px solid $primary !important;
+//               border-bottom: 3px solid $ac-primary !important;
 //             }
 //           }
 //         }
@@ -182,7 +182,7 @@
 //             a {
 //               border-color: $color-border;
 //               background-color: $white-100;
-//               color: $primary;
+//               color: $ac-primary;
 //             }
 //           }
 //         }
@@ -215,7 +215,7 @@
 //             &.is-active {
 //               a {
 //                 background-color: $color-border;
-//                 color: $primary;
+//                 color: $ac-primary;
 //               }
 //             }
 //           }
@@ -226,7 +226,7 @@
 // }
 // .tabs li.is-active a {
-//   color: $primary;
+//   color: $ac-primary;
 // }
 // .no-data-available {
@@ -329,8 +329,8 @@
     li {
       &.is-active {
         a {
-          border-bottom-color: $primary;
-          color: $primary;
+          border-bottom-color: $ac-primary;
+          color: $ac-primary;
         }
       }
     }

package/vue-components/styles/components/_terminal.scss CHANGED Viewed

@@ -186,7 +186,7 @@
                 }
                 &:hover {
-                  color: $primary !important;
+                  color: $ac-primary !important;
                 }
               }
             }
@@ -233,7 +233,7 @@
         text-align: center;
         padding: 4px 20px;
         border-radius: 4px;
-        color: #ffffff !important;
+        color: $white-100 !important;
         text-transform: uppercase;
         &.is-success {

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

@@ -15,7 +15,7 @@
 //           &.is-active {
 //             background-color: transparent;
-//             color: $primary;
+//             color: $ac-primary;
 //           }
 //           .fa {
@@ -94,7 +94,7 @@
 //             color: $color-heading;
 //             &:hover {
-//               color: $primary;
+//               color: $ac-primary;
 //               background-color: transparent;
 //             }
 //           }

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

@@ -536,12 +536,12 @@
 //     &:focus {
 //       outline: none;
-//       border: 1px solid $primary;
+//       border: 1px solid $ac-primary;
 //     }
 //     &.is-selected {
-//       border: 1px solid $primary;
-//       background-color: $primary;
+//       border: 1px solid $ac-primary;
+//       background-color: $ac-primary;
 //       color: $white-100;
 //     }
 //   }

package/vue-components/styles/components/alert/_alert-message.scss CHANGED Viewed

@@ -1,4 +1,11 @@
 .message {
+  &.is-primary {
+    background-color: $primary-95;
+    .message-body {
+      color: $ac-primary;
+      border-color: $ac-primary;
+    }
+  }
   .message-body {
     display: flex;
     padding: 16px;

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

@@ -1,13 +1,13 @@
 .ac-notification {
   background-color: $primary-95;
   font-size: 13px;
-  color: $primary;
+  color: $ac-primary;
   min-height: 36px;
   display: flex;
   align-items: center;
   padding: 8px 16px;
   overflow: hidden;
-  border: 1px solid $primary;
+  border: 1px solid $ac-primary;
   border-radius: 4px;
   justify-content: flex-start;
   position: relative;
@@ -15,7 +15,7 @@
   min-width: 280px;
   p {
-    color: $primary;
+    color: $ac-primary;
     .close-icon {
       padding-right: 10px;
@@ -24,7 +24,7 @@
     a {
       text-decoration: underline;
-      color: $primary;
+      color: $ac-primary;
       &:hover {
         color: hsla(
@@ -81,16 +81,16 @@
     0.2
   );
   color: $white-100;
-  border-color: $primary;
+  border-color: $ac-primary;
   p {
-    color: $primary;
+    color: $ac-primary;
     a {
-      color: $primary;
+      color: $ac-primary;
       &:hover {
-        color: $primary;
+        color: $ac-primary;
         opacity: 0.8;
       }
     }

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

@@ -12,7 +12,7 @@
   &:hover {
     // box-shadow: $ac-shadow-1;
-    border: 1px solid $primary;
+    border: 1px solid $ac-primary;
     background-color: $white-100;
   }

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

@@ -55,14 +55,14 @@
               top: 0;
               width: 0px;
               height: 100%;
-              background-color: $primary;
+              background-color: $ac-primary;
               border-radius: 4px 0 0 4px;
               transition: 0.3s ease-in-out;
             }
             &:hover {
               background-color: #f5f9fc;
-              color: $primary;
+              color: $ac-primary;
               &::after {
                 width: 4px;