@appscode/design-system 1.0.3-alpha.9 → 1.0.43-alpha.14

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 {
@@ -41,7 +41,7 @@
       }
     }
     .ac-system-left-sidebar.is-expanded {
-      z-index: 99;
+      z-index: 998;
     }
     &.expanded-sidebar {
       grid-gap: 0px;
@@ -96,7 +96,7 @@
     border-right: 1px solid $ac-white-light;
     box-shadow: none;
     &.is-expanded {
-      z-index: 9;
+      z-index: 998;
 
       .ac-product-logo {
         width: 270px !important;
@@ -207,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 {
@@ -679,7 +686,7 @@ $border_color_4: transparent transparent #585d6e transparent;
   height: 10px;
   width: 10px;
   border-radius: 50%;
-  background: $ac-grey-lightest;
+  background: $ac-gray-lightest;
   border: 2px solid $ac-white;
   display: inline-flex;
 

package/base/utilities/_derived-variables.scss

@@ -17,8 +17,8 @@ $ac-input-bg-color: #eceff4;
 $ac-bg-light-gray: #f4f6f9;
 $table-header: #e4e8ef;
 // Text colors
-$ac-color-text: #393e46;
-$ac-color-heading: #1c1c1c;
+$ac-color-text: var(--ac-text);
+$ac-color-heading: var(--ac-text-heading);
 
 // Link colors
 $ac-link: $ac-blue;

package/base/utilities/_initial-variables.scss

@@ -46,33 +46,46 @@ $ac-green: #27b064;
 $ac-blue: #0aafff;
 $ac-purple: #791e94;
 $ac-red: #ea3d2f;
-$ac-bg: #fff;
 
 // Color Border
 $ac-border: #a6abbd;
 $ac-border-hover: #54657e;
 
 // Colors Primary
-$ac-primary: #1971bd;
-$ac-primary-90: #2f7ec3;
-$ac-primary-80: #478dca;
-$ac-primary-70: #5d9bd0;
-$ac-primary-60: #75a9d7;
-$ac-primary-50: #8bb7de;
-$ac-primary-40: #a3c6e5;
-$ac-primary-30: #b9d4eb;
-$ac-primary-20: #d1e2f2;
-$ac-primary-10: #e7f0f8;
-
-// $ac-primary-90: scale-color($ac-primary, $lightness: 90%);
-// $ac-primary-80: scale-color($ac-primary, $lightness: 80%);
-// $ac-primary-70: scale-color($ac-primary, $lightness: 70%);
-// $ac-primary-60: scale-color($ac-primary, $lightness: 60%);
-// $ac-primary-50: scale-color($ac-primary, $lightness: 50%);
-// $ac-primary-40: scale-color($ac-primary, $lightness: 40%);
-// $ac-primary-30: scale-color($ac-primary, $lightness: 30%);
-// $ac-primary-20: scale-color($ac-primary, $lightness: 20%);
-// $ac-primary-10: scale-color($ac-primary, $lightness: 10%);
+// root colors
+:root {
+  --hsl-hue: 208;
+  --hsl-saturation: 77%;
+  --hsl-lightness: 42%;
+  --contrast-threshold: 60%;
+
+  --bg-color: #ffffff;
+
+  --font-hsl-hue: 0;
+  --font-hsl-saturation: 0%;
+  --font-hsl-lightness: 11%;
+
+  --ac-primary: hsla(
+    var(--hsl-hue),
+    var(--hsl-saturation),
+    var(--hsl-lightness),
+    1
+  );
+  --ac-text: hsla(
+    var(--font-hsl-hue),
+    calc(var(--font-hsl-saturation) + 10%),
+    calc(var(--font-hsl-lightness) + 10%),
+    1
+  );
+  --ac-text-heading: hsla(
+    var(--font-hsl-hue),
+    var(--font-hsl-saturation),
+    var(--font-hsl-lightness),
+    1
+  );
+}
+$ac-bg: var(--bg-color);
+$ac-primary: var(--ac-primary);
 
 // Colors black
 $ac-black: #000000;
@@ -82,7 +95,7 @@ $ac-gray-dark: #5f5f5f;
 $ac-gray: #767676;
 $ac-gray-light: #8d8d8d;
 $ac-gray-lighter: #a4a4a4;
-$ac-grey-lightest: #d1d1d1;
+$ac-gray-lightest: #d1d1d1;
 $ac-white-light: #e7e7e7;
 $ac-white-lighter: #f1f1f1;
 $ac-white: #ffffff;

package/base/utilities/_mixin.scss

@@ -5,21 +5,48 @@
   border: none;
 
   &:hover {
-    background-color: darken($colorName, 9);
+    @if (type_of($colorName) == "color") {
+      background-color: darken($colorName, 9);
+    } @else {
+      background-color: hsla(
+        var(--hsl-hue),
+        var(--hsl-saturation),
+        calc(var(--hsl-lightness) - 9%),
+        1
+      );
+    }
     // box-shadow: 0px 6px 12px scale-color($color: $colorName, $lightness: 70%);
   }
   &:focus-visible {
     outline: none;
   }
   &.is-light {
-    background-color: scale-color($colorName, $lightness: 90%);
+    @if (type_of($colorName) == "color") {
+      background-color: scale-color($colorName, $lightness: 90%);
+    } @else {
+      background-color: hsla(
+        var(--hsl-hue),
+        var(--hsl-saturation),
+        var(--hsl-lightness),
+        0.1
+      );
+    }
     color: $colorName;
     &.is-border {
       border: 1px solid $colorName;
     }
 
     &:hover {
-      background-color: scale-color($colorName, $lightness: 80%);
+      @if (type_of($colorName) == "color") {
+        background-color: scale-color($colorName, $lightness: 80%);
+      } @else {
+        background-color: hsla(
+          var(--hsl-hue),
+          var(--hsl-saturation),
+          var(--hsl-lightness),
+          0.2
+        );
+      }
     }
   }
 
@@ -35,13 +62,38 @@
   }
 
   &.is-square {
-    background-color: scale-color($color: $colorName, $lightness: 80%);
+    @if (type_of($colorName) == "color") {
+      background-color: scale-color($colorName, $lightness: 80%);
+    } @else {
+      background-color: hsla(
+        var(--hsl-hue),
+        var(--hsl-saturation),
+        var(--hsl-lightness),
+        0.2
+      );
+    }
     color: $colorName;
 
     &:hover {
       background-color: $colorName;
       color: $ac-white;
-      box-shadow: 0px 6px 12px scale-color($color: $colorName, $lightness: 70%);
+
+      @if (type_of($colorName) == "color") {
+        box-shadow: 0px
+          6px
+          12px
+          scale-color($color: $colorName, $lightness: 70%);
+      } @else {
+        box-shadow: 0px
+          6px
+          12px
+          hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.3
+          );
+      }
       img {
         filter: brightness(100) !important;
       }
@@ -53,7 +105,16 @@
     color: $colorName;
 
     &:hover {
-      background-color: scale-color($colorName, $lightness: 80%);
+      @if (type_of($colorName) == "color") {
+        background-color: scale-color($colorName, $lightness: 80%);
+      } @else {
+        background-color: hsla(
+          var(--hsl-hue),
+          var(--hsl-saturation),
+          var(--hsl-lightness),
+          0.2
+        );
+      }
     }
 
     &.is-outlined {
@@ -77,7 +138,15 @@
   &:hover {
     background-color: $colorName;
     color: $ac-white;
-    box-shadow: 0px 6px 12px scale-color($colorName, $lightness: 70%);
+
+    @if (type_of($colorName) == "color") {
+      box-shadow: 0px 6px 12px scale-color($color: $colorName, $lightness: 70%);
+    } @else {
+      box-shadow: 0px
+        6px
+        12px
+        hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.3);
+    }
   }
 
   &.is-large {
@@ -85,7 +154,16 @@
     z-index: 1;
     overflow: hidden;
     border: 1px solid $colorName;
-    background-color: scale-color($color: $colorName, $lightness: 80%);
+    @if (type_of($colorName) == "color") {
+      background-color: scale-color($colorName, $lightness: 80%);
+    } @else {
+      background-color: hsla(
+        var(--hsl-hue),
+        var(--hsl-saturation),
+        var(--hsl-lightness),
+        0.2
+      );
+    }
 
     span {
       color: $colorName;
@@ -123,7 +201,16 @@
 }
 
 @mixin ac-tags($colorName) {
-  background-color: scale-color($color: $colorName, $lightness: 85%);
+  @if (type_of($colorName) == "color") {
+    background-color: scale-color($colorName, $lightness: 85%);
+  } @else {
+    background-color: hsla(
+      var(--hsl-hue),
+      var(--hsl-saturation),
+      var(--hsl-lightness),
+      0.15
+    );
+  }
   border-color: $colorName;
   color: $colorName;
 }

package/components/_ac-alert-box.scss

@@ -26,7 +26,12 @@
       color: $ac-primary;
 
       &:hover {
-        color: darken($color: $ac-primary, $amount: 10%);
+        color: hsla(
+          var(--hsl-hue),
+          var(--hsl-saturation),
+          calc(var(--hsl-lightness) - 10%),
+          1
+        );
       }
     }
   }
@@ -64,10 +69,33 @@
     }
   }
 }
+@mixin acPrimaryNotification() {
+  background: hsla(
+    var(--hsl-hue),
+    var(--hsl-saturation),
+    var(--hsl-lightness),
+    0.2
+  );
+  color: $ac-white;
+  border-color: $ac-primary;
+
+  p {
+    color: $ac-primary;
+
+    a {
+      color: $ac-primary;
+
+      &:hover {
+        color: $ac-primary;
+        opacity: 0.8;
+      }
+    }
+  }
+}
 
 // is-primary
 .ac-notification.is-primary {
-  @include acNotification($ac-primary);
+  @include acPrimaryNotification();
 }
 
 // is.info

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;
@@ -164,6 +166,9 @@
     label {
       top: 8px;
       font-size: $font-size-small;
+      &.switch-label {
+        top: 0;
+      }
 
       &.show-label {
         font-size: 12px;
@@ -182,6 +187,7 @@
       }
     }
   }
+
   &.is-extra-small {
     input {
       height: 32px;
@@ -209,6 +215,9 @@
     label {
       top: 8px;
       font-size: $font-size-small;
+      &.switch-label {
+        top: 0;
+      }
 
       &.show-label {
         font-size: 12px;
@@ -226,6 +235,7 @@
       }
     }
   }
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -346,7 +356,12 @@
           transition: 0.3s;
 
           &:hover {
-            background: scale-color($color: $ac-primary, $lightness: 80%);
+            background: hsla(
+              var(--hsl-hue),
+              var(--hsl-saturation),
+              var(--hsl-lightness),
+              0.2
+            );
             color: $ac-primary;
           }
         }
@@ -521,6 +536,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 +588,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 +618,7 @@
 .is-checkradio[type="checkbox"] + label:before {
   top: 3px;
 }
+
 // AC-Switch
 .ac-single-switch {
   label {
@@ -598,6 +635,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 +731,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-multi-select.scss

@@ -2,7 +2,7 @@
   // margin-top: 3px;
   &.cluster-select {
     .multiselect__tags {
-      border: 1px solid $ac-grey-lightest;
+      border: 1px solid $ac-gray-lightest;
       background-color: $table-header;
 
       .multiselect__input {
@@ -47,7 +47,12 @@
         }
 
         &:hover {
-          background-color: darken($color: $ac-primary, $amount: 9);
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            calc(var(--hsl-lightness) - 9%),
+            1
+          );
         }
       }
     }
@@ -91,16 +96,31 @@
         }
 
         &:hover {
-          background-color: scale-color($color: $ac-primary, $lightness: 80%);
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.2
+          );
           color: $ac-primary;
         }
 
         &.multiselect__option--highlight {
-          background-color: scale-color($color: $ac-primary, $lightness: 80%);
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.2
+          );
           color: $ac-primary;
 
           &:after {
-            background-color: scale-color($color: $ac-primary, $lightness: 80%);
+            background-color: hsla(
+              var(--hsl-hue),
+              var(--hsl-saturation),
+              var(--hsl-lightness),
+              0.2
+            );
             color: $ac-primary;
           }
         }

package/components/_ac-table.scss

@@ -49,13 +49,16 @@
       td {
         border: none;
         font-size: $font-size-small;
-        color: $ac-gray-dark;
+        color: hsl(
+          var(--font-hsl-hue),
+          var(--font-hsl-saturation),
+          calc(var(--font-hsl-lightness) + 25%)
+        );
         font-weight: 400;
         padding: 3px 0px;
         min-width: 230px;
 
         &:first-child {
-          color: $ac-black;
           font-weight: 400;
           padding-right: 10px;
           color: $ac-color-heading;
@@ -86,6 +89,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;
+            top: 0.4em;
+            font-size: 13px;
+            font-weight: 1000;
+            display: block;
+          }
+          &:before {
+            right: 1em;
+            content: "\2191";
+          }
+          &:after {
+            right: 0.5em;
+            content: "\2193";
+          }
+        }
       }
     }
   }
@@ -224,26 +261,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 +283,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/_ac-tags.scss

@@ -3,7 +3,7 @@
   align-items: center;
 
   li {
-    background: $ac-grey-lightest;
+    background: $ac-gray-lightest;
     list-style: none;
     padding: 2px 10px;
     border-radius: 4px;