@appscode/design-system 1.0.43-alpha.99 → 1.1.0-alpha.2

package/components/_buttons.scss

@@ -54,14 +54,22 @@
       opacity: 0.5 !important;
     }
 
+    &.is-rounded {
+      border-radius: 9999px;
+    }
+
     .ac-icon {
       margin-left: 25px;
       background-color: $ac-white;
       color: $ac-primary;
       padding: 2px 6px;
       border-radius: 4px;
-      width: 28px;
-      height: 28px;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
     }
 
     &.is-small {
@@ -127,8 +135,8 @@
       width: 52px;
       height: 52px;
       padding: 0;
-      &:hover{
-        svg{
+      &:hover {
+        svg {
           color: $ac-white;
         }
       }
@@ -215,7 +223,7 @@
       font-size: 14px;
       font-weight: 500;
       background-color: transparent;
-      color: $ac-gray-lightest;
+      color: $ac-color-text;
 
       &.is-primary {
         background-color: transparent;
@@ -410,33 +418,6 @@
   }
 }
 
-// group buttons
-.buttons {
-  &.are-medium {
-    .button {
-      &.ac-button {
-        @extend .is-medium;
-      }
-    }
-  }
-
-  &.are-small {
-    .button {
-      &.ac-button {
-        @extend .is-small;
-      }
-    }
-  }
-
-  &.are-large {
-    .button {
-      &.ac-button {
-        @extend .is-large;
-      }
-    }
-  }
-}
-
 .ac-play-button-wrapper {
   display: flex;
   align-items: center;
@@ -628,7 +609,7 @@
       --ac-white: #2e323c;
     }
   }
-  .button.ac-button.is-text{
+  .button.ac-button.is-text {
     background-color: transparent;
   }
 }

package/components/_dashboard-header.scss

@@ -81,3 +81,35 @@
     }
   }
 }
+
+.resource {
+  display: flex;
+  align-items: center;
+  border-left: 1px solid $ac-white-light;
+  padding: 0 1.5rem;
+  margin-top: -10px;
+  margin-bottom: -10px;
+  .r-icon {
+    display: flex;
+    align-items: center;
+    max-width: 40px;
+  }
+
+  .r-data {
+    margin-left: 0.8rem;
+    .request,
+    .limit {
+      font-weight: 500;
+      min-width: 50px;
+      text-align: center;
+    }
+    .request {
+      font-weight: 300;
+    }
+    hr {
+      margin: 0;
+      padding: 0;
+      background-color: $ac-white-light;
+    }
+  }
+}

package/components/_left-sidebar-menu.scss

@@ -43,7 +43,7 @@
 }
 
 .ac-left-sidebar-wrapper {
-  background-color: $ac-white;
+  background-color: $ac-white-lightest;
   width: 100%;
   position: sticky;
   top: 50px;
@@ -87,7 +87,7 @@
           li {
             a {
               padding: 12px 15px 12px 26px !important;
-              font-weight: 400;
+              font-weight: 500;
 
               &:hover {
                 &::after {
@@ -95,7 +95,7 @@
                 }
 
                 span {
-                  color: $ac-black;
+                  color: $ac-link-black;
                 }
               }
 
@@ -183,7 +183,7 @@
                 li {
                   a {
                     strong {
-                      font-weight: 400;
+                      font-weight: 500;
                     }
                   }
                 }
@@ -192,10 +192,10 @@
 
             a {
               font-style: normal;
-              font-weight: 400;
+              font-weight: 500;
               font-size: $font-size-small;
               line-height: 16px;
-              color: $ac-black;
+              color: $ac-link-black;
               position: relative;
               z-index: 1;
               padding: 10px 15px 10px 24px;
@@ -223,7 +223,7 @@
                 display: flex;
                 align-items: center;
                 overflow: hidden;
-                font-weight: 400;
+                font-weight: 500;
               }
 
               &.ac-dropdown-button {
@@ -247,7 +247,7 @@
                 }
 
                 span {
-                  color: $ac-black;
+                  color: $ac-link-black;
 
                   img {
                     filter: grayscale(0);
@@ -569,7 +569,7 @@ Responsive Classes
                   }
 
                   span {
-                    color: $ac-black;
+                    color: $ac-link-black;
                   }
                 }
               }

package/components/_navbar.scss

@@ -5,6 +5,7 @@
   width: 100%;
   top: 0;
   z-index: 999;
+
   &.is-light {
     background-color: $ac-white;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
@@ -12,10 +13,12 @@
     .ac-navbar-menu .ac-menu-item .ac-nav-button.ac-profile-button {
       color: #3a3a3a !important;
     }
+
     .drawer-icon svg {
       fill: $ac-color-text !important;
     }
   }
+
   .ac-navbar {
     display: inline-grid;
     grid-template-columns: 255px auto auto;
@@ -31,10 +34,12 @@
         font-weight: 600;
         color: $ac-white;
       }
+
       img {
         height: 30px;
       }
     }
+
     .search-item {
       display: flex;
       align-items: center;
@@ -119,10 +124,31 @@
         position: relative;
         z-index: 1;
 
+        // width: 30px;
+        // height: 30px;
+        // border-radius: 50%;
+        .ac-nav-button:not(.ac-profile-button) {
+          &:after {
+            content: "";
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            position: absolute;
+            z-index: -1;
+            left: 50%;
+            transition: 0.3s ease-in-out;
+            margin-left: -15px;
+          }
+
+          &:hover {
+            &:after {
+              background-color: rgba(255, 255, 255, 0.2) !important;
+            }
+          }
+        }
+
         &:hover {
           .ac-nav-button:not(.ac-profile-button) {
-            background-color: $ac-primary;
-
             i.fa {
               color: $ac-white;
             }
@@ -132,6 +158,7 @@
             opacity: 1;
             visibility: visible;
             top: 40px;
+
             &.theme-choice {
               transition: none;
               padding: 10px 10px;
@@ -141,6 +168,7 @@
               border-radius: 4px;
               left: 0;
               background-color: $ac-white;
+
               ul {
                 li {
                   width: 40px;
@@ -156,10 +184,12 @@
                   }
                 }
               }
+
               // &::after {
               //   right: 90px;
               // }
             }
+
             &::after {
               position: absolute;
               content: "";
@@ -216,8 +246,8 @@
           &.ac-profile-button {
             strong {
               color: $ac-white;
-              margin-left: 45px;
-              font-weight: 400;
+              margin-left: 16px;
+              font-weight: 500;
               font-size: $font-size-small;
             }
 
@@ -244,6 +274,7 @@
           opacity: 0;
           visibility: hidden;
           transition: 0.3s ease-in;
+
           &.theme-choice {
             left: 0;
           }
@@ -551,6 +582,58 @@
   }
 }
 
+.ac-menu-item {
+  li {
+    &.is-close {
+      ul {
+        max-height: 0;
+        visibility: hidden;
+        transition: max-height 0.25s ease-out;
+      }
+    }
+
+    &.is-open {
+      ul {
+        max-height: 200px;
+        visibility: visible;
+        transition: max-height 0.25s ease-out;
+      }
+    }
+  }
+
+  .is-fullwidth {
+    width: 100%;
+  }
+
+  .navbar-dropdown-wrapper {
+    width: 300px;
+    transition: width 0.9s ease-in-out;
+  }
+}
+
+.theme-choicee {
+  border: 1px solid $ac-white-light;
+
+  li {
+    border-right: 1px solid $ac-white-light;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      color: $ac-black;
+    }
+
+    &.is-active {
+      background-color: $ac-primary;
+      color: $ac-white;
+    }
+  }
+}
+
 // start dark theme
 .is-dark-theme {
   body {
@@ -574,6 +657,7 @@
               &.theme-choice {
                 background-color: var(--dark-bg-light);
               }
+
               background-color: var(--dark-bg-light);
 
               ul {
@@ -594,6 +678,7 @@
     }
   }
 }
+
 // end dark theme code
 
 /****************************************

package/components/_preview-modal.scss

@@ -56,7 +56,9 @@
       width: calc(100% + 90px);
       height: 100%;
       background-color: $ac-white;
-      opacity: 0.8;
+
+      // remove opacity for fix cluster ui project 
+      // opacity: 0.8;
       z-index: -1;
     }
 
@@ -178,3 +180,14 @@
     }
   }
 }
+.left-content {
+  .ac-files {
+    max-height: 350px;
+    overflow-y: auto;
+    padding: 10px;
+    span {
+      width: 20px;
+      white-space: nowrap;
+    }
+  }
+}

package/components/_transitions.scss

@@ -0,0 +1,296 @@
+.sidebar-appear-enter-active,
+.sidebar-appear-leave-active {
+  position: absolute;
+  width: 270px;
+  transition: all 0.2s ease;
+}
+.sidebar-appear-enter-from {
+  left: -100%;
+  opacity: 0;
+}
+.sidebar-appear-enter-to {
+  left: 0px;
+  opacity: 1;
+}
+.sidebar-appear-leave-from {
+  left: 0px;
+  opacity: 1;
+}
+.sidebar-appear-leave-to {
+  left: 100%;
+  opacity: 0;
+}
+
+.navbar-appear-enter-active,
+.navbar-appear-leave-active {
+  position: absolute;
+  height: 50px;
+  transition: all 0.2s ease;
+}
+.navbar-appear-enter-from {
+  top: -100%;
+  opacity: 0;
+}
+.navbar-appear-enter-to {
+  top: 0px;
+  opacity: 1;
+}
+.navbar-appear-leave-from {
+  top: 0px;
+  opacity: 1;
+}
+.navbar-appear-leave-to {
+  top: 100%;
+  opacity: 0;
+}
+
+.nested-enter-active .inner,
+.nested-leave-active .inner {
+  transition: all 0.2s ease-in-out;
+}
+
+.nested-enter-from .inner,
+.nested-leave-to .inner {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+.slide-left-enter-from {
+  transform: translateX(20px);
+  opacity: 0;
+}
+.slide-left-enter-to {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.slide-left-leave-from {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.slide-left-leave-to {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.2s ease-in-out;
+}
+.slide-right-enter-from {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+.slide-right-enter-to {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.slide-right-leave-from {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.slide-right-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all 0.2s ease-in-out;
+}
+.slide-down-enter-from {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+.slide-down-enter-to {
+  transform: translateY(0px);
+  opacity: 1;
+}
+.slide-down-leave-from {
+  transform: translateY(0px);
+  opacity: 1;
+}
+.slide-down-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease-in-out;
+}
+.fade-enter-from {
+  opacity: 0;
+}
+.fade-enter-to {
+  opacity: 1;
+}
+.fade-leave-from {
+  opacity: 1;
+}
+.fade-leave-to {
+  opacity: 0;
+}
+
+.list-move, /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(35px);
+}
+
+.list-leave-active {
+  position: absolute;
+}
+
+.zoom-list-move, /* apply transition to moving elements */
+.zoom-list-enter-active,
+.zoom-list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.zoom-list-enter-from,
+.zoom-list-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.zoom-list-leave-active {
+  position: absolute;
+}
+
+.slide-left-list-move,
+.slide-left-list-enter-active,
+.slide-left-list-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+.slide-left-list-enter-from,
+.slide-left-list-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+.slide-left-list-enter-to,
+.slide-left-list-leave-from {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.slide-left-list-leave-active {
+  position: absolute;
+}
+
+.overview-card-enter-active {
+  transition: all 0.2s ease-in-out;
+}
+.overview-card-leave-active {
+  transition: all 0.2s ease-in-out;
+  position: absolute;
+}
+.overview-card-enter-from {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+.overview-card-enter-to {
+  transform: translateY(0px);
+  opacity: 1;
+}
+.overview-card-leave-from {
+  transform: translateY(0px);
+  opacity: 1;
+}
+.overview-card-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.cluster-card-enter-active {
+  transition: all 0.2s ease-in-out;
+}
+.cluster-card-leave-active {
+  transition: all 0s;
+  position: absolute;
+}
+.cluster-card-enter-from {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+.cluster-card-enter-to {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.cluster-card-leave-from {
+  transform: translateX(0px);
+  opacity: 1;
+}
+.cluster-card-leave-to {
+  opacity: 0;
+}
+
+.dropdown-animate.dropdown-show-animation .dropdown-content {
+  animation: dropdownAnim 0.2s ease-in-out;
+}
+.dropdown-animate.dropdown-hide-animation .dropdown-content {
+  animation: dropdownAnim reverse 0.2s ease-in-out;
+}
+
+@keyframes dropdownAnim {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+.accordion-enter-active,
+.accordion-leave-active {
+  transition: all 0.3s ease-in-out;
+  position: relative;
+}
+.accordion-enter-from {
+  top: -10px;
+  opacity: 0;
+}
+.accordion-enter-to {
+  top: 0px;
+  opacity: 1;
+}
+.accordion-leave-from {
+  top: 0px;
+  opacity: 1;
+}
+.accordion-leave-to {
+  top: -10px;
+  opacity: 0;
+}
+
+.fa.fa-spinner.spin {
+  -webkit-animation: spin 1s linear infinite;
+  -moz-animation: spinAnim 1s linear infinite;
+  animation: spinAnim 1s linear infinite;
+}
+@-moz-keyframes spinAnim {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spinAnim {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spinAnim {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

package/components/_wizard.scss

@@ -121,6 +121,7 @@
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
+  max-width: 250px;
 
   &.is-active-require-field {
     &:after {

package/components/bbum/_all.scss

@@ -0,0 +1,9 @@
+@import "activities-header";
+@import "card-team";
+@import "information-center";
+@import "left-sidebar";
+@import "mobile-desktop";
+@import "post";
+@import "sign-up-notification";
+@import "single-post-preview";
+@import "user-profile";