react-toolbox-build4server/react-toolbox/jsx/dropdown/style.css

Builds react-toolbox in such a way that it's components can be required and used in node - most likely for server-side rendered webapps - without having to depend on webpack to build your entire server-side project

.rt-dropdown-root {
  position: relative; }
  .rt-dropdown-root:not(.rt-dropdown-active) > .rt-dropdown-values {
    max-height: 0;
    visibility: hidden; }
  .rt-dropdown-root.rt-dropdown-active > .rt-dropdown-label, .rt-dropdown-root.rt-dropdown-active > .rt-dropdown-value {
    opacity: .5; }
  .rt-dropdown-root.rt-dropdown-active > .rt-dropdown-values {
    max-height: 45vh;
    visibility: visible;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); }
  .rt-dropdown-root:not(.rt-dropdown-up) > .rt-dropdown-values {
    top: 0;
    bottom: auto; }
  .rt-dropdown-root.rt-dropdown-up > .rt-dropdown-values {
    top: auto;
    bottom: 0; }
  .rt-dropdown-root.rt-dropdown-disabled {
    pointer-events: none;
    cursor: normal; }

.rt-dropdown-value > input {
  cursor: pointer; }

.rt-dropdown-value:after {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
  border-top: 0.54857rem solid rgba(0, 0, 0, 0.12);
  border-right: 0.54857rem solid transparent;
  border-left: 0.54857rem solid transparent;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

.rt-dropdown-field {
  position: relative;
  padding: 2rem 0;
  cursor: pointer; }
  .rt-dropdown-field.rt-dropdown-errored {
    padding-bottom: 0; }
    .rt-dropdown-field.rt-dropdown-errored > .rt-dropdown-label {
      color: #de3226; }
    .rt-dropdown-field.rt-dropdown-errored > .rt-dropdown-templateValue {
      border-bottom: 1px solid #de3226; }
  .rt-dropdown-field.rt-dropdown-disabled {
    pointer-events: none;
    cursor: normal; }
    .rt-dropdown-field.rt-dropdown-disabled > .rt-dropdown-templateValue {
      border-bottom-style: dotted;
      opacity: .7; }

.rt-dropdown-templateValue {
  position: relative;
  min-height: 3.84rem;
  padding: 0.8rem 0;
  color: #212121;
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.rt-dropdown-label {
  position: absolute;
  top: 0.6rem;
  left: 0;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: rgba(0, 0, 0, 0.26); }

.rt-dropdown-error {
  margin-bottom: -2rem;
  font-size: 1.2rem;
  line-height: 2rem;
  color: #de3226; }

.rt-dropdown-values {
  position: absolute;
  z-index: 100;
  width: 100%;
  overflow-y: auto;
  list-style: none;
  background-color: white;
  border-radius: 0.2rem;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-property: max-height, box-shadow;
  transition-property: max-height, box-shadow; }
  .rt-dropdown-values::-webkit-scrollbar {
    width: 0;
    height: 0; }
  .rt-dropdown-values > * {
    position: relative;
    padding: 1rem;
    overflow: hidden;
    cursor: pointer; }
    .rt-dropdown-values > *:hover {
      background-color: #eeeeee; }
    .rt-dropdown-values > *.rt-dropdown-selected {
      color: #3f51b5; }