Material theme for Select2 (standalone) v0.1.0

select2-standalone-material.css

/* Select2 jQuery plugin standalone material design theme by djibe
 * 
 */
.select2-container {
  display: block;
  margin: 0;
  min-width: 200px;
  position: relative; }
  .select2-container *:focus {
    outline: 0; }
  .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    user-select: none; }
    .select2-container .select2-selection--single .select2-selection__placeholder {
      color: rgba(0, 0, 0, 0.54); }
    .select2-container .select2-selection--single .select2-selection__arrow {
      background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='5' viewBox='7 10 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' opacity='.54' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat 50%;
      width: 24px;
      height: 24px;
      margin-left: auto;
      order: 12;
      transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none; }
  .select2-container.select2-container--open .select2-selection__arrow {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='5' viewBox='7 10 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236200ee' fill-rule='evenodd' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat 50%;
    transform: rotate(180deg) translateY(-5px); }
  .select2-container .select2-search--dropdown .select2-search__field {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    border-radius: 4px 4px 0 0;
    background-color: #f5f5f5; }
  .select2-container .select2-results__message {
    color: rgba(0, 0, 0, 0.54); }
  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px; }
  .select2-container.select2-container--open .select2-selection--multiple::after {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='5' viewBox='7 10 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='%236200ee' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat 50%;
    transform: rotate(180deg) translateY(-5px); }
  .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    display: block;
    flex-wrap: wrap;
    user-select: none; }
    .select2-container .select2-selection--multiple::after {
      content: '';
      background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='5' viewBox='7 10 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' opacity='.54' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat 50%;
      width: 24px;
      height: 24px;
      margin-left: auto;
      transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
    .select2-container .select2-selection--multiple .select2-selection__rendered {
      list-style: none;
      margin: 0;
      overflow: hidden;
      padding: 0; }
      .select2-container .select2-selection--multiple .select2-selection__rendered:not(:empty) {
        margin: -2px 0; }
      .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
        padding: 0;
        cursor: pointer;
        float: left;
        margin-top: 0.3em;
        margin-right: 5px;
        align-items: center;
        background-color: #e0e0e0;
        border: 0;
        border-radius: 1rem;
        color: rgba(0, 0, 0, 0.87);
        display: inline-flex;
        font-size: .875rem;
        height: 1.75rem;
        justify-content: center;
        letter-spacing: .017857em;
        line-height: 1.25rem;
        margin: 2px;
        padding: 0 .75rem;
        position: relative;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap; }
        .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice:last-of-type {
          animation: opacity .3s linear; }
    .select2-container .select2-selection--multiple .select2-selection__choice__remove {
      background-image: url('data:image/svg+xml;charset=utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"%3e%3cpath fill="%23666" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/%3e%3cpath d="M0 0h24v24H0z" fill="none"/%3e%3c/svg%3e');
      border: 0;
      background-color: transparent;
      height: 18px;
      margin-right: -.25rem;
      margin-left: .5rem;
      order: 12;
      width: 18px; }
      .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: black; }
      .select2-container .select2-selection--multiple .select2-selection__choice__remove span {
        display: none; }
  .select2-container .select2-search--inline .select2-search__field {
    background-color: transparent;
    border: none;
    padding: 0; }
    .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
      display: none; }
  .select2-container .select2-selection {
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-clip: padding-box;
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    color: rgba(0, 0, 0, 0.87);
    align-items: center;
    display: flex;
    font-size: 1rem;
    letter-spacing: 0.009375em;
    line-height: 1.5;
    padding: 0.375rem 0 calc(0.375rem - 1px);
    transition: border-color 15ms linear, box-shadow 15ms linear;
    width: 100%;
    will-change: border-color, box-shadow; }
    .select2-container .select2-selection::before {
      background: #6200ee;
      content: "";
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: scaleX(0);
      transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
      width: 100%; }
    .select2-container .select2-selection:hover {
      border-color: rgba(0, 0, 0, 0.87); }
  .select2-container.select2-container--open .select2-selection::before {
    transform: scaleX(1); }
  select.is-invalid ~ .select2-container .select2-selection,
  form.was-validated select:invalid ~ .select2-container .select2-selection {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23b00020' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    border-color: #b00020; }
  .select2-container .select2-selection__clear {
    width: 0.9em;
    height: 0.9em;
    line-height: 0.75em;
    padding-left: 0.15em;
    margin-top: 0.7em;
    border-radius: 100%;
    background-color: #c8c8c8;
    color: orange;
    float: right;
    margin-right: 0.3em; }
    .select2-container .select2-selection__clear:hover {
      background-color: #afafaf; }
  .select2-container.select2-container--disabled .select2-selection {
    cursor: default;
    border-bottom-style: dotted;
    color: rgba(0, 0, 0, 0.38); }
    .select2-container.select2-container--disabled .select2-selection:hover {
      border-color: rgba(0, 0, 0, 0.42); }
  .select2-container.select2-container--disabled .select2-selection__clear {
    display: none; }

.select2-dropdown {
  animation: opacity 0.03s linear, select-menu-scale 0.12s cubic-bezier(0, 0, 0.2, 1);
  background-color: white;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  transform-origin: center top;
  width: 100%;
  z-index: 120; }

.select2-container--open .select2-dropdown {
  top: 1px;
  left: 0; }
  .select2-container--open .select2-dropdown.select2-dropdown--above {
    border-radius: 4px 4px 0 0;
    top: -1px; }

@keyframes select-menu-scale {
  0% {
    transform: scale(0.87); }
  100% {
    transform: scale(1); } }

@keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.select2-results {
  display: block; }

.select2-results__options {
  font-size: 1rem;
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0 0 8px 0;
  max-height: 50vh;
  scrollbar-color: #e0dfe1 transparent;
  scrollbar-width: thin; }
  .select2-results__options.select2-results__options--nested {
    padding: 0;
    margin: 0; }
    .select2-results__options.select2-results__options--nested > .select2-results__option {
      padding-left: 1.5rem; }

.select2-results__option,
.select2-results__group {
  padding: 0 1rem;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem; }

.select2-results__option {
  user-select: none;
  letter-spacing: .009375em;
  transition: background-color, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(0, 0, 0, 0.04); }
    .select2-results__option--highlighted.select2-results__option--selectable:active {
      background-color: rgba(0, 0, 0, 0.24); }
  .select2-results__option--selected {
    background-color: rgba(0, 0, 0, 0.12); }
  .select2-results__option--selected.select2-results__option--highlighted {
    background-color: rgba(0, 0, 0, 0.16); }
  .select2-results__option.select2-results__option--disabled {
    color: rgba(0, 0, 0, 0.38); }

.select2-results__option--group {
  padding: 0;
  display: block; }

.select2-results__group {
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.875rem; }

.select2-results > .select2-results__options {
  overflow-y: auto; }

.select2-results__option--selectable {
  cursor: pointer; }

.select2-search--dropdown {
  display: block;
  padding: 5px 4px 0; }
  .select2-search--dropdown::before {
    position: absolute;
    top: 0.6em;
    left: 0.1em;
    opacity: 0.38;
    font-size: 1.51429em; }
  .select2-search--dropdown .select2-search__field {
    background-color: transparent;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.42);
    line-height: normal;
    padding: 10px 16px 12px;
    padding-left: 1.5em;
    width: 100%;
    box-sizing: border-box; }
    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
      -webkit-appearance: none; }
  .select2-search--dropdown.select2-search--hide {
    display: none; }

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0); }

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; }

.input-group .select2-container {
  flex-grow: 1; }

.input-group-prepend ~ .select2-container .select2-selection {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

.input-group > .select2-container:not(:last-child) .select2-selection {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--outlined.select2-container--open .select2-selection {
  border-color: #6200ee;
  box-shadow: inset 2px 2px 0 -1px #6200ee, inset -2px -2px 0 -1px #6200ee; }
  .select2-container--outlined.select2-container--open .select2-selection::before {
    transform: scaleX(0); }

.select2-container--outlined .select2-selection {
  border: 1px solid rgba(0, 0, 0, 0.42);
  border-radius: 4px;
  padding: 14px 16px 12px;
  min-height: 56px;
  line-height: 1.75rem; }

.select2-container--outlined.select2-container--disabled .select2-selection {
  border-bottom-style: solid; }

.select2-container--filled .select2-selection {
  background-color: rgba(0, 0, 0, 0.04);
  padding: 20px 16px 11px; }
  .select2-container--filled .select2-selection:hover {
    background-color: rgba(0, 0, 0, 0.07); }
  .select2-container--filled .select2-selection:active {
    background-color: rgba(0, 0, 0, 0.14); }

.select2-container--filled.select2-container--disabled .select2-selection {
  border-bottom-style: solid; }