diff --git a/src/components/ui/form/Dropdown.jsx b/src/components/ui/form/Dropdown.jsx index 8ac271b..4cc77ee 100644 --- a/src/components/ui/form/Dropdown.jsx +++ b/src/components/ui/form/Dropdown.jsx @@ -18,7 +18,7 @@ export default class Dropdown extends FormComponent { ]).isRequired, items: PropTypes.arrayOf(PropTypes.string).isRequired, block: PropTypes.bool, - color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet']) + color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange']) }; state = { @@ -42,14 +42,13 @@ export default class Dropdown extends FormComponent { return (
{label} -
+
{items.map((item, key) => (
{item} diff --git a/src/components/ui/form/dropdown.scss b/src/components/ui/form/dropdown.scss index 20c8acc..537427d 100644 --- a/src/components/ui/form/dropdown.scss +++ b/src/components/ui/form/dropdown.scss @@ -14,7 +14,8 @@ $dropdownPadding: 15px; background-color: lighter($backgroundColor); } - &:active { // TODO: +.open, чтобы он был ужатый в раскрытом состоянии + &:active, + &.opened { background-color: darker($backgroundColor); } } @@ -42,6 +43,10 @@ $dropdownPadding: 15px; } } +.opened { + +} + .toggleIcon { composes: selecter from 'components/ui/icons.scss'; @@ -55,7 +60,8 @@ $dropdownPadding: 15px; right: $dropdownPadding - 5px; } - .dropdown:active & { // TODO: + .open, смотри коммент выше + .dropdown:active &, + .dropdown.opened & { right: $dropdownPadding + 5px; } } @@ -84,11 +90,11 @@ $dropdownPadding: 15px; transition-property: opacity, visibility; opacity: 0; visibility: hidden; -} -.menuActive { - opacity: 1; - visibility: visible; + .dropdown.opened & { + opacity: 1; + visibility: visible; + } } .menuItem {