@progress/kendo-ui/css/web/mixins/appearance.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

/*!
 * Copyright 2018 Telerik EAD
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.appearance( @what ) when ( @what = widget ) {
    &:extend(.widget);
}
.appearance( @what ) when ( @what = panel ) {
    &:extend(.panel);
}
.appearance( @what ) when ( @what = popup ) {
    &:extend(.popup);
}
.appearance( @what ) when ( @what = header ) {
    &:extend(.header);
}
.appearance( @what ) when ( @what = hovered-header ) {
    &:extend(.hovered-header);
}
.appearance( @what ) when ( @what = selected-header ) {
    &:extend(.selected-header);
}
.appearance( @what ) when ( @what = button ) {
    &:extend(.button);
}
.appearance( @what ) when ( @what = hovered-button ) {
    &:extend(.hovered-button);
}
.appearance( @what ) when ( @what = pressed-button ) {
    &:extend(.pressed);
}
.appearance( @what ) when ( @what = primary-button ) {
    &:extend(.primary-button);
}
.appearance( @what ) when ( @what = hovered-primary-button ) {
    &:extend(.hovered-primary-button);
}
.appearance( @what ) when ( @what = pressed-primary-button ) {
    &:extend(.pressed-primary-button);
}
.appearance( @what ) when ( @what = toolbar ) {
    &:extend(.toolbar);
}
.appearance( @what ) when ( @what = input ) {
    &:extend(.input);
}
.appearance( @what ) when ( @what = hovered-input ) {
    &:extend(.hovered-input);
}
.appearance( @what ) when ( @what = focused-input ) {
    &:extend(.focused-input);
}
.appearance( @what ) when ( @what = node ) {
    &:extend(.node);
}
.appearance( @what ) when ( @what = hovered-node ) {
    &:extend(.hovered-node);
}
.appearance( @what ) when ( @what = selected-node ) {
    &:extend(.selected-node);
}
.appearance( @what ) when ( @what = list-item ) {
    &:extend(.list-item);
}
.appearance( @what ) when ( @what = hovered-list-item ) {
    &:extend(.hovered-list-item);
}
.appearance( @what ) when ( @what = selected-list-item ) {
    &:extend(.selected-list-item);
}


// widget
.widget {
    border-color: @widget-border-color;
    color: @widget-text-color;
    background-color: @widget-background-color;
}


// Panels
.panel {
    border-color: @panel-border;
    color: @panel-text;
    background-color: @panel-bg;
}
.popup {
    border-color: @popup-border;
    color: @popup-text;
    background-color: @popup-bg;
}


// Header
.header {
    border-color: @header-border;
    color: @header-text;
    background-color: @header-bg;
    .linear-gradient( @header-gradient );
}
.hovered-header {
    border-color: @header-hovered-border;
    color: @header-hovered-text;
    background-color: @header-hovered-bg;
    .linear-gradient( @header-hovered-gradient );
}
.selected-header {
    border-color: @header-selected-border;
    color: @header-selected-text;
    background-color: @header-selected-bg;
    .linear-gradient( @header-selected-gradient );
}


// Button
.button {
    border-color: @button-border-color;
    color: @button-text-color;
    background-color: @button-background-color;
}
.hovered-button {
    border-color: @button-hover-border-color;
    color: @button-hover-text-color;
    background-color: @button-hover-background-color;
}
.pressed-button {
    border-color: @button-active-border-color;
    color: @selected-text-color;
    background-color: @button-active-background;
}


// Primary button
.button {
    border-color: @primary-button-border;
    color: @primary-button-text;
    background-color: @primary-button-bg;
    .linear-gradient( @primary-button-gradient );
}
.hovered-primary-button {
    border-color: @primary-button-hovered-border;
    color: @primary-button-hovered-text;
    background-color: @primary-button-hovered-bg;
    .linear-gradient( @primary-button-hovered-gradient );
}
.pressed-primary-button {
    border-color: @primary-button-pressed-border;
    color: @primary-button-pressed-text;
    background-color: @primary-button-pressed-bg;
    .linear-gradient( @primary-button-pressed-gradient );
}


// Toolbar
.toolbar {
    border-color: @toolbar-border;
    color: @toolbar-text;
    background-color: @toolbar-bg;
    .linear-gradient( @toolbar-gradient );
}


// Input
.input {
    border-color: @input-border;
    color: @input-text;
    background-color: @input-bg;
}
.hovered-input {
    border-color: @input-hovered-border;
    color: @input-hovered-text;
    background-color: @input-hovered-bg;
}
.focused-input {
    border-color: @input-focused-border;
    color: @input-focused-text;
    background-color: @input-focused-bg;
}


// Node
.node {
    border-color: @node-border;
    color: @node-text;
    background-color: @node-bg;
    .linear-gradient( @node-gradient );
}
.hovered-node {
    border-color: @node-hovered-border;
    color: @node-hovered-text;
    background-color: @node-hovered-bg;
    .linear-gradient( @node-hovered-gradient );
}
.selected-node {
    border-color: @node-selected-border;
    color: @node-selected-text;
    background-color: @node-selected-bg;
    .linear-gradient( @node-selected-gradient );
}


// List item
.list-item {}
.hovered-list-item {}
.selected-list-item {}