Merge pull request #12610 from OmarIthawi/edraak/forum-post-button

Corrected RTL issues new forum post button

lms/static/sass/discussion/_mixins.scss

 // discussion - mixins and extends
 // ====================
 
-@mixin blue-button {
-  @include linear-gradient(top, #6dccf1, #38a8e5);
+@mixin discussion-button() {
   display: block;
-  border: 1px solid #2d81ad;
+  border: 1px solid;
   border-radius: 3px;
-  padding: 0 ($baseline*0.75);
   height: 35px;
-  color: $white;
-  text-shadow: none;
-  font-size: 13px;
   line-height: 35px;
+  font-size: 13px;
+  white-space: nowrap;  // Prevent word-break in Arabic in Google Chrome
+  text-shadow: none;
+  padding: 0 ($baseline*0.75);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+}
+
+@mixin blue-button {
+  @include discussion-button();
+  @include linear-gradient(top, #6dccf1, #38a8e5);
+  border-color: #2d81ad;
+  color: $white;
 
   &:hover, &:focus {
     @include linear-gradient(top, #4fbbe4, #2090d0);
@@ -21,17 +27,10 @@
 }
 
 @mixin white-button {
+  @include discussion-button();
   @include linear-gradient(top, $white, $gray-l5);
-  display: block;
-  border: 1px solid #aaa;
-  border-radius: 3px;
-  padding: 0 ($baseline*0.75);
-  height: 35px;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+  border-color: #aaa;
   color: $dark-gray;
-  text-shadow: none;
-  font-size: 13px;
-  line-height: 35px;
 
   &:hover, &:focus {
     @include linear-gradient(top, $white, $gray-l6);
@@ -39,17 +38,10 @@
 }
 
 @mixin dark-grey-button {
-  display: block;
-  border: 1px solid #222;
-  border-radius: 3px;
-  padding: 0 ($baseline*0.75);
-  height: 35px;
-  background: -webkit-linear-gradient(top, #777, #555);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+  @include discussion-button();
+  @include linear-gradient(top, #777, #555);
+  border-color: #222;
   color: $white;
-  text-shadow: none;
-  font-size: 13px;
-  line-height: 35px;
 
   &:hover, &:focus {
     background: -webkit-linear-gradient(top, #888, #666);