@mongodb-js/mongodb-ui-components/build/dropdown/style.js

A collection of frequently used functional UI components found on mongodb properties

"use strict";

module.exports = height => `
.dropdown__container {
  position: relative;
  height: 50px;
  width: 100%;
}

.dropdown {
  position: absolute;
  z-index: 100;
  overflow: hidden;
  height: 40px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  transition: height 300ms;
  will-change: height;
}

.dropdown * {
  -webkit-user-select: none;
  user-select: none;
}

.dropdown--open {
  height: ${height}px;
}

.dropdown__option {
  cursor: pointer;
  height: 40px;
  width: 100%;
  padding: 10px 16px;
  transition: 300ms;
}

.dropdown__arrow {
  position: absolute;
  width: 0; 
  height: 0; 
  top: 16px;
  right: 16px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #555;
  transition: 300ms;
}

.dropdown--open .dropdown__arrow {
  transform: rotateZ(90deg)
}
`;