From 574ddfd91c56cb57ed1f0aed36c8ced2619e1e79 Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Fri, 20 May 2016 00:12:54 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=D1=81=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BA=D1=83=20=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=88?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D1=81=20=D1=8F=D0=B7=D1=8B=D0=BA=D0=B0=D0=BC?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/langMenu/LangMenu.jsx  |  4 +---
 src/components/langMenu/langMenu.scss | 30 +++++++++++++++++++++------
 src/components/ui/fonts.scss          |  2 ++
 src/index.scss                        |  2 +-
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/langMenu/LangMenu.jsx b/src/components/langMenu/LangMenu.jsx
index e736bbf..f840959 100644
--- a/src/components/langMenu/LangMenu.jsx
+++ b/src/components/langMenu/LangMenu.jsx
@@ -4,8 +4,6 @@ import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { FormattedMessage as Message } from 'react-intl';
 
-import icons from 'components/ui/icons.scss';
-
 import styles from './langMenu.scss';
 import messages from './langMenu.intl.json';
 
@@ -68,7 +66,7 @@ export default class LangMenu extends Component {
                         {showCurrentLang
                             ? this.renderLangLabel(userLang) : (
                             <span>
-                                <span className={icons.globe} />
+                                <span className={styles.triggerIcon} />
                                 {' '}
                                 <Message {...messages.siteLanguage} />
                                 {' '}
diff --git a/src/components/langMenu/langMenu.scss b/src/components/langMenu/langMenu.scss
index 671d879..bacf54e 100644
--- a/src/components/langMenu/langMenu.scss
+++ b/src/components/langMenu/langMenu.scss
@@ -1,3 +1,5 @@
+@import "~components/ui/colors.scss";
+
 .container {
     position: relative;
 }
@@ -10,6 +12,8 @@
 
     width: 150px;
     margin: 0 auto 10px;
+
+    perspective: 600px;
 }
 
 .menu {
@@ -21,15 +25,14 @@
 
     visibility: hidden;
     opacity: 0;
-    transition: 0.2s ease;
-    transform: scale(0.1);
-    transform-origin: center bottom;
+    transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1); // easeOutCirc
+    transform: translateY(10px) rotateX(-22deg);
 }
 
 .menuActive {
     visibility: visible;
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0) rotateX(0deg);
 }
 
 .withCurrentLang {
@@ -47,9 +50,11 @@
     font-size: 13px;
     border-bottom: 1px solid #eee;
     cursor: pointer;
+    transition: .2s;
 
     &:hover {
-        background: rgba(0, 0, 0, 0.1);
+        background: #f5f5f5;
+        color: #262626;
     }
 
     &:last-child {
@@ -58,7 +63,9 @@
 }
 
 .activeMenuItem {
-    background: #efffef;
+    background: lighter($green)!important;
+    color: #fff!important;
+    font-weight: $font-wight-bold;
 }
 
 .langIco {
@@ -103,6 +110,14 @@
     font-size: 12px;
 }
 
+.triggerIcon {
+    composes: globe from 'components/ui/icons.scss';
+
+    position: relative;
+    bottom: 1px;
+    font-size: 11px;
+}
+
 .triggerArrow {
     font-size: 8px;
     transition: 0.2s;
@@ -116,4 +131,7 @@
 .triggerArrowBottom {
     composes: triggerArrow;
     composes: arrowBottom from 'components/ui/icons.scss';
+
+    // Докручиваем лишний раз, чтобы иконка крутилась по часовой стрелке
+    transform: rotate(360deg);
 }
diff --git a/src/components/ui/fonts.scss b/src/components/ui/fonts.scss
index 204456d..ead7995 100644
--- a/src/components/ui/fonts.scss
+++ b/src/components/ui/fonts.scss
@@ -1,3 +1,5 @@
 // TODO: should we host fonts from our side?
 $font-family-title: 'Roboto Condensed', Arial, sans-serif;
 $font-family-base: 'Roboto', Arial, sans-serif;
+
+$font-wight-bold: 500;
diff --git a/src/index.scss b/src/index.scss
index e01b582..07e5b30 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -15,7 +15,7 @@ body {
 }
 
 b {
-    font-weight: 500;
+    font-weight: $font-wight-bold;
 }
 
 a {