feat: make Circle Loader support RTL

adobe · Feb 25, 2020 · f3be212 · f3be212
1 parent c12138c
commit f3be212
Showing 1 changed file with 26 additions and 26 deletions.
diff --git a/components/circleloader/index.css b/components/circleloader/index.css
@@ -15,47 +15,47 @@ governing permissions and limitations under the License.
 
 .spectrum-CircleLoader {
   display: inline-block;
-  width: var(--spectrum-loader-circle-medium-width);
-  height: var(--spectrum-loader-circle-medium-height);
+  inline-size: var(--spectrum-loader-circle-medium-width);
+  block-size: var(--spectrum-loader-circle-medium-height);
   position: relative;
   direction: ltr;
 }
 .spectrum-CircleLoader-track {
   box-sizing: border-box;
-  width: calc(var(--spectrum-loader-circle-medium-width));
-  height: calc(var(--spectrum-loader-circle-medium-height));
+  inline-size: calc(var(--spectrum-loader-circle-medium-width));
+  block-size: calc(var(--spectrum-loader-circle-medium-height));
   border-style: solid;
   border-width: var(--spectrum-loader-circle-medium-border-size);
   border-radius: var(--spectrum-loader-circle-medium-width);
 }
 .spectrum-CircleLoader-fills {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
 }
 .spectrum-CircleLoader-fill {
   box-sizing: border-box;
-  width: calc(var(--spectrum-loader-circle-medium-width));
-  height: calc(var(--spectrum-loader-circle-medium-height));
+  inline-size: calc(var(--spectrum-loader-circle-medium-width));
+  block-size: calc(var(--spectrum-loader-circle-medium-height));
   border-style: solid;
   border-width: var(--spectrum-loader-circle-medium-border-size);
   border-radius: var(--spectrum-loader-circle-medium-width);
 }
 .spectrum-CircleLoader-fillMask1,
 .spectrum-CircleLoader-fillMask2 {
-  width: 50%;
-  height: 100%;
+  inline-size: 50%;
+  block-size: 100%;
   transform-origin: 100% center;
   transform: rotate(180deg);
   overflow: hidden;
   position: absolute;
 }
 .spectrum-CircleLoader-fillSubMask1,
 .spectrum-CircleLoader-fillSubMask2 {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   transform-origin: 100% center;
   overflow: hidden;
   transform: rotate(-180deg);
@@ -65,40 +65,40 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-CircleLoader--small {
-  width: var(--spectrum-loader-circle-small-width);
-  height: var(--spectrum-loader-circle-small-height);
+  inline-size: var(--spectrum-loader-circle-small-width);
+  block-size: var(--spectrum-loader-circle-small-height);
 
   .spectrum-CircleLoader-track {
-    width: calc(var(--spectrum-loader-circle-small-width));
-    height: calc(var(--spectrum-loader-circle-small-height));
+    inline-size: calc(var(--spectrum-loader-circle-small-width));
+    block-size: calc(var(--spectrum-loader-circle-small-height));
     border-style: solid;
     border-width: var(--spectrum-loader-circle-small-border-size);
     border-radius: var(--spectrum-loader-circle-small-width);
   }
   .spectrum-CircleLoader-fill {
-    width: calc(var(--spectrum-loader-circle-small-width));
-    height: calc(var(--spectrum-loader-circle-small-height));
+    inline-size: calc(var(--spectrum-loader-circle-small-width));
+    block-size: calc(var(--spectrum-loader-circle-small-height));
     border-style: solid;
     border-width: var(--spectrum-loader-circle-small-border-size);
     border-radius: var(--spectrum-loader-circle-small-width);
   }
 }
 
 .spectrum-CircleLoader--large {
-  width: var(--spectrum-loader-circle-large-width);
-  height: var(--spectrum-loader-circle-large-height);
+  inline-size: var(--spectrum-loader-circle-large-width);
+  block-size: var(--spectrum-loader-circle-large-height);
 
   .spectrum-CircleLoader-track {
-    width: calc(var(--spectrum-loader-circle-large-width));
-    height: calc(var(--spectrum-loader-circle-large-height));
+    inline-size: calc(var(--spectrum-loader-circle-large-width));
+    block-size: calc(var(--spectrum-loader-circle-large-height));
     border-style: solid;
     border-width: var(--spectrum-loader-circle-large-border-size);
     border-radius: var(--spectrum-loader-circle-large-width);
   }
 
   .spectrum-CircleLoader-fill {
-    width: calc(var(--spectrum-loader-circle-large-width));
-    height: calc(var(--spectrum-loader-circle-large-height));
+    inline-size: calc(var(--spectrum-loader-circle-large-width));
+    block-size: calc(var(--spectrum-loader-circle-large-height));
     border-style: solid;
     border-width: var(--spectrum-loader-circle-large-border-size);
     border-radius: var(--spectrum-loader-circle-large-width);