Chore: Make page number input more visible (#179)

box · Jun 26, 2017 · 3b585d8 · 3b585d8
1 parent 896c755
commit 3b585d8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -92,6 +92,13 @@
         }
     }
 
+    .bp-doc-page-num-wrapper {
+        background-color: #444;
+        border-radius: 3px;
+        margin: 5px;
+        padding: 7px 5px;
+    }
+
     .bp-doc-page-num-input {
         display: none;
         font-size: 14px;
@@ -101,6 +108,12 @@
     }
 
     &.show-page-number-input {
+        .bp-doc-page-num-wrapper {
+            background-color: transparent;
+            border: none;
+            padding: 0;
+        }
+
         .bp-doc-page-num {
             opacity: 1;
         }

diff --git a/src/lib/viewers/doc/pageNumButtonContent.html b/src/lib/viewers/doc/pageNumButtonContent.html
@@ -1,4 +1,6 @@
-<span class="bp-doc-current-page">1</span>
-<input type="text" value="" size="3" class="bp-doc-page-num-input">
-<span class="bp-doc-page-num-divider">&nbsp;/&nbsp;</span>
-<span class="bp-doc-total-pages">1</span>
+<div class="bp-doc-page-num-wrapper">
+    <span class="bp-doc-current-page">1</span>
+    <input type="text" value="" size="3" class="bp-doc-page-num-input" />
+    <span class="bp-doc-page-num-divider">&nbsp;/&nbsp;</span>
+    <span class="bp-doc-total-pages">1</span>
+</div>