@use "sass:math"; // core .p-treeselect { display: inline-flex; cursor: pointer; user-select: none; } .p-treeselect-trigger { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .p-treeselect-label-container { overflow: hidden; flex: 1 1 auto; cursor: pointer; } .p-treeselect-label { display: block; white-space: nowrap; cursor: pointer; overflow: hidden; text-overflow: ellipsis; } .p-treeselect-label-empty { overflow: hidden; visibility: hidden; } .p-treeselect-token { cursor: default; display: inline-flex; align-items: center; flex: 0 0 auto; } .p-treeselect .p-treeselect-panel { min-width: 100%; } .p-treeselect-items-wrapper { overflow: auto; } .p-fluid .p-treeselect { display: flex; } // theme .p-treeselect { 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-treeselect-label { padding: $inputPadding; transition: $formElementTransition; &.p-placeholder { color: $inputPlaceholderTextColor; } } &.p-treeselect-chip { .p-treeselect-token { padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2); margin-right: $inlineSpacing; background: $chipBg; color: $chipTextColor; border-radius: $chipBorderRadius; } } .p-treeselect-trigger { background: transparent; color: $inputIconColor; width: $inputGroupAddOnMinWidth; border-top-right-radius: $borderRadius; border-bottom-right-radius: $borderRadius; } &.p-invalid.p-component { @include invalid-input(); } } .p-inputwrapper-filled { &.p-treeselect { &.p-treeselect-chip { .p-treeselect-label { padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2); } } } } .p-treeselect-panel { background: $inputOverlayBg; color: $inputListTextColor; border: $inputOverlayBorder; border-radius: $borderRadius; box-shadow: $inputOverlayShadow; .p-treeselect-items-wrapper { .p-tree { border: 0 none; } .p-treeselect-empty-message { padding: $inputListItemPadding; color: $inputListItemTextColor; background: $inputListItemBg; } } } .p-input-filled { .p-treeselect { background: $inputFilledBg; &:not(.p-disabled):hover { background-color: $inputFilledHoverBg; } &:not(.p-disabled).p-focus { background-color: $inputFilledFocusBg; } } }