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

Co-authored-by: Ivan Thai <ithai@box.com>
box · Jul 1, 2022 · fb500bd · fb500bd
1 parent 9d35e22
commit fb500bd
Show file tree

Hide file tree

Showing 3 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/controls/page/PageControls.scss b/src/lib/viewers/controls/page/PageControls.scss
@@ -1,3 +1,4 @@
+@import '~box-ui-elements/es/styles/variables';
 @import '../styles';
 
 .bp-PageControls {
@@ -9,3 +10,9 @@
     @include bp-Control($width: $bp-controls-size-small);
     @include bp-Control--expand;
 }
+
+@include breakpoint($medium-screen) {
+    .bp-PageControls-button {
+        display: none;
+    }
+}
diff --git a/src/lib/viewers/controls/page/PageControlsForm.scss b/src/lib/viewers/controls/page/PageControlsForm.scss
@@ -1,3 +1,4 @@
+@import '~box-ui-elements/es/styles/variables';
 @import '../styles';
 
 .bp-PageControlsForm {
@@ -42,3 +43,10 @@
 .bp-PageControlsForm-button-label {
     @include bp-ControlLabel;
 }
+
+@include breakpoint($medium-screen) {
+    .bp-PageControlsForm-input,
+    .bp-PageControlsForm-button-label {
+        min-width: $bp-controls-size-large;
+    }
+}