From c4c34c82f8175e42fed2e30db38ef2cfccd1fbe1 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 10 Aug 2020 17:48:31 +0100
Subject: [PATCH] synchronise searchbar animations
---
.../pages/ModuleResources/style.module.scss | 30 ++++++++++++-------
1 file changed, 20 insertions(+), 10 deletions(-)
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index bc6679ff8..5315e907b 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -11,10 +11,10 @@
.searchBar {
border-radius: 8px;
background-color: $gray-100;
- border-color: $gray-100;
- transition: 0.5s border-color;
- -webkit-transition: 0.5s border-color;
- -moz-transition: 0.5s border-color;
+ border-color: $gray-100;
+ transition: 0s all;
+ -webkit-transition: 0s all;
+ -moz-transition: 0s all;
}
.serachBar::placeholder {
@@ -22,10 +22,19 @@
opacity: 1;
}
-.searchBar:focus {
- box-shadow: none !important;
+.searchBar:focus + :global(.input-group-append) .searchBarIcon{
+ box-shadow: none !important;
+ border-left: none;
+ border-color: $gray-300;
+ background-color: $white;
+}
+
+
+.searchBar:focus{
+ box-shadow: none !important;
+ border-right: none;
border-color: $gray-300;
- background-color: $white;
+ background-color: $white;
}
.searchBarIcon {
@@ -33,12 +42,13 @@
background-color: $gray-100;
border-color: $gray-100;
color: $gray-500;
- transition: 0.2s background;
- -webkit-transition: 0.2s background;
- -moz-transition: 0.2s background;
+ transition: 0s all;
+ -webkit-transition: 0s all;
+ -moz-transition: 0s all;
margin-left: 1px;
}
+
.searchBarIcon:hover {
background: $gray-200;
color: $gray-700 !important;
--
GitLab