@appscode/design-system 1.1.0-beta.7 → 1.1.0-beta.70

package/components/_multi-select.scss

@@ -0,0 +1,589 @@
+.multiselect {
+  // margin-top: 3px;
+  // display: flex;
+  // align-items: center;
+  // max-width: 350px;
+  // &.cluster-select {
+  //   .multiselect__tags {
+  //     border: 1px solid $primary-90;
+  //     background-color: $table-header;
+
+  //     .multiselect__input {
+  //       background-color: $table-header;
+  //     }
+  //   }
+  // }
+
+  .multiselect__tags {
+    background-color: $white-100;
+    min-height: 36px;
+    // max-height: 36px;
+    font-weight: 500;
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid $primary-80;
+    padding: 6px 30px 8px 20px;
+    font-size: 13px;
+    border-radius: 4px;
+
+    .multiselect__placeholder {
+      margin: 0;
+      padding: 0;
+      // padding-top: 2px !important;
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .multiselect__tags-wrap {
+      display: flex;
+      align-items: center;
+    }
+
+    .multiselect__tag {
+      background-color: $black-80;
+      margin-top: 4px;
+      margin-bottom: 0;
+
+      .multiselect__tag-icon {
+        font-size: 12px;
+
+        &::after {
+          color: $white-100;
+        }
+
+        &:hover {
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            calc(var(--hsl-lightness) - 9%),
+            1
+          );
+        }
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      background-color: $white-100;
+      margin-bottom: 0;
+      margin: 0 !important;
+      padding-left: 0;
+      left: 0px;
+      // top: 2px;
+      font-size: 13px !important;
+      font-weight: 500;
+      color: $primary-10;
+      line-height: 1.5;
+    }
+
+    .multiselect__single {
+      margin-top: 3px;
+      margin-bottom: 0;
+    }
+  }
+  .multiselect__select {
+    height: 36px;
+  }
+  .multiselect__content {
+    .multiselect__element {
+      .multiselect__option {
+        padding: 4px 16px;
+        min-height: 32px;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        img {
+          width: 30px;
+        }
+        p {
+          font-size: 13px;
+          color: $primary-10;
+        }
+        p:not(.location) {
+          font-weight: 500;
+        }
+        a {
+          display: block;
+          font-weight: 400;
+          margin-top: -12px;
+          margin-bottom: -12px;
+          padding-top: 12px;
+          padding-bottom: 12px;
+        }
+
+        &:hover {
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.2
+          );
+          color: $primary;
+        }
+
+        &.multiselect__option--highlight {
+          background-color: $white-100;
+          color: $primary;
+          &:hover {
+            background-color: $primary-97;
+          }
+
+          &:after {
+            background-color: hsla(
+              var(--hsl-hue),
+              var(--hsl-saturation),
+              var(--hsl-lightness),
+              0.2
+            );
+            color: $primary;
+          }
+        }
+      }
+    }
+  }
+}
+
+.multi-select-wrapper {
+  &.is-last-child-bold {
+    .multiselect {
+      .multiselect__content {
+        .multiselect__element {
+          &:nth-last-child(-n + 3) {
+            .multiselect__option {
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.multiselect__element {
+  span {
+    label {
+      padding-left: 15px !important;
+      font-size: 13px !important;
+      color: $primary-10 !important;
+
+      &:after {
+        position: inherit !important;
+        content: "" !important;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.multiselect__input {
+  &::placeholder {
+    color: $primary-20;
+    font-weight: 400;
+    line-height: 1.6;
+    font-size: 13px;
+  }
+}
+
+.multiselect__tags > span {
+  font-size: 13px;
+  line-height: 1.6;
+  color: $primary-10;
+}
+
+.multi-select-wrapper {
+  position: relative;
+  z-index: 0;
+
+  .multiselect--disabled {
+    opacity: unset;
+  }
+
+  &.is-disable {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    input,
+    .button.is-information,
+    .eye i.fa {
+      cursor: not-allowed;
+    }
+  }
+
+  .multiselect__input {
+    border: none !important;
+  }
+
+  &.has-bg-color {
+    label.show-label {
+      &:after {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.is-small {
+    label {
+      font-size: 13px;
+      top: 8px;
+
+      &.show-label {
+        font-size: 12px;
+        top: -9px;
+        font-weight: 500;
+        color: $black-5;
+      }
+    }
+
+    .button.is-information {
+      width: 36px;
+      height: 36px;
+    }
+
+    .multiselect__select {
+      height: 100%;
+    }
+
+    .multiselect__tags {
+      .multiselect__tag {
+        padding: 5px 20px 4px 10px;
+        font-size: 12px;
+      }
+    }
+
+    .multiselect {
+      min-height: auto;
+    }
+
+    .multiselect--active {
+      height: 36px !important;
+      z-index: 50;
+    }
+
+    .multiselect .multiselect__tags {
+      min-height: 36px !important;
+      padding: 4px 30px 4px 20px;
+      font-size: 13px;
+
+      .multiselect__single {
+        font-size: 12px;
+      }
+
+      .multiselect__placeholder {
+        padding: 5px 0 0;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      font-size: 13px !important;
+      font-weight: 500;
+      line-height: 1.5;
+      // padding-bottom: 4px;
+      display: flex;
+      align-items: center;
+
+      &::placeholder {
+        font-weight: 500;
+        line-height: 1.6;
+        font-size: 13px;
+      }
+    }
+  }
+
+  &.is-extra-small {
+    label {
+      font-size: 13px;
+      top: 8px;
+
+      &.show-label {
+        font-size: 12px;
+        top: -9px;
+      }
+    }
+
+    .button.is-information {
+      width: 32px;
+      height: 32px;
+    }
+
+    .multiselect__select {
+      height: 100%;
+    }
+
+    .multiselect__tags {
+      .multiselect__tag {
+        padding: 5px 20px 4px 10px;
+        font-size: 12px;
+      }
+    }
+
+    .multiselect {
+      min-height: auto;
+    }
+
+    .multiselect--active {
+      height: 32px !important;
+      z-index: 50;
+    }
+
+    .multiselect .multiselect__tags {
+      min-height: 32px !important;
+      padding: 3px 30px 4px 20px;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      .multiselect__single {
+        font-size: 12px;
+      }
+
+      .multiselect__placeholder {
+        padding: 5px 0 0;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      font-size: 13px !important;
+      font-weight: 500;
+      line-height: 1.5;
+      // padding-bottom: 4px;
+      display: flex;
+      align-items: center;
+
+      &::placeholder {
+        font-weight: 500;
+        line-height: 1.6;
+        font-size: 13px;
+      }
+    }
+  }
+
+  &.is-danger {
+    input,
+    .ac-card,
+    textarea {
+      border: 1px solid $danger;
+    }
+
+    p {
+      color: $danger;
+    }
+  }
+
+  &.is-loading {
+    input,
+    .ac-card,
+    textarea {
+      border: 1px solid $info;
+      opacity: 0.5;
+    }
+
+    p {
+      color: $info;
+      opacity: 0.5;
+    }
+  }
+
+  .is-danger {
+    font-size: 12px;
+    line-height: 22px;
+    color: $danger;
+    text-align: left;
+
+    i.fa {
+      padding-right: 10px;
+    }
+  }
+
+  .multiselect__select {
+    height: calc(100% - 2px);
+    border-radius: 0 4px 4px 0;
+    background-color: transparent !important;
+  }
+
+  label {
+    font-size: 16px;
+    left: 20px;
+    top: 11px;
+    cursor: text;
+    color: $primary-10;
+    position: absolute;
+    z-index: 99;
+    transition: 0.3s ease-in-out;
+
+    .is-required {
+      img {
+        position: absolute;
+        top: 7px;
+        padding-left: 3px;
+      }
+    }
+
+    &.show-label {
+      top: -10px;
+      left: 15px;
+      padding: 0 5px;
+      font-size: 13px;
+      color: $black-5;
+
+      &::after {
+        background-color: $white-100;
+      }
+    }
+
+    &:after {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 50%;
+      background-color: $white-100;
+      width: 100%;
+      height: 2px;
+      margin-top: -1px;
+      z-index: -1;
+    }
+
+    &.is-required {
+      &:after {
+        width: calc(100% + 10px);
+      }
+    }
+  }
+}
+li {
+  .multiselect__option {
+    font-size: 13px;
+    color: $primary-10;
+  }
+}
+.multiselect__option--selected {
+  label {
+    right: 30px;
+  }
+}
+.multi-select-wrapper.is-small {
+  .multiselect .multiselect__tags {
+    .multiselect__input,
+    .multiselect__single {
+      top: 3.5px !important;
+    }
+  }
+  .multiselect .multiselect__tags .multiselect__placeholder {
+    padding-top: 3.5px !important;
+  }
+}
+// has info button start
+.multi-select-wrapper {
+  &.has-info-button {
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+    &.has-refresh-button {
+      .multiselect__select {
+        z-index: 99;
+        right: 60px;
+      }
+      .button {
+        &.is-refresh {
+          right: 30px;
+        }
+      }
+    }
+    .button {
+      &.is-information {
+        right: 0;
+      }
+    }
+  }
+  &.has-refresh-button {
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+    .button {
+      &.is-refresh {
+        right: 0;
+      }
+    }
+  }
+
+  .button {
+    &.is-information,
+    &.is-refresh {
+      background-color: transparent;
+      border: none;
+      position: absolute;
+      height: 36px;
+      width: 36px;
+      z-index: 90;
+      margin-top: 0;
+
+      &:focus {
+        outline: none;
+        box-shadow: none;
+        background-color: #e4e8ef;
+        transform: scale(0.8);
+      }
+    }
+    &.is-refresh.spin {
+      i {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+}
+
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+// has info button end
+
+// dark theme end
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}

package/components/_navbar.scss

@@ -88,7 +88,7 @@
 //         padding-left: 15px;
 
 //         &::placeholder {
-//           color: $white-100-lighter;
+//           color: $primary-90;
 //           font-weight: 500;
 //         }
 
@@ -138,7 +138,7 @@
 //               top: 0;
 //               width: 100%;
 //               height: 100%;
-//               background-color: $ac-black;
+//               background-color: $black-5;
 //               opacity: 0.2;
 //               z-index: 1;
 //             }
@@ -238,7 +238,7 @@
 //         .ac-nav-button {
 //           background-color: transparent;
 //           border: none;
-//           color: $white-100-lighter;
+//           color: $primary-90;
 //           padding: 0 14px;
 //           margin-left: 15px;
 
@@ -429,7 +429,7 @@
 //                     border: none;
 //                     padding: 0;
 //                     font-size: 11px;
-//                     color: #eb5757;
+//                     color: $danger;
 //                     background-color: transparent;
 //                   }
 //                 }
@@ -449,13 +449,13 @@
 
 //           /* Handle */
 //           &::-webkit-scrollbar-thumb {
-//             background-color: $ac-gray-light;
+//             background-color: $black-50;
 //             border-radius: 10px;
 //           }
 
 //           /* Handle on hover */
 //           &::-webkit-scrollbar-thumb:hover {
-//             background-color: $ac-gray-light;
+//             background-color: $black-50;
 //           }
 
 //           // &:last-child {
@@ -553,7 +553,7 @@
 
 //                   p {
 //                     font-size: 11px;
-//                     color: $ac-label-text;
+//                     color: $primary-10;
 
 //                     &.is-success {
 //                       color: $success;

package/components/_nested-list.scss

@@ -12,7 +12,7 @@
         cursor: pointer;
 
         .fa {
-          color: $ac-link-black;
+          color: $primary-20;
           font-size: 12px;
         }
       }
@@ -22,4 +22,4 @@
       padding-left: 30px;
     }
   }
-}
+}

package/components/_overview-info.scss

@@ -58,13 +58,13 @@
 
           p {
             font-size: 16px;
-            color: $ac-link-black;
+            color: $primary-20;
             font-weight: 500;
 
             span {
               font-weight: 400;
               font-size: 12px;
-              color: $ac-link-black;
+              color: $primary-20;
 
               strong {
                 font-size: 16px;
@@ -78,4 +78,4 @@
       }
     }
   }
-}
+}

package/components/_pricing-table.scss

@@ -1,6 +1,6 @@
 .pricing-table {
   border: 1px solid $primary-90;
-  background-color: $white-100-lighter;
+  background-color: $primary-90;
   border-radius: 4px;
 
   .pricing-title {
@@ -24,7 +24,7 @@
       line-height: 1;
       padding: 15px;
       font-weight: 400;
-      color: $ac-link-black;
+      color: $primary-20;
     }
   }
 
@@ -107,7 +107,7 @@
 
         .pricing {
           font-size: 16px;
-          color: $ac-link-black;
+          color: $primary-20;
           font-weight: 500;
           line-height: 24px;
 
@@ -141,7 +141,7 @@
       ul {
         li {
           text-align: center;
-          color: $ac-link-black;
+          color: $primary-20;
           display: block;
           border-top: 1px solid $primary-90;
           padding: 10px;
@@ -157,4 +157,4 @@
       }
     }
   }
-}
+}