diff --git a/themes/bootstrap/scss/_bootstrap-rtl.scss b/themes/bootstrap/scss/_bootstrap-rtl.scss
deleted file mode 100644
index 4e575b784b..0000000000
--- a/themes/bootstrap/scss/_bootstrap-rtl.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@if $direction == rtl {
-
-  //
-  // scss/_forms.scss
-  //
-
-  .form-check {
-    padding-left: inherit;
-    padding-right: $form-check-padding-start;
-  }
-
-  .form-check-input {
-    margin-left: inherit;
-    margin-right: $form-check-padding-start * -1;
-  }
-
-  //
-  // scss/utilities/_text.scss
-  //
-
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-      .text#{$infix}-left {
-        text-align: right !important;
-      }
-      .text#{$infix}-right {
-        text-align: left !important;
-      }
-    }
-  }
-
-  //
-  // scss/utilities/_spacing.scss
-  //
-
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-      @each $prop, $abbrev in (margin: m, padding: p) {
-        @each $size, $length in $spacers {
-          .#{$abbrev}r#{$infix}-#{$size} {
-            #{$prop}-left: $length !important;
-          }
-          .#{$abbrev}l#{$infix}-#{$size} {
-            #{$prop}-right: $length !important;
-          }
-        }
-      }
-
-      // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
-      @each $size, $length in $spacers {
-        @if $size != 0 {
-          .mr#{$infix}-n#{$size} {
-            margin-left: -$length !important;
-          }
-          .ml#{$infix}-n#{$size} {
-            margin-right: -$length !important;
-          }
-        }
-      }
-
-      // Some special margin utils
-      .mr#{$infix}-auto {
-        margin-left: auto !important;
-      }
-      .ml#{$infix}-auto {
-        margin-right: auto !important;
-      }
-    }
-  }
-}
diff --git a/themes/bootstrap/scss/_codemirror.scss b/themes/bootstrap/scss/_codemirror.scss
index 5326b6b7b2..8951fa07fb 100644
--- a/themes/bootstrap/scss/_codemirror.scss
+++ b/themes/bootstrap/scss/_codemirror.scss
@@ -77,9 +77,9 @@ span {
 
 .autocomplete-column-hint {
   display: inline-block;
-  float: $right;
+  float: right;
   color: #666;
-  margin-#{$left}: 1em;
+  margin-left: 1em;
 }
 
 .CodeMirror-hints {
diff --git a/themes/bootstrap/scss/_common.scss b/themes/bootstrap/scss/_common.scss
index 8000652450..dac6d11445 100644
--- a/themes/bootstrap/scss/_common.scss
+++ b/themes/bootstrap/scss/_common.scss
@@ -11,7 +11,7 @@ h2 {
   font-weight: normal;
   text-shadow: 0 1px 0 #fff;
   padding: 10px 0 10px;
-  padding-#{$left}: 3px;
+  padding-left: 3px;
   color: #777;
 
   a img {
@@ -270,18 +270,10 @@ fieldset {
   border: #aaa solid 1px;
   padding: 0.5em;
   background: #eee;
-
-  @if $direction == rtl {
-    text-shadow: -1px 1px 2px #fff inset;
-    -moz-box-shadow: -1px 1px 2px #fff inset;
-    -webkit-box-shadow: -1px 1px 2px #fff inset;
-    box-shadow: -1px 1px 2px #fff inset;
-  } @else {
-    text-shadow: 1px 1px 2px #fff inset;
-    -moz-box-shadow: 1px 1px 2px #fff inset;
-    -webkit-box-shadow: 1px 1px 2px #fff inset;
-    box-shadow: 1px 1px 2px #fff inset;
-  }
+  text-shadow: 1px 1px 2px #fff inset;
+  -moz-box-shadow: 1px 1px 2px #fff inset;
+  -webkit-box-shadow: 1px 1px 2px #fff inset;
+  box-shadow: 1px 1px 2px #fff inset;
 }
 
 fieldset {
@@ -337,11 +329,11 @@ button {
 }
 
 .pma-table thead th {
-  border-#{$right}: 1px solid #fff;
+  border-right: 1px solid #fff;
 }
 
 .pma-table th {
-  text-align: $left;
+  text-align: left;
 }
 
 img,
@@ -377,12 +369,12 @@ select:not(.form-control) {
 }
 
 .floatleft {
-  float: $left;
-  margin-#{$right}: 1em;
+  float: left;
+  margin-right: 1em;
 }
 
 .floatright {
-  float: $right;
+  float: right;
 }
 
 .displayblock {
@@ -404,13 +396,13 @@ select:not(.form-control) {
 
 .pma-table th.left,
 .pma-table td.left {
-  text-align: $left;
+  text-align: left;
 }
 
 .pma-table th.right,
 .pma-table td.right {
-  text-align: $right;
-  padding-#{$right}: 1em;
+  text-align: right;
+  padding-right: 1em;
 }
 
 .pma-table tr.vtop {
@@ -469,7 +461,7 @@ div.tools {
   margin-bottom: 0.5em;
   // avoid a thick line since this should be used under another fieldset
   border-top: 0;
-  text-align: $right;
+  text-align: right;
   float: none;
   clear: both;
   -webkit-border-radius: 0 0 4px 4px;
@@ -482,7 +474,7 @@ fieldset.tblFooters {
   margin-bottom: 0.5em;
   // avoid a thick line since this should be used under another fieldset
   border-top: 0;
-  text-align: $right;
+  text-align: right;
   float: none;
   clear: both;
   -webkit-border-radius: 0 0 4px 4px;
@@ -499,8 +491,8 @@ div.null_div {
 
 fieldset {
   .formelement {
-    float: $left;
-    margin-#{$right}: 0.5em;
+    float: left;
+    margin-right: 0.5em;
     // IE
     white-space: nowrap;
   }
@@ -538,10 +530,10 @@ button.mult_submit {
 }
 
 .pma-table tr {
-  text-align: $left;
+  text-align: left;
 
   th {
-    text-align: $left;
+    text-align: left;
   }
 }
 
@@ -592,13 +584,14 @@ button.mult_submit {
   border-width: 0 1px 1px 1px;
 }
 
-@if $direction == ltr {
+/* rtl:begin:remove */
+.before-condition {
   // for first th which must have right border set (ltr only)
-  .before-condition {
-    border-#{$right}: 1px solid $browse-marker-color;
-  }
+  border-right: 1px solid $browse-marker-color;
 }
 
+/* rtl:end:remove */
+
 /**
  * cells with the value NULL
  */
@@ -610,7 +603,7 @@ button.mult_submit {
 .pma-table {
   .valueHeader,
   .value {
-    text-align: $right;
+    text-align: right;
     white-space: normal;
   }
 
@@ -674,12 +667,12 @@ td .icon {
 }
 
 .selectallarrow {
-  margin-#{$right}: 0.3em;
-  margin-#{$left}: 0.6em;
+  margin-right: 0.3em;
+  margin-left: 0.6em;
 }
 
 .with-selected {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 // message boxes: error, confirmation
@@ -814,18 +807,18 @@ body#loginform {
   }
 
   div.container {
-    text-align: $left;
+    text-align: left;
     width: 30em;
     margin: 0 auto;
   }
 }
 
 #login_form {
-  text-align: $left;
+  text-align: left;
 }
 
 #login_form fieldset.tblFooters {
-  text-align: #{$right};
+  text-align: right;
 }
 
 div.container.modal_form {
@@ -839,7 +832,7 @@ div.container.modal_form {
 div#modalOverlay {
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   height: 100%;
   width: 100%;
   background: #fff;
@@ -945,7 +938,7 @@ div#dataDisplay {
   input,
   select {
     margin: 0;
-    margin-#{$right}: 0.5em;
+    margin-right: 0.5em;
   }
 
   th {
@@ -989,9 +982,9 @@ form.clock {
 
 // table stats
 div#tablestatistics table {
-  float: $left;
+  float: left;
   margin-bottom: 0.5em;
-  margin-#{$right}: 1.5em;
+  margin-right: 1.5em;
   margin-top: 0.5em;
   min-width: 16em;
 }
@@ -1000,14 +993,14 @@ div#tablestatistics table {
 
 // Heading
 #topmenucontainer {
-  padding-#{$right}: 1em;
+  padding-right: 1em;
   width: 100%;
 }
 
 #page_nav_icons {
   position: fixed;
   top: 0;
-  #{$right}: 0;
+  right: 0;
   z-index: 99;
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
 }
@@ -1053,27 +1046,27 @@ div#tablestatistics table {
   }
 
   label {
-    float: $left;
+    float: left;
     display: block;
     width: 10em;
     max-width: 100%;
-    text-align: $right;
-    padding-#{$right}: 0.5em;
+    text-align: right;
+    padding-right: 0.5em;
     margin-bottom: 0;
   }
 
   input {
     width: 12em;
-    clear: $right;
+    clear: right;
     max-width: 100%;
   }
 
   span.options {
-    float: $left;
+    float: left;
     display: block;
     width: 12em;
     max-width: 100%;
-    padding-#{$right}: 0.5em;
+    padding-right: 0.5em;
 
     #select_pred_username,
     #select_pred_hostname,
@@ -1089,7 +1082,7 @@ div#tablestatistics table {
 }
 
 #fieldset_user_priv div.item {
-  float: $left;
+  float: left;
   width: 9em;
   max-width: 100%;
 
@@ -1108,11 +1101,11 @@ div#tablestatistics table {
 
 #fieldset_user_global_rights fieldset,
 #fieldset_user_group_rights fieldset {
-  float: $left;
+  float: left;
 }
 
 #fieldset_user_global_rights > legend input {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 // end user privileges
 
@@ -1130,7 +1123,7 @@ h3#serverstatusqueries span {
 }
 
 .buttonlinks {
-  float: $right;
+  float: right;
   white-space: nowrap;
 }
 
@@ -1144,14 +1137,14 @@ div#serverStatusTabs {
 }
 
 caption a.top {
-  float: $right;
+  float: right;
 }
 
 div#serverstatusquerieschart {
-  float: $left;
+  float: left;
   width: 500px;
   height: 350px;
-  margin-#{$right}: 50px;
+  margin-right: 50px;
 }
 
 div {
@@ -1178,7 +1171,7 @@ div {
 div#chartVariableSettings {
   border: 1px solid #ddd;
   background-color: #e6e6e6;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 }
 
 table#chartGrid {
@@ -1194,12 +1187,12 @@ table#chartGrid {
 }
 
 div.tabLinks {
-  float: $left;
+  float: left;
   padding: 5px 0;
 
   a,
   label {
-    margin-#{$right}: 7px;
+    margin-right: 7px;
   }
 
   .icon {
@@ -1215,16 +1208,9 @@ div.tabLinks {
   padding: 3px;
   background-color: #fff;
   z-index: 2;
-
-  @if $direction == rtl {
-    -moz-box-shadow: -2px 2px 3px #666;
-    -webkit-box-shadow: -2px 2px 3px #666;
-    box-shadow: -2px 2px 3px #666;
-  } @else {
-    -moz-box-shadow: 2px 2px 3px #666;
-    -webkit-box-shadow: 2px 2px 3px #666;
-    box-shadow: 2px 2px 3px #666;
-  }
+  -moz-box-shadow: 2px 2px 3px #666;
+  -webkit-box-shadow: 2px 2px 3px #666;
+  box-shadow: 2px 2px 3px #666;
 }
 
 div {
@@ -1257,13 +1243,13 @@ div {
     table.queryNums {
       display: none;
       border: 0;
-      text-align: $left;
+      text-align: left;
     }
   }
 }
 
 .smallIndent {
-  padding-#{$left}: 7px;
+  padding-left: 7px;
 }
 
 // end serverstatus
@@ -1273,12 +1259,12 @@ div {
 div#profilingchart {
   width: 850px;
   height: 370px;
-  float: $left;
+  float: left;
 }
 
 #profilingchart .jqplot-highlighter-tooltip {
   top: auto !important;
-  #{$left}: 11px;
+  left: 11px;
   bottom: 24px;
 }
 
@@ -1295,8 +1281,8 @@ div#profilingchart {
 }
 
 .chartOption {
-  float: $left;
-  margin-#{$right}: 40px;
+  float: left;
+  margin-right: 40px;
 }
 
 // end table charting
@@ -1333,7 +1319,7 @@ a.button {
   font-weight: bold;
   text-shadow: 0 1px 0 #fff;
   margin-bottom: 7px;
-  margin-#{$left}: 7px;
+  margin-left: 7px;
   border: 1px solid #aaa;
   padding: 7px;
   color: #111 !important;
@@ -1374,7 +1360,7 @@ textarea {
 
 #mysqlmaininformation,
 #pmamaininformation {
-  float: $left;
+  float: left;
   width: 49%;
 }
 
@@ -1405,7 +1391,7 @@ textarea {
 
 li.no_bullets {
   list-style-type: none !important;
-  margin-#{$left}: -25px !important; //align with other list items which have bullets
+  margin-left: -25px !important; //align with other list items which have bullets
 }
 
 // end iconic view for ul items
@@ -1430,7 +1416,7 @@ li.no_bullets {
 }
 
 #fieldset_select_fields {
-  float: $left;
+  float: left;
 }
 
 #selflink {
@@ -1439,19 +1425,19 @@ li.no_bullets {
   margin-top: 1em;
   margin-bottom: 1em;
   width: 98%;
-  margin-#{$left}: 1%;
-  text-align: $right;
+  margin-left: 1%;
+  text-align: right;
   border-top: 0.1em solid silver;
 }
 
 #qbe_div_table_list,
 #qbe_div_sql_query {
-  float: $left;
+  float: left;
 }
 
 label.desc {
   width: 30em;
-  float: $left;
+  float: left;
 
   sup {
     position: absolute;
@@ -1461,7 +1447,7 @@ label.desc {
 code {
   &.php {
     display: block;
-    padding-#{$left}: 1em;
+    padding-left: 1em;
     margin-top: 0;
     margin-bottom: 0;
     max-height: 10em;
@@ -1493,7 +1479,7 @@ div.sqlvalidate {
 .result_query {
   div.sqlOuter {
     background: $bg-one;
-    text-align: $left;
+    text-align: left;
   }
 }
 
@@ -1537,7 +1523,7 @@ div {
     div.percentage {
       position: absolute;
       top: 0;
-      #{$left}: 0;
+      left: 0;
       width: 202px;
     }
   }
@@ -1553,7 +1539,7 @@ div {
 
     div.percentage {
       top: -1px;
-      #{$left}: -1px;
+      left: -1px;
     }
   }
 
@@ -1567,7 +1553,7 @@ table {
   &#serverconnection_trg_remote,
   &#serverconnection_src_local,
   &#serverconnection_trg_local {
-    float: $left;
+    float: left;
   }
 }
 
@@ -1596,9 +1582,9 @@ select.invalid_value,
   top: 0;
   position: fixed;
   margin-top: 200px;
-  margin-#{$right}: auto;
+  margin-right: auto;
   margin-bottom: 0;
-  margin-#{$left}: auto;
+  margin-left: auto;
   // Keep a little space on the sides of the text
   padding: 5px;
   width: 350px;
@@ -1606,8 +1592,8 @@ select.invalid_value,
   z-index: 1100;
   text-align: center;
   display: inline;
-  #{$left}: 0;
-  #{$right}: 0;
+  left: 0;
+  right: 0;
   background-image: url("../img/ajax_clock_small.gif");
   background-repeat: no-repeat;
   background-position: 2%;
@@ -1698,17 +1684,17 @@ select.invalid_value,
 #ldi_options label.desc,
 #latex_options label.desc,
 #output label.desc {
-  float: $left;
+  float: left;
   width: 15em;
 }
 
 .exportoptions,
 .importoptions {
   margin: 20px 30px 30px;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 
   #buttonGo {
-    float: $right;
+    float: right;
   }
 }
 
@@ -1719,7 +1705,7 @@ select.invalid_value,
 
   h3 {
     margin: 10px 0 0;
-    margin-#{$left}: 10px;
+    margin-left: 10px;
     border: 0;
   }
 }
@@ -1740,7 +1726,7 @@ select {
 
 .export_sub_options {
   margin: 20px 0 0;
-  margin-#{$left}: 30px;
+  margin-left: 30px;
 
   h4 {
     border-bottom: 1px #999 solid;
@@ -1757,7 +1743,7 @@ select {
 }
 
 #export_refresh_form {
-  margin-#{$left}: 20px;
+  margin-left: 20px;
 }
 
 #export_back_button {
@@ -1795,7 +1781,7 @@ input#input_import_file {
   width: 100%;
   height: 100%;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   background: #000;
   z-index: 1000;
   overflow: hidden;
@@ -1810,9 +1796,9 @@ input#input_import_file {
   list-style: none;
 
   li {
-    float: $left;
+    float: left;
     // same as padding of "table td"
-    margin-#{$right}: 0.3em;
+    margin-right: 0.3em;
   }
 
   .submenu li {
@@ -1831,12 +1817,12 @@ input#input_import_file {
 }
 
 #structure-action-links a {
-  margin-#{$right}: 1em;
+  margin-right: 1em;
 }
 
 #addColumns input[type=radio] {
   margin: 3px 0 0;
-  margin-#{$left}: 1em;
+  margin-left: 1em;
 }
 
 /**
@@ -1859,7 +1845,7 @@ input#input_import_file {
     }
 
     .label {
-      float: $left;
+      float: left;
       min-width: 12em;
     }
   }
@@ -1867,14 +1853,14 @@ input#input_import_file {
   .slider {
     width: 10em;
     margin: 0.6em;
-    float: $left;
+    float: left;
   }
 
   .add_fields {
-    float: $left;
+    float: left;
 
     input {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
   }
 
@@ -1892,7 +1878,7 @@ table#index_columns {
 
   select {
     width: 85%;
-    float: $left;
+    float: left;
   }
 }
 
@@ -1928,7 +1914,7 @@ table#index_columns {
     font-weight: bold;
 
     li {
-      float: $left;
+      float: left;
       margin-bottom: -1px;
 
       a {
@@ -1993,7 +1979,7 @@ table#index_columns {
     // field error list
     .inline_errors {
       margin: 0.3em 0.3em 0.3em;
-      margin-#{$left}: 0;
+      margin-left: 0;
       padding: 0;
       list-style: none;
       color: #9a0000;
@@ -2001,11 +1987,11 @@ table#index_columns {
     }
 
     .doc {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
 
     .disabled-notice {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
       font-size: 80%;
       text-transform: uppercase;
       color: #e00;
@@ -2014,13 +2000,13 @@ table#index_columns {
 
     th {
       padding: 0.3em 0.3em 0.3em;
-      padding-#{$left}: 0.5em;
-      text-align: $left;
+      padding-left: 0.5em;
+      text-align: left;
       vertical-align: top;
       background: transparent;
       filter: none;
       border-top: 1px $bg-two solid;
-      border-#{$right}: none;
+      border-right: none;
 
       small {
         display: block;
@@ -2036,7 +2022,7 @@ table#index_columns {
       padding-bottom: 0.3em;
       vertical-align: top;
       border-top: 1px $bg-two solid;
-      border-#{$right}: none;
+      border-right: none;
     }
   }
 
@@ -2115,7 +2101,7 @@ table#index_columns {
 
   // error list
   dd {
-    margin-#{$left}: 0.5em;
+    margin-left: 0.5em;
 
     &::before {
       content: "\25B8  ";
@@ -2136,16 +2122,16 @@ fieldset {
 
   .group-field-1 th,
   .group-header-2 th {
-    padding-#{$left}: 1.5em;
+    padding-left: 1.5em;
   }
 
   .group-field-2 th,
   .group-header-3 th {
-    padding-#{$left}: 3em;
+    padding-left: 3em;
   }
 
   .group-field-3 th {
-    padding-#{$left}: 4.5em;
+    padding-left: 4.5em;
   }
 
   .disabled-field {
@@ -2171,12 +2157,12 @@ fieldset {
 }
 
 .prefsmanage_opts {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 #prefs_autoload {
   margin-bottom: 0.5em;
-  margin-#{$left}: 0.5em;
+  margin-left: 0.5em;
 }
 
 input#auto_increment_opt {
@@ -2186,7 +2172,7 @@ input#auto_increment_opt {
 #placeholder {
   position: relative;
   border: 1px solid #aaa;
-  float: $right;
+  float: right;
   overflow: hidden;
   width: 450px;
   height: 300px;
@@ -2205,7 +2191,7 @@ input#auto_increment_opt {
 }
 
 .wrapper {
-  float: $left;
+  float: left;
   margin-bottom: 1.5em;
 }
 
@@ -2217,8 +2203,8 @@ input#auto_increment_opt {
   line-height: 1.4em;
   height: 1.55em;
   overflow: hidden;
-  border-#{$right}: 0.1em solid #888;
-  border-#{$left}: 0.1em solid #888;
+  border-right: 0.1em solid #888;
+  border-left: 0.1em solid #888;
   -webkit-border-radius: 0.3em;
   -moz-border-radius: 0.3em;
   border-radius: 0.3em;
@@ -2253,20 +2239,20 @@ input#auto_increment_opt {
 .doubleFieldset {
   fieldset {
     width: 48%;
-    float: $left;
+    float: left;
     padding: 0;
 
     &.left {
-      margin-#{$right}: 1%;
+      margin-right: 1%;
     }
 
     &.right {
-      margin-#{$left}: 1%;
+      margin-left: 1%;
     }
   }
 
   legend {
-    margin-#{$left}: 1.5em;
+    margin-left: 1.5em;
   }
 
   div.wrap {
@@ -2320,50 +2306,50 @@ input#auto_increment_opt {
 }
 
 #left_arrow {
-  #{$left}: 8px;
+  left: 8px;
   top: 26px;
 }
 
 #right_arrow {
-  #{$left}: 26px;
+  left: 26px;
   top: 26px;
 }
 
 #up_arrow {
-  #{$left}: 17px;
+  left: 17px;
   top: 8px;
 }
 
 #down_arrow {
-  #{$left}: 17px;
+  left: 17px;
   top: 44px;
 }
 
 #zoom_in {
-  #{$left}: 17px;
+  left: 17px;
   top: 67px;
 }
 
 #zoom_world {
-  #{$left}: 17px;
+  left: 17px;
   top: 85px;
 }
 
 #zoom_out {
-  #{$left}: 17px;
+  left: 17px;
   top: 103px;
 }
 
 .colborder {
   cursor: col-resize;
   height: 100%;
-  margin-#{$left}: -6px;
+  margin-left: -6px;
   position: absolute;
   width: 5px;
 }
 
 .colborder_active {
-  border-#{$right}: 2px solid #a44;
+  border-right: 2px solid #a44;
 }
 
 .pma_table {
@@ -2395,11 +2381,11 @@ input#auto_increment_opt {
 
   th.draggable {
     &.right span {
-      margin-#{$right}: 0;
+      margin-right: 0;
     }
 
     span {
-      margin-#{$right}: 10px;
+      margin-right: 10px;
     }
   }
 }
@@ -2438,7 +2424,7 @@ input#auto_increment_opt {
   height: $height;
   width: $width;
   margin-top: $height / -2;
-  margin-#{$left}: $width / -2;
+  margin-left: $width / -2;
   background: url("../img/col_pointer.png");
   position: absolute;
 }
@@ -2463,7 +2449,7 @@ input#auto_increment_opt {
 }
 
 .cDrop {
-  #{$left}: 0;
+  left: 0;
   position: absolute;
   top: 0;
 }
@@ -2472,7 +2458,7 @@ input#auto_increment_opt {
   background: url("../img/col_drop.png");
   cursor: pointer;
   height: 16px;
-  margin-#{$left}: 0.3em;
+  margin-left: 0.3em;
   margin-top: 0.3em;
   position: absolute;
   width: 16px;
@@ -2496,7 +2482,7 @@ input#auto_increment_opt {
 
   .lDiv div {
     padding: 0.2em 0.5em 0.2em;
-    padding-#{$left}: 0.2em;
+    padding-left: 0.2em;
 
     &:hover {
       background: #ddd;
@@ -2634,8 +2620,8 @@ input#auto_increment_opt {
   }
 
   .edit_box_posting {
-    background: #fff url('../img/ajax_clock_small.gif') no-repeat $right center;
-    padding-#{$right}: 1.5em;
+    background: #fff url('../img/ajax_clock_small.gif') no-repeat right center;
+    padding-right: 1.5em;
   }
 
   .edit_area_loading {
@@ -2651,8 +2637,8 @@ input#auto_increment_opt {
 }
 
 .saving_edited_data {
-  background: url('../img/ajax_clock_small.gif') no-repeat $left;
-  padding-#{$left}: 20px;
+  background: url('../img/ajax_clock_small.gif') no-repeat left;
+  padding-left: 20px;
 }
 
 .relationalTable {
@@ -2662,7 +2648,7 @@ input#auto_increment_opt {
 
   select {
     width: 125px;
-    margin-#{$right}: 5px;
+    margin-right: 5px;
   }
 }
 
@@ -2673,7 +2659,7 @@ input#auto_increment_opt {
   }
 
   dl {
-    text-align: $left;
+    text-align: left;
 
     dt {
       height: 25px;
@@ -2723,7 +2709,7 @@ body .ui-widget {
 
 // over-riding jqplot-yaxis class
 .jqplot-yaxis {
-  #{$left}: 0 !important;
+  left: 0 !important;
   min-width: 25px;
   width: auto;
 }
@@ -2764,7 +2750,7 @@ table.show_create {
   margin-top: 1em;
 
   td {
-    border-#{$right}: 1px solid #bbb;
+    border-right: 1px solid #bbb;
   }
 }
 
@@ -2791,13 +2777,13 @@ table.show_create {
   width: 100%;
   position: fixed;
   bottom: 0;
-  #{$left}: 0;
+  left: 0;
   z-index: 100;
 }
 
 #pma_console {
   position: relative;
-  margin-#{$left}: $navi-width;
+  margin-left: $navi-width;
 
   .templates {
     display: none;
@@ -2823,7 +2809,7 @@ table.show_create {
       &:not(:hover) {
         display: inline-block;
         border-top-right-radius: 3px;
-        border-#{$right}: solid 1px #aaa;
+        border-right: solid 1px #aaa;
       }
 
       > .button {
@@ -2876,12 +2862,12 @@ table.show_create {
 
     .button,
     .text {
-      margin-#{$right}: 0.4em;
+      margin-right: 0.4em;
     }
 
     .button,
     .text {
-      float: $right;
+      float: right;
     }
   }
 
@@ -2937,7 +2923,7 @@ table.show_create {
     }
 
     &::before {
-      #{$left}: -0.7em;
+      left: -0.7em;
       position: absolute;
       content: ">";
     }
@@ -3120,17 +3106,17 @@ table.show_create {
     width: 94%;
     height: 100%;
     min-height: 48px;
-    #{$left}: 100%;
+    left: 100%;
     top: 0;
-    border-#{$left}: solid 1px #999;
+    border-left: solid 1px #999;
     z-index: 300;
-    transition: $left 0.2s;
-    -ms-transition: $left 0.2s;
-    -webkit-transition: $left 0.2s;
-    -moz-transition: $left 0.2s;
+    transition: left 0.2s;
+    -ms-transition: left 0.2s;
+    -webkit-transition: left 0.2s;
+    -moz-transition: left 0.2s;
 
     &.show {
-      #{$left}: 6%;
+      left: 6%;
       box-shadow: -2px 1px 4px -1px #999;
     }
   }
@@ -3148,7 +3134,7 @@ table.show_create {
 
 #pma_bookmarks .content.add_bookmark {
   .options {
-    margin-#{$left}: 1.4em;
+    margin-left: 1.4em;
     padding-bottom: 0.4em;
     margin-bottom: 0.4em;
     border-bottom: solid 1px #ccc;
@@ -3186,7 +3172,7 @@ table.show_create {
   }
 
   .count {
-    margin-#{$right}: 8px;
+    margin-right: 8px;
   }
 
   .show_trace .trace,
@@ -3222,13 +3208,13 @@ table.show_create {
   }
 
   .debug_summary {
-    float: $left;
+    float: left;
   }
 
   .trace.welcome .time,
   .traceStep .file,
   .script_name {
-    float: $right;
+    float: right;
   }
 
   .traceStep .args pre {
@@ -3271,7 +3257,7 @@ table.show_create {
   display: none;
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
   height: 100%;
@@ -3286,23 +3272,16 @@ table.show_create {
   display: none;
   position: fixed;
   bottom: 0;
-  #{$right}: 25px;
+  right: 25px;
   width: 400px;
   border: 1px solid #999;
   background: #f3f3f3;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
-
-  @if $direction == rtl {
-    -moz-box-shadow: -2px 2px 5px #ccc;
-    -webkit-box-shadow: -2px 2px 5px #ccc;
-    box-shadow: -2px 2px 5px #ccc;
-  } @else {
-    -moz-box-shadow: 2px 2px 5px #ccc;
-    -webkit-box-shadow: 2px 2px 5px #ccc;
-    box-shadow: 2px 2px 5px #ccc;
-  }
+  -moz-box-shadow: 2px 2px 5px #ccc;
+  -webkit-box-shadow: 2px 2px 5px #ccc;
+  box-shadow: 2px 2px 5px #ccc;
 
   h2 {
     background-color: #bbb;
@@ -3313,16 +3292,9 @@ table.show_create {
     font-size: 1.6em;
     font-weight: normal;
     text-shadow: 0 1px 0 #777;
-
-    @if $direction == rtl {
-      -moz-box-shadow: -1px 1px 15px #999 inset;
-      -webkit-box-shadow: -1px 1px 15px #999 inset;
-      box-shadow: -1px 1px 15px #999 inset;
-    } @else {
-      -moz-box-shadow: 1px 1px 15px #999 inset;
-      -webkit-box-shadow: 1px 1px 15px #999 inset;
-      box-shadow: 1px 1px 15px #999 inset;
-    }
+    -moz-box-shadow: 1px 1px 15px #999 inset;
+    -webkit-box-shadow: 1px 1px 15px #999 inset;
+    box-shadow: 1px 1px 15px #999 inset;
   }
 }
 
@@ -3335,16 +3307,9 @@ table.show_create {
   font-size: 1.6em;
   font-weight: normal;
   text-shadow: 0 1px 0 #777;
-
-  @if $direction == rtl {
-    -moz-box-shadow: -1px 1px 15px #999 inset;
-    -webkit-box-shadow: -1px 1px 15px #999 inset;
-    box-shadow: -1px 1px 15px #999 inset;
-  } @else {
-    -moz-box-shadow: 1px 1px 15px #999 inset;
-    -webkit-box-shadow: 1px 1px 15px #999 inset;
-    box-shadow: 1px 1px 15px #999 inset;
-  }
+  -moz-box-shadow: 1px 1px 15px #999 inset;
+  -webkit-box-shadow: 1px 1px 15px #999 inset;
+  box-shadow: 1px 1px 15px #999 inset;
 }
 
 .pma_sql_import_status {
@@ -3361,21 +3326,21 @@ table.show_create {
       background: white;
 
       .filesize {
-        float: $right;
+        float: right;
       }
     }
   }
 
   h2 {
     .minimize {
-      float: $right;
-      margin-#{$right}: 5px;
+      float: right;
+      margin-right: 5px;
       padding: 0 10px;
     }
 
     .close {
-      float: $right;
-      margin-#{$right}: 5px;
+      float: right;
+      margin-right: 5px;
       padding: 0 10px;
       display: none;
     }
@@ -3405,7 +3370,7 @@ table.show_create {
 .pma_drop_result {
   position: fixed;
   top: 10%;
-  #{$left}: 20%;
+  left: 20%;
   width: 60%;
   background: white;
   min-height: 300px;
@@ -3415,8 +3380,8 @@ table.show_create {
   cursor: move;
 
   h2 .close {
-    float: $right;
-    margin-#{$right}: 5px;
+    float: right;
+    margin-right: 5px;
     padding: 0 10px;
   }
 }
@@ -3476,7 +3441,7 @@ th {
       background-position: right center;
       display: inline-table;
       vertical-align: middle;
-      float: $right;
+      float: right;
     }
   }
 
@@ -3504,16 +3469,16 @@ th {
 // styles for jQuery-ui to support rtl languages
 body .ui-dialog {
   .ui-dialog-titlebar-close {
-    #{$right}: 0.3em;
-    #{$left}: initial;
+    right: 0.3em;
+    left: initial;
   }
 
   .ui-dialog-title {
-    float: $left;
+    float: left;
   }
 
   .ui-dialog-buttonpane .ui-dialog-buttonset {
-    float: $right;
+    float: right;
   }
 
   .ui-dialog-buttonpane .ui-dialog-buttonset button {
@@ -3667,11 +3632,11 @@ body .ui-dialog {
 // Extra large devices (large desktops, 1200px and up)
 @include media-breakpoint-up(xl) {
   div.tools {
-    text-align: #{$left};
+    text-align: left;
   }
 
   fieldset.tblFooters,
   .tblFooters {
-    text-align: #{$left};
+    text-align: left;
   }
 }
diff --git a/themes/bootstrap/scss/_designer.scss b/themes/bootstrap/scss/_designer.scss
index d6b0a3760b..f4fa1656f6 100644
--- a/themes/bootstrap/scss/_designer.scss
+++ b/themes/bootstrap/scss/_designer.scss
@@ -40,7 +40,7 @@ $resize-img: '../img/designer/resize.png';
 canvas.designer {
   display: inline-block;
   overflow: hidden;
-  text-align: $left;
+  text-align: left;
 
   * {
     behavior: url(#default#VML);
@@ -130,8 +130,8 @@ canvas.designer {
   text-decoration: none;
   text-indent: 3px;
   font-weight: bold;
-  margin-#{$left}: 2px;
-  text-align: $left;
+  margin-left: 2px;
+  text-align: left;
   background-color: #fff;
   background-image: url($left-panel-button-img);
   border: #ccc solid 1px;
@@ -145,7 +145,7 @@ canvas.designer {
     white-space: nowrap;
     text-decoration: none;
     border: #99f solid 1px;
-    text-align: $left;
+    text-align: left;
   }
 }
 
@@ -155,15 +155,15 @@ canvas.designer {
 }
 
 .option_tab {
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   width: 5px;
 }
 
 .select_all {
   vertical-align: top;
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   cursor: default;
   width: 1px;
   color: #000;
@@ -179,8 +179,8 @@ canvas.designer {
   cursor: default;
   text-align: center;
   font-weight: bold;
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   width: 1px;
   text-decoration: none;
 
@@ -189,8 +189,8 @@ canvas.designer {
     color: #fff;
     background-color: #f96;
     cursor: default;
-    padding-#{$left}: 2px;
-    padding-#{$right}: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
     text-align: center;
     font-weight: bold;
     width: 1px;
@@ -250,19 +250,19 @@ canvas.designer {
 }
 
 .frams1 {
-  background: url($frams1-img) no-repeat $right bottom;
+  background: url($frams1-img) no-repeat right bottom;
 }
 
 .frams2 {
-  background: url($frams2-img) no-repeat $left bottom;
+  background: url($frams2-img) no-repeat left bottom;
 }
 
 .frams3 {
-  background: url($frams3-img) no-repeat $left top;
+  background: url($frams3-img) no-repeat left top;
 }
 
 .frams4 {
-  background: url($frams4-img) no-repeat $right top;
+  background: url($frams4-img) no-repeat right top;
 }
 
 .frams5 {
@@ -270,7 +270,7 @@ canvas.designer {
 }
 
 .frams6 {
-  background: url($frams6-img) repeat-y $left;
+  background: url($frams6-img) repeat-y left;
 }
 
 .frams7 {
@@ -278,7 +278,7 @@ canvas.designer {
 }
 
 .frams8 {
-  background: url($frams8-img) repeat-y $right;
+  background: url($frams8-img) repeat-y right;
 }
 
 #osn_tab {
@@ -297,8 +297,8 @@ canvas.designer {
   background-image: url($top-panel-img);
   background-position: top;
   background-repeat: repeat-x;
-  border-#{$right}: #999 solid 1px;
-  border-#{$left}: #999 solid 1px;
+  border-right: #999 solid 1px;
+  border-left: #999 solid 1px;
   height: 28px;
   z-index: 101;
   width: 100%;
@@ -307,7 +307,7 @@ canvas.designer {
   a,
   span {
     display: block;
-    float: $left;
+    float: left;
     margin: 3px 1px 4px;
     height: 20px;
     border: 1px dotted #fff;
@@ -315,7 +315,7 @@ canvas.designer {
 
   .M_bord {
     display: block;
-    float: $left;
+    float: left;
     margin: 4px;
     height: 20px;
     width: 2px;
@@ -323,11 +323,11 @@ canvas.designer {
 
   a {
     &.first {
-      margin-#{$right}: 1em;
+      margin-right: 1em;
     }
 
     &.last {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
   }
 }
@@ -356,18 +356,18 @@ a {
 #layer_menu {
   z-index: 98;
   position: relative;
-  float: $right;
+  float: right;
   background-color: #eaeef0;
   border: #999 solid 1px;
 
   &.left {
-    float: $left;
+    float: left;
   }
 }
 
 #layer_upd_relation {
   position: absolute;
-  #{$left}: 637px;
+  left: 637px;
   top: 224px;
   z-index: 100;
 }
@@ -375,7 +375,7 @@ a {
 #layer_new_relation,
 #designer_optionse {
   position: absolute;
-  #{$left}: 636px;
+  left: 636px;
   top: 85px;
   z-index: 100;
   width: 153px;
@@ -393,7 +393,7 @@ a {
 .panel {
   position: fixed;
   top: 60px;
-  #{$right}: 0;
+  right: 0;
   width: 350px;
   max-height: 500px;
   display: none;
@@ -407,7 +407,7 @@ a {
     position: fixed;
     text-decoration: none;
     top: 60px;
-    #{$right}: 0;
+    right: 0;
     color: #fff;
     padding: 10px 40px 10px 15px;
     background: #333 url($plus-img) 85% 55% no-repeat;
@@ -460,12 +460,12 @@ a {
 }
 
 #foreignkeychk {
-  text-align: $left;
+  text-align: left;
   cursor: pointer;
 }
 
 .side-menu {
-  float: $left;
+  float: left;
   position: fixed;
   width: auto;
   height: auto;
@@ -476,8 +476,8 @@ a {
   padding: 2px;
 
   &.right {
-    float: $right;
-    #{$right}: 0;
+    float: right;
+    right: 0;
   }
 
   .hide {
@@ -493,7 +493,7 @@ a {
 
   img,
   .text {
-    float: $left;
+    float: left;
   }
 }
 
@@ -510,5 +510,5 @@ a {
 #container-form {
   width: 100%;
   position: absolute;
-  #{$left}: 0;
+  left: 0;
 }
diff --git a/themes/bootstrap/scss/_direction.scss b/themes/bootstrap/scss/_direction.scss
deleted file mode 100644
index bea992f621..0000000000
--- a/themes/bootstrap/scss/_direction.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$direction: ltr !default;
-
-@if $direction != ltr and $direction != rtl {
-  $direction: ltr;
-}
-
-$left: left;
-$right: right;
-
-@if $direction == rtl {
-  $left: right;
-  $right: left;
-}
diff --git a/themes/bootstrap/scss/_enum-editor.scss b/themes/bootstrap/scss/_enum-editor.scss
index 125e5ceabc..03dd1589e4 100644
--- a/themes/bootstrap/scss/_enum-editor.scss
+++ b/themes/bootstrap/scss/_enum-editor.scss
@@ -23,7 +23,7 @@ p.enum_notice {
       vertical-align: middle;
       width: 50%;
       padding: 0 0 0;
-      padding-#{$left}: 1em;
+      padding-left: 1em;
     }
   }
 
@@ -36,7 +36,7 @@ p.enum_notice {
 
     input {
       margin: 0.1em 0;
-      padding-#{$right}: 2em;
+      padding-right: 2em;
       width: 100%;
     }
 
@@ -47,13 +47,13 @@ p.enum_notice {
 
   input.add_value {
     margin: 0;
-    margin-#{$right}: 0.4em;
+    margin-right: 0.4em;
   }
 }
 
 #enum_editor_output textarea {
   width: 100%;
-  float: $right;
+  float: right;
   margin: 1em 0 0 0;
 }
 
@@ -65,7 +65,7 @@ p.enum_notice {
 
   a {
     position: absolute;
-    #{$left}: 81%;
+    left: 81%;
     bottom: 0.35em;
   }
 }
diff --git a/themes/bootstrap/scss/_gis.scss b/themes/bootstrap/scss/_gis.scss
index e36b65b57d..c95ff10b96 100644
--- a/themes/bootstrap/scss/_gis.scss
+++ b/themes/bootstrap/scss/_gis.scss
@@ -2,7 +2,7 @@
  * GIS data editor styles
  */
 a.close_gis_editor {
-  float: $right;
+  float: right;
 }
 
 #gis_editor {
diff --git a/themes/bootstrap/scss/_icons.scss b/themes/bootstrap/scss/_icons.scss
index 669ee643c4..ae9933633d 100644
--- a/themes/bootstrap/scss/_icons.scss
+++ b/themes/bootstrap/scss/_icons.scss
@@ -1,6 +1,6 @@
 .icon {
   margin: 0;
-  margin-#{$left}: 0.3em;
+  margin-left: 0.3em;
   padding: 0 !important;
   width: 16px;
   height: 16px;
diff --git a/themes/bootstrap/scss/_jqplot.scss b/themes/bootstrap/scss/_jqplot.scss
index cda841aaab..f3d92f879b 100644
--- a/themes/bootstrap/scss/_jqplot.scss
+++ b/themes/bootstrap/scss/_jqplot.scss
@@ -22,7 +22,7 @@
 }
 
 .jqplot-yaxis {
-  margin-#{$right}: 10px;
+  margin-right: 10px;
 }
 
 .jqplot-y2axis,
@@ -34,8 +34,8 @@
 .jqplot-y8axis,
 .jqplot-y9axis,
 .jqplot-yMidAxis {
-  margin-#{$left}: 10px;
-  margin-#{$right}: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 // rules applied to all axis tick divs
@@ -59,26 +59,26 @@
 .jqplot-xaxis-tick {
   top: 0;
   // initial position untill tick is drawn in proper place
-  #{$left}: 15px;
+  left: 15px;
   vertical-align: top;
 }
 
 .jqplot-x2axis-tick {
   bottom: 0;
   // initial position untill tick is drawn in proper place
-  #{$left}: 15px;
+  left: 15px;
   vertical-align: bottom;
 }
 
 .jqplot-yaxis-tick {
-  #{$right}: 0;
+  right: 0;
   // initial position untill tick is drawn in proper place
   top: 15px;
-  text-align: $right;
+  text-align: right;
 
   &.jqplot-breakTick {
-    #{$right}: -20px;
-    margin-#{$right}: 0;
+    right: -20px;
+    margin-right: 0;
     padding: 1px 5px 1px;
     z-index: 2;
     font-size: 1.5em;
@@ -93,10 +93,10 @@
 .jqplot-y7axis-tick,
 .jqplot-y8axis-tick,
 .jqplot-y9axis-tick {
-  #{$left}: 0;
+  left: 0;
   // initial position untill tick is drawn in proper place
   top: 15px;
-  text-align: $left;
+  text-align: left;
 }
 
 .jqplot-yMidAxis-tick {
@@ -117,7 +117,7 @@
 }
 
 .jqplot-yaxis-label {
-  margin-#{$right}: 10px;
+  margin-right: 10px;
   font-size: 11pt;
   position: absolute;
 }
@@ -136,7 +136,7 @@
 .jqplot-y8axis-label,
 .jqplot-y9axis-label {
   font-size: 11pt;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
   position: absolute;
 }
 
@@ -154,8 +154,8 @@ table {
   &.jqplot-table-legend {
     margin-top: 12px;
     margin-bottom: 12px;
-    margin-#{$left}: 12px;
-    margin-#{$right}: 12px;
+    margin-left: 12px;
+    margin-right: 12px;
     background-color: rgba(255, 255, 255, 0.6);
     border: 1px solid #ccc;
     position: absolute;
@@ -209,7 +209,7 @@ div {
 
 .jqplot-title {
   top: 0;
-  #{$left}: 0;
+  left: 0;
   padding-bottom: 0.5em;
   font-size: 1.2em;
 }
@@ -259,8 +259,8 @@ div.jqplot-cursor-legend-swatch {
 div {
   &.jqplot-bubble-label {
     font-size: 0.8em;
-    padding-#{$left}: 2px;
-    padding-#{$right}: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
     color: rgb(20%, 20%, 20%);
 
     &.jqplot-bubble-label-highlight {
diff --git a/themes/bootstrap/scss/_navigation.scss b/themes/bootstrap/scss/_navigation.scss
index dd8f5c4212..160f96bab1 100644
--- a/themes/bootstrap/scss/_navigation.scss
+++ b/themes/bootstrap/scss/_navigation.scss
@@ -3,7 +3,7 @@
   width: $navi-width;
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   height: 100vh;
   background-color: $gray-100;
   z-index: 800;
@@ -29,8 +29,8 @@
     &.pageselector {
       text-align: center;
       margin: 0;
-      margin-#{$left}: 0.75em;
-      border-#{$left}: 1px solid #666;
+      margin-left: 0.75em;
+      border-left: 1px solid #666;
     }
   }
 
@@ -85,7 +85,7 @@
   height: 100%;
   position: absolute;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   z-index: 0;
 
   > img.throbber {
@@ -95,7 +95,7 @@
 }
 
 #pma_navigation_select_database {
-  text-align: $left;
+  text-align: left;
   padding: 0 0 0;
   border: 0;
   margin: 0;
@@ -103,7 +103,7 @@
 
 #pma_navigation_db_select {
   margin-top: 0.5em;
-  margin-#{$left}: 0.75em;
+  margin-left: 0.75em;
 
   select {
     background: url('../img/select_bg.png') repeat scroll 0 0;
@@ -135,7 +135,7 @@
 
 #pma_navigation_tree {
   margin: 0;
-  margin-#{$left}: 5px;
+  margin-left: 5px;
   overflow: hidden;
   color: #444;
   height: 74%;
@@ -171,13 +171,13 @@
     }
 
     .dbItemControls {
-      padding-#{$right}: 4px;
+      padding-right: 4px;
       float: right;
     }
 
     .navItemControls {
       display: none;
-      padding-#{$right}: 4px;
+      padding-right: 4px;
       float: right;
     }
 
@@ -218,7 +218,7 @@
       height: 1.5em;
       min-width: 16px;
       min-height: 16px;
-      float: $left;
+      float: left;
 
       &.double {
         width: 2.5em;
@@ -232,21 +232,21 @@
         min-height: 8px;
         position: absolute;
         bottom: 0.7em;
-        #{$left}: 0.75em;
+        left: 0.75em;
         z-index: 0;
       }
 
       // Top and right segments for the tree element connections
       i {
         display: block;
-        border-#{$left}: 1px solid #666;
+        border-left: 1px solid #666;
         border-bottom: 1px solid #666;
         position: relative;
         z-index: 0;
 
         // Removes top segment
         &.first {
-          border-#{$left}: 0;
+          border-left: 0;
         }
       }
 
@@ -255,44 +255,44 @@
         display: block;
         height: 0.75em;
         bottom: 0;
-        #{$left}: 0.75em;
-        border-#{$left}: 1px solid #666;
+        left: 0.75em;
+        border-left: 1px solid #666;
       }
 
       a,
       u {
         position: absolute;
-        #{$left}: 50%;
+        left: 50%;
         top: 50%;
         z-index: 10;
       }
 
       a + a {
-        #{$left}: 100%;
+        left: 100%;
       }
 
       &.double {
         a,
         u {
-          #{$left}: 33%;
+          left: 33%;
         }
 
         a + a {
-          #{$left}: 85%;
+          left: 85%;
         }
       }
 
       img {
         position: relative;
         top: -0.6em;
-        #{$left}: 0;
-        margin-#{$left}: -7px;
+        left: 0;
+        margin-left: -7px;
       }
     }
 
     &.throbber img {
       top: 2px;
-      #{$left}: 2px;
+      left: 2px;
     }
   }
 
@@ -306,28 +306,28 @@
       i {
         line-height: 1.5em;
         height: 1.5em;
-        padding-#{$left}: 0.3em;
+        padding-left: 0.3em;
       }
     }
   }
 
   .list_container {
-    border-#{$left}: 1px solid #666;
-    margin-#{$left}: 0.75em;
-    padding-#{$left}: 0.75em;
+    border-left: 1px solid #666;
+    margin-left: 0.75em;
+    padding-left: 0.75em;
   }
 
   .last > .list_container {
-    border-#{$left}: 0 solid #666;
+    border-left: 0 solid #666;
   }
 }
 
 // Fast filter
 li.fast_filter {
-  padding-#{$left}: 0.75em;
-  margin-#{$left}: 0.75em;
-  padding-#{$right}: 35px;
-  border-#{$left}: 1px solid #666;
+  padding-left: 0.75em;
+  margin-left: 0.75em;
+  padding-right: 35px;
+  border-left: 1px solid #666;
   list-style: none;
 
   input {
@@ -335,14 +335,14 @@ li.fast_filter {
     font-size: 0.7em;
     padding-top: 2px;
     padding-bottom: 2px;
-    padding-#{$left}: 4px;
-    padding-#{$right}: 1.7em;
+    padding-left: 4px;
+    padding-right: 1.7em;
     width: 100%;
   }
 
   span {
     position: relative;
-    #{$right}: 1.5em;
+    right: 1.5em;
     padding: 0.2em;
     cursor: pointer;
     font-weight: bold;
@@ -352,8 +352,8 @@ li.fast_filter {
 
   &.db_fast_filter {
     border: 0;
-    margin-#{$left}: 0;
-    margin-#{$right}: 10px;
+    margin-left: 0;
+    margin-right: 10px;
   }
 }
 
@@ -365,7 +365,7 @@ html.ie {
     }
 
     input {
-      padding-#{$right}: 0.2em;
+      padding-right: 0.2em;
     }
   }
 
@@ -377,7 +377,7 @@ html.ie {
       }
 
       input {
-        padding-#{$right}: 1.7em;
+        padding-right: 1.7em;
       }
     }
   }
@@ -392,8 +392,8 @@ html.ie {
 }
 
 #navigation_controls {
-  float: $right;
-  padding-#{$right}: 23px;
+  float: right;
+  padding-right: 23px;
 }
 
 // Resize handler
@@ -404,7 +404,7 @@ html.ie {
   cursor: col-resize;
   position: fixed;
   top: 0;
-  #{$left}: 240px;
+  left: 240px;
   z-index: 801;
 }
 
@@ -417,7 +417,7 @@ html.ie {
   font-weight: bold;
   position: fixed;
   top: 0;
-  #{$left}: $navi-width;
+  left: $navi-width;
   text-align: center;
   cursor: pointer;
   z-index: 800;
@@ -429,12 +429,12 @@ html.ie {
 // Quick warp links
 .pma_quick_warp {
   margin-top: 5px;
-  margin-#{$left}: 2px;
+  margin-left: 2px;
   position: relative;
 
   .drop_list {
-    float: $left;
-    margin-#{$left}: 3px;
+    float: left;
+    margin-left: 3px;
     padding: 2px 0;
 
     &:hover {
@@ -461,8 +461,8 @@ html.ie {
       border-bottom-right-radius: 0;
       box-shadow: 0 0 5px #ccc;
       top: 100%;
-      #{$left}: 3px;
-      #{$right}: 0;
+      left: 3px;
+      right: 0;
       display: none;
       z-index: 802;
     }
@@ -486,8 +486,8 @@ html.ie {
       padding: 0.2em 0.3em;
 
       &.favorite_table_anchor {
-        clear: $left;
-        float: $left;
+        clear: left;
+        float: left;
         padding: 0.1em 0.3em 0;
       }
     }
diff --git a/themes/bootstrap/scss/_reboot.scss b/themes/bootstrap/scss/_reboot.scss
index 0069b5921a..6ccd2802f5 100644
--- a/themes/bootstrap/scss/_reboot.scss
+++ b/themes/bootstrap/scss/_reboot.scss
@@ -1,5 +1,5 @@
 // Body
 
 body {
-  text-align: $left;
+  text-align: left;
 }
diff --git a/themes/bootstrap/scss/_resizable-menu.scss b/themes/bootstrap/scss/_resizable-menu.scss
index b49ce7532b..d27a150426 100644
--- a/themes/bootstrap/scss/_resizable-menu.scss
+++ b/themes/bootstrap/scss/_resizable-menu.scss
@@ -24,7 +24,7 @@ ul.resizable-menu {
     display: none;
     border: 1px #ddd solid;
     z-index: 2;
-    #{$right}: 0;
+    right: 0;
   }
 
   li:hover {
diff --git a/themes/bootstrap/scss/_rte.scss b/themes/bootstrap/scss/_rte.scss
index 2ff136b870..99b7298f5c 100644
--- a/themes/bootstrap/scss/_rte.scss
+++ b/themes/bootstrap/scss/_rte.scss
@@ -25,7 +25,7 @@
     &[type=checkbox],
     &[type=radio] {
       width: auto;
-      margin-#{$right}: 6px;
+      margin-right: 6px;
     }
   }
 
diff --git a/themes/bootstrap/scss/theme-rtl.scss b/themes/bootstrap/scss/theme-rtl.scss
deleted file mode 100644
index 251a1f01c9..0000000000
--- a/themes/bootstrap/scss/theme-rtl.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$direction: rtl;
-
-@import "theme";
diff --git a/themes/bootstrap/scss/theme.scss b/themes/bootstrap/scss/theme.scss
index 2fca857b74..466d1b0384 100644
--- a/themes/bootstrap/scss/theme.scss
+++ b/themes/bootstrap/scss/theme.scss
@@ -1,4 +1,3 @@
-@import "direction";
 @import "variables";
 @import "bootstrap";
 @import "common";
diff --git a/themes/metro/scss/_alert.scss b/themes/metro/scss/_alert.scss
index fcda0f288f..d348396831 100644
--- a/themes/metro/scss/_alert.scss
+++ b/themes/metro/scss/_alert.scss
@@ -1,5 +1,5 @@
 .alert {
-  text-align: $left;
+  text-align: left;
 
   a {
     text-decoration: underline;
diff --git a/themes/metro/scss/_card.scss b/themes/metro/scss/_card.scss
index c9a3ed6ef0..5904682704 100644
--- a/themes/metro/scss/_card.scss
+++ b/themes/metro/scss/_card.scss
@@ -28,7 +28,7 @@
   }
 
   .card-body ul {
-    padding-#{$left}: 0;
+    padding-left: 0;
   }
 }
 
diff --git a/themes/metro/scss/_codemirror.scss b/themes/metro/scss/_codemirror.scss
index a14b6ed731..7732dd4e69 100644
--- a/themes/metro/scss/_codemirror.scss
+++ b/themes/metro/scss/_codemirror.scss
@@ -86,9 +86,9 @@ span {
 
 .autocomplete-column-hint {
   display: inline-block;
-  float: $right;
+  float: right;
   color: #666;
-  margin-#{$left}: 1em;
+  margin-left: 1em;
 }
 
 .CodeMirror-hints {
diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss
index fe88181f40..38c61c8123 100644
--- a/themes/metro/scss/_common.scss
+++ b/themes/metro/scss/_common.scss
@@ -33,10 +33,10 @@ body#loginform {
 
   div.container {
     color: $body-bg;
-    text-align: $left;
+    text-align: left;
     width: 48em;
-    margin-#{$left}: auto;
-    margin-#{$right}: auto;
+    margin-left: auto;
+    margin-right: auto;
 
     &::before {
       /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
@@ -44,8 +44,8 @@ body#loginform {
       font-size: 220px;
       color: $body-bg;
       content: "a";
-      float: $left;
-      margin-#{$right}: 20px;
+      float: left;
+      margin-right: 20px;
       margin-bottom: 10px;
       background-color: $th-color;
       overflow: hidden;
@@ -58,11 +58,11 @@ body#loginform {
 
   h1 {
     display: inline-block;
-    text-align: $left;
+    text-align: left;
     color: $body-bg;
     font-size: 2.5em;
     padding-top: 0;
-    margin-#{$right}: -50%;
+    margin-right: -50%;
     line-height: 2;
   }
 
@@ -110,7 +110,7 @@ body#loginform {
     border: 1px solid $navi-background;
     background: $navi-background;
     color: $navi-color;
-    padding-#{$left}: 0 !important;
+    padding-left: 0 !important;
     font-family: $font-family-base;
     min-width: 100%;
 
@@ -326,12 +326,12 @@ input {
 
 .sqlbutton {
   margin-top: 1em;
-  margin-#{$left}: 0 !important;
-  margin-#{$right}: 14px !important;
+  margin-left: 0 !important;
+  margin-right: 14px !important;
 }
 
 button {
-  margin-#{$left}: 14px;
+  margin-left: 14px;
   padding: 4px;
   color: $button-color;
   text-decoration: none;
@@ -388,7 +388,7 @@ button {
 }
 
 .pma-table th {
-  text-align: $left;
+  text-align: left;
 }
 
 img,
@@ -420,12 +420,12 @@ select {
 }
 
 .floatleft {
-  float: $left;
-  margin-#{$right}: 1em;
+  float: left;
+  margin-right: 1em;
 }
 
 .floatright {
-  float: $right;
+  float: right;
 }
 
 .displayblock {
@@ -447,13 +447,13 @@ select {
 
 .pma-table th.left,
 .pma-table td.left {
-  text-align: $left;
+  text-align: left;
 }
 
 .pma-table th.right,
 .pma-table td.right {
-  text-align: $right;
-  padding-#{$right}: 1em;
+  text-align: right;
+  padding-right: 1em;
 }
 
 .pma-table tr.vtop {
@@ -507,10 +507,10 @@ select {
 
 div.tools {
   padding: 10px;
-  text-align: $right;
+  text-align: right;
 
   span {
-    float: $right;
+    float: right;
     margin: 6px 2px;
   }
 
@@ -521,7 +521,7 @@ div.tools {
 
 .chrome {
   input[type="checkbox"] {
-    #{$left}: -9999px;
+    left: -9999px;
     position: relative;
 
     &::before {
@@ -533,7 +533,7 @@ div.tools {
       position: absolute;
       padding: 4px;
       top: 0;
-      #{$left}: 9995px;
+      left: 9995px;
     }
 
     &:indeterminate::before {
@@ -550,7 +550,7 @@ div.tools {
   }
 
   input[type="radio"] {
-    #{$left}: -9999px;
+    left: -9999px;
     position: relative;
 
     &::before {
@@ -562,7 +562,7 @@ div.tools {
       position: absolute;
       padding: 4px;
       top: 0;
-      #{$left}: 9995px;
+      left: 9995px;
     }
 
     &:checked::before {
@@ -578,7 +578,7 @@ div.tools {
 fieldset.tblFooters {
   margin-top: -1px;
   border-top: 0;
-  text-align: $right;
+  text-align: right;
   float: none;
   clear: both;
 }
@@ -592,8 +592,8 @@ div.null_div {
 
 fieldset {
   .formelement {
-    float: $left;
-    margin-#{$right}: 0.5em;
+    float: left;
+    margin-right: 0.5em;
   }
 
   /* revert for Gecko */
@@ -610,7 +610,7 @@ button.mult_submit {
 }
 
 .pma-table tr {
-  text-align: $left;
+  text-align: left;
   border-bottom: 1px solid #eee;
 
   // odd items 1,3,5,7...
@@ -631,13 +631,13 @@ button.mult_submit {
   }
 
   th {
-    text-align: $left;
+    text-align: left;
     border-bottom: 1px solid #eee;
   }
 
   &.odd,
   &.even {
-    border-#{$left}: 3px solid transparent;
+    border-left: 3px solid transparent;
   }
 }
 
@@ -661,7 +661,7 @@ button.mult_submit {
 
 .pma-table tr {
   &.marked:not(.nomarker) {
-    border-#{$left}: 3px solid #24a0da;
+    border-left: 3px solid #24a0da;
   }
 
   &:not(.nopointer):hover {
@@ -730,7 +730,7 @@ button.mult_submit {
 .pma-table {
   .valueHeader,
   .value {
-    text-align: $right;
+    text-align: right;
     white-space: normal;
   }
 
@@ -793,12 +793,12 @@ img.lightbulb {
 }
 
 .selectallarrow {
-  margin-#{$right}: 0.3em;
-  margin-#{$left}: 0.6em;
+  margin-right: 0.3em;
+  margin-left: 0.6em;
 }
 
 .with-selected {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 /* message boxes: error, confirmation */
@@ -973,7 +973,7 @@ fieldset.caution li {
     font-family: "IcoMoon";
     content: "";
     color: $button-color;
-    margin-#{$right}: 10px;
+    margin-right: 10px;
   }
 
   a:nth-child(2) img {
@@ -986,7 +986,7 @@ div#dataDisplay {
   input,
   select {
     margin: 0;
-    margin-#{$right}: 0.5em;
+    margin-right: 0.5em;
   }
 
   th {
@@ -1032,9 +1032,9 @@ form.clock {
 
 /* table stats */
 div#tablestatistics table {
-  float: $left;
+  float: left;
   margin-bottom: 0.5em;
-  margin-#{$right}: 1.5em;
+  margin-right: 1.5em;
   margin-top: 0.5em;
   min-width: 16em;
 }
@@ -1049,7 +1049,7 @@ div#tablestatistics table {
 #page_nav_icons {
   position: fixed;
   top: 0;
-  #{$right}: 0;
+  right: 0;
   z-index: 99;
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
 }
@@ -1068,7 +1068,7 @@ div#tablestatistics table {
   font-weight: normal;
   font-style: italic;
   white-space: nowrap;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 }
 
 #textSQLDUMP {
@@ -1103,21 +1103,21 @@ div#tablestatistics table {
   }
 
   label {
-    float: $left;
+    float: left;
     display: block;
     width: 10em;
     max-width: 100%;
-    text-align: $right;
-    padding-#{$right}: 0.5em;
+    text-align: right;
+    padding-right: 0.5em;
     margin-bottom: 0;
   }
 
   span.options {
-    float: $left;
+    float: left;
     display: block;
     width: 12em;
     max-width: 100%;
-    padding-#{$right}: 0.5em;
+    padding-right: 0.5em;
 
     #select_pred_username,
     #select_pred_hostname,
@@ -1129,7 +1129,7 @@ div#tablestatistics table {
 
   input {
     width: 12em;
-    clear: $right;
+    clear: right;
     max-width: 100%;
   }
 
@@ -1143,7 +1143,7 @@ div#tablestatistics table {
 }
 
 #fieldset_user_priv div.item {
-  float: $left;
+  float: left;
   width: 9em;
   max-width: 100%;
 
@@ -1162,7 +1162,7 @@ div#tablestatistics table {
 
 #fieldset_user_global_rights fieldset,
 #fieldset_user_group_rights fieldset {
-  float: $left;
+  float: left;
 }
 
 /* END user privileges */
@@ -1181,7 +1181,7 @@ h3#serverstatusqueries span {
 }
 
 .buttonlinks {
-  float: $right;
+  float: right;
   white-space: nowrap;
 }
 
@@ -1199,14 +1199,14 @@ div#serverStatusTabs {
 }
 
 caption a.top {
-  float: $right;
+  float: right;
 }
 
 div#serverstatusquerieschart {
-  float: $left;
+  float: left;
   width: 500px;
   height: 350px;
-  padding-#{$left}: 30px;
+  padding-left: 30px;
 }
 
 div {
@@ -1231,7 +1231,7 @@ div {
 }
 
 div#chartVariableSettings {
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 }
 
 table#chartGrid {
@@ -1246,13 +1246,13 @@ table#chartGrid {
 }
 
 div.tabLinks {
-  margin-#{$left}: 0.3em;
-  float: $left;
+  margin-left: 0.3em;
+  float: left;
   padding: 5px 0;
 
   a,
   label {
-    margin-#{$right}: 7px;
+    margin-right: 7px;
   }
 
   .icon {
@@ -1300,13 +1300,13 @@ div {
     table.queryNums {
       display: none;
       border: 0;
-      text-align: $left;
+      text-align: left;
     }
   }
 }
 
 .smallIndent {
-  padding-#{$left}: 7px;
+  padding-left: 7px;
 }
 
 /* end serverstatus */
@@ -1316,7 +1316,7 @@ div {
 div#profilingchart {
   width: 850px;
   height: 370px;
-  float: $left;
+  float: left;
 }
 
 /* END profiling */
@@ -1333,8 +1333,8 @@ div#profilingchart {
 }
 
 .chartOption {
-  float: $left;
-  margin-#{$right}: 40px;
+  float: left;
+  margin-right: 40px;
 }
 
 /* END table charting */
@@ -1361,7 +1361,7 @@ div#profilingchart {
     font-size: 0.88em;
     font-weight: bold;
     line-height: 35px;
-    margin-#{$left}: 7px;
+    margin-left: 7px;
     border: 1px solid #aaa;
     padding: 5px 10px;
     color: #111;
@@ -1376,7 +1376,7 @@ a.button {
   font-size: 0.88em;
   font-weight: bold;
   line-height: 35px;
-  margin-#{$left}: 7px;
+  margin-left: 7px;
   border: 1px solid #aaa;
   padding: 5px 10px;
   color: #111;
@@ -1406,7 +1406,7 @@ textarea {
 
 #mysqlmaininformation,
 #pmamaininformation {
-  float: $left;
+  float: left;
   width: 49%;
 }
 
@@ -1414,7 +1414,7 @@ textarea {
   list-style-type: square;
   vertical-align: middle;
   color: $th-color;
-  margin-#{$left}: 20px;
+  margin-left: 20px;
 
   li {
     line-height: 1.5;
@@ -1490,7 +1490,7 @@ li {
 }
 
 #fieldset_select_fields {
-  float: $left;
+  float: left;
 }
 
 #selflink {
@@ -1498,15 +1498,15 @@ li {
   display: block;
   margin-top: 20px;
   margin-bottom: 20px;
-  margin-#{$left}: 20px;
-  margin-#{$right}: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
   border-top: 1px solid silver;
-  text-align: $right;
+  text-align: right;
 }
 
 .operations_half_width {
   width: 100%;
-  float: $left;
+  float: left;
   margin-bottom: 10px;
 }
 
@@ -1517,12 +1517,12 @@ li {
 
 #qbe_div_table_list,
 #qbe_div_sql_query {
-  float: $left;
+  float: left;
 }
 
 label.desc {
   width: 30em;
-  float: $left;
+  float: left;
 
   sup {
     position: absolute;
@@ -1540,7 +1540,7 @@ code {
 
   &.php {
     display: block;
-    padding-#{$left}: 0.3em;
+    padding-left: 0.3em;
     margin-top: 0;
     margin-bottom: 0;
     max-height: 10em;
@@ -1607,13 +1607,13 @@ div {
   &.upload_progress_bar_outer div.percentage {
     position: absolute;
     top: 0;
-    #{$left}: 0;
+    left: 0;
     width: 202px;
   }
 
   &.upload_progress_bar_inner div.percentage {
     top: -1px;
-    #{$left}: -1px;
+    left: -1px;
   }
 
   &#statustext {
@@ -1626,7 +1626,7 @@ table {
   &#serverconnection_trg_remote,
   &#serverconnection_src_local,
   &#serverconnection_trg_local {
-    float: $left;
+    float: left;
   }
 }
 
@@ -1654,8 +1654,8 @@ input {
   z-index: 1100;
   text-align: center;
   display: inline;
-  #{$left}: 0;
-  #{$right}: 0;
+  left: 0;
+  right: 0;
   background-image: url("../img/ajax_clock_small.gif");
   background-repeat: no-repeat;
   background-position: 46%;
@@ -1667,7 +1667,7 @@ input {
 }
 
 .dismissable {
-  margin-#{$left}: -10px;
+  margin-left: -10px;
   margin-top: -10px;
 }
 
@@ -1738,14 +1738,14 @@ input {
 #ldi_options label.desc,
 #latex_options label.desc,
 #output label.desc {
-  float: $left;
+  float: left;
   width: 15em;
 }
 
 .exportoptions,
 .importoptions {
   margin: 20px 30px 30px;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 }
 
 .exportoptions #buttonGo,
@@ -1763,7 +1763,7 @@ input {
 
   h3 {
     margin: 10px 0 0;
-    margin-#{$left}: 10px;
+    margin-left: 10px;
     border: 0;
   }
 }
@@ -1784,7 +1784,7 @@ select {
 
 .export_sub_options {
   margin: 20px 0 0;
-  margin-#{$left}: 30px;
+  margin-left: 30px;
 
   h4 {
     border-bottom: 1px #999 solid;
@@ -1831,7 +1831,7 @@ input#input_import_file {
   width: 100%;
   height: 100%;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   background: #000;
   z-index: 1000;
   overflow: hidden;
@@ -1846,8 +1846,8 @@ input#input_import_file {
   list-style: none;
 
   li {
-    float: $left;
-    margin-#{$right}: 0.3em;
+    float: left;
+    margin-right: 0.3em;
   }
 
   .submenu li {
@@ -1866,7 +1866,7 @@ input#input_import_file {
 }
 
 #structure-action-links a {
-  margin-#{$right}: 1em;
+  margin-right: 1em;
 }
 
 /**
@@ -1889,7 +1889,7 @@ input#input_import_file {
     }
 
     .label {
-      float: $left;
+      float: left;
       min-width: 12em;
     }
   }
@@ -1897,14 +1897,14 @@ input#input_import_file {
   .slider {
     width: 10em;
     margin: 0.6em;
-    float: $left;
+    float: left;
   }
 
   .add_fields {
-    float: $left;
+    float: left;
 
     input {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
   }
 
@@ -1922,7 +1922,7 @@ table#index_columns {
 
   select {
     width: 85%;
-    float: $right;
+    float: right;
   }
 }
 
@@ -1957,7 +1957,7 @@ table#index_columns {
     font-weight: bold;
 
     li {
-      float: $left;
+      float: left;
       margin-bottom: -1px;
 
       a {
@@ -2023,7 +2023,7 @@ table#index_columns {
     /* field error list */
     .inline_errors {
       margin: 0.3em 0.3em 0.3em;
-      margin-#{$left}: 0;
+      margin-left: 0;
       padding: 0;
       list-style: none;
       color: #9a0000;
@@ -2053,17 +2053,17 @@ table#index_columns {
 .config-form fieldset {
   th {
     padding: 10px;
-    padding-#{$left}: 0.5em;
-    text-align: $left;
+    padding-left: 0.5em;
+    text-align: left;
     vertical-align: top;
   }
 
   .doc {
-    margin-#{$left}: 1em;
+    margin-left: 1em;
   }
 
   .disabled-notice {
-    margin-#{$left}: 1em;
+    margin-left: 1em;
     font-size: 80%;
     text-transform: uppercase;
     color: #e00;
@@ -2075,12 +2075,12 @@ table#index_columns {
     padding-bottom: 0.3em;
     vertical-align: top;
     border-bottom: 1px $navi-color solid;
-    border-#{$right}: none;
+    border-right: none;
   }
 
   th {
     border-bottom: 1px $navi-color solid;
-    border-#{$right}: none;
+    border-right: none;
 
     small {
       display: block;
@@ -2105,16 +2105,16 @@ fieldset {
 
   .group-field-1 th,
   .group-header-2 th {
-    padding-#{$left}: 1.5em;
+    padding-left: 1.5em;
   }
 
   .group-field-2 th,
   .group-header-3 th {
-    padding-#{$left}: 3em;
+    padding-left: 3em;
   }
 
   .group-field-3 th {
-    padding-#{$left}: 4.5em;
+    padding-left: 4.5em;
   }
 
   .disabled-field {
@@ -2240,7 +2240,7 @@ form {
   }
 
   dd {
-    margin-#{$left}: 0.5em;
+    margin-left: 0.5em;
 
     &::before {
       content: "\25B8  ";
@@ -2253,12 +2253,12 @@ form {
 }
 
 .prefsmanage_opts {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 #prefs_autoload {
   margin-bottom: 0.5em;
-  margin-#{$left}: 0.5em;
+  margin-left: 0.5em;
 }
 
 input#auto_increment_opt {
@@ -2280,7 +2280,7 @@ input#auto_increment_opt {
 }
 
 .wrapper {
-  float: $left;
+  float: left;
   margin-bottom: 1.5em;
 }
 
@@ -2292,8 +2292,8 @@ input#auto_increment_opt {
   line-height: 1.4em;
   height: 1.55em;
   overflow: hidden;
-  border-#{$right}: 0.1em solid #888;
-  border-#{$left}: 0.1em solid #888;
+  border-right: 0.1em solid #888;
+  border-left: 0.1em solid #888;
 
   table,
   td,
@@ -2323,20 +2323,20 @@ input#auto_increment_opt {
 .doubleFieldset {
   fieldset {
     width: 48%;
-    float: $left;
+    float: left;
     padding: 0;
 
     &.left {
-      margin-#{$right}: 1%;
+      margin-right: 1%;
     }
 
     &.right {
-      margin-#{$left}: 1%;
+      margin-left: 1%;
     }
   }
 
   legend {
-    margin-#{$left}: 1.5em;
+    margin-left: 1.5em;
   }
 
   div.wrap {
@@ -2379,7 +2379,7 @@ form.append_fields_form .tblFooters {
 #placeholder {
   position: relative;
   border: 1px solid #aaa;
-  float: $right;
+  float: right;
   overflow: hidden;
 
   .button {
@@ -2392,50 +2392,50 @@ form.append_fields_form .tblFooters {
 }
 
 #left_arrow {
-  #{$left}: 8px;
+  left: 8px;
   top: 26px;
 }
 
 #right_arrow {
-  #{$left}: 26px;
+  left: 26px;
   top: 26px;
 }
 
 #up_arrow {
-  #{$left}: 17px;
+  left: 17px;
   top: 8px;
 }
 
 #down_arrow {
-  #{$left}: 17px;
+  left: 17px;
   top: 44px;
 }
 
 #zoom_in {
-  #{$left}: 17px;
+  left: 17px;
   top: 67px;
 }
 
 #zoom_world {
-  #{$left}: 17px;
+  left: 17px;
   top: 85px;
 }
 
 #zoom_out {
-  #{$left}: 17px;
+  left: 17px;
   top: 103px;
 }
 
 .colborder {
   cursor: col-resize;
   height: 100%;
-  margin-#{$left}: -6px;
+  margin-left: -6px;
   position: absolute;
   width: 5px;
 }
 
 .colborder_active {
-  border-#{$right}: 2px solid #a44;
+  border-right: 2px solid #a44;
 }
 
 .pma_table {
@@ -2492,7 +2492,7 @@ form.append_fields_form .tblFooters {
 
   height: $height;
   width: $width;
-  margin-#{$left}: $height / -2;
+  margin-left: $height / -2;
   margin-top: $width / -2;
   position: absolute;
   background: url("../img/col_pointer.png");
@@ -2516,7 +2516,7 @@ form.append_fields_form .tblFooters {
 }
 
 .cDrop {
-  #{$left}: 0;
+  left: 0;
   position: absolute;
   top: 0;
 }
@@ -2525,7 +2525,7 @@ form.append_fields_form .tblFooters {
   background: url("../img/col_drop.png");
   cursor: pointer;
   height: 16px;
-  margin-#{$left}: 0.3em;
+  margin-left: 0.3em;
   margin-top: 0.3em;
   position: absolute;
   width: 16px;
@@ -2546,7 +2546,7 @@ form.append_fields_form .tblFooters {
 
   .lDiv div {
     padding: 0.2em 0.5em 0.2em;
-    padding-#{$left}: 0.2em;
+    padding-left: 0.2em;
 
     &:hover {
       background: $navi-background;
@@ -2687,7 +2687,7 @@ form.append_fields_form .tblFooters {
 
   .edit_box_posting {
     background: #fff url("../img/ajax_clock_small.gif") no-repeat right center;
-    padding-#{$right}: 1.5em;
+    padding-right: 1.5em;
   }
 
   .edit_area_loading {
@@ -2704,12 +2704,12 @@ form.append_fields_form .tblFooters {
 
 .saving_edited_data {
   background: url("../img/ajax_clock_small.gif") no-repeat left;
-  padding-#{$left}: 20px;
+  padding-left: 20px;
 }
 
 .relationalTable select {
   width: 125px;
-  margin-#{$right}: 5px;
+  margin-right: 5px;
 }
 
 /* css for timepicker */
@@ -2720,7 +2720,7 @@ form.append_fields_form .tblFooters {
   }
 
   dl {
-    text-align: $left;
+    text-align: left;
 
     dt {
       height: 25px;
@@ -2748,7 +2748,7 @@ form.append_fields_form .tblFooters {
   direction: rtl;
 
   dl {
-    text-align: $right;
+    text-align: right;
 
     dd {
       margin: 0 65px 10px 10px;
@@ -2800,14 +2800,14 @@ table.show_create {
   margin-top: 1em;
 
   td {
-    border-#{$right}: 1px solid #bbb;
+    border-right: 1px solid #bbb;
   }
 }
 
 #alias_modal {
   table th {
     vertical-align: middle;
-    padding-#{$left}: 1em;
+    padding-left: 1em;
   }
 
   label.col-2 {
@@ -2817,7 +2817,7 @@ table.show_create {
 
   select {
     width: 25%;
-    margin-#{$right}: 2em;
+    margin-right: 2em;
   }
 
   label {
@@ -2834,7 +2834,7 @@ table.show_create {
   width: 100%;
   position: fixed;
   bottom: 0;
-  #{$left}: 0;
+  left: 0;
   z-index: 100;
 }
 
@@ -2844,7 +2844,7 @@ textarea {
 
 #pma_console {
   position: relative;
-  margin-#{$left}: 250px;
+  margin-left: 250px;
 
   .templates {
     display: none;
@@ -2869,7 +2869,7 @@ textarea {
 
       &:not(:hover) {
         display: inline-block;
-        border-#{$right}: solid 1px #ccc;
+        border-right: solid 1px #ccc;
       }
 
       > .button {
@@ -2912,8 +2912,8 @@ textarea {
 
     .button,
     .text {
-      margin-#{$right}: 0.4em;
-      float: $right;
+      margin-right: 0.4em;
+      float: right;
     }
   }
 
@@ -2969,7 +2969,7 @@ textarea {
     }
 
     &::before {
-      #{$left}: -0.7em;
+      left: -0.7em;
       position: absolute;
       content: ">";
     }
@@ -2977,7 +2977,7 @@ textarea {
 
   .query_input {
     &::before {
-      #{$left}: -0.7em;
+      left: -0.7em;
       position: absolute;
       content: ">";
       top: -2px;
@@ -3147,17 +3147,17 @@ textarea {
     width: 94%;
     height: 100%;
     min-height: 48px;
-    #{$left}: 100%;
+    left: 100%;
     top: 0;
-    border-#{$left}: solid 1px #999;
+    border-left: solid 1px #999;
     z-index: 300;
-    transition: $left 0.2s;
-    -ms-transition: $left 0.2s;
-    -webkit-transition: $left 0.2s;
-    -moz-transition: $left 0.2s;
+    transition: left 0.2s;
+    -ms-transition: left 0.2s;
+    -webkit-transition: left 0.2s;
+    -moz-transition: left 0.2s;
 
     &.show {
-      #{$left}: 6%;
+      left: 6%;
     }
   }
 }
@@ -3169,7 +3169,7 @@ textarea {
 
 #pma_bookmarks .content.add_bookmark {
   .options {
-    margin-#{$left}: 1.4em;
+    margin-left: 1.4em;
     padding-bottom: 0.4em;
     margin-bottom: 0.4em;
     border-bottom: solid 1px #ccc;
@@ -3214,7 +3214,7 @@ textarea {
   }
 
   .count {
-    margin-#{$right}: 8px;
+    margin-right: 8px;
   }
 
   .show_trace .trace,
@@ -3250,13 +3250,13 @@ textarea {
   }
 
   .debug_summary {
-    float: $left;
+    float: left;
   }
 
   .trace.welcome .time,
   .traceStep .file,
   .script_name {
-    float: $right;
+    float: right;
   }
 
   .traceStep .args pre {
@@ -3300,7 +3300,7 @@ textarea {
   display: none;
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
   height: 100%;
@@ -3315,7 +3315,7 @@ textarea {
   display: none;
   position: fixed;
   bottom: 0;
-  #{$right}: 25px;
+  right: 25px;
   width: 400px;
   border: 1px solid #999;
   background: #f3f3f3;
@@ -3355,21 +3355,21 @@ textarea {
       background: white;
 
       .filesize {
-        float: $right;
+        float: right;
       }
     }
   }
 
   h2 {
     .minimize {
-      float: $right;
-      margin-#{$right}: 5px;
+      float: right;
+      margin-right: 5px;
       padding: 0 10px;
     }
 
     .close {
-      float: $right;
-      margin-#{$right}: 5px;
+      float: right;
+      margin-right: 5px;
       padding: 0 10px;
       display: none;
     }
@@ -3399,7 +3399,7 @@ textarea {
 .pma_drop_result {
   position: fixed;
   top: 10%;
-  #{$left}: 20%;
+  left: 20%;
   width: 60%;
   background: white;
   min-height: 300px;
@@ -3407,8 +3407,8 @@ textarea {
   cursor: move;
 
   h2 .close {
-    float: $right;
-    margin-#{$right}: 5px;
+    float: right;
+    margin-right: 5px;
     padding: 0 10px;
   }
 }
@@ -3468,7 +3468,7 @@ meter {
       background-position: right center;
       display: inline-table;
       vertical-align: middle;
-      float: $right;
+      float: right;
     }
   }
 
@@ -3498,16 +3498,16 @@ meter {
 body {
   .ui-dialog {
     .ui-dialog-titlebar-close {
-      #{$right}: 0.3em;
-      #{$left}: initial;
+      right: 0.3em;
+      left: initial;
     }
 
     .ui-dialog-title {
-      float: $left;
+      float: left;
     }
 
     .ui-dialog-buttonpane .ui-dialog-buttonset {
-      float: $right;
+      float: right;
     }
   }
 
@@ -3634,11 +3634,11 @@ body {
 // Extra large devices (large desktops, 1200px and up)
 @include media-breakpoint-up(xl) {
   div.tools {
-    text-align: #{$left};
+    text-align: left;
   }
 
   fieldset.tblFooters,
   .tblFooters {
-    text-align: #{$left};
+    text-align: left;
   }
 }
diff --git a/themes/metro/scss/_designer.scss b/themes/metro/scss/_designer.scss
index d1f7187515..2ec734af4c 100644
--- a/themes/metro/scss/_designer.scss
+++ b/themes/metro/scss/_designer.scss
@@ -24,7 +24,7 @@
 canvas.designer {
   display: inline-block;
   overflow: hidden;
-  text-align: $left;
+  text-align: left;
 
   * {
     behavior: url(#default#VML);
@@ -108,8 +108,8 @@ canvas.designer {
   white-space: nowrap;
   text-decoration: none;
   text-indent: 3px;
-  margin-#{$left}: 2px;
-  text-align: $left;
+  margin-left: 2px;
+  text-align: left;
   border: #ccc solid 0;
 
   &:hover {
@@ -120,7 +120,7 @@ canvas.designer {
     white-space: nowrap;
     text-decoration: none;
     border: #eee solid 0;
-    text-align: $left;
+    text-align: left;
   }
 }
 
@@ -130,15 +130,15 @@ canvas.designer {
 }
 
 .option_tab {
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   width: 5px;
 }
 
 .select_all {
   vertical-align: top;
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   cursor: default;
   width: 1px;
   color: #000;
@@ -152,8 +152,8 @@ canvas.designer {
   cursor: default;
   text-align: center;
   font-weight: bold;
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   width: 1px;
   text-decoration: none;
 
@@ -162,8 +162,8 @@ canvas.designer {
     color: #fff;
     background-color: #f96;
     cursor: default;
-    padding-#{$left}: 2px;
-    padding-#{$right}: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
     text-align: center;
     font-weight: bold;
     width: 1px;
@@ -189,13 +189,13 @@ canvas.designer {
 }
 
 .L_butt2_1 {
-  padding-#{$left}: 5px;
+  padding-left: 5px;
   text-decoration: none;
   vertical-align: middle;
   cursor: default;
 
   &:hover {
-    padding-#{$left}: 5px;
+    padding-left: 5px;
     color: #000;
     text-decoration: none;
     vertical-align: middle;
@@ -222,7 +222,7 @@ canvas.designer {
   color: #333;
   display: block;
   height: 28px;
-  margin-#{$left}: -20px;
+  margin-left: -20px;
   margin-top: -60px;
   padding: 5px 20px;
   position: fixed;
@@ -232,14 +232,14 @@ canvas.designer {
 
   a {
     display: block;
-    float: $left;
+    float: left;
     margin: 3px 1px 4px;
     height: 20px;
   }
 
   .M_bord {
     display: block;
-    float: $left;
+    float: left;
     margin: 4px;
     height: 20px;
     width: 2px;
@@ -247,11 +247,11 @@ canvas.designer {
 
   a {
     &.first {
-      margin-#{$right}: 1em;
+      margin-right: 1em;
     }
 
     &.last {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
   }
 }
@@ -270,29 +270,29 @@ a {
 #layer_menu {
   z-index: 98;
   position: relative;
-  float: $right;
+  float: right;
   background-color: #f6f6f6;
   border: #ccc solid 1px;
   border-top: 0;
-  margin-#{$right}: -20px;
+  margin-right: -20px;
 }
 
 .content_fullscreen #layer_menu {
-  margin-#{$right}: 0;
+  margin-right: 0;
 }
 
 #layer_menu.left {
-  float: $left;
-  margin-#{$left}: -20px;
+  float: left;
+  margin-left: -20px;
 }
 
 .content_fullscreen #layer_menu.left {
-  margin-#{$left}: 0;
+  margin-left: 0;
 }
 
 #layer_upd_relation {
   position: absolute;
-  #{$left}: 637px;
+  left: 637px;
   top: 224px;
   z-index: 100;
 }
@@ -300,7 +300,7 @@ a {
 #layer_new_relation,
 #designer_optionse {
   position: absolute;
-  #{$left}: 636px;
+  left: 636px;
   top: 85px;
   z-index: 100;
   width: 153px;
@@ -318,7 +318,7 @@ a {
 .panel {
   position: fixed;
   top: 90px;
-  #{$right}: 0;
+  right: 0;
   width: 350px;
   max-height: 500px;
   display: none;
@@ -332,7 +332,7 @@ a {
     position: fixed;
     text-decoration: none;
     top: 90px;
-    #{$right}: 0;
+    right: 0;
     color: #fff;
     padding: 10px 40px 10px 15px;
     background: #333 url("../img/designer/plus.png") 85% 55% no-repeat;
@@ -389,12 +389,12 @@ a {
 }
 
 #foreignkeychk {
-  text-align: $left;
+  text-align: left;
   cursor: pointer;
 }
 
 .side-menu {
-  float: #{$left};
+  float: left;
   position: fixed;
   width: auto;
   height: auto;
@@ -405,20 +405,20 @@ a {
   z-index: 50;
   padding: 2px;
   margin-top: 0;
-  margin-#{$left}: -20px;
+  margin-left: -20px;
 }
 
 .content_fullscreen .side-menu {
-  margin-#{$left}: 0;
+  margin-left: 0;
 }
 
 .side-menu.right {
-  float: $right;
-  #{$right}: 0;
+  float: right;
+  right: 0;
 }
 
 .content_fullscreen .side-menu.right {
-  margin-#{$right}: 0;
+  margin-right: 0;
 }
 
 .side-menu {
@@ -435,8 +435,8 @@ a {
   img,
   span,
   .text {
-    float: $left;
-    padding-#{$left}: 2px;
+    float: left;
+    padding-left: 2px;
   }
 }
 
@@ -448,18 +448,18 @@ a {
   padding: 10px;
   font-weight: bold;
   margin-top: -20px;
-  margin-#{$left}: -20px;
-  margin-#{$right}: -20px;
+  margin-left: -20px;
+  margin-right: -20px;
 }
 
 .content_fullscreen #name-panel {
   margin-top: 0;
-  margin-#{$left}: 0;
-  margin-#{$right}: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 #container-form {
   width: 100%;
   position: absolute;
-  #{$left}: 0;
+  left: 0;
 }
diff --git a/themes/metro/scss/_enum-editor.scss b/themes/metro/scss/_enum-editor.scss
index 6583f6a22b..a533aad967 100644
--- a/themes/metro/scss/_enum-editor.scss
+++ b/themes/metro/scss/_enum-editor.scss
@@ -23,7 +23,7 @@ p.enum_notice {
       vertical-align: middle;
       width: 50%;
       padding: 0 0 0;
-      padding-#{$left}: 1em;
+      padding-left: 1em;
     }
   }
 
@@ -36,7 +36,7 @@ p.enum_notice {
 
     input {
       margin: 0.1em 0;
-      padding-#{$right}: 2em;
+      padding-right: 2em;
       width: 100%;
     }
 
@@ -47,13 +47,13 @@ p.enum_notice {
 
   input.add_value {
     margin: 0;
-    margin-#{$right}: 0.4em;
+    margin-right: 0.4em;
   }
 }
 
 #enum_editor_output textarea {
   width: 100%;
-  float: $right;
+  float: right;
   margin: 1em 0 0 0;
 }
 
@@ -63,7 +63,7 @@ p.enum_notice {
 
   a {
     position: absolute;
-    #{$left}: 81%;
+    left: 81%;
     bottom: 0.35em;
   }
 }
diff --git a/themes/metro/scss/_gis.scss b/themes/metro/scss/_gis.scss
index 7ba94eb33a..42e76a35e4 100644
--- a/themes/metro/scss/_gis.scss
+++ b/themes/metro/scss/_gis.scss
@@ -1,6 +1,6 @@
 // GIS data editor styles for the Metro theme
 a.close_gis_editor {
-  float: $right;
+  float: right;
 }
 
 #gis_editor {
diff --git a/themes/metro/scss/_icons.scss b/themes/metro/scss/_icons.scss
index 973779aab2..dd99da5ea6 100644
--- a/themes/metro/scss/_icons.scss
+++ b/themes/metro/scss/_icons.scss
@@ -1,6 +1,6 @@
 .icon {
   margin: 0;
-  margin-#{$left}: 0.3em;
+  margin-left: 0.3em;
   padding: 0 !important;
   width: 16px;
   height: 16px;
diff --git a/themes/metro/scss/_jqplot.scss b/themes/metro/scss/_jqplot.scss
index bb094a1897..b2f5c3ce00 100644
--- a/themes/metro/scss/_jqplot.scss
+++ b/themes/metro/scss/_jqplot.scss
@@ -23,7 +23,7 @@
 }
 
 .jqplot-yaxis {
-  margin-#{$right}: 10px;
+  margin-right: 10px;
 }
 
 .jqplot-y2axis,
@@ -35,8 +35,8 @@
 .jqplot-y8axis,
 .jqplot-y9axis,
 .jqplot-yMidAxis {
-  margin-#{$left}: 10px;
-  margin-#{$right}: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 // rules applied to all axis tick divs
@@ -60,26 +60,26 @@
 .jqplot-xaxis-tick {
   top: 0;
   // initial position untill tick is drawn in proper place
-  #{$left}: 15px;
+  left: 15px;
   vertical-align: top;
 }
 
 .jqplot-x2axis-tick {
   bottom: 0;
   // initial position untill tick is drawn in proper place
-  #{$left}: 15px;
+  left: 15px;
   vertical-align: bottom;
 }
 
 .jqplot-yaxis-tick {
-  #{$right}: 0;
+  right: 0;
   // initial position untill tick is drawn in proper place
   top: 15px;
-  text-align: $right;
+  text-align: right;
 
   &.jqplot-breakTick {
-    #{$right}: -20px;
-    margin-#{$right}: 0;
+    right: -20px;
+    margin-right: 0;
     padding: 1px 5px 1px;
     z-index: 2;
     font-size: 1.5em;
@@ -94,10 +94,10 @@
 .jqplot-y7axis-tick,
 .jqplot-y8axis-tick,
 .jqplot-y9axis-tick {
-  #{$left}: 0;
+  left: 0;
   // initial position untill tick is drawn in proper place
   top: 15px;
-  text-align: $left;
+  text-align: left;
 }
 
 .jqplot-yMidAxis-tick {
@@ -118,7 +118,7 @@
 }
 
 .jqplot-yaxis-label {
-  margin-#{$right}: 10px;
+  margin-right: 10px;
   font-size: 11pt;
   position: absolute;
 }
@@ -137,7 +137,7 @@
 .jqplot-y8axis-label,
 .jqplot-y9axis-label {
   font-size: 11pt;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
   position: absolute;
 }
 
@@ -155,8 +155,8 @@ table {
   &.jqplot-table-legend {
     margin-top: 12px;
     margin-bottom: 12px;
-    margin-#{$left}: 12px;
-    margin-#{$right}: 12px;
+    margin-left: 12px;
+    margin-right: 12px;
     background-color: rgba(255, 255, 255, 0.6);
     border: 1px solid #ccc;
     position: absolute;
@@ -210,7 +210,7 @@ div {
 
 .jqplot-title {
   top: 0;
-  #{$left}: 0;
+  left: 0;
   padding-bottom: 0.5em;
   font-size: 1.2em;
 }
@@ -260,8 +260,8 @@ div.jqplot-cursor-legend-swatch {
 div {
   &.jqplot-bubble-label {
     font-size: 0.8em;
-    padding-#{$left}: 2px;
-    padding-#{$right}: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
     color: rgb(20%, 20%, 20%);
 
     &.jqplot-bubble-label-highlight {
diff --git a/themes/metro/scss/_list-group.scss b/themes/metro/scss/_list-group.scss
index fada0249c4..dfe4d86bc0 100644
--- a/themes/metro/scss/_list-group.scss
+++ b/themes/metro/scss/_list-group.scss
@@ -23,8 +23,8 @@
     display: block;
     padding-top: 10px;
     padding-bottom: 10px;
-    padding-#{$right}: 10px;
-    padding-#{$left}: 20px;
+    padding-right: 10px;
+    padding-left: 20px;
 
     &:hover {
       background: #f6f6f6;
@@ -34,5 +34,5 @@
 
 #li_select_theme::after {
   content: "Scheme: #{$color-scheme}";
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 }
diff --git a/themes/metro/scss/_nav.scss b/themes/metro/scss/_nav.scss
index c25277e90f..90a17a55ee 100644
--- a/themes/metro/scss/_nav.scss
+++ b/themes/metro/scss/_nav.scss
@@ -15,7 +15,7 @@
     }
 
     img {
-      margin-#{$right}: 0.5em;
+      margin-right: 0.5em;
       vertical-align: -3px;
     }
   }
diff --git a/themes/metro/scss/_navbar.scss b/themes/metro/scss/_navbar.scss
index d2a64d487b..f9aee5827b 100644
--- a/themes/metro/scss/_navbar.scss
+++ b/themes/metro/scss/_navbar.scss
@@ -1,11 +1,11 @@
 .navbar {
   background-color: $th-background;
-  padding-#{$left}: 20px;
-  padding-#{$right}: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .navbar-nav .icon {
-  margin-#{$right}: 0.5em;
+  margin-right: 0.5em;
   vertical-align: -3px;
 }
 
diff --git a/themes/metro/scss/_navigation.scss b/themes/metro/scss/_navigation.scss
index e91fb5e049..b22af17fde 100644
--- a/themes/metro/scss/_navigation.scss
+++ b/themes/metro/scss/_navigation.scss
@@ -4,7 +4,7 @@
   overflow: hidden;
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   height: 100%;
   background: $navi-color;
   color: $main-color;
@@ -45,7 +45,7 @@
   width: 100%;
   position: absolute;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   z-index: 0;
 }
 
@@ -63,8 +63,8 @@
   div.pageselector {
     text-align: center;
     margin: 0;
-    margin-#{$left}: 0.75em;
-    border-#{$left}: 1px solid #666;
+    margin-left: 0.75em;
+    border-left: 1px solid #666;
   }
 
   #pmalogo {
@@ -81,7 +81,7 @@
     &::after {
       font-family: $font-family-extra-bold;
       text-transform: uppercase;
-      margin-#{$left}: 5px;
+      margin-left: 5px;
       content: "phpMyAdmin";
     }
   }
@@ -149,7 +149,7 @@ img {
   height: 16px;
   width: 16px;
   color: $main-color;
-  margin-#{$right}: 5px;
+  margin-right: 5px;
   padding: 5px;
   font-size: 15px;
 
@@ -176,14 +176,14 @@ img {
 /* Navigation tree */
 #pma_navigation_tree {
   margin: 0;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
   overflow: hidden;
   height: 74%;
   position: relative;
 }
 
 #pma_navigation_select_database {
-  text-align: $left;
+  text-align: left;
   padding: 0 0 0;
   border: 0;
   margin: 0;
@@ -191,7 +191,7 @@ img {
 
 #pma_navigation_db_select {
   margin-top: 0.5em;
-  margin-#{$left}: 0.75em;
+  margin-left: 0.75em;
 
   select {
     border: 1px solid #bbb;
@@ -213,13 +213,13 @@ img {
 
 #pma_navigation_tree li {
   .dbItemControls {
-    padding-#{$right}: 4px;
+    padding-right: 4px;
     float: right;
   }
 
   .navItemControls {
     display: none;
-    padding-#{$right}: 4px;
+    padding-right: 4px;
     float: right;
   }
 
@@ -290,7 +290,7 @@ img {
       height: 2em;
       min-width: 16px;
       min-height: 16px;
-      float: $left;
+      float: left;
 
       &.double {
         width: 2.5em;
@@ -304,7 +304,7 @@ img {
         min-height: 8px;
         position: absolute;
         bottom: 0.7em;
-        #{$left}: 0.75em;
+        left: 0.75em;
         z-index: 0;
         margin-top: -4px;
       }
@@ -312,14 +312,14 @@ img {
       /* Top and right segments for the tree element connections */
       i {
         display: block;
-        border-#{$left}: 1px solid #616161;
+        border-left: 1px solid #616161;
         border-bottom: 1px solid #616161;
         position: relative;
         z-index: 0;
 
         /* Removes top segment */
         &.first {
-          border-#{$left}: 0;
+          border-left: 0;
         }
       }
 
@@ -328,44 +328,44 @@ img {
         display: block;
         height: 0.75em;
         bottom: 0;
-        #{$left}: 0.75em;
-        border-#{$left}: 1px solid #616161;
+        left: 0.75em;
+        border-left: 1px solid #616161;
       }
 
       a,
       u {
         position: absolute;
-        #{$left}: 50%;
+        left: 50%;
         top: 50%;
         z-index: 10;
       }
 
       a + a {
-        #{$left}: 100%;
+        left: 100%;
       }
 
       &.double {
         a,
         u {
-          #{$left}: 33%;
+          left: 33%;
         }
 
         a + a {
-          #{$left}: 85%;
+          left: 85%;
         }
       }
 
       img {
         position: relative;
         top: -0.6em;
-        #{$left}: 0;
-        margin-#{$left}: -7px;
+        left: 0;
+        margin-left: -7px;
       }
     }
 
     &.throbber img {
       top: 2px;
-      #{$left}: 2px;
+      left: 2px;
     }
   }
 
@@ -379,28 +379,28 @@ img {
       i {
         line-height: 1.5em;
         height: 1.5em;
-        padding-#{$left}: 0.3em;
+        padding-left: 0.3em;
       }
     }
   }
 
   .list_container {
-    border-#{$left}: 1px solid #616161;
-    margin-#{$left}: 0.75em;
-    padding-#{$left}: 0.75em;
+    border-left: 1px solid #616161;
+    margin-left: 0.75em;
+    padding-left: 0.75em;
   }
 
   .last > .list_container {
-    border-#{$left}: 0 solid #616161;
+    border-left: 0 solid #616161;
   }
 }
 
 /* Fast filter */
 li.fast_filter {
-  padding-#{$left}: 0.75em;
-  margin-#{$left}: 0.75em;
-  padding-#{$right}: 15px;
-  border-#{$left}: 1px solid #616161;
+  padding-left: 0.75em;
+  margin-left: 0.75em;
+  padding-right: 15px;
+  border-left: 1px solid #616161;
 
   input {
     width: 100%;
@@ -413,7 +413,7 @@ li.fast_filter {
 
   span {
     position: relative;
-    #{$right}: 1.5em;
+    right: 1.5em;
     padding: 0.2em;
     cursor: pointer;
     font-weight: bold;
@@ -422,8 +422,8 @@ li.fast_filter {
 
   &.db_fast_filter {
     border: 0;
-    margin-#{$left}: 0;
-    margin-#{$right}: 10px;
+    margin-left: 0;
+    margin-right: 10px;
   }
 }
 
@@ -432,7 +432,7 @@ li.fast_filter {
 }
 
 #pma_navigation_collapse {
-  padding-#{$right}: 2px;
+  padding-right: 2px;
 }
 
 #navigation_controls_outer.activePointer {
@@ -440,8 +440,8 @@ li.fast_filter {
 }
 
 #navigation_controls {
-  float: $right;
-  padding-#{$right}: 23px;
+  float: right;
+  padding-right: 23px;
 }
 
 /* Resize handler */
@@ -452,7 +452,7 @@ li.fast_filter {
   cursor: col-resize;
   position: fixed;
   top: 0;
-  #{$left}: $navi-width;
+  left: $navi-width;
   z-index: 801;
 }
 
@@ -466,7 +466,7 @@ li.fast_filter {
   color: #fff;
   position: fixed;
   top: 0;
-  #{$left}: $navi-width;
+  left: $navi-width;
   text-align: center;
   cursor: pointer;
   z-index: 801;
@@ -475,12 +475,12 @@ li.fast_filter {
 /* Quick warp links */
 .pma_quick_warp {
   margin-top: 5px;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
   position: relative;
 
   .drop_list {
-    float: $left;
-    margin-#{$left}: 3px;
+    float: left;
+    margin-left: 3px;
     padding: 2px 0;
   }
 
@@ -506,8 +506,8 @@ li.fast_filter {
       background: #fff;
       border: 1px solid #ddd;
       top: 100%;
-      #{$left}: 3px;
-      #{$right}: 0;
+      left: 3px;
+      right: 0;
       display: none;
       z-index: 802;
     }
@@ -534,8 +534,8 @@ li.fast_filter {
       padding: 0.2em 0.3em;
 
       &.favorite_table_anchor {
-        clear: $left;
-        float: $left;
+        clear: left;
+        float: left;
         padding: 0.1em 0.3em 0;
       }
     }
diff --git a/themes/metro/scss/_reboot.scss b/themes/metro/scss/_reboot.scss
index 8144360a1a..f141e0c8b3 100644
--- a/themes/metro/scss/_reboot.scss
+++ b/themes/metro/scss/_reboot.scss
@@ -7,7 +7,7 @@
 // Body
 
 body {
-  text-align: $left;
+  text-align: left;
 }
 
 // Forms
diff --git a/themes/metro/scss/_resizable-menu.scss b/themes/metro/scss/_resizable-menu.scss
index 42f581b36a..134f3c6a91 100644
--- a/themes/metro/scss/_resizable-menu.scss
+++ b/themes/metro/scss/_resizable-menu.scss
@@ -25,7 +25,7 @@ ul.resizable-menu {
     display: none;
     border: 1px #ddd solid;
     z-index: 2;
-    #{$right}: 0;
+    right: 0;
   }
 
   li:hover ul,
diff --git a/themes/metro/scss/_rte.scss b/themes/metro/scss/_rte.scss
index ab0fb66bde..b91ee4a4a6 100644
--- a/themes/metro/scss/_rte.scss
+++ b/themes/metro/scss/_rte.scss
@@ -27,7 +27,7 @@
     &[type="checkbox"],
     &[type="radio"] {
       width: auto;
-      margin-#{$right}: 6px;
+      margin-right: 6px;
     }
   }
 
diff --git a/themes/metro/scss/blueeyes-theme-rtl.scss b/themes/metro/scss/blueeyes-theme-rtl.scss
deleted file mode 100644
index aeaa7f7a26..0000000000
--- a/themes/metro/scss/blueeyes-theme-rtl.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color-scheme: blueeyes;
-$direction: rtl;
-
-@import "theme";
diff --git a/themes/metro/scss/mono-theme-rtl.scss b/themes/metro/scss/mono-theme-rtl.scss
deleted file mode 100644
index 7b382a27d3..0000000000
--- a/themes/metro/scss/mono-theme-rtl.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color-scheme: mono;
-$direction: rtl;
-
-@import "theme";
diff --git a/themes/metro/scss/redmond-theme-rtl.scss b/themes/metro/scss/redmond-theme-rtl.scss
deleted file mode 100644
index 4baa0a06a5..0000000000
--- a/themes/metro/scss/redmond-theme-rtl.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color-scheme: redmond;
-$direction: rtl;
-
-@import "theme";
diff --git a/themes/metro/scss/teal-theme-rtl.scss b/themes/metro/scss/teal-theme-rtl.scss
deleted file mode 100644
index 88b0f3dd1f..0000000000
--- a/themes/metro/scss/teal-theme-rtl.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color-scheme: teal;
-$direction: rtl;
-
-@import "theme";
diff --git a/themes/metro/scss/theme-rtl.scss b/themes/metro/scss/theme-rtl.scss
deleted file mode 100644
index 251a1f01c9..0000000000
--- a/themes/metro/scss/theme-rtl.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$direction: rtl;
-
-@import "theme";
diff --git a/themes/metro/scss/theme.scss b/themes/metro/scss/theme.scss
index c691d30226..2f02246ba5 100644
--- a/themes/metro/scss/theme.scss
+++ b/themes/metro/scss/theme.scss
@@ -1,5 +1,4 @@
 @import "font";
-@import "../../pmahomme/scss/direction";
 @import "variables";
 @import "../../bootstrap/scss/bootstrap";
 @import "common";
diff --git a/themes/original/scss/_alert.scss b/themes/original/scss/_alert.scss
index a7a5a688e2..d833811635 100644
--- a/themes/original/scss/_alert.scss
+++ b/themes/original/scss/_alert.scss
@@ -1,11 +1,6 @@
 .alert {
-  text-align: $left;
-
-  @if $direction == rtl {
-    padding: 0.1em 40px 0.1em 0.1em;
-  } @else {
-    padding: 0.1em 0.1em 0.1em 40px;
-  }
+  text-align: left;
+  padding: 0.1em 0.1em 0.1em 40px;
 
   h1 {
     border-bottom: 2px solid;
diff --git a/themes/original/scss/_breadcrumbs.scss b/themes/original/scss/_breadcrumbs.scss
index cf5fbd0aa7..68d9490c92 100644
--- a/themes/original/scss/_breadcrumbs.scss
+++ b/themes/original/scss/_breadcrumbs.scss
@@ -1,6 +1,6 @@
 .breadcrumb {
   font-weight: bold;
-  padding-#{$left}: 2.2em;
+  padding-left: 2.2em;
 }
 
 .breadcrumb-item {
diff --git a/themes/original/scss/_card.scss b/themes/original/scss/_card.scss
index 81e4292020..551428a2bd 100644
--- a/themes/original/scss/_card.scss
+++ b/themes/original/scss/_card.scss
@@ -31,8 +31,8 @@
     background: none;
     border-top: none;
     border-bottom: none;
-    border-#{$right}: none;
-    border-#{$left}: 0.3em solid $th-background;
+    border-right: none;
+    border-left: 0.3em solid $th-background;
 
     > .card-header + .card-body {
       padding-top: 1rem;
diff --git a/themes/original/scss/_common.scss b/themes/original/scss/_common.scss
index 799aaf66cb..d553792332 100644
--- a/themes/original/scss/_common.scss
+++ b/themes/original/scss/_common.scss
@@ -161,12 +161,12 @@ button {
 }
 
 .floatleft {
-  float: $left;
-  margin-#{$right}: 1em;
+  float: left;
+  margin-right: 1em;
 }
 
 .floatright {
-  float: $right;
+  float: right;
 }
 
 .pma-table {
@@ -184,13 +184,13 @@ button {
 
 .pma-table th.left,
 .pma-table td.left {
-  text-align: $left;
+  text-align: left;
 }
 
 .pma-table th.right,
 .pma-table td.right {
-  text-align: $right;
-  padding-#{$right}: 1em;
+  text-align: right;
+  padding-right: 1em;
 }
 
 .pma-table tr.vtop,
@@ -223,7 +223,7 @@ div.tools {
 
   /* avoid a thick line since this should be used under another fieldset */
   border-top: 0;
-  text-align: $right;
+  text-align: right;
   float: none;
   clear: both;
 }
@@ -234,7 +234,7 @@ fieldset.tblFooters {
 
   /* avoid a thick line since this should be used under another fieldset */
   border-top: 0;
-  text-align: $right;
+  text-align: right;
   float: none;
   clear: both;
 }
@@ -248,8 +248,8 @@ div.null_div {
 
 fieldset {
   .formelement {
-    float: $left;
-    margin-#{$right}: 0.5em;
+    float: left;
+    margin-right: 0.5em;
     white-space: nowrap;
   }
 
@@ -289,10 +289,10 @@ button.mult_submit {
 }
 
 .pma-table tr {
-  text-align: $left;
+  text-align: left;
 
   th {
-    text-align: $left;
+    text-align: left;
   }
 }
 
@@ -356,7 +356,7 @@ button.mult_submit {
 .pma-table {
   .valueHeader,
   .value {
-    text-align: $right;
+    text-align: right;
     white-space: normal;
   }
 
@@ -421,7 +421,7 @@ img.lightbulb {
 .icon {
   image-rendering: pixelated;
   vertical-align: middle;
-  margin-#{$left}: 0.3em;
+  margin-left: 0.3em;
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -432,12 +432,12 @@ img.lightbulb {
 }
 
 .selectallarrow {
-  margin-#{$right}: 0.3em;
-  margin-#{$left}: 0.6em;
+  margin-right: 0.3em;
+  margin-left: 0.6em;
 }
 
 .with-selected {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 /* message boxes: error, confirmation */
@@ -456,19 +456,13 @@ fieldset.confirmation {
   border: 0.1em solid #f00;
 
   legend {
-    border-#{$left}: 0.1em solid #f00;
-    border-#{$right}: 0.1em solid #f00;
+    border-left: 0.1em solid #f00;
+    border-right: 0.1em solid #f00;
     font-weight: bold;
     background-image: url("../img/s_really.png");
     background-repeat: no-repeat;
-
-    @if $direction == rtl {
-      background-position: 97% 50%;
-      padding: 0.2em 25px 0.2em 0.2em;
-    } @else {
-      background-position: 5px 50%;
-      padding: 0.2em 0.2em 0.2em 25px;
-    }
+    background-position: 5px 50% #{"/* rtl:97% 50% */"};
+    padding: 0.2em 0.2em 0.2em 25px;
   }
 }
 
@@ -596,7 +590,7 @@ div {
   }
 
   &#querychart {
-    float: $left;
+    float: left;
     width: 600px;
   }
 }
@@ -616,7 +610,7 @@ body#loginform {
   }
 
   div.container {
-    text-align: $left;
+    text-align: left;
     width: 30em;
     margin: 0 auto;
   }
@@ -631,11 +625,11 @@ div.container.modal_form {
 }
 
 #login_form {
-  text-align: $left;
+  text-align: left;
 }
 
 #login_form fieldset.tblFooters {
-  text-align: #{$right};
+  text-align: right;
 }
 
 #login_form select#select_server {
@@ -645,7 +639,7 @@ div.container.modal_form {
 div#modalOverlay {
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   height: 100%;
   width: 100%;
   background: #fff;
@@ -748,7 +742,7 @@ div#dataDisplay {
   input,
   select {
     margin: 0;
-    margin-#{$right}: 0.5em;
+    margin-right: 0.5em;
   }
 
   th {
@@ -791,23 +785,23 @@ form.clock {
 }
 
 div#tablestatistics table {
-  float: $left;
+  float: left;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
-  margin-#{$right}: 0.5em;
+  margin-right: 0.5em;
   min-width: 16em;
 }
 
 #topmenucontainer {
   background: white;
-  padding-#{$right}: 1em;
+  padding-right: 1em;
   width: 100%;
 }
 
 #page_nav_icons {
   position: fixed;
   top: 0;
-  #{$right}: 0;
+  right: 0;
   z-index: 99;
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
 }
@@ -850,20 +844,20 @@ div#tablestatistics table {
   }
 
   label {
-    float: $left;
+    float: left;
     display: block;
     width: 15em;
     max-width: 100%;
-    text-align: $right;
-    padding-#{$right}: 0.5em;
+    text-align: right;
+    padding-right: 0.5em;
   }
 
   span.options {
-    float: $left;
+    float: left;
     display: block;
     width: 12em;
     max-width: 100%;
-    padding-#{$right}: 0.5em;
+    padding-right: 0.5em;
 
     #select_pred_username,
     #select_pred_hostname,
@@ -875,7 +869,7 @@ div#tablestatistics table {
 
   input {
     width: 12em;
-    clear: $right;
+    clear: right;
     max-width: 100%;
   }
 
@@ -885,7 +879,7 @@ div#tablestatistics table {
 }
 
 #fieldset_user_priv div.item {
-  float: $left;
+  float: left;
   width: 9em;
   max-width: 100%;
 
@@ -904,11 +898,11 @@ div#tablestatistics table {
 
 #fieldset_user_global_rights fieldset,
 #fieldset_user_group_rights fieldset {
-  float: $left;
+  float: left;
 }
 
 #fieldset_user_global_rights > legend input {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 .linkElem:hover {
@@ -923,7 +917,7 @@ h3#serverstatusqueries span {
 }
 
 .buttonlinks {
-  float: $right;
+  float: right;
   white-space: nowrap;
 }
 
@@ -936,15 +930,15 @@ div#serverStatusTabs {
 }
 
 caption a.top {
-  float: $right;
+  float: right;
 }
 
 div {
   &#serverstatusquerieschart {
-    float: $left;
+    float: left;
     width: 500px;
     height: 350px;
-    margin-#{$right}: 50px;
+    margin-right: 50px;
   }
 }
 
@@ -972,7 +966,7 @@ div {
 div#chartVariableSettings {
   border: 1px solid #ddd;
   background-color: #e6e6e6;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 }
 
 table#chartGrid {
@@ -988,13 +982,13 @@ table#chartGrid {
 }
 
 div.tabLinks {
-  margin-#{$left}: 0.3em;
-  float: $left;
+  margin-left: 0.3em;
+  float: left;
   padding: 5px 0;
 
   a,
   label {
-    margin-#{$right}: 7px;
+    margin-right: 7px;
   }
 
   .icon {
@@ -1025,7 +1019,7 @@ div#logTable {
 }
 
 .smallIndent {
-  padding-#{$left}: 7px;
+  padding-left: 7px;
 }
 
 #sectionlinks {
@@ -1034,7 +1028,7 @@ div#logTable {
   border: 1px solid #ccc;
 
   a {
-    margin-#{$right}: 7px;
+    margin-right: 7px;
   }
 }
 
@@ -1042,19 +1036,19 @@ div#logTable {
 div#profilingchart {
   width: 850px;
   height: 370px;
-  float: $left;
+  float: left;
 }
 
 #profilingchart .jqplot-highlighter-tooltip {
   top: auto !important;
-  #{$left}: 11px;
+  left: 11px;
   bottom: 24px;
 }
 
 /* table charting */
 .chartOption {
-  float: $left;
-  margin-#{$right}: 40px;
+  float: left;
+  margin-right: 40px;
 }
 
 textarea {
@@ -1081,7 +1075,7 @@ textarea {
 
 #mysqlmaininformation,
 #pmamaininformation {
-  float: $left;
+  float: left;
   width: 49%;
 }
 
@@ -1111,7 +1105,7 @@ textarea {
 
 li.no_bullets {
   list-style-type: none !important;
-  margin-#{$left}: -25px !important;
+  margin-left: -25px !important;
 }
 
 /* end iconic view for ul items */
@@ -1136,7 +1130,7 @@ li.no_bullets {
 }
 
 #fieldset_select_fields {
-  float: $left;
+  float: left;
 }
 
 #selflink {
@@ -1145,19 +1139,19 @@ li.no_bullets {
   margin-top: 1em;
   margin-bottom: 1em;
   width: 98%;
-  margin-#{$left}: 1%;
+  margin-left: 1%;
   border-top: 0.1em solid silver;
-  text-align: $right;
+  text-align: right;
 }
 
 #qbe_div_table_list,
 #qbe_div_sql_query {
-  float: $left;
+  float: left;
 }
 
 label.desc {
   width: 30em;
-  float: $left;
+  float: left;
 
   sup {
     position: absolute;
@@ -1175,7 +1169,7 @@ code {
 
   &.php {
     display: block;
-    padding-#{$left}: 0.3em;
+    padding-left: 0.3em;
     margin-top: 0;
     margin-bottom: 0;
     max-height: 10em;
@@ -1213,7 +1207,7 @@ div.sqlvalidate {
 }
 
 .result_query div.sqlOuter {
-  text-align: $left;
+  text-align: left;
 }
 
 #PMA_slidingMessage code.sql {
@@ -1268,13 +1262,13 @@ div {
   &.upload_progress_bar_outer div.percentage {
     position: absolute;
     top: 0;
-    #{$left}: 0;
+    left: 0;
     width: 202px;
   }
 
   &.upload_progress_bar_inner div.percentage {
     top: -1px;
-    #{$left}: -1px;
+    left: -1px;
   }
 
   &#statustext {
@@ -1287,7 +1281,7 @@ table {
   &#serverconnection_trg_remote,
   &#serverconnection_src_local,
   &#serverconnection_trg_local {
-    float: $left;
+    float: left;
   }
 }
 
@@ -1317,9 +1311,9 @@ select.invalid_value,
   top: 0;
   position: fixed;
   margin-top: 0;
-  margin-#{$right}: auto;
+  margin-right: auto;
   margin-bottom: 0;
-  margin-#{$left}: auto;
+  margin-left: auto;
   // Keep a little space on the sides of the text
   padding: 3px 5px;
   width: 350px;
@@ -1328,8 +1322,8 @@ select.invalid_value,
   z-index: 1100;
   text-align: center;
   display: block;
-  #{$left}: 0;
-  #{$right}: 0;
+  left: 0;
+  right: 0;
   background-image: url("../img/ajax_clock_small.gif");
   background-repeat: no-repeat;
   background-position: 2%;
@@ -1412,7 +1406,7 @@ select.invalid_value,
 #ldi_options label.desc,
 #latex_options label.desc,
 #output label.desc {
-  float: $left;
+  float: left;
   width: 15em;
 }
 
@@ -1495,7 +1489,7 @@ input#input_import_file {
   width: 100%;
   height: 100%;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   background: #000;
   z-index: 1000;
   overflow: hidden;
@@ -1517,8 +1511,8 @@ input#input_import_file {
   list-style: none;
 
   li {
-    float: $left;
-    margin-#{$right}: 0.5em;
+    float: left;
+    margin-right: 0.5em;
   }
 
   .submenu li {
@@ -1532,17 +1526,17 @@ input#input_import_file {
 }
 
 #structure-action-links a {
-  margin-#{$right}: 1em;
+  margin-right: 1em;
 }
 
 #addColumns input {
   &[type="radio"] {
     margin: 0;
-    margin-#{$left}: 1em;
+    margin-left: 1em;
   }
 
   &[type="submit"] {
-    margin-#{$left}: 1em;
+    margin-left: 1em;
   }
 }
 
@@ -1565,14 +1559,14 @@ input#input_import_file {
   .slider {
     width: 10em;
     margin: 0.6em;
-    float: $left;
+    float: left;
   }
 
   .add_fields {
-    float: $left;
+    float: left;
 
     input {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
   }
 
@@ -1590,7 +1584,7 @@ table#index_columns {
 
   select {
     width: 85%;
-    float: $right;
+    float: right;
   }
 }
 
@@ -1628,7 +1622,7 @@ table#index_columns {
     font-weight: bold;
 
     li {
-      float: $left;
+      float: left;
 
       a {
         display: block;
@@ -1693,17 +1687,17 @@ table#index_columns {
 
     th {
       padding: 0.3em 0.3em 0.3em 0.5em;
-      text-align: $left;
+      text-align: left;
       vertical-align: top;
       background: transparent;
     }
 
     .doc {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
 
     .disabled-notice {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
       font-size: 80%;
       text-transform: uppercase;
       color: #e00;
@@ -1744,16 +1738,16 @@ fieldset {
 
   .group-field-1 th,
   .group-header-2 th {
-    padding-#{$left}: 1.5em;
+    padding-left: 1.5em;
   }
 
   .group-field-2 th,
   .group-header-3 th {
-    padding-#{$left}: 3em;
+    padding-left: 3em;
   }
 
   .group-field-3 th {
-    padding-#{$left}: 4.5em;
+    padding-left: 4.5em;
   }
 
   .disabled-field {
@@ -1850,7 +1844,7 @@ fieldset {
   }
 
   dd {
-    margin-#{$left}: 0.5em;
+    margin-left: 0.5em;
 
     &::before {
       content: "\25B8  ";
@@ -1863,12 +1857,12 @@ fieldset {
 }
 
 .prefsmanage_opts {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 #prefs_autoload {
   margin-bottom: 0.5em;
-  margin-#{$left}: 0.5em;
+  margin-left: 0.5em;
 }
 
 input#auto_increment_opt {
@@ -1890,7 +1884,7 @@ input#auto_increment_opt {
 }
 
 .wrapper {
-  float: $left;
+  float: left;
   margin-bottom: 0.5em;
 }
 
@@ -1902,8 +1896,8 @@ input#auto_increment_opt {
   line-height: 1.4em;
   height: 1.55em;
   overflow: hidden;
-  border-#{$right}: 0.1em solid #888;
-  border-#{$left}: 0.1em solid #888;
+  border-right: 0.1em solid #888;
+  border-left: 0.1em solid #888;
 
   table,
   td,
@@ -1934,20 +1928,20 @@ input#auto_increment_opt {
 .doubleFieldset {
   fieldset {
     width: 48%;
-    float: $left;
+    float: left;
     padding: 0;
 
     &.left {
-      margin-#{$right}: 1%;
+      margin-right: 1%;
     }
 
     &.right {
-      margin-#{$left}: 1%;
+      margin-left: 1%;
     }
   }
 
   legend {
-    margin-#{$left}: 0.5em;
+    margin-left: 0.5em;
   }
 
   div.wrap {
@@ -1995,7 +1989,7 @@ input#auto_increment_opt {
 #placeholder {
   position: relative;
   border: 1px solid #aaa;
-  float: $right;
+  float: right;
   overflow: hidden;
   width: 450px;
   height: 300px;
@@ -2015,50 +2009,50 @@ input#auto_increment_opt {
 }
 
 #left_arrow {
-  #{$left}: 8px;
+  left: 8px;
   top: 26px;
 }
 
 #right_arrow {
-  #{$left}: 26px;
+  left: 26px;
   top: 26px;
 }
 
 #up_arrow {
-  #{$left}: 17px;
+  left: 17px;
   top: 8px;
 }
 
 #down_arrow {
-  #{$left}: 17px;
+  left: 17px;
   top: 44px;
 }
 
 #zoom_in {
-  #{$left}: 17px;
+  left: 17px;
   top: 67px;
 }
 
 #zoom_world {
-  #{$left}: 17px;
+  left: 17px;
   top: 85px;
 }
 
 #zoom_out {
-  #{$left}: 17px;
+  left: 17px;
   top: 103px;
 }
 
 .colborder {
   cursor: col-resize;
   height: 100%;
-  margin-#{$left}: -5px;
+  margin-left: -5px;
   position: absolute;
   width: 5px;
 }
 
 .colborder_active {
-  border-#{$right}: 2px solid #a44;
+  border-right: 2px solid #a44;
 }
 
 .pma_table {
@@ -2120,7 +2114,7 @@ input#auto_increment_opt {
   height: $height;
   width: $width;
   margin-top: $height / -2;
-  margin-#{$left}: $width / -2;
+  margin-left: $width / -2;
   position: absolute;
   background: url("../img/col_pointer.png");
 }
@@ -2145,7 +2139,7 @@ input#auto_increment_opt {
 }
 
 .cDrop {
-  #{$left}: 0;
+  left: 0;
   position: absolute;
   top: 0;
 }
@@ -2154,7 +2148,7 @@ input#auto_increment_opt {
   background: url("../img/col_drop.png");
   cursor: pointer;
   height: 16px;
-  margin-#{$left}: 0.5em;
+  margin-left: 0.5em;
   margin-top: 0.3em;
   position: absolute;
   width: 16px;
@@ -2293,7 +2287,7 @@ input#auto_increment_opt {
 
   .edit_box_posting {
     background: #fff url("../img/ajax_clock_small.gif") no-repeat right center;
-    padding-#{$right}: 1.5em;
+    padding-right: 1.5em;
   }
 
   .edit_area_loading {
@@ -2310,7 +2304,7 @@ input#auto_increment_opt {
 
 .saving_edited_data {
   background: url("../img/ajax_clock_small.gif") no-repeat left;
-  padding-#{$left}: 20px;
+  padding-left: 20px;
 }
 
 /* css for timepicker */
@@ -2321,7 +2315,7 @@ input#auto_increment_opt {
   }
 
   dl {
-    text-align: $left;
+    text-align: left;
 
     dt {
       height: 25px;
@@ -2349,7 +2343,7 @@ input#auto_increment_opt {
   direction: rtl;
 
   dl {
-    text-align: $right;
+    text-align: right;
 
     dd {
       margin: 0 65px 10px 10px;
@@ -2385,7 +2379,7 @@ body #ui-datepicker-div {
 
   select {
     width: 125px;
-    margin-#{$right}: 5px;
+    margin-right: 5px;
   }
 }
 
@@ -2421,7 +2415,7 @@ table.show_create {
   margin-top: 1em;
 
   td {
-    border-#{$right}: 1px solid #bbb;
+    border-right: 1px solid #bbb;
   }
 }
 
@@ -2448,7 +2442,7 @@ table.show_create {
   width: 100%;
   position: fixed;
   bottom: 0;
-  #{$left}: 0;
+  left: 0;
   z-index: 100;
 }
 
@@ -2458,7 +2452,7 @@ textarea {
 
 #pma_console {
   position: relative;
-  margin-#{$left}: 240px;
+  margin-left: 240px;
   z-index: 100;
 
   .templates {
@@ -2485,7 +2479,7 @@ textarea {
       &:not(:hover) {
         display: inline-block;
         border-top-right-radius: 3px;
-        border-#{$right}: solid 1px #aaa;
+        border-right: solid 1px #aaa;
       }
 
       > .button {
@@ -2538,8 +2532,8 @@ textarea {
 
     .button,
     .text {
-      margin-#{$right}: 0.4em;
-      float: $right;
+      margin-right: 0.4em;
+      float: right;
     }
   }
 
@@ -2595,7 +2589,7 @@ textarea {
     }
 
     &::before {
-      #{$left}: -0.7em;
+      left: -0.7em;
       position: absolute;
       content: ">";
     }
@@ -2603,7 +2597,7 @@ textarea {
 
   .query_input {
     &::before {
-      #{$left}: -0.7em;
+      left: -0.7em;
       position: absolute;
       content: ">";
       top: -2px;
@@ -2781,17 +2775,17 @@ textarea {
     width: 94%;
     height: 100%;
     min-height: 48px;
-    #{$left}: 100%;
+    left: 100%;
     top: 0;
-    border-#{$left}: solid 1px #999;
+    border-left: solid 1px #999;
     z-index: 300;
-    transition: $left 0.2s;
-    -ms-transition: $left 0.2s;
-    -webkit-transition: $left 0.2s;
-    -moz-transition: $left 0.2s;
+    transition: left 0.2s;
+    -ms-transition: left 0.2s;
+    -webkit-transition: left 0.2s;
+    -moz-transition: left 0.2s;
 
     &.show {
-      #{$left}: 6%;
+      left: 6%;
       box-shadow: -2px 1px 4px -1px #999;
     }
   }
@@ -2804,7 +2798,7 @@ textarea {
 
 #pma_bookmarks .content.add_bookmark {
   .options {
-    margin-#{$left}: 1.4em;
+    margin-left: 1.4em;
     padding-bottom: 0.4em;
     margin-bottom: 0.4em;
     border-bottom: solid 1px #ccc;
@@ -2849,7 +2843,7 @@ textarea {
   }
 
   .count {
-    margin-#{$right}: 8px;
+    margin-right: 8px;
   }
 
   .show_trace .trace,
@@ -2885,13 +2879,13 @@ textarea {
   }
 
   .debug_summary {
-    float: $left;
+    float: left;
   }
 
   .trace.welcome .time,
   .traceStep .file,
   .script_name {
-    float: $right;
+    float: right;
   }
 
   .traceStep .args pre {
@@ -2935,7 +2929,7 @@ textarea {
   display: none;
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
   height: 100%;
@@ -2950,23 +2944,16 @@ textarea {
   display: none;
   position: fixed;
   bottom: 0;
-  #{$right}: 25px;
+  right: 25px;
   width: 400px;
   border: 1px solid #999;
   background: #f3f3f3;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
-
-  @if $direction == rtl {
-    -moz-box-shadow: -2px 2px 5px #ccc;
-    -webkit-box-shadow: -2px 2px 5px #ccc;
-    box-shadow: -2px 2px 5px #ccc;
-  } @else {
-    -moz-box-shadow: 2px 2px 5px #ccc;
-    -webkit-box-shadow: 2px 2px 5px #ccc;
-    box-shadow: 2px 2px 5px #ccc;
-  }
+  -moz-box-shadow: 2px 2px 5px #ccc;
+  -webkit-box-shadow: 2px 2px 5px #ccc;
+  box-shadow: 2px 2px 5px #ccc;
 
   h2 {
     background-color: #bbb;
@@ -2977,16 +2964,9 @@ textarea {
     font-size: 1.6em;
     font-weight: normal;
     text-shadow: 0 1px 0 #777;
-
-    @if $direction == rtl {
-      -moz-box-shadow: -1px 1px 15px #999 inset;
-      -webkit-box-shadow: -1px 1px 15px #999 inset;
-      box-shadow: -1px 1px 15px #999 inset;
-    } @else {
-      -moz-box-shadow: 1px 1px 15px #999 inset;
-      -webkit-box-shadow: 1px 1px 15px #999 inset;
-      box-shadow: 1px 1px 15px #999 inset;
-    }
+    -moz-box-shadow: 1px 1px 15px #999 inset;
+    -webkit-box-shadow: 1px 1px 15px #999 inset;
+    box-shadow: 1px 1px 15px #999 inset;
   }
 }
 
@@ -2999,16 +2979,9 @@ textarea {
   font-size: 1.6em;
   font-weight: normal;
   text-shadow: 0 1px 0 #777;
-
-  @if $direction == rtl {
-    -moz-box-shadow: -1px 1px 15px #999 inset;
-    -webkit-box-shadow: -1px 1px 15px #999 inset;
-    box-shadow: -1px 1px 15px #999 inset;
-  } @else {
-    -moz-box-shadow: 1px 1px 15px #999 inset;
-    -webkit-box-shadow: 1px 1px 15px #999 inset;
-    box-shadow: 1px 1px 15px #999 inset;
-  }
+  -moz-box-shadow: 1px 1px 15px #999 inset;
+  -webkit-box-shadow: 1px 1px 15px #999 inset;
+  box-shadow: 1px 1px 15px #999 inset;
 }
 
 .pma_sql_import_status {
@@ -3025,21 +2998,21 @@ textarea {
       background: white;
 
       .filesize {
-        float: $right;
+        float: right;
       }
     }
   }
 
   h2 {
     .minimize {
-      float: $right;
-      margin-#{$right}: 5px;
+      float: right;
+      margin-right: 5px;
       padding: 0 10px;
     }
 
     .close {
-      float: $right;
-      margin-#{$right}: 5px;
+      float: right;
+      margin-right: 5px;
       padding: 0 10px;
       display: none;
     }
@@ -3069,7 +3042,7 @@ textarea {
 .pma_drop_result {
   position: fixed;
   top: 10%;
-  #{$left}: 20%;
+  left: 20%;
   width: 60%;
   background: white;
   min-height: 300px;
@@ -3079,8 +3052,8 @@ textarea {
   cursor: move;
 
   h2 .close {
-    float: $right;
-    margin-#{$right}: 5px;
+    float: right;
+    margin-right: 5px;
     padding: 0 10px;
   }
 }
@@ -3121,7 +3094,7 @@ span.drag_icon {
       background-position: right center;
       display: inline-table;
       vertical-align: middle;
-      float: $right;
+      float: right;
     }
   }
 
@@ -3151,16 +3124,16 @@ span.drag_icon {
 body {
   .ui-dialog {
     .ui-dialog-titlebar-close {
-      #{$right}: 0.3em;
-      #{$left}: initial;
+      right: 0.3em;
+      left: initial;
     }
 
     .ui-dialog-title {
-      float: $left;
+      float: left;
     }
 
     .ui-dialog-buttonpane .ui-dialog-buttonset {
-      float: $right;
+      float: right;
     }
   }
 
@@ -3366,11 +3339,11 @@ body {
 // Extra large devices (large desktops, 1200px and up)
 @include media-breakpoint-up(xl) {
   div.tools {
-    text-align: #{$left};
+    text-align: left;
   }
 
   fieldset.tblFooters,
   .tblFooters {
-    text-align: #{$left};
+    text-align: left;
   }
 }
diff --git a/themes/original/scss/_icons.scss b/themes/original/scss/_icons.scss
index 291ad12934..25798b7f93 100644
--- a/themes/original/scss/_icons.scss
+++ b/themes/original/scss/_icons.scss
@@ -1,6 +1,6 @@
 .icon {
   margin: 0;
-  margin-#{$left}: 0.3em;
+  margin-left: 0.3em;
   padding: 0 !important;
   width: 16px;
   height: 16px;
diff --git a/themes/original/scss/_list-group.scss b/themes/original/scss/_list-group.scss
index 572aaf10b3..08bfcc191b 100644
--- a/themes/original/scss/_list-group.scss
+++ b/themes/original/scss/_list-group.scss
@@ -1,5 +1,5 @@
 .list-group {
-  padding-#{$left}: 40px;
+  padding-left: 40px;
   margin: 1rem 0 0;
 }
 
@@ -16,6 +16,6 @@
 #li_select_theme {
   &.list-group-item {
     display: block;
-    margin-#{$left}: -20px;
+    margin-left: -20px;
   }
 }
diff --git a/themes/original/scss/_nav.scss b/themes/original/scss/_nav.scss
index 4d870f4bf9..94481b82f1 100644
--- a/themes/original/scss/_nav.scss
+++ b/themes/original/scss/_nav.scss
@@ -13,7 +13,7 @@
     }
 
     img {
-      margin-#{$right}: 0.1em;
+      margin-right: 0.1em;
       vertical-align: middle;
     }
   }
diff --git a/themes/original/scss/_navbar.scss b/themes/original/scss/_navbar.scss
index fc7c21ce60..a6aab31b65 100644
--- a/themes/original/scss/_navbar.scss
+++ b/themes/original/scss/_navbar.scss
@@ -4,7 +4,7 @@
 
 .navbar-nav .icon {
   vertical-align: middle;
-  margin-#{$right}: 0.1em;
+  margin-right: 0.1em;
 }
 
 .navbar-nav .nav-item {
diff --git a/themes/original/scss/_navigation.scss b/themes/original/scss/_navigation.scss
index 0fc67292c7..3e6c41d41a 100644
--- a/themes/original/scss/_navigation.scss
+++ b/themes/original/scss/_navigation.scss
@@ -5,7 +5,7 @@
   height: 100%;
   position: absolute;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   z-index: 0;
   padding-bottom: 1em;
 }
@@ -17,9 +17,9 @@
   overflow: hidden;
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   height: 100vh;
-  border-#{$right}: 1px solid gray;
+  border-right: 1px solid gray;
   z-index: 800;
 
   ul {
@@ -43,8 +43,8 @@
     &.pageselector {
       text-align: center;
       margin: 0 0 0;
-      margin-#{$left}: 0.75em;
-      border-#{$left}: 1px solid #666;
+      margin-left: 0.75em;
+      border-left: 1px solid #666;
     }
 
     &#pmalogo {
@@ -101,14 +101,14 @@
 
 #pma_navigation_tree {
   margin: 0;
-  margin-#{$left}: 1em;
+  margin-left: 1em;
   color: #444;
   height: 74%;
   position: relative;
 }
 
 #pma_navigation_select_database {
-  text-align: $left;
+  text-align: left;
   padding: 0 0 0;
   border: 0;
   margin: 0;
@@ -116,7 +116,7 @@
 
 #pma_navigation_db_select {
   margin-top: 0.5em;
-  margin-#{$left}: 0.75em;
+  margin-left: 0.75em;
 
   select {
     background: url("../../pmahomme/img/select_bg.png") repeat scroll 0 0;
@@ -166,13 +166,13 @@
     }
 
     .dbItemControls {
-      padding-#{$right}: 4px;
+      padding-right: 4px;
       float: right;
     }
 
     .navItemControls {
       display: none;
-      padding-#{$right}: 4px;
+      padding-right: 4px;
       float: right;
     }
 
@@ -217,7 +217,7 @@
     height: 1.5em;
     min-width: 16px;
     min-height: 16px;
-    float: $left;
+    float: left;
 
     &.double {
       width: 3em;
@@ -231,18 +231,18 @@
       min-height: 8px;
       position: absolute;
       bottom: 0.7em;
-      #{$left}: 0.75em;
+      left: 0.75em;
       z-index: 0;
     }
 
     i {
-      border-#{$left}: 1px solid #666;
+      border-left: 1px solid #666;
       border-bottom: 1px solid #666;
       position: relative;
       z-index: 0;
 
       &.first {
-        border-#{$left}: 0;
+        border-left: 0;
       }
     }
 
@@ -250,38 +250,38 @@
       display: block;
       height: 0.75em;
       bottom: 0;
-      #{$left}: 0.75em;
-      border-#{$left}: 1px solid #666;
+      left: 0.75em;
+      border-left: 1px solid #666;
     }
 
     a,
     u {
       position: absolute;
-      #{$left}: 50%;
+      left: 50%;
       top: 50%;
       z-index: 10;
     }
 
     a + a {
-      #{$left}: 100%;
+      left: 100%;
     }
 
     &.double {
       a,
       u {
-        #{$left}: 25%;
+        left: 25%;
       }
 
       a + a {
-        #{$left}: 70%;
+        left: 70%;
       }
     }
 
     img {
       position: relative;
       top: -0.6em;
-      #{$left}: 0;
-      margin-#{$left}: -5px;
+      left: 0;
+      margin-left: -5px;
     }
   }
 
@@ -295,36 +295,36 @@
       i {
         line-height: 1.5em;
         height: 1.5em;
-        padding-#{$left}: 0.3em;
+        padding-left: 0.3em;
       }
     }
   }
 
   .list_container {
-    border-#{$left}: 1px solid #666;
-    margin-#{$left}: 0.75em;
-    padding-#{$left}: 0.75em;
+    border-left: 1px solid #666;
+    margin-left: 0.75em;
+    padding-left: 0.75em;
   }
 
   .last > .list_container {
-    border-#{$left}: 0 solid #666;
+    border-left: 0 solid #666;
   }
 }
 
 li.fast_filter {
-  padding-#{$left}: 0.75em;
-  margin-#{$left}: 0.75em;
-  padding-#{$right}: 35px;
-  border-#{$left}: 1px solid #666;
+  padding-left: 0.75em;
+  margin-left: 0.75em;
+  padding-right: 35px;
+  border-left: 1px solid #666;
 
   input {
-    padding-#{$right}: 1.7em;
+    padding-right: 1.7em;
     width: 100%;
   }
 
   span {
     position: relative;
-    #{$right}: 1.5em;
+    right: 1.5em;
     padding: 0.2em;
     cursor: pointer;
     font-weight: bold;
@@ -343,12 +343,12 @@ html.ie {
   }
 
   li.fast_filter input {
-    padding-#{$right}: 0.2em;
+    padding-right: 0.2em;
   }
 
   &.ie9 li.fast_filter input,
   &.ie8 li.fast_filter input {
-    padding-#{$right}: 1.7em;
+    padding-right: 1.7em;
   }
 }
 
@@ -364,7 +364,7 @@ li.fast_filter.db_fast_filter {
   cursor: col-resize;
   position: fixed;
   top: 0;
-  #{$left}: $navi-width;
+  left: $navi-width;
   z-index: 801;
 }
 
@@ -377,7 +377,7 @@ li.fast_filter.db_fast_filter {
   font-weight: bold;
   position: fixed;
   top: 0;
-  #{$left}: $navi-width;
+  left: $navi-width;
   text-align: center;
   cursor: pointer;
   z-index: 800;
@@ -395,18 +395,18 @@ li.fast_filter.db_fast_filter {
 }
 
 #navigation_controls {
-  float: $right;
-  padding-#{$right}: 23px;
+  float: right;
+  padding-right: 23px;
 }
 
 .pma_quick_warp {
   margin-top: 5px;
-  margin-#{$left}: 2px;
+  margin-left: 2px;
   position: relative;
 
   .drop_list {
-    float: $left;
-    margin-#{$left}: 3px;
+    float: left;
+    margin-left: 3px;
     padding: 2px 0;
   }
 
@@ -434,8 +434,8 @@ li.fast_filter.db_fast_filter {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       top: 100%;
-      #{$left}: 3px;
-      #{$right}: 0;
+      left: 3px;
+      right: 0;
       display: none;
       z-index: 802;
     }
@@ -461,8 +461,8 @@ li.fast_filter.db_fast_filter {
       padding: 0.1em 0.3em;
 
       &.favorite_table_anchor {
-        clear: $left;
-        float: $left;
+        clear: left;
+        float: left;
         padding: 0.1em 0.3em 0;
       }
     }
diff --git a/themes/original/scss/_reboot.scss b/themes/original/scss/_reboot.scss
index 0b85978ccb..5cf113df9e 100644
--- a/themes/original/scss/_reboot.scss
+++ b/themes/original/scss/_reboot.scss
@@ -1,7 +1,7 @@
 // Body
 
 body {
-  text-align: $left;
+  text-align: left;
 }
 
 // Forms
diff --git a/themes/original/scss/theme-rtl.scss b/themes/original/scss/theme-rtl.scss
deleted file mode 100644
index 251a1f01c9..0000000000
--- a/themes/original/scss/theme-rtl.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$direction: rtl;
-
-@import "theme";
diff --git a/themes/original/scss/theme.scss b/themes/original/scss/theme.scss
index fdda5a92a4..31112d3e3a 100644
--- a/themes/original/scss/theme.scss
+++ b/themes/original/scss/theme.scss
@@ -1,4 +1,3 @@
-@import "../../pmahomme/scss/direction";
 @import "variables";
 @import "../../bootstrap/scss/bootstrap";
 @import "common";
diff --git a/themes/pmahomme/scss/_alert.scss b/themes/pmahomme/scss/_alert.scss
index ea27bb141b..d3877257f9 100644
--- a/themes/pmahomme/scss/_alert.scss
+++ b/themes/pmahomme/scss/_alert.scss
@@ -1,16 +1,10 @@
 .alert {
-  text-align: $left;
+  text-align: left;
   -moz-box-shadow: 0 1px 1px #fff inset;
   -webkit-box-shadow: 0 1px 1px #fff inset;
   box-shadow: 0 1px 1px #fff inset;
-
-  @if $direction == rtl {
-    background-position: 99% 50%;
-    padding: 10px 35px 10px 10px;
-  } @else {
-    background-position: 10px 50%;
-    padding: 10px 10px 10px 10px;
-  }
+  background-position: 10px 50% #{"/* rtl:99% 50% */"};
+  padding: 10px 10px 10px 10px;
 
   a {
     text-decoration: underline;
diff --git a/themes/pmahomme/scss/_breadcrumb.scss b/themes/pmahomme/scss/_breadcrumb.scss
index c6d25dbb08..a315bb3009 100644
--- a/themes/pmahomme/scss/_breadcrumb.scss
+++ b/themes/pmahomme/scss/_breadcrumb.scss
@@ -1,5 +1,5 @@
 .breadcrumb {
-  padding-#{$left}: 2.2em;
+  padding-left: 2.2em;
   text-shadow: 0 1px 0 #000;
 }
 
diff --git a/themes/pmahomme/scss/_card.scss b/themes/pmahomme/scss/_card.scss
index ecbc5c6bb2..2b016fdc01 100644
--- a/themes/pmahomme/scss/_card.scss
+++ b/themes/pmahomme/scss/_card.scss
@@ -9,17 +9,10 @@
 
 .card,
 .card-footer {
-  @if $direction == rtl {
-    text-shadow: -1px 1px 2px #fff inset;
-    -moz-box-shadow: -1px 1px 2px #fff inset;
-    -webkit-box-shadow: -1px 1px 2px #fff inset;
-    box-shadow: -1px 1px 2px #fff inset;
-  } @else {
-    text-shadow: 1px 1px 2px #fff inset;
-    -moz-box-shadow: 1px 1px 2px #fff inset;
-    -webkit-box-shadow: 1px 1px 2px #fff inset;
-    box-shadow: 1px 1px 2px #fff inset;
-  }
+  text-shadow: 1px 1px 2px #fff inset;
+  -moz-box-shadow: 1px 1px 2px #fff inset;
+  -webkit-box-shadow: 1px 1px 2px #fff inset;
+  box-shadow: 1px 1px 2px #fff inset;
 }
 
 .card-header {
@@ -66,16 +59,9 @@
   .card {
     background-color: $navi-background;
     border: $card-border-width solid #999;
-
-    @if $direction == rtl {
-      -moz-box-shadow: -2px 2px 5px #ccc;
-      -webkit-box-shadow: -2px 2px 5px #ccc;
-      box-shadow: -2px 2px 5px #ccc;
-    } @else {
-      -moz-box-shadow: 2px 2px 5px #ccc;
-      -webkit-box-shadow: 2px 2px 5px #ccc;
-      box-shadow: 2px 2px 5px #ccc;
-    }
+    -moz-box-shadow: 2px 2px 5px #ccc;
+    -webkit-box-shadow: 2px 2px 5px #ccc;
+    box-shadow: 2px 2px 5px #ccc;
 
     > .card-header + .card-body {
       padding-top: $card-spacer-x;
diff --git a/themes/pmahomme/scss/_codemirror.scss b/themes/pmahomme/scss/_codemirror.scss
index 6ed32a8989..d2d79d15fb 100644
--- a/themes/pmahomme/scss/_codemirror.scss
+++ b/themes/pmahomme/scss/_codemirror.scss
@@ -74,9 +74,9 @@ span {
 
 .autocomplete-column-hint {
   display: inline-block;
-  float: $right;
+  float: right;
   color: #666;
-  margin-#{$left}: 1em;
+  margin-left: 1em;
 }
 
 .CodeMirror-hints {
diff --git a/themes/pmahomme/scss/_common.scss b/themes/pmahomme/scss/_common.scss
index 607f72ae41..373015efec 100644
--- a/themes/pmahomme/scss/_common.scss
+++ b/themes/pmahomme/scss/_common.scss
@@ -16,7 +16,7 @@ h2 {
   font-weight: normal;
   text-shadow: 0 1px 0 #fff;
   padding: 10px 0 10px;
-  padding-#{$left}: 3px;
+  padding-left: 3px;
   color: #777;
 
   // Hiding icons in the page titles
@@ -306,18 +306,10 @@ fieldset {
   border: #aaa solid 1px;
   padding: 0.5em;
   background: #eee;
-
-  @if $direction == rtl {
-    text-shadow: -1px 1px 2px #fff inset;
-    -moz-box-shadow: -1px 1px 2px #fff inset;
-    -webkit-box-shadow: -1px 1px 2px #fff inset;
-    box-shadow: -1px 1px 2px #fff inset;
-  } @else {
-    text-shadow: 1px 1px 2px #fff inset;
-    -moz-box-shadow: 1px 1px 2px #fff inset;
-    -webkit-box-shadow: 1px 1px 2px #fff inset;
-    box-shadow: 1px 1px 2px #fff inset;
-  }
+  text-shadow: 1px 1px 2px #fff inset;
+  -moz-box-shadow: 1px 1px 2px #fff inset;
+  -webkit-box-shadow: 1px 1px 2px #fff inset;
+  box-shadow: 1px 1px 2px #fff inset;
 }
 
 fieldset {
@@ -374,11 +366,11 @@ button {
 }
 
 .pma-table thead th {
-  border-#{$right}: 1px solid #fff;
+  border-right: 1px solid #fff;
 }
 
 .pma-table th {
-  text-align: $left;
+  text-align: left;
 }
 
 img,
@@ -417,12 +409,12 @@ select {
 }
 
 .floatleft {
-  float: $left;
-  margin-#{$right}: 1em;
+  float: left;
+  margin-right: 1em;
 }
 
 .floatright {
-  float: $right;
+  float: right;
 }
 
 .displayblock {
@@ -444,13 +436,13 @@ select {
 
 .pma-table th.left,
 .pma-table td.left {
-  text-align: $left;
+  text-align: left;
 }
 
 .pma-table th.right,
 .pma-table td.right {
-  text-align: $right;
-  padding-#{$right}: 1em;
+  text-align: right;
+  padding-right: 1em;
 }
 
 .pma-table tr.vtop {
@@ -509,7 +501,7 @@ div.tools {
   margin-bottom: 0.5em;
   // avoid a thick line since this should be used under another fieldset
   border-top: 0;
-  text-align: $right;
+  text-align: right;
   float: none;
   clear: both;
   -webkit-border-radius: 0 0 4px 4px;
@@ -522,7 +514,7 @@ fieldset.tblFooters {
   margin-bottom: 0.5em;
   // avoid a thick line since this should be used under another fieldset
   border-top: 0;
-  text-align: $right;
+  text-align: right;
   float: none;
   clear: both;
   -webkit-border-radius: 0 0 4px 4px;
@@ -539,8 +531,8 @@ div.null_div {
 
 fieldset {
   .formelement {
-    float: $left;
-    margin-#{$right}: 0.5em;
+    float: left;
+    margin-right: 0.5em;
     // IE
     white-space: nowrap;
   }
@@ -578,10 +570,10 @@ button.mult_submit {
 }
 
 .pma-table tr {
-  text-align: $left;
+  text-align: left;
 
   th {
-    text-align: $left;
+    text-align: left;
   }
 }
 
@@ -632,13 +624,14 @@ button.mult_submit {
   border-width: 0 1px 1px 1px;
 }
 
-@if $direction == ltr {
+/* rtl:begin:remove */
+.before-condition {
   // for first th which must have right border set (ltr only)
-  .before-condition {
-    border-#{$right}: 1px solid $browse-marker-color;
-  }
+  border-right: 1px solid $browse-marker-color;
 }
 
+/* rtl:end:remove */
+
 /**
  * cells with the value NULL
  */
@@ -650,7 +643,7 @@ button.mult_submit {
 .pma-table table {
   .valueHeader,
   .value {
-    text-align: $right;
+    text-align: right;
     white-space: normal;
   }
 
@@ -714,12 +707,12 @@ img.lightbulb {
 }
 
 .selectallarrow {
-  margin-#{$right}: 0.3em;
-  margin-#{$left}: 0.6em;
+  margin-right: 0.3em;
+  margin-left: 0.6em;
 }
 
 .with-selected {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 // message boxes: error, confirmation
@@ -853,18 +846,18 @@ body#loginform {
   }
 
   div.container {
-    text-align: $left;
+    text-align: left;
     width: 30em;
     margin: 0 auto;
   }
 }
 
 #login_form {
-  text-align: $left;
+  text-align: left;
 }
 
 #login_form fieldset.tblFooters {
-  text-align: #{$right};
+  text-align: right;
 }
 
 div.container.modal_form {
@@ -878,7 +871,7 @@ div.container.modal_form {
 div#modalOverlay {
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   height: 100%;
   width: 100%;
   background: #fff;
@@ -1000,7 +993,7 @@ div#dataDisplay {
   input,
   select {
     margin: 0;
-    margin-#{$right}: 0.5em;
+    margin-right: 0.5em;
   }
 
   th {
@@ -1044,9 +1037,9 @@ form.clock {
 
 // table stats
 div#tablestatistics table {
-  float: $left;
+  float: left;
   margin-bottom: 0.5em;
-  margin-#{$right}: 1.5em;
+  margin-right: 1.5em;
   margin-top: 0.5em;
   min-width: 16em;
 }
@@ -1055,14 +1048,14 @@ div#tablestatistics table {
 
 // Heading
 #topmenucontainer {
-  padding-#{$right}: 1em;
+  padding-right: 1em;
   width: 100%;
 }
 
 #page_nav_icons {
   position: fixed;
   top: 0;
-  #{$right}: 0;
+  right: 0;
   z-index: 99;
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
 }
@@ -1108,27 +1101,27 @@ div#tablestatistics table {
   }
 
   label {
-    float: $left;
+    float: left;
     display: block;
     width: 10em;
     max-width: 100%;
-    text-align: $right;
-    padding-#{$right}: 0.5em;
+    text-align: right;
+    padding-right: 0.5em;
     margin-bottom: 0;
   }
 
   input {
     width: 12em;
-    clear: $right;
+    clear: right;
     max-width: 100%;
   }
 
   span.options {
-    float: $left;
+    float: left;
     display: block;
     width: 12em;
     max-width: 100%;
-    padding-#{$right}: 0.5em;
+    padding-right: 0.5em;
 
     #select_pred_username,
     #select_pred_hostname,
@@ -1144,7 +1137,7 @@ div#tablestatistics table {
 }
 
 #fieldset_user_priv div.item {
-  float: $left;
+  float: left;
   width: 9em;
   max-width: 100%;
 
@@ -1163,11 +1156,11 @@ div#tablestatistics table {
 
 #fieldset_user_global_rights fieldset,
 #fieldset_user_group_rights fieldset {
-  float: $left;
+  float: left;
 }
 
 #fieldset_user_global_rights > legend input {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 // end user privileges
 
@@ -1185,7 +1178,7 @@ h3#serverstatusqueries span {
 }
 
 .buttonlinks {
-  float: $right;
+  float: right;
   white-space: nowrap;
 }
 
@@ -1199,14 +1192,14 @@ div#serverStatusTabs {
 }
 
 caption a.top {
-  float: $right;
+  float: right;
 }
 
 div#serverstatusquerieschart {
-  float: $left;
+  float: left;
   width: 500px;
   height: 350px;
-  margin-#{$right}: 50px;
+  margin-right: 50px;
 }
 
 div {
@@ -1233,7 +1226,7 @@ div {
 div#chartVariableSettings {
   border: 1px solid #ddd;
   background-color: #e6e6e6;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 }
 
 table#chartGrid {
@@ -1249,12 +1242,12 @@ table#chartGrid {
 }
 
 div.tabLinks {
-  float: $left;
+  float: left;
   padding: 5px 0;
 
   a,
   label {
-    margin-#{$right}: 7px;
+    margin-right: 7px;
   }
 
   .icon {
@@ -1270,16 +1263,9 @@ div.tabLinks {
   padding: 3px;
   background-color: #fff;
   z-index: 2;
-
-  @if $direction == rtl {
-    -moz-box-shadow: -2px 2px 3px #666;
-    -webkit-box-shadow: -2px 2px 3px #666;
-    box-shadow: -2px 2px 3px #666;
-  } @else {
-    -moz-box-shadow: 2px 2px 3px #666;
-    -webkit-box-shadow: 2px 2px 3px #666;
-    box-shadow: 2px 2px 3px #666;
-  }
+  -moz-box-shadow: 2px 2px 3px #666;
+  -webkit-box-shadow: 2px 2px 3px #666;
+  box-shadow: 2px 2px 3px #666;
 }
 
 div {
@@ -1312,13 +1298,13 @@ div {
     table.queryNums {
       display: none;
       border: 0;
-      text-align: $left;
+      text-align: left;
     }
   }
 }
 
 .smallIndent {
-  padding-#{$left}: 7px;
+  padding-left: 7px;
 }
 
 // end serverstatus
@@ -1328,12 +1314,12 @@ div {
 div#profilingchart {
   width: 850px;
   height: 370px;
-  float: $left;
+  float: left;
 }
 
 #profilingchart .jqplot-highlighter-tooltip {
   top: auto !important;
-  #{$left}: 11px;
+  left: 11px;
   bottom: 24px;
 }
 
@@ -1350,8 +1336,8 @@ div#profilingchart {
 }
 
 .chartOption {
-  float: $left;
-  margin-#{$right}: 40px;
+  float: left;
+  margin-right: 40px;
 }
 
 // end table charting
@@ -1388,7 +1374,7 @@ a.button {
   font-weight: bold;
   text-shadow: 0 1px 0 #fff;
   margin-bottom: 7px;
-  margin-#{$left}: 7px;
+  margin-left: 7px;
   border: 1px solid #aaa;
   padding: 7px;
   color: #111 !important;
@@ -1429,7 +1415,7 @@ textarea {
 
 #mysqlmaininformation,
 #pmamaininformation {
-  float: $left;
+  float: left;
   width: 49%;
 }
 
@@ -1460,7 +1446,7 @@ textarea {
 
 li.no_bullets {
   list-style-type: none !important;
-  margin-#{$left}: -25px !important; //align with other list items which have bullets
+  margin-left: -25px !important; //align with other list items which have bullets
 }
 
 // end iconic view for ul items
@@ -1485,7 +1471,7 @@ li.no_bullets {
 }
 
 #fieldset_select_fields {
-  float: $left;
+  float: left;
 }
 
 #selflink {
@@ -1494,19 +1480,19 @@ li.no_bullets {
   margin-top: 1em;
   margin-bottom: 1em;
   width: 98%;
-  margin-#{$left}: 1%;
-  text-align: $right;
+  margin-left: 1%;
+  text-align: right;
   border-top: 0.1em solid silver;
 }
 
 #qbe_div_table_list,
 #qbe_div_sql_query {
-  float: $left;
+  float: left;
 }
 
 label.desc {
   width: 30em;
-  float: $left;
+  float: left;
 
   sup {
     position: absolute;
@@ -1525,7 +1511,7 @@ code {
 
   &.php {
     display: block;
-    padding-#{$left}: 1em;
+    padding-left: 1em;
     margin-top: 0;
     margin-bottom: 0;
     max-height: 10em;
@@ -1556,7 +1542,7 @@ div.sqlvalidate {
 
 .result_query div.sqlOuter {
   background: $bg-one;
-  text-align: $left;
+  text-align: left;
 }
 
 #PMA_slidingMessage code.sql,
@@ -1599,7 +1585,7 @@ div {
     div.percentage {
       position: absolute;
       top: 0;
-      #{$left}: 0;
+      left: 0;
       width: 202px;
     }
   }
@@ -1615,7 +1601,7 @@ div {
 
     div.percentage {
       top: -1px;
-      #{$left}: -1px;
+      left: -1px;
     }
   }
 
@@ -1629,7 +1615,7 @@ table {
   &#serverconnection_trg_remote,
   &#serverconnection_src_local,
   &#serverconnection_trg_local {
-    float: $left;
+    float: left;
   }
 }
 
@@ -1658,9 +1644,9 @@ select.invalid_value,
   top: 0;
   position: fixed;
   margin-top: 200px;
-  margin-#{$right}: auto;
+  margin-right: auto;
   margin-bottom: 0;
-  margin-#{$left}: auto;
+  margin-left: auto;
   // Keep a little space on the sides of the text
   padding: 5px;
   width: 350px;
@@ -1668,8 +1654,8 @@ select.invalid_value,
   z-index: 1100;
   text-align: center;
   display: inline;
-  #{$left}: 0;
-  #{$right}: 0;
+  left: 0;
+  right: 0;
   background-image: url("../img/ajax_clock_small.gif");
   background-repeat: no-repeat;
   background-position: 2%;
@@ -1760,17 +1746,17 @@ select.invalid_value,
 #ldi_options label.desc,
 #latex_options label.desc,
 #output label.desc {
-  float: $left;
+  float: left;
   width: 15em;
 }
 
 .exportoptions,
 .importoptions {
   margin: 20px 30px 30px;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
 
   #buttonGo {
-    float: $right;
+    float: right;
   }
 }
 
@@ -1781,7 +1767,7 @@ select.invalid_value,
 
   h3 {
     margin: 10px 0 0;
-    margin-#{$left}: 10px;
+    margin-left: 10px;
     border: 0;
   }
 }
@@ -1802,7 +1788,7 @@ select {
 
 .export_sub_options {
   margin: 20px 0 0;
-  margin-#{$left}: 30px;
+  margin-left: 30px;
 
   h4 {
     border-bottom: 1px #999 solid;
@@ -1819,7 +1805,7 @@ select {
 }
 
 #export_refresh_form {
-  margin-#{$left}: 20px;
+  margin-left: 20px;
 }
 
 #export_back_button {
@@ -1861,7 +1847,7 @@ input#import_merge {
   width: 100%;
   height: 100%;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   background: #000;
   z-index: 1000;
   overflow: hidden;
@@ -1876,9 +1862,9 @@ input#import_merge {
   list-style: none;
 
   li {
-    float: $left;
+    float: left;
     // same as padding of "table td"
-    margin-#{$right}: 0.3em;
+    margin-right: 0.3em;
   }
 
   .submenu li {
@@ -1897,12 +1883,12 @@ input#import_merge {
 }
 
 #structure-action-links a {
-  margin-#{$right}: 1em;
+  margin-right: 1em;
 }
 
 #addColumns input[type=radio] {
   margin: 3px 0 0;
-  margin-#{$left}: 1em;
+  margin-left: 1em;
 }
 
 /**
@@ -1925,7 +1911,7 @@ input#import_merge {
     }
 
     .label {
-      float: $left;
+      float: left;
       min-width: 12em;
     }
   }
@@ -1933,14 +1919,14 @@ input#import_merge {
   .slider {
     width: 10em;
     margin: 0.6em;
-    float: $left;
+    float: left;
   }
 
   .add_fields {
-    float: $left;
+    float: left;
 
     input {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
   }
 
@@ -1958,7 +1944,7 @@ table#index_columns {
 
   select {
     width: 85%;
-    float: $left;
+    float: left;
   }
 }
 
@@ -1994,7 +1980,7 @@ table#index_columns {
     font-weight: bold;
 
     li {
-      float: $left;
+      float: left;
       margin-bottom: -1px;
 
       a {
@@ -2059,7 +2045,7 @@ table#index_columns {
     // field error list
     .inline_errors {
       margin: 0.3em 0.3em 0.3em;
-      margin-#{$left}: 0;
+      margin-left: 0;
       padding: 0;
       list-style: none;
       color: #9a0000;
@@ -2067,11 +2053,11 @@ table#index_columns {
     }
 
     .doc {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
 
     .disabled-notice {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
       font-size: 80%;
       text-transform: uppercase;
       color: #e00;
@@ -2080,13 +2066,13 @@ table#index_columns {
 
     th {
       padding: 0.3em 0.3em 0.3em;
-      padding-#{$left}: 0.5em;
-      text-align: $left;
+      padding-left: 0.5em;
+      text-align: left;
       vertical-align: top;
       background: transparent;
       filter: none;
       border-top: 1px $bg-two solid;
-      border-#{$right}: none;
+      border-right: none;
 
       small {
         display: block;
@@ -2102,7 +2088,7 @@ table#index_columns {
       padding-bottom: 0.3em;
       vertical-align: top;
       border-top: 1px $bg-two solid;
-      border-#{$right}: none;
+      border-right: none;
     }
   }
 
@@ -2181,7 +2167,7 @@ table#index_columns {
 
   // error list
   dd {
-    margin-#{$left}: 0.5em;
+    margin-left: 0.5em;
 
     &::before {
       content: "\25B8  ";
@@ -2202,16 +2188,16 @@ fieldset {
 
   .group-field-1 th,
   .group-header-2 th {
-    padding-#{$left}: 1.5em;
+    padding-left: 1.5em;
   }
 
   .group-field-2 th,
   .group-header-3 th {
-    padding-#{$left}: 3em;
+    padding-left: 3em;
   }
 
   .group-field-3 th {
-    padding-#{$left}: 4.5em;
+    padding-left: 4.5em;
   }
 
   .disabled-field {
@@ -2237,12 +2223,12 @@ fieldset {
 }
 
 .prefsmanage_opts {
-  margin-#{$left}: 2em;
+  margin-left: 2em;
 }
 
 #prefs_autoload {
   margin-bottom: 0.5em;
-  margin-#{$left}: 0.5em;
+  margin-left: 0.5em;
 }
 
 input#auto_increment_opt {
@@ -2252,7 +2238,7 @@ input#auto_increment_opt {
 #placeholder {
   position: relative;
   border: 1px solid #aaa;
-  float: $right;
+  float: right;
   overflow: hidden;
   width: 450px;
   height: 300px;
@@ -2271,7 +2257,7 @@ input#auto_increment_opt {
 }
 
 .wrapper {
-  float: $left;
+  float: left;
   margin-bottom: 1.5em;
 }
 
@@ -2283,8 +2269,8 @@ input#auto_increment_opt {
   line-height: 1.4em;
   height: 1.55em;
   overflow: hidden;
-  border-#{$right}: 0.1em solid #888;
-  border-#{$left}: 0.1em solid #888;
+  border-right: 0.1em solid #888;
+  border-left: 0.1em solid #888;
   -webkit-border-radius: 0.3em;
   -moz-border-radius: 0.3em;
   border-radius: 0.3em;
@@ -2319,20 +2305,20 @@ input#auto_increment_opt {
 .doubleFieldset {
   fieldset {
     width: 48%;
-    float: $left;
+    float: left;
     padding: 0;
 
     &.left {
-      margin-#{$right}: 1%;
+      margin-right: 1%;
     }
 
     &.right {
-      margin-#{$left}: 1%;
+      margin-left: 1%;
     }
   }
 
   legend {
-    margin-#{$left}: 1.5em;
+    margin-left: 1.5em;
   }
 
   div.wrap {
@@ -2386,50 +2372,50 @@ input#auto_increment_opt {
 }
 
 #left_arrow {
-  #{$left}: 8px;
+  left: 8px;
   top: 26px;
 }
 
 #right_arrow {
-  #{$left}: 26px;
+  left: 26px;
   top: 26px;
 }
 
 #up_arrow {
-  #{$left}: 17px;
+  left: 17px;
   top: 8px;
 }
 
 #down_arrow {
-  #{$left}: 17px;
+  left: 17px;
   top: 44px;
 }
 
 #zoom_in {
-  #{$left}: 17px;
+  left: 17px;
   top: 67px;
 }
 
 #zoom_world {
-  #{$left}: 17px;
+  left: 17px;
   top: 85px;
 }
 
 #zoom_out {
-  #{$left}: 17px;
+  left: 17px;
   top: 103px;
 }
 
 .colborder {
   cursor: col-resize;
   height: 100%;
-  margin-#{$left}: -6px;
+  margin-left: -6px;
   position: absolute;
   width: 5px;
 }
 
 .colborder_active {
-  border-#{$right}: 2px solid #a44;
+  border-right: 2px solid #a44;
 }
 
 .pma_table {
@@ -2461,11 +2447,11 @@ input#auto_increment_opt {
 
   th.draggable {
     &.right span {
-      margin-#{$right}: 0;
+      margin-right: 0;
     }
 
     span {
-      margin-#{$right}: 10px;
+      margin-right: 10px;
     }
   }
 }
@@ -2504,7 +2490,7 @@ input#auto_increment_opt {
   height: $height;
   width: $width;
   margin-top: $height / -2;
-  margin-#{$left}: $width / -2;
+  margin-left: $width / -2;
   background: url("../img/col_pointer.png");
   position: absolute;
 }
@@ -2529,7 +2515,7 @@ input#auto_increment_opt {
 }
 
 .cDrop {
-  #{$left}: 0;
+  left: 0;
   position: absolute;
   top: 0;
 }
@@ -2538,7 +2524,7 @@ input#auto_increment_opt {
   background: url("../img/col_drop.png");
   cursor: pointer;
   height: 16px;
-  margin-#{$left}: 0.3em;
+  margin-left: 0.3em;
   margin-top: 0.3em;
   position: absolute;
   width: 16px;
@@ -2562,7 +2548,7 @@ input#auto_increment_opt {
 
   .lDiv div {
     padding: 0.2em 0.5em 0.2em;
-    padding-#{$left}: 0.2em;
+    padding-left: 0.2em;
 
     &:hover {
       background: #ddd;
@@ -2700,8 +2686,8 @@ input#auto_increment_opt {
   }
 
   .edit_box_posting {
-    background: #fff url('../img/ajax_clock_small.gif') no-repeat $right center;
-    padding-#{$right}: 1.5em;
+    background: #fff url('../img/ajax_clock_small.gif') no-repeat right center;
+    padding-right: 1.5em;
   }
 
   .edit_area_loading {
@@ -2717,8 +2703,8 @@ input#auto_increment_opt {
 }
 
 .saving_edited_data {
-  background: url('../img/ajax_clock_small.gif') no-repeat $left;
-  padding-#{$left}: 20px;
+  background: url('../img/ajax_clock_small.gif') no-repeat left;
+  padding-left: 20px;
 }
 
 .relationalTable {
@@ -2728,7 +2714,7 @@ input#auto_increment_opt {
 
   select {
     width: 125px;
-    margin-#{$right}: 5px;
+    margin-right: 5px;
   }
 }
 
@@ -2739,7 +2725,7 @@ input#auto_increment_opt {
   }
 
   dl {
-    text-align: $left;
+    text-align: left;
 
     dt {
       height: 25px;
@@ -2793,7 +2779,7 @@ body #ui-datepicker-div {
 
 // over-riding jqplot-yaxis class
 .jqplot-yaxis {
-  #{$left}: 0 !important;
+  left: 0 !important;
   min-width: 25px;
   width: auto;
 }
@@ -2834,7 +2820,7 @@ table.show_create {
   margin-top: 1em;
 
   td {
-    border-#{$right}: 1px solid #bbb;
+    border-right: 1px solid #bbb;
   }
 }
 
@@ -2861,7 +2847,7 @@ table.show_create {
   width: 100%;
   position: fixed;
   bottom: 0;
-  #{$left}: 0;
+  left: 0;
   z-index: 100;
 }
 
@@ -2871,7 +2857,7 @@ textarea {
 
 #pma_console {
   position: relative;
-  margin-#{$left}: $navi-width;
+  margin-left: $navi-width;
 
   .templates {
     display: none;
@@ -2897,7 +2883,7 @@ textarea {
       &:not(:hover) {
         display: inline-block;
         border-top-right-radius: 3px;
-        border-#{$right}: solid 1px #aaa;
+        border-right: solid 1px #aaa;
       }
 
       > .button {
@@ -2950,12 +2936,12 @@ textarea {
 
     .button,
     .text {
-      margin-#{$right}: 0.4em;
+      margin-right: 0.4em;
     }
 
     .button,
     .text {
-      float: $right;
+      float: right;
     }
   }
 
@@ -3011,7 +2997,7 @@ textarea {
     }
 
     &::before {
-      #{$left}: -0.7em;
+      left: -0.7em;
       position: absolute;
       content: ">";
     }
@@ -3194,17 +3180,17 @@ textarea {
     width: 94%;
     height: 100%;
     min-height: 48px;
-    #{$left}: 100%;
+    left: 100%;
     top: 0;
-    border-#{$left}: solid 1px #999;
+    border-left: solid 1px #999;
     z-index: 300;
-    transition: $left 0.2s;
-    -ms-transition: $left 0.2s;
-    -webkit-transition: $left 0.2s;
-    -moz-transition: $left 0.2s;
+    transition: left 0.2s;
+    -ms-transition: left 0.2s;
+    -webkit-transition: left 0.2s;
+    -moz-transition: left 0.2s;
 
     &.show {
-      #{$left}: 6%;
+      left: 6%;
       box-shadow: -2px 1px 4px -1px #999;
     }
   }
@@ -3222,7 +3208,7 @@ textarea {
 
 #pma_bookmarks .content.add_bookmark {
   .options {
-    margin-#{$left}: 1.4em;
+    margin-left: 1.4em;
     padding-bottom: 0.4em;
     margin-bottom: 0.4em;
     border-bottom: solid 1px #ccc;
@@ -3260,7 +3246,7 @@ textarea {
   }
 
   .count {
-    margin-#{$right}: 8px;
+    margin-right: 8px;
   }
 
   .show_trace .trace,
@@ -3296,13 +3282,13 @@ textarea {
   }
 
   .debug_summary {
-    float: $left;
+    float: left;
   }
 
   .trace.welcome .time,
   .traceStep .file,
   .script_name {
-    float: $right;
+    float: right;
   }
 
   .traceStep .args pre {
@@ -3345,7 +3331,7 @@ textarea {
   display: none;
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
   height: 100%;
@@ -3360,23 +3346,16 @@ textarea {
   display: none;
   position: fixed;
   bottom: 0;
-  #{$right}: 25px;
+  right: 25px;
   width: 400px;
   border: 1px solid #999;
   background: #f3f3f3;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
-
-  @if $direction == rtl {
-    -moz-box-shadow: -2px 2px 5px #ccc;
-    -webkit-box-shadow: -2px 2px 5px #ccc;
-    box-shadow: -2px 2px 5px #ccc;
-  } @else {
-    -moz-box-shadow: 2px 2px 5px #ccc;
-    -webkit-box-shadow: 2px 2px 5px #ccc;
-    box-shadow: 2px 2px 5px #ccc;
-  }
+  -moz-box-shadow: 2px 2px 5px #ccc;
+  -webkit-box-shadow: 2px 2px 5px #ccc;
+  box-shadow: 2px 2px 5px #ccc;
 
   h2 {
     background-color: #bbb;
@@ -3387,16 +3366,9 @@ textarea {
     font-size: 1.6em;
     font-weight: normal;
     text-shadow: 0 1px 0 #777;
-
-    @if $direction == rtl {
-      -moz-box-shadow: -1px 1px 15px #999 inset;
-      -webkit-box-shadow: -1px 1px 15px #999 inset;
-      box-shadow: -1px 1px 15px #999 inset;
-    } @else {
-      -moz-box-shadow: 1px 1px 15px #999 inset;
-      -webkit-box-shadow: 1px 1px 15px #999 inset;
-      box-shadow: 1px 1px 15px #999 inset;
-    }
+    -moz-box-shadow: 1px 1px 15px #999 inset;
+    -webkit-box-shadow: 1px 1px 15px #999 inset;
+    box-shadow: 1px 1px 15px #999 inset;
   }
 }
 
@@ -3409,16 +3381,9 @@ textarea {
   font-size: 1.6em;
   font-weight: normal;
   text-shadow: 0 1px 0 #777;
-
-  @if $direction == rtl {
-    -moz-box-shadow: -1px 1px 15px #999 inset;
-    -webkit-box-shadow: -1px 1px 15px #999 inset;
-    box-shadow: -1px 1px 15px #999 inset;
-  } @else {
-    -moz-box-shadow: 1px 1px 15px #999 inset;
-    -webkit-box-shadow: 1px 1px 15px #999 inset;
-    box-shadow: 1px 1px 15px #999 inset;
-  }
+  -moz-box-shadow: 1px 1px 15px #999 inset;
+  -webkit-box-shadow: 1px 1px 15px #999 inset;
+  box-shadow: 1px 1px 15px #999 inset;
 }
 
 .pma_sql_import_status {
@@ -3435,21 +3400,21 @@ textarea {
       background: white;
 
       .filesize {
-        float: $right;
+        float: right;
       }
     }
   }
 
   h2 {
     .minimize {
-      float: $right;
-      margin-#{$right}: 5px;
+      float: right;
+      margin-right: 5px;
       padding: 0 10px;
     }
 
     .close {
-      float: $right;
-      margin-#{$right}: 5px;
+      float: right;
+      margin-right: 5px;
       padding: 0 10px;
       display: none;
     }
@@ -3479,7 +3444,7 @@ textarea {
 .pma_drop_result {
   position: fixed;
   top: 10%;
-  #{$left}: 20%;
+  left: 20%;
   width: 60%;
   background: white;
   min-height: 300px;
@@ -3489,8 +3454,8 @@ textarea {
   cursor: move;
 
   h2 .close {
-    float: $right;
-    margin-#{$right}: 5px;
+    float: right;
+    margin-right: 5px;
     padding: 0 10px;
   }
 }
@@ -3550,7 +3515,7 @@ meter {
       background-position: right center;
       display: inline-table;
       vertical-align: middle;
-      float: $right;
+      float: right;
     }
   }
 
@@ -3578,16 +3543,16 @@ meter {
 // styles for jQuery-ui to support rtl languages
 body .ui-dialog {
   .ui-dialog-titlebar-close {
-    #{$right}: 0.3em;
-    #{$left}: initial;
+    right: 0.3em;
+    left: initial;
   }
 
   .ui-dialog-title {
-    float: $left;
+    float: left;
   }
 
   .ui-dialog-buttonpane .ui-dialog-buttonset {
-    float: $right;
+    float: right;
   }
 }
 // end of styles for jQuery-ui to support rtl languages
@@ -3726,11 +3691,11 @@ body .ui-dialog {
 // Extra large devices (large desktops, 1200px and up)
 @include media-breakpoint-up(xl) {
   div.tools {
-    text-align: #{$left};
+    text-align: left;
   }
 
   fieldset.tblFooters,
   .tblFooters {
-    text-align: #{$left};
+    text-align: left;
   }
 }
diff --git a/themes/pmahomme/scss/_designer.scss b/themes/pmahomme/scss/_designer.scss
index 7491803f00..b0581dd25c 100644
--- a/themes/pmahomme/scss/_designer.scss
+++ b/themes/pmahomme/scss/_designer.scss
@@ -40,7 +40,7 @@ $resize-img: '../img/designer/resize.png';
 canvas.designer {
   display: inline-block;
   overflow: hidden;
-  text-align: $left;
+  text-align: left;
 
   * {
     behavior: url(#default#VML);
@@ -130,8 +130,8 @@ canvas.designer {
   text-decoration: none;
   text-indent: 3px;
   font-weight: bold;
-  margin-#{$left}: 2px;
-  text-align: $left;
+  margin-left: 2px;
+  text-align: left;
   background-color: #fff;
   background-image: url($left-panel-button-img);
   border: #ccc solid 1px;
@@ -145,7 +145,7 @@ canvas.designer {
     white-space: nowrap;
     text-decoration: none;
     border: #99f solid 1px;
-    text-align: $left;
+    text-align: left;
   }
 }
 
@@ -155,15 +155,15 @@ canvas.designer {
 }
 
 .option_tab {
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   width: 5px;
 }
 
 .select_all {
   vertical-align: top;
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   cursor: default;
   width: 1px;
   color: #000;
@@ -179,8 +179,8 @@ canvas.designer {
   cursor: default;
   text-align: center;
   font-weight: bold;
-  padding-#{$left}: 2px;
-  padding-#{$right}: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
   width: 1px;
   text-decoration: none;
 
@@ -189,8 +189,8 @@ canvas.designer {
     color: #fff;
     background-color: #f96;
     cursor: default;
-    padding-#{$left}: 2px;
-    padding-#{$right}: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
     text-align: center;
     font-weight: bold;
     width: 1px;
@@ -250,19 +250,19 @@ canvas.designer {
 }
 
 .frams1 {
-  background: url($frams1-img) no-repeat $right bottom;
+  background: url($frams1-img) no-repeat right bottom;
 }
 
 .frams2 {
-  background: url($frams2-img) no-repeat $left bottom;
+  background: url($frams2-img) no-repeat left bottom;
 }
 
 .frams3 {
-  background: url($frams3-img) no-repeat $left top;
+  background: url($frams3-img) no-repeat left top;
 }
 
 .frams4 {
-  background: url($frams4-img) no-repeat $right top;
+  background: url($frams4-img) no-repeat right top;
 }
 
 .frams5 {
@@ -270,7 +270,7 @@ canvas.designer {
 }
 
 .frams6 {
-  background: url($frams6-img) repeat-y $left;
+  background: url($frams6-img) repeat-y left;
 }
 
 .frams7 {
@@ -278,7 +278,7 @@ canvas.designer {
 }
 
 .frams8 {
-  background: url($frams8-img) repeat-y $right;
+  background: url($frams8-img) repeat-y right;
 }
 
 #osn_tab {
@@ -297,8 +297,8 @@ canvas.designer {
   background-image: url($top-panel-img);
   background-position: top;
   background-repeat: repeat-x;
-  border-#{$right}: #999 solid 1px;
-  border-#{$left}: #999 solid 1px;
+  border-right: #999 solid 1px;
+  border-left: #999 solid 1px;
   height: 28px;
   z-index: 101;
   width: 100%;
@@ -307,7 +307,7 @@ canvas.designer {
   a,
   span {
     display: block;
-    float: $left;
+    float: left;
     margin: 3px 1px 4px;
     height: 20px;
     border: 1px dotted #fff;
@@ -315,7 +315,7 @@ canvas.designer {
 
   .M_bord {
     display: block;
-    float: $left;
+    float: left;
     margin: 4px;
     height: 20px;
     width: 2px;
@@ -323,11 +323,11 @@ canvas.designer {
 
   a {
     &.first {
-      margin-#{$right}: 1em;
+      margin-right: 1em;
     }
 
     &.last {
-      margin-#{$left}: 1em;
+      margin-left: 1em;
     }
   }
 }
@@ -356,18 +356,18 @@ a {
 #layer_menu {
   z-index: 98;
   position: relative;
-  float: $right;
+  float: right;
   background-color: #eaeef0;
   border: #999 solid 1px;
 
   &.left {
-    float: $left;
+    float: left;
   }
 }
 
 #layer_upd_relation {
   position: absolute;
-  #{$left}: 637px;
+  left: 637px;
   top: 224px;
   z-index: 100;
 }
@@ -375,7 +375,7 @@ a {
 #layer_new_relation,
 #designer_optionse {
   position: absolute;
-  #{$left}: 636px;
+  left: 636px;
   top: 85px;
   z-index: 100;
   width: 153px;
@@ -393,7 +393,7 @@ a {
 .panel {
   position: fixed;
   top: 60px;
-  #{$right}: 0;
+  right: 0;
   width: 350px;
   max-height: 500px;
   display: none;
@@ -407,7 +407,7 @@ a {
     position: fixed;
     text-decoration: none;
     top: 60px;
-    #{$right}: 0;
+    right: 0;
     color: #fff;
     padding: 10px 40px 10px 15px;
     background: #333 url($plus-img) 85% 55% no-repeat;
@@ -460,12 +460,12 @@ a {
 }
 
 #foreignkeychk {
-  text-align: $left;
+  text-align: left;
   cursor: pointer;
 }
 
 .side-menu {
-  float: $left;
+  float: left;
   position: fixed;
   width: auto;
   height: auto;
@@ -476,8 +476,8 @@ a {
   padding: 2px;
 
   &.right {
-    float: $right;
-    #{$right}: 0;
+    float: right;
+    right: 0;
   }
 
   .hide {
@@ -493,7 +493,7 @@ a {
 
   img,
   .text {
-    float: $left;
+    float: left;
   }
 }
 
@@ -510,5 +510,5 @@ a {
 #container-form {
   width: 100%;
   position: absolute;
-  #{$left}: 0;
+  left: 0;
 }
diff --git a/themes/pmahomme/scss/_direction.scss b/themes/pmahomme/scss/_direction.scss
deleted file mode 100644
index bea992f621..0000000000
--- a/themes/pmahomme/scss/_direction.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$direction: ltr !default;
-
-@if $direction != ltr and $direction != rtl {
-  $direction: ltr;
-}
-
-$left: left;
-$right: right;
-
-@if $direction == rtl {
-  $left: right;
-  $right: left;
-}
diff --git a/themes/pmahomme/scss/_enum-editor.scss b/themes/pmahomme/scss/_enum-editor.scss
index 125e5ceabc..03dd1589e4 100644
--- a/themes/pmahomme/scss/_enum-editor.scss
+++ b/themes/pmahomme/scss/_enum-editor.scss
@@ -23,7 +23,7 @@ p.enum_notice {
       vertical-align: middle;
       width: 50%;
       padding: 0 0 0;
-      padding-#{$left}: 1em;
+      padding-left: 1em;
     }
   }
 
@@ -36,7 +36,7 @@ p.enum_notice {
 
     input {
       margin: 0.1em 0;
-      padding-#{$right}: 2em;
+      padding-right: 2em;
       width: 100%;
     }
 
@@ -47,13 +47,13 @@ p.enum_notice {
 
   input.add_value {
     margin: 0;
-    margin-#{$right}: 0.4em;
+    margin-right: 0.4em;
   }
 }
 
 #enum_editor_output textarea {
   width: 100%;
-  float: $right;
+  float: right;
   margin: 1em 0 0 0;
 }
 
@@ -65,7 +65,7 @@ p.enum_notice {
 
   a {
     position: absolute;
-    #{$left}: 81%;
+    left: 81%;
     bottom: 0.35em;
   }
 }
diff --git a/themes/pmahomme/scss/_gis.scss b/themes/pmahomme/scss/_gis.scss
index e36b65b57d..c95ff10b96 100644
--- a/themes/pmahomme/scss/_gis.scss
+++ b/themes/pmahomme/scss/_gis.scss
@@ -2,7 +2,7 @@
  * GIS data editor styles
  */
 a.close_gis_editor {
-  float: $right;
+  float: right;
 }
 
 #gis_editor {
diff --git a/themes/pmahomme/scss/_icons.scss b/themes/pmahomme/scss/_icons.scss
index 44f61e99a7..20eaa8f22d 100644
--- a/themes/pmahomme/scss/_icons.scss
+++ b/themes/pmahomme/scss/_icons.scss
@@ -1,6 +1,6 @@
 .icon {
   margin: 0;
-  margin-#{$left}: 0.3em;
+  margin-left: 0.3em;
   padding: 0 !important;
   width: 16px;
   height: 16px;
diff --git a/themes/pmahomme/scss/_jqplot.scss b/themes/pmahomme/scss/_jqplot.scss
index cda841aaab..f3d92f879b 100644
--- a/themes/pmahomme/scss/_jqplot.scss
+++ b/themes/pmahomme/scss/_jqplot.scss
@@ -22,7 +22,7 @@
 }
 
 .jqplot-yaxis {
-  margin-#{$right}: 10px;
+  margin-right: 10px;
 }
 
 .jqplot-y2axis,
@@ -34,8 +34,8 @@
 .jqplot-y8axis,
 .jqplot-y9axis,
 .jqplot-yMidAxis {
-  margin-#{$left}: 10px;
-  margin-#{$right}: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 // rules applied to all axis tick divs
@@ -59,26 +59,26 @@
 .jqplot-xaxis-tick {
   top: 0;
   // initial position untill tick is drawn in proper place
-  #{$left}: 15px;
+  left: 15px;
   vertical-align: top;
 }
 
 .jqplot-x2axis-tick {
   bottom: 0;
   // initial position untill tick is drawn in proper place
-  #{$left}: 15px;
+  left: 15px;
   vertical-align: bottom;
 }
 
 .jqplot-yaxis-tick {
-  #{$right}: 0;
+  right: 0;
   // initial position untill tick is drawn in proper place
   top: 15px;
-  text-align: $right;
+  text-align: right;
 
   &.jqplot-breakTick {
-    #{$right}: -20px;
-    margin-#{$right}: 0;
+    right: -20px;
+    margin-right: 0;
     padding: 1px 5px 1px;
     z-index: 2;
     font-size: 1.5em;
@@ -93,10 +93,10 @@
 .jqplot-y7axis-tick,
 .jqplot-y8axis-tick,
 .jqplot-y9axis-tick {
-  #{$left}: 0;
+  left: 0;
   // initial position untill tick is drawn in proper place
   top: 15px;
-  text-align: $left;
+  text-align: left;
 }
 
 .jqplot-yMidAxis-tick {
@@ -117,7 +117,7 @@
 }
 
 .jqplot-yaxis-label {
-  margin-#{$right}: 10px;
+  margin-right: 10px;
   font-size: 11pt;
   position: absolute;
 }
@@ -136,7 +136,7 @@
 .jqplot-y8axis-label,
 .jqplot-y9axis-label {
   font-size: 11pt;
-  margin-#{$left}: 10px;
+  margin-left: 10px;
   position: absolute;
 }
 
@@ -154,8 +154,8 @@ table {
   &.jqplot-table-legend {
     margin-top: 12px;
     margin-bottom: 12px;
-    margin-#{$left}: 12px;
-    margin-#{$right}: 12px;
+    margin-left: 12px;
+    margin-right: 12px;
     background-color: rgba(255, 255, 255, 0.6);
     border: 1px solid #ccc;
     position: absolute;
@@ -209,7 +209,7 @@ div {
 
 .jqplot-title {
   top: 0;
-  #{$left}: 0;
+  left: 0;
   padding-bottom: 0.5em;
   font-size: 1.2em;
 }
@@ -259,8 +259,8 @@ div.jqplot-cursor-legend-swatch {
 div {
   &.jqplot-bubble-label {
     font-size: 0.8em;
-    padding-#{$left}: 2px;
-    padding-#{$right}: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
     color: rgb(20%, 20%, 20%);
 
     &.jqplot-bubble-label-highlight {
diff --git a/themes/pmahomme/scss/_list-group.scss b/themes/pmahomme/scss/_list-group.scss
index 43d33727aa..82657726a6 100644
--- a/themes/pmahomme/scss/_list-group.scss
+++ b/themes/pmahomme/scss/_list-group.scss
@@ -1,5 +1,5 @@
 .list-group {
-  padding-#{$left}: 40px;
+  padding-left: 40px;
   margin: 1rem 0;
 }
 
@@ -16,6 +16,6 @@
 #li_select_theme {
   &.list-group-item {
     display: block;
-    margin-#{$left}: -20px;
+    margin-left: -20px;
   }
 }
diff --git a/themes/pmahomme/scss/_nav.scss b/themes/pmahomme/scss/_nav.scss
index 08eb1ac909..e965465b9c 100644
--- a/themes/pmahomme/scss/_nav.scss
+++ b/themes/pmahomme/scss/_nav.scss
@@ -1,7 +1,7 @@
 .nav-pills {
   .nav-link {
-    margin-#{$left}: 0;
-    margin-#{$right}: 6px;
+    margin-left: 0;
+    margin-right: 6px;
     padding: 4px 10px;
     font-weight: bold;
     background: #f2f2f2;
@@ -17,7 +17,7 @@
     }
 
     img {
-      margin-#{$right}: 0.5em;
+      margin-right: 0.5em;
       vertical-align: -3px;
     }
   }
diff --git a/themes/pmahomme/scss/_navbar.scss b/themes/pmahomme/scss/_navbar.scss
index 332502e99b..d2d9b90a6d 100644
--- a/themes/pmahomme/scss/_navbar.scss
+++ b/themes/pmahomme/scss/_navbar.scss
@@ -7,18 +7,18 @@
 }
 
 .navbar-nav .icon {
-  margin-#{$right}: 0.5em;
+  margin-right: 0.5em;
   vertical-align: -3px;
 }
 
 .navbar-nav .nav-item {
   background: linear-gradient(#fff, #dcdcdc);
-  border-#{$right}: 1px solid #fff;
-  border-#{$left}: 1px solid #ccc;
+  border-right: 1px solid #fff;
+  border-left: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
 
   &:first-child {
-    border-#{$left}: 0;
+    border-left: 0;
   }
 
   &:hover {
diff --git a/themes/pmahomme/scss/_navigation.scss b/themes/pmahomme/scss/_navigation.scss
index 08c818e615..16f50091c1 100644
--- a/themes/pmahomme/scss/_navigation.scss
+++ b/themes/pmahomme/scss/_navigation.scss
@@ -3,7 +3,7 @@
   width: $navi-width;
   position: fixed;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   height: 100vh;
   background: url('../img/left_nav_bg.png') repeat-y right 0 $navi-background;
   color: $navi-color;
@@ -30,8 +30,8 @@
     &.pageselector {
       text-align: center;
       margin: 0;
-      margin-#{$left}: 0.75em;
-      border-#{$left}: 1px solid #666;
+      margin-left: 0.75em;
+      border-left: 1px solid #666;
     }
   }
 
@@ -71,7 +71,7 @@
   height: 100%;
   position: absolute;
   top: 0;
-  #{$left}: 0;
+  left: 0;
   z-index: 0;
 
   > img.throbber {
@@ -81,7 +81,7 @@
 }
 
 #pma_navigation_select_database {
-  text-align: $left;
+  text-align: left;
   padding: 0 0 0;
   border: 0;
   margin: 0;
@@ -89,7 +89,7 @@
 
 #pma_navigation_db_select {
   margin-top: 0.5em;
-  margin-#{$left}: 0.75em;
+  margin-left: 0.75em;
 
   select {
     background: url('../img/select_bg.png') repeat scroll 0 0;
@@ -121,7 +121,7 @@
 
 #pma_navigation_tree {
   margin: 0;
-  margin-#{$left}: 5px;
+  margin-left: 5px;
   overflow: hidden;
   color: #444;
   height: 74%;
@@ -157,13 +157,13 @@
     }
 
     .dbItemControls {
-      padding-#{$right}: 4px;
+      padding-right: 4px;
       float: right;
     }
 
     .navItemControls {
       display: none;
-      padding-#{$right}: 4px;
+      padding-right: 4px;
       float: right;
     }
 
@@ -204,7 +204,7 @@
       height: 1.5em;
       min-width: 16px;
       min-height: 16px;
-      float: $left;
+      float: left;
 
       &.double {
         width: 2.5em;
@@ -218,21 +218,21 @@
         min-height: 8px;
         position: absolute;
         bottom: 0.7em;
-        #{$left}: 0.75em;
+        left: 0.75em;
         z-index: 0;
       }
 
       // Top and right segments for the tree element connections
       i {
         display: block;
-        border-#{$left}: 1px solid #666;
+        border-left: 1px solid #666;
         border-bottom: 1px solid #666;
         position: relative;
         z-index: 0;
 
         // Removes top segment
         &.first {
-          border-#{$left}: 0;
+          border-left: 0;
         }
       }
 
@@ -241,44 +241,44 @@
         display: block;
         height: 0.75em;
         bottom: 0;
-        #{$left}: 0.75em;
-        border-#{$left}: 1px solid #666;
+        left: 0.75em;
+        border-left: 1px solid #666;
       }
 
       a,
       u {
         position: absolute;
-        #{$left}: 50%;
+        left: 50%;
         top: 50%;
         z-index: 10;
       }
 
       a + a {
-        #{$left}: 100%;
+        left: 100%;
       }
 
       &.double {
         a,
         u {
-          #{$left}: 33%;
+          left: 33%;
         }
 
         a + a {
-          #{$left}: 85%;
+          left: 85%;
         }
       }
 
       img {
         position: relative;
         top: -0.6em;
-        #{$left}: 0;
-        margin-#{$left}: -7px;
+        left: 0;
+        margin-left: -7px;
       }
     }
 
     &.throbber img {
       top: 2px;
-      #{$left}: 2px;
+      left: 2px;
     }
   }
 
@@ -292,28 +292,28 @@
       i {
         line-height: 1.5em;
         height: 1.5em;
-        padding-#{$left}: 0.3em;
+        padding-left: 0.3em;
       }
     }
   }
 
   .list_container {
-    border-#{$left}: 1px solid #666;
-    margin-#{$left}: 0.75em;
-    padding-#{$left}: 0.75em;
+    border-left: 1px solid #666;
+    margin-left: 0.75em;
+    padding-left: 0.75em;
   }
 
   .last > .list_container {
-    border-#{$left}: 0 solid #666;
+    border-left: 0 solid #666;
   }
 }
 
 // Fast filter
 li.fast_filter {
-  padding-#{$left}: 0.75em;
-  margin-#{$left}: 0.75em;
-  padding-#{$right}: 35px;
-  border-#{$left}: 1px solid #666;
+  padding-left: 0.75em;
+  margin-left: 0.75em;
+  padding-right: 35px;
+  border-left: 1px solid #666;
   list-style: none;
 
   input {
@@ -321,14 +321,14 @@ li.fast_filter {
     font-size: 0.7em;
     padding-top: 2px;
     padding-bottom: 2px;
-    padding-#{$left}: 4px;
-    padding-#{$right}: 1.7em;
+    padding-left: 4px;
+    padding-right: 1.7em;
     width: 100%;
   }
 
   span {
     position: relative;
-    #{$right}: 2.5em;
+    right: 2.5em;
     padding: 0.2em;
     cursor: pointer;
     font-weight: bold;
@@ -338,8 +338,8 @@ li.fast_filter {
 
   &.db_fast_filter {
     border: 0;
-    margin-#{$left}: 0;
-    margin-#{$right}: 10px;
+    margin-left: 0;
+    margin-right: 10px;
   }
 }
 
@@ -351,7 +351,7 @@ html.ie {
     }
 
     input {
-      padding-#{$right}: 0.2em;
+      padding-right: 0.2em;
     }
   }
 
@@ -363,7 +363,7 @@ html.ie {
       }
 
       input {
-        padding-#{$right}: 1.7em;
+        padding-right: 1.7em;
       }
     }
   }
@@ -378,8 +378,8 @@ html.ie {
 }
 
 #navigation_controls {
-  float: $right;
-  padding-#{$right}: 23px;
+  float: right;
+  padding-right: 23px;
 }
 
 // Resize handler
@@ -390,7 +390,7 @@ html.ie {
   cursor: col-resize;
   position: fixed;
   top: 0;
-  #{$left}: 240px;
+  left: 240px;
   z-index: 801;
 }
 
@@ -403,7 +403,7 @@ html.ie {
   font-weight: bold;
   position: fixed;
   top: 0;
-  #{$left}: $navi-width;
+  left: $navi-width;
   text-align: center;
   cursor: pointer;
   z-index: 800;
@@ -415,12 +415,12 @@ html.ie {
 // Quick warp links
 .pma_quick_warp {
   margin-top: 5px;
-  margin-#{$left}: 2px;
+  margin-left: 2px;
   position: relative;
 
   .drop_list {
-    float: $left;
-    margin-#{$left}: 3px;
+    float: left;
+    margin-left: 3px;
     padding: 2px 0;
 
     &:hover {
@@ -447,8 +447,8 @@ html.ie {
       border-bottom-right-radius: 0;
       box-shadow: 0 0 5px #ccc;
       top: 100%;
-      #{$left}: 3px;
-      #{$right}: 0;
+      left: 3px;
+      right: 0;
       display: none;
       z-index: 802;
     }
@@ -472,8 +472,8 @@ html.ie {
       padding: 0.2em 0.3em;
 
       &.favorite_table_anchor {
-        clear: $left;
-        float: $left;
+        clear: left;
+        float: left;
         padding: 0.1em 0.3em 0;
       }
     }
diff --git a/themes/pmahomme/scss/_reboot.scss b/themes/pmahomme/scss/_reboot.scss
index 0b85978ccb..5cf113df9e 100644
--- a/themes/pmahomme/scss/_reboot.scss
+++ b/themes/pmahomme/scss/_reboot.scss
@@ -1,7 +1,7 @@
 // Body
 
 body {
-  text-align: $left;
+  text-align: left;
 }
 
 // Forms
diff --git a/themes/pmahomme/scss/_resizable-menu.scss b/themes/pmahomme/scss/_resizable-menu.scss
index b49ce7532b..d27a150426 100644
--- a/themes/pmahomme/scss/_resizable-menu.scss
+++ b/themes/pmahomme/scss/_resizable-menu.scss
@@ -24,7 +24,7 @@ ul.resizable-menu {
     display: none;
     border: 1px #ddd solid;
     z-index: 2;
-    #{$right}: 0;
+    right: 0;
   }
 
   li:hover {
diff --git a/themes/pmahomme/scss/_rte.scss b/themes/pmahomme/scss/_rte.scss
index 2ff136b870..99b7298f5c 100644
--- a/themes/pmahomme/scss/_rte.scss
+++ b/themes/pmahomme/scss/_rte.scss
@@ -25,7 +25,7 @@
     &[type=checkbox],
     &[type=radio] {
       width: auto;
-      margin-#{$right}: 6px;
+      margin-right: 6px;
     }
   }
 
diff --git a/themes/pmahomme/scss/_tables.scss b/themes/pmahomme/scss/_tables.scss
index 5db0f7f40e..15b4e24b45 100644
--- a/themes/pmahomme/scss/_tables.scss
+++ b/themes/pmahomme/scss/_tables.scss
@@ -5,7 +5,7 @@
   }
 
   th {
-    text-align: $left;
+    text-align: left;
   }
 
   td {
@@ -14,7 +14,7 @@
   }
 
   thead th {
-    border-#{$right}: 1px solid #fff;
+    border-right: 1px solid #fff;
     background-image: linear-gradient(#fff, #ccc);
   }
 }
diff --git a/themes/pmahomme/scss/theme-rtl.scss b/themes/pmahomme/scss/theme-rtl.scss
deleted file mode 100644
index 251a1f01c9..0000000000
--- a/themes/pmahomme/scss/theme-rtl.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$direction: rtl;
-
-@import "theme";
diff --git a/themes/pmahomme/scss/theme.scss b/themes/pmahomme/scss/theme.scss
index bca1ab44b5..99d9f218d2 100644
--- a/themes/pmahomme/scss/theme.scss
+++ b/themes/pmahomme/scss/theme.scss
@@ -1,4 +1,3 @@
-@import "direction";
 @import "variables";
 @import "../../bootstrap/scss/bootstrap";
 @import "common";