[Kimchi-devel] [PATCH] [Wok] Minor change in Wok Drop-Downs to fix text alignment with different icons and locales

[sguimaraes943 at gmail.com]

From: Samuel Guimarães <sguimaraes943 at gmail.com>

Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
 ui/css/src/modules/_menu-flat.scss | 10 ++++++++--
 ui/css/wok.css                     | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/css/src/modules/_menu-flat.scss b/ui/css/src/modules/_menu-flat.scss
index ba9016b..e57b93a 100644
--- a/ui/css/src/modules/_menu-flat.scss
+++ b/ui/css/src/modules/_menu-flat.scss
@@ -29,9 +29,10 @@
         font-family: $font-family-bold;
         font-weight: 700;
         font-size: $font-size-btn;
+        text-align: left;
         position: relative;
         height: 40px;
-        padding: 4px 45px 5px 38px;
+        padding: 4px 45px 5px 45px;
         & > i {
             font-size: 22px;
             vertical-align: bottom;
@@ -43,10 +44,15 @@
             top: 0;
             left: 6px;
         }
+        // This rule will allow to use different icons for the drop-down button instead of the default .edit-alt class
+        & > i:first-child {
+            left: 12px;
+            text-align: center;
+        }
         & > i:before {
             line-height: 40px;
         }
-        .edit-alt {
+        span.edit-alt {
             background: transparent url('#{$wok-icon-path}/edit-alt.svg') no-repeat 50% 50%;
             background-size: 100%;
             vertical-align: bottom;
diff --git a/ui/css/wok.css b/ui/css/wok.css
index 7411ffd..0239d42 100644
--- a/ui/css/wok.css
+++ b/ui/css/wok.css
@@ -484,9 +484,10 @@ fieldset[disabled] .btn-login.active {
   font-family: "Open Sans", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 700;
   font-size: 13.5pt;
+  text-align: left;
   position: relative;
   height: 40px;
-  padding: 4px 45px 5px 38px;
+  padding: 4px 45px 5px 45px;
 }
 
 .menu-flat .btn > i {
@@ -501,11 +502,16 @@ fieldset[disabled] .btn-login.active {
   left: 6px;
 }
 
+.menu-flat .btn > i:first-child {
+  left: 12px;
+  text-align: center;
+}
+
 .menu-flat .btn > i:before {
   line-height: 40px;
 }
 
-.menu-flat .btn .edit-alt {
+.menu-flat .btn span.edit-alt {
   background: transparent url("/images/theme-default/edit-alt.svg") no-repeat 50% 50%;
   background-size: 100%;
   vertical-align: bottom;
-- 
2.5.5