feat: make Alert support RTL

adobe · Feb 14, 2020 · 39f318b · 39f318b
1 parent 71a1ac5
commit 39f318b
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/components/alert/index.css b/components/alert/index.css
@@ -25,10 +25,12 @@ governing permissions and limitations under the License.
 
   display: inline-block;
   box-sizing: border-box;
-  min-width: var(--spectrum-alert-min-width);
-  min-height: var(--spectrum-alert-header-height);
-  margin: 8px 0;
-  padding: var(--spectrum-alert-padding-y) var(--spectrum-alert-padding-x);
+  min-inline-size: var(--spectrum-alert-min-width);
+  min-block-size: var(--spectrum-alert-header-height);
+  margin-block: 8px;
+  margin-inline: 0;
+  padding-block: var(--spectrum-alert-padding-y);
+  padding-inline: var(--spectrum-alert-padding-x);
 
   border-width: var(--spectrum-alert-border-width);
   border-style: solid;
@@ -38,19 +40,19 @@ governing permissions and limitations under the License.
 .spectrum-Alert-icon {
   position: absolute;
   display: block;
-  top: 20px;
-  right: 20px;
+  inset-block-start: 20px;
+  inset-inline-end: 20px;
 }
 
 .spectrum-Alert-header {
   display: inline-block;
-  height: auto;
-  min-height: 0;
+  block-size: auto;
+  min-block-size: 0;
   margin: 0;
   padding: 0;
 
   /* Leave room for the icon */
-  padding-right: 30px;
+  padding-inline-end: 30px;
 
   font-size: 14px;
   font-weight: 700;
@@ -71,18 +73,18 @@ governing permissions and limitations under the License.
 .spectrum-Alert-footer {
   display: block;
 
-  text-align: right;
+  text-align: end;
 
-  padding-top: 0.5rem;
+  padding-block-start: 0.5rem;
 
   &:empty {
     display: none;
   }
 
   .spectrum-Button {
-    margin-right: 0;
+    margin-inline-end: 0;
 
     /* Spacing between buttons */
-    margin-left: 0.75rem;
+    margin-inline-start: 0.75rem;
   }
 }