Fix Bug 50031

apps/common/main/resources/less/buttons.less

@@ -974,6 +974,57 @@
     }
 }
 
+.cnt-lang {
+    color: @text-normal-ie;
+    color: @text-normal;
+    height: 20px;
+    line-height: 18px;
+    border: 0;
+    .border-radius(1px);
+    vertical-align: middle;
+
+    .dropdown-toggle {
+        margin: 0 6px 0 4px;
+    }
+
+    &:hover:not(.disabled) {
+        background-color: @highlight-button-hover-ie;
+        background-color: @highlight-button-hover;
+    }
+
+    &[disabled], &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+
+    .caret {
+        width: 4px;
+        height: 4px;
+        border: solid 1px @icon-normal-ie;
+        border: solid 1px @icon-normal;
+        border-bottom: none;
+        border-right: none;
+        background-image: none;
+
+        transition: transform 0.2s ease;
+        transform: rotate(-135deg) translate(1px,1px);
+    }
+
+    &.open:not(.disabled){
+        &, .status-label {
+            color: @text-normal-pressed-ie;
+            color: @text-normal-pressed;
+        }
+
+        background-color: @highlight-button-pressed-ie;
+        background-color: @highlight-button-pressed;
+
+        .caret {
+            transform: rotate(45deg);
+            border-color: @icon-normal-pressed-ie;
+            border-color: @icon-normal-pressed;
+        }
+    }
+}
 // Dialog buttons
 // ------------------------
 

apps/documenteditor/main/app/template/StatusBar.template

@@ -13,9 +13,9 @@
     <div class="status-group" style="">
         <div class="separator short el-edit"></div>
         <div class="cnt-lang el-edit">
-            <div class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 6px;">
+            <div class="dropdown-toggle" data-toggle="dropdown">
                 <label id="status-label-lang" class="status-label">English (United States)</label>
-                <div class="caret up img-commonctrl"></div>
+                <div class="caret"></div>
             </div>
         </div>
         <span id="btn-doc-lang" class="el-edit"></span>

apps/documenteditor/main/resources/less/statusbar.less

@@ -69,18 +69,8 @@
     .cnt-lang {
         display: inline-block;
         cursor: pointer;
-        color: @text-normal-ie;
-        color: @text-normal;
         margin-left: 6px;
 
-        .caret.up {
-            background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;
-
-            border: none;
-            width: 7px;
-            height: 7px;
-        }
-
         label {
             cursor: pointer;
         }
@@ -89,7 +79,6 @@
             cursor: default;
             label {
                 cursor: default;
-                opacity: @component-disabled-opacity;
             }
         }
     }

apps/presentationeditor/main/app/template/StatusBar.template

@@ -28,9 +28,9 @@
     </div>
     <div class="status-group" style="">
         <div class="cnt-lang el-edit">
-            <div class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 6px;">
+            <div class="dropdown-toggle" data-toggle="dropdown">
                 <label id="status-label-lang" class="status-label">English (United States)</label>
-                <div class="caret up img-commonctrl"></div>
+                <div class="caret"></div>
             </div>
         </div>
         <span id="btn-doc-lang" class="el-edit"></span>

apps/presentationeditor/main/resources/less/statusbar.less

@@ -70,17 +70,8 @@
     .cnt-lang {
         display: inline-block;
         cursor: pointer;
-        color: #000;
         margin-left: 6px;
 
-        .caret.up {
-            background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;
-
-            border: none;
-            width: 7px;
-            height: 7px;
-        }
-
         label {
             cursor: pointer;
         }
@@ -89,7 +80,6 @@
             cursor: default;
             label {
                 cursor: default;
-                opacity: 0.4;
             }
         }
     }