.styledSelect { position: relative; border-radius: 4px; cursor: pointer; font-size: 14px } .styledSelect.normal { width: 100%; border: 1px solid var(--borderLightest); background: var(--backgroundLightest); transition: background 0.1s; } .styledSelect.empty { display: inline-block; } .styledSelect:hover { background: var(--backgroundLight); } .styledSelect:focus { outline: none; } .styledSelect.normal:focus { border: 1px solid var(--borderInputFocus); box-shadow: 0 0 0 1px var(--borderInputFocus); background: #fff; } .styledSelect.invalid, .styledSelect.invalid:focus { border: 1px solid var(--danger); box-shadow: none; } .styledSelect > .valueContainer { display: flex; align-items: center; width: 100%; } .styledSelect > .valueContainer.normal { min-height: 32px; padding: 5px 5px 5px 10px; } .styledSelect > .valueContainer > .chevronIcon { margin-left: auto; font-size: 18px; color: var(--textMedium); } .styledSelect > .valueContainer > .placeholder, .styledSelect > .valueContainer > .valueMulti > .placeholder { color: var(--textLight); } .styledSelectTip { padding-top: 6px; color: var(--textMedium); font-size: 12.5px; } .styledSelect > .dropDown { z-index: var(--dropdown); position: absolute; top: 100%; left: 0; border-radius: 0 0 4px 4px; background: #fff; box-shadow: rgba(9, 30, 66, 0.25) 0 4px 8px -2px, rgba(9, 30, 66, 0.31) 0 0 1px; width: 100%; } .styledSelect > .dropDown > .dropDownInput { padding: 10px 14px 8px; width: 100%; border: none; color: var(--textDarkest); background: none; } .styledSelect > .dropDown > .dropDownInput:focus { outline: none; } .styledSelect > .options { max-height: 200px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .styledSelect > .dropDown > .options::-webkit-scrollbar { width: 8px; } .styledSelect > .dropDown > .options::-webkit-scrollbar-track { background: none; } .styledSelect > .dropDown > .options::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--backgroundMedium); } .styledSelect > .dropDown > .options > .option { padding: 8px 14px; word-break: break-word; cursor: pointer; } .styledSelect > .dropDown > .options > .option:last-of-type { margin-bottom: 8px; } .styledSelect > .dropDown > .options > .option.jira-select-option-is-active { background: var(--backgroundLightPrimary); } .styledSelect > .dropDown > .options > .option:hover { background: var(--backgroundLightPrimary); } .styledSelect > .dropDown > .noOptions { padding: 5px 15px 15px; color: var(--textLight); } .styledSelect > .styledIcon { position: absolute; top: 4px; right: 7px; padding: 5px; font-size: 16px; color: var(--textMedium); cursor: pointer; user-select: none; } /* multi value */ .styledSelect > .valueContainer > .valueMulti { display: flex; align-items: center; flex-wrap: wrap; } .styledSelect > .valueContainer > .valueMulti.normal { padding-top: 5px; } .styledSelect > .valueContainer > .valueMulti > .valueMultiItem { margin-right: 15px; display: inline-flex; align-items: center; border-radius: 4px; cursor: pointer; user-select: none; color: var(--textDarkest); height: 24px; } .styledSelect > .valueContainer > .valueMulti > .valueMultiItem > .selectItem { margin-right: 5px; } .styledSelect > .valueContainer > .valueMulti > .valueMultiItem > .selectItem > .styledIcon { margin-left: 4px; color: var(--textDarkest); } .styledSelect > .valueContainer > .valueMulti > .addMore { display: inline-block; margin-bottom: 3px; padding: 3px 0; font-size: 12.5px; cursor: pointer; color: var(--textLink); font-family: var(--font-medium); font-weight: normal; } .styledSelect > .valueContainer > .valueMulti > .addMore:hover, .styledSelect > .valueContainer > .valueMulti > .addMore:visited, .styledSelect > .valueContainer > .valueMulti > .addMore:active { color: var(--textLink); } .styledSelect > .valueContainer > .valueMulti > .addMore:hover { text-decoration: underline; } .styledSelect > .valueContainer > .valueMulti > .addMore > .styledIcon { margin-right: 3px; vertical-align: middle; font-size: 14px; } .styledSelect > .dropDown > .options > .option > .optionItem { display: flex; align-items: center; } .styledSelect > .dropDown > .options > .option > .optionItem > .styledIcon { font-size: 18px; } .styledSelect > .dropDown > .options > .option > .optionItem > .optionLabel { padding: 0 5px 0 7px; font-size: 15px; } /* issue priority */ .styledSelect > .dropDown > .options > .option > .optionItem.priority > .optionLabel { padding: 0 5px 0 7px; font-size: 15px; text-transform: capitalize; } .styledSelect > .valueContainer > .selectItem.priority > .selectItemLabel { text-transform: capitalize; } .styledSelect > .dropDown > .options > .option > .optionItem.priority > .styledIcon { font-size: 18px; } .styledSelect > .valueContainer > .selectItem.priority.highest > .styledIcon, .styledSelect > .dropDown > .options > .option > .optionItem.priority.highest > .styledIcon { color: var(--highest); } .styledSelect > .valueContainer > .selectItem.priority.high > .styledIcon, .styledSelect > .dropDown > .options > .option > .optionItem.priority.high > .styledIcon { color: var(--high); } .styledSelect > .valueContainer > .selectItem.priority.medium > .styledIcon, .styledSelect > .dropDown > .options > .option > .optionItem.priority.medium > .styledIcon { color: var(--medium); } .styledSelect > .valueContainer > .selectItem.priority.low > .styledIcon, .styledSelect > .dropDown > .options > .option > .optionItem.priority.low > .styledIcon { color: var(--low); } .styledSelect > .valueContainer > .selectItem.priority.lowest > .styledIcon, .styledSelect > .dropDown > .options > .option > .optionItem.priority.lowest > .styledIcon { color: var(--lowest); }