UNPKG

@progress/kendo-ui

Version:

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

2,123 lines (1,800 loc) 74.9 kB
/*! * Copyright 2019 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved. * * 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. */ // Widget @widget-background-color: @background; @widget-text-color: @normal-text-color; @widget-border-color: darken(@background, 25%); @widget-gradient: none; @widget-shadow: none; // Button @button-text-color: @normal-text-color; @button-background-color: lighten(@base, 2%); @button-border-color: darken(@base, 20%); @button-gradient: false; @button-shadow: false; @button-hover-text-color: @normal-text-color; @button-hover-background-color: @hover-background; @button-hover-border-color: darken(@background, 25%); @button-hover-gradient: false; @button-hover-shadow: false; @button-active-background: @accent; @button-active-text-color: @selected-text-color; @button-active-border-color: darken(@accent, 12%); @button-active-gradient: false; @button-active-shadow: false; @button-focused-border-color: @accent; @button-focused-shadow: false; @button-focused-active-shadow: false; // Primary button @primary-text-color: @background; @primary-background-color: lighten(@accent, 10%); @primary-border-color: lighten(@accent, 4%); @primary-gradient: false; @primary-shadow: false; @primary-hover-text-color: @background; @primary-hover-background-color: lighten(@accent, 4%); @primary-hover-border-color: lighten(@accent, 4%); @primary-hover-gradient: false; @primary-hover-shadow: false; @primary-active-text-color: @background; @primary-active-background-color: darken(@accent, 2%); @primary-active-border-color: darken(@accent, 2%); @primary-active-gradient: false; @primary-active-shadow: false; @primary-focused-border-color: darken(@accent, 12%); @primary-focused-shadow: false; @primary-focused-active-shadow: false; @primary-disabled-text-color: @background; @primary-disabled-background-color: darken(@info, 15%); @primary-disabled-border-color: darken(@info, 17%); @primary-disabled-gradient: false; // Input @input-text: @normal-text-color; @input-bg: @background; @input-border: @drop-down-border-color; @input-shadow: false; @input-hovered-text: @input-text; @input-hovered-bg: @input-bg; @input-hovered-border: @drop-down-hover-border-color; @input-hovered-shadow: false; @input-focused-text: @input-text; @input-focused-bg: @input-bg; @input-focused-border: @drop-down-focused-border-color; @input-focused-shadow: @focused-shadow; @sprite-image: url('@{image-folder}/sprite.png'); @tooltip-texture: none; @inverse-text-color: @background; @link-text-color: @accent; @header-text-color: @normal-text-color; @header-background-color: darken(@background, 5%); @group-background-color: @background; @group-border-color: rgba(0, 0, 0, 0.2); @content-background-color: @background; @hover-background-color: @hover-background; @hover-border-color: @hover-background; @hover-shadow: none; @select-background-color: @accent; @select-border-color: @accent; @select-hover-background-color: @background; @select-group-background-color: @background; @selected-background-color: @accent; @selected-secondary-background-color: lighten(@info, 4%); @selected-border-color: @accent; @selected-shadow: none; @focused-border-color: @hover-background; @focused-shadow: none; @focused-item-shadow: none; @focused-active-item-shadow: none; @active-text-color: @normal-text-color; @active-gradient: none; @active-background-color: @background; @active-border-color: darken(@background, 21%); @active-shadow: none; @error-text-color: lighten(@normal-text-color, 20%); @error-background-color: @error; @error-border-color: lighten(@normal-text-color, 20%); @disabled-text-color: lighten(@normal-text-color, 29%); @notification-border-radius: @border-radius; @notification-info-background-color: @info; @notification-info-text-color: @normal-text-color; @notification-info-border-color: @accent; @notification-success-background-color: @success; @notification-success-text-color: @normal-text-color; @notification-success-border-color: darken(@success, 40%); @notification-warning-background-color: @warning; @notification-warning-text-color: @normal-text-color; @notification-warning-border-color: darken(@warning, 35%); @notification-error-background-color: @error; @notification-error-text-color: @normal-text-color; @notification-error-border-color: darken(@error, 20%); @notification-gradient: false; @tooltip-text-color: @normal-text-color; @tooltip-background-color: @background; @tooltip-border-color: darken(@background, 25%); @validation-text-color: contrast(@validation-background-color, lighten(@warning, 80%), darken(@warning, 60%), 0.5); @validation-background-color: @warning; @validation-border-color: @warning; @splitbar-background-color: darken(@background, 5%); @draghandle-border-radius: @border-radius; @draghandle-border-color: lighten(@normal-text-color, 24%); @draghandle-background-color: darken(@background, 5%); @draghandle-shadow: none; @draghandle-hover-border-color: lighten(@normal-text-color, 24%); @draghandle-hover-background-color: lighten(@normal-text-color, 27%); @draghandle-hover-shadow: none; @alt-background-color: transparent; @nested-alt-background-color: darken(@alt-background-color, 8%); @cell-border-color: darken(@background, 21%); @column-highlight-background-color: darken(@hover-background, 2%); @active-filter-background-color: @background; @scheduler-background-color: darken(@background, 5%); @current-time-color: lighten(@normal-text-color, 20%); @event-background-color: @accent; @event-text-color: @background; @event-inverse-text-color: @normal-text-color; @scheduler-nonwork-background-color: darken(@hover-background, 2%); @resize-background-color: @background; @upload-progress-background-color: darken(@info, 50%); @upload-progress-text-color: darken(@info, 50%); @upload-success-background-color: darken(@success, 40%); @upload-success-text-color: darken(@success, 40%); @upload-error-background-color: @error; @upload-error-text-color: darken(@error, 50%); @task-summary-color: darken(@background, 20%); @task-summary-selected-color: lighten(@info, 4%); @loading-panel-color: @background; @shadow-color: rgba(0, 0, 0, .2); @shadow-inset-color: darken(@background, 20%); @list-border-radius: @border-radius; @inner-border-radius: @border-radius; @slider-border-radius: @border-radius; @default-icon-opacity: .6; @menu-border-color: transparent; @tabstrip-items-border: transparent; @tabstrip-active-background: @background; @tabstrip-tabs-color: @normal-text-color; @form-widget-color: @normal-text-color; @drop-down-border-color: darken(@background, 25%); @drop-down-hover-border-color: @accent; @drop-down-focused-border-color: @accent; @drop-down-background: @background; @drop-down-text-color: @normal-text-color; @secondary-border-color: darken(@background, 21%); @secondary-text-color: @normal-text-color; @secondary-background-color: @background; @numeric-selected-background: @hover-background; @panelbar-items-border: darken(@background, 25%); @panelbar-content-background: @background; @panelbar-content-color: @normal-text-color; @window-shadow-style: 1px 1px 13px 1px; @filter-menu-content-background: @background; @icon-background-color: transparent; @disabled-background-color: darken(@background, 25%); @disabled-border-color: darken(@background, 5%); @disabled-gradient: none; @treeview-text-color: @normal-text-color; @treeview-hover-text-color: @normal-text-color; @tabstrip-tabs-hover-color: @normal-text-color; @slider-selection-background-color: @accent; @form-widgets-border-color: darken(@hover-background, 1%); @pager-text-color: @normal-text-color; @draghandle-selected-background: @accent; @form-widgets-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); @concave-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); @accent-color: @accent; @input-validation-error: darken(@error, 20%); // Link @link-text: @accent; @link-hovered-text: contrast(@base, darken(@link-text, 4), lighten(@link-text, 4), .5); // component @component-bg: @widget-background-color; @component-text: @widget-text-color; @component-border: @widget-border-color; // Toolbar @toolbar-bg: @header-background-color; @toolbar-text: @widget-text-color; @toolbar-border: @widget-border-color; @toolbar-gradient: @widget-gradient; @card-bg: @component-bg; @card-text: @component-text; @card-border: @component-border; @card-header-bg: @header-background-color; @card-header-text: @header-text-color; @card-header-border: @card-border; @chat-bg: @component-bg; @chat-text: @component-text; @chat-border: @component-border; @chat-bubble-bg: @button-background-color; @chat-bubble-text: @button-text-color; @chat-bubble-border: @chat-bubble-bg; @chat-alt-bubble-bg: @accent; @chat-alt-bubble-text: contrast(@accent); @chat-alt-bubble-border: @chat-alt-bubble-bg; @chat-quick-reply-color: @accent; // Grid @grid-bg: @component-bg; @grid-text: @component-text; @grid-border: @component-border; @grid-header-bg: @header-background-color; @grid-header-text: @header-text-color; @grid-header-border: @grid-border; @grid-header-gradient: false; @grid-alt-bg: @alt-background-color; @grid-alt-text: @grid-text; @grid-alt-border: @grid-border; @grid-hover-bg: @hover-background-color; @grid-hover-text: @grid-text; @grid-hover-border: @grid-border; @grid-hover-gradient: false; @grid-selected-bg: desaturate(@selected-secondary-background-color, 5%); @grid-selected-text: @grid-text; @grid-selected-border: @grid-border; @grid-selected-gradient: false; // Calendar @calendar-bg: @component-bg; @calendar-text: @component-text; @calendar-border: @component-border; @calendar-header-bg: transparent; @calendar-header-text: @calendar-text; @calendar-header-border: @calendar-border; @calendar-header-gradient: none; @calendar-header-cell-bg: transparent; @calendar-header-cell-text: @calendar-text; @calendar-header-cell-border: @calendar-border; @calendar-week-cell-bg: @calendar-header-cell-bg; @calendar-week-cell-text: @calendar-header-cell-text; @calendar-week-cell-border: @calendar-header-cell-border; @calendar-weekend-cell-bg: contrast(@calendar-bg, lighten(@calendar-bg, 10), darken(@calendar-bg, 10), .5); @calendar-weekend-cell-text: null; @calendar-weekend-cell-border: null; @calendar-othermonth-cell-bg: null; @calendar-othermonth-cell-text: @disabled-text-color; @calendar-othermonth-cell-border: null; @calendar-cell-hovered-bg: @button-hover-background-color; @calendar-cell-hovered-text: @button-hover-text-color; @calendar-cell-hovered-border: @button-hover-border-color; @calendar-cell-selected-bg: @selected-background-color; @calendar-cell-selected-text: @selected-text-color; @calendar-cell-selected-border: @selected-border-color; @calendar-cell-focused-shadow: inset 0 0 0px 1px @accent; // Dialog @dialog-button-stretched-padding-x: 0.9em; @dialog-button-stretched-padding-y: @dialog-button-stretched-padding-x; // ScrollView @scrollview-pagebutton-bg: @button-background-color; @scrollview-pagebutton-border: @button-border-color; @scrollview-pagebutton-primary-bg: @primary-background-color; @scrollview-pagebutton-primary-border: @primary-border-color; @scrollview-pagebutton-shadow: @button-shadow; @scrollview-navigation-color: @selected-text-color; @scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px; @scrollview-navigation-background: rgba(0, 0, 0, 0); @scrollview-navigation-default-opacity: .7; @scrollview-navigation-hover-opacity: 1; @scrollview-navigation-hover-span-bg: transparent; // Switch @switch-container-shadow: false; @switch-container-hovered-shadow: false; @switch-container-focused-shadow: false; @switch-on-bg: @normal-background; @switch-on-text: @primary-background-color; @switch-on-border: @button-border-color; @switch-on-gradient: false; @switch-on-shadow: false; @switch-on-focused-shadow: @focused-shadow; @switch-on-focused-bg: @switch-on-bg; @switch-on-focused-text: @switch-on-text; @switch-on-focused-border: @button-focused-border-color; @switch-on-focused-gradient: @switch-on-gradient; @switch-on-hovered-bg: @switch-on-bg; @switch-on-hovered-text: @switch-on-text; @switch-on-hovered-border: @button-focused-border-color; @switch-on-hovered-gradient: false; @switch-on-handle-bg: @primary-background-color; @switch-on-handle-text: @switch-on-text; @switch-on-handle-border: @primary-border-color; @switch-on-handle-gradient: @primary-gradient; @switch-on-handle-shadow: false; @switch-on-handle-focused-bg: @switch-on-handle-bg; @switch-on-handle-focused-text: @switch-on-handle-text; @switch-on-handle-focused-border: @switch-on-handle-border; @switch-on-handle-focused-gradient: @switch-on-handle-gradient; @switch-on-handle-hovered-bg: @primary-hover-background-color; @switch-on-handle-hovered-text: @switch-on-text; @switch-on-handle-hovered-border: @primary-hover-border-color; @switch-on-handle-hovered-gradient: @primary-hover-gradient; @switch-off-bg: @switch-on-bg; @switch-off-text: @normal-text-color; @switch-off-border: @switch-on-border; @switch-off-gradient: false; @switch-off-shadow: false; @switch-off-focused-shadow: @switch-on-focused-shadow; @switch-off-focused-bg: @switch-off-bg; @switch-off-focused-text: @switch-off-text; @switch-off-focused-border: @button-focused-border-color; @switch-off-focused-gradient: @switch-off-gradient; @switch-off-hovered-bg: @switch-off-bg; @switch-off-hovered-text: @switch-off-text; @switch-off-hovered-border: @switch-on-hovered-border; @switch-off-hovered-gradient: false; @switch-off-handle-bg: @button-background-color; @switch-off-handle-text: @switch-off-text; @switch-off-handle-border: @button-border-color; @switch-off-handle-gradient: @button-gradient; @switch-off-handle-shadow: false; @switch-off-handle-focused-bg: @switch-off-handle-bg; @switch-off-handle-focused-text: @switch-off-handle-text; @switch-off-handle-focused-border: @button-focused-border-color; @switch-off-handle-focused-gradient: @switch-off-handle-gradient; @switch-off-handle-hovered-bg: @button-hover-background-color; @switch-off-handle-hovered-text: @switch-off-text; @switch-off-handle-hovered-border: @button-hover-border-color; @switch-off-handle-hovered-gradient: @button-hover-gradient; // PDF viewer @pdf-viewer-bg: null; @pdf-viewer-text: null; @pdf-viewer-border: null; @pdf-viewer-canvas-bg: @chat-bg; @pdf-viewer-canvas-text: null; @pdf-viewer-canvas-border: null; @pdf-viewer-page-bg: white; @pdf-viewer-page-text: @component-text; @pdf-viewer-page-border: @component-border; @pdf-viewer-page-shadow: 0 0 15px @pdf-viewer-page-border; @pdf-viewer-toolbar-button-bg: @button-text-color; // Adaptive Common @adaptive-content-bg: @header-background-color; @adaptive-content-text: @accent; @adaptive-menu-bg: @accent; @adaptive-menu-text: @selected-text-color; @adaptive-menu-clear-text: @accent; @adaptive-menu-item-border: @cell-border-color; @adaptive-menu-title-text: @normal-text-color; // Adaptive Grid @adaptive-grid-sort-text: @accent; // Adaptive Scheduler @adaptive-scheduler-current-text: @accent; @adaptive-scheduler-base-text: inherit; // Drawer @drawer-text: @widget-text-color; @drawer-bg: @widget-background-color; @drawer-border: @widget-border-color; @drawer-scrollbar-color: rgba(156, 156, 156, 0.7); @drawer-scrollbar-bg: #dedede; @drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1); @drawer-hovered-text: @hover-text-color; @drawer-hovered-bg: @hover-background; @drawer-hovered-gradient: @hover-gradient; @drawer-focused-bg: @drawer-bg; @drawer-focused-shadow: inset 0 0 0 1px @accent; @drawer-selected-text: @selected-text-color; @drawer-selected-bg: @selected-background; @drawer-selected-hover-bg: contrast(@background, lighten(@selected-background, 5%), darken(@selected-background, 5%), 0.5); @drawer-selected-hover-text: @selected-text-color; // Spreadsheet @spreadsheet-insert-image-dialog-preview-overlay: inset 0 0 0 2000px rgba(0,0,0, 0.5); @spreadsheet-insert-image-dialog-hovered-text: #fff; @spreadsheet-drawing-handle-bg: @spreadsheet-selection-border; @spreadsheet-drawing-handle-border-color: #fff; @spreadsheet-drawing-handle-border-radius: 50%; @spreadsheet-drawing-handle-outline: @spreadsheet-selection-border; @spreadsheet-drawing-anchor-bg: @spreadsheet-selection-background; // Kendo skin @theme-name: ~"fiori"; @import "common/mixins.less"; @import "mixins/gradients.less"; @import "mixins/border-radius.less"; @import "themes/type.less"; @import "themes/button.less"; @import "Default/card/_theme.less"; @import "Default/chat/_theme.less"; @import "Default/calendar/_theme.less"; @import "Default/multiviewcalendar/_theme.less"; @import "Default/pdf-viewer/_theme.less"; @import "Default/scrollview/_theme.less"; @import "Default/switch/_theme.less"; @import "common/adaptive/_theme.less"; @import "Default/drawer/_theme.less"; .k-in, .k-item { border-color: transparent; } // main colors .k-splitbar .k-resize-handle { background-color: @normal-text-color; } .k-block, .k-widget { background-color: @widget-background-color; } .k-block, .k-widget, .k-input, .k-textbox, .k-group, .k-content, .k-header, .k-filter-row > th, .k-editable-area, .k-separator, .k-textbox > input, .k-autocomplete, .k-dropdown-wrap, .k-toolbar, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-grid-header, .k-grid-header-wrap, .k-grid-header-locked, .k-grid-footer-locked, .k-grid-content-locked, .k-grid td, .k-grid td.k-state-selected, .k-grid-footer-wrap, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-refresh, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-panelbar > .k-item > .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-panel, .k-panelbar .k-content, .k-treemap-tile, .k-calendar th, .k-slider-track, .k-splitbar, .k-dropzone-active, .k-tiles, .k-tooltip, .k-button-group .k-tool, .k-upload-files, .k-popup.k-align .k-list .k-item:last-child, .k-editor-dialog .k-tabstrip-items, .k-maskedtextbox.k-state-disabled > .k-textbox:hover, .k-dateinput.k-state-disabled > .k-textbox:hover { border-color: @widget-border-color; } .k-group, .k-grouping-header, .k-pager-wrap, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-widget .k-status, .k-calendar th, .k-dropzone-hovered, .k-popup { background-color: @group-background-color; } .k-grouping-row td, td.k-group-cell, .k-resize-handle-inner, .k-grid .k-state-selected:hover .k-group-cell { background-color: @header-background-color; } .k-list-container { border-color: @group-border-color; background-color: @select-group-background-color; } .k-content, .k-editable-area, .k-panelbar > li.k-item, .k-panel > li.k-item, .k-tiles { background-color: @content-background-color; } .k-alt, .k-separator, .k-resource.k-alt, .k-pivot-layout > tbody > tr:first-child > td:first-child { background-color: @alt-background-color; } .k-pivot-rowheaders .k-alt .k-alt, .k-header.k-alt { background-color: @nested-alt-background-color; } .k-textbox, .k-autocomplete.k-header, .k-dropdown-wrap.k-state-active, .k-picker-wrap.k-state-active, .k-numeric-wrap.k-state-active { border-color: @widget-border-color; background-color: @select-background-color; } .k-textbox > input, .k-autocomplete .k-input, .k-dropdown-wrap .k-input, .k-autocomplete.k-state-focused .k-input, .k-dropdown-wrap.k-state-focused .k-input, .k-picker-wrap.k-state-focused .k-input, .k-numeric-wrap.k-state-focused .k-input { border-color: @widget-border-color; } input.k-textbox, textarea.k-textbox, input.k-textbox:hover, textarea.k-textbox:hover, .k-textbox > input { background: none; } .k-input, input.k-textbox, textarea.k-textbox, input.k-textbox:hover, textarea.k-textbox:hover, .k-textbox > input, .k-multiselect-wrap { background-color: @input-bg; color: @input-text; } // Bootstrap readonly input styling has more specificity than ours. .k-input[readonly] { background-color: @input-bg; color: @input-text; } .k-block, .k-widget, .k-popup, .k-content, .k-toolbar, .k-dropdown .k-input { color: @widget-text-color; } .k-inverse { color: @inverse-text-color; } .k-block { color: @header-text-color; } .k-link, .k-nav-current.k-state-hover .k-link { color: @link-text-color; } .k-tabstrip-items .k-link, .k-panelbar > li > .k-link { color: @widget-text-color; } .k-header, .k-treemap-title, .k-grid-header .k-header > .k-link { color: @header-text-color; } .k-header, .k-grid-header, .k-toolbar, .k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap, .k-grouping-header, .k-pager-wrap, .k-textbox, .k-progressbar, .k-draghandle, .k-autocomplete, .k-state-highlight, .k-tabstrip-items .k-item, .k-panelbar .k-tabstrip-items .k-item { .composite-background(@widget-gradient); background-position: 50% 50%; background-color: @header-background-color; } .k-widget.k-tooltip { background-image: @tooltip-texture; } .k-block, .k-treemap-tile { background-color: @header-background-color; } .k-overflow-container > .k-button, .k-split-container > .k-button, .k-toolbar .k-button-group .k-button:not(:focus) { border-color: transparent; } .k-mediaplayer-toolbar { background-color: fade(@header-background-color, 85%); } .k-hr { border-color: @widget-border-color; } // icons .k-icon:hover, .k-state-hover .k-icon, .k-state-selected .k-icon, .k-state-focused .k-icon, .k-column-menu .k-state-hover .k-sprite, .k-column-menu .k-state-active .k-sprite, .k-pager-numbers .k-current-page .k-link:hover:after, .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view.k-state-hover > .k-link:after { opacity:1; } .k-state-disabled .k-icon, .k-column-menu .k-sprite, .k-pager-numbers .k-current-page .k-link:after, .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link:after { opacity: @default-icon-opacity; } // Badge .k-badge { background-color: @accent; color: contrast(@accent, @normal-background, @normal-text-color, 0.5); border-radius: @inner-border-radius; } .k-tool { border-color: transparent; } .k-i-loading { background-image: url('@{image-folder}/loading.gif'); } .k-loading-image { background-image: url('@{image-folder}/loading-image.gif'); } .k-loading-color { background-color: @loading-panel-color; } .k-draghandle { border-color: @draghandle-border-color; background-color: @draghandle-background-color; .box-shadow(@draghandle-shadow); } .k-draghandle:hover { border-color: @draghandle-hover-border-color; background-color: @draghandle-hover-background-color; .box-shadow(@draghandle-hover-shadow); } // Scheduler .k-scheduler { color: @event-text-color; background-color: @scheduler-background-color; } .k-scheduler-layout { color: @widget-text-color; } .k-scheduler-datecolumn, .k-scheduler-groupcolumn { background-color: @scheduler-background-color; color: @widget-text-color; } .k-scheduler-times tr, .k-scheduler-times th, .k-scheduler-table td, .k-scheduler-header th, .k-scheduler-header-wrap, .k-scheduler-times { border-color: @cell-border-color; } .k-scheduler-monthview .k-today { background: @column-highlight-background-color; } .k-scheduler-weekview, .k-scheduler-workWeekview { .k-scheduler-header th.k-today { position: relative; &:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; right: 0; border-bottom: 3px solid @select-border-color; } } } .k-today > .k-scheduler-datecolumn, .k-today > .k-scheduler-groupcolumn { background-color: @column-highlight-background-color; } .k-nonwork-hour, .k-scheduler-dayview .k-today.k-nonwork-hour, .k-scheduler-timelineview .k-today.k-nonwork-hour { background-color: @scheduler-nonwork-background-color; } .k-gantt .k-nonwork-hour { background-color: rgba(0,0,0, .02); } .k-gantt .k-header.k-nonwork-hour { background-color: rgba(0,0,0, .2); } .k-scheduler-now-arrow { border-left-color: @current-time-color; } .k-scheduler-now-line { background-color: @current-time-color; } .k-event, .k-task-complete { border-color: @event-background-color; background: @event-background-color 0 -257px @tooltip-texture repeat-x; color: @event-text-color; } .k-event-inverse { color: @event-inverse-text-color; } .k-event.k-state-selected { background-position: 0 0; .box-shadow(0 0 0 2px @normal-text-color); } .k-event .k-resize-handle:after, .k-task-single .k-resize-handle:after { background-color: @resize-background-color; } .k-scheduler-marquee:before, .k-scheduler-marquee:after { border-color: @selected-background-color; } .k-panelbar .k-content, .k-panelbar .k-panel, .k-panelbar .k-item { background-color: @panelbar-content-background; color: @panelbar-content-color; border-color: @secondary-border-color; } .k-panelbar > li > .k-link { color: @panelbar-content-color; } .k-panelbar > .k-item > .k-link { border-color: @secondary-border-color; } .k-panel > li.k-item { background-color: @panelbar-content-background; } // states .k-state-active, .k-state-active:hover, .k-active-filter { background-color: @active-background-color; border-color: @active-border-color; color: @active-text-color; } .k-fieldselector .k-list-container { background-color: @active-background-color; } .k-button.k-bare { position: relative; &:before { content: ""; background-color: currentcolor; opacity: 0.12; border-radius: inherit; height: 100%; width: 100%; position: absolute; left: 0; top: 0; display: none; } &.k-state-focused, &:focus { &:before { display: block; } } } .k-mediaplayer-toolbar .k-button.k-bare { &:active, &.k-state-active, &.k-state-active:hover { color: @accent; &:before { opacity: 0.24; } } } .k-slider.k-mediaplayer-seekbar { top: -14px; } .k-quality-list { margin-left: -23px !important; } .k-menu .k-state-hover>.k-state-active { background-color: transparent; } .k-menu { .k-state-selected > .k-link { color: @widget-text-color; background-color: @selected-secondary-background-color; } .k-link.k-state-active { background-color: @selected-background; color: @selected-text-color; } .k-state-hover > .k-link, .k-menu-scroll-button:hover { color: @hover-text-color; background-color: @hover-background-color; border-color: @hover-border-color; .composite-background(@hover-gradient); } } .k-state-highlight { background: @active-background-color; color: @active-text-color; } .k-state-focused, .k-grouping-row .k-state-focused { border-color: @focused-border-color; } .k-state-selected, .k-state-selected:link, .k-state-selected:visited, .k-tool.k-state-selected, .k-list>.k-state-selected, .k-list>.k-state-highlight, .k-panel > .k-state-selected, .k-ghost-splitbar-vertical, .k-ghost-splitbar-horizontal, .k-draghandle.k-state-selected:hover, .k-scheduler .k-scheduler-toolbar .k-state-selected, .k-scheduler .k-today.k-state-selected, .k-marquee-color { color: @selected-text-color; background-color: @selected-background-color; border-color: @selected-border-color; } .k-virtual-item.k-first, .k-group-header + .k-list > .k-item.k-first, .k-static-header + .k-list > .k-item.k-first { border-top-color: @hover-border-color; } .k-group-header + div > .k-list > .k-item.k-first:before { border-top-color: @hover-border-color; } .k-popup > .k-group-header, .k-popup > .k-virtual-wrap > .k-group-header { background: @hover-border-color; color: @selected-text-color; } .k-popup .k-list .k-item > .k-group { background: @hover-border-color; color: @selected-text-color; border-bottom-left-radius: @inner-border-radius; } .k-marquee-text { color: @selected-text-color; } .k-state-focused, .k-list>.k-state-focused, .k-grid-header th.k-state-focused, td.k-state-focused { .box-shadow(@focused-item-shadow); } .k-listview>.k-state-focused, .k-listview > .k-state-focused.k-state-selected { box-shadow: inset 0 0 0 1px @selected-background; } .k-listview > .k-state-selected { color: @widget-text-color; background-color: desaturate(@selected-secondary-background-color, 5%); } .k-state-focused.k-state-selected, .k-list>.k-state-focused.k-state-selected, td.k-state-focused.k-state-selected { .box-shadow(@focused-active-item-shadow); } .k-list-optionlabel.k-state-selected.k-state-focused { .box-shadow(none); } .k-state-selected>.k-link, .k-panelbar > li > .k-state-selected, .k-panelbar .k-item .k-link.k-state-selected, .k-panelbar>li.k-state-default>.k-link.k-state-selected { color: @selected-text-color; background-color: @selected-background-color; &:hover { background-color: @primary-hover-background-color; } } .k-state-hover, .k-splitbar-horizontal-hover, .k-splitbar-vertical-hover, .k-list>.k-state-hover, .k-scheduler .k-scheduler-toolbar ul li.k-state-hover, .k-pager-wrap .k-link:hover, .k-dropdown .k-state-focused, .k-filebrowser-dropzone, .k-listbox .k-item:hover:not(.k-state-disabled) { color: @hover-text-color; background-color: @hover-background-color; border-color: @hover-border-color; } .k-pager-wrap .k-link.k-state-disabled { color: @normal-text-color; } .k-state-hover > .k-select, .k-state-focused > .k-select { border-color: @hover-border-color; } .k-textbox:hover, .k-state-hover, .k-pager-wrap .k-link:hover, .k-other-month.k-state-hover .k-link, div.k-filebrowser-dropzone em, .k-draghandle:hover, .k-listbox .k-item:hover { .composite-background(@hover-gradient); } .k-pager-wrap { background-color: @header-background-color; color: @header-text-color; &.k-pager-lg, &.k-pager-md, &.k-pager-sm { .k-pager-numbers { background-color: @background; .k-link:hover { background-color: @hover-background-color; } .k-link.k-pager-nav { background-color: @background; } .k-state-selected { border-color: @select-border-color; background-color: @selected-secondary-background-color; } &:hover { border-color: @select-border-color; } &.k-state-expanded { border-color: inherit; } } } } .k-autocomplete.k-state-active, .k-picker-wrap.k-state-active, .k-numeric-wrap.k-state-active, .k-dropdown-wrap.k-state-active, .k-state-active, .k-state-active:hover, .k-state-active>.k-link, .k-panelbar>.k-item>.k-state-focused { .composite-background(@active-gradient); } .k-state-selected, .k-draghandle.k-state-selected:hover { .composite-background(@selected-gradient); } .k-draghandle.k-state-selected:hover { background-position: 50% 50%; } .k-state-hover>.k-link, .k-other-month.k-state-hover .k-link, div.k-filebrowser-dropzone em { color: @hover-text-color; } .k-autocomplete.k-state-hover, .k-autocomplete.k-state-focused, .k-picker-wrap.k-state-hover, .k-picker-wrap.k-state-focused, .k-numeric-wrap.k-state-hover, .k-numeric-wrap.k-state-focused, .k-dropdown-wrap.k-state-hover, .k-dropdown-wrap.k-state-focused { background-color: @select-hover-background-color; .composite-background(@hover-gradient); background-position: 50% 50%; border-color: @select-border-color; } .k-dropdown .k-state-focused .k-input { color: @widget-text-color; } .k-dropdown .k-state-hover .k-input { color: @hover-text-color; } .k-state-error { border-color: @error-border-color; background-color: @error-background-color; color: @error-text-color; } .k-state-disabled { opacity: .6; } .k-tile-empty.k-state-selected, .k-loading-mask.k-state-selected { border-width: 0; background-image: none; background-color: transparent; } .k-state-disabled, .k-state-disabled .k-link, .k-other-month, .k-other-month .k-link, .k-dropzone em, .k-dropzone .k-upload-status, .k-tile-empty strong, .k-slider .k-draghandle { color: @disabled-text-color; } .k-file .k-upload-status { color: @normal-text-color; } // Progressbar .k-progressbar-indeterminate { background: url('@{image-folder}/indeterminate.gif'); } .k-progressbar-indeterminate .k-progress-status-wrap, .k-progressbar-indeterminate .k-state-selected { display: none; } // Slider .k-slider-track { background-color: @widget-border-color; } .k-slider-selection { background-color: @selected-background-color; } .k-slider-horizontal .k-tick { background-image:url('@{image-folder}/slider-h.gif'); } .k-slider-vertical .k-tick { background-image:url('@{image-folder}/slider-v.gif'); } // Tooltip .k-widget.k-tooltip, .k-chart-crosshair-tooltip, .k-chart-shared-tooltip { border-color: @tooltip-border-color; background-color: @tooltip-background-color; color: @tooltip-text-color; } .k-widget.k-tooltip-validation { border-color: @validation-border-color; background-color: @validation-background-color; color: @validation-text-color; } // Bootstrap theme fix .input-prepend .k-tooltip-validation, .input-append .k-tooltip-validation { font-size: 12px; position: relative; top: 3px; } .k-callout-n { border-bottom-color: @tooltip-border-color; } .k-callout-w { border-right-color: @tooltip-border-color; } .k-callout-s { border-top-color: @tooltip-border-color; } .k-callout-e { border-left-color: @tooltip-border-color; } .k-tooltip-validation .k-callout-n { border-bottom-color: @validation-border-color; } .k-tooltip-validation .k-callout-w { border-right-color: @validation-border-color; } .k-tooltip-validation .k-callout-s { border-top-color: @validation-border-color; } .k-tooltip-validation .k-callout-e { border-left-color: @validation-border-color; } // Splitter .k-splitbar { background-color: @splitbar-background-color; } .k-restricted-size-vertical, .k-restricted-size-horizontal { background-color: @error-text-color; } // Upload .k-file { background-color: @active-background-color; border-color: @cell-border-color; } .k-file-progress { color: @upload-progress-text-color; } .k-file-progress .k-progress { background-color: @upload-progress-background-color; } .k-file-success .k-file-name, .k-file-success .k-upload-pct { color: @upload-success-text-color; } .k-file-success .k-progress { background-color: @upload-success-background-color; } .k-file-error { color: @upload-error-text-color; .k-file-extension-wrapper, .k-multiple-files-extension-wrapper { color: @upload-error-text-color; border-color: @upload-error-text-color; &:before { border-color: transparent transparent @upload-error-text-color @upload-error-text-color; } } } .k-file-error .k-progress { background-color: @upload-error-background-color; } .k-file-extension-wrapper, .k-multiple-files-extension-wrapper { color: @disabled-background-color; border-color: @disabled-background-color; } .k-file-invalid .k-file-name-invalid { color: @upload-error-text-color; } .k-file-invalid-extension-wrapper, .k-multiple-files-invalid-extension-wrapper { color: @upload-error-text-color; border-color: @upload-error-text-color; } .k-file-extension-wrapper:before, .k-multiple-files-extension-wrapper:before { background-color: @widget-background-color; border-color: transparent transparent @disabled-background-color @disabled-background-color; } .k-file-invalid-extension-wrapper:before, .k-multiple-files-invalid-extension-wrapper:before { background-color: @widget-background-color; border-color: transparent transparent @upload-error-text-color @upload-error-text-color; } .k-multiple-files-extension-wrapper:after { border-top-color: @disabled-background-color; border-left-color: @disabled-background-color; } .k-multiple-files-invalid-extension-wrapper:after { border-top-color: @upload-error-text-color; border-left-color: @upload-error-text-color; } .k-file-size, .k-file-information, .k-file-validation-message { color: @disabled-text-color; } .k-upload .k-upload-selected { color: @accent; border-color: @widget-border-color; } // ImageBrowser .k-tile { border-color: @content-background-color; } .k-textbox:hover, .k-tiles li.k-state-hover { border-color: @hover-border-color; } .k-tiles li.k-state-selected { border-color: @selected-border-color; } // TreeMap .k-leaf, .k-leaf.k-state-hover { color: #fff; } .k-leaf.k-inverse, .k-leaf.k-inverse.k-state-hover { color: #000; } // Shadows .k-widget { .box-shadow(@widget-shadow); } .k-slider, .k-treeview, .k-upload { .box-shadow(none); } .k-state-hover { .box-shadow(@hover-shadow); } .k-textbox:focus, .k-autocomplete.k-state-focused, .k-dropdown-wrap.k-state-focused, .k-picker-wrap.k-state-focused, .k-numeric-wrap.k-state-focused { .box-shadow(@focused-shadow); } .k-state-selected { .box-shadow(@selected-shadow); } .k-state-active { .box-shadow(@active-shadow); } .k-popup, .k-menu .k-menu-group, .k-grid .k-filter-options, .k-time-popup, .k-datepicker-calendar, .k-autocomplete.k-state-border-down, .k-autocomplete.k-state-border-up, .k-dropdown-wrap.k-state-active, .k-picker-wrap.k-state-active, .k-state-focused > .k-multiselect-wrap, .k-multiselect-wrap.k-state-focused, .k-filebrowser .k-image, .k-tooltip { .box-shadow(0 2px 2px 0 @shadow-color); } .k-treemap-tile.k-state-hover { .box-shadow(inset 0 0 0 3px @widget-border-color); } // Window .k-window { .window-shadow(@shadow-color); } .k-window.k-window-maximized, .k-window-maximized .k-window-titlebar, .k-window-maximized .k-window-content { border-radius: 0; } .k-shadow { .box-shadow(0 1px 2px 0 @shadow-color); } .k-inset { .box-shadow(inset 0 1px 1px @shadow-color); } // Selection .k-editor-inline { .selection(@selected-border-color); } // Notification @import "themes/notification.less"; // Gantt .k-gantt .k-treelist { background: @alt-background-color; } .k-gantt .k-treelist .k-alt { background-color: darken(@alt-background-color, 10%); } .k-gantt .k-treelist .k-state-selected, .k-gantt .k-treelist .k-state-selected td, .k-gantt .k-treelist .k-alt.k-state-selected, .k-gantt .k-treelist .k-alt.k-state-selected > td { background-color: @selected-background-color; } .k-task-dot:after { background-color: @widget-text-color; border-color: @widget-text-color; } .k-task-dot:hover:after { background-color: @active-background-color; } .k-task-summary { border-color: @task-summary-color; background: @task-summary-color; } .k-task-milestone, .k-task-summary-complete { border-color: @widget-text-color; background: @widget-text-color; } .k-state-selected.k-task-summary { border-color: @task-summary-selected-color; background: @task-summary-selected-color; } .k-state-selected.k-task-milestone, .k-state-selected .k-task-summary-complete { border-color: @selected-background-color; background: @selected-background-color; } .k-task-single { background-color: lighten(@event-background-color, 7%); border-color: @event-background-color; color: @event-text-color; } .k-state-selected.k-task-single { border-color: @selected-border-color; } .k-line { background-color: @widget-text-color; color: @widget-text-color; } .k-state-selected.k-line { background-color: @selected-background-color; color: @selected-background-color; } .k-resource { background-color: @widget-background-color; } // Border radius .k-block, .k-textbox, .k-drag-clue, .k-touch-scrollbar, .k-window, .k-window-titleless .k-window-content, .k-inline-block, .k-grid .k-filter-options, .k-grouping-header .k-group-indicator, .k-autocomplete, .k-multiselect, .k-combobox, .k-dropdown, .k-dropdown-wrap, .k-datepicker, .k-timepicker, .k-colorpicker, .k-datetimepicker, .k-numerictextbox, .k-picker-wrap, .k-numeric-wrap, .k-list-container, .k-treeview .k-in, .k-editor-inline, .k-tooltip, .k-tile, .k-slider-track, .k-slider-selection, .k-upload { border-radius: @border-radius; } .k-tool { text-align: center; vertical-align: middle; } .k-tool.k-group-start, .k-toolbar .k-button-group .k-group-start { border-radius: @border-radius 0 0 @border-radius; } .k-rtl .k-tool.k-group-start, .k-rtl .k-toolbar .k-button-group .k-group-start { border-radius: 0 @border-radius @border-radius 0; } .k-tool.k-group-end, .k-toolbar .k-button-group .k-group-end, .k-toolbar .k-split-button .k-split-button-arrow { border-radius: 0 @border-radius @border-radius 0; } .k-rtl .k-tool.k-group-end, .k-rtl .k-toolbar .k-button-group .k-group-end, .k-rtl .k-toolbar .k-split-button .k-split-button-arrow { border-radius: @border-radius 0 0 @border-radius; } .k-group-start.k-group-end.k-tool { border-radius: @border-radius; } .k-calendar-container.k-state-border-up, .k-list-container.k-state-border-up, .k-autocomplete.k-state-border-up, .k-multiselect.k-state-border-up, .k-dropdown-wrap.k-state-border-up, .k-picker-wrap.k-state-border-up, .k-numeric-wrap.k-state-border-up, .k-window-content, .k-filter-menu { border-radius: 0 0 @border-radius @border-radius; } .k-autocomplete.k-state-border-up .k-input, .k-dropdown-wrap.k-state-border-up .k-input, .k-picker-wrap.k-state-border-up .k-input, .k-picker-wrap.k-state-border-up .k-selected-color, .k-numeric-wrap.k-state-border-up .k-input { border-radius: 0 0 0 @border-radius; } .k-multiselect.k-state-border-up .k-multiselect-wrap { border-radius: 0 0 @border-radius @border-radius; } .k-window-titlebar, .k-block > .k-header, .k-tabstrip-items .k-item, .k-panelbar .k-tabstrip-items .k-item, .k-tabstrip-items .k-link, .k-calendar-container.k-state-border-down, .k-list-container.k-state-border-down, .k-autocomplete.k-state-border-down, .k-multiselect.k-state-border-down, .k-dropdown-wrap.k-state-border-down, .k-picker-wrap.k-state-border-down, .k-numeric-wrap.k-state-border-down { border-radius: @border-radius @border-radius 0 0; } .k-split-button.k-state-border-down > .k-button { border-radius: @border-radius 0 0 0; } .k-split-button.k-state-border-up > .k-button { border-radius: 0 0 0 @border-radius; } .k-split-button.k-state-border-down > .k-split-button-arrow { border-radius: 0 @border-radius 0 0; } .k-split-button.k-state-border-up > .k-split-button-arrow { border-radius: 0 0 @border-radius 0; } .k-dropdown-wrap .k-input, .k-picker-wrap .k-input, .k-numeric-wrap .k-input { border-radius: @inner-border-radius 0 0 @inner-border-radius; } .k-rtl .k-dropdown-wrap .k-input, .k-rtl .k-picker-wrap .k-input, .k-rtl .k-numeric-wrap .k-input { border-radius: 0 @inner-border-radius @inner-border-radius 0; } .k-numeric-wrap .k-link { border-radius: 0 @inner-border-radius 0 0; } .k-numeric-wrap .k-link + .k-link { border-radius: 0 0 @inner-border-radius 0; } .k-colorpicker .k-selected-color { border-radius: @inner-border-radius 0 0 @inner-border-radius; } .k-rtl .k-colorpicker .k-selected-color { border-radius: 0 @inner-border-radius @inner-border-radius 0; } .k-autocomplete.k-state-border-down .k-input { border-radius: @border-radius @border-radius 0 0; } .k-dropdown-wrap.k-state-border-down .k-input, .k-picker-wrap.k-state-border-down .k-input, .k-picker-wrap.k-state-border-down .k-selected-color, .k-numeric-wrap.k-state-border-down .k-input { border-radius: @border-radius 0 0 0; } .k-numeric-wrap .k-link.k-state-selected { background-color: @numeric-selected-background; } .k-multiselect.k-state-border-down .k-multiselect-wrap { border-radius: @inner-border-radius @inner-border-radius 0 0; } .k-dropdown-wrap .k-select, .k-picker-wrap .k-select, .k-numeric-wrap .k-select, .k-datetimepicker .k-select+.k-select, .k-list-container.k-state-border-right { border-radius: 0 @border-radius @border-radius 0; } .k-rtl .k-dropdown-wrap .k-select, .k-rtl .k-picker-wrap .k-select, .k-rtl .k-numeric-wrap .k-select, .k-rtl .k-datetimepicker .k-select+.k-select, .k-rtl .k-list-container.k-state-border-right { border-radius: @border-radius 0 0 @border-radius; } .k-numeric-wrap.k-expand-padding .k-input { .guarded-border-radius(@border-radius); } .k-textbox > input, .k-autocomplete .k-input, .k-multiselect-wrap { .guarded-border-radius(@inner-border-radius); } .k-list .k-state-hover, .k-list .k-state-focused, .k-list .k-state-highlight, .k-list .k-state-selected, .k-fieldselector .k-list .k-item, .k-list-optionlabel, .k-dropzone, .k-listbox .k-item { .guarded-border-radius(@list-border-radius); } .k-slider .k-button, .k-grid .k-slider .k-button { border-radius: @slider-border-radius; } .k-draghandle { border-radius: @draghandle-border-radius; } .k-gantt-toolbar li:first-child + li, .k-scheduler-toolbar > ul li:first-child, .k-scheduler-toolbar > ul li:first-child .k-link, .k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li, .k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li .k-link { border-radius: @border-radius 0 0 @border-radius; } .k-rtl .k-scheduler-toolbar > ul li:first-child, .k-rtl .k-scheduler-toolbar > ul li:first-child .k-link, .k-rtl .k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li, .k-rtl .k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li .k-link { border-radius: 0 @border-radius @border-radius 0; } .k-edit-field > .k-scheduler-navigation { border-radius: @border-radius; } .k-scheduler-toolbar .k-nav-next, .k-scheduler-toolbar ul + ul li:last-child, .k-scheduler-toolbar .k-nav-next .k-link, .k-scheduler-toolbar ul + ul li:last-child .k-link { border-top-right-radius: @border-radius; border-bottom-right-radius: @border-radius; } .k-rtl .k-gantt-toolbar li:last-child, .k-rtl .k-scheduler-toolbar .k-nav-next, .k-rtl .k-scheduler-toolbar ul + ul li:last-child, .k-rtl .k-scheduler-toolbar .k-nav-next .k-link, .k-rtl .k-scheduler-toolbar ul + ul li:last-child .k-link { border-radius: @border-radius 0 0 @border-radius; } .k-scheduler div.k-scheduler-footer ul li, .k-scheduler div.k-scheduler-footer .k-link { border-radius: @border-radius; } .k-more-events, .k-event, .k-task-single, .k-task-complete, .k-event .k-link { border-radius: @inner-border-radius; } .k-scheduler-mobile .k-event { border-radius: (@inner-border-radius - 1); } // RTL Scheduler & Gantt .k-rtl .k-scheduler-toolbar > ul.k-scheduler-navigation > li { border-width: 0; } .k-rtl .k-scheduler-toolbar > ul > li:first-child { border-right-width: 0; } .k-rtl .k-gantt-toolbar > ul.k-gantt-views > li, .k-rtl .k-scheduler-toolbar > ul.k-scheduler-views > li { border-width: 0 0 3px 0; border-color: transparent; } // /Column Menu .k-autocomplete, .k-picker-wrap.k-state-default, .k-numeric-wrap.k-state-default, .k-dropdown-wrap.k-state-default { .composite-background(@widget-gradient); background-position: 50% 50%; background-color: @drop-down-background; border-color: @drop-down-border-color; } .k-autocomplete.k-state-hover, .k-picker-wrap.k-state-hover, .k-numeric-wrap.k-state-hover, .k-dropdown-wrap.k-state-hover { background-color: @select-hover-background-color; .composite-background(@hover-gradient); background-position: 50% 50%; border-color: @drop-down-hover-border-color; } .k-multiselect-wrap { border-color: @drop-down-border-color; } .k-state-hover > .k-multiselect-wrap, .k-multiselect-wrap.k-state-hover { border-color: @drop-down-hover-border-color; background-color: @input-bg; color: @input-text; } .k-autocomplete.k-state-focused, .k-picker-wrap.k-state-focused, .k-numeric-wrap.k-state-focused, .k-dropdown-wrap.k-state-focused { background-color: @select-hover-background-color; .composite-background(@hover-gradient); background-position: 50% 50%; border-color: @drop-down-focused-border-color; .box-shadow(@focused-shadow); } .k-multiselect-wrap.k-state-focused, .k-state-focused > .k-multiselect-wrap { border-color: @drop-down-focused-border-color; .box-shadow(@focused-shadow); } .k-list-container { color: @drop-down-text-color; } .k-nodata { color: @disabled-text-color; } .k-dropdown .k-input, .k-dropdown .k-state-focused .k-input, .k-menu .k-popup { color: @drop-down-text-color; } .k-state-default > .k-select { border-color: @drop-down-border-color; } .k-state-hover > .k-select { border-color: @drop-down-hover-border-color; } .k-state-focused > .k-select { border-color: @drop-down-focused-border-color; } .k-tabstrip:focus { .box-shadow(@focused-shadow); } .k-tabstrip-items .k-state-default .k-link, .k-panelbar > li.k-state-default > .k-link { color: @tabstrip-tabs-color; } .k-tabstrip-items .k-state-hover .k-link, .k-panelbar > li.k-state-hover > .k-link { color: @hover-text-color; } .k-panelbar > .k-state-focused.k-state-hover { background: @hove