@geoffcox/sterling-svelte-themes/css/sterling/Dropdown.base.css

A modern theme for the sterling-svelte component library.

.sterling-dropdown {
  align-content: stretch;
  align-items: stretch;
  background-color: var(--stsv-input__background-color);
  border-color: var(--stsv-input__border-color);
  border-radius: 8px;
  border-style: solid;
  border-width: var(--stsv-input__border-width);
  color: var(--stsv-input__color);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  outline: none;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition:
    background-color 250ms,
    color 250ms,
    border-color 250ms;
}

.sterling-dropdown:not(.disabled):hover {
  background-color: var(--stsv-input__background-color--hover);
  border-color: var(--stsv-input__border-color--hover);
  color: var(--stsv-input__color--hover);
}

.sterling-dropdown:not(.disabled):focus {
  background-color: var(--stsv-input__background-color--focus);
  border-color: var(--stsv-input__border-color--focus);
  color: var(--stsv-input__color--focus);
  outline-color: var(--stsv-common__outline-color);
  outline-offset: 0;
  outline-style: solid;
  outline-width: var(--stsv-common__outline-width);
}

.sterling-dropdown > .value {
  overflow: hidden;
}

.sterling-dropdown .button,
.sterling-dropdown .icon {
  align-self: center;
  cursor: pointer;
}

.sterling-dropdown .chevron {
  display: block;
  position: relative;
  border: none;
  background: none;
  margin: 0;
  height: 100%;
  min-width: 2em;
  min-height: 2em;
}

.sterling-dropdown .chevron::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 3px solid currentColor;
  border-top: 3px solid currentColor;
  /* 
			The chevron is a right triangle, rotated to face down.
			It should be moved up so it is centered vertically after rotation.
			The amount to move is the hypotenuse of the right triangle of the chevron.
		    For a right triangle with equal a and b where c=1
			a^2 + b^2 = c^2 	
		    a^2 + a^2 = c^2 
		    2a^2 = c^2
			2a^2 = 1
			a^2 = 0.5
			a = sqrt(0.5)
			a = 0.707
		*/
  transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
  transform-origin: 50% 50%;
}

.sterling-dropdown-popup-content,
.sterling-dropdown-content {
  background-color: var(--stsv-common__background-color);
  border-color: var(--stsv-common__border-color);
  border-radius: 0;
  border-style: solid;
  border-width: var(--stsv-common__border-width);
  color: var(--stsv-common__color);
  filter: var(--stsv-common__drop-shadow);
  padding: 0.25em;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}

@media (prefers-reduced-motion) {
  .sterling-dropdown,
  .sterling-dropdown::after {
    transition: none;
  }
}