some mobile optimization

src/components/topbar.vue

@@ -74,11 +74,11 @@ export default {
 			}
 
 			img {
-				width:32px;
-				height:auto;
-				margin:0 auto;
-				padding-top:4px;
-				display:block;
+				display: block;
+                width: 30px;
+                height: auto;
+                margin: 0 auto;
+                padding-top: 4px;
 			}
 		}
 
@@ -165,10 +165,11 @@ export default {
                 list-style-type: none;
 
                 li{
+                    .clearfix();
                     .icon {
-                        float:left;
+                        float: left;
                         width: 45px;
-                        line-height:45px;
+                        line-height: 45px;
                         text-align: center;
                         font-size: 20px;
                     }
@@ -178,16 +179,21 @@ export default {
                         line-height: 45px;
                         padding: 0 10px;
                     }
-                    a {color:#FFF; display:block; height:45px;}
-                    &:after {clear:both; content:""; display:block;}
-                    &:hover {background:rgba(40,183,141,0.3);}
+                    a {
+                        display: block;
+                        color: white;
+                        height: 45px;
+                    }
+                    &:hover {
+                        background: darken(@cms_brand_primary, 5%);
+                    }
                 }
             }
         }
 
         &.open {
             .user_menu{display: block;}
-            &>.trigger{background: rgba(40, 183, 141, 0.5);}
+            &>.trigger{background: fade(@cms_brand_primary, 50%);}
             .trigger_btn .icon:before{transform: rotate(180deg);}
         }
     }