refactor(inpageNavigation): adjust to volto theming

eea · Mar 1, 2022 · 62f74ea · 62f74ea
1 parent 1d978a9
commit 62f74ea
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/ui/InpageNavigation/InpageNavigation.jsx b/src/ui/InpageNavigation/InpageNavigation.jsx
@@ -42,11 +42,12 @@ class InpageNavigation extends Component {
           role="none"
           className={this.state.removeClass}
         >
-          <div className="eea navigation mobile tablet only">
+          <div className="mobile tablet only">
             <Icon name="chevron up" />
           </div>
-          <div className="eea navigation tablet or lower hidden">
-            <Icon name="chevron up" /> top
+          <div className="tablet or lower hidden">
+            <Icon name="chevron up" />
+            <span>Top</span>
           </div>
         </div>
       </Container>

diff --git a/theme/themes/eea/extras/inpageNavigation.less b/theme/themes/eea/extras/inpageNavigation.less
@@ -47,6 +47,7 @@
         right: @computerNavRight;
         width: @computerNavWidth;
         height: @computerNavHeight;
+        font-size: @computerNavFontSize;
     }
 }
 
diff --git a/theme/themes/eea/extras/inpageNavigation.variables b/theme/themes/eea/extras/inpageNavigation.variables
@@ -2,14 +2,20 @@
         Inpage Navigation
 *******************************/
 
-@tabletNavWidth       : 2.813rem;
-@tabletNavHeight      : 2.813rem;
-@computerNavWidth     : 3.438rem;
-@computerNavHeight    : 3.438rem;
 @navBottom            : 1.875rem;
 @mobileNavRight       : @mobilePadding;
 @tabletNavRight       : @tabletPadding;
 @computerNavRight     : @computerPadding;
 @navBackground        : @darkCerulean;
 @navColor             : @white;
-@navFontWeight        : @bold;
+@navFontWeight        : @bold;
+
+/* Inpage navigation size */
+@tabletNavWidth       : 2.25rem;
+@tabletNavHeight      : 2.25rem;
+@computerNavWidth     : 3.563rem;
+@computerNavHeight    : 3.563rem;
+
+/* Font Sizes */
+@tabletNavIconFontSize: 1.313rem;
+@computerNavFontSize  : 14px;