replace sass styles for .mirador-canvas-nav and .mirador-canvas-nav-stacked

src/components/WindowCanvasNavigationControls.js

@@ -29,7 +29,18 @@ export class WindowCanvasNavigationControls extends Component {
     if (!visible) return (<></>);
 
     return (
-      <Paper square className={classNames(classes.controls, ns('canvas-nav'), this.canvasNavControlsAreStacked() ? ns('canvas-nav-stacked') : null)} elevation={0}>
+      <Paper
+        square
+        className={
+          classNames(
+            classes.controls,
+            ns('canvas-nav'),
+            classes.canvasNav,
+            this.canvasNavControlsAreStacked() ? ns('canvas-nav-stacked') : null,
+            this.canvasNavControlsAreStacked() ? classes.canvasNavStacked : null,
+          )}
+        elevation={0}
+      >
         <ZoomControls
           displayDivider={!this.canvasNavControlsAreStacked()}
           windowId={windowId}

src/containers/WindowCanvasNavigationControls.js

@@ -24,6 +24,16 @@ const mapStateToProps = (state, { windowId }) => ({
  * @param theme
  */
 const styles = theme => ({
+  canvasNav: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+  canvasNavStacked: {
+    flexDirection: 'column',
+  },
   controls: {
     backgroundColor: fade(theme.palette.background.paper, 0.5),
     bottom: 0,

src/styles/index.scss

 .mirador {
 
-  &-canvas-nav {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    text-align: center;
-  }
-
-  &-canvas-nav-stacked {
-    flex-direction: column;
-  }
-
   &-label-value-metadata {
     dd {
       margin-bottom: .5em;