Sass Variables
The Telerik and Kendo UI PDFViewer is a composite UI component that consists of Pager, Toolbar, Buttons, Textbox, Upload, and ExternalDropzone components. To configure and customize its appearance, use not only its dedicated Sass variables but also the Pager, Toolbar, Textbox, Upload and ExternalDropZone Sass variables, as well as those provided by the Button component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-pdf-viewer-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the PDFViewer. | |||
kendo-pdf-viewer-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the PDFViewer. | |||
kendo-pdf-viewer-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the PDFViewer. | |||
kendo-pdf-viewer-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the PDFViewer. | |||
kendo-pdf-viewer-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the PDFViewer. | |||
kendo-pdf-viewer-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the PDFViewer. | |||
kendo-pdf-viewer-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the PDFViewer. | |||
kendo-pdf-viewer-toolbar-bg | null | null | Default: nullComputed: null |
| Description: The background color of the PDFViewer Toolbar. | |||
kendo-pdf-viewer-toolbar-text | null | null | Default: nullComputed: null |
| Description: The text color of the PDFViewer Toolbar. | |||
kendo-pdf-viewer-toolbar-border | null | null | Default: nullComputed: null |
| Description: The border color of the PDFViewer Toolbar. | |||
kendo-pdf-viewer-toolbar-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the PDFViewer Toolbar. | |||
kendo-pdf-viewer-canvas-bg | $kendo-app-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-app-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the PDFViewer canvas. | |||
kendo-pdf-viewer-canvas-text | null | null | Default: nullComputed: null |
| Description: The text color of the PDFViewer canvas. | |||
kendo-pdf-viewer-canvas-border | null | null | Default: nullComputed: null |
| Description: The border color of the PDFViewer canvas. | |||
kendo-pdf-viewer-page-spacing | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) | Default: k-spacing(7.5)Computed: var(--kendo-spacing-7\.5, 1.875rem) |
| Description: The spacing of the PDFViewer page. | |||
kendo-pdf-viewer-page-bg | white | white | Default: whiteComputed: white |
| Description: The background color of the PDFViewer page. | |||
kendo-pdf-viewer-page-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the PDFViewer page. | |||
kendo-pdf-viewer-page-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the PDFViewer page. | |||
kendo-pdf-viewer-page-shadow | k-elevation(3) | var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(3)Computed: var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: The shadow of the PDFViewer page. | |||
kendo-pdf-viewer-search-panel-padding-x | $kendo-toolbar-md-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-toolbar-md-padding-xComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-padding-y | calc( #{$kendo-toolbar-md-padding-x} * 2 ) | calc(var(--kendo-spacing-2, 0.5rem) * 2) | Default: calc( #{$kendo-toolbar-md-padding-x} * 2 )Computed: calc(var(--kendo-spacing-2, 0.5rem) * 2) |
| Description: The vertical padding of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-spacing | $kendo-toolbar-md-spacing | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-toolbar-md-spacingComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The spacing of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-border-radius | 0 | 0 | Default: 0Computed: 0 |
| Description: The border radius of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-shadow | $kendo-window-shadow | var(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: $kendo-window-shadowComputed: var(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: The shadow of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-matches-spacing | $kendo-padding-sm-x | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-padding-sm-xComputed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing of the matches container in the PDFViewer search panel. | |||
kendo-pdf-viewer-selection-line-height | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) | Default: var( --kendo-line-height-sm, normal )Computed: var(--kendo-line-height-sm, normal) |
| Description: The line height of the PDFViewer selection. | |||
kendo-pdf-viewer-search-highlight-bg | $kendo-body-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-body-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The background color of the PDFViewer highlight. | |||
kendo-pdf-viewer-search-highlight-mark-bg | yellow | yellow | Default: yellowComputed: yellow |
| Description: The background color of the PDFViewer highlight mark. | |||
kendo-pdf-viewer-icon-text | $kendo-dropzone-icon-text | var(--kendo-color-subtle, #666666) | Default: $kendo-dropzone-icon-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the PDFViewer icon. | |||
