Caret transition

cockpit-project · Jan 5, 2024 · 6a7eed4 · 6a7eed4
1 parent 9d1a37e
commit 6a7eed4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/pkg/shell/hosts.jsx b/pkg/shell/hosts.jsx
@@ -184,13 +184,18 @@ export class CockpitHosts extends React.Component {
                                     <HostLine user={user} host={label} />
                                 </span>
                             </span>
-                            {this.state.opened && <CaretUpIcon className="pf-v5-c-select__toggle-arrow mobile_v pf-v5-c-icon pf-m-lg" aria-hidden="true" />}
-                            {!this.state.opened && <CaretDownIcon className="pf-v5-c-select__toggle-arrow mobile_v pf-v5-c-icon pf-m-lg" aria-hidden="true" />}
+                            <CaretDownIcon
+                                className={`pf-v5-c-select__toggle-arrow mobile_v pf-v5-c-icon pf-m-lg ${this.state.opened ? 'clicked' : ''}`}
+                                aria-hidden="true"
+                            />
                             <span className="pf-v5-c-select__toggle-wrapper mobile_v">
                                 {_("Host")}
                             </span>
-                            {this.state.opened && <CaretUpIcon className="pf-v5-c-select__toggle-arrow desktop_v pf-v5-c-icon" aria-hidden="true" />}
-                            {!this.state.opened && <CaretDownIcon className="pf-v5-c-select__toggle-arrow desktop_v pf-v5-c-icon" aria-hidden="true" />}
+                            <CaretUpIcon
+                                className={`pf-v5-c-select__toggle-arrow desktop_v pf-v5-c-icon ${this.state.opened ? 'clicked' : ''}`}
+                                aria-hidden="true"
+                            />
+
                         </button>
                     </div>
 

diff --git a/pkg/shell/nav.scss b/pkg/shell/nav.scss
@@ -258,6 +258,14 @@ $desktop: $phone + 1px;
       display: block;
     }
   }
+  .pf-v5-c-select__toggle-arrow {
+    font-size: 1.3rem;
+    transition-duration: 0.3s;
+  }
+
+  .clicked {
+    transform: rotate(180deg);
+  }
 }
 
 /* Mobile navigation */
@@ -320,9 +328,14 @@ $desktop: $phone + 1px;
     }
 
     .pf-v5-c-select__toggle-arrow {
-      transform: rotate(180deg) scale(1.5);
+      transform: scale(1.5);
       margin: unset;
       margin-block-start: 4px;
+      transition-duration: 0.3s;
+    }
+
+    .clicked {
+      transform : rotate(180deg) scale(1.5);
     }
 
     > button {