-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(button): add initial styles for button
- Loading branch information
Showing
21 changed files
with
4,237 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "meta": { | ||
| "name": "nouvelle", | ||
| "friendlyName": "Nouvelle" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| # Kendo UI Nouvelle Theme | ||
|
|
||
| This package is part of the following suites: | ||
|
|
||
| * [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/) | ||
| * [KendoReact](http://www.telerik.com/kendo-react-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) | ||
|
|
||
| ## License | ||
|
|
||
| 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 © 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| # Kendo UI Nouvelle Theme | ||
|
|
||
| The Kendo UI Nouvelle Theme is a css variables heavy theme for the Kendo UI components. | ||
|
|
||
| * [License](#license) | ||
| * [Basic Usage](#basic-usage) | ||
|
|
||
| ## License | ||
|
|
||
| This package is part of the following suites: | ||
|
|
||
| * [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/) | ||
| * [KendoReact](http://www.telerik.com/kendo-react-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) | ||
|
|
||
| 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). | ||
|
|
||
| ## Basic Usage | ||
|
|
||
| For more information on how to implement the Nouvelle theme in your project, refer to the following articles: | ||
|
|
||
| * [Using the Nouvelle Theme in Angular Projects](http://www.telerik.com/kendo-angular-ui/components/styling/) | ||
| * [Using the Nouvelle Theme in React Projects](https://www.telerik.com/kendo-react-ui/components/styling/theme-Nouvelle/) | ||
| * [Using the Nouvelle Theme in jQuery Projects](http://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) | ||
|
|
||
| *Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.* | ||
|
|
||
| *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.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,223 @@ | ||
| --- | ||
| title: Customizing Buttons | ||
| description: "Refer to the list of the Kendo UI Nouvelle theme variables available for customization." | ||
| slug: variables_kendothemenouvelle_buttons | ||
| position: 9 | ||
| --- | ||
|
|
||
| # Customizing Buttons | ||
|
|
||
| The following table lists the available variables for customization. | ||
|
|
||
| <style> | ||
| .theme-variables th, | ||
| .theme-variables td { | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .color-preview { | ||
| margin-right: .5em; | ||
| border-radius: 50%; | ||
| width: 1em; | ||
| height: 1em; | ||
| vertical-align: middle; | ||
| display: inline-block; | ||
| border: 1px solid rgba(0,0,0,.08); | ||
| } | ||
|
|
||
| .theme-variables-description-container > div { | ||
| margin: 0 0 .5em 2em; | ||
| } | ||
|
|
||
| .theme-variables-description { | ||
| display: block; | ||
| margin-left: 1em; | ||
| } | ||
| </style> | ||
|
|
||
|
|
||
| <table class="theme-variables"> | ||
| <colgroup> | ||
| <col style="width: 200px; white-space:nowrap;" /> | ||
| <col /> | ||
| <col /> | ||
| <col /> | ||
| </colgroup> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Type</th> | ||
| <th>Default value</th> | ||
| <th>Computed value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>$button-bg</td> | ||
| <td></td> | ||
| <td>$interactive-bg</td> | ||
| <td><span class="color-preview" style="background-color: #f6f6f6"></span>#f6f6f6</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background of the buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-text</td> | ||
| <td></td> | ||
| <td>$interactive-text</td> | ||
| <td><span class="color-preview" style="background-color: #656565"></span>#656565</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-border</td> | ||
| <td></td> | ||
| <td>$interactive-border</td> | ||
| <td>rgba( black, .08 )</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-gradient</td> | ||
| <td></td> | ||
| <td>$interactive-gradient</td> | ||
| <td>rgba( black, 0 ), rgba( black, .02 )</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background gradient of the buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-hover-bg</td> | ||
| <td></td> | ||
| <td>$hover-bg</td> | ||
| <td>shade( $interactive-bg, .5 )</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background of hovered buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-hover-text</td> | ||
| <td></td> | ||
| <td>$hover-text</td> | ||
| <td>$interactive-text</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of hovered buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-hover-border</td> | ||
| <td></td> | ||
| <td>$hover-border</td> | ||
| <td>rgba( black, .15 )</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of hovered buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-hover-gradient</td> | ||
| <td></td> | ||
| <td>$hover-gradient</td> | ||
| <td>rgba( black, 0 ), rgba( black, .02 )</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background gradient of hovered buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-active-text</td> | ||
| <td></td> | ||
| <td>$button-text</td> | ||
| <td><span class="color-preview" style="background-color: #656565"></span>#656565</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of pressed buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-active-bg</td> | ||
| <td></td> | ||
| <td>$button-bg</td> | ||
| <td><span class="color-preview" style="background-color: #f6f6f6"></span>#f6f6f6</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of pressed buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-active-border</td> | ||
| <td></td> | ||
| <td>$button-border</td> | ||
| <td>rgba( black, .08 )</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of pressed buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-active-gradient</td> | ||
| <td></td> | ||
| <td>none</td> | ||
| <td>none</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background gradient of pressed buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-focus-text</td> | ||
| <td></td> | ||
| <td>null</td> | ||
| <td>null</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of focus buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-focus-bg</td> | ||
| <td></td> | ||
| <td>null</td> | ||
| <td>null</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of focus buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-focus-border</td> | ||
| <td></td> | ||
| <td>null</td> | ||
| <td>null</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of focus buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>$button-focus-gradient</td> | ||
| <td></td> | ||
| <td>null</td> | ||
| <td>null</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background gradient of focus buttons.</div></div> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| ## Suggested Links | ||
|
|
||
| * [Styling Overview]({% slug themesandstyles %}) | ||
| * [Web Font Icons]({% slug icons %}) | ||
| * [Preview of the Themed Components](../) | ||
|
|
Oops, something went wrong.