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

package/components/_ac-multi-select.scss

@@ -1,780 +0,0 @@
-// .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: #e2f0fb;
-//     min-height: 36px;
-//     // max-height: 36px;
-//     font-weight: 500;
-//     width: 100%;
-//     border-radius: 4px;
-//     border: 1px solid $primary-90;
-//     padding: 6px 30px 8px 20px;
-//     font-size: 13px;
-//     border-radius: 20px;
-
-//     .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: #e2f0fb;
-//       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: hsla(var(--hsl-hue),
-//               var(--hsl-saturation),
-//               var(--hsl-lightness),
-//               0.2);
-//           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) {}