@appscode/design-system 1.0.3-alpha.7 → 1.0.43-alpha.4

package/base/utilities/_default.scss

@@ -29,7 +29,7 @@
       position: sticky;
       top: 100px;
       background-color: #fff;
-      z-index: 9;
+      z-index: 997;
     }
     .ac-system-content {
       &.pr-15 {
@@ -133,6 +133,19 @@
 .form-content {
   width: 720px;
 }
+
+.section-padding {
+  padding: 100px 0;
+}
+
+.section-padding-60 {
+  padding: 60px 0;
+}
+
+.short-section-padding {
+  padding: 50px 0;
+}
+
 .section-divider {
   background-color: $ac-white-light;
 }
@@ -194,6 +207,13 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+.no-data-image {
+  img {
+    width: 250px;
+    height: auto;
+    padding: 20px;
+  }
+}
 
 // for ellipsis
 @for $i from 0 through 10 {

package/components/_ac-input.scss

@@ -92,6 +92,7 @@
       }
     }
   }
+
   &.is-normal {
     input {
       height: 45px;
@@ -109,7 +110,7 @@
     }
 
     span.eye i.fa {
-      padding: 10px;
+      padding: 14px 10px;
     }
 
     .ac-search-button {
@@ -117,7 +118,7 @@
     }
 
     label {
-      top: 8px;
+      top: 13px;
       font-size: $font-size-small;
 
       &.show-label {
@@ -137,6 +138,7 @@
       }
     }
   }
+
   &.is-small {
     input {
       height: 36px;
@@ -182,6 +184,7 @@
       }
     }
   }
+
   &.is-extra-small {
     input {
       height: 32px;
@@ -226,6 +229,7 @@
       }
     }
   }
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -521,6 +525,23 @@
   }
 }
 
+input#captcha {
+  background-color: #ffffff;
+  height: 36px;
+  font-weight: 400;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #a6abbd;
+  padding: 8px 15px;
+  font-size: 13px;
+  transition: background-color 0.3s ease-in-out;
+
+  &:focus {
+    outline: none;
+    border-bottom: 1px solid $ac-border;
+  }
+}
+
 // AC-Checkbox
 .ac-single-checkbox {
   .is-checkradio {
@@ -556,20 +577,24 @@
     padding-left: 25px;
     user-select: none;
   }
+
   .is-checkradio[type="checkbox"].ac-checkbox:checked + label {
     color: $ac-primary !important;
   }
+
   .is-checkradio[type="checkbox"].ac-checkbox + label {
     color: $ac-link-black;
     font-size: 13px;
     padding-left: 25px;
     user-select: none;
   }
+
   .is-checkradio[type="checkbox"],
   .is-checkradio[type="radio"] {
     display: none;
   }
 }
+
 .ac-single-radio {
   &.is-selected {
     .is-checkradio[type="radio"].ac-radio + label {
@@ -582,6 +607,7 @@
 .is-checkradio[type="checkbox"] + label:before {
   top: 3px;
 }
+
 // AC-Switch
 .ac-single-switch {
   label {
@@ -598,6 +624,35 @@
     margin-top: 6px;
   }
 
+  &.is-small {
+    label {
+      font-size: 13px !important;
+    }
+    .switch[type="checkbox"] + label {
+      font-size: 13px;
+      padding-top: 0;
+      padding-left: 40px;
+
+      &::before {
+        width: 30px;
+        height: 16.2px;
+      }
+
+      &::after {
+        top: 2px;
+        left: 2px;
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    .switch[type="checkbox"]:checked + label {
+      &::after {
+        left: 15px;
+      }
+    }
+  }
+
   .switch {
     &[type="checkbox"] + label {
       padding-top: 3px;
@@ -665,6 +720,7 @@
       padding-left: 25px;
       font-size: 13px;
       padding: 0.3rem 0.5rem 0.2rem 1.5rem;
+
       &::after {
         background-color: $ac-primary;
         width: 16px;

package/components/_ac-table.scss

@@ -86,6 +86,40 @@
         color: $ac-color-heading;
         border: none;
         font-weight: 500;
+
+        &.sorting {
+          cursor: pointer;
+          position: relative;
+
+          &.sorting-asc {
+            &::before {
+              color: $ac-color-heading;
+            }
+          }
+          &.sorting-desc {
+            &::after {
+              color: $ac-color-heading;
+            }
+          }
+
+          &:after,
+          &::before {
+            position: absolute;
+            color: #808998;
+            bottom: 0.5em;
+            font-size: 13px;
+            font-weight: 1000;
+            display: block;
+          }
+          &:before {
+            right: 1em;
+            content: "\2191";
+          }
+          &:after {
+            right: 0.5em;
+            content: "\2193";
+          }
+        }
       }
     }
   }
@@ -224,26 +258,20 @@
   }
   &.ac-bordered {
     thead {
-      td {
-        border-top: 1px solid $ac-white-light;
-        border-bottom: 1px solid $ac-white-light;
-      }
-    }
-
-    tbody {
       tr {
-        border-bottom: 1px solid $ac-white-light;
-
         th {
+          border-top: 1px solid $ac-white-light;
+          border-bottom: 1px solid $ac-white-light;
+          border-right: 1px solid $ac-white-light;
           &:first-child {
-            border-radius: 0;
-          }
-
-          &:last-child {
-            border-radius: 0;
+            border-left: 1px solid $ac-white-light;
           }
         }
+      }
+    }
 
+    tbody {
+      tr {
         &:hover {
           box-shadow: none;
         }
@@ -252,7 +280,11 @@
           font-size: $font-size-small;
           color: $ac-gray-dark;
           background-color: $ac-white;
-
+          border-bottom: 1px solid $ac-white-light;
+          border-right: 1px solid $ac-white-light;
+          &:first-child {
+            border-left: 1px solid $ac-white-light;
+          }
           &:first-child {
             color: $ac-color-heading;
             border-radius: 0;

package/components/_breadcumb.scss

@@ -6,7 +6,7 @@
   top: 50px;
   height: 50px;
   background: $ac-white;
-  z-index: 99;
+  z-index: 998;
 }
 
 .breadcrumb {

package/components/_left-sidebar-menu.scss

@@ -232,7 +232,7 @@
                 &::before {
                   background: linear-gradient(
                     89.41deg,
-                    rgba(25, 113, 189, 0.2) 0.06%,
+                    scale-color($ac-primary, $lightness: 80%),
                     rgba(25, 113, 189, 0) 138.7%
                   );
                   position: absolute;
@@ -246,9 +246,10 @@
                 }
 
                 &::before {
-                  background-color: $ac-primary;
+                  background: $ac-primary;
                   height: 100%;
                   width: 4px;
+                  z-index: 9;
                 }
               }
 

package/components/_navbar.scss

@@ -32,7 +32,7 @@
         color: $ac-white;
       }
       img {
-        height: 40px;
+        height: 30px;
       }
     }
     .search-item {

package/components/_preloader.scss

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

package/components/ui-builder/_ui-builder.scss

@@ -148,8 +148,8 @@
     }
   }
   .is-selected {
-    border: 1px solid #1971bd;
-    border-bottom: 1px solid #1971bd !important;
+    border: 1px solid $ac-primary;
+    border-bottom: 1px solid $ac-primary !important;
     border-radius: 4px;
   }
 }

package/layouts/_404.scss

@@ -0,0 +1,158 @@
+.fzf-wrapper {
+  padding: 45px 0;
+  position: relative;
+  z-index: 1;
+  background-size: cover;
+  background-position: center;
+
+  &.fzf-bg {
+    background-image: url("~@/assets/images/404/404-bg.png");
+  }
+
+  .fzf-left-content-wrapper {
+    .fzf-content-inner {
+      padding: 110px 0;
+
+      h1 {
+        font-size: 261px;
+        line-height: 1;
+        font-weight: 700;
+        color: #1c2c41;
+        margin-bottom: 60px;
+      }
+
+      h2 {
+        font-size: 36px;
+        font-weight: 700;
+        color: #1c2c41;
+        margin-bottom: 10px;
+        line-height: 46px;
+      }
+
+      p {
+        font-size: 16px;
+        color: #4a4a4a;
+        opacity: 0.8;
+        margin-bottom: 30px;
+      }
+    }
+  }
+}
+
+.animation-infinity {
+  position: relative;
+  animation: animation-jump 2s ease-in-out infinite;
+  -webkit-animation: animation-jump 2s ease-in-out infinite;
+}
+
+@-webkit-keyframes animation-jump {
+  0% {
+    top: 3px;
+  }
+
+  50% {
+    top: -3px;
+  }
+
+  100% {
+    top: 3px;
+  }
+}
+
+@keyframes animation-jump {
+  0% {
+    top: 3px;
+  }
+
+  50% {
+    top: -3px;
+  }
+
+  100% {
+    top: 3px;
+  }
+}
+
+/*=================================================================================================
+                                    Responsive code start
+=================================================================================================*/
+/**************************************************************** 
+                  Full HD Min Width 1407
+**************************************************************** */
+/* Full HD Min Width 1408px */
+@media (min-width: 1408px) {}
+
+/**************************************************************** 
+                  Widescreen Between 1216px and 1407px
+**************************************************************** */
+@media (min-width: 1216px) and (max-width: 1407px) {
+  .fzf-wrapper {
+    .fzf-left-content-wrapper {
+      .fzf-content-inner {
+        h1 {
+          font-size: 220px;
+        }
+      }
+    }
+  }
+}
+
+/**************************************************************** 
+                  Desktop Between 1024px and 1215px
+**************************************************************** */
+@media (min-width: 1024px) and (max-width: 1215px) {
+  .fzf-wrapper {
+    .fzf-left-content-wrapper {
+      .fzf-content-inner {
+        padding: 70px 0;
+
+        h1 {
+          font-size: 200px;
+        }
+      }
+    }
+  }
+}
+
+/**************************************************************** 
+                  Tablet Between 769px and 1023px
+**************************************************************** */
+@media (min-width: 769px) and (max-width: 1023px) {
+  .fzf-wrapper {
+    .fzf-left-content-wrapper {
+      .fzf-content-inner {
+        padding: 70px 0;
+
+        h1 {
+          font-size: 200px;
+        }
+      }
+    }
+  }
+}
+
+/**************************************************************** 
+                    Mobile Up to 768px. 
+**************************************************************** */
+@media only screen and (min-width: 100px) and (max-width: 768px) {
+  .fzf-wrapper {
+    .fzf-left-content-wrapper {
+      .fzf-content-inner {
+        padding: 60px 0;
+
+        h1 {
+          font-size: 150px;
+          margin-bottom: 10px;
+        }
+
+        h2 {
+          font-size: 30px;
+        }
+      }
+    }
+  }
+}
+
+/*=================================================================================================
+                                    Responsive code end
+=================================================================================================*/