@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: 0.25rem;
}
.sui-dropdown {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  border-radius: var(--radius-md);
  background-color: 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 var(--shadow);
}
@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 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 var(--border);
    opacity: 0;
  }
  100% {
    height: 0;
    border: none;
    pointer-events: none;
    user-select: none;
  }
}
.sui-dropdown.initialized {
  animation: pop-down 0.15s ease forwards;
}
.sui-dropdown.initialized.active {
  display: flex;
  border: 1px solid var(--border);
  height: auto;
  pointer-events: all;
  animation: pop-up 0.15s ease forwards;
}
.sui-dropdown.initialized.below {
  top: calc(100% + 0.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% + 0.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: 0.975em;
  transition: all 0.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: 0.5rem 0.75rem;
  width: 100%;
  gap: 0.5rem;
}
.sui-dropdown-option:hover,
.sui-dropdown-option:focus,
.sui-dropdown-option.focused {
  background-color: var(--background-step-3);
}
.sui-dropdown-option.has-href {
  padding: 0;
}
.sui-dropdown-link {
  width: 100%;
  text-decoration: none;
  color: var(--text-normal);
}
.sui-dropdown-option.primary {
  color: var(--primary-base);
}
.sui-dropdown-option.primary:hover {
  background-color: var(--primary-base);
  color: var(--text-inverted);
}
.sui-dropdown-option.success {
  color: var(--success-base);
}
.sui-dropdown-option.success:hover {
  background-color: var(--success-base);
  color: var(--text-dark);
}
.sui-dropdown-option.warning {
  color: var(--warning-base);
}
.sui-dropdown-option.warning:hover {
  background-color: var(--warning-base);
  color: var(--text-dark);
}
.sui-dropdown-option.danger {
  color: var(--danger-vibrant);
}
.sui-dropdown-option.danger:hover {
  background-color: var(--danger-base);
  color: var(--text-light);
}
.sui-dropdown-option.info {
  color: var(--info-vibrant);
}
.sui-dropdown-option.info:hover {
  background-color: var(--info-base);
  color: var(--text-light);
}
.sui-dropdown-option.mono {
  color: var(--text-normal);
}
.sui-dropdown-option.mono:hover {
  background-color: var(--mono-base);
  color: var(--text-inverted);
}
.sui-dropdown-option.disabled {
  pointer-events: none;
  color: var(--text-muted);
}
.sui-dropdown-option.end {
  justify-content: space-between;
}
.sui-dropdown-option.has-icon .sui-dropdown-line-container {
  padding-left: 0.5rem;
}