@appscode/design-system 1.0.43-alpha.49 → 1.0.43-alpha.52

package/base/utilities/_initial-variables.scss

@@ -26,7 +26,7 @@ $ac-yellow: #f7ad2a;
 $ac-green: #158748;
 $ac-blue: #0aafff;
 $ac-purple: #791e94;
-$ac-red: #cd3328;
+$ac-red: #ff3729;
 
 // Products Color
 $voyager-primary: #2d2a78;

package/base/utilities/dark-theme.scss

@@ -7,6 +7,7 @@ $dark-bg-light: var(--dark-bg-light);
   --ac-black: var(--ac-white-text);
   --ac-text-heading: var(--ac-white-text);
   --ac-text: #98a6b4;
+  --ac-gray-darker: #a6a6a6;
   --ac-gray-light: #424242;
   --ac-gray-lightest: #777777;
   --ac-white-light: #3f3f3f;

package/components/_ac-card.scss

@@ -244,7 +244,7 @@
 // offer card scss start
 .pricing-card-wrpper {
   &.offer-card {
-    background-color: #fafafa;
+    background-color: $ac-white-lighter;
     border: 1px solid $ac-white-light;
     border-radius: 4px;
     display: flex;
@@ -415,7 +415,7 @@
     }
 
     &.style-three {
-      background-color: #fafafa;
+      background-color: $ac-white-lighter;
       width: 183px;
       padding: 15px 15px 20px;
       height: 115px;

package/components/_ac-input.scss

@@ -126,6 +126,7 @@
         color: $ac-color-value;
         top: -9px;
         font-weight: 500;
+        background-color: $ac-white;
       }
     }
 
@@ -285,7 +286,7 @@
       left: 10px;
       padding: 0 5px;
       font-size: $font-size-small;
-      color: $ac-black;
+      color: $ac-color-value;
 
       &:after {
         position: absolute;
@@ -372,25 +373,24 @@
   }
 
   .ac-textarea {
-    border: 1px solid $ac-label-text;
-    border-radius: 4px;
-    padding: 10px 0 5px 0;
-    // background-color: $ac-input-bg-color;
-    transition: background-color 0.3s ease-in-out;
+    // border: 1px solid $ac-label-text;
+    // border-radius: 4px;
+    // padding: 10px 0 5px 0;
+    // // background-color: $ac-input-bg-color;
+    // transition: background-color 0.3s ease-in-out;
 
     textarea {
-      border: none;
+      border: 1px solid $ac-label-text;
       background-color: transparent;
-      padding-top: 0;
-      padding-bottom: 0;
-
+      padding: 10px 15px;
+      min-height: 50px;
       &.bg-white {
         background-color: transparent;
       }
 
       &:focus {
         outline: none;
-        border: none;
+        border: 1px solid $ac-primary;
       }
     }
   }

package/components/_ac-table.scss

@@ -326,7 +326,7 @@
               }
 
               &:checked + label::after {
-                border-color: #fafafa;
+                border-color: $ac-white-lighter;
               }
             }
           }

package/components/_buttons.scss

@@ -610,12 +610,8 @@
   }
   .button.ac-button {
     --ac-white: #ffffff;
-  }
-  .button {
-    &.ac-button {
-      &.is-white {
-        background-color: $dark-bg-light;
-      }
+    &.is-white {
+      --ac-white: #2e323c;
     }
   }
 }

package/components/_image-upload.scss

@@ -22,10 +22,12 @@
       border-radius: 50%;
       overflow: hidden;
       margin: 0 auto 30px;
+      border: 1px solid $ac-white-light;
     }
 
     .drag-and-drop-msg {
       font-size: 13px;
+      color: $ac-color-value;
       font-weight: 400;
       margin-bottom: 10px;
 

package/components/_left-sidebar-menu.scss

@@ -223,6 +223,9 @@
                 background-color: transparent;
 
                 span {
+                  i.fa {
+                    color: $ac-primary;
+                  }
                   img {
                     filter: grayscale(0);
                   }
@@ -295,62 +298,6 @@
       }
     }
   }
-
-  &.is-dark-sidebar {
-    background-color: $ac-color-heading;
-
-    .ac-lef-sidebar-inner {
-      .ac-product-logo {
-        .ac-product-version {
-          color: $ac-primary;
-        }
-      }
-
-      .menu-list {
-        &.ac-menu-list {
-          height: calc(100vh - 130px);
-          overflow-y: auto;
-          padding-top: 8px;
-
-          li {
-            a {
-              color: $ac-white !important;
-              background-color: $ac-color-heading;
-
-              &:hover {
-                color: $ac-white !important;
-
-                span {
-                  color: $ac-black;
-                }
-              }
-
-              &:after {
-                background-color: $ac-color-text;
-              }
-            }
-
-            &.is-active {
-              color: $ac-primary !important;
-
-              &:after,
-              &::before {
-                background: linear-gradient(
-                  89.41deg,
-                  rgba(25, 113, 189, 0.2) 0.06%,
-                  rgba(25, 113, 189, 0) 138.7%
-                );
-
-                &::before {
-                  background-color: $ac-primary;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
 }
 
 // widget menu end
@@ -496,6 +443,11 @@
                   &.is-active {
                     font-weight: 500;
                     color: $ac-full-white !important;
+                    span {
+                      i.fa {
+                        color: $ac-primary;
+                      }
+                    }
 
                     &:after {
                       background: var(--dark-bg-light) !important;

package/components/_navbar.scss

@@ -131,8 +131,35 @@
           .ac-menu-content {
             opacity: 1;
             visibility: visible;
-            top: 45px;
+            top: 40px;
+            &.theme-choice {
+              transition: none;
+              padding: 10px 10px;
+              min-width: 150px !important;
+              max-height: 150px;
+              overflow-y: auto;
+              border-radius: 4px;
+              left: 0;
+              background-color: $ac-white;
+              ul {
+                li {
+                  width: 40px;
+                  height: 40px;
+                  line-height: 42px;
+                  border-radius: 4px;
+                  text-align: center;
+                  cursor: pointer;
 
+                  &.is-active {
+                    color: $ac-white;
+                    background: $ac-primary;
+                  }
+                }
+              }
+              // &::after {
+              //   right: 90px;
+              // }
+            }
             &::after {
               position: absolute;
               content: "";
@@ -216,7 +243,10 @@
           min-width: 180px;
           opacity: 0;
           visibility: hidden;
-          transition: 0.3s ease-in-out;
+          transition: 0.3s ease-in;
+          &.theme-choice {
+            left: 0;
+          }
 
           .user-profile-wrapper {
             background-color: $ac-white;
@@ -370,9 +400,9 @@
             background-color: $ac-gray-light;
           }
 
-          &:last-child {
-            right: 0;
-          }
+          // &:last-child {
+          //   right: 0;
+          // }
 
           &.is-notification {
             right: 0;
@@ -541,6 +571,9 @@
             }
 
             .ac-menu-content {
+              &.theme-choice {
+                background-color: var(--dark-bg-light);
+              }
               background-color: var(--dark-bg-light);
 
               ul {

package/components/_pricing-table.scss

@@ -1,6 +1,6 @@
 .pricing-table {
   border: 1px solid $ac-white-light;
-  background-color: #fafafa;
+  background-color: $ac-white-lighter;
   border-radius: 4px;
 
   .pricing-title {

package/package.json

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

package/vue-components/v2/navbar/ThemeMode.vue

@@ -1,12 +1,21 @@
 <template>
-  <div
-    v-if="themeMode"
-    class="ac-menu-item app-drawer-wrapper is-flex is-justify-content-center is-align-items-center"
-    style="color: #ffffff; font-size: 15px;"
-    @click="toggleTheme"
-    :title="themeModeIconTooltip"
-  >
-    <i :class="`fa ${themeModeIconClass}`" />
+  <div>
+    <button
+      v-if="themeMode"
+      class="button ac-nav-button"
+      style="color: #ffffff; font-size: 15px;"
+      @click="toggleTheme"
+      :title="themeModeIconTooltip"
+    >
+      <i :class="`fa ${themeModeIconClass}`" />
+    </button>
+    <div class="ac-menu-content theme-choice">
+      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
+        <li class="is-active"><i class="fa fa-moon-o"></i></li>
+        <li><i class="fa fa-desktop"></i></li>
+        <li><i class="fa fa-sun-o"></i></li>
+      </ul>
+    </div>
   </div>
 </template>
 <script>