New to Kendo UI for Vue? Start a free 30-day trial

Customizing Pdf-viewer

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-widthNumber1px1px
Description
The border width of the PDFViewer.
$kendo-pdf-viewer-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PDFViewer.
$kendo-pdf-viewer-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PDFViewer.
$kendo-pdf-viewer-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PDFViewer.
$kendo-pdf-viewer-bgStringvar( --kendo-component-bg, initial )var(--kendo-component-bg, initial)
Description
The background color of the PDFViewer.
$kendo-pdf-viewer-textStringvar( --kendo-component-text, initial )var(--kendo-component-text, initial)
Description
The text color of the PDFViewer.
$kendo-pdf-viewer-borderStringvar( --kendo-component-border, initial )var(--kendo-component-border, initial)
Description
The border color of the PDFViewer.
$kendo-pdf-viewer-canvas-bgStringif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))var(--kendo-color-surface, #faf9f8)
Description
The background color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
Text color of the PDF viewer canvas.
$kendo-pdf-viewer-canvas-borderStringvar( --kendo-component-border, inherit )var(--kendo-component-border, inherit)
Description
The border color of the PDFViewer canvas.
$kendo-pdf-viewer-page-spacingStringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)
Description
The spacing of the PDFViewer page.
$kendo-pdf-viewer-page-bgStringvar( --kendo-component-bg, inherit )var(--kendo-component-bg, inherit)
Description
The background color of the PDFViewer page.
$kendo-pdf-viewer-page-textStringvar( --kendo-component-text, inherit )!defaultvar(--kendo-component-text, inherit)
Description
The text color of the PDFViewer page.
$kendo-pdf-viewer-page-borderStringvar( --kendo-component-border, inherit )var(--kendo-component-border, inherit)
Description
The border color of the PDFViewer page.
$kendo-pdf-viewer-page-shadowStringvar( --kendo-box-shadow-depth-3, none )var(--kendo-box-shadow-depth-3, none)
Description
The shadow of the PDFViewer page.
$kendo-pdf-viewer-search-panel-padding-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-padding-yString$kendo-pdf-viewer-search-panel-padding-xvar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The border width of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-bgStringvar( --kendo-component-bg, inherit )var(--kendo-component-bg, inherit)
Description
The background color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-borderStringvar( --kendo-component-border, inherit )!defaultvar(--kendo-component-border, inherit)
Description
The border color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-shadowStringnonenone
Description
The shadow of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-matches-spacingStringvar( --kendo-icon-spacing, .5rem )var(--kendo-icon-spacing, 0.5rem)
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-margin-yCalculationcalc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} ) ) * -1 )calc((calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2) + 2 * 1px + 2 * var(--kendo-spacing-3, 0.75rem)) * -1)
Description
The vertical margin of the PDFViewer search panel.
$kendo-pdf-viewer-selection-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The line height of the PDFViewer selection.
$kendo-pdf-viewer-search-highlight-bgStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The background color of the PDFViewer highlight.
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The background color of the PDFViewer highlight mark.
$kendo-pdf-viewer-icon-textString$kendo-dropzone-icon-textvar(--kendo-color-subtle, #605e5c)
Description
The text color of the PDFViewer icon.

In this article

Not finding the help you need?