feat(buttons): style default states
This commit is contained in:
Alex Gyoshev
Родитель
abada213f4
Коммит
f370f4c9be
|
|
@ -28,6 +28,477 @@ The following list describes the theme variables available for adjustment in the
|
|||
## Variables
|
||||
|
||||
|
||||
### Common
|
||||
|
||||
<table class="theme-variables">
|
||||
<colgroup>
|
||||
<col style="white-space:nowrap; width: 200px" />
|
||||
<col style="width: 250px" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$font-size</td>
|
||||
<td>
|
||||
|
||||
14px
|
||||
</td>
|
||||
<td>Base font size across all components.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$font-family</td>
|
||||
<td>
|
||||
|
||||
Roboto, "Helvetica Neue", sans-serif
|
||||
</td>
|
||||
<td>Font family across all components.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$font-family-monospace</td>
|
||||
<td>
|
||||
|
||||
Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace
|
||||
</td>
|
||||
<td>Font family for monospaced text. Used for styling the code.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$line-height</td>
|
||||
<td>
|
||||
|
||||
(28 / 14)
|
||||
</td>
|
||||
<td>Line height used along with $font-size.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$border-radius</td>
|
||||
<td>
|
||||
|
||||
2px
|
||||
</td>
|
||||
<td>Border radius for all components.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$accent</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #3f51b5"></span>
|
||||
#3f51b5
|
||||
</td>
|
||||
<td>The color that focuses the user attention.<br/>
|
||||
Used for primary buttons and for elements of primary importance across the theme.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$accent-contrast</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #ffffff"></span>
|
||||
#ffffff
|
||||
</td>
|
||||
<td>The color used along with the accent color denoted by $accent.<br/>
|
||||
Used to provide contrast between the background and foreground colors.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$base-text</td>
|
||||
<td>
|
||||
|
||||
rgba(0, 0, 0, .87)
|
||||
</td>
|
||||
<td>The text color of the components' chrome area.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$base-bg</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #fff"></span>
|
||||
#fff
|
||||
</td>
|
||||
<td>The background of the components' chrome area.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$base-gradient</td>
|
||||
<td>
|
||||
|
||||
$base-bg, darken( $base-bg, 2% )
|
||||
</td>
|
||||
<td>The gradient background of the components' chrome area.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$hovered-text</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #656565"></span>
|
||||
#656565
|
||||
</td>
|
||||
<td>The text color of hovered items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$hovered-bg</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #ededed"></span>
|
||||
#ededed
|
||||
</td>
|
||||
<td>The background of hovered items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$hovered-border</td>
|
||||
<td>
|
||||
|
||||
rgba( black, .15 )
|
||||
</td>
|
||||
<td>The border color of hovered items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$hovered-gradient</td>
|
||||
<td>
|
||||
|
||||
$hovered-bg, darken( $hovered-bg, 2% )
|
||||
</td>
|
||||
<td>The gradient background of hovered items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$selected-text</td>
|
||||
<td>
|
||||
|
||||
$accent-contrast
|
||||
</td>
|
||||
<td>The text color of selected items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$selected-bg</td>
|
||||
<td>
|
||||
|
||||
$accent
|
||||
</td>
|
||||
<td>The background of selected items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$selected-border</td>
|
||||
<td>
|
||||
|
||||
rgba( black, .1 )
|
||||
</td>
|
||||
<td>The border color of selected items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$selected-gradient</td>
|
||||
<td>
|
||||
|
||||
none
|
||||
</td>
|
||||
<td>The gradient background of selected items.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$error</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #f31700"></span>
|
||||
#f31700
|
||||
</td>
|
||||
<td>The color for error messages and states.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$warning</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #ffc000"></span>
|
||||
#ffc000
|
||||
</td>
|
||||
<td>The color for warning messages and states.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$success</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #37b400"></span>
|
||||
#37b400
|
||||
</td>
|
||||
<td>The color for success messages and states.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$info</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #0058e9"></span>
|
||||
#0058e9
|
||||
</td>
|
||||
<td>The color for informational messages and states.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Buttons
|
||||
|
||||
<table class="theme-variables">
|
||||
<colgroup>
|
||||
<col style="white-space:nowrap; width: 200px" />
|
||||
<col style="width: 250px" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-text</td>
|
||||
<td>
|
||||
|
||||
$base-text
|
||||
</td>
|
||||
<td>The text color of the buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-bg</td>
|
||||
<td>
|
||||
|
||||
$base-bg
|
||||
</td>
|
||||
<td>The background of the buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-border</td>
|
||||
<td>
|
||||
|
||||
$base-border
|
||||
</td>
|
||||
<td>The border color of the buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-gradient</td>
|
||||
<td>
|
||||
|
||||
$base-gradient
|
||||
</td>
|
||||
<td>The background gradient of the buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-hovered-text</td>
|
||||
<td>
|
||||
|
||||
$hovered-text
|
||||
</td>
|
||||
<td>The text color of hovered buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-hovered-bg</td>
|
||||
<td>
|
||||
|
||||
$hovered-bg
|
||||
</td>
|
||||
<td>The background of hovered buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-hovered-border</td>
|
||||
<td>
|
||||
|
||||
$hovered-border
|
||||
</td>
|
||||
<td>The border color of hovered buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-hovered-gradient</td>
|
||||
<td>
|
||||
|
||||
$hovered-gradient
|
||||
</td>
|
||||
<td>The background gradient of hovered buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-pressed-text</td>
|
||||
<td>
|
||||
|
||||
$button-text
|
||||
</td>
|
||||
<td>The text color of pressed buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-pressed-bg</td>
|
||||
<td>
|
||||
|
||||
$button-bg
|
||||
</td>
|
||||
<td>The background color of pressed buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-pressed-border</td>
|
||||
<td>
|
||||
|
||||
$button-border
|
||||
</td>
|
||||
<td>The border color of pressed buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-pressed-gradient</td>
|
||||
<td>
|
||||
|
||||
none
|
||||
</td>
|
||||
<td>The background gradient of pressed buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$button-focused-shadow</td>
|
||||
<td>
|
||||
|
||||
0 3px 4px 0 rgba(0, 0, 0, .06)
|
||||
</td>
|
||||
<td>The shadow of focused buttons.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Charts
|
||||
|
||||
<table class="theme-variables">
|
||||
<colgroup>
|
||||
<col style="white-space:nowrap; width: 200px" />
|
||||
<col style="width: 250px" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$series-a</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #ff6358"></span>
|
||||
#ff6358
|
||||
</td>
|
||||
<td>The color of the first series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$series-b</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #ffd246"></span>
|
||||
#ffd246
|
||||
</td>
|
||||
<td>The clor of the second series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$series-c</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #78d237"></span>
|
||||
#78d237
|
||||
</td>
|
||||
<td>The color of the third series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$series-d</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #28b4c8"></span>
|
||||
#28b4c8
|
||||
</td>
|
||||
<td>The color of the fourth series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$series-e</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #2d73f5"></span>
|
||||
#2d73f5
|
||||
</td>
|
||||
<td>The color of the fifth series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$series-f</td>
|
||||
<td>
|
||||
<span class="color-preview" style="background-color: #aa46be"></span>
|
||||
#aa46be
|
||||
</td>
|
||||
<td>The color of the sixth series.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$chart-major-lines</td>
|
||||
<td>
|
||||
|
||||
rgba(0, 0, 0, .08)
|
||||
</td>
|
||||
<td>The color of the Chart grid lines (major).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$chart-minor-lines</td>
|
||||
<td>
|
||||
|
||||
rgba(0, 0, 0, .04)
|
||||
</td>
|
||||
<td>The color of the Chart grid lines (minor).
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
### Toolbar
|
||||
|
||||
<table class="theme-variables">
|
||||
<colgroup>
|
||||
<col style="white-space:nowrap; width: 200px" />
|
||||
<col style="width: 250px" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$toolbar-padding-x</td>
|
||||
<td>
|
||||
|
||||
$padding-x
|
||||
</td>
|
||||
<td>The horizontal padding of the container.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$toolbar-padding-y</td>
|
||||
<td>
|
||||
|
||||
$padding-x
|
||||
</td>
|
||||
<td>The vertical padding of the container.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
## Mixins
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,394 @@
|
|||
@import "~@progress/kendo-theme-default/scss/mixins/colors";
|
||||
|
||||
|
||||
// Options
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: true !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
|
||||
|
||||
// Fonts
|
||||
|
||||
/// Base font size across all components.
|
||||
$font-size: 14px !default;
|
||||
|
||||
/// Font family across all components.
|
||||
$font-family: Roboto, "Helvetica Neue", sans-serif !default;
|
||||
|
||||
/// Font family for monospaced text. Used for styling the code.
|
||||
$font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
|
||||
|
||||
$font-size-xs: 10px !default;
|
||||
$font-size-sm: 12px !default;
|
||||
$font-size-lg: 19px !default;
|
||||
|
||||
/// Line height used along with $font-size.
|
||||
$line-height: (28 / 14) !default;
|
||||
$line-height-sm: 1.2 !default;
|
||||
$line-height-lg: 1.5 !default;
|
||||
$line-height-em: $line-height * 1em;
|
||||
|
||||
|
||||
// Metrics
|
||||
$spacer: 1em !default;
|
||||
$spacer-x: $spacer !default;
|
||||
$spacer-y: $spacer !default;
|
||||
|
||||
$padding-x: 16px !default;
|
||||
$padding-y: 4px !default;
|
||||
$padding-x-sm: $padding-x / 2 !default;
|
||||
$padding-y-sm: $padding-y / 2 !default;
|
||||
$padding-x-lg: $padding-x * 1.5 !default;
|
||||
$padding-y-lg: $padding-y * 1.5 !default;
|
||||
|
||||
/// Border radius for all components.
|
||||
$border-radius: 2px !default;
|
||||
$border-radius-sm: 1px !default;
|
||||
$border-radius-lg: 4px !default;
|
||||
|
||||
$panel-padding-x: $padding-x !default;
|
||||
$panel-padding-y: $padding-y !default;
|
||||
|
||||
$popup-padding-x: 0 !default;
|
||||
$popup-padding-y: 0 !default;
|
||||
|
||||
$header-padding-x: $padding-x !default;
|
||||
$header-padding-y: $padding-y * 2 !default;
|
||||
|
||||
$form-line-height: $line-height !default;
|
||||
$form-line-height-em: $form-line-height * 1em !default;
|
||||
|
||||
// add-N does not behave well with unitless values
|
||||
$button-border-width: 0px !default; // sass-lint:disable-line zero-unit
|
||||
$button-padding-x: $padding-x !default;
|
||||
$button-padding-y: $padding-y !default;
|
||||
$button-padding-x-sm: $button-padding-x / 2 !default;
|
||||
$button-padding-y-sm: $button-padding-y / 2 !default;
|
||||
$button-calc-size: #{$form-line-height-em} + #{$button-padding-y * 2} + 2px;
|
||||
$button-inner-calc-size: #{$form-line-height-em} + #{$button-padding-y * 2};
|
||||
|
||||
$input-border-width: 1px !default;
|
||||
$input-padding-x: $padding-x !default;
|
||||
$input-padding-y: $padding-y !default;
|
||||
$input-padding-x-sm: $input-padding-x / 2 !default;
|
||||
$input-padding-y-sm: $input-padding-y / 2 !default;
|
||||
$input-calc-size: #{$form-line-height-em} + #{$input-padding-y * 2} + 2px;
|
||||
$input-inner-calc-size: #{$form-line-height-em} + #{$input-padding-y * 2};
|
||||
|
||||
/// The horizontal padding of the container.
|
||||
/// @group toolbar
|
||||
$toolbar-padding-x: $padding-x !default;
|
||||
|
||||
/// The vertical padding of the container.
|
||||
/// @group toolbar
|
||||
$toolbar-padding-y: $padding-x !default;
|
||||
$toolbar-calc-size: #{$button-calc-size} + #{$toolbar-padding-y * 2} + 2px;
|
||||
$toolbar-inner-calc-size: #{$button-calc-size} + #{$toolbar-padding-y * 2};
|
||||
|
||||
$list-item-padding-x: $padding-x !default;
|
||||
$list-item-padding-y: $padding-y !default;
|
||||
|
||||
$nav-item-margin: 2px !default;
|
||||
$nav-item-padding-x: $padding-x-lg !default;
|
||||
$nav-item-padding-y: $padding-y-lg !default;
|
||||
|
||||
$cell-padding-x: 12px !default;
|
||||
$cell-padding-y: 8px !default;
|
||||
$cell-padding: 8px !default;
|
||||
// $cell-padding-sm: $table-sm-cell-padding !default;
|
||||
|
||||
$window-inner-padding-x: 16px !default;
|
||||
$window-inner-padding-y: 16px !default;
|
||||
$window-titlebar-padding-x: 16px !default;
|
||||
$window-titlebar-padding-y: 16px !default;
|
||||
|
||||
$progressbar-height: 22px;
|
||||
|
||||
$zindex-popup: 1;
|
||||
$zindex-window: 2;
|
||||
|
||||
$rgba-transparent: rgba( 0, 0, 0, 0 );
|
||||
|
||||
|
||||
// Theme colors
|
||||
/// The color that focuses the user attention.
|
||||
/// Used for primary buttons and for elements of primary importance across the theme.
|
||||
$accent: #3f51b5 !default;
|
||||
|
||||
/// The color used along with the accent color denoted by $accent.
|
||||
/// Used to provide contrast between the background and foreground colors.
|
||||
$accent-contrast: #ffffff !default;
|
||||
|
||||
$text-color: #656565 !default;
|
||||
$bg-color: #ffffff !default;
|
||||
$border-color: rgba( black, .08 ) !default;
|
||||
|
||||
/// The text color of the components' chrome area.
|
||||
$base-text: rgba(0, 0, 0, .87) !default;
|
||||
/// The background of the components' chrome area.
|
||||
$base-bg: #fff !default;
|
||||
|
||||
$base-border: rgba( black, .08 ) !default;
|
||||
/// The gradient background of the components' chrome area.
|
||||
$base-gradient: $base-bg, darken( $base-bg, 2% ) !default;
|
||||
|
||||
/// The text color of hovered items.
|
||||
$hovered-text: #656565 !default;
|
||||
/// The background of hovered items.
|
||||
$hovered-bg: #ededed !default;
|
||||
/// The border color of hovered items.
|
||||
$hovered-border: rgba( black, .15 ) !default;
|
||||
/// The gradient background of hovered items.
|
||||
$hovered-gradient: $hovered-bg, darken( $hovered-bg, 2% ) !default;
|
||||
|
||||
/// The text color of selected items.
|
||||
$selected-text: $accent-contrast !default;
|
||||
/// The background of selected items.
|
||||
$selected-bg: $accent !default;
|
||||
/// The border color of selected items.
|
||||
$selected-border: rgba( black, .1 ) !default;
|
||||
/// The gradient background of selected items.
|
||||
$selected-gradient: none !default;
|
||||
|
||||
$selected-hover-color: $selected-text !default;
|
||||
$selected-hover-bg: mix( $selected-bg, black, 92) !default;
|
||||
|
||||
$transition: background-color .2s ease !default;
|
||||
|
||||
/// The color for error messages and states.
|
||||
$error: #f31700 !default;
|
||||
/// The color for warning messages and states.
|
||||
$warning: #ffc000 !default;
|
||||
/// The color for success messages and states.
|
||||
$success: #37b400 !default;
|
||||
/// The color for informational messages and states.
|
||||
$info: #0058e9 !default;
|
||||
|
||||
$invalid-border-color: rgba($error, .5) !default;
|
||||
|
||||
$gradient-transparent-to-black: rgba( black, 0), black;
|
||||
$gradient-transparent-to-white: rgba( white, 0), white;
|
||||
$gradient-black-to-transparent: black, rgba( black, 0);
|
||||
$gradient-white-to-transparent: white, rgba( white, 0);
|
||||
|
||||
$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;
|
||||
|
||||
|
||||
|
||||
|
||||
// Widget
|
||||
$widget-text: $text-color !default;
|
||||
$widget-bg: $bg-color !default;
|
||||
$widget-border: rgba( black, .08 ) !default;
|
||||
|
||||
|
||||
// Panel
|
||||
$panel-text: $widget-text !default;
|
||||
$panel-bg: $widget-bg !default;
|
||||
$panel-border: rgba( black, .08 ) !default;
|
||||
|
||||
|
||||
// Popup
|
||||
$popup-text: $base-text !default;
|
||||
$popup-bg: lighten($base-bg, 1%) !default;
|
||||
$popup-border: $base-border !default;
|
||||
$popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
|
||||
|
||||
// Header
|
||||
$header-text: $base-text !default;
|
||||
$header-bg: $base-bg !default;
|
||||
$header-border: $base-border !default;
|
||||
$header-gradient: null !default;
|
||||
|
||||
$header-hovered-text: $hovered-text !default;
|
||||
$header-hovered-bg: $hovered-bg !default;
|
||||
$header-hovered-border: $hovered-border !default;
|
||||
$header-hovered-gradient: null !default;
|
||||
|
||||
$header-selected-text: $selected-text !default;
|
||||
$header-selected-bg: $selected-bg !default;
|
||||
$header-selected-border: $selected-border !default;
|
||||
$header-selected-gradient: null !default;
|
||||
|
||||
|
||||
// Button
|
||||
/// The text color of the buttons.
|
||||
/// @group buttons
|
||||
$button-text: $base-text !default;
|
||||
|
||||
/// The background of the buttons.
|
||||
/// @group buttons
|
||||
$button-bg: $base-bg !default;
|
||||
|
||||
/// The border color of the buttons.
|
||||
/// @group buttons
|
||||
$button-border: $base-border !default;
|
||||
|
||||
/// The background gradient of the buttons.
|
||||
/// @group buttons
|
||||
$button-gradient: $base-gradient !default;
|
||||
$button-shadow: null !default;
|
||||
|
||||
/// The text color of hovered buttons.
|
||||
/// @group buttons
|
||||
$button-hovered-text: $hovered-text !default;
|
||||
|
||||
/// The background of hovered buttons.
|
||||
/// @group buttons
|
||||
$button-hovered-bg: $hovered-bg !default;
|
||||
|
||||
/// The border color of hovered buttons.
|
||||
/// @group buttons
|
||||
$button-hovered-border: $hovered-border !default;
|
||||
|
||||
/// The background gradient of hovered buttons.
|
||||
/// @group buttons
|
||||
$button-hovered-gradient: $hovered-gradient !default;
|
||||
$button-hovered-shadow: null !default;
|
||||
|
||||
/// The text color of pressed buttons.
|
||||
/// @group buttons
|
||||
$button-pressed-text: $button-text !default;
|
||||
|
||||
/// The background color of pressed buttons.
|
||||
/// @group buttons
|
||||
$button-pressed-bg: $button-bg !default;
|
||||
|
||||
/// The border color of pressed buttons.
|
||||
/// @group buttons
|
||||
$button-pressed-border: $button-border !default;
|
||||
|
||||
/// The background gradient of pressed buttons.
|
||||
/// @group buttons
|
||||
$button-pressed-gradient: none !default;
|
||||
$button-pressed-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06) !default;
|
||||
|
||||
/// The shadow of focused buttons.
|
||||
/// @group buttons
|
||||
$button-focused-shadow: 0 3px 4px 0 rgba(0, 0, 0, .06) !default;
|
||||
|
||||
|
||||
// Primary button
|
||||
$primary-button-text: $accent-contrast !default;
|
||||
$primary-button-bg: $accent !default;
|
||||
$primary-button-border: $primary-button-bg !default;
|
||||
$primary-button-gradient: rgba( adjust-hue( $primary-button-bg, 14), 0 ), rgba( adjust-hue( $primary-button-bg, 14), .2 ) !default;
|
||||
|
||||
$primary-button-hovered-text: $primary-button-text !default;
|
||||
$primary-button-hovered-bg: adjust-hue( $primary-button-bg, 3) !default;
|
||||
$primary-button-hovered-border: $primary-button-hovered-bg !default;
|
||||
$primary-button-hovered-gradient: rgba( adjust-hue( $primary-button-hovered-bg, 14), 0 ), rgba( adjust-hue( $primary-button-hovered-bg, 14), .2 ) !default;
|
||||
|
||||
$primary-button-pressed-text: $primary-button-text !default;
|
||||
$primary-button-pressed-bg: $primary-button-bg !default;
|
||||
$primary-button-pressed-border: $primary-button-pressed-bg !default;
|
||||
$primary-button-pressed-gradient: rgba( adjust-hue( $primary-button-pressed-bg, 14), .2 ), rgba( adjust-hue( $primary-button-pressed-bg, 14), 0 ) !default;
|
||||
$primary-button-pressed-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06) !default;
|
||||
|
||||
$primary-button-focused-shadow: 0 3px 4px 0 rgba($accent, .4) !default;
|
||||
|
||||
// Toolbar
|
||||
$toolbar-text: $button-text !default;
|
||||
$toolbar-bg: $button-bg !default;
|
||||
$toolbar-border: $button-border !default;
|
||||
$toolbar-gradient: null !default;
|
||||
|
||||
|
||||
// Input
|
||||
$input-text: $panel-text !default;
|
||||
$input-bg: $panel-bg !default;
|
||||
$input-border: $button-border !default;
|
||||
$input-shadow: null !default;
|
||||
|
||||
$input-hovered-text: $input-text !default;
|
||||
$input-hovered-bg: $input-bg !default;
|
||||
$input-hovered-border: $button-hovered-border !default;
|
||||
$input-hovered-shadow: null !default;
|
||||
|
||||
$input-focused-text: $input-text !default;
|
||||
$input-focused-bg: $input-bg !default;
|
||||
$input-focused-border: $input-hovered-border !default;
|
||||
$input-focused-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
|
||||
|
||||
|
||||
// Node
|
||||
$node-text: $base-text !default;
|
||||
$node-bg: $base-bg !default;
|
||||
$node-border: $base-border !default;
|
||||
$node-gradient: null !default;
|
||||
|
||||
$node-hovered-text: $hovered-text !default;
|
||||
$node-hovered-bg: $hovered-bg !default;
|
||||
$node-hovered-border: $hovered-border !default;
|
||||
$node-hovered-gradient: null !default;
|
||||
|
||||
$node-selected-text: $selected-text !default;
|
||||
$node-selected-bg: $selected-bg !default;
|
||||
$node-selected-border: $selected-border !default;
|
||||
$node-selected-gradient: null !default;
|
||||
|
||||
|
||||
// List
|
||||
$list-item-text: $text-color !default;
|
||||
$list-item-bg: $popup-bg !default;
|
||||
|
||||
$list-item-hovered-text: $hovered-text !default;
|
||||
$list-item-hovered-bg: $hovered-bg !default;
|
||||
|
||||
$list-item-selected-text: $selected-text !default;
|
||||
$list-item-selected-bg: $selected-bg !default;
|
||||
|
||||
$list-item-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
|
||||
|
||||
|
||||
// Link
|
||||
$link-text: $accent !default;
|
||||
$link-hover-text: desaturate(darken($accent, 5), 25) !default;
|
||||
|
||||
|
||||
// Chart
|
||||
/// The color of the first series.
|
||||
/// @group charts
|
||||
$series-a: #ff6358 !default;
|
||||
|
||||
/// The clor of the second series.
|
||||
/// @group charts
|
||||
$series-b: #ffd246 !default;
|
||||
|
||||
/// The color of the third series.
|
||||
/// @group charts
|
||||
$series-c: #78d237 !default;
|
||||
|
||||
/// The color of the fourth series.
|
||||
/// @group charts
|
||||
$series-d: #28b4c8 !default;
|
||||
|
||||
/// The color of the fifth series.
|
||||
/// @group charts
|
||||
$series-e: #2d73f5 !default;
|
||||
|
||||
/// The color of the sixth series.
|
||||
/// @group charts
|
||||
$series-f: #aa46be !default;
|
||||
|
||||
$chart-font-size: $font-size !default;
|
||||
$chart-font-size-sm: 11px !default;
|
||||
$chart-font-size-md: 12px !default;
|
||||
$chart-font-size-lg: 16px !default;
|
||||
|
||||
$chart-inactive: rgba( $text-color, .5 ) !default;
|
||||
/// The color of the Chart grid lines (major).
|
||||
/// @group charts
|
||||
$chart-major-lines: rgba(0, 0, 0, .08) !default;
|
||||
/// The color of the Chart grid lines (minor).
|
||||
/// @group charts
|
||||
$chart-minor-lines: rgba(0, 0, 0, .04) !default;
|
||||
|
||||
$chart-area-opacity: .8 !default;
|
||||
|
||||
// Icons
|
||||
$icon-size: 16px;
|
||||
$icon-size-lg: 32px;
|
||||
$icon-spacing: 4px !default;
|
||||
|
||||
|
|
@ -8,3 +8,4 @@
|
|||
|
||||
// Component
|
||||
@import "button/layout";
|
||||
@import "button/theme";
|
||||
|
|
|
|||
|
|
@ -1,2 +1,42 @@
|
|||
@include exports("button/theme") {
|
||||
// Default button
|
||||
.k-button {
|
||||
@include appearance( button );
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
|
||||
// Pressed state
|
||||
&:active,
|
||||
&.k-state-active {
|
||||
@include appearance( pressed-button );
|
||||
box-shadow: inset $button-pressed-shadow;
|
||||
}
|
||||
|
||||
// Focused state
|
||||
&:focus,
|
||||
&.k-state-focused {
|
||||
box-shadow: $button-focused-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary button
|
||||
.k-button.k-primary {
|
||||
@include appearance( primary-button );
|
||||
|
||||
// Focused
|
||||
&:focus,
|
||||
&.k-state-focused {
|
||||
box-shadow: $primary-button-focused-shadow;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active,
|
||||
&.k-state-active {
|
||||
@include appearance( pressed-primary-button );
|
||||
}
|
||||
}
|
||||
|
||||
// Bare button
|
||||
.k-button.k-primary.k-bare {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче