feat(annotations): hide page steppers on small-medium widths

box · Jun 14, 2022 · b34ba96 · b34ba96
1 parent 4385fbc
commit b34ba96
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/lib/viewers/controls/_styles.scss b/src/lib/viewers/controls/_styles.scss
@@ -7,6 +7,7 @@ $bp-controls-outline: inset 0 0 0 1px fade-out($bdl-gray-20, .5), 0 1px 2px fade
 $bp-controls-radius-inner: 4px;
 $bp-controls-radius-outer: 6px;
 $bp-controls-size-default: 44px;
+$bp-controls-size-large: 56px;
 $bp-controls-size-small: 32px;
 $bp-controls-spacing: 6px;
 

diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -1,5 +1,6 @@
 @import '~box-ui-elements/es/styles/variables';
 @import '../../boxuiVariables';
+@import '../controls/styles';
 @import './annotations';
 @import './mixins';
 @import './theme';
@@ -201,6 +202,20 @@ $thumbnail-sidebar-width: 191px; // Extra pixel to account for sidebar border
     }
 }
 
+@include breakpoint($medium-screen) {
+    .bp-PageControls-button {
+        display: none;
+    }
+
+    .bp-PageControlsForm-button-label {
+        min-width: $bp-controls-size-large;
+    }
+
+    input[type='number'].bp-PageControlsForm-input {
+        width: $bp-controls-size-large;
+    }
+}
+
 .bp-theme-dark {
     .bp {
         .bp-thumbnails-container {