@inkline/inkline/components/IDropdownItem/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Dropdown Item
 */
.dropdown .dropdown-item {
  display: flex;
  margin: var(--dropdown--item--margin, var(--dropdown--item--margin-top, 0) var(--dropdown--item--margin-right, var(--dropdown--body--padding-right, calc(var(--dropdown--padding-right) * -1))) var(--dropdown--item--margin-bottom, 0) var(--dropdown--item--margin-left, var(--dropdown--body--padding-left, calc(var(--dropdown--padding-left) * -1))));
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition-property: var(--dropdown--item--transition-property, background-color, border-color, color);
  transition-timing-function: var(--dropdown--item--transition-timing-function, var(--transition-timing-function));
  transition-duration: var(--dropdown--item--transition-duration, var(--transition-duration));
  color: var(--dropdown--item--color, var(--dropdown--color));
  border-style: var(--dropdown--item--border-style, var(--dropdown--border-style, var(--dropdown--item--border-top-style, var(--dropdown--border-top-style, var(--border-top-style))) var(--dropdown--item--border-right-style, var(--dropdown--border-right-style, var(--border-right-style))) var(--dropdown--item--border-bottom-style, var(--dropdown--border-bottom-style, var(--border-bottom-style))) var(--dropdown--item--border-left-style, var(--dropdown--border-left-style, var(--border-left-style)))));
  border-width: var(--dropdown--item--border-width, var(--dropdown--item--border-top-width, 0) var(--dropdown--item--border-right-width, 0) var(--dropdown--item--border-bottom-width, 0) var(--dropdown--item--border-left-width, 0));
  border-color: var(--dropdown--item--border-color, var(--dropdown--border-color, var(--dropdown--item--border-top-color, var(--dropdown--border-top-color, var(--border-top-color))) var(--dropdown--item--border-right-color, var(--dropdown--border-right-color, var(--border-right-color))) var(--dropdown--item--border-bottom-color, var(--dropdown--border-bottom-color, var(--border-bottom-color))) var(--dropdown--item--border-left-color, var(--dropdown--border-left-color, var(--border-left-color)))));
  padding: var(--dropdown--item--padding, var(--dropdown--padding, var(--dropdown--item--padding-top, calc(var(--dropdown--padding-top, var(--padding-top)) * 0.5)) var(--dropdown--item--padding-right, var(--dropdown--padding-right, var(--padding-right))) var(--dropdown--item--padding-bottom, calc(var(--dropdown--padding-bottom, var(--padding-bottom)) * 0.5)) var(--dropdown--item--padding-left, var(--dropdown--padding-left, var(--padding-left)))));
  background: var(--dropdown--item--background, var(--dropdown--background, transparent));
}
.dropdown .dropdown-item:not(.-disabled, .-plaintext):hover, .dropdown .dropdown-item:not(.-disabled, .-plaintext):focus {
  color: var(--dropdown--item--hover--color, var(--dropdown--item--color));
  background: var(--dropdown--item--hover--background, var(--dropdown--item--background));
}
.dropdown .dropdown-item.-disabled {
  color: var(--dropdown--item--disabled--color, var(--dropdown--item--color));
  background: var(--dropdown--item--disabled--background, var(--dropdown--item--background));
  pointer-events: none;
  cursor: default;
}
.dropdown .dropdown-item.-active {
  color: var(--dropdown--item--active--color, var(--dropdown--item--color));
  background: var(--dropdown--item--active--background, var(--dropdown--item--background));
  font-weight: var(--dropdown--item--active--font-weight, var(--font-weight-semibold));
}
.dropdown .dropdown-item:hover, .dropdown .dropdown-item:focus {
  outline: 0;
  text-decoration: none;
}
.dropdown .dropdown-item.-plaintext {
  cursor: default;
}