From c076dd6ed962a043e2919a7f49dd821bd4d0a6d8 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Thu, 13 Sep 2018 16:28:45 -0400
Subject: [PATCH] Restyle the question answer box for RTL
---
src/components/question/question.css | 19 +++++++++++++++++--
1 file changed, 17 insertions(+), 2 deletions(-)
diff --git a/src/components/question/question.css b/src/components/question/question.css
index fb8d7869b..4550df75c 100644
--- a/src/components/question/question.css
+++ b/src/components/question/question.css
@@ -33,7 +33,6 @@
.question-submit-button {
position: absolute;
top: calc($space / 2);
- right: calc($space / 2);
width: calc(2rem - $space);
height: calc(2rem - $space);
@@ -45,13 +44,28 @@
background: $motion-primary;
}
+[dir="ltr"] .question-submit-button {
+ right: calc($space / 2);
+}
+
+[dir="rtl"] .question-submit-button {
+ left: calc($space / 2);
+}
+
/* Input overrides: width, font-weight, focus outline and padding */
.question-input > input {
width: 100%;
- padding: 0 2rem 0 0.75rem; /* To make room for the submit button */
font-weight: normal;
}
+[dir="ltr"] .question-input > input {
+ padding: 0 2rem 0 .75rem; /* To make room for the submit button */
+}
+
+[dir="rtl"] .question-input > input {
+ padding: 0 .75rem 0 2rem; /* To make room for the submit button */
+}
+
.question-input > input:focus {
box-shadow: 0px 0px 0px 3px $motion-transparent;
}
@@ -60,5 +74,6 @@
width: calc(2rem - $space);
height: calc(2rem - $space);
position: relative;
+ right: -7px;
left: -7px;
}
--
GitLab