@studiocms/ui/dist/components/Dropdown/dropdown.css

The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.

.sui-dropdown-toggle {
  width: fit-content;
}
.sui-dropdown-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.sui-dropdown {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  border-radius: var(--radius-md);
  background-color: hsl(var(--background-step-2));
  overflow: hidden;
  left: 0;
  z-index: 90;
  min-width: 200px;
  max-width: min-content;
  height: 0;
  border: none;
  pointer-events: none;
  user-select: none;
  box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
}
@keyframes pop-up {
  0% {
    scale: 0.9;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 1;
    user-select: all;
  }
}
@keyframes pop-down {
  0% {
    scale: 1;
    height: auto;
    border: initial;
    pointer-events: all;
    top: auto;
    bottom: auto;
    border: 1px solid hsl(var(--border));
    opacity: 1;
    user-select: all;
  }
  99.9999% {
    scale: 0.9;
    height: auto;
    border: initial;
    pointer-events: all;
    bottom: initial;
    top: auto;
    bottom: auto;
    border: 1px solid hsl(var(--border));
    opacity: 0;
  }
  100% {
    height: 0;
    border: none;
    pointer-events: none;
    user-select: none;
  }
}
.sui-dropdown.initialized {
  animation: pop-down .15s ease forwards;
}
.sui-dropdown.initialized.active {
  display: flex;
  border: 1px solid hsl(var(--border));
  height: auto;
  pointer-events: all;
  animation: pop-up .15s ease forwards;
}
.sui-dropdown.initialized.below {
  top: calc(100% + .25rem + var(--offset)) !important;
  bottom: auto;
  transform-origin: top center;
}
.sui-dropdown.below.start {
  transform-origin: top left;
}
.sui-dropdown.below.end {
  transform-origin: top right;
}
.sui-dropdown.above {
  top: auto;
  bottom: calc(100% + .25rem + var(--offset)) !important;
  transform-origin: bottom center;
}
.sui-dropdown.above.start {
  transform-origin: bottom left;
}
.sui-dropdown.above.end {
  transform-origin: bottom right;
}
.sui-dropdown-option {
  cursor: pointer;
  font-size: .975em;
  transition: all .15s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  white-space: normal;
  user-select: none;
}
.sui-dropdown-line-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .5rem .75rem;
  width: 100%;
  gap: .5rem;
}
.sui-dropdown-option:hover,
.sui-dropdown-option:focus,
.sui-dropdown-option.focused {
  background-color: hsl(var(--background-step-3));
}
.sui-dropdown-option.has-href {
  padding: 0;
}
.sui-dropdown-link {
  width: 100%;
  text-decoration: none;
  color: hsl(var(--text-normal));
}
.sui-dropdown-option.primary {
  color: hsl(var(--primary-base));
}
.sui-dropdown-option.primary:hover {
  background-color: hsl(var(--primary-base));
  color: hsl(var(--text-inverted));
}
.sui-dropdown-option.success {
  color: hsl(var(--success-base));
}
.sui-dropdown-option.success:hover {
  background-color: hsl(var(--success-base));
  color: hsl(var(--text-dark));
}
.sui-dropdown-option.warning {
  color: hsl(var(--warning-base));
}
.sui-dropdown-option.warning:hover {
  background-color: hsl(var(--warning-base));
  color: hsl(var(--text-dark));
}
.sui-dropdown-option.danger {
  color: hsl(var(--danger-base));
}
.sui-dropdown-option.danger:hover {
  background-color: hsl(var(--danger-base));
  color: hsl(var(--text-light));
}
.sui-dropdown-option.info {
  color: hsl(var(--info-base));
}
.sui-dropdown-option.info:hover {
  background-color: hsl(var(--info-base));
  color: hsl(var(--text-light));
}
.sui-dropdown-option.mono {
  color: hsl(var(--text-normal));
}
.sui-dropdown-option.mono:hover {
  background-color: hsl(var(--mono-base));
  color: hsl(var(--text-inverted));
}
.sui-dropdown-option.disabled {
  pointer-events: none;
  color: hsl(var(--text-muted));
}
.sui-dropdown-option.end {
  justify-content: space-between;
}
.sui-dropdown-option.has-icon .sui-dropdown-line-container {
  padding-left: .5rem;
}