react-dropdown-advanced/styles/rdropdown.css

An advanced pure React Dropdown control with many customisable options.

.dda-container {
  position: absolute;
  z-index: 3;
  color: #3b405f;
  box-shadow: #cacab7 0px 0px 10px 1px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; }
  .dda-container.show > .dda-dropdown-list {
    display: block;
    text-align: left; }
  .dda-container .dda-dropdown-list {
    max-width: 200px;
    max-height: 260px;
    border: 2px solid #c2c2c3;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box; }
    .dda-container .dda-dropdown-list i {
      width: 20px;
      height: 20px;
      margin-top: 6px;
      line-height: 20px; }
      .dda-container .dda-dropdown-list i.img-left {
        margin-top: 6px; }
      .dda-container .dda-dropdown-list i.material-icons {
        margin-right: 6px;
        margin-left: 5px; }
        .dda-container .dda-dropdown-list i.material-icons.material-icons.md-18 {
          margin-right: 1px; }
    .dda-container .dda-dropdown-list > div {
      width: 100%;
      background: white;
      border-bottom: solid 1px rgba(194, 194, 195, 0.5);
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-transition: background 0.2s;
      /* Safari */
      transition: background 0.2s; }
      .dda-container .dda-dropdown-list > div:hover {
        background: #F0F0F0; }
      .dda-container .dda-dropdown-list > div.action {
        cursor: pointer; }
      .dda-container .dda-dropdown-list > div.option {
        cursor: pointer; }
      .dda-container .dda-dropdown-list > div.disabled {
        color: #ababab;
        background-color: #ebebeb0a;
        cursor: default; }
      .dda-container .dda-dropdown-list > div.seperator {
        height: 3px;
        background-color: #efebeb; }
      .dda-container .dda-dropdown-list > div.header {
        line-height: 21px !important;
        background-color: #adadad;
        color: white;
        cursor: default;
        padding-left: 5px; }
      .dda-container .dda-dropdown-list > div:last-child {
        border-bottom: 0px; }
    .dda-container .dda-dropdown-list .img-check {
      margin-top: 11px;
      margin-left: 6px;
      margin-right: 4px;
      width: 11px;
      height: 11px;
      display: inline-block;
      border: 1px solid rgba(128, 128, 128, 0.541);
      background-color: white; }
      .dda-container .dda-dropdown-list .img-check.option {
        border-radius: 6px; }
      .dda-container .dda-dropdown-list .img-check.checked {
        background-color: orange; }
  .dda-container .dda-dropdown-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 2px;
    padding-right: 4px;
    line-height: 32px;
    vertical-align: middle;
    font-family: Roboto,sans-serif;
    font-size: 14px; }
    .dda-container .dda-dropdown-item > .flex {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -ms-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      margin-left: 4px;
      margin-right: 4px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
      .dda-container .dda-dropdown-item > .flex.increase-left-margin-fa {
        margin-left: 24px; }
      .dda-container .dda-dropdown-item > .flex.increase-left-margin-md-18 {
        margin-left: 30px; }
      .dda-container .dda-dropdown-item > .flex.increase-left-margin-md-24 {
        margin-left: 35px; }
    .dda-container .dda-dropdown-item > [data-img-right] {
      border: 1px solid rgba(211, 211, 211, 0);
      border-radius: 3px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s; }
      .dda-container .dda-dropdown-item > [data-img-right]:hover {
        border: 1px solid #9f9ea3;
        background: #bbbdc361; }

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px; }

.material-icons.md-24 {
  font-size: 24px; }

.material-icons.md-36 {
  font-size: 36px; }

.material-icons.md-48 {
  font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54); }

.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: white; }

.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3); }