From 27113f7599f0b1fabd908b4769765b34a511db91 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Sun, 6 Aug 2017 17:40:33 -0400
Subject: [PATCH] Fix RTL for spin control and form buttons

---
 css/80_app.css | 51 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 82c5f10ed..73f8652b0 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1107,6 +1107,7 @@ button.save.has-count .count::before {
     border-left: none;
     border-right: 1px solid #CCC;
     border-radius: 4px 0 0 0;
+    width: 31px;
 }
 .form-label button:hover {
     background: #f1f1f1;
@@ -1298,6 +1299,7 @@ button.save.has-count .count::before {
 
 /* preset form access */
 /* preset form cycleway */
+/* preset form structure extras */
 
 .form-field-structure .structure-extras-wrap li,
 .form-field-cycleway .preset-input-wrap li,
@@ -1349,6 +1351,22 @@ button.save.has-count .count::before {
 .structure-extras-wrap li:last-child input {
     border-bottom-right-radius: 4px;
 }
+[dir='rtl'] .structure-extras-wrap li:first-child span {
+    border-top-left-radius: 0;
+    border-top-right-radius: 4px;
+}
+[dir='rtl'] .structure-extras-wrap li:first-child input {
+    border-top-right-radius: 0;
+    border-top-left-radius: 4px;
+}
+[dir='rtl'] .structure-extras-wrap li:last-child span {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 4px;
+}
+[dir='rtl'] .structure-extras-wrap li:last-child input {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 4px;
+}
 
 
 /* preset form multicombo */
@@ -1424,6 +1442,10 @@ input[type=number] {
     margin-bottom: -11px;
     position: relative;
 }
+[dir='rtl'] .spin-control{
+    margin-left: 0;
+    margin-right: -64px;
+}
 
 .spin-control button {
     right: 1px;
@@ -1435,10 +1457,21 @@ input[type=number] {
     border-radius: 0;
     background: rgba(0, 0, 0, 0);
 }
+[dir='rtl'] .spin-control button{
+    border-left: 0;
+    border-right: 1px solid #CCC;
+}
 
 .spin-control button.decrement {
     border-bottom-right-radius: 3px;
 }
+[dir='rtl'] .spin-control button.decrement{
+    border-bottom-right-radius: 0;
+    right: 0;
+}
+[dir='rtl'] .spin-control button.increment{
+    border-bottom-left-radius: 3px;
+}
 
 .spin-control button.decrement::after,
 .spin-control button.increment::after {
@@ -1461,6 +1494,7 @@ input[type=number] {
     border-right: 5px solid transparent;
 }
 
+
 /* preset form checkbox */
 
 .checkselect label:last-of-type {
@@ -4179,23 +4213,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
   border-radius: 4px 0 0 4px;
 }
 
-
-/* increment / decrement control - code by Naoufel Razouane */
-
-[dir='rtl'] .spin-control{
-  margin-left: 0;
-  margin-right: -20%;
-}
-[dir='rtl'] .spin-control button{
-  border-left: 0;
-  border-right: 1px solid #CCC;
-}
-[dir='rtl'] .spin-control button.decrement{
-  border-bottom-right-radius: 0;
-}
-[dir='rtl'] .spin-control button.increment{
-  border-bottom-left-radius: 3px;
-}
 /* modal */
 [dir='rtl'] .modal > button {
     position: absolute;