@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.

.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 = 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 );
}



// 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 {}