// core .p-dropdown { display: inline-flex; cursor: pointer; position: relative; user-select: none; } .p-dropdown-clear-icon { position: absolute; top: 50%; margin-top: -0.5rem; } .p-dropdown-trigger { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .p-dropdown-label { display: block; white-space: nowrap; overflow: hidden; flex: 1 1 auto; width: 1%; text-overflow: ellipsis; cursor: pointer; } .p-dropdown-label-empty { overflow: hidden; opacity: 0; } input.p-dropdown-label { cursor: default; } .p-dropdown .p-dropdown-panel { min-width: 100%; } .p-dropdown-panel { position: absolute; top: 0; left: 0; } .p-dropdown-items-wrapper { overflow: auto; } .p-dropdown-item { cursor: pointer; font-weight: normal; white-space: nowrap; position: relative; overflow: hidden; display: flex; align-items: center; } .p-dropdown-item-group { cursor: auto; } .p-dropdown-items { margin: 0; padding: 0; list-style-type: none; } .p-dropdown-filter { width: 100%; } .p-dropdown-filter-container { position: relative; } .p-dropdown-filter-icon { position: absolute; top: 50%; margin-top: -0.5rem; } .p-fluid .p-dropdown { display: flex; } .p-fluid .p-dropdown .p-dropdown-label { width: 1%; } // theme .p-dropdown { background: $inputBg; border: $inputBorder; transition: $formElementTransition; border-radius: $borderRadius; outline-color: transparent; &:not(.p-disabled):hover { border-color: $inputHoverBorderColor; } &:not(.p-disabled).p-focus { @include focused-input(); } &.p-variant-filled { background: $inputFilledBg; &:not(.p-disabled):hover { background-color: $inputFilledHoverBg; } &:not(.p-disabled).p-focus { background-color: $inputFilledFocusBg; .p-inputtext { background-color: transparent; } } } &.p-dropdown-clearable { .p-dropdown-label { padding-right: nth($inputPadding, 2) + $primeIconFontSize; } } .p-dropdown-label { background: transparent; border: 0 none; &.p-placeholder { color: $inputPlaceholderTextColor; } &:focus, &:enabled:focus { outline: 0 none; box-shadow: none; } } .p-dropdown-trigger { background: transparent; color: $inputIconColor; width: $inputGroupAddOnMinWidth; border-top-right-radius: $borderRadius; border-bottom-right-radius: $borderRadius; } .p-dropdown-clear-icon { color: $inputIconColor; right: $inputGroupAddOnMinWidth; } &.p-invalid.p-component { @include invalid-input(); } } .p-dropdown-panel { background: $inputOverlayBg; color: $inputListTextColor; border: $inputOverlayBorder; border-radius: $borderRadius; box-shadow: $inputOverlayShadow; .p-dropdown-header { padding: $inputListHeaderPadding; border-bottom: $inputListHeaderBorder; color: $inputListHeaderTextColor; background: $inputOverlayHeaderBg; margin: $inputListHeaderMargin; border-top-right-radius: $borderRadius; border-top-left-radius: $borderRadius; .p-dropdown-filter { padding-right: nth($inputPadding, 2) + $primeIconFontSize; margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize); } .p-dropdown-filter-icon { right: nth($inputPadding, 2); color: $inputIconColor; } } .p-dropdown-items { padding: $inputListPadding; .p-dropdown-item { margin: $inputListItemMargin; padding: $inputListItemPadding; border: $inputListItemBorder; color: $inputListItemTextColor; background: $inputListItemBg; transition: $listItemTransition; border-radius: $inputListItemBorderRadius; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } &.p-highlight { color: $highlightTextColor; background: $highlightBg; &.p-focus { background: $highlightFocusBg; } } &:not(.p-highlight):not(.p-disabled) { &.p-focus { color: $inputListItemTextHoverColor; background: $inputListItemHoverBg; } } .p-dropdown-check-icon { position: relative; margin-left: -1 * $inlineSpacing; margin-right: $inlineSpacing; } } .p-dropdown-item-group { margin: $submenuHeaderMargin; padding: $submenuHeaderPadding; color: $submenuHeaderTextColor; background: $submenuHeaderBg; font-weight: $submenuHeaderFontWeight; } .p-dropdown-empty-message { padding: $inputListItemPadding; color: $inputListItemTextColor; background: $inputListItemBg; } } }