chore: Add rtl-ignore directives to transform:rotate() styles so they aren't affected by RTLCSS.

PiperOrigin-RevId: 511239387

Author: material-web-copybara

packages/mdc-checkbox/_checkbox.scss

@@ -31,6 +31,7 @@
 @use '@material/dom/dom';
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/focus-ring/focus-ring';
+@use '@material/rtl/rtl';
 @use '@material/ripple/ripple';
 @use '@material/ripple/ripple-theme';
 @use '@material/touch-target/mixins' as touch-target-mixins;
@@ -462,6 +463,7 @@
   $feat-structure: feature-targeting.create-target($query, structure);
 
   @include feature-targeting.targets($feat-structure) {
+    @include rtl.ignore-next-line();
     transform: rotate(45deg);
     opacity: 0;
   }
@@ -511,6 +513,7 @@
   @include feature-targeting.targets($feat-structure) {
     width: 100%;
     height: 0;
+    @include rtl.ignore-next-line();
     transform: scaleX(0) rotate(0deg);
     border-width: math.div(math.floor(checkbox-theme.$mark-stroke-size), 2);
     border-style: solid;
@@ -523,10 +526,12 @@
 }
 
 @mixin mixedmark--checked_ {
+  @include rtl.ignore-next-line();
   transform: scaleX(1) rotate(-45deg);
 }
 
 @mixin mixedmark--indeterminate_ {
+  @include rtl.ignore-next-line();
   transform: scaleX(1) rotate(0deg);
   opacity: 1;
 }
@@ -598,11 +603,13 @@ $indeterminate-checked-easing-function_: cubic-bezier(0.14, 0, 0, 1) !default;
   @keyframes mdc-checkbox-checked-indeterminate-checkmark {
     from {
       animation-timing-function: animation-variables.$deceleration-curve-timing-function;
+      @include rtl.ignore-next-line();
       transform: rotate(0deg);
       opacity: 1;
     }
 
     to {
+      @include rtl.ignore-next-line();
       transform: rotate(45deg);
       opacity: 0;
     }
@@ -611,11 +618,13 @@ $indeterminate-checked-easing-function_: cubic-bezier(0.14, 0, 0, 1) !default;
   @keyframes mdc-checkbox-indeterminate-checked-checkmark {
     from {
       animation-timing-function: $indeterminate-checked-easing-function_;
+      @include rtl.ignore-next-line();
       transform: rotate(45deg);
       opacity: 0;
     }
 
     to {
+      @include rtl.ignore-next-line();
       transform: rotate(360deg);
       opacity: 1;
     }
@@ -624,11 +633,13 @@ $indeterminate-checked-easing-function_: cubic-bezier(0.14, 0, 0, 1) !default;
   @keyframes mdc-checkbox-checked-indeterminate-mixedmark {
     from {
       animation-timing-function: mdc-animation-deceleration-curve-timing-function;
+      @include rtl.ignore-next-line();
       transform: rotate(-45deg);
       opacity: 0;
     }
 
     to {
+      @include rtl.ignore-next-line();
       transform: rotate(0deg);
       opacity: 1;
     }
@@ -637,11 +648,13 @@ $indeterminate-checked-easing-function_: cubic-bezier(0.14, 0, 0, 1) !default;
   @keyframes mdc-checkbox-indeterminate-checked-mixedmark {
     from {
       animation-timing-function: $indeterminate-checked-easing-function_;
+      @include rtl.ignore-next-line();
       transform: rotate(0deg);
       opacity: 1;
     }
 
     to {
+      @include rtl.ignore-next-line();
       transform: rotate(315deg);
       opacity: 0;
     }

packages/mdc-checkbox/package.json

@@ -24,6 +24,7 @@
     "@material/feature-targeting": "^14.0.0",
     "@material/focus-ring": "^14.0.0",
     "@material/ripple": "^14.0.0",
+    "@material/rtl": "^14.0.0",
     "@material/theme": "^14.0.0",
     "@material/touch-target": "^14.0.0",
     "tslib": "^2.1.0"

packages/mdc-circular-progress/_circular-progress.scss

@@ -88,6 +88,7 @@
 
   .mdc-circular-progress__determinate-container {
     @include feature-targeting.targets($feat-structure) {
+      @include rtl.ignore-next-line();
       transform: rotate(-90deg);
     }
   }
@@ -133,6 +134,7 @@
         @include rtl.ignore-next-line();
         left: -900%;
         width: 2000%;
+        @include rtl.ignore-next-line();
         transform: rotate(180deg);
       }
     }
@@ -265,6 +267,7 @@
 @mixin container-rotate-keyframes_ {
   @keyframes mdc-circular-progress-container-rotate {
     to {
+      @include rtl.ignore-next-line();
       transform: rotate(360deg);
     }
   }
@@ -276,6 +279,7 @@
   @keyframes mdc-circular-progress-spinner-layer-rotate {
     @for $i from 1 through 8 {
       #{$i * 12.5}% {
+        @include rtl.ignore-next-line();
         transform: rotate($i * 0.5 * circular-progress-theme.$arc-size);
       }
     }
@@ -389,12 +393,15 @@
 @mixin left-spin-keyframes_ {
   @keyframes mdc-circular-progress-left-spin {
     from {
+      @include rtl.ignore-next-line();
       transform: rotate(265deg);
     }
     50% {
+      @include rtl.ignore-next-line();
       transform: rotate(130deg);
     }
     to {
+      @include rtl.ignore-next-line();
       transform: rotate(265deg);
     }
   }
@@ -406,12 +413,15 @@
 @mixin right-spin-keyframes_ {
   @keyframes mdc-circular-progress-right-spin {
     from {
+      @include rtl.ignore-next-line();
       transform: rotate(-265deg);
     }
     50% {
+      @include rtl.ignore-next-line();
       transform: rotate(-130deg);
     }
     to {
+      @include rtl.ignore-next-line();
       transform: rotate(-265deg);
     }
   }

packages/mdc-data-table/_data-table-header-cell.scss

@@ -89,6 +89,7 @@
 
     @include feature-targeting.targets($feat-structure) {
       // Apply dummy `transform` to avoid pixel shift on sort down animation.
+      @include rtl.ignore-next-line();
       transform: rotate(0.0001deg);
     }
 
@@ -108,6 +109,7 @@
 
     .mdc-data-table__header-cell--sorted-descending & {
       @include feature-targeting.targets($feat-structure) {
+        @include rtl.ignore-next-line();
         transform: rotate(-180deg);
       }
     }

packages/mdc-linear-progress/_linear-progress.scss

@@ -120,6 +120,7 @@
         background-repeat: repeat-x;
         // background-size: 10px variables.$height;
         flex: auto;
+        @include rtl.ignore-next-line();
         transform: rotate(180deg);
       }
 
@@ -278,6 +279,7 @@
     }
 
     @include feature-targeting.targets($feat-structure) {
+      @include rtl.ignore-next-line();
       transform: rotate(0);
     }
   }

packages/mdc-tooltip/_tooltip.scss

@@ -222,6 +222,7 @@ $_caret-size: 24px;
       // We override this transform in MDCTooltipFoundation, however these
       // styles must be present before the override happens in order to
       // calculate the correct boundingClientRect (with the transforms applied).
+      @include rtl.ignore-next-line();
       transform: rotate(35deg) skewY(20deg) scaleX(math.cos(20deg));
     }
   }