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: 1px Computed: 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-bg Computed: 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-text Computed: 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-border Computed: 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: null Computed: null |
Description: The background color of the PDFViewer Toolbar. | |||
kendo-pdf-viewer-toolbar-text | null | null | Default: null Computed: null |
Description: The text color of the PDFViewer Toolbar. | |||
kendo-pdf-viewer-toolbar-border | null | null | Default: null Computed: null |
Description: The border color of the PDFViewer Toolbar. | |||
kendo-pdf-viewer-toolbar-gradient | null | null | Default: null Computed: null |
Description: The gradient of the PDFViewer Toolbar. | |||
kendo-pdf-viewer-canvas-bg | $kendo-app-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-app-bg Computed: var(--kendo-color-surface, #fafafa) |
Description: The background color of the PDFViewer canvas. | |||
kendo-pdf-viewer-canvas-text | null | null | Default: null Computed: null |
Description: The text color of the PDFViewer canvas. | |||
kendo-pdf-viewer-canvas-border | null | null | Default: null Computed: 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: white Computed: 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-text Computed: 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-border Computed: 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-x Computed: 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-spacing Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The spacing of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The border width of the PDFViewer search panel. | |||
kendo-pdf-viewer-search-panel-border-radius | 0 | 0 | Default: 0 Computed: 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-bg Computed: 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-text Computed: 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-border Computed: 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-shadow Computed: 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 | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1) Computed: 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-text Computed: 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: yellow Computed: 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-text Computed: var(--kendo-color-subtle, #666666) |
Description: The text color of the PDFViewer icon. | |||
kendo-pdf-viewer-popup-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The vertical padding of the PDFViewer popup. | |||
kendo-pdf-viewer-popup-padding-y | $kendo-pdf-viewer-popup-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-pdf-viewer-popup-padding-x Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The horizontal padding of the PDFViewer popup. | |||
kendo-pdf-viewer-highlight-annotation-border | if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) | var(--kendo-color-primary, #ff6358) | Default: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) Computed: var(--kendo-color-primary, #ff6358) |
Description: The border color of the PDFViewer selected highlight annotation. | |||
kendo-pdf-viewer-highlight-annotation-hover-border | if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) | var(--kendo-color-primary-hover, #ea5a51) | Default: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) Computed: var(--kendo-color-primary-hover, #ea5a51) |
Description: The background color of the PDFViewer hover highlight annotation. | |||
kendo-pdf-viewer-free-text-annotation-border | if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) | var(--kendo-color-primary, #ff6358) | Default: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) Computed: var(--kendo-color-primary, #ff6358) |
Description: The border color of the PDFViewer selected free text annotation. | |||
kendo-pdf-viewer-free-text-annotation-placeholder-text | rgba(124, 22, 27, 0.5) | rgba(124, 22, 27, 0.5) | Default: rgba(124, 22, 27, 0.5) Computed: rgba(124, 22, 27, 0.5) |
Description: The placeholder text color of the PDFViewer free text annotation. | |||
kendo-pdf-viewer-free-text-annotation-text | rgba(124, 22, 27, 0.7) | rgba(124, 22, 27, 0.5) | Default: rgba(124, 22, 27, 0.7) Computed: rgba(124, 22, 27, 0.5) |
Description: The text color of the PDFViewer free text annotation. |