Merge pull request #8565 from weseek/imprv/133910-141620-replace-fa-rotate

imprv: 133910 141620 replace fa rotate

apps/app/src/components/Admin/AuditLog/AuditLogSettings.tsx

@@ -55,7 +55,7 @@ export const AuditLogSettings: FC = () => {
       </p>
       <p className="mt-1">
         <button type="button" className="btn btn-link p-0" aria-expanded="false" onClick={() => setIsExpandActionList(!isExpandActionList)}>
-          <span className={`material-symbols-outlined me-1 ${isExpandActionList ? 'fa-rotate-90' : ''}`}>navigate_next</span>
+          <span className={`material-symbols-outlined me-1 ${isExpandActionList ? 'rotate-90' : ''}`}>navigate_next</span>
           { t('admin:audit_log_management.action_list') }
         </button>
       </p>

apps/app/src/components/Admin/Security/SecuritySetting.jsx

@@ -296,7 +296,7 @@ class SecuritySetting extends React.Component {
                     aria-expanded="false"
                     onClick={() => this.setExpantOtherDeleteOptionsState(deletionType, !expantDeleteOptionsState)}
                   >
-                    <span className={`material-symbols-outlined me-1 ${expantDeleteOptionsState ? 'fa-rotate-90' : ''}`}>navigate_next</span>
+                    <span className={`material-symbols-outlined me-1 ${expantDeleteOptionsState ? 'rotate-90' : ''}`}>navigate_next</span>
                     { t('security_settings.other_options') }
                   </button>
                   <Collapse isOpen={expantDeleteOptionsState}>

apps/app/src/components/PageRenameModal.tsx

@@ -287,7 +287,7 @@ const PageRenameModal = (): JSX.Element => {
 
         <p className="mt-2">
           <button type="button" className="btn btn-link mt-2 p-0" aria-expanded="false" onClick={() => setExpandOtherOptions(!expandOtherOptions)}>
-            <span className={`material-symbols-outlined me-1 ${expandOtherOptions ? 'fa-rotate-90' : ''}`}>navigate_next</span>
+            <span className={`material-symbols-outlined me-1 ${expandOtherOptions ? 'rotate-90' : ''}`}>navigate_next</span>
             { t('modal_rename.label.Other options') }
           </button>
         </p>

apps/app/src/styles/style-app.scss

@@ -1,4 +1,5 @@
 @import '@growi/core/scss/flex-expand';
+@import '@growi/core/scss/rotate';
 
 @import 'mixins';
 

packages/core/scss/_rotate.scss

@@ -0,0 +1,16 @@
+// refs: https://fastbootstrap.com/docs/rotate/
+$rotate-degrees: [0, 1, 2, 3, 6, 12, 45, 90, 180];
+
+.rotate-none {
+  transform: none;
+}
+
+@each $degree in $rotate-degrees {
+  .rotate-#{$degree} {
+    transform: rotate(#{$degree}deg);
+  }
+  // negative rotation
+  .-rotate-#{$degree} {
+    transform: rotate(-#{$degree}deg);
+  }
+}