@progress/kendo-theme-material
Advanced tools
Comparing version 0.2.0-dev.201709070721 to 0.2.0-dev.201709081404
@@ -10,3 +10,3 @@ --- | ||
The following list describes the theme variables available for adjustment in the Kendo UI Material theme for Angular. | ||
The following table lists the available variables for customizing the Material theme. | ||
@@ -93,4 +93,4 @@ <style> | ||
<td> | ||
<span class="color-preview" style="background-color: #3f51b5"></span> | ||
#3f51b5 | ||
<span class="color-preview" style="background-color: #43a047"></span> | ||
#43a047 | ||
</td> | ||
@@ -114,4 +114,4 @@ <td>The color that focuses the user attention.<br/> | ||
<td> | ||
<span class="color-preview" style="background-color: #ff4081"></span> | ||
#ff4081 | ||
<span class="color-preview" style="background-color: #3193ee"></span> | ||
#3193ee | ||
</td> | ||
@@ -418,4 +418,4 @@ <td>The secondary (accent) color of the theme. | ||
<td> | ||
<span class="color-preview" style="background-color: #ff6358"></span> | ||
#ff6358 | ||
<span class="color-preview" style="background-color: #499f50"></span> | ||
#499f50 | ||
</td> | ||
@@ -428,4 +428,4 @@ <td>The color of the first series. | ||
<td> | ||
<span class="color-preview" style="background-color: #ffd246"></span> | ||
#ffd246 | ||
<span class="color-preview" style="background-color: #3193ee"></span> | ||
#3193ee | ||
</td> | ||
@@ -438,4 +438,4 @@ <td>The clor of the second series. | ||
<td> | ||
<span class="color-preview" style="background-color: #78d237"></span> | ||
#78d237 | ||
<span class="color-preview" style="background-color: #673ab1"></span> | ||
#673ab1 | ||
</td> | ||
@@ -448,4 +448,4 @@ <td>The color of the third series. | ||
<td> | ||
<span class="color-preview" style="background-color: #28b4c8"></span> | ||
#28b4c8 | ||
<span class="color-preview" style="background-color: #e52864"></span> | ||
#e52864 | ||
</td> | ||
@@ -458,4 +458,4 @@ <td>The color of the fourth series. | ||
<td> | ||
<span class="color-preview" style="background-color: #2d73f5"></span> | ||
#2d73f5 | ||
<span class="color-preview" style="background-color: #fc5a33"></span> | ||
#fc5a33 | ||
</td> | ||
@@ -468,4 +468,4 @@ <td>The color of the fifth series. | ||
<td> | ||
<span class="color-preview" style="background-color: #aa46be"></span> | ||
#aa46be | ||
<span class="color-preview" style="background-color: #fdc139"></span> | ||
#fdc139 | ||
</td> | ||
@@ -537,2 +537,2 @@ <td>The color of the sixth series. | ||
* [Web Font Icons]({% slug icons_kendouiforangular %}) | ||
* [Preview of the Themed Components]({% slug preview_kendothemedefault_kendouiforangular %}) | ||
* [Preview of the Themed Components]({% slug preview_kendothemedefault_kendouiforangular %}) |
@@ -10,5 +10,5 @@ --- | ||
The following application demonstrates how the Kendo UI components for Angular look like when styled with the Kendo UI Material theme for Angular. | ||
The following example previews Kendo UI components for Angular styled with the Material theme. | ||
{% theme_preview theme:material %} | ||
<script async src="{% asset_path theme-preview.js %}"></script> |
@@ -10,3 +10,3 @@ --- | ||
The following list describes the theme variables available for adjustment in the Kendo UI Default theme for Angular. | ||
The following table lists the available variables for customizing the Default theme. | ||
@@ -526,2 +526,2 @@ <style> | ||
* [Web Font Icons]({% slug icons_kendouiforangular %}) | ||
* [Preview of the Themed Components]({% slug preview_kendothemedefault_kendouiforangular %}) | ||
* [Preview of the Themed Components]({% slug preview_kendothemedefault_kendouiforangular %}) |
@@ -10,6 +10,5 @@ --- | ||
The following application demonstrates how the Kendo UI components for Angular look like when styled with the Kendo UI Default theme for Angular. | ||
The following example previews Kendo UI components for Angular styled with the Default theme. | ||
{% meta height:2200 %} | ||
{% embed_demo ../preview-app/ %} | ||
{% endmeta %} | ||
{% theme_preview theme:default %} | ||
<script async src="{% asset_path theme-preview.js %}"></script> |
@@ -5,8 +5,8 @@ { | ||
{ | ||
"raw": "@progress/kendo-theme-default@2.41.0", | ||
"raw": "@progress/kendo-theme-default@2.41.1", | ||
"scope": "@progress", | ||
"escapedName": "@progress%2fkendo-theme-default", | ||
"name": "@progress/kendo-theme-default", | ||
"rawSpec": "2.41.0", | ||
"spec": "2.41.0", | ||
"rawSpec": "2.41.1", | ||
"spec": "2.41.1", | ||
"type": "version" | ||
@@ -17,10 +17,10 @@ }, | ||
], | ||
"_from": "@progress/kendo-theme-default@2.41.0", | ||
"_id": "@progress/kendo-theme-default@2.41.0", | ||
"_from": "@progress/kendo-theme-default@2.41.1", | ||
"_id": "@progress/kendo-theme-default@2.41.1", | ||
"_inCache": true, | ||
"_location": "/@progress/kendo-theme-default", | ||
"_nodeVersion": "6.11.2", | ||
"_nodeVersion": "6.11.3", | ||
"_npmOperationalInternal": { | ||
"host": "s3://npm-registry-packages", | ||
"tmp": "tmp/kendo-theme-default-2.41.0.tgz_1504609882387_0.16778022004291415" | ||
"tmp": "tmp/kendo-theme-default-2.41.1.tgz_1504878998009_0.9945124860387295" | ||
}, | ||
@@ -34,8 +34,8 @@ "_npmUser": { | ||
"_requested": { | ||
"raw": "@progress/kendo-theme-default@2.41.0", | ||
"raw": "@progress/kendo-theme-default@2.41.1", | ||
"scope": "@progress", | ||
"escapedName": "@progress%2fkendo-theme-default", | ||
"name": "@progress/kendo-theme-default", | ||
"rawSpec": "2.41.0", | ||
"spec": "2.41.0", | ||
"rawSpec": "2.41.1", | ||
"spec": "2.41.1", | ||
"type": "version" | ||
@@ -47,6 +47,6 @@ }, | ||
], | ||
"_resolved": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-2.41.0.tgz", | ||
"_shasum": "49bc0b5108560c9bb11416b44556c77dd85c7223", | ||
"_resolved": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-2.41.1.tgz", | ||
"_shasum": "962917e8f2ae2b084aaa5cc7642bc4b89d17b517", | ||
"_shrinkwrap": null, | ||
"_spec": "@progress/kendo-theme-default@2.41.0", | ||
"_spec": "@progress/kendo-theme-default@2.41.1", | ||
"_where": "/home/travis/build/telerik/kendo-theme-material", | ||
@@ -104,6 +104,6 @@ "author": { | ||
"dist": { | ||
"shasum": "49bc0b5108560c9bb11416b44556c77dd85c7223", | ||
"tarball": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-2.41.0.tgz" | ||
"shasum": "962917e8f2ae2b084aaa5cc7642bc4b89d17b517", | ||
"tarball": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-2.41.1.tgz" | ||
}, | ||
"gitHead": "683a3e8024f41b973b6316fca30fe6902611257c", | ||
"gitHead": "d7fc4cec4faf5e25a05bbabfd0059b333853611e", | ||
"homepage": "https://github.com/telerik/kendo-theme-default#readme", | ||
@@ -155,3 +155,3 @@ "keywords": [ | ||
}, | ||
"version": "2.41.0" | ||
"version": "2.41.1" | ||
} |
# Kendo UI Default Theme | ||
The Kendo UI Default Theme is a SCSS-based theme for the Kendo UI components. | ||
* [License](#license) | ||
* [Overview](#overview) | ||
* [Basic Usage](#basic-usage) | ||
@@ -26,33 +27,37 @@ * [Customization](#customization) | ||
## Overview | ||
## Basic Usage | ||
The Kendo UI Default Theme is a SCSS-based theme for the Kendo UI components. | ||
For more information on how to implement the Default theme in your project, refer to the following articles: | ||
## Basic Usage | ||
* [Using the Default Theme in Angular Projects](http://www.telerik.com/kendo-angular-ui/components/styling/) | ||
* [Using the Default Theme in jQuery Projects](http://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) | ||
For more information on how to use the Default Theme in Angular 2 and React projects, refer to [its introductory topic](docs/index.md). | ||
## Customization | ||
To customize the Default Theme in one swoop, use the colors defined in the [`scss/_variables.scss`](scss/_variables.scss) file. Any change in this file is propagated to every component. | ||
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. | ||
To style a specific component, use the variables used in its specific `.scss` file. | ||
To style a specific component, apply the variables which are used in its specific `.scss` file. | ||
The theme is built by running `npm run build`. The `dist/all.css` file contains the complete theme that you can use in your project. | ||
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. | ||
## Development | ||
Styles are split into components and the dependencies are managed by the [`import-once`](scss/mixins/core/_import-once.scss) mixin. When configuring the styles, define them within an `import-once` block so that they are bundled once when required from multiple files. | ||
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. | ||
During development, the SCSS files are linted on every `commit` and built on every `push` command. The theme package can be tested against a component by linking the theme in the components package. | ||
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. | ||
Upon build, browser-specific properties are generated through the [PostCSS autoprefixer](https://github.com/postcss/autoprefixer). | ||
Browser-specific properties are generated at build-time through the [PostCSS autoprefixer](https://github.com/postcss/autoprefixer). | ||
### Embedding Resources | ||
When you update resources (images or fonts), run the `npm run embed-assets` task. 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';`. Then, inline the base64 version through `map-get( $data-uris, 'WebComponentsIcons.woff' )`. The embedding of resources avoids issues related with their hosting when your project consumes the theme. For more details, refer to [issue #41](https://github.com/telerik/kendo-theme-default/issues/41#issuecomment-258472183). | ||
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). | ||
To update the embedded resources in your project: | ||
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';`. | ||
1. Inline the Base64 version through `map-get( $data-uris, 'WebComponentsIcons.woff' )`. | ||
### Documenting Variables | ||
The variables for customizing the Default theme are listed in the `docs/customization.md` article. It is generated from the SCSS source files by running the `npm run api` command. | ||
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. | ||
@@ -74,2 +79,2 @@ To document a variable, use triple-slash comments (`///`) before its definition. | ||
To change the layout or the front meter of the generated help topic, change the `build/customization.md.hbs` source file. | ||
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. |
{ | ||
"name": "@progress/kendo-theme-material", | ||
"description": "Material theme for Kendo UI", | ||
"version": "0.2.0-dev.201709070721", | ||
"version": "0.2.0-dev.201709081404", | ||
"author": "Progress", | ||
@@ -6,0 +6,0 @@ "license": "Apache-2.0", |
@@ -1,20 +0,31 @@ | ||
# Kendo UI Material Theme -- PREVIEW, subject to breaking changes without notice | ||
# Kendo UI Material Theme | ||
* [Overview](#overview) | ||
* [Installation](#installation) | ||
> The Kendo UI Material theme is in a preview stage. The current setup is subject to breaking changes without prior notice. | ||
## Overview | ||
The Kendo UI Material Theme is a SCSS-based theme for the Kendo UI components which is based on the [Material design guidelines](https://material.io/). | ||
The **Kendo UI Material Theme** is a theme for the Kendo UI components, based on the [Material design guidelines](https://material.io/). | ||
* [License](#license) | ||
* [Basic Usage](#basic-usage) | ||
The Material theme is available for the following suites: | ||
## License | ||
* Kendo UI for React. | ||
* Kendo UI for Angular. | ||
* Kendo UI for jQuery. | ||
This package is part of the following suites: | ||
## Installation | ||
* [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/) | ||
* [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) | ||
* [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc) | ||
* [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui) | ||
1. Run the `npm install` command to install the build dependencies. | ||
1. Run the `npm run build` command to build the CSS. | ||
All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui. | ||
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). | ||
*Copyright © 2017 Telerik AD. All rights reserved.* | ||
## Basic Usage | ||
For more information on how to implement the Material theme in your project, refer to the following articles: | ||
* [Using the Material Theme in Angular Projects](http://www.telerik.com/kendo-angular-ui/components/styling/) | ||
* [Using the Material Theme in jQuery Projects](http://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) | ||
* [Customizing the Material Theme](https://github.com/telerik/kendo-theme-default/blob/13713a572b392806ca7c2950f77f9b033f87d8ea/README.md) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
1338196
231
32