@appscode/design-system 1.1.0-beta.6 → 1.1.0-beta.61

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -118,764 +118,4 @@ watch(
     </template>
   </multiselect>
 </template>
-<style lang="scss">
-.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: $dark-bg-light;
-      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;
-        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;
-
-          &: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: $ac-bg;
-      }
-    }
-  }
-
-  &.is-small {
-    label {
-      font-size: 13px;
-      top: 8px;
-
-      &.show-label {
-        font-size: 12px;
-        top: -9px;
-        font-weight: 500;
-        color: $ac-black;
-      }
-    }
-
-    .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;
-
-      &::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;
-
-      &::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: $ac-label-text;
-    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: $ac-black;
-
-      &::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 start
-.is-dark-theme {
-  .multiselect__content-wrapper {
-    background: var(--dark-bg-light);
-    border: 1px solid $primary-90;
-
-    // scroll
-    &::-webkit-scrollbar {
-      border-radius: 50px;
-      width: 3px;
-    }
-
-    &::-moz-scrollbar {
-      border-radius: 50px;
-      width: 3px;
-    }
-
-    &::-ms-scrollbar {
-      border-radius: 50px;
-      width: 3px;
-    }
-
-    &::-webkit-scrollbar:hover {
-      width: 7px;
-    }
-
-    &::-moz-scrollbar:hover {
-      width: 7px;
-    }
-
-    &::-ms-scrollbar:hover {
-      width: 7px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: $dark-bg-light;
-      border-radius: 50px;
-      height: 2px !important;
-    }
-
-    &::-moz-scrollbar-thumb {
-      background-color: $dark-bg-light;
-      border-radius: 50px;
-      height: 2px !important;
-    }
-
-    &::-ms-scrollbar-thumb {
-      background-color: $dark-bg-light;
-      border-radius: 50px;
-      height: 2px !important;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: $dark-bg-light;
-    }
-
-    &::-moz-scrollbar-thumb:hover {
-      background-color: $dark-bg-light;
-    }
-
-    &::-ms-scrollbar-thumb:hover {
-      background-color: $dark-bg-light;
-    }
-
-    &:hover::-webkit-scrollbar-corner {
-      height: 40px;
-    }
-
-    &:hover::-moz-scrollbar-corner {
-      height: 40px;
-    }
-
-    &:hover::-ms-scrollbar-corner {
-      height: 40px;
-    }
-
-    // scroll
-
-    .multiselect__option--selected {
-      background: var(--dark-bg);
-      color: var(--ac-white-text);
-    }
-  }
-
-  .multi-select-wrapper {
-    background: var(--dark-bg-light);
-
-    .multiselect__content-wrapper {
-      background-color: var(--dark-bg-light);
-      background: var(--dark-bg-light);
-
-      // scroll
-      &::-webkit-scrollbar {
-        border-radius: 50px;
-        width: 3px;
-      }
-
-      &::-moz-scrollbar {
-        border-radius: 50px;
-        width: 3px;
-      }
-
-      &::-ms-scrollbar {
-        border-radius: 50px;
-        width: 3px;
-      }
-
-      &::-webkit-scrollbar:hover {
-        width: 7px;
-      }
-
-      &::-moz-scrollbar:hover {
-        width: 7px;
-      }
-
-      &::-ms-scrollbar:hover {
-        width: 7px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: $dark-bg-light;
-        border-radius: 50px;
-        height: 2px !important;
-      }
-
-      &::-moz-scrollbar-thumb {
-        background-color: $dark-bg-light;
-        border-radius: 50px;
-        height: 2px !important;
-      }
-
-      &::-ms-scrollbar-thumb {
-        background-color: $dark-bg-light;
-        border-radius: 50px;
-        height: 2px !important;
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-        background-color: $dark-bg-light;
-      }
-
-      &::-moz-scrollbar-thumb:hover {
-        background-color: $dark-bg-light;
-      }
-
-      &::-ms-scrollbar-thumb:hover {
-        background-color: $dark-bg-light;
-      }
-
-      &:hover::-webkit-scrollbar-corner {
-        height: 40px;
-      }
-
-      &:hover::-moz-scrollbar-corner {
-        height: 40px;
-      }
-
-      &:hover::-ms-scrollbar-corner {
-        height: 40px;
-      }
-
-      // scroll
-
-      .multiselect__content .multiselect__element .multiselect__option {
-        color: var(--ac-white-text);
-      }
-
-      .multiselect__option--group {
-        color: var(--ac-white-text);
-        background-color: var(--dark-bg-light);
-      }
-
-      .multiselect__option--selected {
-        color: var(--ac-white-text);
-        background-color: var(--dark-bg-light);
-      }
-    }
-  }
-}
-// 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) {
-}
-</style>
+<style lang="scss"></style>