Add visual effect for fav icons and tooltip for category icons #4177

CHANGELOG.md

@@ -13,12 +13,14 @@ This project <em>does not yet</em> adheres to [Semantic Versioning](https://semv
 - Grab cursor to make sorting feature visible [#4153]
 - API endpoint for image matrix
 - Added order of depictions comming from the image matrix
+- Hub tasks: Add visual effect for fav icons and tooltip for categories [#4177]
 
 ### Fixed
 
 - CSD: change of namespace not updating [#4147]
 - TaxonWorks bibliography style for book chapter.
 
+[#4177]: https://github.com/SpeciesFileGroup/taxonworks/issues/4177
 [#4135]: https://github.com/SpeciesFileGroup/taxonworks/issues/4135
 [#4147]: https://github.com/SpeciesFileGroup/taxonworks/issues/4147
 [#4153]: https://github.com/SpeciesFileGroup/taxonworks/issues/4153

app/assets/stylesheets/base/animations.scss

@@ -18,7 +18,7 @@
 
 @keyframes alert-show {
   0% {
-    opacity: 0.50;
+    opacity: 0.5;
     transform: translateY(100%) translateX(-50%);
   }
   10% {
@@ -28,7 +28,7 @@
   76% {
     transform: scale(1) translateX(-50%);
   }
-  77%{
+  77% {
     transform: scale(1.5) translateX(-33.5%);
   }
   80% {
@@ -40,10 +40,10 @@
   }
   95% {
     transform: translateY(0%) translateX(-50%);
-    opacity: 1; 
+    opacity: 1;
   }
   100% {
-    opacity: 0.50;
+    opacity: 0.5;
     transform: translateY(100%) translateX(-50%);
   }
 }
@@ -57,32 +57,73 @@
   }
 }
 
-
 @keyframes pulse-blue {
   0% {
     transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7)
+    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(33, 150, 243, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
+  }
+}
+
+@keyframes pulse-red {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
+  }
+}
+
+@keyframes pulse-green {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(156, 204, 101, 0.9);
   }
   70% {
     transform: scale(1);
-    box-shadow: 0 0 0 10px rgba(33, 150, 243, 0)
+    box-shadow: 0 0 0 10px rgba(156, 204, 101, 0);
   }
   100% {
     transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0)
+    box-shadow: 0 0 0 0 rgba(156, 204, 101, 0);
   }
 }
 
-.pulse-blue {
-  box-shadow: 0 0 0 0 #2196F3;
+.pulse-blue,
+.pulse-primary {
+  box-shadow: 0 0 0 0 var(--primary);
   animation: pulse-blue 2s infinite;
 }
 
+.pulse-destroy {
+  box-shadow: 0 0 0 0 var(--destroy);
+  animation: pulse-red 2s infinite;
+}
+
+.pulse-update,
+.pulse-create {
+  box-shadow: 0 0 0 0 var(--create);
+  animation: pulse-green 2s infinite;
+}
+
 .bounce-enter-active {
-  animation: bounce-in .5s;
+  animation: bounce-in 0.5s;
 }
 .bounce-leave-active {
-  animation: bounce-in .5s reverse;
+  animation: bounce-in 0.5s reverse;
 }
 @keyframes bounce-in {
   0% {

app/assets/stylesheets/base/navigation.scss

@@ -1,4 +1,5 @@
 .favourite_link {
+  display: block;
   background-image: image-url('empty_star.svg');
   background-size: 16px;
   background-position: left, center;
@@ -10,6 +11,7 @@
 }
 
 .unfavorite_link {
+  display: block;
   font-size: 0px;
   padding: 16px;
   padding-right: 0px;
@@ -21,10 +23,10 @@
 }
 
 // see navigation_emphasis in palette
-a, .link {
+a,
+.link {
   text-decoration: none;
-  transition: background-color 0.4s ease,
-  color 0.4s ease;
+  transition: background-color 0.4s ease, color 0.4s ease;
   color: $color-secondary-2-4;
 
   &:hover {
@@ -42,7 +44,7 @@ a, .link {
   font-weight: 300;
   position: relative;
   box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
-  background-color: #FFF;
+  background-color: #fff;
   height: 45px;
   padding-right: $standard_margin;
   .hub-project {
@@ -114,9 +116,8 @@ a, .link {
     border-radius: 100%;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 
-    transition: background-size 0.3s ease,
-    background-color 0.3s ease,
-    opacity 0.5s ease,
+    transition: background-size 0.3s ease, background-color 0.3s ease,
+      opacity 0.5s ease;
   }
 
   .hub_project_name {
@@ -129,19 +130,16 @@ a, .link {
   .hub-project:hover {
     .hub_link {
       opacity: 1;
-      transition: background-size 0.3s ease,
-      background-color 0.3s ease,
-      opacity 0.5s ease;
+      transition: background-size 0.3s ease, background-color 0.3s ease,
+        opacity 0.5s ease;
       background-size: 40px;
       color: $default_text;
     }
   }
 
   .active-section {
     font-weight: bold;
-
   }
-
 }
 
 .context-menu {
@@ -150,30 +148,29 @@ a, .link {
   align-items: center;
   margin: 0px;
 
-  &> li:last-child:after {
+  & > li:last-child:after {
     content: none;
   }
 
-  &> li:last-child {
+  & > li:last-child {
     border-right: none;
     padding-right: 0px;
     padding-left: $standard_padding;
   }
 
-  &> li:first-child {
+  & > li:first-child {
     padding-left: 0px;
   }
 
-
-  &> li {
+  & > li {
     justify-content: center;
     //text-align: center;
     padding-left: $standard_padding;
     padding-right: $standard_padding;
     border-right: 1px solid $navigation_border;
   }
 
-  &> li a {
+  & > li a {
     font-size: $font_small;
     text-decoration: none;
   }
@@ -201,13 +198,15 @@ a, .link {
 }
 
 @media all and (max-width: 800px) {
-  .horizontal_navbar, .hub-navbar {
+  .horizontal_navbar,
+  .hub-navbar {
     justify-content: space-around;
   }
 }
 
 @media all and (max-width: 600px) {
-  .horizontal_navbar, .hub-navbar {
+  .horizontal_navbar,
+  .hub-navbar {
     -webkit-flex-flow: column wrap;
     flex-flow: column wrap;
     padding: 0;
@@ -292,4 +291,4 @@ a, .link {
 
 .overflow-y-scroll {
   overflow-y: scroll;
-}
+}