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 {