phoenix-components-library/react/components/MultiSelect/MultiSelect.css

Component library for Phoenix Frontend Projects.

@charset "UTF-8";
.ant-select {
  position: relative;
  width: 100%; }

.ant-select .ant-select-selection {
  position: relative;
  padding: 0 30px 0 14px;
  color: #525b5d;
  border: solid 1px #bec2c2;
  border-radius: 2px;
  height: 32px;
  width: 100%;
  line-height: 33px;
  background-color: rgba(0, 0, 0, 0);
  z-index: 3;
  margin-bottom: 18px; }

.es-icon-copy:before,
.es-icon-copy, .es-icon-success:before,
.es-icon-success, .es-icon-notification:before,
.es-icon-notification, .es-icon-alarm:before,
.es-icon-alarm, .es-icon-archive:before,
.es-icon-archive, .es-icon-circle-arrow-down:before,
.es-icon-circle-arrow-down, .es-icon-circle-arrow-up:before,
.es-icon-circle-arrow-up, .es-icon-close-circle:before,
.es-icon-close-circle, .es-icon-add-folder:before,
.es-icon-add-folder, .es-icon-clock:before,
.es-icon-clock, .es-icon-down-arrow:before,
.es-icon-down-arrow, .es-icon-download:before,
.es-icon-download, .es-icon-enter:before,
.es-icon-enter, .es-icon-left-arrow:before,
.es-icon-left-arrow, .es-icon-right-arrow:before,
.es-icon-right-arrow, .es-icon-up-arrow:before,
.es-icon-up-arrow, .es-icon-upload:before,
.es-icon-upload, .es-icon-users:before,
.es-icon-users, .es-icon-cog:before,
.es-icon-cog, .es-icon-switch:before,
.es-icon-switch, .es-icon-ad:before,
.es-icon-ad, .es-icon-add-circle:before,
.es-icon-add-circle, .es-icon-arrow-down:before,
.es-icon-arrow-down, .es-icon-arrow-up-down:before, .ant-select:before,
.es-icon-arrow-up-down, .es-icon-arrow-up:before,
.es-icon-arrow-up, .es-icon-campaign:before,
.es-icon-campaign, .es-icon-cards-view:before,
.es-icon-cards-view, .es-icon-delete:before,
.es-icon-delete, .es-icon-duplicate:before,
.es-icon-duplicate, .es-icon-eye:before,
.es-icon-eye, .es-icon-facebook:before,
.es-icon-facebook, .es-icon-instagram:before,
.es-icon-instagram, .es-icon-link:before,
.es-icon-link, .es-icon-list-view:before,
.es-icon-list-view, .es-icon-logo:before,
.es-icon-logo, .es-icon-pencil:before,
.es-icon-pencil, .es-icon-remove-circle:before,
.es-icon-remove-circle, .es-icon-search:before,
.es-icon-search, .es-icon-snapchat:before,
.es-icon-snapchat, .es-icon-square-minus:before,
.es-icon-square-minus, .es-icon-square-plus:before,
.es-icon-square-plus, .es-icon-star:before,
.es-icon-star, .es-icon-tumblr:before,
.es-icon-tumblr, .es-icon-twitter:before,
.es-icon-twitter, .es-icon-close:before,
.es-icon-close {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "eli" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.es-icon {
  font-size: 15px; }

.es-icon-copy:before,
.es-icon-copy {
  content: ""; }

.es-icon-success:before,
.es-icon-success {
  content: ""; }

.es-icon-notification:before,
.es-icon-notification {
  content: ""; }

.es-icon-alarm:before,
.es-icon-alarm {
  content: ""; }

.es-icon-archive:before,
.es-icon-archive {
  content: ""; }

.es-icon-circle-arrow-down:before,
.es-icon-circle-arrow-down {
  content: ""; }

.es-icon-circle-arrow-up:before,
.es-icon-circle-arrow-up {
  content: ""; }

.es-icon-close-circle:before,
.es-icon-close-circle {
  content: ""; }

.es-icon-add-folder:before,
.es-icon-add-folder {
  content: ""; }

.es-icon-clock:before,
.es-icon-clock {
  content: ""; }

.es-icon-down-arrow:before,
.es-icon-down-arrow {
  content: ""; }

.es-icon-download:before,
.es-icon-download {
  content: ""; }

.es-icon-enter:before,
.es-icon-enter {
  content: ""; }

.es-icon-left-arrow:before,
.es-icon-left-arrow {
  content: ""; }

.es-icon-right-arrow:before,
.es-icon-right-arrow {
  content: ""; }

.es-icon-up-arrow:before,
.es-icon-up-arrow {
  content: ""; }

.es-icon-upload:before,
.es-icon-upload {
  content: ""; }

.es-icon-users:before,
.es-icon-users {
  content: ""; }

.es-icon-cog:before,
.es-icon-cog {
  content: ""; }

.es-icon-switch:before,
.es-icon-switch {
  content: ""; }

.es-icon-ad:before,
.es-icon-ad {
  content: ""; }

.es-icon-add-circle:before,
.es-icon-add-circle {
  content: ""; }

.es-icon-arrow-down:before,
.es-icon-arrow-down {
  content: ""; }

.es-icon-arrow-up-down:before, .ant-select:before,
.es-icon-arrow-up-down,
.ant-select:before {
  content: ""; }

.es-icon-arrow-up:before,
.es-icon-arrow-up {
  content: ""; }

.es-icon-campaign:before,
.es-icon-campaign {
  content: ""; }

.es-icon-cards-view:before,
.es-icon-cards-view {
  content: ""; }

.es-icon-delete:before,
.es-icon-delete {
  content: ""; }

.es-icon-duplicate:before,
.es-icon-duplicate {
  content: ""; }

.es-icon-eye:before,
.es-icon-eye {
  content: ""; }

.es-icon-facebook:before,
.es-icon-facebook {
  content: ""; }

.es-icon-instagram:before,
.es-icon-instagram {
  content: ""; }

.es-icon-link:before,
.es-icon-link {
  content: ""; }

.es-icon-list-view:before,
.es-icon-list-view {
  content: ""; }

.es-icon-logo:before,
.es-icon-logo {
  content: ""; }

.es-icon-pencil:before,
.es-icon-pencil {
  content: ""; }

.es-icon-remove-circle:before,
.es-icon-remove-circle {
  content: ""; }

.es-icon-search:before,
.es-icon-search {
  content: ""; }

.es-icon-snapchat:before,
.es-icon-snapchat {
  content: ""; }

.es-icon-square-minus:before,
.es-icon-square-minus {
  content: ""; }

.es-icon-square-plus:before,
.es-icon-square-plus {
  content: ""; }

.es-icon-star:before,
.es-icon-star {
  content: ""; }

.es-icon-tumblr:before,
.es-icon-tumblr {
  content: ""; }

.es-icon-twitter:before,
.es-icon-twitter {
  content: ""; }

.es-icon-close:before,
.es-icon-close {
  content: ""; }

.ant-select {
  margin-bottom: 18px; }
  .ant-select .ant-select-selection {
    padding: 0px 14px;
    height: auto;
    min-height: 32px;
    margin-bottom: 0;
    font-size: 13px; }
    .ant-select .ant-select-selection:hover {
      border-color: #bec2c2; }
    .ant-select .ant-select-selection__choice__content span {
      display: none; }
    .ant-select .ant-select-selection__choice__remove {
      top: 1px; }
  .ant-select.ant-select-open .ant-select-selection {
    border-color: #bec2c2;
    box-shadow: none; }
  .ant-select:before {
    font-size: 10px;
    color: #6db749;
    position: absolute;
    right: 10px;
    top: 12px; }

div.ant-select-selection--multiple .ant-select-selection__rendered {
  margin: 0;
  width: 100%; }
  div.ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
    margin-top: 3px;
    margin-bottom: 3px; }

div.ant-select-selection--multiple .ant-select-selection__placeholder {
  margin-left: 0; }

.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item span {
  font-size: 11px;
  color: #6db749; }

.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-active, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected:hover {
  background-color: #6db749;
  color: #fff;
  font-weight: normal; }
  .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover:after, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-active:after, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected:after, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected:hover:after {
    color: #fff; }
  .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover span, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-active span, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected span, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected:hover span {
    color: #fff; }