From e8c888ee02809ea378bf216710fa29a2926c76ba Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Wed, 1 Aug 2018 13:08:21 -0400
Subject: [PATCH] Sprite info and Sprite selector RTL
Changed left/right to first/last. Added direction aware styles.
---
src/components/sprite-info/sprite-info.css | 26 ++++++++++++++++---
src/components/sprite-info/sprite-info.jsx | 4 +--
.../sprite-selector-item.css | 18 +++++++++++--
3 files changed, 40 insertions(+), 8 deletions(-)
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index c83584399..179b13965 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -59,27 +59,45 @@
cursor: default;
}
-.radio-left {
+.radio-first {
border: 1px solid $ui-black-transparent;
+}
+
+[dir="ltr"] .radio-first {
border-top-left-radius: $form-radius;
border-bottom-left-radius: $form-radius;
}
-.radio-left:focus {
+[dir="rtl"] .radio-first {
+ border-top-right-radius: $form-radius;
+ border-bottom-right-radius: $form-radius;
+}
+
+.radio-first:focus {
border-color: $motion-primary;
box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
-.radio-right {
+.radio-last {
border-bottom: 1px solid $ui-black-transparent;
border-top: 1px solid $ui-black-transparent;
+}
+
+[dir="ltr"] .radio-last {
border-right: 1px solid $ui-black-transparent;
border-left: 1px solid $ui-black-transparent;
border-top-right-radius: $form-radius;
border-bottom-right-radius: $form-radius;
}
-.radio-right:focus {
+[dir="rtl"] .radio-last {
+ border-left: 1px solid $ui-black-transparent;
+ border-right: 1px solid $ui-black-transparent;
+ border-top-left-radius: $form-radius;
+ border-bottom-left-radius: $form-radius;
+}
+
+.radio-last:focus {
border-color: $motion-primary;
box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index 37e18735a..738c080cc 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -180,7 +180,7 @@ class SpriteInfo extends React.Component {
<div
className={classNames(
styles.radio,
- styles.radioLeft,
+ styles.radioFirst,
styles.iconWrapper,
{
[styles.isActive]: this.props.visible && !this.props.disabled,
@@ -199,7 +199,7 @@ class SpriteInfo extends React.Component {
<div
className={classNames(
styles.radio,
- styles.radioRight,
+ styles.radioLast,
styles.iconWrapper,
{
[styles.isActive]: !this.props.visible && !this.props.disabled,
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 24bf17395..d29d15c82 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -80,15 +80,29 @@
.delete-button {
position: absolute;
top: 0.125rem;
- right: 0.125rem;
z-index: 1;
}
+[dir="ltr"] .delete-button {
+ right: 0.125rem;
+}
+
+[dir="rtl"] .delete-button {
+ left: 0.125rem;
+}
+
.number {
position: absolute;
top: 0.15rem;
- left: 0.15rem;
font-size: 0.625rem;
font-weight: bold;
z-index: 2;
}
+
+[dir="ltr"] .number {
+ left: 0.15rem;
+}
+
+[dir="rtl"] .number {
+ right: 0.15rem;
+}
--
GitLab