From c66c2ac446de643285f4eb7c4ebfced15d0aa566 Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Sun, 29 May 2016 19:48:30 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=B7=D0=B0=D0=BB=D0=B8=D0=BF=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B8=20=D1=80=D0=B0=D1=81=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D0=B8?=
 =?UTF-8?q?=20Dropdown.=20=D0=9A=D0=BB=D0=B0=D1=81=D1=81=20=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D1=80=D1=8B=D1=82=D0=BE=D0=B3=D0=BE=20=D1=81=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B5=D1=81=D1=91=D0=BD=20=D0=BD=D0=B0=20=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=80=D1=85=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/form/Dropdown.jsx  |  9 ++++-----
 src/components/ui/form/dropdown.scss | 18 ++++++++++++------
 2 files changed, 16 insertions(+), 11 deletions(-)

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 (
             <div className={classNames(styles[color], {
-                [styles.block]: block
+                [styles.block]: block,
+                [styles.opened]: isActive
             })} {...this.props} onClick={this.onToggle}>
                 {label}
                 <span className={styles.toggleIcon} />
 
-                <div className={classNames(styles.menu, {
-                    [styles.menuActive]: isActive
-                })}>
+                <div className={styles.menu}>
                     {items.map((item, key) => (
                         <div className={styles.menuItem} key={key} onClick={this.onSelectItem(item)}>
                             {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 {