Procházet zdrojové kódy

added fade transition for logo icon to hamburger

Torkel Ödegaard před 11 roky
rodič
revize
a28e4de3bd
3 změnil soubory, kde provedl 17 přidání a 11 odebrání
  1. 1 1
      src/css/less/grafana.less
  2. 0 0
      src/css/less/login.less
  3. 16 10
      src/css/less/navbar.less

+ 1 - 1
src/css/less/grafana.less

@@ -1,4 +1,4 @@
-@import "p_pro.less";
+@import "login.less";
 @import "submenu.less";
 @import "graph.less";
 @import "bootstrap-tagsinput.less";

+ 0 - 0
src/css/less/p_pro.less → src/css/less/login.less


+ 16 - 10
src/css/less/navbar.less

@@ -22,29 +22,35 @@
   border-radius: 50%;
   background: black;
   display: block;
+  position: relative;
   float: left;
+  width: 30px;
+  height: 30px;
   padding: 4px;
   margin: 7px 6px 3px 9px;
   .fa {
-    display: none;
+    color: @textColor;
+    width: 30px;
+    height: 30px;
+    left: 10px;
+    top: 8px;
+    font-size: 150%;
+    opacity: 0;
+    position: absolute;
+    transition: opacity .25s ease-in-out;
   }
   img {
     width: 30px;
+    position: absolute;
+    opacity: 1;
+    transition: opacity .25s ease-in-out;
   }
   &:hover {
     .fa {
-      display: block;
-      width: 30px;
-      height: 30px;
-      color: @textColor;
       opacity: .7;
-      position: relative;
-      left: 6px;
-      top: 4px;
-      font-size: 150%;
     }
     img {
-      display: none;
+      opacity: 0;
     }
   }
 }