Dropdowns

Dropdowns are used to select values from a series of different options. Dropdowns in the Ryte Design can also contain icons, checkboxes, forms and buttons. If the list has more than 7 items, add a search box to help the users find the right option.

 
 
General CSS for dropdowns

.dropdown {
  max-width: 256px;
  padding: 16px 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(114, 128, 142, .10), 0 15px 35px 0 rgba(39, 53, 89, .10), 0 5px 15px 0 rgba(0, 0, 0, .08);
}

.dropdown::before {
  content: "";
  display: block;
  z-index: 100;
  position: absolute;
  top: -7px;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-radius: 3px 0 0;
  border-left: 1px solid #f1f2f3;
  border-top: 1px solid #f1f2f3;
  background: #fff;
}

Dropdown variations

Dropdown with a central arrow at the top

 
 
Dropdown with an arrow at the top right

 
 
Dropdown with an arrow at the top left

 
 
Additional CSS for dropdown variations

.dropdown.arrow-top-center::before {
  left: 50%;
}

.dropdown.arrow-top-right::before {
  left: calc(100% - 24px);
}

.dropdown.arrow-top-left::before {
  left: 24px;
}
 
.dropdown a {
  width: 100%;
  padding: 4px 16px;
}
 
.dropdown a:hover {
  background: #f4f7fa; /* $main-background */
}