Merge pull request #117 from hadjloo/master

Make Bootmetro RTL

less/bootmetro/RTLit.less

@@ -0,0 +1,194 @@
+@ltr : ltr;
+@rtl : rtl;
+@direction: @rtl;
+html {
+    direction: @direction;
+}
+
+body{
+    direction: @direction;
+}
+
+.FloatItem(@value) when (@value = "left") and (@direction = @ltr){
+    float: left;
+}
+
+.FloatItem(@value) when (@value = "right") and (@direction = @ltr){
+    float: right;
+}
+
+.FloatItem(@value) when (@value = "left") and (@direction = @rtl){
+    float: right;
+}
+
+.FloatItem(@value) when (@value = "right") and (@direction = @rtl){
+    float: left;
+}
+
+.TextAlignTo(@value) when (@value = "left") and (@direction = @ltr){
+    text-align: left;
+}
+
+.TextAlignTo(@value) when (@value = "right") and (@direction = @ltr){
+    text-align: right;
+}
+
+.TextAlignTo(@value) when (@value = "left") and (@direction = @rtl){
+    text-align: right;
+}
+
+.TextAlignTo(@value) when (@value = "right") and (@direction = @rtl){
+    text-align: left;
+}
+
+.DockItem(@location, @value) when (@location = "left") and (@direction = @ltr){
+    left: @value;
+}
+
+.DockItem(@location, @value) when (@location = "right") and (@direction = @ltr){
+    right: @value;
+}
+
+.DockItem(@location, @value) when (@location = "left") and (@direction = @rtl){
+    right: @value;
+}
+
+.DockItem(@location, @value) when (@location = "right") and (@direction = @rtl){
+    left: @value;
+}
+
+.SwapMargin(@topMargin, @rightMargin, @bottomMargin, @leftMargin) when (@direction = @ltr){
+    margin: @topMargin @rightMargin @bottomMargin @leftMargin;
+}
+
+.SwapMargin(@topMargin, @rightMargin, @bottomMargin, @leftMargin) when (@direction = @rtl){
+    margin: @topMargin @leftMargin @bottomMargin @rightMargin;
+}
+
+.MarginLeftOrRight(@command, @value) when (@command = "margin-left") and (@direction = @ltr){
+    margin-left: @value;
+}
+
+.MarginLeftOrRight(@command, @value) when (@command = "margin-right") and (@direction = @ltr){
+    margin-right: @value;
+}
+
+.MarginLeftOrRight(@command, @value) when (@command = "margin-left") and (@direction = @rtl){
+    margin-right: @value;
+}
+
+.MarginLeftOrRight(@command, @value) when (@command = "margin-right") and (@direction = @rtl){
+    margin-left: @value;
+}
+
+.SwapPadding(@topPadding, @rightPadding, @bottomPadding, @leftPadding) when (@direction = @ltr){
+    padding: @topPadding @rightPadding @bottomPadding @leftPadding;
+}
+
+.SwapPadding(@topPadding, @rightPadding, @bottomPadding, @leftPadding) when (@direction = @rtl){
+    padding: @topPadding @leftPadding @bottomPadding @rightPadding;
+}
+
+.PaddingLeftOrRight(@command, @value) when (@command = "padding-left") and (@direction = @ltr){
+    padding-left: @value;
+}
+
+.PaddingLeftOrRight(@command, @value) when (@command = "padding-right") and (@direction = @ltr){
+    padding-right: @value;
+}
+
+.PaddingLeftOrRight(@command, @value) when (@command = "padding-left") and (@direction = @rtl){
+    padding-right: @value;
+}
+
+.PaddingLeftOrRight(@command, @value) when (@command = "padding-right") and (@direction = @rtl){
+    padding-left: @value;
+}
+
+.BorderLeftOrRight(@command, @borderSize, @borderColor, @bordertype) when (@command = "border-left") and (@direction = @ltr){
+    border-left: @borderSize @borderColor @bordertype;
+}
+
+.BorderLeftOrRight(@command, @borderSize, @borderColor, @bordertype) when (@command = "border-right") and (@direction = @ltr){
+    border-right: @borderSize @borderColor @bordertype;
+}
+
+.BorderLeftOrRight(@command, @borderSize, @borderColor, @bordertype) when (@command = "border-left") and (@direction = @rtl){
+    border-right: @borderSize @borderColor @bordertype;
+}
+
+.BorderLeftOrRight(@command, @borderSize, @borderColor, @bordertype) when (@command = "border-right") and (@direction = @rtl){
+    border-left: @borderSize @borderColor @bordertype;
+}
+
+.BorderLeftOrRightColor(@value) when (@command = "border-left-color") and (@direction = @ltr) {
+    border-left-color: @value;
+}
+
+.BorderLeftOrRightColor(@value) when (@command = "border-left-color") and (@direction = @rtl) {
+    border-right-color: @value;
+}
+
+.BorderLeftOrRightColor(@value) when (@command = "border-right-color") and (@direction = @ltr) {
+    border-right-color: @value;
+}
+
+.BorderLeftOrRightColor(@value) when (@command = "border-right-color") and (@direction = @rtl) {
+    border-left-color: @value;
+}
+
+.BorderLeftOrRightWidth(@command, @value) when (@command = "border-left-width") and (@direction = @ltr) {
+    border-left-width: @value;
+}
+
+.BorderLeftOrRightWidth(@command, @value) when (@command = "border-left-width") and (@direction = @rtl) {
+    border-right-width: @value;
+}
+
+.BorderLeftOrRightWidth(@command, @value) when (@command = "border-right-width") and (@direction = @ltr) {
+    border-right-width: @value;
+}
+
+.BorderLeftOrRightWidth(@command, @value) when (@command = "border-right-width") and (@direction = @rtl) {
+    border-left-width: @value;
+}
+
+.BorderTopLeftOrRightRadius(@command, @value) when (@command = "border-top-left-radius") and (@direction = @ltr) {
+    border-top-left-radius: @value;
+}
+
+.BorderTopLeftOrRightRadius(@command, @value) when (@command = "border-top-left-radius") and (@direction = @rtl) {
+    border-top-right-radius: @value;
+}
+
+.BorderTopLeftOrRightRadius(@command, @value) when (@command = "border-top-right-radius") and (@direction = @ltr) {
+    border-top-right-radius: @value;
+}
+
+.BorderTopLeftOrRightRadius(@command, @value) when (@command = "border-top-right-radius") and (@direction = @rtl) {
+    border-top-left-radius: @value;
+}
+
+.BorderBottomLeftOrRightRadius(@command, @value) when (@command = "border-bottom-left-radius") and (@direction = @ltr) {
+    border-bottom-left-radius: @value;
+}
+
+.BorderBottomLeftOrRightRadius(@command, @value) when (@command = "border-bottom-left-radius") and (@direction = @rtl) {
+    border-bottom-right-radius: @value;
+}
+
+.BorderBottomLeftOrRightRadius(@command, @value) when (@command = "border-bottom-right-radius") and (@direction = @ltr) {
+    border-bottom-right-radius: @value;
+}
+
+.BorderBottomLeftOrRightRadius(@command, @value) when (@command = "border-bottom-right-radius") and (@direction = @rtl) {
+    border-bottom-left-radius: @value;
+}
+
+.Border-width(@top, @right, @bottom, @left) when (@direction = @ltr) {
+    border-width: @top @right @bottom @left; 
+}
+
+.Border-width(@top, @right, @bottom, @left) when (@direction = @rtl) {
+    border-width: @top @left @bottom @right; 
+}

less/bootmetro/alerts.less

@@ -6,7 +6,7 @@
    position: fixed;
 }
 .notifications.top-right {
-   right: 0;
+   .DockItem("right", 0);
    top: 0;
 }
 .notifications > div {
@@ -44,7 +44,7 @@
 }
 .toast-body {
    .media-body;
-   padding: 13px 60px 13px 15px;
+   .SwapPadding(13px, 60px, 13px, 15px);
    height: 64px;
 
    p {
@@ -58,7 +58,7 @@
    .media-object;
    width: 90px;
    height: 90px;
-//   margin-right: 10px;
+//   .MarginLeftOrRight("margin-right",10px);
 
    &[class*="icon-"] {
       display: inline-block;
@@ -125,7 +125,7 @@
 .alert .close {
    position: absolute;
    top: 0;
-   right: 0;
+   .DockItem("right", 0);
    display: inline-block;
    min-width: 0;
    min-height: 0;

less/bootmetro/bootmetro-ui-light.less

@@ -171,7 +171,7 @@ button[aria-selected=true]:active .win-commandicon {
    color: #FFF;
 }
 .btn:first-child {
-   *margin-left: 0;
+   .MarginLeftOrRight("margin-left",0);
 }
 
 .btn:hover {

less/bootmetro/bootmetro.less

@@ -7,6 +7,8 @@
  *
  */
 
+// Import RTLit library to make BootMetro RTL
+@import "RTLit.less";
 
 // Core variables and mixins
 @import "variables.less"; // Modify this for custom colors, font-sizes, etc

less/bootmetro/buttons.less

@@ -26,7 +26,7 @@ input[type=file] {
    width: 340px;
    height: 32px;
    padding: 0;
-   margin: 7px 8px 21px 8px;
+   .SwapMargin(7px, 8px, 21px, 8px);
    background-clip: padding-box;
 }
 
@@ -68,7 +68,7 @@ Back button.
 
 #nav-bar .win-backbutton {
    position: absolute;
-   left: 0;
+   .DockItem("left", 0);
    top: 30px;
 }
 
@@ -161,8 +161,8 @@ button.win-command .win-label {
 //   max-width: 88px; /* 100px button, but allow for 2px margins and 4px padding on each side */
    width: 100%;
    .box-sizing(border-box);
-   padding-left: 4px;  /* 12px between buttons, 6px per side, minus 2px margins */
-   padding-right: 4px;
+   .PaddingLeftOrRight("padding-left", 4px);  /* 12px between buttons, 6px per side, minus 2px margins */
+   .PaddingLeftOrRight("padding-right", 4px);
    overflow: hidden;
    line-height: 15px;
    word-wrap: break-word;
@@ -201,7 +201,7 @@ AppBarCommand separator.
 hr.win-command {
    display: inline-block;
    padding: 0;
-   margin: 14px 29px 34px 30px;
+   .SwapMargin(14px, 29px, 34px, 30px);
    width: 1px;
    height: 40px;
    border: 0;
@@ -216,19 +216,19 @@ AppBar Edgy Container
    border-width: 0;
    width: 100%;
    height: auto;
-   left: 0;
+   .DockItem("left", 0);
    position: fixed;
 }
 
 /*
 AppBar control.
 */
 .win-commandlayout {
-   padding-left: 10px;
+   .PaddingLeftOrRight("padding-left", 10px);
    font-size: 0;
    min-height: 88px;
    .win-selection {
-      float: left;
+      .FloatItem("left");
    }
 
    // command button inside appbar

less/bootmetro/charms.less

@@ -2,7 +2,7 @@
    background-color: #004D60;
    position: fixed;
    top: 0%;
-   right: 0%;
+   .DockItem("right", 0%);
    width: 320px;
    height: 100%;
    padding: 0;
@@ -16,24 +16,24 @@
       .border-radius(50%);
    }
    .charms-section {
-      margin: 0 40px 40px 40px;
+      .SwapMargin(0, 40px, 40px, 40px);
    }
    a:hover {
       background-color: #216475;
    }
    .charms-header {
       position: relative;
-      padding: 40px 0 30px 0;
+      .SwapPadding(40px, 0, 30px, 0);
       a#pin-charms {
          color: #FFF;
          font-size: 11px;
          height: 20px;
          position: absolute;
-         right: 2px;
+         .DockItem("right", 2px);
          text-align: center;
          top: 2px;
          width: 20px;
-         margin-right: -24px;
+         .MarginLeftOrRight("margin-right",-24px);
       }
       a#pin-charms.active {
          background-color: #FFF;
@@ -43,7 +43,7 @@
       h2 {
          display: inline-block;
          color: #FFF;
-         margin-left: 10px;
+         .MarginLeftOrRight("margin-left",10px);
       }
    }
    hr {
@@ -69,13 +69,13 @@
    min-width: 350px;
 }
 #charms.slide {
-   right: -320px;
+   .DockItem("right", -320px);
    -webkit-transition: all 0.36s ease;
       -moz-transition: all 0.36s ease;
        -ms-transition: all 0.36s ease;
         -o-transition: all 0.36s ease;
            transition: all 0.36s ease;
 }
 #charms.slide.in {
-   right: 0;
+   .DockItem("right", 0);
 }

less/bootmetro/dropdowns.less

@@ -77,7 +77,7 @@ a.header-dropdown {
 }
 .dropdown-submenu > a:after {
    border: 0;
-   margin-right: -5px;
+   .MarginLeftOrRight("margin-right",-5px);
    margin-top: 0;
    color: #CCC;
    font-family: 'IcoMoon';