UNPKG

@progress/kendo-ui

Version:

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

2,193 lines (1,888 loc) 79.2 kB
/*! * 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. */ // 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: darken(@background, 5%); @button-border-color: darken(@background, 25%); @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; // Primaryu button @primary-text-color: @background; @primary-background-color: lighten(@accent, 9%); @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-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; @calendar-border-radius: @border-radius; @calendar-content-text-color: @normal-text-color; @calendar-footer-background: @background; @calendar-footer-text-decoration: none; @calendar-footer-hover-text-decoration: underline; @calendar-footer-hover-background: @background; @calendar-header-hover-text-decoration: none; @calendar-header-hover-background: @hover-background; @calendar-footer-active-background: @background; @calendar-group-background-color: @background; @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%); // 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; // 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"; .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:link, .k-link:visited, .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, .km-pane-wrapper > .km-pane > .km-view > .km-content { .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, html .km-pane-wrapper .k-header { 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; } .k-mobile-list .k-check:checked, .k-mobile-list .k-edit-field [type=checkbox]:checked, .k-mobile-list .k-edit-field [type=radio]:checked { 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; } // IE will ignore the above selectors if these are added too .k-mobile-list .k-check:checked, .k-mobile-list .k-edit-field [type=checkbox]:checked, .k-mobile-list .k-edit-field [type=radio]:checked { background-image: @sprite-image; border-color: transparent; } .k-mobile-list .k-check:checked, .k-mobile-list .k-edit-field [type=checkbox]:checked { font-family: 'WebComponentsIcons'; background-image: none; } .k-mobile-list .k-check:checked:before, .k-mobile-list .k-edit-field [type=checkbox]:checked:before { content: "\e118"; } .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-calendar .k-link { color: @calendar-content-text-color; } .k-calendar .k-footer { padding: 0; } .k-calendar .k-footer .k-nav-today { color: @form-widget-color; text-decoration: @calendar-footer-text-decoration; background-color: @calendar-footer-background; } .k-calendar .k-footer .k-nav-today:hover, .k-calendar .k-footer .k-nav-today.k-state-hover { background-color: @calendar-footer-hover-background; text-decoration: @calendar-footer-hover-text-decoration; } .k-calendar .k-footer .k-nav-today:active { background-color: @calendar-footer-active-background; } .k-calendar .k-link.k-nav-fast { color: @form-widget-color; } .k-calendar .k-nav-fast.k-state-hover { text-decoration: @calendar-header-hover-text-decoration; background-color: @calendar-header-hover-background; color: @hover-text-color; } .k-calendar .k-link.k-state-hover { border-radius: @calendar-border-radius; } .k-calendar .k-footer .k-link { border-radius: 0; } .k-calendar th { background-color: @calendar-group-background-color; } .k-calendar-container.k-group { border-color: @group-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>li.k-state-default>.k-link.k-state-selected { color: @selected-text-color; } .k-state-hover, .k-state-hover:hover, .k-splitbar-horizontal-hover:hover, .k-splitbar-vertical-hover: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-mobile-list .k-item > .k-link:active, .k-mobile-list .k-item > .k-label:active, .k-mobile-list .k-edit-label.k-check:active, .k-mobile-list .k-recur-view .k-check:active, .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; } // this selector should be used separately, otherwise old IEs ignore the whole rule .k-mobile-list .k-scheduler-timezones .k-edit-field:nth-child(2):active { color: @hover-text-color; background-color: @hover-background-color; border-color: @hover-border-color; } .k-state-hover > .k-select, .k-state-focused > .k-select { border-color: @hover-border-color; } .k-textbox:hover, .k-state-hover, .k-state-hover: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-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; } .km-pane-wrapper .k-mobile-list input:not([type="checkbox"]):not([type="radio"]), .km-pane-wrapper .km-pane .k-mobile-list select:not([multiple]), .km-pane-wrapper .k-mobile-list textarea, .k-dropdown .k-state-focused .k-input { color: @widget-text-color; } .km-pane-wrapper .km-pane .k-mobile-list.k-filter-menu { .k-space-right { background: @background; border-color: @widget-border-color; > input { background-color: @input-bg; border-color: @widget-border-color; } > input:focus { border-color: @drop-down-hover-border-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:.7; } .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:hover { color: #fff; } .k-leaf.k-inverse, .k-leaf.k-inverse.k-state-hover: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-notification, .k-numerictextbox, .k-picker-wrap, .k-numeric-wrap, .k-list-container, .k-calendar-container, .k-calendar td, .k-calendar .k-link, .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, .km-view.k-popup-edit-form .k-scheduler-toolbar > ul li:last-child, .km-view.k-popup-edit-form .k-scheduler-toolbar > ul li:last-child .k-link { border-radius: 0 @border-radius @border-radius 0; } .k-scheduler-phone .k-scheduler-toolbar > ul li.k-nav-today, .k-scheduler-phone .k-scheduler-toolbar > ul li.k-nav-today .k-link, .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; } // Adaptive Grid .k-grid-mobile .k-column-active + th.k-header { border-left-color: @widget-text-color; } html .km-pane-wrapper .km-widget, .k-ie .km-pane-wrapper .k-widget, .k-ie .km-pane-wrapper .k-group, .k-ie .km-pane-wrapper .k-content, .k-ie .km-pane-wrapper .k-header, .k-ie .km-pane-wrapper .k-popup-edit-form .k-edit-field .k-button, .km-pane-wrapper .k-mobile-list .k-item, .km-pane-wrapper .k-mobile-list .k-edit-label, .km-pane-wrapper .k-mobile-list .k-edit-field { color: @widget-text-color; } @media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) { div.km-pane-wrapper a { color: @widget-text-color; } } .km-pane-wrapper .k-mobile-list .k-item, .km-pane-wrapper .k-mobile-list .k-edit-field, .km-pane-wrapper .k-mobile-list .k-recur-view > .k-edit-field .k-check { background-color: @widget-background-color; border-top: 1px solid @cell-border-color; } .km-pane-wrapper .k-mobile-list .k-edit-field textarea { outline-width: 0; } .km-pane-wrapper .k-mobile-list .k-item.k-state-selected { background-color: @selected-background-color; border-top-color: @selected-border-color; } .km-pane-wrapper .k-mobile-list .k-recur-view > .k-edit-field .k-check:first-child { border-top-color: transparent; } .km-pane-wrapper .k-mobile-list .k-item:last-child { .box-shadow(inset 0 -1px 0 @cell-border-color); } .km-pane-wrapper .k-mobile-list > ul > li > .k-link, .km-pane-wrapper .k-mobile-list .k-recur-view > .k-edit-label:nth-child(3), .km-pane-wrapper #recurrence .km-scroll-container > .k-edit-label:first-child { color: darken(@cell-border-color, 30); } .km-pane-wrapper .k-mobile-list > ul > li > .k-link { border-bottom: 1px solid @cell-border-color; } .km-pane-wrapper .k-mobile-list .k-edit-field { .box-shadow(0 1px 1px @cell-border-color); } .km-actionsheet .k-grid-delete, .km-actionsheet .k-scheduler-delete, .km-pane-wrapper .k-scheduler-delete, .km-pane-wrapper .k-filter-menu .k-button[type=reset] { color: #fff; border-color: @error-border-color; background-color: red; background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,.15)); } .km-actionsheet .k-grid-delete:active, .km-actionsheet .k-scheduler-delete:active, .km-pane-wrapper .k-scheduler-delete:active, .km-pane-wrapper .k-filter-menu .k-button[type=reset]:active { background-color: darken(red, 20); } // /Column Menu .k-autocomplete.k-state-default, .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, .k-panelbar>li.k-state-default>.k-link.k-state-hover { color: @hover-text-color; } .k-panelbar > .k-state-focused.k-state-hover { background: @hover-background-color; .box-shadow(none); } .k-tabstrip-items .k-state-default { border-color: @tabstrip-items-border; } .k-tabstrip-items .k-state-hover { border-color: @hover-border-color; } .k-tabstrip-items .k-state-active, .k-panelbar .k-tabstrip-items .k-state-active { background-color: @active-background-color; .composite-background(@active-gradient); border-color: @active-border-color; } .k-tabstrip .k-content.k-state-active { background-color: @tabstrip-active-background; color: @widget-text-color; } .k-menu.k-header, .k-menu .k-item { border-color: @menu-border-color; } .k-column-menu, .k-column-menu .k-item, .k-overflow-container .k-overflow-group { border-color: @secondary-border-color; } .k-overflow-container .k-overflow-group { box-shadow: inset 0 1px 0 lighten(@secondary-border-color, 30%), 0 1px 0 lighten(@secondary-border-color, 30%); } .k-toolbar-first-visible.k-overflow-group, .k-overflow-container .k-overflow-group + .k-overflow-group { box-shadow: 0 1px 0 lighten(@secondary-border-color, 30%); } .k-toolbar-last-visible.k-overflow-group { box-shadow: inset 0 1px 0 lighten(@secondary-border-color, 30%); } .k-toolbar .k-button.k-state-disabled:focus, .k-overflow-container .k-overflow-button:focus, .k-overflow-container .k-overflow-button:focus:hover { border-color: @button-focused-border-color; .box-shadow(@button-focused-shadow); } .k-overflow-container .k-separator { border-color: @secondary-border-color; } .k-column-menu .k-separator { border-color: @secondary-border-color; background-color: transparent; } .k-menu .k-group { border-color: @group-border-color; } .k-grid-filter.k-state-active { backg