diff --git a/src/components/color-button/color-button.css b/src/components/color-button/color-button.css
index 9995ccbd..94b10472 100644
--- a/src/components/color-button/color-button.css
+++ b/src/components/color-button/color-button.css
@@ -12,10 +12,18 @@
flex-shrink: 0;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+[dir="ltr"] .color-button-swatch {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
+[dir="rtl"] .color-button-swatch {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
.color-button-arrow {
display: flex;
user-select: none;
@@ -24,10 +32,7 @@
flex-shrink: 0;
height: 100%;
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.25);
- border-left: none;
align-items: center;
justify-content: center;
@@ -35,6 +40,18 @@
font-size: 0.75rem;
}
+[dir="ltr"] .color-button-arrow {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-left: none;
+}
+
+[dir="rtl"] .color-button-arrow {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ border-right: none;
+}
+
.swatch-icon {
width: 1.75rem;
margin: auto;
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
index c9574cb7..6219da4c 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -18,11 +18,18 @@ $arrow-border-width: 14px;
.dropdown-icon {
width: .5rem;
height: .5rem;
- margin-left: .5rem;
vertical-align: middle;
padding-bottom: .2rem;
}
+[dir="ltr"] .dropdown-icon {
+ margin-left: .5rem;
+}
+
+[dir="rtl"] .dropdown-icon {
+ margin-right: .5rem;
+}
+
.mod-caret-up {
transform: rotate(180deg);
padding-bottom: 0;
diff --git a/src/components/fixed-tools/fixed-tools.css b/src/components/fixed-tools/fixed-tools.css
index be013461..1bc6fe56 100644
--- a/src/components/fixed-tools/fixed-tools.css
+++ b/src/components/fixed-tools/fixed-tools.css
@@ -11,11 +11,16 @@
width: 8rem;
}
-.mod-dashed-border {
+[dir="ltr"] .mod-dashed-border {
border-right: 1px dashed $ui-pane-border;
padding-right: calc(2 * $grid-unit);
}
+[dir="rtl"] .mod-dashed-border {
+ border-left: 1px dashed $ui-pane-border;
+ padding-left: calc(2 * $grid-unit);
+}
+
.mod-unselect {
user-select: none;
}
@@ -26,35 +31,65 @@ $border-radius: 0.25rem;
display: inline-block;
border: 1px solid $ui-pane-border;
border-radius: 0;
- border-left: none;
padding: .35rem;
}
-.button-group-button:last-of-type {
+[dir="ltr"] .button-group-button {
+ border-left: none;
+}
+
+[dir="rtl"] .button-group-button {
+ border-right: none;
+}
+
+[dir="ltr"] .button-group-button:last-of-type {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
-.button-group-button:first-of-type {
+[dir="ltr"] .button-group-button:first-of-type {
border-left: 1px solid $ui-pane-border;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
-.button-group-button.mod-left-border {
+[dir="rtl"] .button-group-button:last-of-type {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+}
+
+[dir="rtl"] .button-group-button:first-of-type {
+ border-right: 1px solid $ui-pane-border;
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+}
+
+[dir="ltr"] .button-group-button.mod-start-border {
border-left: 1px solid $ui-pane-border;
}
-.button-group-button.mod-no-right-border {
+[dir="rtl"] .button-group-button.mod-start-border {
+ border-right: 1px solid $ui-pane-border;
+}
+
+[dir="ltr"] .button-group-button.mod-no-end-border {
border-right: none;
}
+[dir="rtl"] .button-group-button.mod-no-end-border {
+ border-left: none;
+}
+
.button-group-button-icon {
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
}
+[dir="rtl"] .button-group-button-icon {
+ transform: scaleX(-1);
+}
+
.mod-context-menu {
display: flex;
flex-direction: column;
diff --git a/src/components/fixed-tools/fixed-tools.jsx b/src/components/fixed-tools/fixed-tools.jsx
index b3f29a39..8cfaaf46 100644
--- a/src/components/fixed-tools/fixed-tools.jsx
+++ b/src/components/fixed-tools/fixed-tools.jsx
@@ -121,7 +121,7 @@ const FixedToolsComponent = props => {
classNames(
styles.buttonGroupButton,
{
- [styles.modNoRightBorder]: !redoDisabled
+ [styles.modNoEndBorder]: !redoDisabled
}
)
}
@@ -130,7 +130,10 @@ const FixedToolsComponent = props => {
>
@@ -140,7 +143,7 @@ const FixedToolsComponent = props => {
classNames(
styles.buttonGroupButton,
{
- [styles.modLeftBorder]: !redoDisabled
+ [styles.modStartBorder]: !redoDisabled
}
)
}
diff --git a/src/components/forms/label.css b/src/components/forms/label.css
index 7d72d027..5c43af82 100644
--- a/src/components/forms/label.css
+++ b/src/components/forms/label.css
@@ -13,11 +13,18 @@ See https://github.com/LLK/scratch-paint/issues/13 */
.input-label, .input-label-secondary {
font-size: 0.625rem;
- margin-right: calc(2 * $grid-unit);
user-select: none;
cursor: default;
}
+[dir="ltr"] .input-label, [dir="ltr"] .input-label-secondary{
+ margin-right: calc(2 * $grid-unit);
+}
+
+[dir="rtl"] .input-label, [dir="ltr"] .input-label-secondary{
+ margin-left: calc(2 * $grid-unit);
+}
+
.input-label {
font-weight: bold;
}
diff --git a/src/components/input-group/input-group.css b/src/components/input-group/input-group.css
index 6c9d8b83..0ee22fa1 100644
--- a/src/components/input-group/input-group.css
+++ b/src/components/input-group/input-group.css
@@ -1,9 +1,13 @@
@import '../../css/units.css';
-.input-group + .input-group {
+[dir="ltr"] .input-group + .input-group {
margin-left: calc(2 * $grid-unit);
}
+[dir="rtl"] .input-group + .input-group {
+ margin-right: calc(2 * $grid-unit);
+}
+
.disabled {
opacity: 0.3;
/* Prevent any user actions */
diff --git a/src/components/mode-tools/mode-tools.css b/src/components/mode-tools/mode-tools.css
index ee867409..e855eb97 100644
--- a/src/components/mode-tools/mode-tools.css
+++ b/src/components/mode-tools/mode-tools.css
@@ -13,11 +13,16 @@
height: 2rem;
}
-.mod-dashed-border {
+[dir="ltr"] .mod-dashed-border {
border-right: 1px dashed $ui-pane-border;
padding-right: calc(3 * $grid-unit);
}
+[dir="rtl"] .mod-dashed-border {
+ border-left: 1px dashed $ui-pane-border;
+ padding-left: calc(3 * $grid-unit);
+}
+
.mod-labeled-icon-height {
display: flex;
height: 2.85rem; /* for the second row so the dashed borders are equal in size */
diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css
index 5208c871..f5720768 100644
--- a/src/components/paint-editor/paint-editor.css
+++ b/src/components/paint-editor/paint-editor.css
@@ -28,11 +28,15 @@
margin-top: calc(2 * $grid-unit);
}
-.mod-dashed-border {
+[dir="ltr"] .mod-dashed-border {
border-right: 1px dashed $ui-pane-border;
padding-right: calc(2 * $grid-unit);
}
+[dir="rtl"] .mod-dashed-border {
+ border-left: 1px dashed $ui-pane-border;
+ padding-left: calc(2 * $grid-unit);
+}
.mod-labeled-icon-height {
height: 2.85rem; /* for the second row so the dashed borders are equal in size */
}
@@ -43,29 +47,55 @@ $border-radius: 0.25rem;
display: inline-block;
border: 1px solid $ui-pane-border;
border-radius: 0;
- border-left: none;
padding: .35rem;
}
-.button-group-button:last-of-type {
+[dir="ltr"] .button-group-button {
+ border-left: none;
+}
+
+[dir="rtl"] .button-group-button {
+ border-right: none;
+}
+
+[dir="ltr"] .button-group-button:last-of-type {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
-.button-group-button:first-of-type {
+[dir="ltr"] .button-group-button:first-of-type {
border-left: 1px solid $ui-pane-border;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
-.button-group-button.mod-left-border {
+[dir="rtl"] .button-group-button:last-of-type {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+}
+
+[dir="rtl"] .button-group-button:first-of-type {
+ border-right: 1px solid $ui-pane-border;
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+}
+
+[dir="ltr"] .button-group-button.mod-start-border {
border-left: 1px solid $ui-pane-border;
}
-.button-group-button.mod-no-right-border {
+[dir="rtl"] .button-group-button.mod-start-border {
+ border-right: 1px solid $ui-pane-border;
+}
+
+[dir="ltr"].button-group-button.mod-no-end-border {
border-right: none;
}
+[dir="rtl"].button-group-button.mod-no-end-border {
+ border-left: none;
+}
+
.button-group-button-icon {
width: 1.25rem;
height: 1.25rem;
@@ -76,10 +106,14 @@ $border-radius: 0.25rem;
margin-left: calc(2 * $grid-unit);
}
-.mod-margin-right {
+[dir="ltr"] .mod-margin-after {
margin-right: calc(2 * $grid-unit);
}
+[dir="rtl"] .mod-margin-after {
+ margin-left: calc(2 * $grid-unit);
+}
+
.canvas-container {
width: 480px;
height: 360px;
@@ -92,7 +126,6 @@ $border-radius: 0.25rem;
.mode-selector {
display: flex;
- margin-right: calc(2 * $grid-unit);
max-width: 6rem;
flex-direction: row;
flex-wrap: wrap;
@@ -101,6 +134,14 @@ $border-radius: 0.25rem;
justify-content: space-between;
}
+[dir="ltr"] .mode-selector {
+ margin-right: calc(2 * $grid-unit);
+}
+
+[dir="rtl"] .mode-selector {
+ margin-left: calc(2 * $grid-unit);
+}
+
.hidden {
display: none;
}
@@ -137,10 +178,14 @@ $border-radius: 0.25rem;
justify-content: center;
}
-.bitmap-button-icon {
+[dir="ltr"] .bitmap-button-icon {
margin-right: calc(2 * $grid-unit);
}
+[dir="rtl"] .bitmap-button-icon {
+ margin-left: calc(2 * $grid-unit);
+}
+
@media only screen and (max-width: $full-size-paint) {
.editor-container {
padding: calc(3 * $grid-unit) $grid-unit;
diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index 70489d8f..75164647 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@@ -90,7 +90,7 @@ const PaintEditorComponent = props => (
>
{/* fill */}
{/* stroke */}
@@ -119,7 +119,7 @@ const PaintEditorComponent = props => (
>
{/* fill */}