fix(pdf-viewer): reuse toolbar variables for pdf-viewer search

telerik · Jan 3, 2022 · 5c0f71c · 5c0f71c
1 parent 8f9fd76
commit 5c0f71c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 49 deletions.
diff --git a/packages/bootstrap/scss/pdf-viewer/_variables.scss b/packages/bootstrap/scss/pdf-viewer/_variables.scss
@@ -24,11 +24,8 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
-$pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $input-padding-y !default;
-$pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
-$pdf-viewer-search-dialog-matches-width: 4.5em !default;
+$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
 $pdf-viewer-selection-line-height: 1.2 !default;
 

diff --git a/packages/classic/scss/pdf-viewer/_variables.scss b/packages/classic/scss/pdf-viewer/_variables.scss
@@ -24,11 +24,8 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
-$pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $input-padding-y !default;
-$pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
-$pdf-viewer-search-dialog-matches-width: 4.5em !default;
+$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 

diff --git a/packages/default/scss/pdf-viewer/_layout.scss b/packages/default/scss/pdf-viewer/_layout.scss
@@ -86,51 +86,42 @@
 
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-spacing;
+        padding: $pdf-viewer-search-dialog-padding;
 
         .k-search-container {
             display: flex;
+            gap: $pdf-viewer-search-dialog-spacing;
+            flex-flow: row nowrap;
             flex: 0 0 auto;
             justify-content: flex-start;
             align-items: center;
 
-            .k-textbox {
-                display: inline-flex;
-                padding-right: $pdf-viewer-search-dialog-textbox-padding-x;
-                margin: 0 $pdf-viewer-search-dialog-spacing;
-                align-items: center;
-                background: none;
+            .k-search-dialog-draghandle {
+                cursor: move;
+                margin-left: 0;
             }
-            .k-textbox .k-icon {
-                position: absolute;
-                font-size: inherit;
 
-                .k-ie & {
-                    position: relative;
-                }
-            }
+            .k-textbox {
+                width: 10em;
+                flex: none;
 
-            .k-match-case-button {
-                display: inline-flex;
-                height: $pdf-viewer-search-dialog-input-button-height;
-                justify-content: center;
+                .k-button {
+                    border-width: 0;
+                }
             }
 
             .k-search-matches {
-                display: inline-block;
-                min-width: $pdf-viewer-search-dialog-matches-width;
-                margin: 0 $pdf-viewer-search-dialog-spacing 0 $pdf-viewer-search-dialog-button-spacing;
-                vertical-align: middle;
+                flex: 1 1 auto;
             }
+        }
+    }
 
-            > .k-button {
-                margin-left: $pdf-viewer-search-dialog-button-spacing;
-            }
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
-            }
+    // IE
+    .k-ie .k-pdf-viewer-search-dialog {
+
+        .k-search-container > * + * {
+            margin-left: $pdf-viewer-search-dialog-spacing;
         }
     }
 

diff --git a/packages/default/scss/pdf-viewer/_variables.scss b/packages/default/scss/pdf-viewer/_variables.scss
@@ -24,11 +24,8 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
-$pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $input-padding-y !default;
-$pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
-$pdf-viewer-search-dialog-matches-width: 4.5em !default;
+$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 

diff --git a/packages/material/scss/pdf-viewer/_variables.scss b/packages/material/scss/pdf-viewer/_variables.scss
@@ -24,11 +24,8 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-spacing: 6px !default;
-$pdf-viewer-search-dialog-button-spacing: 0px !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $input-padding-y !default;
-$pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
-$pdf-viewer-search-dialog-matches-width: 4.5em !default;
+$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
 $pdf-viewer-selection-line-height: $line-height-sm !default;