feat(annotations): responsive media queries for annotations-only ctrls (

#1448) Co-authored-by: Ivan Thai <ithai@box.com>
box · Jun 13, 2022 · 4385fbc · 4385fbc
1 parent 5150b0c
commit 4385fbc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
         "babel-loader": "^8.0.6",
         "babel-plugin-transform-require-ignore": "^0.1.1",
         "box-annotations": "^2.3.0",
-        "box-ui-elements": "^15.0.0-beta.49",
+        "box-ui-elements": "15.0.0-beta.50",
         "chai": "^4.2.0",
         "classnames": "^2.2.6",
         "conventional-changelog-cli": "^2.0.28",

diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -1,3 +1,4 @@
+@import '~box-ui-elements/es/styles/variables';
 @import '../../boxuiVariables';
 @import './annotations';
 @import './mixins';
@@ -401,20 +402,22 @@ $thumbnail-sidebar-width: 191px; // Extra pixel to account for sidebar border
     }
 
     &.bp-annotations-only-controls {
-        &.bp-annotations-create--drawing,
-        &.bp-annotations-create--highlight,
-        &.bp-annotations-create--region {
-            // Show exit button when annotation-only controls is active
-            .bp-AnnotationsControls-exitBtn {
-                display: block;
-            }
+        @include breakpoint($medium-screen) {
+            &.bp-annotations-create--drawing,
+            &.bp-annotations-create--highlight,
+            &.bp-annotations-create--region {
+                // Show exit button when annotation-only controls is active
+                .bp-AnnotationsControls-exitBtn {
+                    display: block;
+                }
 
-            // Hide all ControlBarGroups except for last instance which contains AnnotationsControls
-            // and hide all direct children of the group that isn't AnnotationControls
-            .bp-ControlsBarGroup {
-                &:not(:last-child),
-                > *:not(.bp-AnnotationsControls) {
-                    display: none;
+                // Hide all ControlBarGroups except for last instance which contains AnnotationsControls
+                // and hide all direct children of the group that isn't AnnotationControls
+                .bp-ControlsBarGroup {
+                    &:not(:last-child),
+                    > *:not(.bp-AnnotationsControls) {
+                        display: none;
+                    }
                 }
             }
         }

diff --git a/yarn.lock b/yarn.lock
@@ -2969,10 +2969,10 @@ box-annotations@^2.3.0:
   resolved "https://registry.yarnpkg.com/box-annotations/-/box-annotations-2.3.0.tgz#5cac38171f7f8d9283659e2b243310f19d5ab7d3"
   integrity sha512-Ea7tPgyJjX7vcnmZIfCorbzHd6oYx/OHVMPnZVQL/dUHR5vRKhLM0610xqwmVlUpk627sqHw5x/APaa+kt4SXg==
 
-box-ui-elements@^15.0.0-beta.49:
-  version "15.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/box-ui-elements/-/box-ui-elements-15.0.0-beta.49.tgz#79d1c7808b16e873a4a9a13cec410f1a35021394"
-  integrity sha512-xjmWuydoEKZxXagSHzKhp6To8DZDiIUIU+3TgtaGNQ3aRr0ewutoP8wQkwH/VfG9ehB3h+2kIu0cjdCzbYUXvg==
+box-ui-elements@15.0.0-beta.50:
+  version "15.0.0-beta.50"
+  resolved "https://registry.yarnpkg.com/box-ui-elements/-/box-ui-elements-15.0.0-beta.50.tgz#e92772dca56b7ca18f75b10be1af07f131c8f4c0"
+  integrity sha512-DD1Mi4+xR6RxsK/4H5rwjp2dAbMozngcLEmN3sGrJDsKxRVQ7ghT92dUhXtDRcwuQTWoDkPxdRyVN9ilJQ5jLQ==
 
 brace-expansion@^1.1.7:
   version "1.1.11"