├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .sassdocrc ├── CODEOWNERS.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── build ├── all.js └── embed-dependencies ├── demo ├── area-charts.html ├── autocomplete.html ├── bar-charts.html ├── barcode.html ├── box-plot-charts.html ├── bubble-charts.html ├── bullet-charts.html ├── button.html ├── buttongroup.html ├── calendar.html ├── colorpicker.html ├── combobox.html ├── datepicker.html ├── datetimepicker.html ├── diagram.html ├── dialog.html ├── donut-charts.html ├── dropdownlist.html ├── editor.html ├── funnel-charts.html ├── gantt.html ├── grid.html ├── icons │ ├── 16 │ │ ├── photo.png │ │ ├── speaker.png │ │ ├── star.png │ │ └── video.png │ └── sports │ │ ├── baseball.png │ │ ├── golf.png │ │ ├── snowboarding.png │ │ └── swimming.png ├── index.html ├── input.html ├── line-charts.html ├── linear-gauge.html ├── map.html ├── maskedtextbox.html ├── mediaplayer.html ├── menu.html ├── multiselect.html ├── notification.html ├── numerictextbox.html ├── pager.html ├── panelbar.html ├── pickers.html ├── pie-charts.html ├── polar-charts.html ├── progressbar.html ├── qrcode.html ├── radar-charts.html ├── radial-gauge.html ├── range-bar-charts.html ├── responsive-panel.html ├── scatter-charts.html ├── scheduler.html ├── scroller.html ├── slider.html ├── splitter.html ├── spreadsheet.html ├── switch.html ├── tabstrip.html ├── timepicker.html ├── toolbar.html ├── tooltip.html ├── treelist.html ├── treemap.html ├── treeview.html ├── upload.html ├── validator.html ├── waterfall-charts.html └── window.html ├── docs ├── _meta.yml ├── customization.md └── index.md ├── package.json ├── scss ├── _bootstrap-overrides.scss ├── _custom.scss ├── _mixins.scss ├── _variables.scss ├── action-buttons.scss ├── action-buttons │ ├── _layout.scss │ └── _theme.scss ├── all.scss ├── autocomplete.scss ├── autocomplete │ ├── _layout.scss │ └── _theme.scss ├── barcode.scss ├── barcode │ └── _layout.scss ├── bootstrap_dist.scss ├── button.scss ├── button │ ├── _layout.scss │ └── _theme.scss ├── calendar.scss ├── calendar │ ├── _layout.scss │ └── _theme.scss ├── colorpicker.scss ├── colorpicker │ ├── _layout.scss │ └── _theme.scss ├── combobox.scss ├── combobox │ ├── _layout.scss │ └── _theme.scss ├── common │ ├── _all.scss │ ├── _animations.scss │ ├── _base.scss │ ├── _forms.scss │ └── _icons.scss ├── dataviz.scss ├── dataviz │ ├── _layout.scss │ └── _theme.scss ├── datetime.scss ├── datetime │ ├── _layout.scss │ └── _theme.scss ├── dialog.scss ├── dialog │ ├── _layout.scss │ └── _theme.scss ├── dropdownlist.scss ├── dropdownlist │ ├── _layout.scss │ └── _theme.scss ├── edit-form.scss ├── edit-form │ ├── _layout.scss │ └── _theme.scss ├── editor.scss ├── editor │ ├── _layout.scss │ └── _theme.scss ├── gantt.scss ├── gantt │ ├── _layout.scss │ └── _theme.scss ├── grid.scss ├── grid │ ├── _layout.scss │ └── _theme.scss ├── input.scss ├── input │ ├── _layout.scss │ └── _theme.scss ├── listbox.scss ├── listbox │ ├── _layout.scss │ └── _theme.scss ├── listview.scss ├── listview │ ├── _layout.scss │ └── _theme.scss ├── map.scss ├── map │ ├── _layout.scss │ ├── _theme.scss │ └── images │ │ ├── markers.png │ │ └── markers.scss ├── maskedtextbox.scss ├── maskedtextbox │ ├── _layout.scss │ └── _theme.scss ├── mediaplayer.scss ├── mediaplayer │ ├── _layout.scss │ └── _theme.scss ├── menu.scss ├── menu │ ├── _layout.scss │ └── _theme.scss ├── multiselect.scss ├── multiselect │ ├── _layout.scss │ └── _theme.scss ├── notification.scss ├── notification │ ├── _layout.scss │ └── _theme.scss ├── numerictextbox.scss ├── numerictextbox │ ├── _layout.scss │ └── _theme.scss ├── packages │ ├── all.d.ts │ └── all.scss ├── pager.scss ├── pager │ ├── _layout.scss │ └── _theme.scss ├── panelbar.scss ├── panelbar │ ├── _layout.scss │ └── _theme.scss ├── pivotgrid.scss ├── pivotgrid │ ├── _layout.scss │ └── _theme.scss ├── popup.scss ├── popup │ ├── _layout.scss │ └── _theme.scss ├── progressbar.scss ├── progressbar │ ├── _layout.scss │ └── _theme.scss ├── qrcode.scss ├── qrcode │ └── _layout.scss ├── responsivepanel.scss ├── responsivepanel │ ├── _layout.scss │ └── _theme.scss ├── ripple.scss ├── ripple │ ├── _layout.scss │ └── _theme.scss ├── scheduler.scss ├── scheduler │ ├── _layout.scss │ └── _theme.scss ├── scroller.scss ├── scroller │ ├── _layout.scss │ └── _theme.scss ├── scrollview.scss ├── scrollview │ ├── _layout.scss │ └── _theme.scss ├── slider.scss ├── slider │ ├── _layout.scss │ ├── _theme.scss │ └── images │ │ ├── _slider-h.scss │ │ └── _slider-v.scss ├── splitter.scss ├── splitter │ ├── _layout.scss │ └── _theme.scss ├── spreadsheet.scss ├── spreadsheet │ ├── _layout.scss │ └── _theme.scss ├── switch.scss ├── switch │ ├── _layout.scss │ └── _theme.scss ├── tabstrip.scss ├── tabstrip │ ├── _layout.scss │ └── _theme.scss ├── toolbar.scss ├── toolbar │ ├── _layout.scss │ └── _theme.scss ├── tooltip.scss ├── tooltip │ ├── _layout.scss │ └── _theme.scss ├── treelist.scss ├── treelist │ ├── _layout.scss │ └── _theme.scss ├── treeview.scss ├── treeview │ ├── _layout.scss │ └── _theme.scss ├── upload.scss ├── upload │ ├── _layout.scss │ └── _theme.scss ├── validator.scss ├── validator │ ├── _layout.scss │ └── _theme.scss ├── window.scss └── window │ ├── _layout.scss │ └── _theme.scss └── webpack.config.js /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/* 3 | !dist/main.css 4 | tmp 5 | .tmp 6 | .DS_Store 7 | yarn.locknpm-debug.log 8 | npm-debug.log 9 | .vscode/ 10 | debug.log 11 | modules/ 12 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.tgz 2 | .tmp/ 3 | .travis.yml 4 | build 5 | demo/ 6 | dist/*.js 7 | sass-lint.yml 8 | webpack.config.js 9 | -------------------------------------------------------------------------------- /.sassdocrc: -------------------------------------------------------------------------------- 1 | { 2 | "dest": ".tmp", 3 | "theme": "node_modules/@progress/kendo-theme-default/build/sassdoc-theme.js", 4 | "meta": { 5 | "name": "bootstrap", 6 | "friendlyName": "Bootstrap", 7 | }, 8 | "groups": { 9 | "color-system": "Color System", 10 | "fonts": "Fonts", 11 | "charts": "Charts", 12 | "undefined": "Common" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /CODEOWNERS.md: -------------------------------------------------------------------------------- 1 | * @gyoshev @joneff 2 | docs/* @dmihaylo 3 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Guidelines to Contribution 2 | 3 | We accept third-party contributions. 4 | 5 | ## Ways to Contribute 6 | 7 | You can contribute by: 8 | 9 | * Submitting bug-fixes. 10 | * Proposing changes in documentation or updates to existing code. 11 | * Adding features or missing functionalities. 12 | 13 | ## Steps to Contribute 14 | 15 | To submit your suggestions: 16 | 17 | 1. If a first-time contributor, read and sign the [Kendo UI for Angular Contribution License Agreement (CLA)](https://docs.google.com/forms/d/e/1FAIpQLSdSzuLLij8dtytTeiXCzlHcTmHYZIxgrAa7BSaO_fno79ua1A/viewform?c=0&w=1). The Agreement confirms that you acknowledge the legal aspects of your contributions. 18 | 1. Branch out the repo you want to update. 19 | 1. Add your contribution. 20 | 1. Submit a [Pull Request](https://help.github.com/articles/creating-a-pull-request/). 21 | 22 | ## Support-Related Issues 23 | 24 | Refer to our [**Community & Support**](http://www.telerik.com/kendo-angular-ui/support/) page for more information on: 25 | 26 | * How to report a bug 27 | * New upcoming features 28 | * Support-related questions 29 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | This package is part of the following suites: 2 | 3 | * [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/) 4 | * [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) 5 | * [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc) 6 | * [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui) 7 | 8 | All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui. 9 | 10 | If you do not own a commercial license, the usage of this software shall be governed by the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). 11 | 12 | *Copyright © 2018 Telerik AD. All rights reserved.* 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## This repository is no longer updated. To access the current version, refer to the [`kendo-themes` monorepo](https://github.com/telerik/kendo-themes). 2 | 3 | # Kendo UI Bootstrap Theme 4 | 5 | The Kendo UI Bootstrap Theme is a theme for the Kendo UI components which is based on the Twitter Bootstrap framework, version 4. To style and size the components and make them blend in with the surrounding page, the Bootstrap theme uses the variables defined in Bootstrap. 6 | 7 | * [License](#license) 8 | * [Basic Usage](#basic-usage) 9 | * [Running Custom Builds](#running-custom-builds) 10 | * [Applying Mapped Variables](#applying-mapped-variables) 11 | * [Troubleshooting](#troubleshooting) 12 | 13 | ## License 14 | 15 | This package is part of the following suites: 16 | 17 | * [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/) 18 | * [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) 19 | * [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc) 20 | * [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui) 21 | 22 | All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui. 23 | 24 | -If you do not own a commercial license, the usage of this software shall be governed by the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). 25 | 26 | ## Basic Usage 27 | 28 | For more information on how to implement the Material theme in your project, refer to the following articles: 29 | 30 | * [Using the Bootstrap Theme in Angular Projects](http://gyoshevlnx:4000/components/styling/) 31 | * [Using the Bootstrap Theme in jQuery Projects](http://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) 32 | * [Customizing the Bootstrap Theme](https://github.com/telerik/kendo-theme-default/blob/13713a572b392806ca7c2950f77f9b033f87d8ea/README.md) 33 | 34 | ## Running Custom Builds 35 | 36 | The handling of all variables happens in the [`_bootstrap-map.scss`](src/_bootstrap-map.scss) file. It loads the Bootstrap variables from the default location. For example, `node_modules/bootstrap/scss/_variables.scss`. 37 | 38 | If you have a customized version of Bootstrap: 39 | 40 | 1. Specify the location in `_bootstrap-map.scss`. 41 | 1. Build as usual. 42 | 43 | ## Applying Mapped Variables 44 | 45 | To ensure a certain level of compatibility, the Bootstrap variables are locally mapped. This also enables Kendo UI to use an ad-hoc micro framework based on primitive components. For example, [button](src/mixins/appearance/_button.scss), [input](src/mixins/appearance/_input.scss), [node](src/mixins/appearance/_node.scss), and so on. 46 | 47 | However, some variables, such as `$tooltip-arrow-width` which is used in the tooltip, are not mapped. They are referenced explicitly because they do not fit in the previously mentioned framework. 48 | 49 | ## Troubleshooting 50 | 51 | Because Bootstrap v4 is still in beta, its variables may change between releases. Make sure to use the Bootstrap version which is [specified in the peer dependencies](package.json) of the package. 52 | 53 | *Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.* 54 | 55 | *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.* 56 | -------------------------------------------------------------------------------- /build/all.js: -------------------------------------------------------------------------------- 1 | // entry point for webpack 2 | require("./../scss/all.scss"); 3 | -------------------------------------------------------------------------------- /build/embed-dependencies: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Usage: embed-dependencies [module-name]... 4 | 5 | mkdir -p modules 6 | 7 | for module in "$@" 8 | do 9 | # copy dependencies from node_modules/ to modules/ subdir 10 | echo "Copy $module dependency" 11 | mkdir -p modules/$module 12 | rsync -avc --delete --include "**.scss" node_modules/$module/ modules/$module/ 13 | done 14 | 15 | # replace references to modules with relative paths 16 | find ./scss/ -maxdepth 1 -type f -name "*.scss" -exec sed -i 's#\(@import\s\+\)\(''\|\"\)~\(.*\);#\1\2../modules/\3;#' "{}" \; 17 | find ./scss/ -maxdepth 2 -type f -name "*.scss" -exec sed -i 's#\(@import\s\+\)\(''\|\"\)~\(.*\);#\1\2../../modules/\3;#' "{}" \; 18 | find ./scss/ -maxdepth 3 -type f -name "*.scss" -exec sed -i 's#\(@import\s\+\)\(''\|\"\)~\(.*\);#\1\2../../../modules/\3;#' "{}" \; 19 | 20 | -------------------------------------------------------------------------------- /demo/area-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Area charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Area charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/autocomplete.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Autocomplete 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Autocomplete 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
31 | 32 | 33 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /demo/bar-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bar charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 24 | 25 | 26 | 27 | 28 |
29 | Bar charts 30 | 31 |
43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 |
68 | 69 | 70 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /demo/barcode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Barcode 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Barcode 21 | 22 |
23 | 24 | 25 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /demo/box-plot-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Box plot charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Box plot charts 21 | 22 |
46 |
47 | 48 | 49 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo/bubble-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bubble charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Bubble charts 21 | 22 |
40 |
41 | 42 | 43 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /demo/bullet-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bullet charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Bullet charts 21 | 22 |
35 |
36 | 37 | 38 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /demo/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | Buttons 18 | 19 | 20 | 21 | | 22 | 23 | 24 | | 25 | 26 | 27 | | 28 | 29 | 30 |
31 | 32 | 33 | | 34 | 35 | 36 | | 37 | 38 | 39 | | 40 | 41 | 42 |
43 | 44 | | 45 | 46 | | 47 | 48 |
49 | 50 | 51 |
52 | Compact 53 | 54 | 55 | 56 |
57 | 58 | 59 |
60 | 61 | 62 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /demo/buttongroup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button group 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | Button groups 18 | 19 | 20 | 21 | 22 | 23 | | 24 | 25 | 26 | 27 | 28 | | 29 | 30 | 31 | 32 | 33 | | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | | 44 | 45 | 46 | 47 | 48 | | 49 | 50 | 51 | 52 | 53 | | 54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 |
62 | Compact 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 | 71 | 72 | 73 |
74 | 78 |
79 | 80 | 81 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /demo/calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Calendar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 |
23 | Calendar 24 | 25 |
26 |
27 |
28 | 29 | 30 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /demo/colorpicker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Colorpicker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | Colorpicker 18 | 19 | 20 | 21 |
22 | 23 | 24 |
25 | Palette 26 | 27 |
28 |
29 |
30 | 31 | 32 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /demo/combobox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Combobox 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Combobox 22 | 23 | 31 | 32 | 33 | 41 | 42 |
43 | 44 | 45 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /demo/datepicker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Date picker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Date picker 21 | 22 | 23 |
24 | 25 | 26 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /demo/datetimepicker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Datetime picker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Datetime picker 21 | 22 |
23 | 24 | 25 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /demo/diagram.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Diagram 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 |
21 | Diagram 22 | 23 |
24 |
25 | 26 | 27 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /demo/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 26 | 27 | 28 | 29 | 30 |
31 | Window 32 |
33 |
34 |
35 |
36 | 39 |

Modal title

40 |
41 |
42 |

One fine body…

43 |
44 |
45 | 46 | 47 |
48 |
49 |
50 |
51 | 52 |
53 |

Window content

54 |
55 | 59 |
60 | 61 | 62 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /demo/donut-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Donut charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Donut charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/dropdownlist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dropdown 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Dropdown 22 | 23 | 31 | 32 | 33 | 41 | 42 |
43 | 44 | 45 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /demo/editor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Editor 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 |
19 | Editor 20 | 21 |
Inline editor
22 |
23 | 24 |
25 | 26 | 27 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /demo/funnel-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Funnel charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Funnel charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/gantt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gantt 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Gantt 21 | 22 |
23 |
24 | 25 | 26 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /demo/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Grid 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Grid 21 | 22 |
23 |
24 | 25 | 26 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /demo/icons/16/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/demo/icons/16/photo.png -------------------------------------------------------------------------------- /demo/icons/16/speaker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/demo/icons/16/speaker.png -------------------------------------------------------------------------------- /demo/icons/16/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/demo/icons/16/star.png -------------------------------------------------------------------------------- /demo/icons/16/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/demo/icons/16/video.png -------------------------------------------------------------------------------- /demo/icons/sports/baseball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/demo/icons/sports/baseball.png -------------------------------------------------------------------------------- /demo/icons/sports/golf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/demo/icons/sports/golf.png -------------------------------------------------------------------------------- /demo/icons/sports/snowboarding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/demo/icons/sports/snowboarding.png -------------------------------------------------------------------------------- /demo/icons/sports/swimming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/demo/icons/sports/swimming.png -------------------------------------------------------------------------------- /demo/input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inputs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 |
26 | Input 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 |
40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /demo/line-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Line charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Line charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/linear-gauge.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Linear gauge 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Linear gauge 21 | 22 |
25 |
26 | 27 | 28 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo/map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Map 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Map 21 | 22 |
37 |
38 | 39 | 40 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /demo/maskedtextbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Masked textbox 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Masked textbox 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo/mediaplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Media player 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | Media player 18 | 19 |
20 |
21 | 22 | 23 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /demo/menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Menu 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | Menu 18 | 19 | 88 | 89 | 158 |
159 | 160 | 161 | 164 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /demo/multiselect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multiselect 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Multiselect 22 | 23 |
24 |
25 |
26 |
    27 |
  • Item
    • 28 |
  • Item
    • 29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 | 37 | 38 |
39 | 40 | 48 | 49 | 57 |
58 | 59 | 60 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /demo/notification.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Notification 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Notification 22 | 23 | 24 |
25 |
26 |
27 | infoInfoHide 28 |
29 |
30 |
31 |
32 | infoSuccessHide 33 |
34 |
35 |
36 |
37 | infoWarningHide 38 |
39 |
40 |
41 |
42 | infoErrorHide 43 |
44 |
45 |
46 | 47 | 48 |
49 | 50 | 51 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /demo/numerictextbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Numeric textbox 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Numeric textbox 22 | 23 | 24 | 25 |
26 | 27 | 28 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo/pager.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pager 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Pager 21 | 22 |
23 |
24 | 25 | 26 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo/panelbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Panelbar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 22 | 23 | 24 |
25 | Panelbar 26 |
27 | 43 | 59 |
60 | 61 | 62 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /demo/pickers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pickers 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 |
26 | Date / Time / DateTime 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /demo/pie-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pie charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Pie charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/polar-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Polar charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Polar charts 21 | 22 |
68 |
69 | 70 | 71 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /demo/progressbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Progressbar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Progressbar 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 | 34 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /demo/qrcode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | QR code 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | QR code 21 | 22 |
23 | 24 | 25 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /demo/radar-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radar charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Radar charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/radial-gauge.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radial gauge 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Radial gauge 21 | 22 |
25 |
26 | 27 | 28 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo/range-bar-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Range bar charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Range bar charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/responsive-panel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Responsive panel 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Responsive panel 21 | 22 | 23 |
27 | 28 | Content 29 |
30 |
31 | 32 | 33 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /demo/scatter-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scatter charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Scatter charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/scheduler.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scheduler 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Scheduler 21 | 22 |
23 |
24 | 25 | 26 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /demo/scroller.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scroller 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Scroller 21 | 22 |
23 |
Content
24 |
25 |
26 | 27 | 28 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /demo/slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 27 | 28 | 29 | 30 | 31 |
32 | Slider 33 | 34 |
35 | 36 |
37 | 38 |
39 | 40 |
41 |
42 | 43 | 44 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /demo/splitter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Splitter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Splitter 22 | 23 |
24 |
25 |
26 |
27 |
28 |

Inner splitter / left pane

29 |

Resizable and collapsible.

30 |
31 |
32 |
33 |
34 |

Inner splitter / center pane

35 |

Resizable only.

36 |
37 |
38 |
39 |
40 |

Inner splitter / right pane

41 |

Resizable and collapsible.

42 |
43 |
44 |
45 |
46 |
47 |
48 |

Outer splitter / middle pane

49 |

Resizable only.

50 |
51 |
52 |
53 |
54 |

Outer splitter / bottom pane

55 |

Non-resizable and non-collapsible.

56 |
57 |
58 |
59 | 60 |
61 | 62 | 63 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /demo/switch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Switch 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Switch 21 | 22 |
23 | 24 | 25 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /demo/tabstrip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tabs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 19 | 20 | 21 | 22 | 23 |
24 | Tabs 25 | 26 | 32 |
33 |
34 | 41 |
42 |
43 | 50 |
51 |
52 |
53 | 60 |
61 |
62 | 69 |
70 |
71 | 72 | 73 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /demo/timepicker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Time picker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Time picker 21 | 22 |
23 | 24 | 25 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /demo/toolbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Toolbar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Toolbar 22 |
23 |
24 |
25 |
26 | 27 | 28 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /demo/tooltip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tooltip 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 |
26 | Tooltip 27 | 28 |
I have a tooltip
29 |
30 | 34 | 38 |
39 | 40 | 41 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /demo/treelist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Treelist 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Treelist 21 | 22 |
23 |
24 | 25 | 26 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /demo/treemap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Treemap 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Treemap 21 | 22 |
37 |
38 | 39 | 40 | 45 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /demo/treeview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Treeview 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 |
21 | Treeview 22 |
23 | 24 | 25 | 26 | 27 | 28 | Drag clue 29 |
30 |
31 |
32 | 53 |
54 |
55 | 76 |
77 |
78 | 79 | 80 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /demo/upload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Upload 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 23 | 24 | 25 | 26 | 27 |
28 | Upload 29 | 30 | 31 |
32 | 33 | 34 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /demo/validator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Validation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 |
26 | Validation 27 | 28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /demo/waterfall-charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Waterfall charts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 | Waterfall charts 21 | 22 |
34 |
35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/window.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Window 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 23 | 24 | 25 | 26 | 27 |
28 | Window 29 |
30 |
31 |
32 |
33 | 36 |

Modal title

37 |
38 |
39 |

One fine body…

40 |
41 |
42 | 43 | 44 |
45 |
46 |
47 |
48 | 49 |
50 |

Window content

51 |
52 |
54 |

Window content

55 |
56 |
57 | 58 | 59 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /docs/_meta.yml: -------------------------------------------------------------------------------- 1 | title: Bootstrap Theme 2 | position: 999 3 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview 3 | description: "Preview and install the Kendo UI Bootstrap theme and style the Kendo UI components in Angular and React projects." 4 | slug: preview_kendothemebootstrap 5 | position: 1 6 | --- 7 | 8 | # Preview 9 | 10 | The Kendo UI Bootstrap theme is available through the @progress/kendo-theme-bootstrap NPM module. 11 | 12 | ## Installation 13 | 14 | 1. Download and install the package of the Bootstrap theme. 15 | 16 | ```bash 17 | npm install --save @progress/kendo-theme-bootstrap 18 | ``` 19 | 20 | 1. Apply the Bootstrap theme options according to the instructions in the article on [styling]({% slug themesandstyles %}). 21 | 22 | ## Preview 23 | 24 | The following example previews Kendo UI components which are styled with the Bootstrap theme. 25 | 26 | {% theme_preview theme:bootstrap %} 27 | {% platform_content angular %} 28 | 29 | {% endplatform_content %} 30 | {% platform_content react %} 31 | 32 | {% endplatform_content %} 33 | {% platform_content vue %} 34 | 35 | {% endplatform_content %} 36 | 37 | ## Suggested Links 38 | 39 | * [Styling the Kendo UI Components]({% slug themesandstyles %}) 40 | * [Kendo UI Font Icons]({% slug icons %}) 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@progress/kendo-theme-bootstrap", 3 | "description": "Bootstrap v4 theme for Kendo UI", 4 | "version": "0.0.0-semantically-released", 5 | "author": "Progress", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "Kendo UI", 9 | "Bootstrap", 10 | "Theme" 11 | ], 12 | "main": "dist/all.css", 13 | "sass": "scss/all.scss", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/telerik/kendo-theme-bootstrap.git" 17 | }, 18 | "release": { 19 | "debug": false, 20 | "branchTags": { 21 | "develop": "dev" 22 | }, 23 | "fallbackTags": { 24 | "dev": "latest" 25 | }, 26 | "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits", 27 | "generateNotes": "@telerik/semantic-prerelease/generateNotes", 28 | "getLastRelease": "@telerik/semantic-prerelease/getLastRelease", 29 | "verifyConditions": "@telerik/semantic-prerelease/verifyConditions", 30 | "verifyRelease": "@telerik/semantic-prerelease/verifyRelease" 31 | }, 32 | "scripts": { 33 | "lint": "echo 'TODO: add lint'", 34 | "api": "sassdoc ./scss/", 35 | "api-check": "npm run api && git diff --exit-code --quiet -- docs/ || (echo -e '\\033[0;31mERROR: API docs are out of date' && exit 1)", 36 | "start": "webpack-dev-server --hot --inline", 37 | "build": "webpack --optimize-minimize --bail", 38 | "watch": "webpack --watch", 39 | "test": "npm run lint && npm run build && npm run api-check", 40 | "embed-assets": "bash ./build/embed-dependencies 'bootstrap' '@progress/kendo-theme-default' && npm run build", 41 | "semantic-release": "semantic-release pre && npm run embed-assets && semantic-prerelease publish && semantic-release post" 42 | }, 43 | "config": { 44 | "commitizen": { 45 | "path": "./node_modules/cz-conventional-changelog" 46 | }, 47 | "ghooks": { 48 | "pre-commit": "npm run lint", 49 | "pre-push": "npm run test", 50 | "commit-msg": "validate-commit-msg" 51 | }, 52 | "validate-commit-msg": { 53 | "types": [ 54 | "feat", 55 | "fix", 56 | "docs", 57 | "style", 58 | "refactor", 59 | "perf", 60 | "test", 61 | "chore", 62 | "revert" 63 | ], 64 | "warnOnFail": false, 65 | "maxSubjectLength": 100 66 | } 67 | }, 68 | "peerDependencies": { 69 | "bootstrap": "4.0.0" 70 | }, 71 | "dependencies": { 72 | "@progress/kendo-theme-default": "^2.0.0" 73 | }, 74 | "devDependencies": { 75 | "bootstrap": "4.0.0", 76 | "@telerik/kendo-common-tasks": "^3.0.0", 77 | "@telerik/semantic-prerelease": "^1.0.0", 78 | "cz-conventional-changelog": "^1.1.5", 79 | "ghooks": "^1.0.3", 80 | "glob": "^7.0.5", 81 | "mime": "^1.3.4", 82 | "sass-lint": "^1.7.0", 83 | "sassdoc": "^2.1.20", 84 | "semantic-release": "^4.3.5", 85 | "validate-commit-msg": "^1.1.1", 86 | "webpack": "^1.13.1" 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /scss/_bootstrap-overrides.scss: -------------------------------------------------------------------------------- 1 | $enable-bootstrap-overrides: true !default; 2 | $theme-colors: () !default; 3 | 4 | // @if $enable-bootstrap-overrides { 5 | 6 | $white: #ffffff !default; 7 | $gray-100: #f8f9fa !default; 8 | $gray-200: #e9ecef !default; 9 | $gray-900: #212529 !default; 10 | $black: #000000 !default; 11 | 12 | $blue: #007bff !default; 13 | $cyan: #17a2b8 !default; 14 | $green: #28a745 !default; 15 | $yellow: #ffc107 !default; 16 | $red: #dc3545 !default; 17 | 18 | $accent: $blue !default; 19 | $primary: $accent !default; 20 | $secondary: #e4e7eb !default; 21 | $info: $cyan !default; 22 | $success: $green !default; 23 | $warning: $yellow !default; 24 | $error: $red !default; 25 | $danger: $error !default; 26 | 27 | $theme-colors: map-merge(( 28 | "primary": $primary, 29 | "secondary": $secondary, 30 | "info": $info, 31 | "success": $success, 32 | "warning": $warning, 33 | "danger": $danger 34 | ), $theme-colors); 35 | 36 | $body-bg: $white !default; 37 | $body-color: contrast-yiq($body-bg, $gray-900) !default; 38 | 39 | $component-bg: $body-bg !default; 40 | $component-color: contrast-yiq($component-bg, $gray-900) !default; 41 | $component-border-color: rgba(contrast-yiq($component-bg, $gray-900), .125) !default; 42 | $component-active-bg: $primary !default; 43 | $component-active-color: contrast-yiq($component-active-bg); 44 | 45 | $card-bg: $component-bg !default; 46 | $card-color: $component-color !default; 47 | $card-border-color: rgba(contrast-yiq($card-bg, $gray-900), .125) !default; 48 | $card-cap-bg: $gray-100 !default; 49 | $card-cap-color: $card-color !default; 50 | $card-cap-border-color: rgba(contrast-yiq($card-bg, $gray-900), .125) !default; 51 | 52 | $input-bg: $component-bg !default; 53 | $input-color: $component-color !default; 54 | $input-border-color: rgba(contrast-yiq($input-bg, $gray-900), .15) !default; 55 | 56 | $list-group-bg: $component-bg !default; 57 | $list-group-color: $component-color !default; 58 | $list-group-hover-bg: try-darken( $list-group-bg, 5% ) !default; 59 | $list-group-hover-color: $list-group-color !default; 60 | 61 | $dropdown-bg: $component-bg !default; 62 | $dropdown-color: $component-color !default; 63 | $dropdown-border-color: rgba(contrast-yiq($dropdown-bg, $gray-900), .15) !default; 64 | 65 | $dropdown-link-color: contrast-yiq($dropdown-bg, $gray-900) !default; 66 | $dropdown-link-hover-color: try-darken($dropdown-link-color, 5%) !default; 67 | $dropdown-link-hover-bg: try-darken( $dropdown-bg, 5% ) !default; 68 | 69 | $nav-tabs-border-color: $component-border-color !default; 70 | $nav-tabs-link-active-bg: $component-bg !default; 71 | $nav-tabs-link-active-color: $component-color !default; 72 | $nav-tabs-link-active-border-color: $component-border-color !default; 73 | 74 | $pagination-bg: $component-bg !default; 75 | $pagination-color: $accent !default; 76 | $pagination-border-color: $component-border-color !default; 77 | $pagination-hover-bg: darken($pagination-bg, 8%) !default; 78 | $pagination-hover-border-color: $pagination-border-color !default; 79 | $pagination-active-color: $component-active-color !default; 80 | $pagination-active-bg: $component-active-bg !default; 81 | $pagination-active-border-color: $pagination-active-bg !default; 82 | 83 | $pagination-disabled-bg: $pagination-bg !default; 84 | $pagination-disabled-color: grayscale($pagination-color) !default; 85 | 86 | $table-bg: $component-bg !default; 87 | $table-color: $component-color !default; 88 | $table-border-color: rgba(contrast-yiq($table-bg, $gray-900), .125) !default; 89 | 90 | $modal-content-bg: $component-bg !default; 91 | $modal-content-color: $component-color !default; 92 | $modal-content-border-color: $component-border-color !default; 93 | $modal-header-bg: $modal-content-bg !default; 94 | $modal-header-color: $modal-content-color !default; 95 | $modal-header-border-color: $component-border-color !default; 96 | 97 | $custom-control-indicator-bg: try-lighten( $input-border-color, 6.7 ) !default; 98 | 99 | $progress-bg: $gray-200 !default; 100 | $progress-color: contrast-yiq($progress-bg, $gray-900) !default; 101 | $progress-bar-bg: $primary !default; 102 | $progress-bar-color: contrast-yiq($progress-bar-bg, $gray-900) !default; 103 | // } -------------------------------------------------------------------------------- /scss/_custom.scss: -------------------------------------------------------------------------------- 1 | // Theme overrides 2 | // 3 | // Copy variables from `_variables.scss` to this file to override default values 4 | // without modifying source files. -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/mixins"; -------------------------------------------------------------------------------- /scss/action-buttons.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | 9 | 10 | // Component 11 | @import "action-buttons/layout"; 12 | @import "action-buttons/theme"; -------------------------------------------------------------------------------- /scss/action-buttons/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/action-buttons/layout"; -------------------------------------------------------------------------------- /scss/action-buttons/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports('action-buttons/theme') { 2 | 3 | .k-action-buttons { 4 | 5 | .k-button:first-child { @include border-radius( 0 0 0 $border-radius ); } 6 | .k-button:last-child { @include border-radius( 0 0 $border-radius 0 ); } 7 | 8 | .k-button { 9 | color: inherit; 10 | 11 | &:hover { 12 | @include appearance( hovered-button ); 13 | } 14 | 15 | &:active { 16 | @include appearance( pressed-button ); 17 | } 18 | } 19 | 20 | .k-primary { 21 | color: $accent; 22 | 23 | &:hover { 24 | @include appearance( hovered-primary-button ); 25 | } 26 | 27 | &:active { 28 | @include appearance( pressed-primary-button ); 29 | } 30 | } 31 | } 32 | 33 | .k-popup .k-action-buttons { 34 | margin-bottom: -$popup-padding-y; 35 | } 36 | } -------------------------------------------------------------------------------- /scss/all.scss: -------------------------------------------------------------------------------- 1 | @import "custom"; 2 | @import "variables"; 3 | 4 | // Dependencies 5 | @import "mixins"; 6 | @import "common/all"; 7 | @import "ripple"; 8 | @import "popup"; 9 | 10 | 11 | // Data management 12 | @import "pager"; 13 | @import "grid"; 14 | @import "spreadsheet"; 15 | @import "listview"; 16 | @import "pivotgrid"; 17 | @import "treelist"; 18 | @import "scrollview"; 19 | 20 | 21 | // Editors 22 | @import "autocomplete"; 23 | @import "colorpicker"; 24 | @import "combobox"; 25 | @import "datetime"; 26 | @import "dropdownlist"; 27 | @import "editor"; 28 | @import "input"; 29 | @import "multiselect"; 30 | @import "numerictextbox"; 31 | @import "slider"; 32 | @import "upload"; 33 | @import "validator"; 34 | @import "switch"; 35 | @import "maskedtextbox"; 36 | @import "listbox"; 37 | 38 | // Dataviz 39 | @import "dataviz"; 40 | @import "map"; 41 | 42 | // Barcodes 43 | @import "barcode"; 44 | @import "qrcode"; 45 | 46 | 47 | // Scheduling 48 | @import "calendar"; 49 | @import "gantt"; 50 | @import "scheduler"; 51 | 52 | 53 | // Media 54 | @import "mediaplayer"; 55 | 56 | 57 | // Layout 58 | @import "dialog"; 59 | @import "notification"; 60 | @import "responsivepanel"; 61 | @import "splitter"; 62 | @import "tooltip"; 63 | @import "window"; 64 | 65 | 66 | // Navigation 67 | @import "button"; 68 | @import "menu"; 69 | @import "panelbar"; 70 | @import "tabstrip"; 71 | @import "toolbar"; 72 | @import "treeview"; 73 | 74 | 75 | // Interactivity & UX 76 | @import "progressbar"; 77 | @import "scroller"; 78 | -------------------------------------------------------------------------------- /scss/autocomplete.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import 'common/forms'; 8 | 9 | 10 | // Component 11 | @import "autocomplete/layout"; 12 | @import "autocomplete/theme"; -------------------------------------------------------------------------------- /scss/autocomplete/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/autocomplete/layout"; -------------------------------------------------------------------------------- /scss/autocomplete/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("autocomplete/theme") { 2 | 3 | .k-autocomplete { 4 | @include appearance( input ); 5 | transition: $transition; 6 | 7 | &.k-state-hover { @include appearance( hovered-input ); } 8 | &.k-state-focused { @include appearance( focused-input ); } 9 | } 10 | 11 | } -------------------------------------------------------------------------------- /scss/barcode.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Component 6 | @import "barcode/layout"; -------------------------------------------------------------------------------- /scss/barcode/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/barcode/layout"; -------------------------------------------------------------------------------- /scss/bootstrap_dist.scss: -------------------------------------------------------------------------------- 1 | @import "~bootstrap/scss/bootstrap.scss"; -------------------------------------------------------------------------------- /scss/button.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "button/layout"; 11 | @import "button/theme"; -------------------------------------------------------------------------------- /scss/button/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/button/layout"; -------------------------------------------------------------------------------- /scss/calendar.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "calendar/layout"; 11 | @import "calendar/theme"; -------------------------------------------------------------------------------- /scss/calendar/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/calendar/layout"; -------------------------------------------------------------------------------- /scss/calendar/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("calendar/theme") { 2 | 3 | $calendar-bg: $panel-bg !default; 4 | $calendar-text: $panel-text !default; 5 | $calendar-border: $panel-border !default; 6 | 7 | // Calendar 8 | .k-calendar { 9 | @include fill( $calendar-text, $calendar-bg, $calendar-border ); 10 | 11 | 12 | // Header / footer 13 | .k-header { 14 | @include appearance( header ); 15 | } 16 | .k-nav-prev, 17 | .k-nav-next, 18 | .k-nav-fast { 19 | 20 | // Hover 21 | &:hover, 22 | &.k-state-hover { 23 | @include appearance( hovered-header ); 24 | } 25 | } 26 | .k-nav-today { 27 | color: $link-text; 28 | 29 | &:hover { 30 | color: $link-hover-text; 31 | } 32 | } 33 | 34 | .k-state-selected { 35 | color: inherit; 36 | background: transparent; 37 | border-color: transparent; 38 | } 39 | 40 | .k-weekend {} 41 | 42 | 43 | // Content 44 | .k-content {} 45 | 46 | .k-content th {} 47 | .k-content td {} 48 | .k-content .k-link { 49 | @include border-radius(); 50 | } 51 | .k-content .k-today .k-link { 52 | box-shadow: inset 0 0 0 1px $accent; 53 | } 54 | .k-content .k-today.k-state-focused .k-link { 55 | box-shadow: inset 0 0 0 1px $accent, inset $button-focused-shadow; 56 | } 57 | .k-content td:hover .k-link, 58 | .k-content .k-state-hover .k-link { 59 | @include appearance( hovered-node ); 60 | } 61 | .k-content td.k-state-selected .k-link{ 62 | @include appearance( selected-node ); 63 | } 64 | .k-content .k-state-focused .k-link { 65 | box-shadow: inset $button-focused-shadow; 66 | } 67 | .k-content .k-state-selected.k-state-focused .k-link { 68 | box-shadow: inset 0 0 0 2px rgba($primary-button-pressed-border, 0.5); 69 | } 70 | 71 | 72 | // Infinite calendar 73 | .k-calendar-monthview { 74 | .k-weekend { 75 | background: none; 76 | } 77 | 78 | th { 79 | font-size: $font-size-xs; 80 | color: $header-text; 81 | } 82 | } 83 | 84 | .k-calendar-navigation { 85 | // border underneath highlight 86 | background-color: $header-bg; 87 | box-shadow: inset -1px 0 $header-border; 88 | 89 | .k-content > ul > li:hover { 90 | color: $link-hover-text; 91 | } 92 | } 93 | 94 | .k-calendar-navigation-highlight { 95 | border-color: $calendar-border; 96 | background-color: $calendar-bg; 97 | } 98 | 99 | } 100 | 101 | } -------------------------------------------------------------------------------- /scss/colorpicker.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "slider"; 8 | 9 | 10 | // Component 11 | @import "colorpicker/layout"; 12 | @import "colorpicker/theme"; -------------------------------------------------------------------------------- /scss/colorpicker/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/colorpicker/layout"; -------------------------------------------------------------------------------- /scss/colorpicker/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("colorpicker/theme") { 2 | 3 | // Theme 4 | .k-colorpicker { 5 | 6 | // Normal state 7 | .k-picker-wrap { 8 | @include appearance( button ); 9 | transition: $transition; 10 | } 11 | .k-select { 12 | border-color: inherit; 13 | transition: $transition; 14 | } 15 | 16 | // Hovered state 17 | .k-state-hover { 18 | @include appearance( hovered-button ); 19 | } 20 | 21 | // Focused state 22 | .k-state-focused {} 23 | 24 | // Active state 25 | .k-state-active { 26 | @include appearance( pressed-button ); 27 | } 28 | 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /scss/combobox.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "combobox/layout"; 11 | @import "combobox/theme"; -------------------------------------------------------------------------------- /scss/combobox/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/combobox/layout"; -------------------------------------------------------------------------------- /scss/combobox/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("combobox/theme") { 2 | 3 | // Combobox 4 | .k-combobox { 5 | 6 | // Normal state 7 | .k-dropdown-wrap { 8 | @include appearance( input ); 9 | transition: $transition; 10 | } 11 | .k-select { 12 | @include appearance( button ); 13 | transition: $transition; 14 | } 15 | 16 | // Hovered state 17 | > :hover, 18 | .k-state-hover { 19 | @include appearance( hovered-input ); 20 | 21 | .k-select { 22 | @include appearance( hovered-button ); 23 | } 24 | } 25 | 26 | // Focused state 27 | .k-state-focused { 28 | @include appearance( focused-input ); 29 | } 30 | 31 | // Selected state 32 | .k-state-active { 33 | @include appearance( focused-input ); 34 | 35 | .k-select { 36 | @include appearance( pressed-button ); 37 | } 38 | } 39 | 40 | &[dir='rtl'], 41 | .k-rtl & { 42 | .k-select{ 43 | @include border-radius( $border-radius 0 0 $border-radius ); 44 | border-width: 0 1px 0 0; 45 | } 46 | } 47 | } 48 | 49 | } -------------------------------------------------------------------------------- /scss/common/_all.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "icons"; 3 | @import "animations"; 4 | @import "forms"; -------------------------------------------------------------------------------- /scss/common/_animations.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/common/animations"; -------------------------------------------------------------------------------- /scss/common/_base.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/common/base"; -------------------------------------------------------------------------------- /scss/common/_forms.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/common/forms"; -------------------------------------------------------------------------------- /scss/common/_icons.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/common/icons"; -------------------------------------------------------------------------------- /scss/dataviz.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "dataviz/layout"; 11 | @import "dataviz/theme"; -------------------------------------------------------------------------------- /scss/dataviz/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/dataviz/layout"; -------------------------------------------------------------------------------- /scss/dataviz/_theme.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/dataviz/theme"; -------------------------------------------------------------------------------- /scss/datetime.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "datetime/layout"; 11 | @import "datetime/theme"; -------------------------------------------------------------------------------- /scss/datetime/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/datetime/layout"; -------------------------------------------------------------------------------- /scss/datetime/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("datetime/theme") { 2 | $time-list-highlight-color: $border-color !default; 3 | $time-list-focused-bg: rgba(0, 0, 0, 0.02); 4 | $time-list-title-focus: #000 !default; 5 | 6 | // TODO: move to theme default. Issue: https://github.com/telerik/kendo-theme-default/issues/796 7 | $time-header-padding: $padding-y $padding-x; 8 | 9 | // Shared 10 | .k-datepicker, 11 | .k-timepicker, 12 | .k-datetimepicker { 13 | 14 | // Normal state 15 | .k-picker-wrap { 16 | @include appearance( input ); 17 | transition: $transition; 18 | } 19 | .k-select { 20 | @include appearance( button ); 21 | transition: $transition; 22 | } 23 | 24 | // Hovered state 25 | .k-state-hover { 26 | @include appearance( hovered-input ); 27 | 28 | .k-select { 29 | @include appearance( hovered-button ); 30 | } 31 | } 32 | 33 | // Focused state 34 | .k-state-focused { 35 | @include appearance( focused-input ); 36 | } 37 | 38 | // Selected state 39 | .k-state-active { 40 | @include appearance( focused-input ); 41 | 42 | .k-select { 43 | @include appearance( pressed-button ); 44 | } 45 | } 46 | } 47 | 48 | .k-dateinput.k-state-invalid { 49 | .k-textbox { 50 | color: $error; 51 | border-color: $error; 52 | } 53 | 54 | .k-i-warning { 55 | color: $error; 56 | } 57 | } 58 | 59 | // Datepicker 60 | .k-datepicker, 61 | .k-timepicker { 62 | .k-i-warning { 63 | color: $error; 64 | right: $spacer * 2.5; 65 | } 66 | 67 | .k-state-invalid { 68 | transition: none; 69 | color: $error; 70 | border-color: $error; 71 | } 72 | 73 | .k-rtl &, 74 | &[dir='rtl'] { 75 | .k-i-warning { 76 | left: $spacer * 2.5; 77 | } 78 | } 79 | } 80 | 81 | // Timepicker 82 | .k-timepicker {} 83 | 84 | .k-timeselector { 85 | border-color: inherit; 86 | } 87 | 88 | // Timepicker header 89 | .k-time-header { 90 | padding: $time-header-padding; 91 | 92 | .k-title { 93 | font-weight: bold; 94 | } 95 | 96 | .k-time-now { 97 | color: $accent; 98 | cursor: pointer; 99 | 100 | &:hover, 101 | &:focus { 102 | color: $link-hover-text; 103 | } 104 | } 105 | } 106 | 107 | // Timepicker content 108 | .k-time-list-wrapper { 109 | background-color: $popup-bg; 110 | 111 | .k-title { 112 | z-index: 12; 113 | opacity: $disabled-opacity; 114 | font-size: $font-size-xs; 115 | color: $header-text; 116 | } 117 | 118 | &.k-state-focused { 119 | .k-title { 120 | color: $time-list-title-focus; 121 | opacity: 1; 122 | } 123 | 124 | &::before, 125 | &::after { 126 | background-color: $time-list-focused-bg; 127 | border-width: 0; 128 | } 129 | } 130 | } 131 | 132 | .k-time-list { 133 | &::before, 134 | &::after { 135 | $shadow-size: 3em; 136 | box-shadow: 0 0 $shadow-size ($shadow-size) $popup-bg; 137 | } 138 | 139 | .k-item:hover { 140 | color: $accent; 141 | } 142 | } 143 | 144 | .k-time-container { 145 | background: transparent; 146 | } 147 | 148 | .k-time-highlight { 149 | background-color: $bg-color; 150 | border-color: $time-list-highlight-color; 151 | } 152 | 153 | // Datetimepicker 154 | .k-datetimepicker { 155 | 156 | .k-select { 157 | width: auto; 158 | } 159 | .k-link { 160 | padding: 0; 161 | width: add-three( $button-border-width, $icon-size, $button-padding-y * 2 ); 162 | } 163 | 164 | .k-i-warning { 165 | color: $error; 166 | right: calc( #{ button-inner-size( 2 ) } + #{ $input-padding-x-sm }); 167 | } 168 | 169 | .k-state-invalid { 170 | transition: none; 171 | color: $error; 172 | border-color: $error; 173 | } 174 | 175 | .k-rtl &, 176 | &[dir='rtl'] { 177 | .k-i-warning { 178 | left: calc( #{ button-inner-size( 2 ) } + #{ $input-padding-x-sm }); 179 | } 180 | } 181 | } 182 | 183 | // Dateinput 184 | .k-dateinput { 185 | 186 | // Normal state 187 | .k-dateinput-wrap { 188 | @include appearance( input ); 189 | } 190 | .k-select { 191 | @include appearance( button ); 192 | 193 | &:hover { 194 | @include appearance( hovered-button ); 195 | } 196 | } 197 | 198 | // Focused state 199 | .k-state-focused { 200 | @include appearance( focused-input ); 201 | } 202 | } 203 | } -------------------------------------------------------------------------------- /scss/dialog.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "window"; 8 | 9 | 10 | // Component 11 | @import "dialog/layout"; 12 | @import "dialog/theme"; -------------------------------------------------------------------------------- /scss/dialog/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/dialog/layout"; -------------------------------------------------------------------------------- /scss/dialog/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("dialog/theme") { 2 | 3 | .k-dialog {} 4 | 5 | 6 | // Buttons 7 | .k-dialog-buttongroup { 8 | @include border-bottom-radius-only(); 9 | border-color: $window-titlebar-border; 10 | 11 | .k-button:first-child { @include border-radius( 0 0 0 $border-radius ); } 12 | .k-button:last-child { @include border-radius( 0 0 $border-radius 0 ); } 13 | 14 | .k-button { 15 | color: inherit; 16 | 17 | &:hover { 18 | @include appearance( hovered-button ); 19 | } 20 | 21 | &:active { 22 | @include appearance( pressed-button ); 23 | } 24 | } 25 | 26 | .k-primary { 27 | color: $accent; 28 | 29 | &:hover { 30 | @include appearance( hovered-primary-button ); 31 | } 32 | 33 | &:active { 34 | @include appearance( pressed-primary-button ); 35 | } 36 | } 37 | } 38 | 39 | } -------------------------------------------------------------------------------- /scss/dropdownlist.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "dropdownlist/layout"; 11 | @import "dropdownlist/theme"; -------------------------------------------------------------------------------- /scss/dropdownlist/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/dropdownlist/layout"; -------------------------------------------------------------------------------- /scss/dropdownlist/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("dropdownlist/theme") { 2 | 3 | // Dropdown 4 | .k-dropdown { 5 | .k-dropdown-wrap { 6 | @include appearance( button ); 7 | transition: $transition; 8 | } 9 | 10 | // Hover state 11 | > :hover, 12 | .k-state-hover { @include appearance( hovered-button ); } 13 | 14 | // Focused state 15 | .k-state-focused { 16 | box-shadow: $button-focused-shadow; 17 | } 18 | 19 | // Active state 20 | .k-state-active { 21 | @include appearance( pressed-button ); 22 | } 23 | 24 | } 25 | 26 | } -------------------------------------------------------------------------------- /scss/edit-form.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "edit-form/layout"; 11 | @import "edit-form/theme"; -------------------------------------------------------------------------------- /scss/edit-form/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/edit-form/layout"; -------------------------------------------------------------------------------- /scss/edit-form/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("edit-form/theme") { 2 | .k-edit-label { 3 | padding: add-two($padding-y, -$input-border-width) 0; 4 | } 5 | } -------------------------------------------------------------------------------- /scss/editor.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | @import "toolbar"; 9 | @import "window"; 10 | 11 | 12 | // Component 13 | @import "editor/layout"; 14 | @import "editor/theme"; -------------------------------------------------------------------------------- /scss/editor/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/editor/layout"; -------------------------------------------------------------------------------- /scss/editor/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("editor/theme") { 2 | 3 | $editor-overlay-background: #000 !default; 4 | 5 | .k-editor { 6 | @include appearance( panel ); 7 | 8 | .k-editor-toolbar { 9 | @include appearance( toolbar ); 10 | } 11 | .k-editable-area { 12 | border-color: $header-border; 13 | } 14 | } 15 | 16 | .k-overlay { 17 | background-color: $editor-overlay-background; 18 | } 19 | 20 | 21 | // Editor toolbar 22 | .k-editor-toolbar { 23 | 24 | a.k-tool { 25 | @include appearance( button ); 26 | 27 | &:hover, 28 | &.k-state-hover { 29 | @include appearance( hovered-button ); 30 | } 31 | 32 | &:active, 33 | &.k-state-active { 34 | @include appearance( pressed-button ); 35 | } 36 | 37 | &.k-state-selected { 38 | @include appearance( pressed-button ); 39 | } 40 | } 41 | } 42 | 43 | // sass-lint:disable class-name-format 44 | .editorToolbarWindow.k-header.k-window-content { 45 | @include appearance( header ); 46 | } 47 | // sass-lint:enable class-name-format 48 | // sass-lint:disable class-name-format 49 | .k-editor .k-editor-toolbar-wrap, 50 | .k-ct-popup .k-editor-toolbar, 51 | .editorToolbarWindow.k-header.k-window-content { 52 | .k-tool-group { 53 | border-color: $border-color; 54 | } 55 | } 56 | // sass-lint:enable class-name-format 57 | 58 | 59 | // Overflow anchor 60 | .k-editor-toolbar .k-overflow-anchor { 61 | padding: $toolbar-padding-y; 62 | width: calc( #{$toolbar-inner-calc-size} ); 63 | height: calc( #{$toolbar-inner-calc-size} ); 64 | } 65 | 66 | .k-editor-dialog { 67 | .k-edit-label { 68 | padding: add-two($padding-y, -$input-border-width) 0; 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /scss/gantt.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | 9 | 10 | // Component 11 | @import "gantt/layout"; 12 | @import "gantt/theme"; -------------------------------------------------------------------------------- /scss/gantt/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/gantt/layout"; -------------------------------------------------------------------------------- /scss/gantt/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("gantt/theme") { 2 | 3 | // Theme 4 | .k-gantt {} 5 | 6 | 7 | // Header and footer 8 | .k-gantt-toolbar { 9 | @include appearance( toolbar ); 10 | line-height: $form-line-height; 11 | } 12 | 13 | 14 | // View switcher 15 | .k-gantt-views { 16 | 17 | li { 18 | @include appearance( button ); 19 | 20 | &.k-state-hover { @include appearance( hovered-button ); } 21 | &.k-state-selected { @include appearance( pressed-button ); } 22 | } 23 | li:first-child { @include border-radius( $border-radius ); } 24 | li:first-child + li { @include border-radius( $border-radius 0 0 $border-radius ); } 25 | li:last-child{ @include border-radius( 0 $border-radius $border-radius 0 ); } 26 | 27 | 28 | &.k-state-expanded { 29 | li { 30 | margin: 0; 31 | border-radius: 0; 32 | } 33 | li + li { margin-top: -1px; } 34 | li:first-child { @include border-radius( $border-radius $border-radius 0 0 ); } 35 | li:first-child + li { border-radius: 0; } 36 | li:last-child { @include border-radius( 0 0 $border-radius $border-radius ); } 37 | } 38 | } 39 | 40 | 41 | // Rows and colls 42 | .k-gantt-rows {} 43 | .k-gantt-columns {} 44 | .k-gantt-columns .k-nonwork-hour { 45 | background-color: rgba( $panel-text, .025 ); 46 | } 47 | 48 | 49 | .k-gantt-dependencies {} 50 | .k-line { 51 | color: mix( $panel-text, $panel-bg ); 52 | background-color: mix( $panel-text, $panel-bg ); 53 | } 54 | .k-line.k-state-selected { 55 | color: $header-selected-bg; 56 | background-color: $header-selected-bg; 57 | } 58 | 59 | .k-task-dot {} 60 | .k-task-dot:before { 61 | background-color: $panel-text; 62 | } 63 | .k-task-dot:hover:before, 64 | .k-task-dot.k-state-hover:before { 65 | border-color: $panel-text; 66 | background-color: $panel-bg; 67 | } 68 | 69 | 70 | // Milestone 71 | .k-task-milestone { 72 | border-color: darken( $header-border, 10 ); 73 | background-color: $header-border; 74 | } 75 | .k-task-milestone.k-state-selected { 76 | border-color: darken( $header-selected-border, 10 ); 77 | background-color: $header-selected-border; 78 | } 79 | 80 | 81 | // Summary 82 | .k-task-summary { 83 | color: mix( $panel-text, $panel-bg ); 84 | } 85 | .k-task-summary-complete { 86 | color: $panel-text; 87 | } 88 | .k-task-summary.state-selected { 89 | color: mix( $header-selected-bg, $panel-bg ); 90 | 91 | .k-task-summary-complete { 92 | color: $header-selected-bg; 93 | } 94 | } 95 | .k-task-summary::before, 96 | .k-task-summary::after, 97 | .k-task-summary-complete::before, 98 | .k-task-summary-complete::after { 99 | display: none; 100 | } 101 | 102 | 103 | // Tasks 104 | .k-task-single { 105 | @include appearance( button ); 106 | @include border-radius( $border-radius ); 107 | 108 | .k-task-complete { 109 | background: $button-text; 110 | opacity: .25; 111 | } 112 | } 113 | .k-task-single.k-state-selected { 114 | @include appearance( active-button ); 115 | } 116 | .k-task-single .k-resize-handle { 117 | width: ($spacer-x / 2 ); 118 | } 119 | .k-task-single:hover .k-resize-handle { 120 | opacity: 0; 121 | } 122 | 123 | } -------------------------------------------------------------------------------- /scss/grid.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | @import "pager"; 9 | 10 | 11 | // Component 12 | @import "grid/layout"; 13 | @import "grid/theme"; -------------------------------------------------------------------------------- /scss/grid/_layout.scss: -------------------------------------------------------------------------------- 1 | $edit-cell-input-space: 0 !default; 2 | $edit-cell-textbox-width: 100% !default; 3 | 4 | @import "~@progress/kendo-theme-default/scss/grid/layout"; -------------------------------------------------------------------------------- /scss/grid/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("grid/theme") { 2 | $grid-cell-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .08) !default; 3 | $grid-sorted-bg: rgba( contrast-wcag( $base-bg ), .02 ) !default; 4 | 5 | // Theme 6 | .k-grid { 7 | border-color: $grid-border; 8 | color: $grid-text; 9 | background-color: $grid-bg; 10 | 11 | td, 12 | .k-grid-content, 13 | .k-grid-header-locked, 14 | .k-grid-content-locked { 15 | border-color: $grid-border; 16 | } 17 | 18 | // Alt row 19 | .k-alt { 20 | color: $grid-alt-text; 21 | background-color: $grid-alt-bg; 22 | } 23 | 24 | // Hover state 25 | tbody tr:hover { 26 | color: $grid-hovered-text; 27 | background-color: $grid-hovered-bg; 28 | } 29 | 30 | // Selected state 31 | tr.k-state-selected, 32 | th.k-state-selected, 33 | td.k-state-selected { 34 | border-color: inherit; 35 | color: inherit; 36 | background-color: rgba( $selected-bg, .25 ); 37 | } 38 | 39 | // Focused state 40 | td.k-state-focused, 41 | th.k-state-focused { 42 | box-shadow: $grid-cell-focused-shadow; 43 | } 44 | 45 | .k-tooltip.k-tooltip-validation { 46 | color: $tooltip-color; 47 | background-color: $tooltip-bg; 48 | 49 | .k-callout-n { 50 | border-bottom-color: $tooltip-bg; 51 | } 52 | 53 | .k-callout-e { 54 | border-left-color: $tooltip-bg; 55 | } 56 | 57 | .k-callout-s { 58 | border-top-color: $tooltip-bg; 59 | } 60 | 61 | .k-callout-w { 62 | border-right-color: $tooltip-bg; 63 | } 64 | } 65 | 66 | col.k-sorted, 67 | th.k-sorted { 68 | background-color: $grid-sorted-bg; 69 | } 70 | 71 | .k-dirty { 72 | border-color: currentColor transparent transparent currentColor; 73 | } 74 | 75 | &[dir = "rtl"], 76 | .k-rtl & { 77 | .k-dirty { 78 | border-color: currentColor currentColor transparent transparent; 79 | } 80 | } 81 | 82 | .k-button { 83 | @include appearance( button ); 84 | 85 | &:hover { 86 | @include appearance( hovered-button ); 87 | } 88 | } 89 | } 90 | 91 | 92 | // Toolbar 93 | .k-grid-toolbar { 94 | @include appearance( toolbar ); 95 | padding: $toolbar-padding-y; 96 | } 97 | 98 | 99 | // Grouping header 100 | .k-grouping-header { 101 | @include fill( $grid-header-text, $grid-header-bg, $grid-header-border ); 102 | padding: $toolbar-padding-y; 103 | } 104 | .k-grouping-header .k-group-indicator { 105 | @include appearance( button ); 106 | @include border-radius( $border-radius ); 107 | } 108 | 109 | 110 | // Header 111 | .k-grid-header { 112 | @include fill( $grid-header-text, $grid-header-bg, $grid-header-border ); 113 | 114 | .k-i-sort-asc-sm, 115 | .k-i-sort-desc-sm, 116 | .k-sort-order { 117 | color: $accent; 118 | } 119 | 120 | .k-sort-order { 121 | font-size: ($icon-size * .75); 122 | margin-left: -4px; 123 | line-height: 1; 124 | vertical-align: text-top; 125 | margin-top: 2px; 126 | } 127 | 128 | .k-grid-filter {} 129 | .k-grid-filter:focus { 130 | box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 ); 131 | } 132 | .k-grid-filter.k-state-active { 133 | color: $selected-text; 134 | background-color: $selected-bg; 135 | } 136 | 137 | } 138 | .k-grid-footer { 139 | @include fill( $grid-header-text, $grid-header-bg, $grid-header-border ); 140 | 141 | .k-grid-footer-locked { 142 | border-color: inherit; 143 | } 144 | } 145 | 146 | 147 | // Pager 148 | .k-grid-pager { 149 | @include fill( $grid-header-text, $grid-header-bg, $grid-header-border ); 150 | padding: $toolbar-padding-y; 151 | } 152 | 153 | 154 | // Grouping 155 | .k-grouping-row, 156 | .k-group-cell { 157 | @include fill( $grid-header-text, $grid-header-bg, $grid-header-border ); 158 | } 159 | 160 | } -------------------------------------------------------------------------------- /scss/input.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "input/layout"; 11 | @import "input/theme"; -------------------------------------------------------------------------------- /scss/input/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/input/layout"; -------------------------------------------------------------------------------- /scss/listbox.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "button"; 7 | @import "popup"; 8 | 9 | 10 | // Component 11 | @import "listbox/layout"; 12 | @import "listbox/theme"; -------------------------------------------------------------------------------- /scss/listbox/_layout.scss: -------------------------------------------------------------------------------- 1 | $listbox-margin: 5px !default; 2 | 3 | @import "~@progress/kendo-theme-default/scss/listbox/layout"; -------------------------------------------------------------------------------- /scss/listbox/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("listbox/theme") { 2 | 3 | .k-listbox { 4 | 5 | .k-list-scroller { 6 | @include appearance( panel ); 7 | } 8 | .k-drop-hint { 9 | border-top-color: $accent; 10 | } 11 | } 12 | 13 | .k-item.k-drag-clue { 14 | background-color: $list-item-selected-bg; 15 | color: $list-item-selected-text; 16 | } 17 | 18 | } -------------------------------------------------------------------------------- /scss/listview.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | @import "listview/layout"; 5 | @import "listview/theme"; -------------------------------------------------------------------------------- /scss/listview/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/listview/layout"; -------------------------------------------------------------------------------- /scss/listview/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports('listview/theme') { 2 | .k-listview > .k-state-focused { 3 | box-shadow: inset 0 0 0 3px try-darken( $node-bg, 7 ); 4 | 5 | &.k-state-selected { 6 | box-shadow: inset 0 0 0 3px try-darken( $node-selected-bg , 7 ); 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /scss/map.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "map/images/markers"; 8 | @import "button"; 9 | @import "scroller"; 10 | 11 | 12 | // Component 13 | @import "map/layout"; 14 | @import "map/theme"; -------------------------------------------------------------------------------- /scss/map/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/map/layout"; -------------------------------------------------------------------------------- /scss/map/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("map/theme") { 2 | 3 | // Theme 4 | .k-map { 5 | .k-marker { 6 | color: $accent; 7 | } 8 | 9 | .k-navigator { 10 | @include appearance( button ); 11 | } 12 | } 13 | 14 | } -------------------------------------------------------------------------------- /scss/map/images/markers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-bootstrap/6d2c9babc5ab472925b98bf18f6ae678a2127b11/scss/map/images/markers.png -------------------------------------------------------------------------------- /scss/map/images/markers.scss: -------------------------------------------------------------------------------- 1 | @include exports("markers.png") { 2 | @include register-data-uri("markers.png", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==") 3 | } -------------------------------------------------------------------------------- /scss/maskedtextbox.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "maskedtextbox/layout"; 11 | @import "maskedtextbox/theme"; -------------------------------------------------------------------------------- /scss/maskedtextbox/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/maskedtextbox/layout"; -------------------------------------------------------------------------------- /scss/maskedtextbox/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("maskedtextbox/theme") { 2 | .k-maskedtextbox { 3 | .k-i-warning { 4 | color: $error; 5 | } 6 | 7 | &.k-state-invalid { 8 | transition: none; 9 | 10 | .k-textbox { 11 | color: $error; 12 | border-color: $error; 13 | } 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /scss/mediaplayer.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "mediaplayer/layout"; 11 | @import "mediaplayer/theme"; -------------------------------------------------------------------------------- /scss/mediaplayer/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/mediaplayer/layout"; -------------------------------------------------------------------------------- /scss/mediaplayer/_theme.scss: -------------------------------------------------------------------------------- 1 | $slider-track-background-color: darken($header-bg, 7%) !default; 2 | 3 | @include exports("mediaplayer/theme") { 4 | 5 | // Theme 6 | .k-mediaplayer {} 7 | 8 | 9 | // Title bar 10 | .k-mediaplayer-titlebar { 11 | color: $panel-bg; 12 | background-image: linear-gradient( rgba( $panel-text, .7 ), rgba( $panel-text, 0 ) ); 13 | // text-shadow: 0 0 1px $panel-text; 14 | } 15 | 16 | 17 | .k-mediaplayer-toolbar { 18 | background-color: rgba($toolbar-bg, 0.85); 19 | 20 | .k-slider-track { 21 | background: $slider-track-background-color; 22 | } 23 | } 24 | 25 | } -------------------------------------------------------------------------------- /scss/menu.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "menu/layout"; 11 | @import "menu/theme"; -------------------------------------------------------------------------------- /scss/menu/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/menu/layout"; -------------------------------------------------------------------------------- /scss/menu/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("menu/theme") { 2 | 3 | // Theme 4 | .k-menu:not(.k-context-menu) { 5 | border-width: 0; 6 | color: rgba( $header-text, .5 ); 7 | background-color: $header-bg; 8 | 9 | .k-item {} 10 | > .k-item.k-state-hover > .k-link { 11 | color: rgba( $header-text, .7 ); 12 | } 13 | 14 | > .k-item > .k-link.k-state-active { 15 | color: rgba( $header-text, .9 ); 16 | } 17 | 18 | > .k-item.k-state-focused > .k-link { 19 | box-shadow: inset 0 0 0 3px rgba( $header-text, .15 ); 20 | } 21 | 22 | } 23 | .k-menu.k-menu-horizontal:not(.k-context-menu) { 24 | padding: $padding-y $padding-x; 25 | 26 | > .k-item > .k-link { 27 | padding: $padding-y; 28 | } 29 | } 30 | .k-menu-group, 31 | .k-context-menu { 32 | 33 | .k-link {} 34 | 35 | .k-item.k-state-hover > .k-link { 36 | @include appearance( hovered-list-item ); 37 | } 38 | .k-item .k-link.k-state-active { 39 | @include appearance( selected-list-item ); 40 | } 41 | 42 | .k-item { 43 | 44 | &.k-state-focused { 45 | 46 | & > .k-link { 47 | box-shadow: inset 0 0 0 3px rgba( $list-item-text, .15 ); 48 | } 49 | 50 | &.k-state-hover > .k-link { 51 | box-shadow: inset 0 0 0 3px rgba($list-item-hovered-text, .15); 52 | } 53 | 54 | & > .k-link.k-state-active, 55 | & > .k-link.k-state-selected { 56 | box-shadow: inset 0 0 0 3px rgba($list-item-selected-text, .15); 57 | } 58 | } 59 | } 60 | 61 | } 62 | 63 | 64 | // Orientation 65 | .k-menu-horizontal { 66 | .k-item {} 67 | } 68 | .k-context-menu.k-menu-horizontal { 69 | padding: $popup-padding-x $popup-padding-y; 70 | } 71 | .k-menu-group, 72 | .k-menu-vertical { 73 | padding: $popup-padding-y $popup-padding-x; 74 | 75 | .k-separator { 76 | margin: ($spacer / 2) 0; 77 | } 78 | } 79 | 80 | 81 | // Scrolling 82 | .k-menu-scroll-button { 83 | border-color: $header-border; 84 | color: rgba( $header-text, .5 ); 85 | background-color: $header-bg; 86 | 87 | &:hover { 88 | border-color: $header-border; 89 | color: rgba( $header-text, .7 ); 90 | background: $header-bg; 91 | } 92 | 93 | &.k-scroll-left { 94 | width: 16px; 95 | border-right-width: 1px; 96 | } 97 | &.k-scroll-right { 98 | width: 16px; 99 | border-left-width: 1px; 100 | } 101 | &.k-scroll-up { 102 | height: 16px; 103 | border-bottom-width: 1px; 104 | } 105 | &.k-scroll-down { 106 | height: 16px; 107 | border-top-width: 1px; 108 | } 109 | } 110 | 111 | } -------------------------------------------------------------------------------- /scss/multiselect.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | 9 | 10 | // Component 11 | @import "multiselect/layout"; 12 | @import "multiselect/theme"; -------------------------------------------------------------------------------- /scss/multiselect/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/multiselect/layout"; -------------------------------------------------------------------------------- /scss/multiselect/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("multiselect/theme") { 2 | 3 | // Appearance 4 | .k-multiselect { 5 | @include appearance( input ); 6 | transition: $transition; 7 | 8 | &.k-state-hover { 9 | @include appearance( hovered-input ); 10 | } 11 | 12 | &.k-state-focused { 13 | .k-multiselect-wrap { 14 | @include appearance( focused-input ); 15 | } 16 | } 17 | 18 | } 19 | 20 | .k-multiselect-wrap { 21 | @include appearance( input ); 22 | 23 | .k-button { 24 | min-height: calc(#{$form-line-height}*1em + #{$button-padding-y-sm} + 2px + 2px); 25 | padding: add-two(($button-padding-y-sm / 2), 1px) ($button-padding-x / 2); 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /scss/notification.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "notification/layout"; 11 | @import "notification/theme"; -------------------------------------------------------------------------------- /scss/notification/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/notification/layout"; -------------------------------------------------------------------------------- /scss/notification/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("notification/theme") { 2 | 3 | // Theme 4 | .k-notification { 5 | @include appearance( panel ); 6 | 7 | .k-i-close { 8 | padding: $alert-padding-y $alert-padding-x; 9 | top: 0; 10 | right: 0; 11 | } 12 | } 13 | .k-notification-info { 14 | border-color: $notification-info-border; 15 | color: $notification-info-text; 16 | background-color: $notification-info-bg; 17 | } 18 | .k-notification-success { 19 | border-color: $notification-success-border; 20 | color: $notification-success-text; 21 | background-color: $notification-success-bg; 22 | } 23 | .k-notification-warning { 24 | border-color: $notification-warning-border; 25 | color: $notification-warning-text; 26 | background-color: $notification-warning-bg; 27 | } 28 | .k-notification-error { 29 | border-color: $notification-error-border; 30 | color: $notification-error-text; 31 | background-color: $notification-error-bg; 32 | } 33 | 34 | } -------------------------------------------------------------------------------- /scss/numerictextbox.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "numerictextbox/layout"; 11 | @import "numerictextbox/theme"; -------------------------------------------------------------------------------- /scss/numerictextbox/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/numerictextbox/layout"; -------------------------------------------------------------------------------- /scss/numerictextbox/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("numerictextbox/theme") { 2 | $numerictextbox-icon-offset: 1px !default; 3 | 4 | // Numeric 5 | .k-numerictextbox { 6 | 7 | // Normal state 8 | .k-numeric-wrap { 9 | @include appearance( input ); 10 | transition: $transition; 11 | } 12 | .k-select { 13 | @include appearance( button ); 14 | transition: $transition; 15 | } 16 | 17 | // Hovered state 18 | .k-state-hover { 19 | @include appearance( hovered-input ); 20 | 21 | .k-select { 22 | @include appearance( hovered-button ); 23 | } 24 | } 25 | 26 | // Focused state 27 | .k-state-focused { 28 | @include appearance( focused-input ); 29 | } 30 | 31 | // Selected state 32 | .k-link.k-state-selected { 33 | @include appearance( pressed-button ); 34 | } 35 | 36 | .k-link-increase > .k-icon { 37 | bottom: -$numerictextbox-icon-offset; 38 | } 39 | 40 | .k-link-decrease > .k-icon { 41 | top: -$numerictextbox-icon-offset; 42 | } 43 | 44 | .k-numeric-wrap.k-state-invalid { 45 | border-color: $error; 46 | color: $error; 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /scss/packages/all.d.ts: -------------------------------------------------------------------------------- 1 | declare var styles: any; 2 | 3 | export = styles; 4 | -------------------------------------------------------------------------------- /scss/packages/all.scss: -------------------------------------------------------------------------------- 1 | @import "../theme.scss"; -------------------------------------------------------------------------------- /scss/pager.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "dropdownlist"; 8 | 9 | 10 | // Component 11 | @import "pager/layout"; 12 | @import "pager/theme"; -------------------------------------------------------------------------------- /scss/pager/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/pager/layout"; -------------------------------------------------------------------------------- /scss/pager/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("pager/theme") { 2 | $pager-form-line-height-em: $form-line-height * 1em !default; 3 | $pager-button-padding-y: .5em !default; 4 | $pager-buttons-size: calc(#{$pager-form-line-height-em} + 2px) !default; /// icon button size + 2px border (top and bottom) 5 | 6 | // Theme 7 | .k-pager-wrap { 8 | @include appearance( header ); 9 | 10 | .k-pager-first { 11 | @include border-left-radius-only(); 12 | } 13 | .k-pager-last { 14 | @include border-right-radius-only(); 15 | } 16 | 17 | .k-link, 18 | .k-pager-nav { 19 | color: $pager-text; 20 | background-color: $pager-bg; 21 | border-color: $pager-border; 22 | border-width: 1px; 23 | border-style: solid; 24 | 25 | &:hover { 26 | color: $pager-hover-text; 27 | background-color: $pager-hover-bg; 28 | border-color: $pager-hover-border; 29 | z-index: 2; 30 | } 31 | 32 | &:focus { 33 | box-shadow: $pagination-focus-box-shadow; 34 | outline: 0; 35 | z-index: 2; 36 | } 37 | } 38 | 39 | .k-pager-refresh { 40 | @include border-radius( $border-radius ); 41 | } 42 | 43 | .k-link, 44 | .k-state-selected { 45 | padding: $pager-button-padding-y; 46 | width: $pager-buttons-size; 47 | height: $pager-buttons-size; 48 | line-height: $pager-buttons-size; 49 | } 50 | 51 | .k-dropdown .k-dropdown-wrap { 52 | color: $body-color; 53 | background-color: $pager-bg; 54 | border-color: $pager-border; 55 | 56 | &.k-state-hover { 57 | background-color: $pager-hover-bg; 58 | } 59 | } 60 | } 61 | .k-pager-numbers { 62 | 63 | .k-state-selected, 64 | .k-state-selected:hover { 65 | border-width: 1px; 66 | border-style: solid; 67 | background-color: $pager-selected-bg; 68 | border-color: $pager-selected-border; 69 | z-index: 2; 70 | cursor: default; 71 | 72 | &.k-link { 73 | color: $pager-selected-text; 74 | } 75 | } 76 | 77 | } 78 | 79 | .k-link.k-pager-nav.k-state-disabled {} 80 | 81 | 82 | // Spacing 83 | .k-pager-nav + .k-pager-nav, 84 | .k-pager-nav + .k-pager-numbers, 85 | .k-pager-numbers + .k-pager-nav, 86 | .k-pager-numbers .k-current-page ~ li + li { 87 | margin-left: -1px; 88 | } 89 | 90 | } -------------------------------------------------------------------------------- /scss/panelbar.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "panelbar/layout"; 11 | @import "panelbar/theme"; -------------------------------------------------------------------------------- /scss/panelbar/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/panelbar/layout"; -------------------------------------------------------------------------------- /scss/panelbar/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("panelbar/theme") { 2 | 3 | // Appearance 4 | .k-panelbar { 5 | @include appearance( panel ); 6 | 7 | // Root 8 | > .k-item { 9 | border-color: $header-border; 10 | } 11 | > .k-item > .k-link { 12 | // @include appearance( header ); 13 | border-color: $header-border; 14 | color: $header-text; 15 | background-color: $header-bg; 16 | } 17 | > .k-item > .k-link:hover, 18 | > .k-item > .k-link.k-state-hover { 19 | @include appearance( hovered-header ); 20 | } 21 | > .k-item > .k-link.k-state-selected { 22 | @include appearance( selected-header ); 23 | } 24 | > .k-item > .k-link.k-state-focused { 25 | box-shadow: inset 0 0 0 3px try-darken( $header-bg, 7 ); 26 | 27 | &:hover, 28 | &.k-state-hover { 29 | box-shadow: inset 0 0 0 3px try-darken( $header-hovered-bg, 7 ); 30 | } 31 | 32 | &.k-state-selected { 33 | box-shadow: inset 0 0 0 3px try-darken( $header-selected-bg , 7 ); 34 | } 35 | } 36 | 37 | // Child 38 | .k-panel > .k-item > .k-link {} 39 | 40 | .k-panel > .k-item > .k-link:hover, 41 | .k-panel > .k-item > .k-link.k-state-hover { 42 | @include appearance( hovered-node ); 43 | } 44 | .k-panel > .k-item > .k-link.k-state-selected { 45 | @include appearance( selected-node ); 46 | } 47 | .k-panel > .k-item > .k-link.k-state-focused { 48 | box-shadow: inset 0 0 0 3px try-darken( $node-bg, 7 ); 49 | 50 | &:hover, 51 | &.k-state-hover { 52 | box-shadow: inset 0 0 0 3px try-darken( $node-hovered-bg , 7 ); 53 | } 54 | 55 | &.k-state-selected { 56 | box-shadow: inset 0 0 0 3px try-darken( $node-selected-bg , 7 ); 57 | } 58 | } 59 | 60 | } 61 | 62 | } -------------------------------------------------------------------------------- /scss/pivotgrid.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "dialog"; 8 | @import "treeview"; 9 | 10 | 11 | // Component 12 | @import "pivotgrid/layout"; 13 | @import "pivotgrid/theme"; -------------------------------------------------------------------------------- /scss/pivotgrid/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/pivotgrid/layout"; -------------------------------------------------------------------------------- /scss/pivotgrid/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("pivotgrid/theme") { 2 | 3 | $pivotgrid-alt-bg: $header-bg !default; 4 | $pivotgrid-chrome-border: $border-color !default; 5 | 6 | $pivotgrid-container-bg: $header-bg !default; 7 | $pivotgrid-row-headers-bg: darken( $header-bg, 3 ) !default; 8 | 9 | //.k-alt, 10 | .k-pivot-toolbar, 11 | .k-pivot-layout > tbody > tr:first-child > td:first-child { 12 | background-color: $pivotgrid-alt-bg; 13 | } 14 | .k-pivot-toolbar { 15 | padding: $toolbar-padding-y; 16 | } 17 | 18 | .k-fieldselector { 19 | background-color: $pivotgrid-container-bg; 20 | } 21 | .k-fieldselector .k-list-container { 22 | background-color: $panel-bg; 23 | } 24 | 25 | .k-pivot-toolbar { 26 | border-color: $grid-header-border; 27 | } 28 | .k-pivot-table, 29 | .k-fieldselector .k-list-container, 30 | .k-fieldselector .k-columns > div, 31 | .k-pivot-rowheaders > .k-grid td:first-child, 32 | .k-pivot-table .k-grid-header .k-header.k-first { 33 | border-color: $pivotgrid-chrome-border; 34 | } 35 | 36 | .k-pivot-rowheaders .k-alt .k-alt, 37 | .k-header.k-alt { 38 | background-color: $pivotgrid-row-headers-bg; 39 | } 40 | 41 | .k-pivot-toolbar .k-button, 42 | .k-fieldselector .k-list li.k-item { 43 | @include appearance( button ); 44 | 45 | &:hover, 46 | &.k-state-hover { 47 | @include appearance( hovered-button ); 48 | } 49 | 50 | // Pressed state 51 | &:active, 52 | &.k-state-active { 53 | @include appearance( pressed-button ); 54 | box-shadow: $button-pressed-shadow; 55 | } 56 | 57 | // Focused state 58 | &:focus, 59 | &.k-state-focused { 60 | box-shadow: $button-focused-shadow; 61 | } 62 | } 63 | 64 | // Loading indicator 65 | .k-fieldselector { 66 | .k-i-loading { 67 | border-color: $header-bg; 68 | } 69 | 70 | .k-i-loading::before, 71 | .k-i-loading::after { 72 | background-color: $header-bg; 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /scss/popup.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | 9 | 10 | // Component 11 | @import "popup/layout"; 12 | @import "popup/theme"; -------------------------------------------------------------------------------- /scss/popup/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/popup/layout"; -------------------------------------------------------------------------------- /scss/popup/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports( "popup/theme" ) { 2 | 3 | .k-popup { 4 | @include appearance( popup ); 5 | @include border-radius( $border-radius ); 6 | margin: $dropdown-spacer 0 0 0; 7 | 8 | .k-header, 9 | .k-group-header { 10 | color: $dropdown-header-color; 11 | font-weight: 600; 12 | font-size: $font-size-sm; 13 | } 14 | 15 | &.k-column-menu { 16 | padding-top: 0; 17 | padding-bottom: 0; 18 | } 19 | } 20 | .k-popup > .k-group-header, 21 | .k-popup > .k-virtual-wrap > .k-group-header { 22 | border-bottom-color: $border-color; 23 | } 24 | .k-popup .k-group-header + div > .k-list > .k-item.k-first::before { 25 | border-top-color: $border-color; 26 | } 27 | } 28 | 29 | @include exports( "list/theme" ) { 30 | 31 | .k-list {} 32 | 33 | .k-list .k-item { 34 | transition: all .2s ease; // sass-lint:disable-block no-transition-all 35 | } 36 | 37 | .k-list .k-item:hover, 38 | .k-list .k-item.k-state-hover { 39 | @include appearance( hovered-list-item ); 40 | } 41 | 42 | .k-list .k-item.k-state-selected { 43 | @include appearance( selected-list-item ); 44 | } 45 | 46 | .k-list .k-item:focus, 47 | .k-list .k-item.k-state-focused { 48 | box-shadow: inset 0 0 0 3px rgba($list-item-text, .15); 49 | 50 | &:hover, 51 | &.k-state-hover { 52 | box-shadow: inset 0 0 0 3px rgba($list-item-hovered-text, .15); 53 | } 54 | 55 | &.k-state-selected { 56 | box-shadow: inset 0 0 0 3px rgba($list-item-selected-text, .15); 57 | } 58 | } 59 | 60 | } 61 | 62 | 63 | @include exports( "listcontainer/theme" ) { 64 | 65 | 66 | .k-list-container { 67 | 68 | .k-list-optionlabel { 69 | border-bottom-color: $input-border; 70 | } 71 | 72 | // Button normal state 73 | .k-button {} 74 | 75 | 76 | // Button hover state 77 | .k-button:hover, 78 | .k-button.k-state-hover { 79 | @include appearance( hovered-list-item ); 80 | } 81 | 82 | // Button pressed state 83 | .k-button:active, 84 | .k-button.k-state-active { 85 | @include appearance( selected-list-item ); 86 | } 87 | 88 | 89 | // Button focus state 90 | .k-button:focus, 91 | .k-button.k-state-focused { 92 | box-shadow: inset 0 0 0 3px rgba($list-item-text, .15); 93 | 94 | &:hover, 95 | &.k-state-hover { 96 | box-shadow: inset 0 0 0 3px rgba($list-item-hovered-text, .15); 97 | } 98 | 99 | &:active, 100 | &.k-state-active { 101 | box-shadow: inset 0 0 0 3px rgba($list-item-selected-text, .15); 102 | } 103 | } 104 | 105 | } 106 | 107 | } -------------------------------------------------------------------------------- /scss/progressbar.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "progressbar/layout"; 11 | @import "progressbar/theme"; -------------------------------------------------------------------------------- /scss/progressbar/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/progressbar/layout"; -------------------------------------------------------------------------------- /scss/progressbar/_theme.scss: -------------------------------------------------------------------------------- 1 | @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { 2 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 3 | } 4 | @include exports("progressbar/theme") { 5 | 6 | @keyframes progress-bar-stripes { 7 | from { background-position: $progress-height 0; } 8 | to { background-position: 0 0; } 9 | } 10 | 11 | // Theme 12 | .k-progressbar { 13 | color: $progress-text; 14 | background-color: $progress-bg; 15 | 16 | // Status 17 | .k-progress-status-wrap {} 18 | 19 | // Progress 20 | > .k-state-selected {} 21 | .k-state-selected { 22 | color: $progress-fill-text; 23 | background-color: $progress-fill-bg; 24 | } 25 | 26 | // Chunks 27 | > ul {} 28 | 29 | .k-item { 30 | border-color: $body-bg; 31 | } 32 | } 33 | 34 | .k-progressbar-indeterminate { 35 | @include gradient-striped(); 36 | background-color: $progress-fill-bg; 37 | background-size: $progress-height $progress-height; 38 | animation: progress-bar-stripes $progress-bar-animation-timing; 39 | 40 | .k-progress-status-wrap, 41 | .k-state-selected { 42 | display: none; 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /scss/qrcode.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | 7 | 8 | // Component 9 | @import "qrcode/layout"; -------------------------------------------------------------------------------- /scss/qrcode/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/qrcode/layout"; -------------------------------------------------------------------------------- /scss/responsivepanel.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "responsivepanel/layout"; 11 | @import "responsivepanel/theme"; -------------------------------------------------------------------------------- /scss/responsivepanel/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/responsivepanel/layout"; -------------------------------------------------------------------------------- /scss/responsivepanel/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("responsivepanel/theme") { 2 | 3 | .k-rpanel {} 4 | 5 | } -------------------------------------------------------------------------------- /scss/ripple.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "ripple/layout"; 11 | @import "ripple/theme"; 12 | 13 | -------------------------------------------------------------------------------- /scss/ripple/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/ripple/layout"; 2 | -------------------------------------------------------------------------------- /scss/ripple/_theme.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/ripple/theme"; 2 | -------------------------------------------------------------------------------- /scss/scheduler.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "scheduler/layout"; 11 | @import "scheduler/theme"; -------------------------------------------------------------------------------- /scss/scheduler/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/scheduler/layout"; -------------------------------------------------------------------------------- /scss/scheduler/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("scheduler/theme") { 2 | 3 | // Appearance 4 | .k-scheduler {} 5 | 6 | 7 | // Header and footer 8 | .k-scheduler-toolbar, 9 | .k-scheduler-footer { 10 | @include appearance( header ); 11 | } 12 | 13 | 14 | //Scheduler navigation 15 | .k-scheduler-navigation { 16 | 17 | .k-nav-today, 18 | .k-nav-prev, 19 | .k-nav-next { 20 | @include appearance( button ); 21 | 22 | &.k-state-hover { @include appearance( hovered-button ); } 23 | } 24 | .k-nav-today { @include border-radius( $border-radius 0 0 $border-radius ); } 25 | .k-nav-next { @include border-radius( 0 $border-radius $border-radius 0 ); } 26 | } 27 | 28 | 29 | // View switcher 30 | .k-scheduler-views { 31 | 32 | li { 33 | @include appearance( button ); 34 | 35 | &.k-state-hover { @include appearance( hovered-button ); } 36 | &.k-state-selected { @include appearance( pressed-button ); } 37 | } 38 | li:first-child { @include border-radius( $border-radius ); } 39 | li:first-child + li { @include border-radius( $border-radius 0 0 $border-radius ); } 40 | li:last-child{ @include border-radius( 0 $border-radius $border-radius 0 ); } 41 | 42 | 43 | &.k-state-expanded { 44 | li { 45 | margin: 0; 46 | border-radius: 0; 47 | } 48 | li + li { margin-top: -1px; } 49 | li:first-child { @include border-radius( $border-radius $border-radius 0 0 ); } 50 | li:first-child + li { border-radius: 0; } 51 | li:last-child { @include border-radius( 0 0 $border-radius $border-radius ); } 52 | } 53 | } 54 | 55 | 56 | // Scheduler footer 57 | .k-scheduler-footer { 58 | 59 | li { 60 | @include appearance( button ); 61 | @include border-radius( $border-radius ); 62 | 63 | &.k-state-hover { @include appearance( hovered-button ); } 64 | } 65 | } 66 | 67 | 68 | // Scheduler content 69 | .k-scheduler-content {} 70 | .k-nonwork-hour { 71 | background-color: mix( $panel-text, $panel-bg, ($color-level-step / 2) ); 72 | } 73 | 74 | 75 | // Appointments 76 | .k-event { 77 | @include appearance( selected-node ); 78 | @include border-radius( $border-radius ); 79 | } 80 | .k-event-inverse { 81 | color: $panel-bg; 82 | } 83 | 84 | 85 | // Drag hint 86 | .k-event-drag-hint {} 87 | 88 | 89 | // Resizing 90 | .k-scheduler-marquee { 91 | 92 | } 93 | .k-scheduler-marquee::before, 94 | .k-scheduler-marquee::after { 95 | border-color: $primary-button-border; 96 | } 97 | 98 | } 99 | 100 | 101 | 102 | 103 | @include exports("scheduler-edit-form/theme") { 104 | 105 | .k-popup-edit-form {} 106 | 107 | } -------------------------------------------------------------------------------- /scss/scroller.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "scroller/layout"; 11 | @import "scroller/theme"; -------------------------------------------------------------------------------- /scss/scroller/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/scroller/layout"; -------------------------------------------------------------------------------- /scss/scroller/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("scroller/theme") { 2 | 3 | .k-scroller {} 4 | 5 | } -------------------------------------------------------------------------------- /scss/scrollview.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "scrollview/layout"; 11 | @import "scrollview/theme"; -------------------------------------------------------------------------------- /scss/scrollview/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/scrollview/layout"; -------------------------------------------------------------------------------- /scss/scrollview/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("scrollview/theme") { 2 | 3 | .k-scrollview {} 4 | 5 | .k-pages, 6 | .k-scrollview-pageable { 7 | margin-left: $carousel-control-width; 8 | margin-right: $carousel-control-width; 9 | width: auto; 10 | left: 0; 11 | right: 0; 12 | 13 | > li { 14 | margin-right: $carousel-indicator-spacer; 15 | margin-left: $carousel-indicator-spacer; 16 | padding: 0; 17 | max-width: $carousel-indicator-width; 18 | height: $carousel-indicator-height; 19 | border-width: 0; 20 | border-radius: 0; 21 | flex: 1 0 auto; 22 | position: relative; 23 | } 24 | } 25 | 26 | .k-pages > li, 27 | .k-scrollview-pageable > li.k-button { 28 | background-image: none; 29 | background-color: rgba($carousel-indicator-active-bg, .5); 30 | } 31 | .k-pages > li.k-current-page { 32 | background-color: $carousel-indicator-active-bg; 33 | } 34 | 35 | } -------------------------------------------------------------------------------- /scss/slider.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | @import "tooltip"; 9 | @import "slider/images/slider-h"; 10 | @import "slider/images/slider-v"; 11 | 12 | 13 | // Component 14 | @import "slider/layout"; 15 | @import "slider/theme"; -------------------------------------------------------------------------------- /scss/slider/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/slider/layout"; -------------------------------------------------------------------------------- /scss/slider/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("slider/theme") { 2 | 3 | $slider-bg: $progress-bg !default; 4 | $slider-selected-bg: $progress-fill-bg !default; 5 | 6 | .k-slider { 7 | 8 | .k-button { 9 | border-radius: 50%; 10 | 11 | &:active, 12 | &.k-state-active { 13 | box-shadow: $button-focused-shadow; 14 | } 15 | } 16 | 17 | .k-slider-track { 18 | @include border-radius(); 19 | background-color: $slider-bg; 20 | } 21 | .k-slider-selection { 22 | @include border-radius(); 23 | background-color: $slider-selected-bg; 24 | } 25 | 26 | 27 | // Drag handle 28 | .k-draghandle { 29 | @include appearance( primary-button ); 30 | border-radius: 50%; 31 | 32 | &:hover { 33 | @include appearance( hovered-primary-button ); 34 | } 35 | 36 | &:active, 37 | &.k-pressed { 38 | @include appearance( pressed-primary-button ); 39 | box-shadow: $primary-button-pressed-shadow; 40 | } 41 | 42 | &:focus, 43 | &.k-state-focused { 44 | box-shadow: $primary-button-focused-shadow; 45 | } 46 | } 47 | } 48 | 49 | .k-slider-horizontal .k-tick { 50 | background-image: url(map-get($data-uris, 'slider-h.gif')); 51 | } 52 | .k-slider-vertical .k-tick { 53 | background-image: url(map-get($data-uris, 'slider-v.gif')); 54 | } 55 | 56 | .k-slider-wrap { 57 | &:focus { 58 | outline: none; 59 | } 60 | } 61 | 62 | } 63 | -------------------------------------------------------------------------------- /scss/slider/images/_slider-h.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/slider/images/slider-h"; -------------------------------------------------------------------------------- /scss/slider/images/_slider-v.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/slider/images/slider-v"; -------------------------------------------------------------------------------- /scss/splitter.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "splitter/layout"; 11 | @import "splitter/theme"; -------------------------------------------------------------------------------- /scss/splitter/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/splitter/layout"; -------------------------------------------------------------------------------- /scss/splitter/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("splitter/theme") { 2 | 3 | $splitter-text: $button-text; 4 | $splitter-bg: darken($button-bg, 5) !default; 5 | $splitter-hovered-text: $button-hovered-text; 6 | $splitter-hovered-bg: darken($button-hovered-bg, 5) !default; 7 | 8 | .k-splitter {} 9 | 10 | 11 | // Splitbar 12 | .k-splitbar { 13 | color: $splitter-text; 14 | background-color: $splitter-bg; 15 | 16 | &:active, 17 | &.k-state-focused { 18 | color: $selected-text; 19 | background: $selected-bg; 20 | } 21 | } 22 | .k-splitbar-horizontal-hover, 23 | .k-splitbar-vertical-hover { 24 | color: $splitter-hovered-text; 25 | background-color: $splitter-hovered-bg; 26 | } 27 | 28 | .k-ghost-splitbar { 29 | @include appearance( hovered-button ); 30 | } 31 | 32 | } -------------------------------------------------------------------------------- /scss/spreadsheet.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | @import "tabstrip"; 9 | @import "toolbar"; 10 | 11 | 12 | // Component 13 | @import "spreadsheet/layout"; 14 | @import "spreadsheet/theme"; -------------------------------------------------------------------------------- /scss/spreadsheet/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/spreadsheet/layout"; -------------------------------------------------------------------------------- /scss/spreadsheet/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("sreadsheet/theme") { 2 | 3 | // Spreadsheet 4 | .k-spreadsheet {} 5 | 6 | 7 | // Row / column headers 8 | .k-spreadsheet-top-corner { 9 | @include appearance( header ); 10 | } 11 | .k-spreadsheet-row-header, 12 | .k-spreadsheet-column-header { 13 | @include appearance( header ); 14 | } 15 | 16 | 17 | // Formula bar 18 | .k-spreadsheet-formula-list {} 19 | .k-syntax-ref { color: #ff8822; } 20 | .k-syntax-num { color: #0099ff; } 21 | .k-syntax-func { font-weight: bold; } 22 | .k-syntax-str { color: #38b714; } 23 | .k-syntax-error { color: red; } 24 | .k-syntax-bool { color: #a9169c; } 25 | .k-syntax-startexp { font-weight: bold; } 26 | .k-syntax-paren-match { background-color: #caf200; } 27 | 28 | 29 | // Cell editor 30 | .k-spreadsheet-cell-editor { 31 | color: $panel-text; 32 | background-color: $panel-bg; 33 | } 34 | 35 | 36 | // Selection 37 | .k-spreadsheet .k-selection-full, 38 | .k-spreadsheet .k-selection-partial { 39 | border-color: rgba( $header-selected-border, .25 ); 40 | background-color: rgba( $header-selected-bg, .25 ); 41 | } 42 | .k-spreadsheet-selection { 43 | border-color: $selected-bg; 44 | background-color: rgba( $selected-bg, .25 ); 45 | box-shadow: inset 0 0 0 1px $selected-bg; 46 | } 47 | 48 | .k-spreadsheet .k-single-selection::after { 49 | border-color: $panel-bg; 50 | background-color: $selected-bg; 51 | } 52 | .k-spreadsheet-active-cell { 53 | box-shadow: inset 0 0 0 1px $selected-bg; 54 | background-color: $panel-bg; 55 | 56 | &.k-right { 57 | box-shadow: inset 0 0 0 1px $selected-bg, inset -1px 0 0 1px $selected-bg; 58 | } 59 | 60 | &.k-bottom { 61 | box-shadow: inset 0 0 0 1px $selected-bg, inset 0 -1px 0 1px $selected-bg; 62 | } 63 | 64 | &.k-bottom.k-right { 65 | box-shadow: inset 0 0 0 1px $selected-bg, inset -1px -1px 0 1px $selected-bg; 66 | } 67 | } 68 | 69 | .k-spreadsheet .k-auto-fill { 70 | border-color: $selected-bg; 71 | background-color: rgba( $selected-bg, .25 ); 72 | box-shadow: inset 0 0 0 1px $selected-bg; 73 | } 74 | .k-spreadsheet .k-auto-fill-punch { 75 | background-color: rgba( $panel-bg, .5 ); 76 | } 77 | 78 | } 79 | 80 | 81 | 82 | 83 | @include exports( "spreadsheet/filter/theme" ) { 84 | 85 | // Filter button 86 | .k-spreadsheet .k-filter-range { 87 | border-color: $accent; 88 | } 89 | .k-spreadsheet-filter { 90 | @include appearance( button ); 91 | box-shadow: inset 0 0 0 1px $button-border; 92 | 93 | &.k-state-active { 94 | @include appearance( pressed-button ); 95 | } 96 | 97 | &:hover { 98 | @include appearance( hovered-button ); 99 | } 100 | } 101 | 102 | 103 | // Filter menu 104 | .k-spreadsheet-filter-menu { 105 | 106 | .k-spreadsheet-value-treeview-wrapper { 107 | @include appearance( panel ); 108 | } 109 | } 110 | 111 | } 112 | 113 | 114 | 115 | 116 | @include exports( "spreadsheet/tools/theme" ) { 117 | 118 | .k-spreadsheet-popup { 119 | 120 | // Buttons 121 | .k-button {} 122 | 123 | .k-button:hover, 124 | .k-button.k-state-hover { 125 | @include appearance( hovered-list-item ); 126 | } 127 | .k-button:active, 128 | .k-button.k-state-active, 129 | .k-button.k-state-selected { 130 | @include appearance( selected-list-item ); 131 | } 132 | 133 | } 134 | 135 | } -------------------------------------------------------------------------------- /scss/switch.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "switch/layout"; 11 | @import "switch/theme"; -------------------------------------------------------------------------------- /scss/switch/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/switch/layout"; -------------------------------------------------------------------------------- /scss/switch/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("switch/theme") { 2 | 3 | $switch-border-radius: ($switch-size / 2) !default; 4 | 5 | // Theme 6 | .k-switch, 7 | .km-switch { 8 | @include border-radius( $switch-border-radius ); 9 | overflow: hidden; 10 | } 11 | 12 | // Switch wrapper 13 | .k-switch-wrapper, 14 | .km-switch-wrapper { 15 | @include appearance( button ); 16 | @include border-radius( $switch-border-radius ); 17 | } 18 | .k-switch-background, 19 | .km-switch-background { 20 | @include appearance( primary-button ); 21 | } 22 | 23 | // Switch container 24 | .k-switch-container, 25 | .km-switch-container { 26 | @include border-radius( $switch-border-radius ); 27 | @include appearance( panel ); 28 | } 29 | .k-switch-handle, 30 | .km-switch-handle { 31 | @include appearance( button ); 32 | @include border-radius( 50% ); 33 | color: $button-border; 34 | box-shadow: $button-shadow; 35 | } 36 | .k-switch-label-on, 37 | .km-switch-label-on { 38 | color: $primary-button-bg; 39 | } 40 | 41 | .k-switch-on .k-switch-handle, 42 | .km-switch-on .km-switch-handle { 43 | @include appearance( primary-button ); 44 | } 45 | 46 | } -------------------------------------------------------------------------------- /scss/tabstrip.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "tabstrip/layout"; 11 | @import "tabstrip/theme"; -------------------------------------------------------------------------------- /scss/tabstrip/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/tabstrip/layout"; -------------------------------------------------------------------------------- /scss/tabstrip/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("tabstrip/theme") { 2 | 3 | .k-tabstrip { 4 | 5 | .k-tabstrip-items { 6 | border-color: $tab-item-border; 7 | } 8 | 9 | .k-item { 10 | color: $tab-item-text; 11 | } 12 | .k-item:hover, 13 | .k-item.k-state-hover { 14 | color: $tab-item-hovered-text; 15 | border-color: $tab-item-hovered-border; 16 | } 17 | .k-item.k-state-active { 18 | color: $tab-item-selected-text; 19 | background-color: $tab-item-selected-bg; 20 | border-color: $tab-item-selected-border; 21 | } 22 | } 23 | 24 | 25 | // Tabstrip variants 26 | .k-tabstrip-top { 27 | 28 | .k-item.k-state-hover, 29 | .k-item.k-state-active { 30 | border-bottom-color: transparent; 31 | } 32 | } 33 | .k-tabstrip-bottom { 34 | 35 | .k-item.k-state-hover, 36 | .k-item.k-state-active { 37 | border-top-color: transparent; 38 | } 39 | } 40 | .k-tabstrip-left { 41 | 42 | .k-item.k-state-hover, 43 | .k-item.k-state-active { 44 | border-right-color: transparent; 45 | } 46 | } 47 | .k-tabstrip-right { 48 | 49 | .k-item.k-state-hover, 50 | .k-item.k-state-active { 51 | border-left-color: transparent; 52 | } 53 | } 54 | 55 | } -------------------------------------------------------------------------------- /scss/toolbar.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | 9 | 10 | // Component 11 | @import "toolbar/layout"; 12 | @import "toolbar/theme"; -------------------------------------------------------------------------------- /scss/toolbar/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/toolbar/layout"; -------------------------------------------------------------------------------- /scss/toolbar/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("toolbar/theme") { 2 | 3 | // Theme 4 | .k-toolbar { 5 | @include appearance( toolbar ); 6 | 7 | 8 | // Button normal state 9 | .k-button {} 10 | 11 | 12 | // Button hover state 13 | .k-button:hover, 14 | .k-button.k-state-hover {} 15 | 16 | 17 | // Button focus state 18 | .k-button:focus, 19 | .k-button.k-state-focused {} 20 | 21 | // Button pressed state 22 | .k-button:active, 23 | .k-button.k-state-active {} 24 | 25 | } 26 | 27 | 28 | // Overflow container 29 | .k-overflow-container {} 30 | 31 | } -------------------------------------------------------------------------------- /scss/tooltip.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "tooltip/layout"; 11 | @import "tooltip/theme"; -------------------------------------------------------------------------------- /scss/tooltip/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/tooltip/layout"; -------------------------------------------------------------------------------- /scss/tooltip/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("tooltip/theme") { 2 | 3 | .k-tooltip { 4 | font-size: $tooltip-font-size; 5 | color: contrast-wcag($tooltip-bg); 6 | background-color: $tooltip-bg; 7 | @include border-radius($border-radius); 8 | } 9 | 10 | .k-tooltip-closable { 11 | padding: $padding-y $padding-x; 12 | } 13 | 14 | 15 | .k-callout-n { border-bottom-color: $tooltip-bg; } 16 | .k-callout-e { border-left-color: $tooltip-bg; } 17 | .k-callout-s { border-top-color: $tooltip-bg; } 18 | .k-callout-w { border-right-color: $tooltip-bg; } 19 | 20 | } -------------------------------------------------------------------------------- /scss/treelist.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "grid"; 8 | 9 | 10 | // Component 11 | @import "treelist/layout"; 12 | // @import "treelist/theme"; -------------------------------------------------------------------------------- /scss/treelist/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/treelist/layout"; -------------------------------------------------------------------------------- /scss/treelist/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("treelist/theme") { 2 | 3 | // Theme 4 | .k-treelist {} 5 | 6 | } -------------------------------------------------------------------------------- /scss/treeview.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "treeview/layout"; 11 | @import "treeview/theme"; -------------------------------------------------------------------------------- /scss/treeview/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/treeview/layout"; -------------------------------------------------------------------------------- /scss/treeview/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("treeview/theme") { 2 | 3 | // Appearance 4 | .k-treeview { 5 | padding: 2px; 6 | 7 | .k-top, 8 | .k-mid, 9 | .k-bot { 10 | padding-top: 2px; 11 | padding-bottom: 2px; 12 | } 13 | 14 | // Link 15 | .k-in { 16 | @include border-radius( $border-radius ); 17 | padding: $button-padding-y; 18 | transition: $transition; 19 | } 20 | .k-in.k-state-hover { 21 | @include appearance( hovered-node ); 22 | } 23 | .k-in.k-state-selected { 24 | @include appearance( selected-node ); 25 | } 26 | .k-in.k-state-focused { 27 | box-shadow: 0 0 0 2px $node-border; 28 | z-index: 1; 29 | } 30 | .k-in.k-state-selected.k-state-focused { 31 | box-shadow: 0 0 0 2px rgba( $node-selected-border, .5 ); 32 | } 33 | 34 | } 35 | 36 | } -------------------------------------------------------------------------------- /scss/upload.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "upload/layout"; 11 | @import "upload/theme"; -------------------------------------------------------------------------------- /scss/upload/_layout.scss: -------------------------------------------------------------------------------- 1 | $upload-dropzone-status-icon-spacing: $padding-y !default; 2 | $upload-status-spacing: 0 !default; 3 | $upload-file-name-spacing: 0 !default; 4 | $upload-invalid-icon-spacing: $padding-x-sm / 2 !default; 5 | 6 | @import "~@progress/kendo-theme-default/scss/upload/layout"; -------------------------------------------------------------------------------- /scss/upload/_theme.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/upload/theme"; -------------------------------------------------------------------------------- /scss/validator.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "tooltip"; 8 | 9 | 10 | // Component 11 | @import "validator/layout"; 12 | @import "validator/theme"; -------------------------------------------------------------------------------- /scss/validator/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/validator/layout"; -------------------------------------------------------------------------------- /scss/validator/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("validator/theme") { 2 | 3 | .k-tooltip-validation { 4 | border-color: $notification-warning-border; 5 | color: $notification-warning-text; 6 | background-color: $notification-warning-bg; 7 | } 8 | 9 | } -------------------------------------------------------------------------------- /scss/window.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | @import "action-buttons"; 9 | @import "edit-form"; 10 | 11 | 12 | // Component 13 | @import "window/layout"; 14 | @import "window/theme"; -------------------------------------------------------------------------------- /scss/window/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "~@progress/kendo-theme-default/scss/window/layout"; -------------------------------------------------------------------------------- /scss/window/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("window/theme") { 2 | 3 | .k-window { 4 | @include border-radius(); 5 | border-color: $window-border; 6 | color: $window-text; 7 | background-color: $window-bg; 8 | } 9 | 10 | // Titlebar 11 | .k-window-titlebar { 12 | border-color: $window-titlebar-border; 13 | color: $window-titlebar-text; 14 | background-color: $window-titlebar-bg; 15 | } 16 | 17 | // Window actions 18 | .k-window-actions { 19 | margin-top: -$window-titlebar-padding-y; 20 | margin-bottom: -$window-titlebar-padding-y; 21 | } 22 | .k-window-action { 23 | margin: 0 0 0 ( $spacer / 2 ); 24 | padding: $window-titlebar-padding-y $window-titlebar-padding-x; 25 | width: 1em; 26 | height: 1em; 27 | border-width: 0; 28 | opacity: .5; 29 | } 30 | .k-window-action:hover { 31 | opacity: .75; 32 | } 33 | .k-button.k-window-action { 34 | &::before, 35 | &::after { 36 | display: none; 37 | } 38 | } 39 | 40 | // Content 41 | .k-window-content { 42 | border-color: inherit; 43 | background: none; 44 | } 45 | 46 | } 47 | 48 | 49 | 50 | 51 | @include exports("popup-edit-form/layout") { 52 | 53 | .k-popup-edit-form .k-edit-buttons { 54 | border-color: $window-titlebar-border; 55 | } 56 | 57 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@progress/kendo-theme-default/webpack.config.js'); 2 | --------------------------------------------------------------------------------