fix dropdown toggle icon position

kakakacool · Jul 12, 2014 · ad2a388 · ad2a388
1 parent 8dc327c
commit ad2a388
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 13 deletions.
diff --git a/css/metro-bootstrap.css b/css/metro-bootstrap.css
@@ -3975,9 +3975,12 @@ a {
 .metro .dropdown-menu.dark .divider:hover {
   background: #555555;
 }
+.metro .dropdown-toggle {
+  padding-right: 20px !important;
+}
 .metro .dropdown-toggle:after {
   position: absolute;
-  margin-left: .45em;
+  margin-left: .25em;
   bottom: 0;
   font-family: metroSysIcons;
   font-size: .7em;
@@ -3986,6 +3989,9 @@ a {
 .metro .dropdown-toggle.no-marker:after {
   content: "";
 }
+.metro .dropdown-toggle.without-icon:after {
+  content: "" !important;
+}
 .metro .contextmenu {
   z-index: 1000;
   position: absolute;
@@ -4054,6 +4060,7 @@ a {
   color: inherit;
   font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
+  position: relative;
 }
 .metro .navigation-bar .navigation-bar-content .element:hover,
 .metro .navbar .navigation-bar-content .element:hover,
@@ -4067,13 +4074,16 @@ a {
 .metro .navbar .navbar-content .element > a.dropdown-toggle {
   color: inherit;
   position: relative;
+  padding-right: 5px !important;
+  margin-right: 5px;
 }
 .metro .navigation-bar .navigation-bar-content .element > a.dropdown-toggle:after,
 .metro .navbar .navigation-bar-content .element > a.dropdown-toggle:after,
 .metro .navigation-bar .navbar-content .element > a.dropdown-toggle:after,
 .metro .navbar .navbar-content .element > a.dropdown-toggle:after {
   position: absolute;
   left: 100%;
+  margin-left: 0;
 }
 .metro .navigation-bar .navigation-bar-content .element > .dropdown-menu,
 .metro .navbar .navigation-bar-content .element > .dropdown-menu,
@@ -4229,7 +4239,7 @@ a {
   position: absolute;
   left: 95%;
   top: 50%;
-  margin-left: -7px;
+  margin-left: -12px;
   margin-top: -5px;
 }
 .metro .navigation-bar .element-menu > li > .dropdown-menu,
@@ -4242,6 +4252,10 @@ a {
   right: 0;
   left: auto;
 }
+.metro .navigation-bar .element-menu > li:hover,
+.metro .navbar .element-menu > li:hover {
+  background-color: #00aafd;
+}
 .metro .navigation-bar .element-menu.drop-up li > .dropdown-menu,
 .metro .navbar .element-menu.drop-up li > .dropdown-menu {
   top: auto;

diff --git a/docs/css/metro-bootstrap.css b/docs/css/metro-bootstrap.css
@@ -3975,9 +3975,12 @@ a {
 .metro .dropdown-menu.dark .divider:hover {
   background: #555555;
 }
+.metro .dropdown-toggle {
+  padding-right: 20px !important;
+}
 .metro .dropdown-toggle:after {
   position: absolute;
-  margin-left: .45em;
+  margin-left: .25em;
   bottom: 0;
   font-family: metroSysIcons;
   font-size: .7em;
@@ -3986,6 +3989,9 @@ a {
 .metro .dropdown-toggle.no-marker:after {
   content: "";
 }
+.metro .dropdown-toggle.without-icon:after {
+  content: "" !important;
+}
 .metro .contextmenu {
   z-index: 1000;
   position: absolute;
@@ -4054,6 +4060,7 @@ a {
   color: inherit;
   font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
+  position: relative;
 }
 .metro .navigation-bar .navigation-bar-content .element:hover,
 .metro .navbar .navigation-bar-content .element:hover,
@@ -4067,13 +4074,16 @@ a {
 .metro .navbar .navbar-content .element > a.dropdown-toggle {
   color: inherit;
   position: relative;
+  padding-right: 5px !important;
+  margin-right: 5px;
 }
 .metro .navigation-bar .navigation-bar-content .element > a.dropdown-toggle:after,
 .metro .navbar .navigation-bar-content .element > a.dropdown-toggle:after,
 .metro .navigation-bar .navbar-content .element > a.dropdown-toggle:after,
 .metro .navbar .navbar-content .element > a.dropdown-toggle:after {
   position: absolute;
   left: 100%;
+  margin-left: 0;
 }
 .metro .navigation-bar .navigation-bar-content .element > .dropdown-menu,
 .metro .navbar .navigation-bar-content .element > .dropdown-menu,
@@ -4229,7 +4239,7 @@ a {
   position: absolute;
   left: 95%;
   top: 50%;
-  margin-left: -7px;
+  margin-left: -12px;
   margin-top: -5px;
 }
 .metro .navigation-bar .element-menu > li > .dropdown-menu,
@@ -4242,6 +4252,10 @@ a {
   right: 0;
   left: auto;
 }
+.metro .navigation-bar .element-menu > li:hover,
+.metro .navbar .element-menu > li:hover {
+  background-color: #00aafd;
+}
 .metro .navigation-bar .element-menu.drop-up li > .dropdown-menu,
 .metro .navbar .element-menu.drop-up li > .dropdown-menu {
   top: auto;

diff --git a/docs/navbar.html b/docs/navbar.html
@@ -102,9 +102,7 @@ <h1>
                         </div>
 
                         <div class="element place-right">
-                            <a class="dropdown-toggle" href="#">
-                                <span class="icon-cog"></span>
-                            </a>
+                            <a class="dropdown-toggle" href="#"><span class="icon-cog"></span></a>
                             <ul class="dropdown-menu place-right" data-role="dropdown">
                                 <li><a href="#">Products</a></li>
                                 <li><a href="#">Download</a></li>
@@ -543,7 +541,7 @@ <h3 id="drop-up-menu">Drop-up menu</h3>
                     <a class="pull-menu" href="#"></a>
                     <ul class="element-menu drop-up">
                         <li>
-                            <a class="dropdown-toggle" href="#">Base CSS</a>
+                            <a class="dropdown-toggle without-icon" href="#">Base CSS</a>
                             <ul class="dropdown-menu " data-role="dropdown">
                                 <li><a href="requirements.html">Requirements</a></li>
                                 <li>
@@ -567,7 +565,7 @@ <h3 id="drop-up-menu">Drop-up menu</h3>
                             </ul>
                         </li>
                         <li>
-                            <a class="dropdown-toggle"  href="#">Community</a>
+                            <a class="dropdown-toggle without-icon"  href="#">Community</a>
                             <ul class="dropdown-menu" data-role="dropdown">
                                 <li class="disabled"><a href="http://blog.metroui.net">Blog</a></li>
                                 <li class="disabled"><a href="http://forum.metroui.net">Community Forum</a></li>

diff --git a/less/menus.less b/less/menus.less
@@ -429,9 +429,10 @@
 }
 
 .dropdown-toggle {
+    padding-right: 20px !important;
     &:after {
         position: absolute;
-        margin-left: .45em;
+        margin-left: .25em;
         bottom: 0;
         font-family: @sysIconFontName;
         font-size: .7em;
@@ -443,6 +444,12 @@
             content: "";
         }
     }
+
+    &.without-icon {
+        &:after {
+            content: "" !important;
+        }
+    }
 }
 
 .contextmenu {

diff --git a/less/navigation-bar.less b/less/navigation-bar.less
@@ -19,6 +19,7 @@
             height: 45px;
 
             &.place-right {
+
                 float: right;
             }
         }
@@ -29,7 +30,9 @@
             color: inherit;
             font-family: @segoeLightFontFamily;
             font-size: 14px;
+            position: relative;
             //transition: background .3s ease;
+            //.border;
 
             &:hover {
                 background-color: saturate(@cyan, 30%);
@@ -40,10 +43,14 @@
         .element > a.dropdown-toggle {
             color: inherit;
             position: relative;
+            padding-right: 5px !important;
+            margin-right: 5px;
+
             &:after {
                 position: absolute;
                 left: 100%;
-                //content: "";
+
+                margin-left: 0;
             }
         }
 
@@ -185,7 +192,7 @@
                         position: absolute;
                         left: 95%;
                         top: 50%;
-                        margin-left: -7px;
+                        margin-left: -12px;
                         margin-top: -5px;
                     }
                 }
@@ -207,6 +214,10 @@
                     //border: 0 !important;
                 }
             }
+
+            &:hover {
+                background-color: saturate(@cyan, 30%);
+            }
         }
 
         &.responsive {}

diff --git a/min/metro-bootstrap.min.css b/min/metro-bootstrap.min.css