@appscode/design-system 1.0.43-alpha.12 → 1.0.43-alpha.16

package/components/_monaco-editor.scss

@@ -1,6 +1,6 @@
 .editor {
   border: none;
-  background: #f5f7f9 !important;
+  background-color: #f5f7f9 !important;
 }
 
 .decorationsOverviewRuler {

package/components/_navbar.scss

@@ -1,5 +1,5 @@
 .ac-navbar-area {
-  background: $ac-primary;
+  background-color: $ac-primary;
   box-shadow: $ac-shadow-3;
   position: fixed;
   width: 100%;
@@ -13,7 +13,7 @@
       color: #3a3a3a !important;
     }
     .drawer-icon svg {
-      fill: #333 !important;
+      fill: $ac-color-text !important;
     }
   }
   .ac-navbar {
@@ -38,7 +38,7 @@
     .search-item {
       display: flex;
       align-items: center;
-      background: rgba(255, 255, 255, 0.2);
+      background-color: rgba(255, 255, 255, 0.2);
       padding: 5px 20px;
       border-radius: 4px;
 
@@ -47,7 +47,7 @@
       }
 
       input {
-        background: transparent;
+        background-color: transparent;
         border: none;
         color: $ac-white;
         font-size: $font-size-small;
@@ -107,7 +107,7 @@
               top: 0;
               width: 100%;
               height: 100%;
-              background-color: #000;
+              background-color: $ac-black;
               opacity: 0.2;
               z-index: 1;
             }
@@ -138,7 +138,7 @@
               content: "";
               right: 15px;
               top: -6px;
-              background: $ac-white;
+              background-color: $ac-white;
               width: 15px;
               height: 15px;
               transform: rotate(45deg);
@@ -153,7 +153,7 @@
         }
 
         .ac-nav-button {
-          background: transparent;
+          background-color: transparent;
           border: none;
           color: $ac-white-lighter;
           padding: 0 14px;
@@ -173,7 +173,7 @@
             right: 5px;
             width: 15px;
             height: 15px;
-            background: $ac-white;
+            background-color: $ac-white;
             font-size: 12px;
             line-height: 15px;
             border-radius: 50%;
@@ -226,7 +226,7 @@
             .profile-area {
               display: flex;
               align-items: center;
-              border-bottom: 1px solid #e5e9f2;
+              border-bottom: 1px solid $ac-white-light;
               padding-bottom: 10px;
               margin-bottom: 10px;
 
@@ -255,6 +255,7 @@
 
               .profile-info {
                 p {
+                  color: $ac-color-text;
                   font-size: $font-size-small;
                   font-weight: 500;
                   line-height: 1.3;
@@ -283,7 +284,7 @@
           }
 
           &.quick-access {
-            background: $ac-white;
+            background-color: $ac-white;
             padding: 20px;
             min-width: 260px !important;
             max-height: 250px;
@@ -294,19 +295,19 @@
               display: flex;
               justify-content: space-between;
               align-items: center;
-              border-bottom: 1px solid #e5e9f2;
+              border-bottom: 1px solid $ac-white-light;
               padding-bottom: 20px;
 
               p {
                 font-size: $font-size-small;
-                color: #3c4858;
+                color: $ac-color-text;
               }
 
               button {
-                background: transparent;
+                background-color: transparent;
                 border: none;
                 cursor: pointer;
-                color: #8392a5;
+                color: $ac-color-value;
               }
             }
 
@@ -315,7 +316,7 @@
 
               p {
                 font-size: $font-size-small;
-                color: #3c4858;
+                color: $ac-color-text;
               }
 
               .organizations {
@@ -341,6 +342,7 @@
                     padding: 0;
                     font-size: $font-size-tiny;
                     color: #eb5757;
+                    background-color: transparent;
                   }
                 }
               }
@@ -359,13 +361,13 @@
 
           /* Handle */
           &::-webkit-scrollbar-thumb {
-            background: #8392a5;
+            background-color: $ac-gray-light;
             border-radius: 10px;
           }
 
           /* Handle on hover */
           &::-webkit-scrollbar-thumb:hover {
-            background: #8392a5;
+            background-color: $ac-gray-light;
           }
 
           &:last-child {
@@ -374,7 +376,7 @@
 
           &.is-notification {
             right: 0;
-            background: $ac-white;
+            background-color: $ac-white;
             box-shadow: 0px 4px 8px rgba(84, 101, 126, 0.2);
             border-radius: 4px;
             min-width: 330px;
@@ -493,7 +495,7 @@
           }
 
           ul {
-            background: $ac-white;
+            background-color: $ac-white;
             padding: 0;
             border-radius: 4px;
             overflow: hidden;

package/components/_overview-page.scss

@@ -25,7 +25,7 @@
   //  single charge
   .single-charge-inner {
     padding: 10px 0;
-    border-bottom: 1px solid $ac-modal-header-bg;
+    border-bottom: 1px solid $ac-white-light;
 
     &:last-child {
       border-bottom: none;
@@ -80,4 +80,3 @@
   padding: 20px 30px;
   max-width: 450px;
 }
-

package/components/_pagination.scss

@@ -34,7 +34,7 @@
 }
 
 .counting-page {
-  color: hsla(0, 0, var(--ac-lightness), 0.7);
+  color: $ac-color-value;
   font-size: 12px;
 
   span {
@@ -57,7 +57,7 @@
     height: 20px;
     font-size: 11px;
     background-color: $ac-white;
-    color: darken($ac-gray-lighter, 50%);
+    color: $ac-color-value;
     &:focus-visible {
       outline: none;
     }

package/components/_payment-card.scss

@@ -32,7 +32,7 @@
   display: block;
 
   &.add-card {
-    background: transparent;
+    background-color: transparent;
     box-shadow: none;
     border: 2px dashed #caced5;
     display: flex;
@@ -54,7 +54,7 @@
       top: 5px;
       width: 14px;
       height: 14px;
-      background: $ac-white;
+      background-color: $ac-white;
       border: 1px solid $ac-primary;
       z-index: 1;
       border-radius: 50%;
@@ -63,7 +63,7 @@
     &::before {
       width: 6px;
       height: 6px;
-      background: $ac-primary;
+      background-color: $ac-primary;
       border: none;
       left: 9px;
       top: 9px;
@@ -193,7 +193,7 @@
       span {
         width: 7px;
         height: 7px;
-        background: $ac-white;
+        background-color: $ac-white;
         display: inline-block;
         margin: 2px;
         border-radius: 50%;
@@ -222,19 +222,26 @@
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {}
+@media (max-width: 575.98px) {
+}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {}
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {}
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
 
-@media (min-width: 1200px) and (max-width: 1399.98px) {}
+@media (min-width: 1200px) and (max-width: 1399.98px) {
+}
 
-@media (min-width: 1400px) and (max-width: 1550.98px) {}
+@media (min-width: 1400px) and (max-width: 1550.98px) {
+}
 
-@media (min-width: 1551px) and (max-width: 1799.98px) {}
+@media (min-width: 1551px) and (max-width: 1799.98px) {
+}

package/components/_preview-modal.scss

@@ -1,7 +1,7 @@
 .preview-icon {
   width: 60px;
   height: 60px;
-  background: rgba(25, 113, 189, 0.4);
+  background-color: rgba(25, 113, 189, 0.4);
   box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.16);
   border-radius: 4px 0px 0px 4px;
   position: fixed;
@@ -55,7 +55,7 @@
       top: -50px;
       width: calc(100% + 90px);
       height: 100%;
-      background: #333;
+      background-color: $ac-color-value;
       opacity: 0.8;
       z-index: -1;
     }
@@ -81,11 +81,11 @@
           font-weight: normal;
           font-size: 16px;
           line-height: 100%;
-          color: #54657e;
+          color: $ac-gray-lightest;
           cursor: pointer;
 
           i.fa {
-            color: #54657e;
+            color: $ac-gray-lightest;
             padding-left: 5px;
           }
         }
@@ -106,7 +106,7 @@
             li {
               &.is-active {
                 a {
-                  background: $ac-primary;
+                  background-color: $ac-primary;
                   border-radius: 5px;
                   color: $ac-white;
                   padding: 10px 10px;
@@ -162,7 +162,7 @@
         width: 100%;
 
         .code-preview {
-          background: #f5f7f9;
+          background-color: #f5f7f9;
           border-radius: 4px;
           display: flex;
 

package/components/_progress-bar.scss

@@ -14,7 +14,7 @@
 
   .progress-tooltip-info {
     align-items: center;
-    background: $ac-bg-light-gray;
+    background-color: $ac-bg-light-gray;
     border: 1px solid $ac-border;
     border-radius: 10px;
     box-shadow: 0 0 2px $ac-border;

package/components/_subscription-card.scss

@@ -3,8 +3,8 @@
 }
 
 .single-subscription-card {
-  border: 1px solid $ac-white-light;
-  background: #fafafa;
+  border: 1px solid $ac-input-bg-color;
+  background-color: $ac-white;
   padding: 10px;
   transition: 0.3s ease-in-out;
   border-radius: 4px;
@@ -46,7 +46,7 @@
     box-shadow: none;
     border-bottom: 1px solid $ac-white-light;
     margin-bottom: 10px;
-    background: transparent;
+    background-color: transparent;
     padding: 0;
 
     h5 {
@@ -106,7 +106,7 @@
     }
 
     .quantity {
-      background: #f99a00;
+      background-color: #f99a00;
       border-radius: 3px;
       font-weight: normal;
       font-size: 12px;

package/components/_table-of-content.scss

@@ -1,6 +1,6 @@
 .ac-accordion-wrapper {
   &.table-of-content {
-    background: #f5f7f9;
+    background-color: #f5f7f9;
     padding: 5px 15px;
     border-radius: 4px;
 

package/components/_widget-menu.scss

@@ -46,7 +46,7 @@
         //   width: 6px;
         //   height: 6px;
         //   border-radius: 50%;
-        //   background-color: #333;
+        //   background-color: $ac-color-value;
         // }
 
         &::after {
@@ -57,7 +57,7 @@
           top: -7px;
           width: 1px;
           height: calc(100% - 4px);
-          background-color: #333;
+          background-color: $ac-color-value;
         }
 
         li {
@@ -74,7 +74,7 @@
             width: 7px;
             height: 7px;
             border-radius: 50%;
-            background-color: #333;
+            background-color: $ac-color-value;
           }
 
           &::after {
@@ -84,7 +84,7 @@
             top: 18.4px;
             width: 20px;
             height: 1px;
-            background: #333;
+            background-color: $ac-color-value;
             z-index: 9;
           }
 
@@ -134,7 +134,7 @@
     width: 100%;
     justify-content: space-between;
     padding: 18px;
-    background: $ac-white-light;
+    background-color: $ac-white-light;
 
     p {
       font-size: 13px;
@@ -199,7 +199,7 @@
           top: 0;
           width: 1px;
           height: calc(100% - 22px);
-          background-color: #333;
+          background-color: $ac-color-value;
         }
 
         &::before {
@@ -211,7 +211,7 @@
           width: 6px;
           height: 6px;
           border-radius: 50%;
-          background-color: #333;
+          background-color: $ac-color-value;
         }
 
         li {
@@ -226,7 +226,7 @@
             bottom: 22px;
             width: 20px;
             height: 1px;
-            background: #333;
+            background-color: $ac-color-value;
             z-index: 9;
           }
 
@@ -239,7 +239,7 @@
             width: 6px;
             height: 6px;
             border-radius: 50%;
-            background-color: #333;
+            background-color: $ac-color-value;
           }
         }
       }

package/components/_wizard.scss

@@ -1,6 +1,6 @@
 .single-wizard-section {
   padding: 20px;
-  background: $ac-white;
+  background-color: $ac-white;
   border: 1px solid $ac-white-light;
   border-radius: 4px;
 }
@@ -114,7 +114,7 @@
 .card-select {
   height: 94px;
   padding: 10px;
-  background: $ac-white;
+  background-color: $ac-white;
   border: 1px solid $ac-white-light;
   box-sizing: border-box;
   border-radius: 4px;
@@ -128,7 +128,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      background: #000;
+      background-color: $ac-black;
       top: 0;
       left: 0;
       z-index: 1;
@@ -150,7 +150,7 @@
     height: auto;
     padding: 0;
     border: none;
-    background: transparent;
+    background-color: transparent;
     width: auto;
     margin-bottom: 0;
     label {
@@ -206,7 +206,7 @@
   }
 
   &.is-disabled {
-    background: #f2f2f2;
+    background-color: $ac-white-lighter;
     cursor: not-allowed;
     opacity: 0.8;
 
@@ -235,7 +235,7 @@
     z-index: 1;
 
     .btn-more-option {
-      background: #e4e4e4;
+      background-color: #e4e4e4;
       height: 16px;
       width: 30px;
       border: none;
@@ -253,7 +253,7 @@
         width: 4px;
         height: 4px;
         border-radius: 50%;
-        background: #b1b1b1;
+        background-color: #b1b1b1;
         margin-right: 2px;
 
         &:last-child {
@@ -268,7 +268,7 @@
     z-index: 2;
     right: 10px;
     top: 10px;
-    background: $ac-white;
+    background-color: $ac-white;
     box-shadow: $ac-shadow-2;
     display: inline-block;
     border-radius: 4px;
@@ -287,7 +287,7 @@
       height: 25px;
       width: 25px;
       text-align: center;
-      background: $ac-white;
+      background-color: $ac-white;
       border-radius: 50%;
       cursor: pointer;
       color: $ac-danger;
@@ -307,7 +307,7 @@
       a {
         display: block;
         padding: 5px 10px 5px 0;
-        color: #333;
+        color: $ac-color-value;
         font-size: $font-size-tiny;
         text-decoration: underline;
         font-weight: 400;
@@ -512,7 +512,7 @@
     }
 
     &.t-title {
-      background: $table-header;
+      background-color: $table-header;
       border-radius: 4px 4px 0px 0px;
       border-bottom: none;
 
@@ -564,7 +564,7 @@
       font-size: $font-size-small;
       line-height: 18px;
       display: block;
-      color: $ac-border;
+      color: $ac-color-text;
       margin-bottom: 5px;
     }
   }
@@ -572,7 +572,7 @@
   .wizard-title,
   .wizard-title.has-line {
     span {
-      background-color: $ac-bg-light-gray;
+      background-color: $ac-border;
     }
   }
 
@@ -690,7 +690,7 @@ label {
         &:focus {
           box-shadow: none;
           box-shadow: none;
-          background: #cbe3f8;
+          background-color: #cbe3f8;
           border-radius: 50%;
         }
       }
@@ -709,7 +709,7 @@ button {
     &:focus {
       border: none;
       box-shadow: none;
-      background: #cbe3f8;
+      background-color: #cbe3f8;
       border-radius: 50%;
     }
   }
@@ -753,7 +753,7 @@ h5 {
 
 // Wizard Notification Area Start
 .wizard-notification-area {
-  background: #54657e;
+  background-color: $ac-gray-lightest;
   border-radius: 10px;
   padding: 10px;
   width: 100%;
@@ -816,7 +816,7 @@ h5 {
 
     &.is-selected {
       border: 1px solid $ac-primary;
-      background: $ac-primary;
+      background-color: $ac-primary;
       color: $ac-white;
     }
   }

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

@@ -32,19 +32,19 @@
   }
 
   &.is-success {
-    background: #27b064 !important;
+    background-color: #27b064 !important;
   }
 
   &.is-error {
-    background: #ea3d2f !important;
+    background-color: #ea3d2f !important;
   }
 
   &.is-warning {
-    background: #f7ad2a !important;
+    background-color: #f7ad2a !important;
   }
 
   &.is-info {
-    background: #0aafff !important;
+    background-color: #0aafff !important;
   }
 }
 

package/components/bbum/_card-team.scss

@@ -12,9 +12,9 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: #f9fafc;
+    background-color: $ac-white;
     padding: 15px 20px;
-    border-bottom: 1px solid #e5e9f2;
+    border-bottom: 1px solid $ac-white-light;
     box-shadow: none;
 
     strong {
@@ -72,7 +72,7 @@
 
     .meta {
       font-size: $font-size-small;
-      color: #3c4858;
+      color: $ac-color-value;
       margin-bottom: 20px;
     }
 
@@ -84,7 +84,7 @@
 
       li:not(:first-child) {
         font-size: $font-size-small;
-        color: #3c4858;
+        color: $ac-color-value;
         list-style: disc;
       }
     }

package/components/bbum/_information-center.scss

@@ -81,7 +81,7 @@
           content: "";
           width: 100%;
           height: 100%;
-          background-color: #000;
+          background-color: $ac-black;
           z-index: -1;
           opacity: 0.2;
         }
@@ -111,7 +111,7 @@
             top: 0;
             width: 100%;
             height: 100%;
-            background-color: #000;
+            background-color: $ac-black;
             opacity: 0.3;
             z-index: -1;
           }