From cdad7977fc94cd6a1a97841ed0f25e8504cb80d6 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 1 Oct 2017 12:20:00 +0200
Subject: Improve privacy dropdown, remove react-simple-dropdown dependency
 (#5140)

* Improve privacy dropdown, remove react-simple-dropdown dependency

* Animate privacy warning

* Fix react-router-scroll
---
 app/javascript/styles/components.scss | 27 ++++++++++++++++-----------
 app/javascript/styles/rtl.scss        | 18 ++----------------
 2 files changed, 18 insertions(+), 27 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 5ea0d134e..caa7c0787 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1275,7 +1275,7 @@
   background: $ui-secondary-color;
   padding: 4px 0;
   border-radius: 4px;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
+  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
 
   ul {
     list-style: none;
@@ -2805,19 +2805,12 @@ button.icon-button.active i.fa-retweet {
   filter: none;
 }
 
-.privacy-dropdown {
-  position: relative;
-}
-
 .privacy-dropdown__dropdown {
-  display: none;
   position: absolute;
-  left: 0;
-  top: 27px;
-  width: 230px;
   background: $simple-background-color;
-  border-radius: 0 4px 4px;
-  z-index: 2;
+  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  border-radius: 4px;
+  margin-left: 40px;
   overflow: hidden;
 }
 
@@ -2869,6 +2862,18 @@ button.icon-button.active i.fa-retweet {
     background: $simple-background-color;
     border-radius: 4px 4px 0 0;
     box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
+
+    .icon-button {
+      transition: none;
+    }
+
+    &.active {
+      background: $ui-highlight-color;
+
+      .icon-button {
+        color: $primary-text-color;
+      }
+    }
   }
 
   .privacy-dropdown__dropdown {
diff --git a/app/javascript/styles/rtl.scss b/app/javascript/styles/rtl.scss
index 0fdeccd9c..67bfa8a38 100644
--- a/app/javascript/styles/rtl.scss
+++ b/app/javascript/styles/rtl.scss
@@ -128,22 +128,8 @@ body.rtl {
   }
 
   .privacy-dropdown__dropdown {
-    left: auto;
-    right: 0;
-  }
-
-  .dropdown--active .dropdown__content {
-    text-align: right;
-  }
-
-  .dropdown--active .dropdown__content::before {
-    left: auto;
-    right: 8px;
-  }
-
-  .dropdown--active .dropdown__content > ul {
-    left: auto;
-    right: -10px;
+    margin-left: 0;
+    margin-right: 40px;
   }
 
   .privacy-dropdown__option__icon {
-- 
cgit