diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss index 366430e751..e6f7d7d605 100644 --- a/src/bundle/Resources/public/scss/_dropdown.scss +++ b/src/bundle/Resources/public/scss/_dropdown.scss @@ -473,6 +473,12 @@ .ibexa-dropdown { &__selection-info { border: none; + + &:hover { + .ibexa-dropdown__selected-item { + color: $ibexa-color-primary; + } + } } &__item-label { diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss b/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss index 41f50cda7b..05a14cc452 100644 --- a/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss +++ b/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss @@ -105,6 +105,14 @@ transform: rotate(90deg); } + &:hover { + border-color: $ibexa-color-primary; + + .c-simple-dropdown__expand-icon { + fill: $ibexa-color-primary; + } + } + &--expanded &__items { opacity: 1; height: auto; @@ -121,11 +129,17 @@ } } - &:hover { - border-color: $ibexa-color-primary; + &--switcher { + &:hover { + border-color: transparent; - .c-simple-dropdown__expand-icon { - fill: $ibexa-color-primary; + .c-simple-dropdown__selected { + color: $ibexa-color-primary; + + .ibexa-icon { + fill: $ibexa-color-primary; + } + } } } } diff --git a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js index 49dc5778ce..4783f66f50 100644 --- a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js +++ b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js @@ -4,13 +4,14 @@ import PropTypes from 'prop-types'; import { createCssClassNames } from '../helpers/css.class.names'; import Icon from '../icon/icon'; -const SimpleDropdown = ({ options, selectedOption, extraClasses, onOptionClick, isDisabled, selectedItemLabel }) => { +const SimpleDropdown = ({ options, selectedOption, extraClasses, onOptionClick, isDisabled, selectedItemLabel, isSwitcher }) => { const containerRef = useRef(); const [isExpanded, setIsExpanded] = useState(false); const dropdownClass = createCssClassNames({ 'c-simple-dropdown': true, 'c-simple-dropdown--expanded': isExpanded, 'c-simple-dropdown--disabled': isDisabled, + 'c-simple-dropdown--switcher': isSwitcher, [extraClasses]: true, }); const toggleExpanded = () => { @@ -114,12 +115,14 @@ SimpleDropdown.propTypes = { onOptionClick: PropTypes.func.isRequired, isDisabled: PropTypes.bool, selectedItemLabel: PropTypes.string, + isSwitcher: PropTypes.bool, }; SimpleDropdown.defaultProps = { isDisabled: false, extraClasses: '', selectedItemLabel: '', + isSwitcher: false, }; export default SimpleDropdown; diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/view-switcher/view.switcher.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-switcher/view.switcher.component.js index 02e6669e3c..20e7282059 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/view-switcher/view.switcher.component.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-switcher/view.switcher.component.js @@ -38,6 +38,7 @@ const ViewSwitcherComponent = ({ onViewChange, activeView, isDisabled }) => { selectedOption={selectedOption} onOptionClick={switchView} selectedItemLabel={viewLabel} + isSwitcher={true} /> ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js index b29137d858..023119ee90 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js @@ -22,6 +22,7 @@ const SortSwitcher = ({ isDisabled }) => { selectedOption={selectedOption} onOptionClick={onOptionClick} isDisabled={isDisabled} + isSwitcher={true} /> ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js index 1fb2c76f42..c4c7460e30 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js @@ -22,6 +22,7 @@ const ViewSwitcher = ({ isDisabled }) => { onOptionClick={onOptionClick} isDisabled={isDisabled} selectedItemLabel={viewLabel} + isSwitcher={true} /> );