├── .config └── karma.conf.js ├── .editorconfig ├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .sassdocrc ├── CODEOWNERS.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── build ├── all.js ├── customization.md.hbs ├── data-uri.template ├── embed-assets.js ├── file-to-sass.js ├── sassdoc-theme.js ├── twbs-compat.js └── twbs-compat.scss ├── docs ├── _meta.yml ├── customization.md └── index.md ├── examples └── react │ ├── index.html │ ├── package.json │ ├── src │ └── index.js │ └── webpack.config.js ├── package.json ├── sass-lint.yml ├── 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 ├── 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 │ └── font │ │ ├── WebComponentsIcons.scss │ │ └── WebComponentsIcons.woff ├── 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 ├── mixins │ ├── _appearance.scss │ ├── _blend-modes.scss │ ├── _border-radius.scss │ ├── _box-shadow.scss │ ├── _button-size.scss │ ├── _button.scss │ ├── _colors.scss │ ├── _decoration.scss │ ├── _disabled.scss │ ├── _gradients.scss │ ├── _hide-scrollbar.scss │ ├── _input.scss │ ├── _node.scss │ ├── _widget.scss │ ├── core │ │ ├── _data-uri.scss │ │ ├── _import-once.scss │ │ ├── _math.scss │ │ └── _placeholder-selectors.scss │ └── vendor │ │ └── color-helpers │ │ ├── _contrast.scss │ │ └── _math.scss ├── multiselect.scss ├── multiselect │ ├── _layout.scss │ └── _theme.scss ├── no-flexbox.scss ├── notification.scss ├── notification │ ├── _layout.scss │ └── _theme.scss ├── numerictextbox.scss ├── numerictextbox │ ├── _layout.scss │ └── _theme.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 │ └── images │ │ ├── indeterminate.gif │ │ └── indeterminate.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 ├── scrollview.scss ├── scrollview │ ├── _layout.scss │ └── _theme.scss ├── slider.scss ├── slider │ ├── _layout.scss │ ├── _theme.scss │ └── images │ │ ├── slider-h.gif │ │ ├── slider-h.scss │ │ ├── slider-v.gif │ │ └── 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 ├── tests ├── button-qunit.js ├── data │ └── metrics.js ├── fixtures │ ├── button.html │ └── icons.html └── lib │ └── helpers.js ├── third-party.md └── webpack.config.js /.config/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | config.set({ 3 | 4 | // base path that will be used to resolve all patterns (eg. files, exclude) 5 | basePath: './../', 6 | 7 | 8 | // frameworks to use 9 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 10 | frameworks: ["qunit"], 11 | 12 | 13 | // list of files / patterns to load in the browser 14 | files: [ 15 | "node_modules/jquery/dist/jquery.js", 16 | "tests/lib/helpers.js", 17 | "dist/all.css", 18 | "tests/fixtures/**/*.html", 19 | "tests/data/metrics.js", 20 | "tests/**/*-qunit.js" 21 | ], 22 | 23 | 24 | // list of files to exclude 25 | exclude: [ 26 | ], 27 | 28 | 29 | // preprocess matching files before serving them to the browser 30 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 31 | preprocessors: { 32 | 'tests/fixtures/**/*.html': [] 33 | // 'tests/**/.html': ["html2js"] 34 | }, 35 | 36 | 37 | // test results reporter to use 38 | // possible values: 'dots', 'progress' 39 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 40 | reporters: ['progress'], 41 | 42 | 43 | // web server port 44 | port: 2107, 45 | 46 | 47 | // enable / disable colors in the output (reporters and logs) 48 | colors: true, 49 | 50 | 51 | // level of logging 52 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 53 | logLevel: config.LOG_INFO, 54 | 55 | 56 | // enable / disable watching file and executing tests whenever any file changes 57 | autoWatch: true, 58 | 59 | 60 | // start these browsers 61 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 62 | browsers: ['Chrome'/*, 'PhantomJS'*/], 63 | 64 | 65 | // Continuous Integration mode 66 | // if true, Karma captures browsers, runs the tests and exits 67 | singleRun: false, 68 | 69 | // Concurrency level 70 | // how many browser should be started simultaneous 71 | concurrency: Infinity, 72 | 73 | 74 | 75 | 76 | // client configuration 77 | client: { 78 | clearContext: false, 79 | qunit: { 80 | showUI: false 81 | } 82 | } 83 | }) 84 | } 85 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # what's this? 2 | # - http://editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | max_line_length = off 11 | 12 | [*.scss] 13 | indent_style = space 14 | indent_size = 4 15 | 16 | [{package.json,.travis.yml}] 17 | indent_style = space 18 | indent_size = 2 19 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | /dist.* 4 | npm-debug.log 5 | examples/**/build/ 6 | .tmp/ 7 | yarn.lock 8 | build/custom.js 9 | .vscode/ 10 | tests/**/*.js 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.tgz 2 | .tmp/ 3 | .travis.yml 4 | dist/*.* 5 | !dist/all.css 6 | examples 7 | sass-lint.yml 8 | tests 9 | -------------------------------------------------------------------------------- /.sassdocrc: -------------------------------------------------------------------------------- 1 | { 2 | "dest": ".tmp", 3 | "theme": "build/sassdoc-theme.js", 4 | "meta": { 5 | "name": "default", 6 | "friendlyName": "Default", 7 | }, 8 | "groups": { 9 | "charts": "Charts", 10 | "undefined": "Common" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /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 Default Theme 4 | 5 | The Kendo UI Default Theme is a SCSS-based theme for the Kendo UI components. 6 | 7 | * [License](#license) 8 | * [Basic Usage](#basic-usage) 9 | * [Customization](#customization) 10 | * [Development](#development) 11 | * [Embedding Resources](#embedding-resources) 12 | * [Documenting Variables](#documenting-variables) 13 | 14 | ## License 15 | 16 | This package is part of the following suites: 17 | 18 | * [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/) 19 | * [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) 20 | * [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc) 21 | * [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui) 22 | 23 | All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui. 24 | 25 | 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). 26 | 27 | ## Basic Usage 28 | 29 | For more information on how to implement the Default theme in your project, refer to the following articles: 30 | 31 | * [Using the Default Theme in Angular Projects](http://www.telerik.com/kendo-angular-ui/components/styling/) 32 | * [Using the Default Theme in jQuery Projects](http://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) 33 | 34 | ## Customization 35 | 36 | To customize the Default Theme in one swoop, use the colors which are defined in the [`scss/_variables.scss`](scss/_variables.scss) file. Any change you make to the content of this file is propagated to every component. 37 | 38 | To style a specific component, apply the variables which are used in its specific `.scss` file. 39 | 40 | After you build the theme by running the `npm run build` command, the complete theme that you can use in your project will be available in the `dist/all.css` file. 41 | 42 | ## Development 43 | 44 | The styles are split into components and the dependencies are managed by the [`import-once`](scss/mixins/core/_import-once.scss) mixin. When you configure the styles, define them within an `import-once` block. In this way, when required from multiple files, they are bundled once. 45 | 46 | During development, the SCSS files are linted on every `commit` and built on every `push` command. To test the theme package against a component, link the theme in the components package. 47 | 48 | Browser-specific properties are generated at build-time through the [PostCSS autoprefixer](https://github.com/postcss/autoprefixer). 49 | 50 | ### Embedding Resources 51 | 52 | The embedding of resources, such as images or fonts, avoids hosting-related issues when your project consumes the theme. For more details, refer to [issue #41](https://github.com/telerik/kendo-theme-default/issues/41#issuecomment-258472183). 53 | 54 | To update the embedded resources in your project: 55 | 56 | 1. Run the `npm run embed-assets` task. As a result, the task generates a file with the same name, which registers a Base64-encoded version in the `$data-uris` SCSS map. For example, the `foo.woff` font file will receive a `foo.scss` file, which can later be imported through `@import './font/foo';`. 57 | 1. Inline the Base64 version through `map-get( $data-uris, 'WebComponentsIcons.woff' )`. 58 | 59 | ### Documenting Variables 60 | 61 | The available variables for customizing the Default theme are listed in the article on [Default variables](https://github.com/telerik/kendo-theme-default/blob/develop/docs/customization.md). The file is generated from the SCSS source files by running the `npm run api` command. 62 | 63 | To document a variable, use triple-slash comments (`///`) before its definition. 64 | 65 | /// Variable description 66 | $foo: 42 !default; 67 | 68 | To group variables, use the `@group` directive. 69 | 70 | /// Variable description 71 | /// @group random 72 | $foo: 42 !default; 73 | 74 | /// Another variable description 75 | /// @group random 76 | $bar: 1024 !default; 77 | 78 | To change the layout or the front meter of the generated help topic, change the [`build/customization.md.hbs`](/build/customization.md.hbs) source file. 79 | 80 | *Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.* 81 | 82 | *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.* 83 | -------------------------------------------------------------------------------- /build/all.js: -------------------------------------------------------------------------------- 1 | // entry point for webpack 2 | require("./../scss/all.scss"); -------------------------------------------------------------------------------- /build/customization.md.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Customization 3 | description: "Refer to the list of the Kendo UI {{ meta.friendlyName }} theme variables available for customization." 4 | slug: variables_kendotheme{{ meta.name }} 5 | position: 9 6 | --- 7 | 8 | # Customization 9 | 10 | The following table lists the available variables for customizing the {{ meta.friendlyName }} theme. 11 | 12 | 27 | 28 | ## Variables 29 | 30 | {{#each variable}} 31 | 32 | ### {{ title }} 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | {{#each variables}} 46 | 47 | 48 | 52 | 53 | 54 | {{/each}} 55 |
NameDefault valueDescription
${{context.name}} 49 | {{# if isColor }}{{/if}} 50 | {{ context.value }} 51 | {{{ formatText description }}}
56 | 57 | {{/each}} 58 | 59 | ## Mixins 60 | 61 | {{#each mixin}} 62 | ### `{{ context.name }}` 63 | {{ description }} 64 | 65 | {{#if parameter}} 66 | #### Parameters 67 | {{#each parameter}} 68 | - {{ name }} : `{{ type }}` - {{ description }} 69 | {{/each}} 70 | {{/if}} 71 | 72 | {{/each}} 73 | 74 | ## Suggested Links 75 | 76 | * [Styling Overview]({% slug themesandstyles %}) 77 | * [Web Font Icons]({% slug icons %}) 78 | * [Preview of the Themed Components](../) 79 | -------------------------------------------------------------------------------- /build/data-uri.template: -------------------------------------------------------------------------------- 1 | @import '../../mixins'; 2 | 3 | @include exports('') { 4 | @include register-data-uri('', 'data:;base64,') 5 | } 6 | -------------------------------------------------------------------------------- /build/embed-assets.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/node 2 | 3 | var glob = require('glob'); 4 | var exec = require('child_process').exec; 5 | var path = require('path'); 6 | 7 | glob('scss/**/*.{png,gif,woff}', function(err, files) { 8 | if (err) { 9 | console.error(err); 10 | } else { 11 | files.forEach(function(filename) { 12 | console.log('converting asset to data URI:', filename); 13 | exec([ 14 | 'node', 15 | path.join(__dirname, 'file-to-sass.js'), 16 | filename 17 | ].join(' '), function(err, stdout, stderr) { 18 | if (err) { 19 | console.error(stderr) 20 | process.exit(1); 21 | } 22 | }); 23 | }); 24 | } 25 | }); -------------------------------------------------------------------------------- /build/file-to-sass.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/node 2 | 3 | var mime = require('mime'); 4 | var fs = require('fs'); 5 | var path = require('path'); 6 | 7 | var filename = process.argv[2]; 8 | var basename = path.basename(filename); 9 | var mimeType = mime.lookup(filename); 10 | var base64 = fs.readFileSync(filename).toString('base64'); 11 | var template = fs.readFileSync(path.join(__dirname, 'data-uri.template'), 'utf8'); 12 | 13 | var output = 14 | template 15 | .replace(//g, basename) 16 | .replace(//g, mimeType) 17 | .replace(//g, base64); 18 | 19 | var outputFilename = 20 | path.join( 21 | path.dirname(filename), 22 | path.basename(filename, path.extname(filename)) + '.scss' 23 | ); 24 | 25 | fs.writeFileSync(outputFilename, output) -------------------------------------------------------------------------------- /build/sassdoc-theme.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const hbs = require('handlebars'); 6 | const read = (src) => 7 | fs.readFileSync(path.join(__dirname, src), { encoding: 'utf-8' }); 8 | 9 | hbs.registerHelper('formatText', (str) => 10 | str.replace(/\n(.)/g, '
\n$1')); 11 | 12 | const compile = (src) => 13 | hbs.compile(read(src), { noEscape: true }); 14 | const template = compile('customization.md.hbs'); 15 | 16 | module.exports = function(dest, context) { 17 | const capitalize = (str) => str[0].toUpperCase() + str.substring(1); 18 | const isColor = /^#/i; 19 | const data = context.data 20 | .filter((item) => item.access == 'public') 21 | .reduce((acc, item) => { 22 | acc[item.context.type].push(item); 23 | return acc; 24 | }, { 25 | mixin: [], 26 | variable: [] 27 | }); 28 | 29 | // honor @group annotations 30 | data.variable = data.variable.reduce((acc, item) => { 31 | const groupId = item.group[0]; 32 | item.isColor = isColor.test(item.context.value); 33 | acc[groupId] = acc[groupId] || []; 34 | acc[groupId].push(item); 35 | return acc; 36 | }, {}); 37 | 38 | // add titles to groups 39 | data.variable = Object.keys(data.variable).map((groupId) => ({ 40 | id: groupId === "undefined" ? null : groupId, 41 | title: context.groups[groupId] || capitalize(groupId), 42 | variables: data.variable[groupId] 43 | })); 44 | 45 | // sort groups by title, moving common group to the top 46 | data.variable.sort((a, b) => { 47 | if (!a.id) return -1; 48 | if (!b.id) return 1; 49 | 50 | return a.title === b.title ? 0 : 51 | a.title < b.title ? -1 : 1; 52 | }); 53 | 54 | data.meta = context.meta; 55 | 56 | return new Promise(function(done, error) { 57 | let output = template(data); 58 | output = output.replace(/\r?\n/g, '\n'); 59 | fs.writeFile(path.join('docs', 'customization.md'), output); 60 | }); 61 | }; -------------------------------------------------------------------------------- /build/twbs-compat.js: -------------------------------------------------------------------------------- 1 | // entry point for webpack 2 | require("./twbs-compat.scss"); -------------------------------------------------------------------------------- /build/twbs-compat.scss: -------------------------------------------------------------------------------- 1 | @import "~bootstrap/scss/functions"; 2 | @import "~bootstrap/scss/variables"; 3 | @import "./../scss/all"; 4 | -------------------------------------------------------------------------------- /docs/_meta.yml: -------------------------------------------------------------------------------- 1 | title: Default Theme 2 | position: 999 3 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview 3 | description: "Preview and install the Kendo UI Default theme and style the Kendo UI components in Angular and React projects." 4 | slug: preview_kendothemedefault 5 | position: 1 6 | --- 7 | 8 | # Overview 9 | 10 | The Kendo UI Default theme is available through the @progress/kendo-theme-default NPM module. 11 | 12 | ## Installation 13 | 14 | 1. Download and install the package of the Default theme. 15 | 16 | ```bash 17 | npm install --save @progress/kendo-theme-default 18 | ``` 19 | 20 | 1. Apply the Default 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 Default theme. 25 | 26 | {% theme_preview theme:default %} 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 | -------------------------------------------------------------------------------- /examples/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Webpack CSS example 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "description": "A theme test application with Kendo UI for React", 4 | "main": "src/index.js", 5 | "scripts": { 6 | "build": "webpack", 7 | "lint": "standard", 8 | "test": "standard && webpack --bail" 9 | }, 10 | "dependencies": { 11 | "@telerik/kendo-common-tasks": "^1.8.0", 12 | "@telerik/kendo-react-inputs": "^0.1.0", 13 | "@telerik/kendo-react-dialog": "^1.0.0", 14 | "@progress/kendo-theme-default": "^1.0.0", 15 | "autoprefixer": "^6.3.6", 16 | "babel-core": "^6.7.6", 17 | "babel-loader": "^6.2.4", 18 | "babel-preset-es2015": "^6.6.0", 19 | "babel-preset-react": "^6.1.4", 20 | "css-loader": "^0.23.0", 21 | "extract-text-webpack-plugin": "^1.0.1", 22 | "node-sass": "^3.4.1", 23 | "postcss-loader": "^0.9.1", 24 | "react": "^15.0.1", 25 | "react-dom": "^15.0.1", 26 | "react-addons-transition-group": "^15.0.1", 27 | "sass-loader": "^3.2.0", 28 | "style-loader": "^0.13.1", 29 | "webpack": "^1.12.14" 30 | }, 31 | "eslintConfig": { 32 | "parser": "babel-eslint", 33 | "extends": "airbnb", 34 | "globals": { 35 | "__DEV__": true 36 | }, 37 | "env": { 38 | "browser": true 39 | }, 40 | "rules": { 41 | "no-confusing-arrow": 0, 42 | "react/jsx-quotes": 0, 43 | "jsx-quotes": [ 44 | 2, 45 | "prefer-double" 46 | ] 47 | } 48 | }, 49 | "author": "", 50 | "license": "MIT" 51 | } 52 | -------------------------------------------------------------------------------- /examples/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | import { Slider } from '@telerik/kendo-react-inputs'; 5 | import { Dialog } from '@telerik/kendo-react-dialog'; 6 | import { Button } from '@telerik/kendo-react-buttons'; 7 | import '@progress/kendo-theme-default/styles/slider/main.scss'; 8 | import '@progress/kendo-theme-default/styles/dialog/main.scss'; 9 | 10 | class Container extends React.Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | dialogVisible: true, 15 | value: 4 16 | }; 17 | this.valueChangeHandler = this.onValueChange.bind(this); 18 | this.dialogActionHandler = this.onDialogAction.bind(this); 19 | } 20 | 21 | updateState(newState) { 22 | this.setState(Object.assign({}, this.state, newState)); 23 | } 24 | 25 | onValueChange(e) { 26 | this.updateState({ value: e.value }); 27 | } 28 | 29 | onDialogAction(e) { 30 | this.updateState({ dialogVisible: false }); 31 | } 32 | 33 | render() { 34 | const dialog = ( 35 | 36 | 43 | 44 | ); 45 | 46 | return ( 47 |
48 |

Sample Kendo UI for React Application

49 | 50 | 53 | 54 | { this.state.dialogVisible ? dialog : null } 55 |
56 | ); 57 | } 58 | } 59 | 60 | ReactDOM.render(, document.querySelector('#main')) 61 | -------------------------------------------------------------------------------- /examples/react/webpack.config.js: -------------------------------------------------------------------------------- 1 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 2 | const path = require('path') 3 | const kendoTasks = require('@telerik/kendo-common-tasks'); 4 | 5 | const sassLoaders = [ 6 | 'css-loader', 7 | 'postcss-loader', 8 | 'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './src') 9 | ] 10 | 11 | const config = kendoTasks.webpackThemeConfig({ 12 | entry: { 13 | app: ['./src/index'] 14 | }, 15 | module: { 16 | loaders: [ 17 | { 18 | test: /\.jsx?$/, 19 | exclude: /node_modules/, 20 | loader: 'babel', 21 | query: { 22 | presets: ['es2015', 'react'] 23 | } 24 | }, 25 | { 26 | test: /\.sass$/, 27 | loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) 28 | } 29 | ] 30 | }, 31 | output: { 32 | filename: '[name].js', 33 | path: path.join(__dirname, './build'), 34 | publicPath: '/build' 35 | }, 36 | plugins: [ 37 | new ExtractTextPlugin('[name].css') 38 | ], 39 | resolve: { 40 | extensions: ['', '.js', '.sass'], 41 | root: [path.join(__dirname, './src')] 42 | } 43 | }) 44 | 45 | module.exports = config 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@progress/kendo-theme-default", 3 | "description": "SASS resources for the default Kendo UI theme", 4 | "version": "2.0.0", 5 | "author": "Progress", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "Kendo UI", 9 | "Theme" 10 | ], 11 | "main": "dist/all.css", 12 | "sass": "scss/all.scss", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/telerik/kendo-theme-default.git" 16 | }, 17 | "release": { 18 | "debug": false, 19 | "branchTags": { 20 | "develop": "dev" 21 | }, 22 | "fallbackTags": { 23 | "dev": "latest" 24 | }, 25 | "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits", 26 | "generateNotes": "@telerik/semantic-prerelease/generateNotes", 27 | "getLastRelease": "@telerik/semantic-prerelease/getLastRelease", 28 | "verifyConditions": "@telerik/semantic-prerelease/verifyConditions", 29 | "verifyRelease": "@telerik/semantic-prerelease/verifyRelease" 30 | }, 31 | "scripts": { 32 | "lint": "sass-lint -v -c ./sass-lint.yml", 33 | "api": "sassdoc ./scss/", 34 | "api-check": "npm run api && git diff --exit-code --quiet -- docs/ || (echo -e '\\033[0;31mERROR: API docs are out of date' && exit 1)", 35 | "start": "webpack-dev-server", 36 | "build": "webpack --optimize-minimize --bail", 37 | "watch": "webpack --watch", 38 | "embed-assets": "node build/embed-assets.js", 39 | "test": "npm run lint && npm run build && npm run api-check && npm run twbs-compat && npm run karma-single", 40 | "twbs-compat": "webpack --env.twbs-compat --bail", 41 | "semantic-release": "semantic-release pre && semantic-prerelease publish && semantic-release post", 42 | "watch-test": "npm run karma-watch", 43 | "karma-watch": "karma start --auto-watch --no-single-run", 44 | "karma-single": "karma start --no-auto-watch --single-run --browsers ChromeHeadless" 45 | }, 46 | "config": { 47 | "commitizen": { 48 | "path": "./node_modules/cz-conventional-changelog" 49 | }, 50 | "ghooks": { 51 | "pre-commit": "npm run lint", 52 | "pre-push": "npm run test", 53 | "commit-msg": "validate-commit-msg" 54 | }, 55 | "validate-commit-msg": { 56 | "types": [ 57 | "feat", 58 | "fix", 59 | "docs", 60 | "style", 61 | "refactor", 62 | "perf", 63 | "test", 64 | "chore", 65 | "revert" 66 | ], 67 | "warnOnFail": false, 68 | "maxSubjectLength": 100 69 | } 70 | }, 71 | "devDependencies": { 72 | "@telerik/kendo-common-tasks": "^3.0.0", 73 | "@telerik/semantic-prerelease": "^1.0.0", 74 | "bootstrap": "4.0.0", 75 | "cz-conventional-changelog": "^1.1.5", 76 | "editorconfig-tools": "^0.1.1", 77 | "ghooks": "^1.0.3", 78 | "glob": "^7.0.5", 79 | "handlebars": "^4.0.10", 80 | "jquery": "^3.3.1", 81 | "karma": "^1.7.1", 82 | "karma-chrome-launcher": "^2.2.0", 83 | "karma-qunit": "^1.2.1", 84 | "mime": "^1.3.4", 85 | "qunitjs": "^2.4.1", 86 | "sass-lint": "^1.7.0", 87 | "sassdoc": "^2.1.20", 88 | "semantic-release": "^6.3.6", 89 | "validate-commit-msg": "^1.1.1", 90 | "webpack": "^1.13.1" 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /sass-lint.yml: -------------------------------------------------------------------------------- 1 | options: 2 | verbose: true 3 | 4 | files: 5 | include: 'scss/**/*.scss' 6 | ignore: 7 | - 'scss/mixins/**/*.scss' 8 | 9 | rules: 10 | no-ids: 2 11 | property-sort-order: 0 12 | mixins-before-declarations: 0 13 | 14 | nesting-depth: 15 | - 1 16 | - max-depth: 4 17 | 18 | indentation: 19 | - 2 20 | - size: 4 21 | 22 | force-element-nesting: 0 23 | force-attribute-nesting: 0 24 | force-pseudo-nesting: 0 25 | 26 | no-vendor-prefixes: 0 27 | 28 | no-css-comments: 0 29 | no-color-keywords: 0 30 | no-color-literals: 0 31 | hex-length: 0 32 | no-misspelled-properties: 0 33 | no-trailing-whitespace: 2 34 | no-qualifying-elements: 0 35 | 36 | pseudo-element: 2 37 | 38 | final-newline: 0 39 | empty-args: 0 40 | empty-line-between-blocks: 0 41 | placeholder-in-extend: 0 42 | quotes: 0 43 | space-between-parens: 0 44 | shorthand-values: 0 45 | no-empty-rulesets: 0 46 | -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Core 2 | @import "mixins/core/import-once"; 3 | @import "mixins/core/placeholder-selectors"; 4 | @import "mixins/core/data-uri"; 5 | @import "mixins/core/math"; 6 | 7 | 8 | // Utils 9 | @import "mixins/blend-modes"; 10 | @import "mixins/border-radius"; 11 | @import "mixins/box-shadow"; 12 | @import "mixins/button-size"; 13 | @import "mixins/colors"; 14 | @import "mixins/decoration"; 15 | @import "mixins/disabled"; 16 | @import "mixins/gradients"; 17 | @import "mixins/hide-scrollbar"; 18 | 19 | 20 | // Appearance 21 | @import "mixins/appearance"; 22 | @import "mixins/widget"; 23 | @import "mixins/button"; 24 | @import "mixins/input"; 25 | @import "mixins/node"; 26 | -------------------------------------------------------------------------------- /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"; 13 | -------------------------------------------------------------------------------- /scss/action-buttons/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports('action-buttons/layout') { 2 | 3 | .k-action-buttons { 4 | border-width: 1px 0 0; 5 | border-style: solid; 6 | border-color: inherit; 7 | display: flex; 8 | flex-direction: row; 9 | clear: both; 10 | 11 | .k-button { 12 | @include border-radius( 0 ); 13 | padding: ($window-inner-padding-x * .75) $window-inner-padding-x; 14 | border-width: 0; 15 | border-color: inherit; 16 | color: inherit; 17 | background: none; 18 | flex: 1; 19 | } 20 | .k-button + .k-button { 21 | border-left-width: 1px; 22 | } 23 | 24 | .k-rtl &, 25 | [dir="rtl"] & { 26 | .k-button + .k-button { 27 | border-left-width: 0; 28 | border-right-width: 1px; 29 | border-right-style: solid; 30 | margin-left: 0; 31 | } 32 | } 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /scss/action-buttons/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports('action-buttons/theme') { 2 | 3 | .k-action-buttons { 4 | border-color: $popup-border; 5 | 6 | .k-button { 7 | color: inherit; 8 | 9 | &:hover, 10 | &.k-state-hover { 11 | @include appearance( hovered-button ); 12 | border-color: inherit; 13 | } 14 | 15 | &:focus, 16 | &.k-state-focused { 17 | box-shadow: $focused-shadow; 18 | } 19 | 20 | &:active, 21 | &.k-state-active { 22 | @include appearance( pressed-button ); 23 | border-color: inherit; 24 | } 25 | } 26 | 27 | .k-primary { 28 | color: $accent; 29 | 30 | &:hover, 31 | &.k-state-hvoer { 32 | @include appearance( hovered-primary-button ); 33 | border-color: inherit; 34 | 35 | &:focus, 36 | &.k-state-focused { 37 | box-shadow: $focused-shadow; 38 | } 39 | } 40 | 41 | &:focus, 42 | &.k-state-focused { 43 | box-shadow: inset 0 0 0 2px rgba( $button-hovered-bg, .3); 44 | } 45 | 46 | &:active, 47 | &.k-state-active { 48 | @include appearance( pressed-primary-button ); 49 | border-color: inherit; 50 | } 51 | } 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /scss/all.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | // Dependencies 5 | @import "common/all"; 6 | @import "ripple"; 7 | @import "popup"; 8 | 9 | 10 | // Data management 11 | @import "pager"; 12 | @import "grid"; 13 | @import "spreadsheet"; 14 | @import "pivotgrid"; 15 | @import "treelist"; 16 | @import "scrollview"; 17 | @import "listview"; 18 | 19 | 20 | // Editors 21 | @import "autocomplete"; 22 | @import "colorpicker"; 23 | @import "combobox"; 24 | @import "datetime"; 25 | @import "dropdownlist"; 26 | @import "editor"; 27 | @import "input"; 28 | @import "multiselect"; 29 | @import "numerictextbox"; 30 | @import "slider"; 31 | @import "upload"; 32 | @import "validator"; 33 | @import "switch"; 34 | @import "maskedtextbox"; 35 | @import "listbox"; 36 | 37 | 38 | // Dataviz 39 | @import "dataviz"; 40 | @import "map"; 41 | 42 | // Barcodes 43 | @import "barcode"; 44 | @import "qrcode"; 45 | 46 | // Scheduling 47 | @import "calendar"; 48 | @import "gantt"; 49 | @import "scheduler"; 50 | 51 | 52 | // Media 53 | @import "mediaplayer"; 54 | 55 | 56 | // Layout 57 | @import "dialog"; 58 | @import "notification"; 59 | @import "responsivepanel"; 60 | @import "splitter"; 61 | @import "tooltip"; 62 | @import "window"; 63 | 64 | 65 | // Navigation 66 | @import "button"; 67 | @import "menu"; 68 | @import "panelbar"; 69 | @import "tabstrip"; 70 | @import "toolbar"; 71 | @import "treeview"; 72 | 73 | 74 | // Interactivity & UX 75 | @import "progressbar"; 76 | @import "scroller"; 77 | -------------------------------------------------------------------------------- /scss/autocomplete.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | // Dependencies 5 | @import "common/all"; 6 | @import 'common/forms'; 7 | 8 | 9 | // Component 10 | @import "autocomplete/layout"; 11 | @import "autocomplete/theme"; 12 | -------------------------------------------------------------------------------- /scss/autocomplete/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("autocomplete/layout") { 2 | 3 | // Layout 4 | .k-autocomplete { 5 | @include border-radius(); 6 | 7 | .k-input { 8 | padding: $input-padding-y $input-padding-x; 9 | height: $form-line-height-em; 10 | box-sizing: content-box; 11 | border: 0; 12 | outline: 0; 13 | color: inherit; 14 | background: none; 15 | font: inherit; 16 | line-height: $form-line-height; 17 | display: inline-block; 18 | flex: 1; 19 | } 20 | 21 | .k-i-close { 22 | display: none; 23 | align-self: center; 24 | } 25 | 26 | &.k-state-hover, 27 | &.k-state-focused { 28 | .k-i-close { 29 | display: flex; 30 | outline: 0; 31 | } 32 | } 33 | 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /scss/autocomplete/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("autocomplete/theme") { 2 | .k-autocomplete { 3 | @include appearance( input ); 4 | background-clip: padding-box; 5 | 6 | .k-ie11 &, 7 | .k-edge12 &, 8 | .k-edge13 & { 9 | background-clip: border-box; 10 | } 11 | 12 | &.k-state-hover { @include appearance( hovered-input ); } 13 | &.k-state-focused { 14 | @include appearance( focused-input ); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /scss/barcode.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Component 6 | @import "barcode/layout"; 7 | -------------------------------------------------------------------------------- /scss/barcode/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports('barcode/layout') { 2 | 3 | .k-barcode { 4 | display: inline-block; 5 | } 6 | 7 | } 8 | -------------------------------------------------------------------------------- /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'; 12 | -------------------------------------------------------------------------------- /scss/calendar.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "common/icons"; 8 | 9 | 10 | // Component 11 | @import "calendar/layout"; 12 | @import "calendar/theme"; 13 | -------------------------------------------------------------------------------- /scss/calendar/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports('calendar/theme') { 2 | $date-focus-shadow: $list-item-focused-shadow !default; 3 | $header-shadow: 0 1px 3px 1px rgba(black, .1) !default; 4 | 5 | .k-calendar { 6 | background-clip: padding-box; 7 | 8 | .k-ie11 &, 9 | .k-edge12 &, 10 | .k-edge13 & { 11 | background-clip: border-box; 12 | } 13 | 14 | 15 | // Header / footer 16 | .k-header { 17 | @include appearance( header ); 18 | } 19 | 20 | .k-nav-prev, 21 | .k-nav-next, 22 | .k-nav-fast { 23 | 24 | // Hover 25 | &:hover, 26 | &.k-state-hover { 27 | @include appearance( hovered-button ); 28 | } 29 | 30 | // Pressed 31 | &:active { 32 | @include appearance( pressed-button ); 33 | } 34 | } 35 | .k-footer .k-nav-today { 36 | color: $accent; 37 | } 38 | 39 | 40 | // Content 41 | .k-content {} 42 | 43 | .k-content thead { 44 | @include appearance( header ); 45 | background-color: transparent; 46 | } 47 | 48 | .k-header { 49 | border-bottom-color: $panel-border; 50 | box-shadow: $header-shadow; 51 | } 52 | 53 | .k-content td {} 54 | .k-content .k-today { 55 | color: $accent; 56 | 57 | &.k-state-selected { 58 | color: $accent-contrast; 59 | } 60 | } 61 | 62 | .k-alt { 63 | background: darken( $widget-bg, 5 ); 64 | } 65 | 66 | .k-content .k-alt { 67 | border-right-color: $widget-border; 68 | } 69 | 70 | .k-state-hover { 71 | @include appearance( hovered-node ); 72 | } 73 | 74 | .k-state-selected, 75 | .k-weekend.k-state-selected { 76 | @include appearance( selected-node ); 77 | 78 | &.k-state-hover { 79 | background-color: blend-multiply( $list-item-selected-bg, $list-item-hovered-bg ); 80 | } 81 | } 82 | 83 | .k-state-focused, 84 | .k-state-selected.k-state-focused { 85 | box-shadow: $date-focus-shadow; 86 | } 87 | 88 | // Infinite calendar 89 | .k-calendar-view { 90 | thead { 91 | @include appearance( header ); 92 | } 93 | } 94 | 95 | .k-calendar-navigation { 96 | // border underneath highlight 97 | box-shadow: inset -1px 0 $base-border; 98 | background-color: $base-bg; 99 | 100 | .k-content > ul > li:hover { 101 | color: $link-hover-text; 102 | } 103 | } 104 | 105 | .k-calendar-navigation-highlight { 106 | border-color: $base-border; 107 | background-color: $bg-color; 108 | } 109 | 110 | .k-calendar-weekdays thead { 111 | background-color: $bg-color; 112 | } 113 | 114 | &[dir='rtl'], 115 | .k-rtl & { 116 | .k-calendar-navigation { 117 | box-shadow: inset 1px 0 $base-border; 118 | } 119 | } 120 | 121 | &:not(.k-infinite) { 122 | .k-weekend { 123 | background-color: darken($widget-bg, 2.35); 124 | } 125 | 126 | .k-state-hover { 127 | background-color: $node-hovered-bg; 128 | } 129 | 130 | .k-content { 131 | .k-state-selected, 132 | .k-weekend .k-state-selected { 133 | @include appearance( selected-node ); 134 | 135 | &.k-state-hover { 136 | background-color: blend-multiply( $list-item-selected-bg, $list-item-hovered-bg ); 137 | } 138 | } 139 | } 140 | } 141 | } 142 | 143 | } 144 | -------------------------------------------------------------------------------- /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"; 13 | -------------------------------------------------------------------------------- /scss/colorpicker/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("colorpicker/theme") { 2 | 3 | .k-colorpicker { 4 | 5 | // Normal state 6 | .k-picker-wrap { 7 | @include appearance( button ); 8 | background-clip: padding-box; 9 | 10 | .k-ie11 &, 11 | .k-edge12 &, 12 | .k-edge13 & { 13 | background-clip: border-box; 14 | } 15 | } 16 | .k-select { 17 | padding: 0; 18 | width: button-inner-size(); 19 | border-width: 0; 20 | } 21 | 22 | // Hovered state 23 | .k-state-hover { 24 | @include appearance( hovered-button ); 25 | } 26 | 27 | // Selected state 28 | .k-state-active { 29 | @include appearance( pressed-button ); 30 | } 31 | 32 | // Focused state 33 | .k-state-focused { 34 | box-shadow: $button-focused-shadow; 35 | } 36 | 37 | } 38 | 39 | .k-flatcolorpicker { 40 | background-color: $base-bg; 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /scss/combobox.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 "combobox/layout"; 12 | @import "combobox/theme"; 13 | -------------------------------------------------------------------------------- /scss/combobox/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("combobox/layout") { 2 | 3 | .k-combobox { 4 | .k-dropdown-wrap { 5 | > .k-i-close { 6 | right: calc(#{$icon-size} + #{$padding-y-lg * 3}); 7 | } 8 | } 9 | 10 | .k-input {} 11 | 12 | .k-select {} 13 | 14 | &[dir='rtl'], 15 | .k-rtl & { 16 | > .k-dropdown-wrap { 17 | > .k-i-close { 18 | left: calc(#{$icon-size} + #{$padding-y-lg * 3}); 19 | right: auto; 20 | } 21 | } 22 | } 23 | } 24 | 25 | .k-combobox-clearable { 26 | .k-input { 27 | padding-right: add-two($icon-size, $padding-x); 28 | } 29 | 30 | &[dir='rtl'], 31 | .k-rtl & { 32 | .k-input { 33 | padding-left: add-two($icon-size, $padding-x); 34 | padding-right: $input-padding-x; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /scss/combobox/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("combobox/theme") { 2 | 3 | .k-combobox { 4 | 5 | // Normal state 6 | .k-dropdown-wrap { 7 | @include appearance( input ); 8 | background-clip: padding-box; 9 | 10 | .k-ie11 &, 11 | .k-edge12 &, 12 | .k-edge13 & { 13 | background-clip: border-box; 14 | } 15 | } 16 | 17 | .k-select { 18 | @include appearance( button ); 19 | padding: 0; 20 | width: button-inner-size(); 21 | border-width: 0; 22 | } 23 | 24 | // Hovered state 25 | > :hover, 26 | .k-state-hover { 27 | @include appearance( hovered-input ); 28 | 29 | .k-select { 30 | @include appearance( hovered-button ); 31 | } 32 | } 33 | 34 | // Selected state 35 | > .k-state-focused, 36 | .k-state-active { 37 | @include appearance( focused-input ); 38 | 39 | .k-select {} 40 | } 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /scss/common/_all.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "icons"; 3 | @import "animations"; 4 | @import "forms"; 5 | -------------------------------------------------------------------------------- /scss/common/font/WebComponentsIcons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-default/77efe2aa5a7bb7fb3d4a30b4cac6b87a4b12c54d/scss/common/font/WebComponentsIcons.woff -------------------------------------------------------------------------------- /scss/dataviz.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/base"; 7 | @import "popup"; 8 | 9 | 10 | // Component 11 | @import "dataviz/layout"; 12 | @import "dataviz/theme"; 13 | -------------------------------------------------------------------------------- /scss/dataviz/_theme.scss: -------------------------------------------------------------------------------- 1 | // TODO: chart variables 2 | 3 | $chart-crosshair-background: rgba(0, 0, 0, .5) !default; 4 | $chart-crosshair-shared-tooltip-color: $base-text !default; 5 | $chart-crosshair-shared-tooltip-background: $base-bg !default; 6 | $chart-crosshair-shared-tooltip-border: rgba(0, 0, 0, .08) !default; 7 | 8 | $chart-notes-background: rgba(0, 0, 0, .5) !default; 9 | $chart-notes-border: rgba(0, 0, 0, .5) !default; 10 | $chart-notes-lines: rgba(0, 0, 0, .5) !default; 11 | 12 | $error-bars-background: rgba(0, 0, 0, .5) !default; 13 | 14 | $chart-selection-marque-background: $series-a !default; 15 | $selection-border-color: rgba(0, 0, 0, .08) !default; 16 | $selection-shadow: inset 0 1px 7px rgba(0, 0, 0, .15) !default; 17 | 18 | @include exports('dataviz/charts/theme') { 19 | // Exported variables 20 | .k-var--chart-inactive { 21 | background-color: $chart-inactive; 22 | } 23 | 24 | .k-var--chart-major-lines { 25 | background-color: $chart-major-lines; 26 | } 27 | 28 | .k-var--chart-minor-lines { 29 | background-color: $chart-minor-lines; 30 | } 31 | 32 | .k-var--chart-area-opacity { 33 | opacity: $chart-area-opacity; 34 | } 35 | 36 | .k-var--chart-notes-background { 37 | background-color: $chart-notes-background; 38 | } 39 | 40 | .k-var--chart-notes-border { 41 | background-color: $chart-notes-border; 42 | } 43 | 44 | .k-var--chart-notes-lines { 45 | background-color: $chart-notes-lines; 46 | } 47 | 48 | .k-var--chart-crosshair-background { 49 | background-color: $chart-crosshair-background; 50 | } 51 | 52 | .k-var--chart-error-bars-background { 53 | background-color: $error-bars-background; 54 | } 55 | 56 | // Elements 57 | .k-chart, 58 | .k-sparkline, 59 | .k-stockchart { 60 | background-color: transparent; 61 | 62 | .k-popup { 63 | background: transparent; 64 | } 65 | } 66 | 67 | .k-chart-tooltip { 68 | @include border-radius(); 69 | color: $widget-bg; 70 | } 71 | 72 | .k-chart-tooltip-inverse { 73 | color: invert($widget-bg); 74 | } 75 | 76 | .k-chart-crosshair-tooltip, 77 | .k-chart-shared-tooltip { 78 | color: $chart-crosshair-shared-tooltip-color; 79 | background-color: $chart-crosshair-shared-tooltip-background; 80 | border-color: $chart-crosshair-shared-tooltip-border; 81 | } 82 | 83 | .k-selection { 84 | border-color: $selection-border-color; 85 | box-shadow: $selection-shadow; 86 | } 87 | 88 | .k-selection-bg { 89 | background-color: transparent; 90 | } 91 | 92 | .k-handle { 93 | cursor: e-resize; 94 | @include appearance( button ); 95 | 96 | &:hover { 97 | @include appearance( hovered-button ); 98 | } 99 | } 100 | 101 | .k-handle div { 102 | background-color: transparent; 103 | } 104 | 105 | .k-mask { 106 | background-color: $widget-bg; 107 | opacity: .8; 108 | } 109 | 110 | .k-marquee-color { 111 | background-color: $chart-selection-marque-background; 112 | } 113 | 114 | .k-marquee-color { 115 | opacity: .6; 116 | } 117 | 118 | // Navigator hint 119 | .k-navigator-hint .k-scroll { 120 | @include border-radius(); 121 | } 122 | } 123 | 124 | 125 | 126 | 127 | @include exports("dataviz/treemap/theme") { 128 | 129 | // Treemap 130 | .k-treemap { 131 | 132 | // Title 133 | .k-treemap-title { 134 | @include appearance( header ); 135 | } 136 | 137 | // Leaf 138 | .k-leaf { 139 | color: $panel-bg; 140 | } 141 | .k-leaf.k-inverse { 142 | color: $panel-text; 143 | } 144 | .k-leaf.k-state-hover { 145 | box-shadow: inset 0 0 0 3px $panel-border; 146 | } 147 | } 148 | 149 | } 150 | -------------------------------------------------------------------------------- /scss/datetime.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "common/forms"; 8 | @import "action-buttons"; 9 | @import "calendar"; 10 | @import "popup"; 11 | 12 | // Component 13 | @import "datetime/layout"; 14 | @import "datetime/theme"; 15 | -------------------------------------------------------------------------------- /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"; 13 | -------------------------------------------------------------------------------- /scss/dialog/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("dialog/layout") { 2 | 3 | .k-dialog-wrapper { 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | flex-direction: column; 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | width: 100%; 12 | height: 100%; 13 | z-index: 10001; 14 | 15 | .k-dialog { 16 | position: relative; 17 | } 18 | } 19 | 20 | .k-dialog { 21 | padding: 0; 22 | min-width: 450px; 23 | position: fixed; 24 | 25 | // Centered 26 | &.k-dialog-centered { 27 | transform: translate(-50%, -50%); 28 | top: 50%; 29 | left: 50%; 30 | } 31 | } 32 | 33 | 34 | // Titlebar 35 | .k-dialog-titlebar {} 36 | .k-dialog-title {} 37 | 38 | 39 | // Actions 40 | .k-dialog-actions {} 41 | .k-dialog-action {} 42 | 43 | 44 | // Content 45 | .k-dialog-content {} 46 | 47 | 48 | // Buttons 49 | .k-dialog-buttongroup { 50 | border-width: 1px 0 0; 51 | border-style: solid; 52 | border-color: inherit; 53 | background-color: transparent; 54 | display: flex; 55 | flex: 0 0 auto; 56 | 57 | .k-button { 58 | // sass-lint:disable no-important 59 | padding: ($window-inner-padding-x * .75) $window-inner-padding-x; 60 | width: auto !important; 61 | border-width: 0; 62 | border-color: inherit; 63 | background: none; 64 | white-space: normal; 65 | flex: 1; 66 | // sass-lint:enable no-important 67 | 68 | &::before, 69 | &::after { 70 | // center stretched button content for Safari 10 71 | content: ''; 72 | flex: 1 0 auto; 73 | } 74 | } 75 | .k-button, 76 | .k-button:first-child, 77 | .k-button:last-child, 78 | .k-group-start, 79 | .k-group-end { 80 | @include border-radius( 0 ); 81 | } 82 | .k-button + .k-button { 83 | margin: 0; 84 | border-left-width: 1px; 85 | 86 | .k-rtl &, 87 | [dir='rtl'] & { 88 | border-left-width: 0; 89 | border-right-width: 1px; 90 | } 91 | } 92 | } 93 | .k-dialog-button-layout-stretched { 94 | flex-direction: row; 95 | align-items: stretch; 96 | } 97 | 98 | } 99 | -------------------------------------------------------------------------------- /scss/dialog/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("dialog/theme") { 2 | 3 | $dialog-titlebar-border-color: inherit !default; 4 | $dialog-titlebar-bg: $accent !default; 5 | $dialog-titlebar-text: $accent-contrast !default; 6 | 7 | .k-dialog {} 8 | 9 | 10 | // Titlebar 11 | .k-dialog-titlebar { 12 | @include fill( $dialog-titlebar-text, $dialog-titlebar-bg, $dialog-titlebar-border-color ); 13 | } 14 | 15 | 16 | .k-dialog-buttongroup { 17 | 18 | .k-button { 19 | color: inherit; 20 | 21 | &:hover, 22 | &.k-state-hover { 23 | @include appearance( hovered-button ); 24 | border-color: inherit; 25 | } 26 | 27 | &:focus, 28 | &.k-state-focused { 29 | box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13); 30 | } 31 | 32 | &:active, 33 | &.k-state-active { 34 | @include appearance( pressed-button ); 35 | border-color: inherit; 36 | } 37 | } 38 | 39 | 40 | .k-primary { 41 | color: $accent; 42 | 43 | &:hover, 44 | &.k-state-hvoer { 45 | @include appearance( hovered-primary-button ); 46 | border-color: inherit; 47 | 48 | &:focus, 49 | &.k-state-focused { 50 | box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .13); 51 | } 52 | } 53 | 54 | &:focus, 55 | &.k-state-focused { 56 | box-shadow: inset 0 0 0 2px rgba( $button-hovered-bg, .3); 57 | } 58 | 59 | &:active, 60 | &.k-state-active { 61 | @include appearance( pressed-primary-button ); 62 | border-color: inherit; 63 | } 64 | } 65 | 66 | } 67 | 68 | } 69 | -------------------------------------------------------------------------------- /scss/dropdownlist.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 "dropdownlist/layout"; 12 | @import "dropdownlist/theme"; 13 | -------------------------------------------------------------------------------- /scss/dropdownlist/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("dropdownlist/layout") { 2 | 3 | .k-dropdown { 4 | 5 | .k-select { 6 | border-width: 0; 7 | } 8 | 9 | } 10 | 11 | .k-dropdown-wrap { 12 | outline: 0; 13 | 14 | > .k-input { 15 | flex: 1; 16 | } 17 | } 18 | .k-edge .k-dropdown-wrap > .k-input { 19 | min-width: 0; 20 | } 21 | 22 | .k-dropdown-operator { 23 | width: auto; 24 | 25 | .k-input { 26 | display: none; 27 | } 28 | 29 | .k-select { 30 | width: button-inner-size(); 31 | height: button-inner-size(); 32 | } 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /scss/dropdownlist/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports( "dropdownlist/theme" ) { 2 | 3 | .k-dropdown { 4 | 5 | .k-dropdown-wrap { 6 | @include appearance( button ); 7 | background-clip: padding-box; 8 | 9 | .k-ie11 &, 10 | .k-edge12 &, 11 | .k-edge13 & { 12 | background-clip: border-box; 13 | } 14 | } 15 | .k-select { 16 | padding: 0; 17 | width: button-inner-size(); 18 | } 19 | 20 | > :hover, 21 | .k-state-hover { 22 | @include appearance( hovered-button ); 23 | } 24 | 25 | .k-state-active {} 26 | 27 | .k-state-focused { 28 | @include appearance( focused-input ); 29 | } 30 | 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/edit-form/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("edit-form/layout") { 2 | 3 | 4 | // Edit form 5 | .k-popup-edit-form {} 6 | .k-edit-form-container { 7 | width: 400px; 8 | min-width: 400px; 9 | border-color: inherit; 10 | position: relative; 11 | } 12 | 13 | 14 | // Tabstrip 15 | .k-edit-form-container .k-tabstrip-wrapper { 16 | margin: (-$window-inner-padding-y) (-$window-inner-padding-x); 17 | } 18 | .k-edit-form-container .k-tabstrip.k-root-tabs { 19 | margin-bottom: $window-inner-padding-y; 20 | } 21 | .k-edit-form-container .k-tabstrip .k-tabstrip-items { 22 | padding: $window-inner-padding-y $window-inner-padding-x 0; 23 | } 24 | .k-edit-form-container .k-tabstrip .k-content { 25 | padding: $window-inner-padding-y $window-inner-padding-x; 26 | border-width: 0; 27 | } 28 | 29 | 30 | // Edit buttons 31 | .k-edit-buttons { 32 | padding: $toolbar-padding-y $toolbar-padding-x; 33 | border-width: 1px 0 0; 34 | border-style: solid; 35 | border-color: inherit; 36 | text-align: right; 37 | clear: both; 38 | } 39 | .k-edit-buttons .k-button {} 40 | .k-edit-buttons .k-button + .k-button { 41 | margin-left: ( $spacer-x / 2 ); 42 | } 43 | .k-edit-form-container .k-edit-buttons { 44 | margin: $window-inner-padding-y (-$window-inner-padding-x) (-$window-inner-padding-y); 45 | padding: $window-inner-padding-y $window-inner-padding-x; 46 | } 47 | 48 | 49 | // Action buttons 50 | .k-action-buttons {} 51 | .k-popup-edit-form > .k-action-buttons, 52 | .k-edit-form-container .k-action-buttons { 53 | margin: $spacer (-$window-inner-padding-x) (-$window-inner-padding-y); 54 | } 55 | 56 | 57 | .k-edit-label { 58 | margin: 0 0 $spacer-y 0; 59 | padding: add-two($input-padding-y, $input-border-width) 0; 60 | width: 30%; 61 | line-height: $form-line-height; 62 | text-align: right; 63 | float: left; 64 | clear: both; 65 | } 66 | .k-edit-field { 67 | margin: 0 0 $spacer-y 0; 68 | width: 65%; 69 | float: right; 70 | clear: right; 71 | } 72 | 73 | .k-edit-field { 74 | 75 | > .k-widget, 76 | > .k-textbox, 77 | > .k-input.k-textbox { 78 | width: 100%; 79 | box-sizing: border-box; 80 | } 81 | > .k-colorpicker { 82 | width: auto; 83 | } 84 | 85 | input[type="radio"]:not(.k-radio), 86 | input[type="checkbox"]:not(.k-checkbox) { 87 | margin-right: .4ex; 88 | } 89 | 90 | .k-radio-label, 91 | .k-checkbox-label { 92 | margin-right: ($spacer); 93 | } 94 | 95 | .k-checkbox-label { 96 | margin-top: add-two($input-padding-y, $input-border-width); 97 | } 98 | 99 | .k-reset > li + li { 100 | margin-top: ($spacer / 2); 101 | } 102 | .k-reset .k-widget { 103 | margin: 0 .4ex 0 1ex; 104 | } 105 | } 106 | 107 | } 108 | 109 | @include exports("edit-form/rtl") { 110 | 111 | .k-rtl { 112 | 113 | .k-edit-buttons { 114 | text-align: left; 115 | 116 | .k-button + .k-button { 117 | margin-left: 0; 118 | margin-right: .5em; 119 | } 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /scss/edit-form/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("edit-form/theme") {} 2 | -------------------------------------------------------------------------------- /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 "upload"; 10 | @import "window"; 11 | 12 | 13 | // Component 14 | @import "editor/layout"; 15 | @import "editor/theme"; 16 | -------------------------------------------------------------------------------- /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 | background-clip: padding-box; 8 | 9 | .k-editor-toolbar {} 10 | .k-editable-area { 11 | border-color: $header-border; 12 | } 13 | 14 | .k-ie11 &, 15 | .k-edge12 &, 16 | .k-edge13 & { 17 | background-clip: border-box; 18 | } 19 | } 20 | 21 | .k-overlay { 22 | background-color: $editor-overlay-background; 23 | } 24 | 25 | 26 | // Editor toolbar 27 | .k-editor-toolbar { 28 | @include appearance( toolbar ); 29 | padding: 0; 30 | 31 | 32 | // Group 33 | .k-tool-group { 34 | padding: $toolbar-padding-y $toolbar-padding-x; 35 | 36 | .k-tool.k-group-start, 37 | .k-tool.k-group-end { 38 | @include border-radius( 0 ); 39 | } 40 | } 41 | .k-tool-group + .k-tool-group { 42 | margin: 0; 43 | border-left-width: 1px; 44 | } 45 | 46 | 47 | // Tools 48 | .k-tool + .k-tool { 49 | margin: 0; 50 | } 51 | } 52 | 53 | // sass-lint:disable class-name-format 54 | .editorToolbarWindow.k-header.k-window-content { 55 | @include appearance( header ); 56 | } 57 | // sass-lint:enable class-name-format 58 | // sass-lint:disable class-name-format 59 | .k-editor .k-editor-toolbar-wrap, 60 | .k-ct-popup .k-editor-toolbar, 61 | .editorToolbarWindow.k-header.k-window-content { 62 | a.k-tool { 63 | @include appearance( button ); 64 | border-width: 0; 65 | background-image: none; 66 | background-color: transparent; 67 | 68 | &:hover, 69 | &.k-state-hover { 70 | @include appearance( hovered-button ); 71 | } 72 | 73 | &:active, 74 | &.k-state-active { 75 | @include appearance( pressed-button ); 76 | } 77 | 78 | &.k-state-selected { 79 | @include fill( $selected-text, $selected-bg, $selected-border, none ); 80 | } 81 | } 82 | .k-tool-group { 83 | border-color: $border-color; 84 | } 85 | } 86 | // sass-lint:enable class-name-format 87 | 88 | 89 | // Overflow anchor 90 | .k-editor-toolbar .k-overflow-anchor { 91 | padding: $toolbar-padding-y; 92 | width: calc( #{$toolbar-inner-calc-size} ); 93 | height: calc( #{$toolbar-inner-calc-size} ); 94 | } 95 | 96 | 97 | // Insert table 98 | .k-ct-popup {} 99 | 100 | } 101 | -------------------------------------------------------------------------------- /scss/gantt.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | @import "treelist"; 9 | @import "splitter"; 10 | @import "window"; 11 | 12 | 13 | // Component 14 | @import "gantt/layout"; 15 | @import "gantt/theme"; 16 | -------------------------------------------------------------------------------- /scss/gantt/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("gantt/theme") { 2 | 3 | // Theme 4 | .k-gantt { 5 | background-clip: padding-box; 6 | 7 | .k-ie11 &, 8 | .k-edge12 &, 9 | .k-edge13 & { 10 | background-clip: border-box; 11 | } 12 | } 13 | 14 | 15 | // Header and footer 16 | .k-gantt-toolbar { 17 | @include appearance( header ); 18 | } 19 | 20 | 21 | // View switcher 22 | .k-gantt-views { 23 | 24 | li { 25 | @include appearance( button ); 26 | 27 | &.k-state-hover { @include appearance( hovered-button ); } 28 | &.k-state-selected { @include fill( $selected-text, $selected-bg, $selected-border, none ); } 29 | } 30 | li:first-child { @include border-radius(); } 31 | li:first-child + li { @include border-left-radius-only(); } 32 | li:last-child { @include border-right-radius-only(); } 33 | 34 | 35 | &.k-state-expanded { 36 | li { 37 | @include border-radius( 0 ); 38 | margin: 0; 39 | } 40 | li + li { margin-top: -1px; } 41 | li:first-child { @include border-top-radius-only(); } 42 | li:first-child + li { @include border-radius( 0 ) } 43 | li:last-child { @include border-bottom-radius-only(); } 44 | } 45 | } 46 | 47 | 48 | // Treelist 49 | .k-gantt-treelist { 50 | background-color: darken( $panel-bg, 2 ); 51 | 52 | .k-treelist { 53 | background-color: transparent; 54 | } 55 | 56 | tr.k-alt { 57 | background-color: darken( $panel-bg, 6 ); 58 | } 59 | 60 | tr.k-state-selected, 61 | td.k-state-selected { 62 | color: inherit; 63 | background-color: rgba($selected-bg, .25); 64 | } 65 | 66 | } 67 | 68 | 69 | // Rows and colls 70 | .k-gantt-rows {} 71 | .k-gantt-columns {} 72 | .k-gantt-columns .k-nonwork-hour { 73 | background-color: rgba( $panel-text, .025 ); 74 | } 75 | 76 | 77 | .k-gantt-dependencies {} 78 | .k-line { 79 | color: darken( $panel-text, 40 ); 80 | } 81 | .k-line.k-state-selected { 82 | color: $selected-bg; 83 | } 84 | 85 | .k-task-dot {} 86 | .k-task-dot::before { 87 | background-color: $panel-text; 88 | } 89 | .k-task-dot:hover::before, 90 | .k-task-dot.k-state-hover::before { 91 | border-color: $panel-text; 92 | background-color: $panel-bg; 93 | } 94 | 95 | 96 | // Milestone 97 | .k-task-milestone { 98 | border-color: $panel-border; 99 | background-color: $panel-text; 100 | } 101 | .k-task-milestone.k-state-selected { 102 | border-color: $selected-border; 103 | background-color: $selected-bg; 104 | } 105 | 106 | 107 | // Summary 108 | .k-task-summary { 109 | color: mix( $panel-text, $panel-bg, 95 ); 110 | } 111 | .k-task-summary-complete { 112 | color: darken( $panel-text, 40 ); 113 | } 114 | .k-task-summary.k-state-selected { 115 | color: mix( $selected-bg, $panel-bg, 80 ); 116 | 117 | .k-task-summary-complete { 118 | color: shade( $selected-bg ); 119 | } 120 | } 121 | .k-task-summary::before, 122 | .k-task-summary::after, 123 | .k-task-summary-complete::before, 124 | .k-task-summary-complete::after { 125 | display: none; 126 | } 127 | 128 | 129 | // Tasks 130 | .k-task-single { 131 | border-width: 0; 132 | border-color: $panel-border; 133 | color: $panel-bg; 134 | background: mix( $panel-text, $panel-bg, 80 ); 135 | 136 | .k-task-complete { 137 | background: $panel-text; 138 | } 139 | 140 | .k-task-template { 141 | padding-top: $padding-y; 142 | padding-bottom: $padding-y; 143 | } 144 | } 145 | .k-task-single.k-state-selected { 146 | border-color: $selected-border; 147 | color: $selected-text; 148 | background: mix( $selected-bg, $panel-bg, 70 ); 149 | 150 | .k-task-complete { 151 | background: $selected-bg; 152 | } 153 | } 154 | 155 | } 156 | 157 | 158 | @include exports("gantt/theme-rtl") { 159 | 160 | // View switcher 161 | .k-gantt-views { 162 | li:first-child + li { @include border-right-radius-only(); } 163 | li:last-child { @include border-left-radius-only(); } 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /scss/grid.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "dialog"; 8 | @import "pager"; 9 | 10 | 11 | // Component 12 | @import "grid/layout"; 13 | @import "grid/theme"; -------------------------------------------------------------------------------- /scss/input.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | 7 | 8 | // Component 9 | @import "input/layout"; 10 | @import "input/theme"; 11 | -------------------------------------------------------------------------------- /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"; 13 | -------------------------------------------------------------------------------- /scss/listbox/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports( 'listbox/layout' ) { 2 | $listbox-margin: $padding-x !default; 3 | $listbox-width: 12.4em !default; 4 | $listbox-default-height: 200px !default; 5 | 6 | .k-listbox { 7 | width: $listbox-width; 8 | height: $listbox-default-height; 9 | vertical-align: top; 10 | background-color: transparent; 11 | border-width: 0; 12 | display: inline-flex; 13 | 14 | .k-listbox-toolbar ul { 15 | display: flex; 16 | } 17 | 18 | &.k-listbox-toolbar-left, 19 | &.k-listbox-toolbar-right { 20 | .k-listbox-toolbar ul { 21 | flex-direction: column; 22 | } 23 | 24 | .k-listbox-toolbar li + li { 25 | margin-top: $listbox-margin; 26 | } 27 | } 28 | 29 | &.k-listbox-toolbar-left { 30 | flex-direction: row; 31 | 32 | .k-listbox-toolbar { 33 | margin-right: $listbox-margin; 34 | } 35 | } 36 | 37 | &.k-listbox-toolbar-right { 38 | flex-direction: row-reverse; 39 | 40 | .k-listbox-toolbar { 41 | margin-left: $listbox-margin; 42 | } 43 | } 44 | 45 | &.k-listbox-toolbar-top, 46 | &.k-listbox-toolbar-bottom { 47 | flex-direction: column; 48 | 49 | .k-listbox-toolbar ul { 50 | flex-direction: row; 51 | } 52 | 53 | .k-listbox-toolbar li + li { 54 | margin-left: $listbox-margin; 55 | } 56 | } 57 | 58 | &.k-listbox-toolbar-top { 59 | .k-listbox-toolbar { 60 | margin-bottom: $listbox-margin; 61 | } 62 | } 63 | 64 | &.k-listbox-toolbar-bottom { 65 | .k-listbox-toolbar { 66 | margin-top: $listbox-margin; 67 | } 68 | } 69 | 70 | .k-list-scroller { 71 | width: 100%; 72 | border-width: 1px; 73 | border-style: solid; 74 | } 75 | 76 | .k-drop-hint { 77 | border-top-width: 1px; 78 | border-top-style: solid; 79 | } 80 | 81 | .k-ghost { 82 | opacity: .5; 83 | } 84 | } 85 | 86 | .k-item { 87 | cursor: default; 88 | } 89 | 90 | .k-item.k-drag-clue { 91 | @include border-radius( 0 ); 92 | padding: $list-item-padding-y $list-item-padding-x; 93 | border-width: 0; 94 | font-size: $font-size; 95 | line-height: $line-height-em; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /scss/listbox/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports('listbox/theme') { 2 | .k-listbox { 3 | .k-list-scroller { 4 | background-color: $widget-bg; 5 | border-color: $widget-border; 6 | color: $widget-text; 7 | background-clip: padding-box; 8 | 9 | .k-ie11 &, 10 | .k-edge12 &, 11 | .k-edge13 & { 12 | background-clip: border-box; 13 | } 14 | } 15 | .k-drop-hint { 16 | border-top-color: $accent; 17 | } 18 | } 19 | 20 | .k-item.k-drag-clue { 21 | background-color: $list-item-selected-bg; 22 | color: $list-item-selected-text; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /scss/listview.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | @import "listview/layout"; 5 | @import "listview/theme"; 6 | -------------------------------------------------------------------------------- /scss/listview/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports( 'listview/layout' ) { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /scss/listview/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports( 'listview/theme' ) { 2 | .k-listview > .k-state-focused { 3 | box-shadow: $focused-shadow; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /scss/map.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "map/images/markers"; 7 | 8 | 9 | // Component 10 | @import "map/layout"; 11 | @import "map/theme"; 12 | -------------------------------------------------------------------------------- /scss/map/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("map/layout") { 2 | 3 | $map-navigator-padding: 2px !default; 4 | 5 | // Layout 6 | .k-map { 7 | height: 600px; 8 | 9 | // Scroll wrap 10 | .km-scroll-wrapper { 11 | width: 100%; 12 | height: 100%; 13 | user-select: none; 14 | position: absolute; 15 | } 16 | .k-touch-scrollbar { display: none; } 17 | 18 | // Layers 19 | .k-layer { 20 | position: absolute; 21 | left: 0; 22 | top: 0; 23 | } 24 | 25 | // Marker 26 | .k-marker { 27 | margin: -32px 0 0 -16px; 28 | font-size: $font-size * 2; 29 | cursor: pointer; 30 | position: absolute; 31 | } 32 | 33 | 34 | // TODO: see attribuion 35 | // Attribution 36 | .k-attribution { 37 | padding: $padding-y-sm $padding-x-sm; 38 | font-size: $font-size-sm * .75; 39 | background-color: rgba( $panel-bg, .8); 40 | z-index: 1000; 41 | } 42 | 43 | .km-scroll-container { 44 | height: 100%; 45 | } 46 | } 47 | 48 | 49 | // Controls 50 | .k-map-controls { 51 | position: absolute; 52 | display: flex; 53 | align-items: center; 54 | } 55 | .k-pos-top { top: 0; } 56 | .k-pos-bottom { bottom: 0; } 57 | .k-pos-left { left: 0; } 58 | .k-pos-right { right: 0; } 59 | 60 | 61 | // Navigator 62 | .k-navigator { 63 | margin: $spacer-x; 64 | width: add-two( (3 * $icon-size), $map-navigator-padding ); 65 | height: add-two( (3 * $icon-size), $map-navigator-padding ); 66 | box-sizing: content-box; 67 | border-radius: 50%; 68 | position: relative; 69 | 70 | .k-pdf-export & { display: none; } 71 | 72 | 73 | // Buttons 74 | .k-button { 75 | margin: 0; 76 | padding: 0; 77 | border-radius: 100%; 78 | line-height: 1; 79 | position: absolute; 80 | 81 | &:not(:hover) { 82 | border-color: transparent; 83 | background: none; 84 | } 85 | } 86 | .k-navigator-up { 87 | transform: translateX(-50%); 88 | top: $map-navigator-padding; 89 | left: 50%; 90 | } 91 | .k-navigator-right { 92 | transform: translateY(-50%); 93 | right: $map-navigator-padding; 94 | top: 50%; 95 | } 96 | .k-navigator-down { 97 | transform: translateX(-50%); 98 | bottom: $map-navigator-padding; 99 | left: 50%; 100 | } 101 | .k-navigator-left { 102 | transform: translateY(-50%); 103 | left: $map-navigator-padding; 104 | top: 50%; 105 | } 106 | } 107 | 108 | 109 | // Zoom control 110 | .k-zoom-control { 111 | margin: $spacer-x; 112 | border: 0; 113 | background: none; 114 | display: flex; 115 | 116 | .k-pdf-export & { display: none; } 117 | 118 | 119 | // Buttons 120 | .k-button { 121 | padding: $button-padding-y; 122 | } 123 | } 124 | .k-buttons-horizontal {} 125 | .k-buttons-vertical { 126 | flex-direction: vertical; 127 | } 128 | 129 | } 130 | -------------------------------------------------------------------------------- /scss/map/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("map/theme") { 2 | .k-map { 3 | .k-marker { 4 | color: $accent; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /scss/map/images/markers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-default/77efe2aa5a7bb7fb3d4a30b4cac6b87a4b12c54d/scss/map/images/markers.png -------------------------------------------------------------------------------- /scss/map/images/markers.scss: -------------------------------------------------------------------------------- 1 | @import '../../mixins'; 2 | 3 | @include exports('markers.png') { 4 | @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==') 5 | } 6 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/maskedtextbox/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("maskedtextbox/layout") { 2 | .k-maskedtextbox { 3 | .k-i-warning { 4 | display: none; 5 | position: absolute; 6 | top: 50%; 7 | transform: translateY(-50%); 8 | right: $padding-x; 9 | } 10 | 11 | .k-rtl &, 12 | &[dir='rtl'] { 13 | .k-i-warning { 14 | right: auto; 15 | left: $padding-x; 16 | } 17 | } 18 | 19 | &.k-state-invalid { 20 | .k-i-warning { 21 | display: inline-block; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /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 | .k-textbox { 9 | color: $error; 10 | border-color: $error; 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/mediaplayer/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("mediaplayer/layout") { 2 | 3 | // Base 4 | .k-mediaplayer { 5 | position: relative; 6 | 7 | > iframe { 8 | width: 100%; 9 | height: 100%; 10 | border: 0; 11 | vertical-align: top; 12 | } 13 | } 14 | 15 | 16 | // Title bar 17 | .k-mediaplayer-titlebar { 18 | padding: $header-padding-y $header-padding-x; 19 | position: absolute; 20 | z-index: 2; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | } 25 | 26 | 27 | // Toolbar 28 | .k-mediaplayer-toolbar-wrap { 29 | position: absolute; 30 | z-index: 2; 31 | bottom: 0; 32 | left: 0; 33 | right: 0; 34 | } 35 | .k-mediaplayer-toolbar { 36 | padding: $toolbar-padding-y $toolbar-padding-x; 37 | border-width: 0; 38 | // sass-lint:disable no-important 39 | width: 100% !important; 40 | // sass-lint:enable no-important 41 | 42 | 43 | > * { 44 | align-items: center; 45 | align-content: center; 46 | } 47 | 48 | .k-toolbar-spacer { 49 | margin-top: 0; 50 | margin-bottom: 0; 51 | border-width: 0; 52 | flex: 1; 53 | } 54 | 55 | .k-align-right { 56 | & > * + * { margin-left: $padding-x; } 57 | } 58 | 59 | } 60 | .k-mediaplayer-time-wrap { 61 | flex: 1; 62 | } 63 | .k-mediaplayer-volume-wrap { 64 | align-items: center; 65 | } 66 | 67 | 68 | // Seekbar 69 | .k-slider.k-mediaplayer-seekbar { 70 | width: 100%; 71 | position: absolute; 72 | z-index: 3; 73 | top: -17px; 74 | left: 0; 75 | } 76 | .k-mediaplayer-seekbar .k-slider-track { 77 | // sass-lint:disable no-important 78 | width: 100% !important; 79 | // sass-lint:enable no-important 80 | border-radius: 0; 81 | } 82 | 83 | .k-mediaplayer-fullscreen { 84 | z-index: 10000; 85 | position: fixed; 86 | top: 0; 87 | left: 0; 88 | // sass-lint:disable no-important 89 | width: 100% !important; 90 | height: 100% !important; 91 | // sass-lint:enable no-important 92 | } 93 | 94 | } 95 | -------------------------------------------------------------------------------- /scss/mediaplayer/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("mediaplayer/theme") { 2 | 3 | // Theme 4 | .k-mediaplayer { 5 | background-clip: padding-box; 6 | 7 | .k-ie11 &, 8 | .k-edge12 &, 9 | .k-edge13 & { 10 | background-clip: border-box; 11 | } 12 | } 13 | 14 | 15 | // Title bar 16 | // TODO: should title bar always appear the same? 17 | .k-mediaplayer-titlebar { 18 | color: $panel-bg; 19 | background-image: linear-gradient( rgba( $panel-text, .7 ), rgba( $panel-text, 0 ) ); 20 | // text-shadow: 0 0 1px $panel-text; 21 | } 22 | 23 | 24 | .k-mediaplayer-toolbar { 25 | background-color: rgba($toolbar-bg, .85); 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/menu/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("menu/theme") { 2 | 3 | // Theme 4 | .k-menu { 5 | border-width: 0; 6 | color: inherit; 7 | background: none; 8 | background-clip: padding-box; 9 | 10 | .k-ie11 &, 11 | .k-edge12 &, 12 | .k-edge13 & { 13 | background-clip: border-box; 14 | } 15 | 16 | .k-item { 17 | color: $link-text; 18 | 19 | &.k-state-hover { 20 | color: $link-hover-text; 21 | } 22 | 23 | &.k-state-active { 24 | color: inherit; 25 | } 26 | 27 | &.k-state-selected { 28 | color: $list-item-selected-text; 29 | } 30 | } 31 | } 32 | .k-menu.k-context-menu { 33 | @include appearance( popup ); 34 | } 35 | 36 | .k-menu-group, 37 | .k-menu.k-context-menu { 38 | .k-item { 39 | color: inherit; 40 | 41 | &.k-state-hover { 42 | @include appearance( hovered-list-item ); 43 | } 44 | 45 | &.k-state-active, 46 | &.k-state-selected { 47 | @include appearance( selected-list-item ); 48 | } 49 | } 50 | } 51 | 52 | 53 | // Scrolling 54 | .k-menu-scroll-button { 55 | border-color: $widget-border; 56 | color: $link-text; 57 | background: $bg-color; 58 | 59 | &:hover { 60 | border-color: $widget-border; 61 | color: $link-hover-text; 62 | background: $bg-color; 63 | } 64 | 65 | &.k-scroll-left { 66 | width: 16px; 67 | border-right-width: 1px; 68 | } 69 | &.k-scroll-right { 70 | width: 16px; 71 | border-left-width: 1px; 72 | } 73 | &.k-scroll-up { 74 | height: 16px; 75 | border-bottom-width: 1px; 76 | } 77 | &.k-scroll-down { 78 | height: 16px; 79 | border-top-width: 1px; 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /scss/mixins/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance( $what ) { 2 | 3 | // Widget 4 | @if ( $what == widget ) { 5 | @include appearance_widget; 6 | } 7 | 8 | // Panels 9 | @if ( $what == panel ) { 10 | @include appearance_panel; 11 | } 12 | @if ( $what == popup ) { 13 | @include appearance_popup; 14 | } 15 | 16 | 17 | // Header 18 | @if ( $what == header ) { 19 | @include appearance_header; 20 | } 21 | @if ( $what == hovered-header ) { 22 | @include appearance_hovered-header; 23 | } 24 | @if ( $what == selected-header ) { 25 | @include appearance_selected-header; 26 | } 27 | 28 | 29 | // Button 30 | @if ( $what == button ) { 31 | @include appearance_button; 32 | } 33 | @if ( $what == hovered-button ) { 34 | @include appearance_hovered-button; 35 | } 36 | @if ( $what == pressed-button ) { 37 | @include appearance_pressed-button; 38 | } 39 | @if ( $what == focused-button ) { 40 | @include appearance_focused-button; 41 | } 42 | 43 | 44 | // Primary button 45 | @if ( $what == primary-button ) { 46 | @include appearance_primary-button; 47 | } 48 | @if ( $what == hovered-primary-button ) { 49 | @include appearance_hovered-primary-button; 50 | } 51 | @if ( $what == pressed-primary-button ) { 52 | @include appearance_pressed-primary-button; 53 | } 54 | 55 | 56 | // Toolbar 57 | @if ( $what == toolbar ) { 58 | @include appearance_toolbar; 59 | } 60 | 61 | 62 | // Input 63 | @if ( $what == input ) { 64 | @include appearance_input; 65 | } 66 | @if ( $what == hovered-input ) { 67 | @include appearance_hovered-input; 68 | } 69 | @if ( $what == focused-input ) { 70 | @include appearance_focused-input; 71 | } 72 | 73 | 74 | // Node 75 | @if ( $what == node ) { 76 | @include appearance_node; 77 | } 78 | @if ( $what == hovered-node ) { 79 | @include appearance_hovered-node; 80 | } 81 | @if ( $what == selected-node ) { 82 | @include appearance_selected-node; 83 | } 84 | 85 | 86 | // List item 87 | @if ( $what == list-item ) { 88 | @include appearance_list-item; 89 | } 90 | @if ( $what == hovered-list-item ) { 91 | @include appearance_hovered-list-item; 92 | } 93 | @if ( $what == selected-list-item ) { 94 | @include appearance_selected-list-item; 95 | } 96 | @if ( $what == focused-list-item ) { 97 | @include appearance_focused-list-item; 98 | } 99 | 100 | } 101 | -------------------------------------------------------------------------------- /scss/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Border radius 2 | @mixin border-radius( $radius: $border-radius ) { 3 | @if $enable-rounded { 4 | border-radius: $radius; 5 | } 6 | } 7 | 8 | @mixin border-top-radius( $radius: $border-radius ) { 9 | @if $enable-rounded { 10 | border-top-left-radius: $radius; 11 | border-top-right-radius: $radius; 12 | } 13 | } 14 | 15 | @mixin border-right-radius( $radius: $border-radius ) { 16 | @if $enable-rounded { 17 | border-top-right-radius: $radius; 18 | border-bottom-right-radius: $radius; 19 | } 20 | } 21 | 22 | @mixin border-bottom-radius( $radius: $border-radius ) { 23 | @if $enable-rounded { 24 | border-bottom-right-radius: $radius; 25 | border-bottom-left-radius: $radius; 26 | } 27 | } 28 | 29 | @mixin border-left-radius( $radius: $border-radius ) { 30 | @if $enable-rounded { 31 | border-top-left-radius: $radius; 32 | border-bottom-left-radius: $radius; 33 | } 34 | } 35 | 36 | @mixin border-top-radius-only( $radius: $border-radius ) { 37 | @if $enable-rounded { 38 | border-radius: $radius $radius 0 0; 39 | } 40 | } 41 | 42 | @mixin border-right-radius-only( $radius: $border-radius ) { 43 | @if $enable-rounded { 44 | border-radius: 0 $radius $radius 0; 45 | } 46 | } 47 | 48 | @mixin border-bottom-radius-only( $radius: $border-radius ) { 49 | @if $enable-rounded { 50 | border-radius: 0 0 $radius $radius; 51 | } 52 | } 53 | 54 | @mixin border-left-radius-only( $radius: $border-radius ) { 55 | @if $enable-rounded { 56 | border-radius: $radius 0 0 $radius; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /scss/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow( $shadow... ) { 2 | @if $enable-shadows { 3 | box-shadow: $shadow; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /scss/mixins/_button-size.scss: -------------------------------------------------------------------------------- 1 | @function button-inner-size( $multiplier: 1 ) { 2 | @return add-two( 2 * $button-padding-y, $form-line-height-em, $multiplier ); 3 | } 4 | 5 | 6 | @function button-size( $multiplier: 1 ) { 7 | @return add-three( 2 * $button-border-width, 2 * $button-padding-y, $form-line-height-em, $multiplier ); 8 | } 9 | -------------------------------------------------------------------------------- /scss/mixins/_button.scss: -------------------------------------------------------------------------------- 1 | $_button-imported: false !default; 2 | 3 | @if ( $_button-imported == false ) { 4 | 5 | %appearance_button { 6 | color: $button-text; 7 | background-color: $button-bg; 8 | border-color: $button-border; 9 | @include linear-gradient( $button-gradient ); 10 | } 11 | %appearance_hovered-button { 12 | color: $button-hovered-text; 13 | background-color: $button-hovered-bg; 14 | border-color: $button-hovered-border; 15 | @include linear-gradient( $button-hovered-gradient ); 16 | } 17 | %appearance_pressed-button { 18 | color: $button-pressed-text; 19 | background-color: $button-pressed-bg; 20 | border-color: $button-pressed-border; 21 | @include linear-gradient( $button-pressed-gradient ); 22 | @include box-shadow( $button-pressed-shadow ); 23 | } 24 | %appearance_focused-button { 25 | @include box-shadow( $button-focused-shadow ); 26 | } 27 | 28 | %appearance_primary-button { 29 | color: $primary-button-text; 30 | background-color: $primary-button-bg; 31 | border-color: $primary-button-border; 32 | @include linear-gradient( $primary-button-gradient ); 33 | } 34 | %appearance_hovered-primary-button { 35 | color: $primary-button-hovered-text; 36 | background-color: $primary-button-hovered-bg; 37 | border-color: $primary-button-hovered-border; 38 | @include linear-gradient( $primary-button-hovered-gradient ); 39 | } 40 | %appearance_pressed-primary-button { 41 | color: $primary-button-pressed-text; 42 | background-color: $primary-button-pressed-bg; 43 | border-color: $primary-button-pressed-border; 44 | @include linear-gradient( $primary-button-pressed-gradient ); 45 | } 46 | 47 | %appearance_toolbar { 48 | color: $toolbar-text; 49 | background-color: $toolbar-bg; 50 | border-color: $toolbar-border; 51 | @include linear-gradient( $toolbar-gradient ); 52 | } 53 | 54 | $_button-imported: true; 55 | 56 | } 57 | 58 | 59 | @mixin appearance_button { @extend %appearance_button }; 60 | @mixin appearance_hovered-button { @extend %appearance_hovered-button }; 61 | @mixin appearance_pressed-button { @extend %appearance_pressed-button }; 62 | @mixin appearance_focused-button { @extend %appearance_focused-button }; 63 | 64 | @mixin appearance_primary-button { @extend %appearance_primary-button }; 65 | @mixin appearance_hovered-primary-button { @extend %appearance_hovered-primary-button }; 66 | @mixin appearance_pressed-primary-button { @extend %appearance_pressed-primary-button }; 67 | 68 | @mixin appearance_toolbar { @extend %appearance_toolbar }; 69 | -------------------------------------------------------------------------------- /scss/mixins/_colors.scss: -------------------------------------------------------------------------------- 1 | @import "vendor/color-helpers/math"; 2 | @import "vendor/color-helpers/contrast"; 3 | 4 | @function color-level($color, $level: 0) { 5 | 6 | @if ($level == 0) { 7 | @return $color; 8 | } 9 | 10 | $base: if($level > 0, #ffffff, #000000); 11 | $level: abs($level); 12 | 13 | @if ( unit($level) == "%" ) { 14 | @return mix( $base, $color, $level ); 15 | } 16 | 17 | @return mix($base, $color, $level * $color-level-step); 18 | } 19 | 20 | @function tint( $color, $level: 1 ) { 21 | @return color-level( $color, $level ); 22 | } 23 | 24 | @function shade( $color, $level: 1 ) { 25 | @return color-level( $color, - $level ); 26 | } 27 | 28 | 29 | @function try-darken( $color, $amount, $threshold: black ) { 30 | $amount: if(unitless($amount), $amount, ($amount / 1%)); 31 | 32 | $result: darken( $color, $amount ); 33 | $alt-result: darken( $color, ($amount - 1) ); 34 | 35 | @if ($result == $threshold) and ($alt-result == $threshold) { 36 | @return lighten( $color, $amount ); 37 | } 38 | @return $result; 39 | } 40 | 41 | @function try-lighten( $color, $amount, $threshold: white ) { 42 | $amount: if(unitless($amount), $amount, ($amount / 1%)); 43 | 44 | $result: lighten( $color, $amount ); 45 | $alt-result: lighten( $color, ($amount - 1) ); 46 | 47 | @if ($result == $threshold) and ($alt-result == $threshold) { 48 | @return darken( $color, $amount ); 49 | } 50 | @return $result; 51 | } 52 | 53 | 54 | @function yiq($color) { 55 | $r: red($color); 56 | $g: green($color); 57 | $b: blue($color); 58 | 59 | $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; 60 | 61 | @return $yiq; 62 | } 63 | @function contrast-yiq($color, $dark: #000000, $light: #ffffff) { 64 | $yiq: yiq($color); 65 | $out: if($yiq >= 150, $dark, $light); 66 | // @debug yiq; 67 | @return $out; 68 | } 69 | @function contrast-wcag($color, $dark: #000000, $light: #ffffff) { 70 | $luma: ch-color-luminance($color); 71 | $out: if($luma < .5, $light, $dark); 72 | // @debug $luma; 73 | @return $out; 74 | } 75 | -------------------------------------------------------------------------------- /scss/mixins/_decoration.scss: -------------------------------------------------------------------------------- 1 | // Fill and outline 2 | @mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) { 3 | border-color: $border; 4 | color: $color; 5 | background-color: $bg; 6 | @include linear-gradient( $gradient ); 7 | } 8 | @mixin outline( $color: null ) { 9 | border-color: $color; 10 | color: $color; 11 | background-color: transparent; 12 | background-image: none; 13 | } 14 | -------------------------------------------------------------------------------- /scss/mixins/_disabled.scss: -------------------------------------------------------------------------------- 1 | // Disabled 2 | @mixin disabled { 3 | outline: none; 4 | cursor: default; 5 | opacity: $disabled-opacity; 6 | filter: $disabled-filter; 7 | pointer-events: none; 8 | box-shadow: none; 9 | } 10 | @include exports("placeholder/disabled") { 11 | %disabled { 12 | @if ( mixin-exists( disabled ) ) { 13 | @include disabled; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /scss/mixins/_gradients.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient( $gradient: null ) { 2 | @if $gradient and $enable-gradients { 3 | @if $gradient == none { 4 | background-image: none 5 | } 6 | @else { 7 | background-image: linear-gradient( $gradient ); 8 | } 9 | } 10 | } 11 | 12 | @mixin striped-gradient( $color: rgba(255,255,255,.15), $angle: 45deg) { 13 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 14 | } 15 | -------------------------------------------------------------------------------- /scss/mixins/_hide-scrollbar.scss: -------------------------------------------------------------------------------- 1 | // Infinite calendar and timepicker 2 | @mixin hide-scrollbar($dir: 'right', $max-scrollbar: 100px) { 3 | // anything larger than the scrollbar width will do 4 | $scrollbar-size: 17px; 5 | $margin: -$max-scrollbar - $scrollbar-size; 6 | 7 | padding-right: $max-scrollbar; 8 | padding-left: $max-scrollbar; 9 | margin-left: -$max-scrollbar; 10 | margin-right: -$max-scrollbar; 11 | 12 | @if ($dir == 'right') { 13 | margin-right: $margin; 14 | } @else { 15 | margin-left: $margin; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /scss/mixins/_input.scss: -------------------------------------------------------------------------------- 1 | $_input-imported: false !default; 2 | 3 | @if ( $_input-imported == false ) { 4 | 5 | %appearance_input { 6 | color: $input-text; 7 | background-color: $input-bg; 8 | border-color: $input-border; 9 | } 10 | %appearance_hovered-input { 11 | color: $input-hovered-text; 12 | background-color: $input-hovered-bg; 13 | border-color: $input-hovered-border; 14 | } 15 | %appearance_focused-input { 16 | color: $input-focused-text; 17 | background-color: $input-focused-bg; 18 | border-color: $input-focused-border; 19 | box-shadow: $input-focused-shadow; 20 | } 21 | 22 | $_input-imported: true; 23 | 24 | } 25 | 26 | 27 | @mixin appearance_input { @extend %appearance_input; } 28 | @mixin appearance_hovered-input { @extend %appearance_hovered-input; } 29 | @mixin appearance_focused-input { @extend %appearance_focused-input; } 30 | -------------------------------------------------------------------------------- /scss/mixins/_node.scss: -------------------------------------------------------------------------------- 1 | $_node-imported: false !default; 2 | 3 | @if ( $_node-imported == false ) { 4 | 5 | %appearance_node { 6 | color: $node-text; 7 | background-color: $node-bg; 8 | border-color: $node-border; 9 | @include linear-gradient( $node-gradient ); 10 | } 11 | %appearance_hovered-node { 12 | color: $node-hovered-text; 13 | background-color: $node-hovered-bg; 14 | border-color: $node-hovered-border; 15 | @include linear-gradient( $node-hovered-gradient ); 16 | } 17 | %appearance_selected-node { 18 | color: $node-selected-text; 19 | background-color: $node-selected-bg; 20 | border-color: $node-selected-border; 21 | @include linear-gradient( $node-selected-gradient ); 22 | } 23 | 24 | %appearance_list-item { 25 | color: $list-item-text; 26 | background-color: $list-item-bg; 27 | } 28 | %appearance_focused-list-item { 29 | box-shadow: $list-item-focused-shadow; 30 | } 31 | %appearance_hovered-list-item { 32 | color: $list-item-hovered-text; 33 | background-color: $list-item-hovered-bg; 34 | } 35 | %appearance_selected-list-item { 36 | color: $list-item-selected-text; 37 | background-color: $list-item-selected-bg; 38 | } 39 | 40 | $_node-imported: true; 41 | 42 | } 43 | 44 | 45 | @mixin appearance_node { @extend %appearance_node }; 46 | @mixin appearance_hovered-node { @extend %appearance_hovered-node }; 47 | @mixin appearance_selected-node { @extend %appearance_selected-node }; 48 | 49 | @mixin appearance_list-item { @extend %appearance_list-item }; 50 | @mixin appearance_hovered-list-item { @extend %appearance_hovered-list-item }; 51 | @mixin appearance_focused-list-item { @extend %appearance_focused-list-item }; 52 | @mixin appearance_selected-list-item { @extend %appearance_selected-list-item }; 53 | -------------------------------------------------------------------------------- /scss/mixins/_widget.scss: -------------------------------------------------------------------------------- 1 | $_widget-imported: false !default; 2 | 3 | @if ( $_widget-imported == false ) { 4 | 5 | %appearance_widget { 6 | color: $widget-text; 7 | background-color: $widget-bg; 8 | border-color: $widget-border; 9 | } 10 | 11 | %appearance_panel { 12 | color: $panel-text; 13 | background-color: $panel-bg; 14 | border-color: $panel-border; 15 | } 16 | %appearance_popup { 17 | color: $popup-text; 18 | background-color: $popup-bg; 19 | border-color: $popup-border; 20 | } 21 | 22 | %appearance_header { 23 | color: $header-text; 24 | background-color: $header-bg; 25 | border-color: $header-border; 26 | @include linear-gradient( $header-gradient ); 27 | } 28 | %appearance_hovered-header { 29 | color: $header-hovered-text; 30 | background-color: $header-hovered-bg; 31 | border-color: $header-hovered-border; 32 | @include linear-gradient( $header-hovered-gradient ); 33 | } 34 | %appearance_selected-header { 35 | color: $header-selected-text; 36 | background-color: $header-selected-bg; 37 | border-color: $header-selected-border; 38 | @include linear-gradient( $header-selected-gradient ); 39 | } 40 | 41 | $_widget-imported: true; 42 | 43 | } 44 | 45 | @mixin appearance_widget { @extend %appearance_widget; } 46 | 47 | @mixin appearance_panel { @extend %appearance_panel; } 48 | @mixin appearance_popup { @extend %appearance_popup; } 49 | 50 | @mixin appearance_header { @extend %appearance_header }; 51 | @mixin appearance_hovered-header { @extend %appearance_hovered-header }; 52 | @mixin appearance_selected-header { @extend %appearance_selected-header }; 53 | -------------------------------------------------------------------------------- /scss/mixins/core/_data-uri.scss: -------------------------------------------------------------------------------- 1 | /// A list of files converted to data URIs 2 | /// @access private 3 | $data-uris: () !default; 4 | 5 | /// Saves a data URI that can be used from the $data-uris map instead of a file reference. 6 | /// @access private 7 | /// @param {String} $name - The name of the resource. 8 | /// @param {String} $content - The data URI of the resource. 9 | /// @require $data-uris 10 | @mixin register-data-uri($name, $content) { 11 | @if (map-has-key($data-uris, $name)) { 12 | @warn "Attempt to redefine data URI of file `#{$name}`."; 13 | } 14 | 15 | $data-uris: map-merge($data-uris, ($name: $content)) !global; 16 | } 17 | -------------------------------------------------------------------------------- /scss/mixins/core/_import-once.scss: -------------------------------------------------------------------------------- 1 | /// A list of exported modules. 2 | /// @access private 3 | $imported-modules: () !default; 4 | 5 | /// Outputs a module once, no matter how many times it is included. 6 | /// @access public 7 | /// @param {String} $name - The name of the exported module. 8 | /// @require $imported-modules 9 | @mixin exports($name) { 10 | @if (index($imported-modules, $name) == null) { 11 | $imported-modules: append($imported-modules, $name) !global; 12 | @content; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /scss/mixins/core/_math.scss: -------------------------------------------------------------------------------- 1 | // Add two 2 | @function add-two( $one, $two, $multiplier: 1 ) { 3 | $_unit-1: unit($one); 4 | $_unit-2: unit($two); 5 | 6 | $_one: $multiplier * $one; 7 | $_two: $multiplier * $two; 8 | 9 | // if either is zero 10 | @if $_one == 0 { 11 | @return $_two; 12 | } 13 | 14 | @if $_two == 0 { 15 | @return $_one; 16 | } 17 | 18 | // if all units are same type 19 | @if $_unit-1 == $_unit-2 { 20 | @return $_one + $_two; 21 | } 22 | 23 | // Fall back to calc 24 | @return calc( #{$_one} + #{$_two} ); 25 | } 26 | 27 | 28 | // Add three 29 | @function add-three( $one, $two, $three, $multiplier: 1 ) { 30 | $_unit-1: unit($one); 31 | $_unit-2: unit($two); 32 | $_unit-3: unit($three); 33 | 34 | $_one: $multiplier * $one; 35 | $_two: $multiplier * $two; 36 | $_three: $multiplier * $three; 37 | 38 | // pass to add-two if any component is zero 39 | @if $_one == 0 { 40 | @return add-two($two, $three, $multiplier); 41 | } 42 | 43 | @if $_two == 0 { 44 | @return add-two($one, $three, $multiplier); 45 | } 46 | 47 | @if $_three == 0 { 48 | @return add-two($one, $two, $multiplier); 49 | } 50 | 51 | 52 | // if all units are same type 53 | @if $_unit-1 == $_unit-2 == $_unit-3 { 54 | @return $_one + $_two + $_three; 55 | } 56 | 57 | // if $_unit-1 and $_unit-2 are same type 58 | @if $_unit-1 == $_unit-2 { 59 | @return calc( #{$_one + $_two} + #{$_three} ); 60 | } 61 | 62 | // if $_unit-1 and $_unit-3 are same type 63 | @if $_unit-1 == $_unit-3 { 64 | @return calc( #{$_one + $_three} + #{$_two} ); 65 | } 66 | 67 | // if $_unit-2 and $_unit-3 are same type 68 | @if $_unit-2 == $_unit-3 { 69 | @return calc( #{$_one} + #{$_two + $_three} ); 70 | } 71 | 72 | // Fall back to calc 73 | @return calc( #{$_one} + #{$_two} + #{$_three} ); 74 | } 75 | -------------------------------------------------------------------------------- /scss/mixins/core/_placeholder-selectors.scss: -------------------------------------------------------------------------------- 1 | @include exports( "placeholder-selectors" ) { 2 | 3 | // Box sizing `border-box` 4 | %border-box { 5 | box-sizing: border-box; 6 | } 7 | 8 | // Box sizing `content-box` 9 | %content-box { 10 | box-sizing: content-box; 11 | } 12 | 13 | // Display `none` 14 | %display-none { 15 | display: none; 16 | } 17 | 18 | // Display `block` 19 | %display-block { 20 | display: block; 21 | } 22 | 23 | // Display `inline-block` 24 | %display-inline-block { 25 | display: inline-block; 26 | } 27 | 28 | // Display `inline` 29 | %display-inline { 30 | display: inline; 31 | } 32 | 33 | // Display `flex` 34 | %display-flex { 35 | display: flex; 36 | } 37 | 38 | // Display `inline-flex` 39 | %display-flex { 40 | display: inline-flex; 41 | } 42 | 43 | // Position `static` 44 | %position-static { 45 | position: static; 46 | } 47 | 48 | // Position `relative` 49 | %position-relative { 50 | position: relative; 51 | } 52 | 53 | // Position `absolute` 54 | %position-absolute { 55 | position: absolute; 56 | } 57 | 58 | // Position `fixed` 59 | %position-fixed { 60 | position: fixed; 61 | } 62 | 63 | // Overflow `hidden` 64 | %overflow-hidden { 65 | overflow: hidden; 66 | } 67 | 68 | // Overflow `auto` 69 | %overflow-auto { 70 | overflow: auto; 71 | } 72 | 73 | // Overflow `scroll` 74 | %overflow-scroll { 75 | overflow: scroll; 76 | } 77 | 78 | // Overflow X `auto` 79 | %overflow-x-auto { 80 | @extend %overflow-hidden; 81 | overflow-x: auto; 82 | } 83 | 84 | // Overflow Y `auto` 85 | %overflow-y-auto { 86 | @extend %overflow-hidden; 87 | overflow-y: auto; 88 | } 89 | 90 | // Text align `left` 91 | %text-align-left, 92 | %text-left { 93 | text-align: left; 94 | } 95 | 96 | // Text align `center` 97 | %text-align-center, 98 | %text-center { 99 | text-align: center; 100 | } 101 | 102 | // Text align `right` 103 | %text-align-right, 104 | %text-right { 105 | text-align: right; 106 | } 107 | 108 | // Text align `justify` 109 | %text-align-justify, 110 | %text-justify { 111 | text-align: justify; 112 | } 113 | 114 | // Float `left` 115 | %float-left { 116 | float: left; 117 | } 118 | 119 | // Float `right` 120 | %float-right { 121 | float: right; 122 | } 123 | 124 | // Vertical align `middle` 125 | %vertical-align-middle { 126 | vertical-align: middle; 127 | } 128 | 129 | // Cursor `pointer` 130 | %cursor-pointer { 131 | cursor: pointer; 132 | } 133 | 134 | // Cursor `default` 135 | %cursor-default { 136 | cursor: default; 137 | } 138 | 139 | // Text Decoration 140 | %text-decoration-none { 141 | text-decoration: none; 142 | } 143 | %text-decoration-underline, 144 | %text-underline { 145 | text-decoration: underline; 146 | } 147 | 148 | // Font weight `normal` 149 | %font-weight-normal { 150 | font-weight: normal; 151 | } 152 | 153 | // Font weight `bold` 154 | %font-weight-bold { 155 | font-weight: bold; 156 | } 157 | 158 | // Text overflow 159 | %ellipsis { 160 | overflow: hidden; 161 | text-overflow: ellipsis; 162 | white-space: nowrap; 163 | word-wrap: break-word; 164 | } 165 | 166 | // Poiter events 167 | %pointer-events-none { 168 | pointer-events: none; 169 | } 170 | %pointer-events-all { 171 | pointer-events: all; 172 | } 173 | 174 | } 175 | -------------------------------------------------------------------------------- /scss/mixins/vendor/color-helpers/_contrast.scss: -------------------------------------------------------------------------------- 1 | // From https://github.com/voxpelli/sass-color-helpers 2 | 3 | 4 | @function ch-color-luminance($color) { 5 | // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js 6 | // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef 7 | $rgba: red($color), green($color), blue($color); 8 | $rgba2: (); 9 | 10 | @for $i from 1 through 3 { 11 | $rgb: nth($rgba, $i); 12 | $rgb: $rgb / 255; 13 | 14 | $rgb: if($rgb < .03928, $rgb / 12.92, ch-pow(($rgb + .055) / 1.055, 2.4, 16)); 15 | 16 | $rgba2: append($rgba2, $rgb); 17 | } 18 | 19 | @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3); 20 | } 21 | 22 | @function ch-color-contrast($color1, $color2) { 23 | // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js 24 | // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef 25 | $luminance1: ch-color-luminance($color1) + .05; 26 | $luminance2: ch-color-luminance($color2) + .05; 27 | $ratio: $luminance1 / $luminance2; 28 | 29 | @if $luminance2 > $luminance1 { 30 | $ratio: 1 / $ratio; 31 | } 32 | 33 | $ratio: round($ratio * 10) / 10; 34 | 35 | @return $ratio; 36 | } 37 | 38 | @function ch-best-color-contrast($base, $colors: (#fff, #000), $tolerance: 0) { 39 | $best: nth($colors, 1); 40 | $contrast: ch-color-contrast($base, $best); 41 | 42 | @for $i from 2 through length($colors) { 43 | $currentColor: nth($colors, $i); 44 | $currentContrast: ch-color-contrast($base, $currentColor); 45 | @if ($currentContrast - $contrast > $tolerance) { 46 | $best: $currentColor; 47 | $contrast: $currentContrast; 48 | } 49 | } 50 | 51 | @if ($contrast < 3) { 52 | @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}"; 53 | } 54 | 55 | @return $best; 56 | } 57 | -------------------------------------------------------------------------------- /scss/mixins/vendor/color-helpers/_math.scss: -------------------------------------------------------------------------------- 1 | // From https://github.com/voxpelli/sass-color-helpers 2 | 3 | 4 | @function ch-max($v1, $v2) { 5 | @return if($v1 > $v2, $v1, $v2); 6 | } 7 | 8 | @function ch-min($v1, $v2) { 9 | @return if($v1 < $v2, $v1, $v2); 10 | } 11 | 12 | @function ch-gcd($a, $b) { 13 | // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript 14 | @if ($b != 0) { 15 | @return ch-gcd($b, $a % $b); 16 | } @else { 17 | @return abs($a); 18 | } 19 | } 20 | 21 | @function ch-pow($base, $exponent, $prec: 12) { 22 | // Handles decimal exponents by trying to convert them into a fraction and then use a nthRoot-algorithm for parts of the calculation 23 | @if (floor($exponent) != $exponent) { 24 | $prec2 : ch-pow(10, $prec); 25 | $exponent: round($exponent * $prec2); 26 | $denominator: ch-gcd($exponent, $prec2); 27 | @return ch-nth-root(ch-pow($base, $exponent / $denominator), $prec2 / $denominator, $prec); 28 | } 29 | 30 | $value: $base; 31 | @if $exponent > 1 { 32 | @for $i from 2 through $exponent { 33 | $value: $value * $base; 34 | } 35 | } @else if $exponent < 1 { 36 | @for $i from 0 through -$exponent { 37 | $value: $value / $base; 38 | } 39 | } 40 | 41 | @return $value; 42 | } 43 | 44 | @function ch-nth-root($num, $n: 2, $prec: 12) { 45 | // From: http://rosettacode.org/wiki/Nth_root#JavaScript 46 | $x: 1; 47 | 48 | @for $i from 0 through $prec { 49 | $x: 1 / $n * (($n - 1) * $x + ($num / ch-pow($x, $n - 1))); 50 | } 51 | 52 | @return $x; 53 | } 54 | -------------------------------------------------------------------------------- /scss/multiselect.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "common/forms"; 8 | @import "button"; 9 | 10 | 11 | // Component 12 | @import "multiselect/layout"; 13 | @import "multiselect/theme"; 14 | -------------------------------------------------------------------------------- /scss/multiselect/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("multiselect/layout") { 2 | 3 | // Base 4 | .k-multiselect { 5 | @include border-radius(); 6 | width: 100%; 7 | 8 | .k-loading-hidden { 9 | visibility: hidden; 10 | } 11 | 12 | .k-clear-value { 13 | top: $input-padding-y; 14 | margin-top: 0; 15 | } 16 | 17 | &[dir='rtl'], 18 | .k-rtl & { 19 | li.k-button { 20 | float: right; 21 | } 22 | 23 | .k-multiselect-wrap { 24 | padding-left: ($padding-x * 3); 25 | padding-right: 0; 26 | 27 | .k-searchbar { 28 | float: right; 29 | } 30 | 31 | .k-button { 32 | width: auto; 33 | margin: $padding-y-sm $padding-y-sm 0 0; 34 | 35 | .k-select { 36 | margin-left: 0; 37 | margin-right: $padding-x; 38 | } 39 | } 40 | 41 | .k-i-loading { 42 | left: $padding-x; 43 | right: auto; 44 | } 45 | } 46 | } 47 | } 48 | 49 | .k-multiselect-wrap { 50 | min-height: calc( #{$input-inner-calc-size} ); 51 | padding-right: ($padding-x * 3); 52 | cursor: text; 53 | 54 | // Token list 55 | ul { 56 | vertical-align: top; 57 | } 58 | li.k-button { 59 | float: left; 60 | } 61 | 62 | 63 | // Token 64 | .k-button { 65 | min-height: calc(#{$form-line-height}*1em + #{$button-padding-y-sm} + 2px); 66 | padding: ($button-padding-y-sm / 2) ($button-padding-x / 2); 67 | margin: $padding-y-sm 0 0 $padding-y-sm; 68 | cursor: default; 69 | display: inline-flex; 70 | flex-direction: row; 71 | align-items: center; 72 | line-height: inherit; 73 | white-space: normal; 74 | 75 | .k-select { 76 | display: flex; 77 | cursor: pointer; 78 | margin-left: $padding-x; 79 | } 80 | 81 | &:last-child { 82 | margin-bottom: $padding-y-sm; 83 | } 84 | } 85 | 86 | .k-searchbar { 87 | // search bar must be floated to align after any selected tags 88 | // (or align below them, if space is not available) 89 | float: left; 90 | width: auto; 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /scss/multiselect/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("multiselect/theme") { 2 | 3 | // Appearance 4 | .k-multiselect { 5 | @include appearance( input ); 6 | background-clip: padding-box; 7 | 8 | .k-ie11 &, 9 | .k-edge12 &, 10 | .k-edge13 & { 11 | background-clip: border-box; 12 | } 13 | 14 | li { 15 | background-clip: padding-box; 16 | 17 | .k-ie11 &, 18 | .k-edge12 &, 19 | .k-edge13 & { 20 | background-clip: border-box; 21 | } 22 | 23 | .k-icon { 24 | opacity: .6; 25 | cursor: pointer; 26 | } 27 | 28 | .k-icon:hover { 29 | opacity: 1; 30 | } 31 | 32 | &.k-button:active, 33 | &.k-button.k-state-active { 34 | @include appearance( pressed-button ); 35 | } 36 | 37 | // Focused state 38 | &:focus, 39 | &.k-state-focused { 40 | .k-icon { 41 | opacity: 1; 42 | } 43 | } 44 | } 45 | 46 | &.k-state-focused { 47 | .k-multiselect-wrap { 48 | @include appearance( focused-input ); 49 | } 50 | } 51 | &.k-disabled { 52 | .k-multiselect-wrap { 53 | @include appearance( disabled-input ); 54 | } 55 | } 56 | 57 | .k-i-loading { 58 | background-color: $input-bg; 59 | } 60 | } 61 | 62 | .k-multiselect-wrap { 63 | @include appearance( input ); 64 | 65 | > .k-readonly { 66 | opacity: .6; 67 | } 68 | 69 | &:hover { 70 | @include appearance( hovered-input ); 71 | } 72 | } 73 | 74 | } 75 | -------------------------------------------------------------------------------- /scss/no-flexbox.scss: -------------------------------------------------------------------------------- 1 | .k-no-flexbox { 2 | .k-calendar-infinite { 3 | height: 330px; 4 | 5 | .k-calendar-navigation, 6 | .k-calendar-monthview { 7 | height: 100%; 8 | float: left; 9 | } 10 | 11 | .k-calendar-header { 12 | display: block; 13 | 14 | .k-today { 15 | float: right; 16 | } 17 | } 18 | } 19 | 20 | .k-dateinput-wrap, 21 | .k-dropdown-wrap, 22 | .k-numeric-wrap, 23 | .k-picker-wrap { 24 | $k-select-width: 2em; 25 | display: block; 26 | 27 | .k-input { 28 | width: calc(100% - #{$k-select-width}); 29 | } 30 | .k-input, 31 | .k-select { 32 | display: inline-block; 33 | vertical-align: middle; 34 | } 35 | } 36 | 37 | .k-timepicker, 38 | .k-datepicker { 39 | display: inline-block; 40 | 41 | .k-dateinput-wrap { 42 | display: inline-block; 43 | } 44 | 45 | .k-select { 46 | position: absolute; 47 | top: 0; 48 | right: 0; 49 | bottom: 0; 50 | } 51 | } 52 | 53 | .k-time-list-wrapper, 54 | .k-time-separator { 55 | display: inline-block; 56 | vertical-align: middle; 57 | } 58 | 59 | .k-grid { 60 | $grid-chrome-height: 37px !default; 61 | .k-grid-container { 62 | height: calc( 100% - #{$grid-chrome-height} ); 63 | display: block; 64 | } 65 | 66 | .k-grid-content { 67 | height: 100%; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/notification/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("notification/layout") { 2 | 3 | $alert-padding-y: 1em !default; 4 | $alert-padding-x: 1em !default; 5 | 6 | // Base 7 | .k-notification { 8 | padding: 0; 9 | @include border-radius(); 10 | } 11 | .k-notification-wrap { 12 | font-size: $font-size-sm; 13 | padding: $alert-padding-y $alert-padding-x * 2 $alert-padding-y $alert-padding-x; 14 | white-space: nowrap; 15 | cursor: default; 16 | position: relative; 17 | line-height: $line-height-em; 18 | 19 | > .k-icon { 20 | margin-right: $padding-x; 21 | vertical-align: middle; 22 | } 23 | 24 | > .k-i-close { 25 | margin: 0; 26 | position: absolute; 27 | top: $alert-padding-y; 28 | right: $alert-padding-x / 2; 29 | font-size: inherit; 30 | line-height: inherit; 31 | 32 | &::before { 33 | font-size: $icon-size; 34 | } 35 | } 36 | } 37 | 38 | .k-rtl .k-notification-wrap { 39 | padding: $alert-padding-y $alert-padding-x $alert-padding-y $alert-padding-x * 2; 40 | 41 | > .k-icon { 42 | margin-right: 0; 43 | margin-left: $padding-x; 44 | } 45 | 46 | > .k-i-close { 47 | margin: 0; 48 | right: auto; 49 | left: $padding-x-sm; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /scss/notification/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("notification/theme") { 2 | 3 | // Theme 4 | .k-notification { 5 | @include appearance( panel ); 6 | } 7 | .k-notification-info { 8 | border-color: $notification-info-border; 9 | color: $notification-info-text; 10 | background-color: $notification-info-bg; 11 | } 12 | .k-notification-success { 13 | border-color: $notification-success-border; 14 | color: $notification-success-text; 15 | background-color: $notification-success-bg; 16 | } 17 | .k-notification-warning { 18 | border-color: $notification-warning-border; 19 | color: $notification-warning-text; 20 | background-color: $notification-warning-bg; 21 | } 22 | .k-notification-error { 23 | border-color: $notification-error-border; 24 | color: $notification-error-text; 25 | background-color: $notification-error-bg; 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/numerictextbox/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("numerictextbox/layout") { 2 | 3 | // Base 4 | .k-numerictextbox { 5 | 6 | .k-rtl &, 7 | &[dir='rtl'] { 8 | .k-numeric-wrap .k-i-warning { 9 | align-self: center; 10 | margin-right: 0; 11 | margin-left: $spacer-x / 2; 12 | } 13 | } 14 | } 15 | 16 | .k-numeric-wrap { 17 | .k-i-warning { 18 | align-self: center; 19 | margin-right: $spacer-x / 2; 20 | } 21 | 22 | > .k-input { 23 | flex: 1 1 0; 24 | 25 | &:invalid { 26 | box-shadow: none; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/numerictextbox/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("numerictextbox/theme") { 2 | $numerictextbox-icon-offset: 2px !default; 3 | 4 | // Numeric 5 | .k-numerictextbox { 6 | 7 | // Normal state 8 | .k-numeric-wrap { 9 | @include appearance( input ); 10 | background-clip: padding-box; 11 | 12 | .k-ie11 &, 13 | .k-edge12 &, 14 | .k-edge13 & { 15 | background-clip: border-box; 16 | } 17 | } 18 | .k-select { 19 | @include appearance( button ); 20 | padding: 0; 21 | width: button-inner-size(); 22 | border-width: 0; 23 | 24 | &:hover { 25 | @include appearance( hovered-button ); 26 | } 27 | 28 | > .k-state-selected, 29 | > .k-state-active { 30 | color: darken($text-color, 25%); 31 | @include appearance( hovered-button ); 32 | box-shadow: inset $button-focused-shadow; 33 | } 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 | // Hovered state 45 | .k-state-hover { 46 | @include appearance( hovered-input ); 47 | 48 | .k-select { @include appearance( hovered-button ); } 49 | } 50 | 51 | // Focused state 52 | .k-state-focused { 53 | @include appearance( focused-input ); 54 | } 55 | 56 | .k-numeric-wrap.k-state-invalid { 57 | color: $error; 58 | border-color: $invalid-border; 59 | 60 | .k-select { 61 | color: $error; 62 | } 63 | } 64 | } 65 | 66 | } 67 | -------------------------------------------------------------------------------- /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"; 13 | -------------------------------------------------------------------------------- /scss/pager/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("pager/layout") { 2 | $pager-buttons-size: calc(#{$form-line-height-em} + 2px) !default; /// icon button size + 2px border (top and bottom) 3 | 4 | .k-pager-wrap { 5 | padding: $pager-padding-y $pager-padding-x; 6 | border-width: 1px; 7 | line-height: $form-line-height; 8 | display: flex; 9 | align-items: center; 10 | overflow: hidden; 11 | cursor: default; 12 | flex: 0 0 auto; 13 | 14 | .k-link, 15 | .k-state-selected { 16 | padding: $button-padding-y; 17 | width: $pager-buttons-size; 18 | height: $pager-buttons-size; 19 | line-height: $pager-buttons-size; 20 | box-sizing: content-box; 21 | display: inline-flex; 22 | align-items: center; 23 | justify-content: center; 24 | position: relative; 25 | text-align: center; 26 | z-index: 1; 27 | 28 | > .k-icon { 29 | vertical-align: middle; 30 | } 31 | 32 | } 33 | .k-link:hover, 34 | .k-state-selected { 35 | z-index: 2; 36 | } 37 | .k-link:focus, 38 | .k-state-selected { 39 | text-decoration: none; 40 | outline: none; 41 | } 42 | .k-link.k-state-disabled { 43 | color: inherit; 44 | } 45 | > .k-pager-nav {} 46 | > .k-pager-nav + .k-pager-nav {} 47 | 48 | 49 | .k-pager-numbers { 50 | display: inline-flex; 51 | flex-direction: row; 52 | 53 | li { 54 | display: inline-block; 55 | } 56 | 57 | .k-current-page { 58 | display: none; 59 | } 60 | .k-current-page + li { 61 | margin-left: 0; 62 | } 63 | } 64 | 65 | .k-label { 66 | margin: 0 $spacer-x; 67 | display: flex; 68 | align-items: center; 69 | } 70 | .k-pager-input { 71 | .k-textbox { 72 | margin: 0 1ex; 73 | width: 3em; 74 | } 75 | } 76 | .k-pager-sizes { 77 | .k-dropdown, 78 | > select { 79 | width: 5.2em; 80 | margin: 0 $padding-x; 81 | } 82 | } 83 | .k-pager-refresh { 84 | order: 10; 85 | } 86 | .k-pager-info { 87 | flex: 1; 88 | text-align: right; 89 | order: 9; 90 | justify-content: flex-end; 91 | } 92 | 93 | [dir = "rtl"] &, 94 | .k-rtl & { 95 | .k-i-arrow-e, 96 | .k-i-arrow-w, 97 | .k-i-seek-e, 98 | .k-i-seek-w { 99 | transform: scaleX(-1); 100 | } 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /scss/pager/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("pager/theme") { 2 | $pager-text: $header-text !default; 3 | $pager-bg: $header-bg !default; 4 | $pager-items-hover-bg: $list-item-hovered-bg !default; 5 | $pager-numbers-text: $accent !default; 6 | $pager-numbers-selected-text: $accent-contrast !default; 7 | 8 | .k-pager-wrap { 9 | color: $pager-text; 10 | background-color: $pager-bg; 11 | 12 | .k-link, 13 | .k-pager-nav { 14 | &:focus { 15 | box-shadow: $list-item-focused-shadow; 16 | } 17 | &:hover { 18 | background-color: $pager-items-hover-bg; 19 | } 20 | } 21 | 22 | .k-state-selected { 23 | &:focus { 24 | box-shadow: none; 25 | } 26 | &:hover { 27 | color: $selected-text; 28 | background-color: $selected-bg; 29 | cursor: default; 30 | } 31 | } 32 | } 33 | .k-pager-numbers { 34 | .k-link, 35 | .k-link:link { 36 | color: $pager-numbers-text; 37 | 38 | &.k-state-selected { 39 | color: $accent-contrast; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/panelbar/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("panelbar/layout") { 2 | 3 | // Base 4 | .k-panelbar { 5 | margin: 0; 6 | padding: 0; 7 | list-style: none; 8 | 9 | 10 | // Root 11 | > .k-item { 12 | // TODO 13 | border-width: 0; 14 | border-style: solid; 15 | border-color: inherit; 16 | display: block; 17 | 18 | > .k-link { 19 | padding: $header-padding-y $header-padding-x; 20 | color: inherit; 21 | background: none; 22 | text-decoration: none; 23 | display: flex; 24 | flex-direction: row; 25 | align-items: center; 26 | align-content: center; 27 | position: relative; 28 | user-select: none; 29 | cursor: default; 30 | transition: $transition; 31 | } 32 | } 33 | > .k-item + .k-item { 34 | border-top-width: 1px; 35 | } 36 | 37 | 38 | // Sub 39 | .k-group { 40 | margin: 0; 41 | padding: 0; 42 | list-style: none; 43 | } 44 | .k-group > .k-item { 45 | display: block; 46 | 47 | > .k-link { 48 | padding: $list-item-padding-y $list-item-padding-x; 49 | color: inherit; 50 | text-decoration: none; 51 | display: flex; 52 | flex-direction: row; 53 | align-items: center; 54 | align-content: center; 55 | position: relative; 56 | user-select: none; 57 | cursor: default; 58 | transition: $transition; 59 | } 60 | } 61 | 62 | 63 | // Expand collapse 64 | .k-panelbar-expand, 65 | .k-panelbar-collapse { 66 | margin-top: -.5em; 67 | position: absolute; 68 | top: 50%; 69 | right: $header-padding-x; 70 | } 71 | 72 | .k-link > .k-image, 73 | .k-link > .k-sprite { 74 | vertical-align: middle; 75 | float: left; 76 | margin-right: 5px; 77 | } 78 | 79 | &[dir='rtl'], 80 | .k-rtl & { 81 | .k-panelbar-expand, 82 | .k-panelbar-collapse { 83 | right: auto; 84 | left: $header-padding-x; 85 | } 86 | } 87 | } 88 | 89 | } 90 | -------------------------------------------------------------------------------- /scss/panelbar/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports('panelbar/theme') { 2 | $panelbar-root-hover-bg: darken($widget-bg, 5%); 3 | 4 | .k-panelbar { 5 | border-color: $panel-border; 6 | color: $panel-text; 7 | background-color: $panel-bg; 8 | background-clip: padding-box; 9 | 10 | .k-ie11 &, 11 | .k-edge12 &, 12 | .k-edge13 & { 13 | background-clip: border-box; 14 | } 15 | 16 | .k-content { 17 | color: $base-text; 18 | background-color: $base-bg; 19 | } 20 | 21 | // Root 22 | > .k-item { 23 | background-clip: padding-box; 24 | 25 | .k-ie11 &, 26 | .k-edge12 &, 27 | .k-edge13 & { 28 | background-clip: border-box; 29 | } 30 | 31 | > .k-link { 32 | color: $link-text; 33 | 34 | .k-icon { 35 | color: $base-text; 36 | } 37 | } 38 | 39 | > .k-link:hover, 40 | > .k-link.k-state-hover { 41 | color: $link-hover-text; 42 | background-color: $panelbar-root-hover-bg; 43 | } 44 | 45 | > .k-link.k-state-selected:not(.k-state-expanded), 46 | > .k-link.k-state-selected:not(.k-state-active) { 47 | @include appearance( selected-node ); 48 | 49 | .k-icon { 50 | color: $selected-text; 51 | } 52 | 53 | &:hover, 54 | &.k-state-hover { 55 | color: $selected-hover-color; 56 | background-color: $selected-hover-bg; 57 | } 58 | } 59 | 60 | &.k-state-expanded > .k-link, 61 | &.k-state-active > .k-link { 62 | @include appearance( node ); 63 | font-weight: 500; 64 | 65 | .k-icon { 66 | color: $base-text; 67 | } 68 | 69 | &:hover, 70 | &.k-state-hover { 71 | @include appearance( hovered-node ); 72 | } 73 | } 74 | 75 | > .k-link.k-state-focused { 76 | box-shadow: $list-item-focused-shadow; 77 | } 78 | } 79 | 80 | // Sub 81 | .k-group { 82 | color: $base-text; 83 | background-color: $base-bg; 84 | 85 | > .k-item > .k-link:hover, 86 | > .k-item > .k-link.k-state-hover { 87 | @include appearance( hovered-node ); 88 | 89 | &.k-state-selected { 90 | color: $selected-hover-color; 91 | background-color: $selected-hover-bg; 92 | } 93 | } 94 | 95 | > .k-item > .k-link.k-state-selected { 96 | @include appearance( selected-node ); 97 | } 98 | 99 | > .k-item > .k-link.k-state-focused { 100 | box-shadow: $list-item-focused-shadow; 101 | } 102 | 103 | } 104 | 105 | } 106 | 107 | } 108 | -------------------------------------------------------------------------------- /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"; 14 | -------------------------------------------------------------------------------- /scss/pivotgrid/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports('pivotgrid/theme') { 2 | $pivotgrid-alt-bg: $header-bg !default; 3 | $pivotgrid-chrome-border: $border-color !default; 4 | 5 | $pivotgrid-container-bg: $bg-color !default; 6 | $pivotgrid-row-headers-bg: darken($bg-color, 7%) !default; 7 | 8 | .k-alt, 9 | .k-pivot-toolbar, 10 | .k-pivot-layout > tbody > tr:first-child > td:first-child { 11 | background-color: $pivotgrid-alt-bg; 12 | } 13 | 14 | .k-fieldselector .k-list-container { 15 | background-color: $pivotgrid-container-bg; 16 | } 17 | 18 | .k-pivot-toolbar, 19 | .k-pivot-table, 20 | .k-fieldselector .k-list-container, 21 | .k-fieldselector .k-columns > div, 22 | .k-pivot-rowheaders > .k-grid td:first-child, 23 | .k-pivot-table .k-grid-header .k-header.k-first { 24 | border-color: $pivotgrid-chrome-border; 25 | } 26 | 27 | .k-pivot-rowheaders .k-alt .k-alt, 28 | .k-header.k-alt { 29 | background-color: $pivotgrid-row-headers-bg; 30 | } 31 | 32 | .k-pivot-toolbar .k-button, 33 | .k-fieldselector .k-list li.k-item { 34 | @include appearance( button ); 35 | background-clip: padding-box; 36 | 37 | .k-ie11 &, 38 | .k-edge12 &, 39 | .k-edge13 & { 40 | background-clip: border-box; 41 | } 42 | 43 | &:hover, 44 | &.k-state-hover { 45 | @include appearance( hovered-button ); 46 | } 47 | 48 | // Pressed state 49 | &:active, 50 | &.k-state-active { 51 | @include fill( $button-text, $button-bg, $button-border, #{to top, $button-gradient} ); 52 | box-shadow: $button-pressed-shadow; 53 | } 54 | 55 | // Focused state 56 | &:focus, 57 | &.k-state-focused { 58 | box-shadow: $button-focused-shadow; 59 | } 60 | } 61 | 62 | /* Loading indicator */ 63 | .k-fieldselector { 64 | .k-i-loading { 65 | border-color: $header-bg; 66 | } 67 | 68 | .k-i-loading::before, 69 | .k-i-loading::after { 70 | background-color: $header-bg; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /scss/popup.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | 8 | 9 | // Component 10 | @import "popup/layout"; 11 | @import "popup/theme"; 12 | -------------------------------------------------------------------------------- /scss/popup/_theme.scss: -------------------------------------------------------------------------------- 1 | // TODO: list item variables 2 | $list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default; 3 | 4 | $popup-text: $normal-text-color !default; 5 | 6 | $list-container-no-data-text: rgba( $text-color, .5 ) !default; 7 | 8 | @include exports('popup/theme') { 9 | 10 | .k-popup { 11 | @include appearance( popup ); 12 | background-clip: padding-box; 13 | 14 | .k-ie11 &, 15 | .k-edge12 &, 16 | .k-edge13 & { 17 | background-clip: border-box; 18 | } 19 | } 20 | .k-popup > .k-group-header, 21 | .k-popup > .k-virtual-wrap > .k-group-header { 22 | border-bottom-color: $border-color; 23 | box-shadow: $list-container-shadow; 24 | } 25 | .k-popup .k-list .k-item > .k-group { 26 | background: $text-color; 27 | color: $bg-color; 28 | } 29 | .k-popup .k-list .k-item > .k-group::before { 30 | border-color: $text-color $text-color transparent transparent; 31 | } 32 | .k-group-header+div > .k-list > .k-item.k-first::before { 33 | border-color: $border-color; 34 | } 35 | } 36 | 37 | @include exports( "list/theme" ) { 38 | 39 | .k-list {} 40 | 41 | .k-list .k-item { 42 | transition: all .2s ease; // sass-lint:disable-block no-transition-all 43 | } 44 | 45 | .k-list .k-item:hover, 46 | .k-list .k-item.k-state-hover, 47 | .k-list-optionlabel:hover { 48 | @include appearance( hovered-list-item ); 49 | 50 | &.k-state-selected { 51 | color: $list-item-selected-text; 52 | background-color: blend-multiply( $list-item-selected-bg, $list-item-hovered-bg ); 53 | } 54 | } 55 | 56 | .k-list .k-item:focus, 57 | .k-list .k-item.k-state-focused { 58 | @include appearance( focused-list-item ); 59 | } 60 | 61 | .k-list .k-item.k-state-selected, 62 | .k-list-optionlabel.k-state-selected { 63 | @include appearance( selected-list-item ); 64 | } 65 | 66 | .k-animation-container { 67 | @include border-bottom-radius-only(); 68 | } 69 | 70 | .k-animation-container-shown, 71 | .k-animation-container > .k-popup { 72 | box-shadow: $popup-shadow; 73 | } 74 | 75 | .k-animation-container-fixed > .k-popup { 76 | box-shadow: none; 77 | } 78 | } 79 | 80 | 81 | 82 | 83 | @include exports( "listcontainer/theme" ) { 84 | 85 | 86 | .k-list-container { 87 | 88 | // Button normal state 89 | .k-button { 90 | box-shadow: none; 91 | } 92 | 93 | 94 | // Button hover state 95 | .k-button:hover, 96 | .k-button.k-state-hover { 97 | @include appearance( hovered-list-item ); 98 | background-image: none; 99 | } 100 | 101 | // Button pressed state 102 | .k-button:active, 103 | .k-button.k-state-active { 104 | @include appearance( selected-list-item ); 105 | background-image: none; 106 | } 107 | 108 | 109 | // Button focus state 110 | .k-button:focus, 111 | .k-button.k-state-focused { 112 | box-shadow: $list-item-focused-shadow; 113 | } 114 | 115 | .k-nodata { 116 | color: $list-container-no-data-text; 117 | } 118 | 119 | } 120 | 121 | } 122 | -------------------------------------------------------------------------------- /scss/progressbar.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "progressbar/images/indeterminate"; 8 | 9 | 10 | // Component 11 | @import "progressbar/layout"; 12 | @import "progressbar/theme"; 13 | -------------------------------------------------------------------------------- /scss/progressbar/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports('progressbar/layout') { 2 | 3 | // Base 4 | .k-progressbar { 5 | @include border-radius(); 6 | border-width: 0; 7 | font-size: $font-size-sm; 8 | line-height: $progressbar-height; 9 | display: inline-flex; 10 | vertical-align: middle; 11 | position: relative; 12 | overflow: hidden; 13 | 14 | 15 | // Status 16 | .k-progress-status-wrap { 17 | width: 100%; 18 | height: 100%; 19 | display: flex; 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | } 24 | .k-progress-status { 25 | padding: 0 ($spacer-x / 2); 26 | min-width: 10px; 27 | text-align: center; 28 | display: inline-block; 29 | white-space: nowrap; 30 | } 31 | 32 | > .k-state-selected { 33 | position: absolute; 34 | overflow: hidden; 35 | border-style: solid; 36 | border-width: 0; 37 | 38 | .k-progress-status-wrap {} 39 | } 40 | 41 | 42 | // Chunks 43 | > ul { 44 | border-width: inherit; 45 | border-style: inherit; 46 | white-space: nowrap; 47 | display: flex; 48 | align-items: stretch; 49 | flex: 1; 50 | } 51 | .k-item { 52 | display: block; 53 | border-width: 0; 54 | border-style: solid; 55 | border-color: transparent; 56 | } 57 | 58 | } 59 | 60 | 61 | // Horizontal 62 | .k-progressbar-horizontal { 63 | width: 27em; 64 | height: $progressbar-height; 65 | flex-direction: row; 66 | 67 | 68 | .k-progress-status-wrap { 69 | flex-direction: row; 70 | justify-content: flex-end; 71 | top: 0; 72 | left: 0; 73 | } 74 | > .k-state-selected { 75 | left: 0; 76 | right: auto; 77 | top: 0; 78 | height: 100%; 79 | } 80 | 81 | 82 | // Chunks 83 | > ul { 84 | flex-direction: row; 85 | } 86 | .k-item {} 87 | .k-item + .k-item { 88 | border-left-width: 1px; 89 | } 90 | 91 | 92 | // Horizontal reverse 93 | &.k-progressbar-reverse { 94 | flex-direction: row-reverse; 95 | 96 | .k-progress-status-wrap { 97 | justify-content: flex-start; 98 | left: auto; 99 | right: 0; 100 | } 101 | > .k-state-selected { 102 | left: auto; 103 | right: 0; 104 | } 105 | 106 | } 107 | } 108 | 109 | 110 | // Vertical 111 | .k-progressbar-vertical { 112 | width: $progressbar-height; 113 | height: 27em; 114 | flex-direction: column; 115 | justify-content: flex-end; 116 | 117 | 118 | .k-progress-status-wrap { 119 | flex-direction: column; 120 | justify-content: flex-start; 121 | left: 0; 122 | bottom: 0; 123 | } 124 | .k-progress-status { 125 | transform: rotate(-90deg) translateX(-100%); 126 | transform-origin: 0 0; 127 | } 128 | > .k-state-selected { 129 | left: -1px; 130 | bottom: -1px; 131 | width: 100%; 132 | } 133 | 134 | 135 | // Chunk 136 | > ul { 137 | flex-direction: column; 138 | } 139 | .k-item {} 140 | .k-item + .k-item { 141 | border-top-width: 1px; 142 | } 143 | 144 | 145 | // Vertical reverse 146 | &.k-progressbar-reverse { 147 | flex-direction: column-reverse; 148 | 149 | .k-progress-status-wrap { 150 | justify-content: flex-end; 151 | top: 0; 152 | bottom: auto; 153 | } 154 | .k-progress-status { 155 | transform: rotate(90deg) translateX(-100%); 156 | transform-origin: 0 100%; 157 | position: absolute; 158 | bottom: 0; 159 | left: 0; 160 | } 161 | > .k-state-selected { 162 | left: auto; 163 | right: 0; 164 | bottom: auto; 165 | top: 0; 166 | } 167 | 168 | } 169 | } 170 | 171 | } 172 | -------------------------------------------------------------------------------- /scss/progressbar/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports('progressbar/theme') { 2 | 3 | $progressbar-bg: $base-bg !default; 4 | $progressbar-border: $base-border !default; 5 | $progressbar-chunk-border: $bg-color !default; 6 | $progressbar-selected-bg: $accent !default; 7 | $progressbar-selected-border: darken( $progressbar-selected-bg, 4%) !default; 8 | $progressbar-selected-gradient: rgba( adjust-hue( $progressbar-selected-bg, 14), 0 ), rgba( adjust-hue( $progressbar-selected-bg, 14), .2 ) !default; 9 | 10 | .k-progressbar { 11 | background-color: $progressbar-bg; 12 | border-color: $progressbar-border; 13 | background-clip: padding-box; 14 | 15 | .k-ie11 &, 16 | .k-edge12 &, 17 | .k-edge13 & { 18 | background-clip: border-box; 19 | } 20 | 21 | .k-state-selected { 22 | border-color: $progressbar-selected-border; 23 | background-color: $progressbar-selected-bg; 24 | @include linear-gradient( $progressbar-selected-gradient ); 25 | } 26 | 27 | .k-item { 28 | border-color: $progressbar-chunk-border; 29 | } 30 | } 31 | 32 | .k-progressbar-indeterminate { 33 | background: url(map-get($data-uris, 'indeterminate.gif')); 34 | 35 | .k-progress-status-wrap, 36 | .k-state-selected { 37 | display: none; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /scss/progressbar/images/indeterminate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-default/77efe2aa5a7bb7fb3d4a30b4cac6b87a4b12c54d/scss/progressbar/images/indeterminate.gif -------------------------------------------------------------------------------- /scss/progressbar/images/indeterminate.scss: -------------------------------------------------------------------------------- 1 | @import '../../mixins'; 2 | 3 | @include exports('indeterminate.gif') { 4 | @include register-data-uri('indeterminate.gif', 'data:image/gif;base64,R0lGODlhFgAWAJECAPDw8OTk5AAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBAACACwAAAAAFgAWAAACL4yPAcsNmZyESDp6bMNGM654DyeOWAmipJiyqweGWuy+Fg23s37zk38BboQf4qIAACH5BAUEAAIALAAAAAAWABYAAAIwBIKpYe231ntRTlfTxZlt03lf+IFdCWUoWbLj2cKvGstXKN6ubk94Tdv8ZkFe0VEAACH5BAUEAAIALAAAAAAWABYAAAIwhBGpG+fH4nuRTVfXhTltnn1G14ikiHToaapt+Far+7E1vZFlbl96LLvhJj8hzFEAACH5BAUEAAIALAAAAAAWABYAAAIwhB+pG+fI2HtRTljTxXmbrHgAqImkOILoaapt91ar67E1vdk5fpHNzaPoJr6Y7FAAACH5BAUEAAIALAAAAAAWABYAAAIvhG+hy4EPmoRINnosw0krHnkOJ45YCaKpB4ZaK8Ls+tKWXJOznp+736OogMGHqgAAIfkEBQQAAgAsAAAAABYAFgAAAi+Ej6HLgQ+ahEkyeuzFUSveeaD3caRjkqOaiqsGhlbMtvN72xO+6w3t8m2EC6CnAAAh+QQFBAACACwAAAAAFgAWAAACMAyOCcHtCp1kME1Z0X15bdp9YCYaodh5X1qy6LnCW6pe9CtPd5xj7vyzBXVDX69RAAAh+QQFBAACACwAAAAAFgAWAAACMIyBqWDtseJ7cU1X1cWZ7dN9YCZCodh5X1qy6LnCmxuTrzyl6qXf9kzjBXNDSjFQAAAh+QQFBAACACwAAAAAFgAWAAACLowNqQvnx+J7kU1X14U5bdQ1XxCOZGeWo/qxm3vBk0yhq93iL83pMw/y1YQYWAEAIfkEBQQAAgAsAAAAABYAFgAAAjCMH6DLgJ9ag0hOaizDWSseeaD3caQziqkGhlZLwqo5Y/H64pLM6hddg5x8P8rQUAAAIfkEBQQAAgAsAAAAABYAFgAAAjCMf6DLgB+ahEg2muzCRm/uKVwUjqEDlqk3klqrrhbMmrU82a8+8zl+8QWBQ8opUAAAOw==') 5 | } 6 | -------------------------------------------------------------------------------- /scss/qrcode.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | 7 | 8 | // Component 9 | @import "qrcode/layout"; 10 | -------------------------------------------------------------------------------- /scss/qrcode/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports('qrcode/layout') { 2 | 3 | .k-qrcode { 4 | display: inline-block; 5 | } 6 | 7 | } 8 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/responsivepanel/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("responsivepanel/layout") { 2 | 3 | .k-rpanel {} 4 | 5 | // Variants 6 | .k-rpanel-left, 7 | .k-rpanel-right { 8 | position: fixed; 9 | display: block; 10 | overflow: auto; 11 | min-width: 320px; 12 | height: 100%; 13 | top: 0; 14 | 15 | & + * { 16 | overflow: auto; 17 | } 18 | 19 | &.k-rpanel-expanded { 20 | transform: translateX(0) translateZ(0); 21 | } 22 | } 23 | .k-rpanel-left { 24 | transform: translateX(-100%) translateZ(0); 25 | left: 0; 26 | } 27 | .k-rpanel-right { 28 | transform: translateX(100%) translateZ(0); 29 | right: 0; 30 | } 31 | 32 | // Top 33 | .k-rpanel-top { 34 | position: static; 35 | max-height: 0; 36 | } 37 | .k-rpanel-top.k-rpanel-expanded { 38 | max-height: 568px; 39 | // sass-lint:disable no-important 40 | overflow: visible !important; 41 | // sass-lint:enable no-important 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /scss/responsivepanel/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("responsivepanel/theme") { 2 | 3 | .k-rpanel {} 4 | 5 | } 6 | -------------------------------------------------------------------------------- /scss/ripple.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | 7 | 8 | // Component 9 | @import "ripple/layout"; 10 | @import "ripple/theme"; 11 | -------------------------------------------------------------------------------- /scss/ripple/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports( 'ripple/layout' ) { 2 | .k-ripple-target { 3 | position: relative; 4 | } 5 | 6 | .k-ripple { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | right: 0; 11 | bottom: 0; 12 | z-index: 1; 13 | overflow: hidden; 14 | pointer-events: none; 15 | } 16 | 17 | .k-ripple-blob { 18 | pointer-events: none; 19 | position: absolute; 20 | border-radius: 50%; 21 | padding: 0; 22 | transform: translate(-50%, -50%) scale(0); 23 | transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1); 24 | opacity: .1; 25 | background-color: currentColor; 26 | 27 | .k-primary & { 28 | opacity: .2; 29 | } 30 | 31 | .k-primary.k-flat & { 32 | opacity: 1; 33 | } 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /scss/ripple/_theme.scss: -------------------------------------------------------------------------------- 1 | 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"; 12 | -------------------------------------------------------------------------------- /scss/scheduler/_theme.scss: -------------------------------------------------------------------------------- 1 | // TODO: modal header variables 2 | $modal-header-border-color: #cccccc; 3 | 4 | 5 | @include exports("scheduler/theme") { 6 | 7 | // Appearance 8 | .k-scheduler { 9 | background-clip: padding-box; 10 | 11 | .k-ie11 &, 12 | .k-edge12 &, 13 | .k-edge13 & { 14 | background-clip: border-box; 15 | } 16 | } 17 | 18 | 19 | // Header and footer 20 | .k-scheduler-toolbar, 21 | .k-scheduler-footer { 22 | @include appearance( header ); 23 | background-clip: padding-box; 24 | 25 | .k-ie11 &, 26 | .k-edge12 &, 27 | .k-edge13 & { 28 | background-clip: border-box; 29 | } 30 | } 31 | 32 | 33 | //Scheduler navigation 34 | .k-scheduler-navigation { 35 | 36 | li { 37 | background-clip: padding-box; 38 | 39 | .k-ie11 &, 40 | .k-edge12 &, 41 | .k-edge13 & { 42 | background-clip: border-box; 43 | } 44 | } 45 | 46 | .k-nav-today, 47 | .k-nav-prev, 48 | .k-nav-next { 49 | @include appearance( button ); 50 | 51 | &.k-state-hover { @include appearance( hovered-button ); } 52 | } 53 | } 54 | 55 | 56 | // View switcher 57 | .k-scheduler-views { 58 | 59 | li { 60 | @include appearance( button ); 61 | background-clip: padding-box; 62 | 63 | .k-ie11 &, 64 | .k-edge12 &, 65 | .k-edge13 & { 66 | background-clip: border-box; 67 | } 68 | 69 | &.k-state-hover { @include appearance( hovered-button ); } 70 | &.k-state-selected { @include fill( $selected-text, $selected-bg, $selected-border, none ); } 71 | } 72 | } 73 | 74 | 75 | // Scheduler footer 76 | .k-scheduler-footer { 77 | 78 | li { 79 | @include appearance( button ); 80 | background-clip: padding-box; 81 | 82 | .k-ie11 &, 83 | .k-edge12 &, 84 | .k-edge13 & { 85 | background-clip: border-box; 86 | } 87 | 88 | &.k-state-hover { @include appearance( hovered-button ); } 89 | } 90 | } 91 | 92 | 93 | // Scheduler content 94 | .k-scheduler-content {} 95 | .k-nonwork-hour { 96 | background-color: mix( $panel-text, $panel-bg, 3% ); 97 | } 98 | 99 | 100 | // Appointments 101 | .k-event { 102 | @include appearance( selected-node ); 103 | } 104 | .k-event-inverse { 105 | color: $panel-bg; 106 | } 107 | 108 | 109 | // Drag hint 110 | .k-event-drag-hint {} 111 | 112 | 113 | // Resizing 114 | .k-scheduler-marquee {} 115 | .k-scheduler-marquee::before, 116 | .k-scheduler-marquee::after { 117 | border-color: $primary-button-border; 118 | } 119 | 120 | } 121 | 122 | 123 | 124 | 125 | @include exports("scheduler-views/theme") { 126 | 127 | // Day view 128 | .k-scheduler-dayview {} 129 | 130 | 131 | // Workweek view 132 | // sass-lint:disable class-name-format 133 | .k-scheduler-workWeekview {} 134 | // sass-lint:enable class-name-format 135 | 136 | 137 | // Week view 138 | .k-scheduler-weekview {} 139 | 140 | 141 | // Month view 142 | .k-scheduler-monthview {} 143 | 144 | 145 | // Agenda view 146 | .k-scheduler-agendaview { 147 | 148 | tr.k-state-hover { 149 | @include appearance( hovered-node ); 150 | } 151 | tr.k-state-hover .k-scheduler-datecolumn { 152 | @include appearance( panel ); 153 | } 154 | } 155 | 156 | 157 | // Timeline view 158 | .k-scheduler-timelineview {} 159 | 160 | } 161 | 162 | 163 | 164 | 165 | @include exports("scheduler-edit-form/theme") { 166 | 167 | .k-scheduler-edit-form {} 168 | 169 | } 170 | -------------------------------------------------------------------------------- /scss/scroller.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | 7 | 8 | // Component 9 | @import "scroller/layout"; 10 | -------------------------------------------------------------------------------- /scss/scroller/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("scroller/layout") { 2 | 3 | // Layout 4 | .km-scrollview, 5 | .km-scroll-container { 6 | user-select: none; 7 | margin-collapse: separate; 8 | } 9 | .km-scroll-wrapper { 10 | position: relative; 11 | } 12 | .km-scroll-header { 13 | position: absolute; 14 | z-index: 1001; 15 | width: 100%; 16 | top: 0; 17 | left: 0; 18 | } 19 | 20 | 21 | // Pull to refresh 22 | .km-scroller-pull { 23 | width: 100%; 24 | display: block; 25 | position: absolute; 26 | line-height: 3em; 27 | font-size: 1.4em; 28 | text-align: center; 29 | transform: translate3d(0, -3em, 0); 30 | } 31 | .km-scroller-pull .km-template { 32 | display: inline-block; 33 | min-width: 200px; 34 | text-align: left; 35 | } 36 | .km-load-more .km-icon, 37 | .km-widget .km-scroller-pull .km-icon { 38 | display: inline-block; 39 | height: 2rem; 40 | margin-right: 1rem; 41 | vertical-align: middle; 42 | width: 2rem; 43 | font-size: 2rem; 44 | transform: rotate(0deg); 45 | transition: transform 300ms linear; 46 | } 47 | .km-widget .km-scroller-release .km-icon { 48 | transform: rotate(180deg); 49 | } 50 | .km-widget .km-scroller-refresh .km-icon { 51 | transition: none; 52 | } 53 | 54 | 55 | // Scrollbar 56 | .km-touch-scrollbar { 57 | position: absolute; 58 | visibility: hidden; 59 | z-index: 200000; 60 | height: .4em; 61 | width: .4em; 62 | background-color: #333; 63 | opacity: 0; 64 | transform-origin: 0 0; 65 | transition: opacity .3s linear; 66 | } 67 | .km-vertical-scrollbar { 68 | height: 100%; 69 | right: 2px; 70 | top: 0; 71 | } 72 | .km-horizontal-scrollbar { 73 | width: 100%; 74 | left: 0; 75 | bottom: 2px; 76 | } 77 | 78 | } 79 | -------------------------------------------------------------------------------- /scss/scrollview.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | 9 | 10 | // Component 11 | @import "scrollview/layout"; 12 | @import "scrollview/theme"; 13 | -------------------------------------------------------------------------------- /scss/scrollview/_layout.scss: -------------------------------------------------------------------------------- 1 | @import '../common/icons'; 2 | @import '../button/layout'; 3 | 4 | @include exports('scrollview/layout') { 5 | $scrollview-page-button-size: 8px; 6 | $scrollview-arrow-icon-size: 4.5em; 7 | 8 | .k-scrollview-wrap { 9 | position: relative; 10 | overflow: hidden; 11 | outline: 0; 12 | display: block; 13 | } 14 | 15 | .k-scrollview { 16 | list-style-type: none; 17 | position: absolute; 18 | margin: 0; 19 | padding: 0; 20 | width: 100%; 21 | height: 100%; 22 | cursor: default; 23 | 24 | img, 25 | li { 26 | user-select: none; 27 | } 28 | 29 | & > li { 30 | display: inline-block; 31 | overflow: hidden; 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | } 36 | 37 | li > * { 38 | user-select: none; 39 | pointer-events: none; 40 | } 41 | } 42 | 43 | .k-pages, 44 | .k-scrollview-pageable { 45 | margin: 0 auto; 46 | padding: 0; 47 | width: 100%; 48 | display: flex; 49 | justify-content: center; 50 | text-align: center; 51 | list-style: none; 52 | position: absolute; 53 | left: 0; 54 | bottom: 10px; 55 | pointer-events: none; 56 | } 57 | .k-pages > li, 58 | .k-scrollview-pageable > li.k-button { 59 | margin: 10px; 60 | padding: 0; 61 | width: $scrollview-page-button-size; 62 | height: $scrollview-page-button-size; 63 | box-sizing: content-box; 64 | vertical-align: middle; 65 | display: inline-block; 66 | flex: 0 0 $scrollview-page-button-size; 67 | border-radius: 50%; 68 | cursor: pointer; 69 | pointer-events: all; 70 | } 71 | 72 | .k-scrollview-next, 73 | .k-scrollview-prev { 74 | display: table; 75 | position: absolute; 76 | padding: 0; 77 | height: 60%; 78 | top: 20%; 79 | text-decoration: none; 80 | user-select: none; 81 | cursor: pointer; 82 | overflow: hidden; 83 | -webkit-tap-highlight-color: $rgba-transparent; 84 | } 85 | 86 | .k-scrollview-prev { 87 | left: 0; 88 | } 89 | 90 | .k-scrollview-next { 91 | right: 0; 92 | } 93 | 94 | .k-scrollview-next span, 95 | .k-scrollview-prev span { 96 | display: table-cell; 97 | margin: 0; 98 | padding: 0; 99 | vertical-align: middle; 100 | font-size: $scrollview-arrow-icon-size; 101 | font-weight: normal; 102 | } 103 | 104 | .k-scrollview-elements { 105 | width: 100%; 106 | } 107 | } 108 | 109 | @supports (-webkit-user-select: none) { 110 | div.k-scrollview-wrap ul.k-scrollview li > * { 111 | pointer-events: auto; 112 | } 113 | } 114 | 115 | @supports (not (-webkit-user-select: none)) { 116 | div.k-scrollview-wrap ul.k-scrollview li > * { 117 | pointer-events: none; 118 | } 119 | } 120 | 121 | //Mobile version 122 | .km-scrollview { 123 | white-space: nowrap; 124 | overflow: hidden; 125 | position: relative; 126 | width: 100%; 127 | 128 | & > div > * { 129 | -webkit-transform: translatez(0); 130 | } 131 | 132 | & > div > [data-role="page"] { 133 | vertical-align: top; 134 | display: inline-block; 135 | min-height: 1px; 136 | } 137 | 138 | .km-virtual-page { 139 | min-height: 1px; 140 | position: absolute; 141 | top: 0; 142 | left: 0; 143 | display: inline-block; 144 | } 145 | } 146 | 147 | .k-ff18 .km-scrollview > div, 148 | .k-ff19 .km-scrollview > div, 149 | .k-ff20 .km-scrollview > div, 150 | .k-ff21 .km-scrollview > div { 151 | width: 0; 152 | } 153 | 154 | .km-pages { 155 | padding: $padding-y 0 0 0; 156 | position: static; 157 | } 158 | -------------------------------------------------------------------------------- /scss/scrollview/_theme.scss: -------------------------------------------------------------------------------- 1 | $scrollview-navigation-color: $selected-text !default; 2 | $scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default; 3 | $scrollview-pagebutton-shadow: 0 0 2px rgba(0, 0, 0, .08) !default; 4 | $scrollview-navigation-background: rgba(0, 0, 0, 0) !default; 5 | $scrollview-navigation-default-opacity: .7 !default; 6 | $scrollview-navigation-hover-opacity: 1 !default; 7 | $webkit-highlight-color: rgba(0, 0, 0, 0) !default; 8 | 9 | @include exports('scrollview/theme') { 10 | 11 | .k-pages > li, 12 | .k-scrollview-pageable > li.k-button { 13 | background-image: none; 14 | box-shadow: $scrollview-pagebutton-shadow; 15 | } 16 | .k-pages > li { 17 | border-color: $button-border; 18 | color: $button-text; 19 | background-color: $button-bg; 20 | } 21 | .k-pages > li.k-current-page { 22 | border-color: $selected-border; 23 | color: $selected-text; 24 | background-color: $selected-bg; 25 | } 26 | 27 | .k-scrollview-elements { 28 | color: $scrollview-navigation-color; 29 | } 30 | 31 | .k-scrollview-next, 32 | .k-scrollview-prev { 33 | color: inherit; 34 | background: $scrollview-navigation-background; 35 | text-shadow: $scrollview-navigation-icon-shadow; 36 | opacity: $scrollview-navigation-default-opacity; 37 | outline-width: 0; 38 | 39 | &:hover { 40 | color: $scrollview-navigation-color; 41 | opacity: $scrollview-navigation-hover-opacity; 42 | } 43 | } 44 | 45 | .k-scrollview-animation { 46 | transition-duration: .3s; 47 | transition-timing-function: ease-out; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /scss/slider.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "button"; 8 | @import "slider/images/slider-h"; 9 | @import "slider/images/slider-v"; 10 | 11 | 12 | // Component 13 | @import "slider/layout"; 14 | @import "slider/theme"; 15 | -------------------------------------------------------------------------------- /scss/slider/_theme.scss: -------------------------------------------------------------------------------- 1 | $slider-trackbackground-color: darken($widget-bg, 10%) !default; 2 | $slider-selection-background-color: $accent !default; 3 | 4 | @include exports('slider/theme') { 5 | 6 | .k-slider { 7 | .k-slider-track, 8 | .k-slider-selection { 9 | @include border-radius(); 10 | } 11 | 12 | .k-slider-track { 13 | background-color: $slider-trackbackground-color; 14 | } 15 | 16 | .k-slider-selection { 17 | background-color: $slider-selection-background-color; 18 | } 19 | 20 | .k-button { 21 | @include border-radius( 50% ); 22 | } 23 | 24 | .k-draghandle { 25 | @include appearance( primary-button ); 26 | @include border-radius( 50% ); 27 | 28 | &:hover { 29 | @include appearance( hovered-primary-button ); 30 | } 31 | 32 | &:active, 33 | &.k-pressed { 34 | @include appearance( pressed-primary-button ); 35 | box-shadow: inset $primary-button-pressed-shadow; 36 | } 37 | 38 | &:focus { 39 | box-shadow: $primary-button-focused-shadow; 40 | } 41 | } 42 | 43 | &.k-state-focused { 44 | .k-draghandle { 45 | box-shadow: $primary-button-focused-shadow; 46 | } 47 | } 48 | 49 | .k-slider-wrap { 50 | &:focus { 51 | outline: none; 52 | } 53 | } 54 | } 55 | 56 | .k-slider-horizontal .k-tick { 57 | background-image: url(map-get($data-uris, 'slider-h.gif')); 58 | } 59 | 60 | .k-slider-vertical .k-tick { 61 | background-image: url(map-get($data-uris, 'slider-v.gif')); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /scss/slider/images/slider-h.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-default/77efe2aa5a7bb7fb3d4a30b4cac6b87a4b12c54d/scss/slider/images/slider-h.gif -------------------------------------------------------------------------------- /scss/slider/images/slider-h.scss: -------------------------------------------------------------------------------- 1 | @import '../../mixins'; 2 | 3 | @include exports('slider-h.gif') { 4 | @include register-data-uri('slider-h.gif', 'data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7') 5 | } 6 | -------------------------------------------------------------------------------- /scss/slider/images/slider-v.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/telerik/kendo-theme-default/77efe2aa5a7bb7fb3d4a30b4cac6b87a4b12c54d/scss/slider/images/slider-v.gif -------------------------------------------------------------------------------- /scss/slider/images/slider-v.scss: -------------------------------------------------------------------------------- 1 | @import '../../mixins'; 2 | 3 | @include exports('slider-v.gif') { 4 | @include register-data-uri('slider-v.gif', 'data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7') 5 | } 6 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/splitter/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("splitter/theme") { 2 | 3 | $splitter-bg: rgba( try-darken( $panel-bg, 8 ), .8 ); 4 | $splitter-text: $panel-text; 5 | $splitter-hovered-bg: try-darken( $panel-bg, 8 ); 6 | $splitter-hovered-text: $panel-text; 7 | $splitter-selected-bg: $selected-bg; 8 | $splitter-selected-text: contrast-wcag( $splitter-selected-bg ); 9 | 10 | .k-splitter { 11 | background-clip: padding-box; 12 | 13 | .k-ie11 &, 14 | .k-edge12 &, 15 | .k-edge13 & { 16 | background-clip: border-box; 17 | } 18 | } 19 | 20 | // Splitbar 21 | .k-splitbar { 22 | color: $splitter-text; 23 | background-color: $splitter-bg; 24 | 25 | &:active, 26 | &.k-state-focused { 27 | color: $splitter-selected-text; 28 | background: $splitter-selected-bg; 29 | } 30 | } 31 | .k-splitbar-horizontal-hover, 32 | .k-splitbar-vertical-hover { 33 | color: $splitter-hovered-text; 34 | background-color: $splitter-hovered-bg; 35 | } 36 | 37 | .k-ghost-splitbar { 38 | background-color: $splitter-hovered-bg; 39 | } 40 | 41 | } 42 | -------------------------------------------------------------------------------- /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 | @import "window"; 11 | 12 | 13 | // Component 14 | @import "spreadsheet/layout"; 15 | @import "spreadsheet/theme"; 16 | -------------------------------------------------------------------------------- /scss/spreadsheet/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("sreadsheet/theme") { 2 | 3 | // Spreadsheet 4 | .k-spreadsheet { 5 | background-clip: padding-box; 6 | 7 | .k-ie11 &, 8 | .k-edge12 &, 9 | .k-edge13 & { 10 | background-clip: border-box; 11 | } 12 | } 13 | 14 | 15 | // Header 16 | .k-spreadsheet .k-tabstrip-wrapper {} 17 | 18 | 19 | // Quick access toolbar 20 | .k-spreadsheet-quick-access-toolbar {} 21 | 22 | 23 | // Row / column headers 24 | .k-spreadsheet-top-corner { 25 | @include appearance( header ); 26 | } 27 | .k-spreadsheet-row-header, 28 | .k-spreadsheet-column-header { 29 | @include appearance( header ); 30 | } 31 | 32 | 33 | // Formula bar 34 | .k-spreadsheet-formula-list {} 35 | .k-syntax-ref { color: #ff8822; } 36 | .k-syntax-num { color: #0099ff; } 37 | .k-syntax-func { font-weight: bold; } 38 | .k-syntax-str { color: #38b714; } 39 | .k-syntax-error { color: red; } 40 | .k-syntax-bool { color: #a9169c; } 41 | .k-syntax-startexp { font-weight: bold; } 42 | .k-syntax-paren-match { background-color: #caf200; } 43 | 44 | 45 | // Cell editor 46 | .k-spreadsheet-cell-editor { 47 | color: $panel-text; 48 | background-color: $panel-bg; 49 | } 50 | 51 | 52 | // Selection 53 | .k-spreadsheet .k-selection-full, 54 | .k-spreadsheet .k-selection-partial { 55 | // TODO: consider extracting variables 56 | border-color: rgba( $header-selected-border, .25 ); 57 | background-color: rgba( $header-selected-bg, .25 ); 58 | } 59 | .k-spreadsheet-selection { 60 | border-color: $selected-bg; 61 | background-color: rgba( $selected-bg, .25 ); 62 | box-shadow: inset 0 0 0 1px $selected-bg; 63 | } 64 | .k-spreadsheet .k-single-selection::after { 65 | border-color: $panel-bg; 66 | background-color: $selected-bg; 67 | } 68 | .k-spreadsheet-active-cell { 69 | box-shadow: inset 0 0 0 1px $selected-bg; 70 | background-color: $panel-bg; 71 | 72 | &.k-right { 73 | box-shadow: inset 0 0 0 1px $selected-bg, inset -1px 0 0 1px $selected-bg; 74 | } 75 | 76 | &.k-bottom { 77 | box-shadow: inset 0 0 0 1px $selected-bg, inset 0 -1px 0 1px $selected-bg; 78 | } 79 | 80 | &.k-bottom.k-right { 81 | box-shadow: inset 0 0 0 1px $selected-bg, inset -1px -1px 0 1px $selected-bg; 82 | } 83 | } 84 | 85 | .k-spreadsheet .k-auto-fill { 86 | border-color: $selected-bg; 87 | background-color: rgba( $selected-bg, .25 ); 88 | box-shadow: inset 0 0 0 1px $selected-bg; 89 | } 90 | .k-spreadsheet .k-auto-fill-punch { 91 | background-color: rgba( $panel-bg, .5 ); 92 | } 93 | 94 | } 95 | 96 | 97 | 98 | 99 | @include exports( "spreadsheet/filter/theme" ) { 100 | 101 | // Filter button 102 | .k-spreadsheet .k-filter-range { 103 | border-color: $accent; 104 | } 105 | .k-spreadsheet-filter { 106 | @include appearance( button ); 107 | box-shadow: inset 0 0 0 1px $button-border; 108 | 109 | &.k-state-active { 110 | @include appearance( pressed-button ); 111 | } 112 | 113 | &:hover { 114 | @include appearance( hovered-button ); 115 | } 116 | } 117 | 118 | 119 | // Filter menu 120 | .k-spreadsheet-filter-menu { 121 | 122 | > .k-menu { 123 | 124 | .k-item.k-state-hover { 125 | @include appearance( hovered-list-item ); 126 | } 127 | } 128 | 129 | .k-spreadsheet-value-treeview-wrapper { 130 | @include appearance( panel ); 131 | } 132 | } 133 | 134 | } 135 | 136 | 137 | 138 | 139 | @include exports( "spreadsheet/tools/theme" ) { 140 | 141 | .k-spreadsheet-popup { 142 | 143 | // Buttons 144 | .k-button {} 145 | 146 | .k-button:hover, 147 | .k-button.k-state-hover { 148 | @include appearance( hovered-list-item ); 149 | } 150 | .k-button:active, 151 | .k-button.k-state-active, 152 | .k-button.k-state-selected { 153 | @include appearance( selected-list-item ); 154 | } 155 | 156 | } 157 | 158 | } 159 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/switch/_layout.scss: -------------------------------------------------------------------------------- 1 | $switch-size: 3em !default; 2 | $switch-handle-size: (.8 * $switch-size) !default; 3 | 4 | @include exports('switch/layout') { 5 | $switch-border-width: 1px; 6 | $switch-padding: 2 * $switch-border-width; 7 | 8 | .k-switch { 9 | cursor: pointer; 10 | border: 0; 11 | display: inline-block; 12 | font-size: $font-size-xs; 13 | overflow: hidden; 14 | position: relative; 15 | text-align: left; 16 | user-select: none; 17 | vertical-align: middle; 18 | width: (2 * $switch-size); 19 | outline: 0; 20 | 21 | [type='checkbox'] { 22 | display: none; 23 | } 24 | } 25 | 26 | .k-switch, 27 | .k-switch-wrapper, 28 | .k-switch-container, 29 | .k-switch-handle { 30 | box-sizing: border-box; 31 | } 32 | 33 | .k-switch-wrapper { 34 | display: none; // TODO: do not render 35 | } 36 | 37 | .k-switch .k-switch-background { 38 | border-top-right-radius: 0; 39 | border-bottom-right-radius: 0; 40 | } 41 | 42 | .k-switch-container { 43 | padding: $switch-padding 0; 44 | display: block; 45 | width: 100%; 46 | background: transparent; 47 | transform: translateZ(0); 48 | outline: 0; 49 | } 50 | 51 | .k-switch-handle { 52 | position: relative; 53 | width: $switch-handle-size; 54 | height: $switch-handle-size; 55 | display: inline-block; 56 | margin: 0 ($switch-padding * 3) 0 $switch-padding; 57 | border-width: $switch-border-width; 58 | border-style: solid; 59 | vertical-align: middle; 60 | } 61 | 62 | .k-switch-label-off { 63 | left: $switch-size; 64 | } 65 | 66 | .k-switch-label-on { 67 | left: -$switch-handle-size; 68 | } 69 | 70 | .k-switch-label-on, 71 | .k-switch-label-off { 72 | top: -$switch-border-width; 73 | display: block; 74 | text-align: center; 75 | position: absolute; 76 | text-transform: uppercase; 77 | text-shadow: none; 78 | line-height: $switch-handle-size; 79 | vertical-align: middle; 80 | } 81 | 82 | .k-switch-container, 83 | .k-switch-wrapper { 84 | border-width: $switch-border-width; 85 | border-style: solid; 86 | } 87 | 88 | 89 | 90 | .k-switch[dir='rtl'] { 91 | .k-switch-label-off { 92 | left: -$switch-handle-size; 93 | } 94 | 95 | .k-switch-label-on { 96 | left: $switch-size; 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /scss/switch/_theme.scss: -------------------------------------------------------------------------------- 1 | $switch-on-color: $accent !default; 2 | $switch-off-color: $text-color !default; 3 | $switch-border-color: $border-color !default; 4 | $switch-border-radius: ($switch-size / 2) !default; 5 | $switch-hover-border-color: $hovered-border !default; 6 | $switch-handle-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) !default; 7 | $switch-focus-shadow: inset 0 0 0 3px rgba(0, 0, 0, .06) !default; 8 | $switch-active-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default; 9 | 10 | @include exports('switch/theme') { 11 | .k-switch, 12 | .k-switch-wrapper, 13 | .k-switch-container { 14 | @include border-radius( $switch-border-radius ); 15 | outline: 0; 16 | } 17 | 18 | .k-switch-container, 19 | .k-switch-wrapper { 20 | border-color: $switch-border-color; 21 | background-clip: padding-box; 22 | 23 | .k-ie11 &, 24 | .k-edge12 &, 25 | .k-edge13 & { 26 | background-clip: border-box; 27 | } 28 | 29 | &:hover { 30 | border-color: $switch-hover-border-color; 31 | } 32 | } 33 | 34 | .k-switch-wrapper { 35 | background-color: $widget-bg; 36 | } 37 | 38 | .k-switch-background { 39 | background-position: 4.3em 0; 40 | background-repeat: no-repeat; 41 | } 42 | 43 | .k-switch-handle { 44 | @include appearance( button ); 45 | border-radius: 50%; 46 | background-clip: padding-box; 47 | box-shadow: $switch-handle-shadow; 48 | 49 | .k-ie11 &, 50 | .k-edge12 &, 51 | .k-edge13 & { 52 | background-clip: border-box; 53 | } 54 | } 55 | 56 | .k-switch-on { 57 | .k-switch-handle { 58 | @include appearance( primary-button ); 59 | 60 | &:active { 61 | @include appearance( active-primary-button ); 62 | } 63 | } 64 | 65 | &:hover { 66 | .k-switch-handle { 67 | @include appearance( hovered-primary-button ); 68 | } 69 | } 70 | } 71 | 72 | .k-switch-off { 73 | &:hover { 74 | .k-switch-handle { 75 | @include appearance( hovered-button ); 76 | } 77 | } 78 | 79 | &:action { 80 | @include fill( $button-text, $button-bg, $button-border, #{to top, $button-gradient} ); 81 | } 82 | } 83 | 84 | .k-switch-label-on { 85 | color: $switch-on-color; 86 | background-color: transparent; 87 | } 88 | 89 | .k-switch-label-off { 90 | color: $switch-off-color; 91 | } 92 | 93 | .k-switch { 94 | &:focus, 95 | &.k-state-focused { 96 | outline: none; 97 | box-shadow: $switch-focus-shadow; 98 | } 99 | 100 | &:active { 101 | box-shadow: $switch-active-shadow; 102 | } 103 | 104 | &.k-state-disabled { 105 | cursor: auto; 106 | 107 | .k-switch-container, 108 | .k-switch-wrapper { 109 | border-color: $switch-border-color; 110 | box-shadow: none; 111 | } 112 | 113 | &:focus { 114 | box-shadow: none; 115 | } 116 | 117 | &.k-switch-on { 118 | .k-switch-handle { 119 | background: $accent; 120 | border-color: $accent; 121 | opacity: .5; 122 | } 123 | } 124 | } 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/tabstrip/_theme.scss: -------------------------------------------------------------------------------- 1 | $tabstrip-border: $panel-border !default; 2 | $tabstrip-item-text: $link-text !default; 3 | $tabstrip-item-bg: transparent !default; 4 | $tabstrip-item-border: transparent !default; 5 | $tabstrip-item-hovered-text: $link-hover-text !default; 6 | $tabstrip-item-hovered-bg: transparent !default; 7 | $tabstrip-item-hovered-border: transparent !default; 8 | $tabstrip-item-selected-text: $base-text !default; 9 | $tabstrip-item-selected-bg: $panel-bg !default; 10 | $tabstrip-item-selected-border: $panel-border !default; 11 | $tabstrip-content-text: $panel-text !default; 12 | $tabstrip-content-bg: $panel-bg !default; 13 | $tabstrip-content-border: $panel-bg !default; 14 | 15 | @include exports('tabstrip/theme') { 16 | 17 | .k-tabstrip { 18 | border-color: $tabstrip-border; 19 | 20 | .k-item { 21 | border-color: $tabstrip-item-border; 22 | color: $tabstrip-item-text; 23 | background-color: $tabstrip-item-bg; 24 | background-clip: padding-box; 25 | 26 | .k-ie11 &, 27 | .k-edge12 &, 28 | .k-edge13 & { 29 | background-clip: border-box; 30 | } 31 | 32 | &:hover, 33 | &.k-state-hover { 34 | border-color: $tabstrip-item-hovered-border; 35 | color: $tabstrip-item-hovered-text; 36 | background-color: $tabstrip-item-hovered-border; 37 | } 38 | 39 | &.k-state-active { 40 | border-color: $tabstrip-item-selected-border; 41 | color: $tabstrip-item-selected-text; 42 | background-color: $tabstrip-item-selected-bg; 43 | } 44 | } 45 | 46 | > .k-content { 47 | border-color: $tabstrip-content-border; 48 | color: $tabstrip-content-text; 49 | background-color: $tabstrip-content-bg; 50 | background-clip: padding-box; 51 | 52 | .k-ie11 &, 53 | .k-edge12 &, 54 | .k-edge13 & { 55 | background-clip: border-box; 56 | } 57 | } 58 | } 59 | 60 | 61 | // Tabstrip variants 62 | .k-tabstrip-top { 63 | > .k-tabstrip-items { 64 | .k-item.k-state-active { 65 | border-bottom-color: $tabstrip-item-selected-bg; 66 | } 67 | } 68 | } 69 | .k-tabstrip-bottom { 70 | > .k-tabstrip-items { 71 | .k-item.k-state-active { 72 | border-top-color: $tabstrip-item-selected-bg; 73 | } 74 | } 75 | } 76 | .k-tabstrip-left { 77 | > .k-tabstrip-items { 78 | .k-item.k-state-active { 79 | border-right-color: $tabstrip-item-selected-bg; 80 | } 81 | } 82 | } 83 | .k-tabstrip-right { 84 | > .k-tabstrip-items { 85 | .k-item.k-state-active { 86 | border-left-color: $tabstrip-item-selected-bg; 87 | } 88 | } 89 | } 90 | 91 | } 92 | -------------------------------------------------------------------------------- /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"; 13 | -------------------------------------------------------------------------------- /scss/toolbar/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("toolbar/layout") { 2 | 3 | // Base 4 | .k-toolbar { 5 | padding: $toolbar-padding-y ($toolbar-padding-x / 2); 6 | line-height: $form-line-height; 7 | display: flex; 8 | flex-direction: row; 9 | flex-wrap: wrap; 10 | align-items: center; 11 | justify-content: flex-start; 12 | position: relative; 13 | overflow: hidden; 14 | 15 | &.k-toolbar-resizable { 16 | flex-wrap: nowrap; 17 | } 18 | 19 | > * { 20 | display: inline-flex; 21 | align-items: stretch; 22 | align-content: center; 23 | vertical-align: middle; 24 | margin: 0 ($toolbar-padding-x / 2); 25 | } 26 | 27 | .k-button, 28 | .k-button-group, 29 | .k-separator, 30 | .k-split-button, 31 | .k-textbox, 32 | .k-widget, 33 | label { 34 | vertical-align: middle; 35 | } 36 | 37 | 38 | // Button 39 | .k-button {} 40 | 41 | // Toggle button 42 | .k-toggle-button {} 43 | 44 | // Split button 45 | .k-split-button { 46 | .k-button:hover { 47 | z-index: 2; 48 | } 49 | 50 | &:focus { 51 | outline: none; 52 | } 53 | } 54 | 55 | 56 | // Overflow anchor 57 | .k-overflow-anchor { 58 | @include border-radius( 0 ); 59 | padding: $toolbar-padding-y; 60 | width: calc( #{$toolbar-inner-calc-size} ); 61 | height: calc( #{$toolbar-inner-calc-size} ); 62 | margin: 0; 63 | border-width: 0 0 0 1px; 64 | border-color: inherit; 65 | background-clip: padding-box; 66 | box-sizing: border-box; 67 | justify-content: center; 68 | position: absolute; 69 | top: 0; 70 | right: 0; 71 | } 72 | 73 | 74 | // Separator 75 | .k-separator { 76 | width: 0; 77 | margin-top: -$toolbar-padding-y; 78 | margin-bottom: -$toolbar-padding-y; 79 | border-width: 0 0 0 1px; 80 | border-style: solid; 81 | border-color: inherit; 82 | align-self: stretch; 83 | } 84 | } 85 | 86 | 87 | .k-overflow-container { 88 | 89 | // Group 90 | .k-overflow-tool-group { 91 | display: block; 92 | } 93 | 94 | // Hidden items 95 | .k-tool.k-state-disabled, 96 | .k-overflow-hidden { 97 | display: none; 98 | } 99 | } 100 | 101 | // RTL 102 | .k-rtl .k-toolbar { 103 | 104 | .k-overflow-anchor { 105 | right: auto; 106 | left: 0; 107 | border-width: 0 1px 0 0; 108 | } 109 | } 110 | 111 | } 112 | -------------------------------------------------------------------------------- /scss/toolbar/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("toolbar/theme") { 2 | 3 | // Theme 4 | .k-toolbar { 5 | @include appearance( toolbar ); 6 | background-clip: padding-box; 7 | 8 | .k-ie11 &, 9 | .k-edge12 &, 10 | .k-edge13 & { 11 | background-clip: border-box; 12 | } 13 | 14 | 15 | // Button normal state 16 | .k-button { 17 | border-color: transparent; 18 | color: inherit; 19 | background: none; 20 | background-clip: padding-box; 21 | 22 | .k-ie11 &, 23 | .k-edge12 &, 24 | .k-edge13 & { 25 | background-clip: border-box; 26 | } 27 | 28 | &:not(.k-overflow-anchor) { 29 | position: relative; 30 | } 31 | 32 | &::before, 33 | &::after { 34 | display: block; 35 | opacity: 0; 36 | pointer-events: none; 37 | position: absolute; 38 | z-index: -1; 39 | top: -1px; 40 | left: -1px; 41 | right: -1px; 42 | bottom: -1px; 43 | } 44 | 45 | &::before { 46 | content: ""; 47 | background-color: currentColor; 48 | -webkit-transition: opacity .2s ease-in-out; 49 | transition: opacity .2s ease-in-out; 50 | } 51 | 52 | &::after { 53 | content: ""; 54 | border: 2px solid currentColor; 55 | } 56 | } 57 | 58 | 59 | // Split button 60 | .k-split-button .k-button { 61 | @include appearance( button ); 62 | 63 | &::before, 64 | &::after { 65 | display: none; 66 | } 67 | } 68 | 69 | 70 | // Split button 71 | .k-split-button .k-button { 72 | @include appearance( button ); 73 | } 74 | 75 | 76 | // Button hover state 77 | .k-button:hover, 78 | .k-button.k-state-hover { 79 | 80 | &::before { 81 | opacity: .07; 82 | z-index: 1; 83 | } 84 | } 85 | .k-split-button { 86 | .k-button:hover, 87 | .k-button.k-state-hover { 88 | @include appearance( hovered-button ); 89 | } 90 | } 91 | 92 | 93 | // Button focus state 94 | .k-button:focus, 95 | .k-button.k-state-focused { 96 | box-shadow: none; 97 | 98 | &::after { 99 | opacity: .08; 100 | z-index: 1; 101 | } 102 | } 103 | 104 | .k-split-button { 105 | .k-button:focus, 106 | .k-button.k-state-focused { 107 | border-color: $button-pressed-border; 108 | box-shadow: inset 0 0 0 1px $button-pressed-border; 109 | } 110 | } 111 | .k-split-button:focus { 112 | box-shadow: $button-focused-shadow; 113 | } 114 | 115 | // Button pressed state 116 | .k-button:active, 117 | .k-button.k-state-active { 118 | 119 | &::before, 120 | &::after { 121 | z-index: 1; 122 | } 123 | 124 | &::before { 125 | opacity: .07; 126 | } 127 | &::after { 128 | opacity: .13; 129 | } 130 | } 131 | .k-split-button { 132 | 133 | .k-button:active, 134 | .k-button.k-state-active { 135 | @include appearance( pressed-button ); 136 | box-shadow: none; 137 | } 138 | } 139 | .k-state-border-down .k-split-button-arrow { 140 | box-shadow: inset $button-pressed-shadow; 141 | } 142 | 143 | // Button disabled state 144 | .k-button.k-state-disabled { 145 | 146 | &::after { 147 | opacity: 0; 148 | } 149 | } 150 | 151 | 152 | // Button group 153 | .k-button-group {} 154 | .k-button-group .k-group-start, 155 | .k-button-group .k-button:first-child, 156 | .k-button-group .k-group-end, 157 | .k-button-group .k-button:last-child { 158 | @include border-radius( 0 ); 159 | } 160 | 161 | 162 | // Overflow anchor 163 | .k-overflow-anchor { 164 | border-width: 0; 165 | } 166 | 167 | } 168 | 169 | } 170 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/tooltip/_layout.scss: -------------------------------------------------------------------------------- 1 | // TODO: extract or remove tooltip padding variables 2 | $tooltip-padding-y: $padding-y !default; 3 | $tooltip-padding-x: $padding-x !default; 4 | $tooltip-callout-size: 12px !default; 5 | 6 | @include exports("tooltip/layout") { 7 | 8 | .k-tooltip { 9 | @include border-radius(); 10 | padding: $tooltip-padding-y $tooltip-padding-x; 11 | border-width: 0; 12 | background-repeat: repeat-x; 13 | position: absolute; 14 | z-index: 12000; 15 | } 16 | 17 | .k-tooltip-closable { 18 | padding: ($padding-y * 3) ($padding-x * 2); 19 | } 20 | 21 | .k-tooltip-closable .k-tooltip-content { 22 | padding-right: (5 * $icon-size) / 4; 23 | } 24 | 25 | .k-tooltip-button { 26 | height: 0; 27 | text-align: right; 28 | margin-right: -2px; 29 | 30 | .k-icon { 31 | color: inherit; 32 | vertical-align: top; 33 | } 34 | } 35 | 36 | // Callout 37 | .k-callout { 38 | position: absolute; 39 | width: 0; 40 | height: 0; 41 | border-style: solid; 42 | border-width: 6px; 43 | border-color: transparent; 44 | pointer-events: none; 45 | } 46 | 47 | .k-callout-n { 48 | top: -$tooltip-callout-size; 49 | left: 50%; 50 | pointer-events: none; 51 | } 52 | 53 | .k-callout-w { 54 | top: 50%; 55 | left: -$tooltip-callout-size; 56 | pointer-events: none; 57 | } 58 | 59 | .k-callout-s { 60 | left: 50%; 61 | bottom: -$tooltip-callout-size; 62 | pointer-events: none; 63 | } 64 | 65 | .k-callout-e { 66 | top: 50%; 67 | right: -$tooltip-callout-size; 68 | pointer-events: none; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /scss/tooltip/_theme.scss: -------------------------------------------------------------------------------- 1 | $tooltip-color: $accent-contrast !default; 2 | $tooltip-bg: $accent !default; 3 | 4 | @include exports("tooltip/theme") { 5 | .k-tooltip { 6 | color: $tooltip-color; 7 | background-color: $tooltip-bg; 8 | } 9 | 10 | .k-callout-n { 11 | border-bottom-color: $tooltip-bg; 12 | } 13 | 14 | .k-callout-e { 15 | border-left-color: $tooltip-bg; 16 | } 17 | 18 | .k-callout-s { 19 | border-top-color: $tooltip-bg; 20 | } 21 | 22 | .k-callout-w { 23 | border-right-color: $tooltip-bg; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /scss/treelist/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("treelist/layout") { 2 | 3 | // Base 4 | .k-treelist { 5 | &.k-display-block.k-grid-lockedcolumns { 6 | display: block; 7 | } 8 | 9 | .k-status { 10 | padding: .4em .6em; 11 | line-height: 1.6em; 12 | 13 | .k-loading { 14 | vertical-align: baseline; 15 | margin-right: 5px; 16 | } 17 | } 18 | 19 | tr.k-hidden { 20 | display: none; 21 | } 22 | 23 | .k-treelist-dragging, 24 | .k-treelist-dragging .k-state-hover { 25 | cursor: default; 26 | } 27 | 28 | .k-drop-hint { 29 | position: absolute; 30 | z-index: 10000; 31 | visibility: hidden; 32 | width: 80px; 33 | height: 5px; 34 | margin-top: -3px; 35 | background-color: transparent; 36 | background-repeat: no-repeat; 37 | } 38 | } 39 | 40 | .k-drag-separator { 41 | display: inline-block; 42 | border-right: 1px solid; 43 | height: 1em; 44 | vertical-align: top; 45 | margin: 0 .5em; 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /scss/treelist/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("treelist/theme") { 2 | 3 | // Theme 4 | .k-treelist {} 5 | 6 | } 7 | -------------------------------------------------------------------------------- /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"; 12 | -------------------------------------------------------------------------------- /scss/treeview/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("treeview/layout") { 2 | 3 | $treeview-indent: 16px; 4 | 5 | // Base 6 | .k-treeview { 7 | border-width: 0; 8 | background: none; 9 | line-height: $form-line-height; 10 | cursor: default; 11 | overflow: auto; 12 | white-space: nowrap; 13 | 14 | .k-content, 15 | > .k-group, 16 | .k-item > .k-group { 17 | margin: 0; 18 | padding: 0; 19 | background: none; 20 | list-style: none; 21 | position: relative; 22 | overflow: hidden; 23 | } 24 | 25 | // Wrappers 26 | .k-top, 27 | .k-mid, 28 | .k-bot { 29 | display: flex; 30 | flex-direction: row; 31 | align-items: center; 32 | align-content: center; 33 | } 34 | 35 | // Items 36 | .k-item { 37 | outline-style: none; 38 | margin: 0; 39 | padding: 0 0 0 $treeview-indent; 40 | border-width: 0; 41 | display: block; 42 | } 43 | 44 | // Link 45 | .k-in { 46 | @include border-radius(); 47 | margin: 0; 48 | padding: $button-padding-y $button-padding-x; 49 | border: 1px solid transparent; 50 | text-decoration: none; 51 | display: inline-flex; 52 | align-items: center; 53 | align-content: center; 54 | vertical-align: middle; 55 | position: relative; 56 | } 57 | 58 | // Expand / collapse 59 | .k-i-expand, 60 | .k-i-collapse { 61 | margin-left: -$treeview-indent; 62 | cursor: pointer; 63 | } 64 | 65 | // Other content 66 | .k-checkbox-wrapper { 67 | margin-right: $icon-spacing; 68 | } 69 | .k-in .k-icon, 70 | .k-in .k-image, 71 | .k-in .k-sprite { 72 | margin-right: $icon-spacing; 73 | } 74 | .k-checkbox-label { 75 | padding-left: $icon-size; 76 | } 77 | 78 | } 79 | 80 | 81 | 82 | 83 | // RTL 84 | .k-rtl .k-treeview { 85 | 86 | // Items 87 | .k-item { 88 | padding-left: 0; 89 | padding-right: $treeview-indent; 90 | } 91 | 92 | // Expand / collapse 93 | .k-i-expand, 94 | .k-i-collapse { 95 | margin-left: 0; 96 | margin-right: -$treeview-indent; 97 | } 98 | 99 | // Other content 100 | .k-checkbox-wrapper { 101 | margin-left: $icon-spacing; 102 | margin-right: 0; 103 | } 104 | .k-in .k-icon, 105 | .k-in .k-image, 106 | .k-in .k-sprite { 107 | margin-left: $icon-spacing; 108 | margin-right: 0; 109 | } 110 | 111 | } 112 | 113 | } 114 | -------------------------------------------------------------------------------- /scss/treeview/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("treeview/theme") { 2 | 3 | 4 | $treeview-item-border-width: 0; 5 | $treeview-item-border-radius: 0; 6 | $treeview-item-focused-shadow: $focused-shadow; 7 | 8 | 9 | // Appearance 10 | .k-treeview { 11 | 12 | // Link 13 | .k-in { 14 | @include border-radius( $treeview-item-border-radius ); 15 | border-width: $treeview-item-border-width; 16 | } 17 | .k-in.k-state-hover { 18 | @include appearance( hovered-node ); 19 | } 20 | .k-in.k-state-selected { 21 | @include appearance( selected-node ); 22 | } 23 | .k-in.k-state-focused { 24 | box-shadow: $treeview-item-focused-shadow; 25 | } 26 | .k-in.k-state-disabled {} 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /scss/upload.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | 4 | 5 | // Dependencies 6 | @import "common/all"; 7 | @import "common/icons"; 8 | @import "button"; 9 | @import "action-buttons"; 10 | 11 | 12 | // Component 13 | @import "upload/layout"; 14 | @import "upload/theme"; 15 | -------------------------------------------------------------------------------- /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"; 13 | -------------------------------------------------------------------------------- /scss/validator/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("validator/layout") { 2 | 3 | .k-tooltip-validation { 4 | margin: ($spacer / 2) 0 0; 5 | padding: 0; 6 | position: static; 7 | border-width: 0; 8 | display: inline-flex; 9 | align-items: center; 10 | 11 | &[hidden] { 12 | display: none; 13 | } 14 | 15 | > .k-icon { 16 | margin-right: ($padding-x / 2); 17 | } 18 | 19 | .k-callout { 20 | display: none; 21 | } 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /scss/validator/_theme.scss: -------------------------------------------------------------------------------- 1 | $validator-warning-bg: $warning !default; 2 | $validator-warning-text: darken($text-color, 40%) !default; 3 | $validator-warning-border: $validator-warning-bg !default; 4 | 5 | @include exports( "validator/theme" ) { 6 | 7 | .k-tooltip-validation { 8 | border-color: transparent; 9 | color: $error; 10 | background-color: transparent; 11 | } 12 | 13 | } 14 | -------------------------------------------------------------------------------- /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"; 15 | -------------------------------------------------------------------------------- /scss/window/_layout.scss: -------------------------------------------------------------------------------- 1 | @include exports("window/layout") { 2 | 3 | $window-titlebar-border-width: 0 0 1px !default; 4 | $window-titlebar-border-style: solid !default; 5 | 6 | .k-window { 7 | padding: 0; 8 | max-width: 98vw; 9 | max-height: 98vh; 10 | border-width: 1px; 11 | border-style: solid; 12 | display: inline-flex; 13 | flex-direction: column; 14 | position: absolute; 15 | z-index: 10002; 16 | 17 | // overlay during dragging 18 | .k-overlay { 19 | position: absolute; 20 | opacity: 0; 21 | } 22 | } 23 | 24 | // Title bar 25 | .k-window-titlebar { 26 | padding: $window-titlebar-padding-y $window-titlebar-padding-x; 27 | border-width: $window-titlebar-border-width; 28 | border-style: $window-titlebar-border-style; 29 | white-space: nowrap; 30 | display: flex; 31 | flex-direction: row; 32 | flex-shrink: 0; 33 | align-items: center; 34 | } 35 | 36 | // Title bar title text 37 | .k-window-title { 38 | margin: 0; 39 | font-size: $font-size-lg; 40 | line-height: 1; 41 | text-overflow: ellipsis; 42 | overflow: hidden; 43 | cursor: default; 44 | flex: 1; 45 | } 46 | 47 | 48 | // Actions 49 | .k-window-actions { 50 | margin-top: add-two(-$button-padding-y, -$button-border-width); 51 | margin-bottom: add-two(-$button-padding-y, -$button-border-width); 52 | line-height: 1; 53 | display: flex; 54 | flex-direction: row; 55 | flex-shrink: 0; 56 | align-items: center; 57 | vertical-align: top; 58 | } 59 | 60 | 61 | // Content 62 | .k-window-content, 63 | .k-prompt-container { 64 | padding: $window-inner-padding-y $window-inner-padding-x; 65 | outline: 0; 66 | overflow: auto; 67 | position: relative; 68 | flex: 1 1 auto; 69 | } 70 | .k-window-content + .k-prompt-container { 71 | margin-top: -($window-inner-padding-y / 2); 72 | } 73 | 74 | .k-window-iframecontent { 75 | padding: 0; 76 | overflow: visible; 77 | 78 | .k-content-frame { 79 | vertical-align: top; 80 | border: 0; 81 | width: 100%; 82 | height: 100%; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /scss/window/_theme.scss: -------------------------------------------------------------------------------- 1 | @include exports("window/theme") { 2 | 3 | $window-border-color: rgba(0, 0, 0, .08) !default; 4 | $window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default; 5 | $window-focused-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default; 6 | 7 | $window-titlebar-border-color: inherit !default; 8 | $window-titlebar-bg: $header-bg !default; 9 | $window-titlebar-text: $header-text !default; 10 | 11 | .k-window { 12 | @include appearance( panel ); 13 | border-width: 0; 14 | box-shadow: $window-shadow; 15 | } 16 | .k-window.k-state-focused { 17 | box-shadow: $window-focused-shadow; 18 | } 19 | 20 | 21 | // Titlebar 22 | .k-window-titlebar { 23 | @include fill( $window-titlebar-text, $window-titlebar-bg, $window-titlebar-border-color ); 24 | background-clip: padding-box; 25 | 26 | .k-ie11 &, 27 | .k-edge12 &, 28 | .k-edge13 & { 29 | background-clip: border-box; 30 | } 31 | 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /tests/button-qunit.js: -------------------------------------------------------------------------------- 1 | QUnit.module("Button size", { 2 | before: function() { 3 | TestHelper.loadFixture( "/base/tests/fixtures/button.html" ); 4 | }, 5 | after: function() { 6 | TestHelper.clearFixture(); 7 | } 8 | }); 9 | 10 | QUnit.test("Generic button height should be 30", function( assert ) { 11 | var button = $("#button"); 12 | var buttonHeight = getHeight( button ); 13 | 14 | assert.equal( buttonHeight, metrics.button.height ); 15 | }); 16 | -------------------------------------------------------------------------------- /tests/data/metrics.js: -------------------------------------------------------------------------------- 1 | var metrics = { 2 | "button": { 3 | "height": 30 4 | }, 5 | "iconButton": { 6 | "width": 30, 7 | "height": 30 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /tests/fixtures/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Document 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | Button 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /tests/fixtures/icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /tests/lib/helpers.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | 4 | var TestHelper = (function(){ 5 | 6 | function TestHelper() {} 7 | 8 | 9 | // #region Fields 10 | TestHelper.fixture = null; 11 | TestHelper.fixtureID = "fixture_" + Date.now(); 12 | var $fixture; 13 | // #endregion 14 | 15 | 16 | // #region Methods 17 | TestHelper.createFixture = function(id) { 18 | var fixture = document.createElement("div"); 19 | fixture.id = id || TestHelper.fixtureID; 20 | document.body.appendChild(fixture); 21 | 22 | return fixture; 23 | }; 24 | TestHelper.loadFixture = function(url) { 25 | 26 | var $ = window.jQuery; 27 | 28 | if (!TestHelper.fixture) { 29 | TestHelper.fixture = TestHelper.createFixture(); 30 | TestHelper.$fixture = $(TestHelper.fixture); 31 | } 32 | 33 | $.ajax(url, { 34 | async: false, 35 | cache: false, 36 | success: function(data, status, $xhr) { 37 | var tmp = document.createElement("_CONTAINER"); 38 | tmp.innerHTML = data; 39 | $(tmp).find("title, meta, link, style, script").remove(); 40 | tmp.innerHTML = tmp.innerHTML.trim(); 41 | 42 | TestHelper.$fixture.append(tmp.innerHTML); 43 | 44 | tmp.innerHTML = ""; 45 | tmp = null; 46 | }, 47 | error: function() {} 48 | }); 49 | }; 50 | TestHelper.clearFixture = function() { 51 | TestHelper.fixture.innerHTML = ""; 52 | }; 53 | TestHelper.removeFixture = function(){ 54 | TestHelper.clearFixture(); 55 | delete TestHelper.$fixture; 56 | TestHelper.fixture.remove(); 57 | TestHelper.fixture = null; 58 | }; 59 | // #endregion 60 | 61 | 62 | return TestHelper; 63 | 64 | })(); 65 | 66 | 67 | (function() { 68 | 69 | // Qunit settings 70 | QUnit.config.noglobals = true; 71 | QUnit.config.fixture = ""; 72 | 73 | QUnit.testStart(function() { 74 | TestHelper.fixture = TestHelper.createFixture(); 75 | TestHelper.$fixture = $(TestHelper.fixture); 76 | }); 77 | 78 | QUnit.testDone(function() { 79 | TestHelper.removeFixture(); 80 | }); 81 | 82 | })(); 83 | 84 | 85 | // Test methods 86 | function getHeight(element) { 87 | var $ = window.jQuery; 88 | 89 | return $(element).outerHeight(); 90 | } 91 | function getWidth(element) { 92 | var $ = window.jQuery; 93 | 94 | return $(element).outerWidth(); 95 | } 96 | function getSize(element) { 97 | var $ = window.jQuery; 98 | var $element = $(element); 99 | 100 | return { width: $element.outerWidth(), height: $element.outerHeight() }; 101 | } 102 | -------------------------------------------------------------------------------- /third-party.md: -------------------------------------------------------------------------------- 1 | This Kendo UI theme uses code from the [Sass Color Helpers project](https://github.com/voxpelli/sass-color-helpers). 2 | 3 | The MIT License (MIT) 4 | 5 | Copyright © 2017 Pelle Wessman 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 8 | 9 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 10 | 11 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 12 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* 3 | * Build CSS out of SCSS files using webpack, reusing the 4 | * configuration already in place for react / ng2 components. 5 | * This script creates a webpack entry for each of the packages, 6 | * and passes it through the kendo-common-tasks theme config. 7 | */ 8 | const glob = require('glob'); 9 | const path = require('path'); 10 | const fs = require('fs'); 11 | 12 | const port = parseInt(process.env.PORT || 3000); 13 | const devServerPort = port + 1; 14 | 15 | /* 16 | * Webpack plug-in that reloads css via browser-sync upon build 17 | */ 18 | function BrowserSync() { 19 | this.bs = require("browser-sync").create('bs-refresh'); 20 | this.bs.init({ 21 | open: false, 22 | proxy: `http://localhost:${devServerPort}/`, 23 | port: port, 24 | host: '0.0.0.0' 25 | }); 26 | } 27 | BrowserSync.prototype = { 28 | apply: function(compiler) { 29 | compiler.plugin("emit", (compilation, callback) => { 30 | this.bs.reload("dist.css"); 31 | callback(); 32 | }); 33 | } 34 | }; 35 | 36 | let entry = { 'all': './build/all.js' }; 37 | 38 | const components = process.env.COMPONENTS || null; 39 | if (components) { 40 | // custom build 41 | const fs = require('fs'); 42 | const path = require('path'); 43 | const imports = components.split(',') 44 | .map(c => `require("./../scss/${c}.scss");`).join('\n') 45 | fs.writeFileSync(path.join('build', 'custom.js'), imports); 46 | entry = { 'custom': './build/custom.js' }; 47 | } 48 | 49 | const compat = process.argv.indexOf('--env.twbs-compat') > -1; 50 | 51 | if (compat) { 52 | entry = { 'twbs-compat': './build/twbs-compat.js' }; 53 | } 54 | 55 | const inDevelopment = process.argv.find(v => v.includes('webpack-dev-server')) 56 | module.exports = require('@telerik/kendo-common-tasks') 57 | .webpackThemeConfig({ extract: true }, { 58 | devServer: { 59 | hot: true, 60 | inline: true, 61 | port: devServerPort 62 | }, 63 | module: { loaders: [] }, 64 | entry: entry, 65 | plugins: inDevelopment ? [ new BrowserSync() ] : [], 66 | output: { 67 | path: 'dist', 68 | publicPath: '/dist/', 69 | filename: '[name].js' 70 | } 71 | }); 72 | --------------------------------------------------------------------------------