@progress/kendo-ui/css/mobile/android/template.less

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

/*!
 * Copyright 2018 Telerik EAD
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@android-main-color: #fff;
@android-background-color: #000;
@android-active-color: #fff;
@android-active-background: #33b5e5;
@android-gray: #999;
@android-border-color: fade(@android-gray, 70%);
@android-lighter-background-color: lighten(@android-background-color, 13.5%);

@android-button-color: fade(@android-gray, 50%);
@android-transparent: fade(@android-background-color, 0);
@android-dark-border-color: darken(@android-button-color, 20%);
@android-light-border-color: lighten(@android-button-color, 20%);

@android-light-main-color: #222;
@android-light-background-color: #fcfcfc;

@error: #ef5350;
@warning: #ff0030;

// Colors

.km-android,
.km-android .km-header,
.km-android .km-footer,
.km-android .km-content,
.km-android .km-pane,
.km-android .km-scroll-header .km-group-title,
.km-android input[type=password],
.km-android input[type=search],
.km-android input[type=number],
.km-android input[type=tel],
.km-android input[type=url],
.km-android input[type=email],
.km-android input[type=text]:not(.k-input),
.km-root .km-android textarea
{
    background: @android-background-color;
    outline-color: @android-background-color;
}

.km-android-light,
.km-android-light .km-header,
.km-android-light .km-footer,
.km-android-light .km-content,
.km-android-light .km-pane,
.km-android-light .km-scroll-header .km-group-title,
.km-android-light input[type=password],
.km-android-light input[type=search],
.km-android-light input[type=number],
.km-android-light input[type=tel],
.km-android-light input[type=url],
.km-android-light input[type=email],
.km-android-light input[type=text]:not(.k-input),
.km-root .km-android-light textarea
{
    background: @android-light-background-color;
    outline-color: @android-light-background-color;
}

.km-android .km-navbar,
.km-android .k-toolbar,
.km-android .km-button,
.km-android .km-switch,
.km-android .km-buttongroup,
.km-android .km-popup .k-item,
.km-android .km-actionsheet > li > a,
.km-android select:not([multiple]):focus option
{
    color: @android-main-color;
    border-color: @android-border-color;
    background-color: @android-background-color;
}

.km-android-light .km-navbar,
.km-android-light .k-toolbar,
.km-android-light .km-button,
.km-android-light .km-switch,
.km-android-light .km-buttongroup,
.km-android-light .km-tabstrip,
.km-android-light .km-popup .k-item,
.km-android-light .km-actionsheet > li > a,
.km-android-light select:not([multiple]):focus option
{
    color: @android-light-main-color;
    background-color: @android-light-background-color;
}

.km-android-light .km-navbar,
.km-android-light .k-toolbar,
.km-android-light .km-switch,
.km-android-light .km-tabstrip,
.km-android-light .km-popup .k-item,
.km-android-light .km-actionsheet > li > a
{
    background-color: darken(@android-light-background-color, 7.5%);
}

.km-android input,
.km-android select,
.km-android textarea,
.km-android .km-widget
{
    color: @android-main-color;
    border-color: @android-border-color;
}

.km-android-light input,
.km-android-light select,
.km-android-light textarea,
.km-android-light .km-widget
{
    color: @android-light-main-color;
}

.km-android .km-navbar,
.km-android .k-toolbar,
.km-android .km-tabstrip
{
    .box-shadow(~"0 0 1px @{android-gray}, 0 0 4px @{android-gray}");
}

// Button

.km-android .km-button,
.km-android .km-switch-handle,
.km-android .km-buttongroup .km-button,
.km-android .km-navbar .km-buttongroup .km-button
{
    border-color: @android-light-border-color @android-dark-border-color @android-dark-border-color @android-light-border-color;
    background: @android-button-color;
}

// Switch

.km-android .km-switch-container
{
    background: lighten(@android-background-color, 13.5%);
}

.km-android-light .km-switch-container
{
    background: darken(@android-light-background-color, 13.5%);
}

// Badges & Details

.km-android .km-badge
{
    .box-shadow(0 2px 2px @android-dark-border-color);
}

.km-android .km-badge,
.km-android .km-detail,
.km-android .km-rowdelete
{
    background-image: linear-gradient(to bottom, fade(@android-main-color, 50%), @android-light-border-color 50%, fade(@android-main-color, 10%) 50%, fade(@android-main-color, 0));
    border-color: @android-main-color;
    background-color: #B01B1A;
}

.km-android-light .km-badge,
.km-android-light .km-detail,
.km-android-light .km-rowdelete
{
    background-image: linear-gradient(to bottom, fade(@android-light-main-color, 50%), @android-light-border-color 50%, fade(@android-light-main-color, 10%) 50%, fade(@android-light-main-color, 0));
    border-color: @android-light-main-color;
}

.km-android .km-detail .km-text
{
    border-left-color: lighten(@android-background-color, 86.5%);
}

.km-android .km-rowinsert
{
    background-color: #24870D;
}

// TabStrip

.km-android .k-toolbar,
.km-android .km-tabstrip
{
    border-bottom-color: fade(@android-main-color, 40%);
}

.km-android-light .k-toolbar,
.km-android-light .km-tabstrip
{
    border-bottom-color: fade(@android-light-main-color, 40%);
}

// NavBar

.km-android .km-header
{
    .box-shadow(0 2px 0 @android-lighter-background-color, 0 -2px 0 @android-lighter-background-color);
}

.km-android .km-navbar [class*=item] .km-text,
.km-android .km-tabstrip .km-text
{
    border-right-color: fade(@android-background-color, 26.5%);
}

.km-android .km-navbar [class*=item] .km-text
{
    border-right-color: fade(@android-main-color, 40%);
}

.km-android-light .km-navbar [class*=item] .km-text,
.km-android-light .km-tabstrip .km-text
{
    border-right-color: fade(@android-light-background-color, 26.5%);
}

.km-android-light .km-navbar [class*=item] .km-text
{
    border-right-color: fade(@android-light-main-color, 40%);
}

// ListView

.km-android .km-list > li
{
    -webkit-box-shadow: 0 1px 1px fade(@android-main-color, 13.5%);
    box-shadow: 0 -1px 0 fade(@android-main-color, 13.5%);
}

.km-android-light .km-list > li
{
    -webkit-box-shadow: 0 1px 1px fade(@android-light-main-color, 13.5%);
    box-shadow: 0 -1px 0 fade(@android-light-main-color, 13.5%);
}

.km-android .km-group-title
{
    color: fade(@android-main-color, 40%);
    -webkit-box-shadow: inset 0 -1px 1px fade(@android-main-color, 30%);
    box-shadow: inset 0 -1px 0 fade(@android-main-color, 30%);
}

.km-android-light .km-group-title
{
    color: fade(@android-light-main-color, 40%);
    -webkit-box-shadow: inset 0 -1px 1px fade(@android-light-main-color, 30%);
    box-shadow: inset 0 -1px 0 fade(@android-light-main-color, 30%);
}

.km-android .km-scroll-header .km-group-title
{
    border-bottom-color: lighten(@android-background-color, 20%);
}

.km-android-light .km-scroll-header .km-group-title
{
    border-bottom-color: lighten(@android-light-background-color, 20%);
}

.km-android .km-filter-wrap:before,
.km-android .km-filter-reset .km-clear
{
    color: @android-border-color;
}

.km-android .km-item label:before
{
    border-color: @android-background-color;
    background-color: lighten(@android-background-color, 21%);
    background-image: linear-gradient(to bottom, lighten(@android-background-color, 21%), lighten(@android-background-color, 17%));
    .box-shadow(0 0 1px 2px #808080);
}

.km-android-light .km-item label:before
{
    border-color: @android-light-background-color;
    background-color: darken(@android-light-background-color, 21%);
    background-image: linear-gradient(to bottom, darken(@android-light-background-color, 21%), darken(@android-light-background-color, 17%));
    .box-shadow(0 0 1px 2px @android-gray);
}

// Icons

.km-android .km-button .km-icon,
.km-android .km-navbar .km-icon
{
    color: fade(@android-main-color, 80%);
}

.km-android-light .km-button .km-icon,
.km-android-light .km-navbar .km-icon
{
    color: fade(@android-light-main-color, 80%);
}

.km-android .km-tabstrip .km-icon
{
    color: fade(@android-main-color, 40%);
}

.km-android-light .km-tabstrip .km-icon
{
    color: fade(@android-light-main-color, 40%);
}

// Loading

.km-android .km-loader
{
    background: rgba(0,0,0,.1);
}

.km-android .km-loading
{
    border-color: @android-main-color fade(@android-main-color, 20%);
    box-shadow: 0 1px 0 fade(@android-background-color, 10%),
                0 -1px 0 fade(@android-background-color, 10%),
                inset 0 1px 0 fade(@android-background-color, 10%),
                inset 0 -1px 0 fade(@android-background-color, 10%);
}

.km-android-light .km-loading
{
    border-color: @android-light-main-color fade(@android-light-main-color, 20%);
    box-shadow: 0 1px 0 fade(@android-light-background-color, 10%),
                0 -1px 0 fade(@android-light-background-color, 10%),
                inset 0 1px 0 fade(@android-light-background-color, 10%),
                inset 0 -1px 0 fade(@android-light-background-color, 10%);
}

// Forms

.km-android .k-slider-track
{
    background: @android-button-color;
}

.km-android input[type=password],
.km-android input[type=search],
.km-android input[type=number],
.km-android input[type=tel],
.km-android input[type=url],
.km-android input[type=email],
.km-android input[type=text]:not(.k-input),
.km-root .km-android textarea
{
    border-color: @android-button-color;
}

.km-android input[type=radio],
.km-android input[type=checkbox]
{
    color: @android-button-color;
    border-color: currentcolor;
    .box-shadow(0 0 1px currentcolor);
}

.km-android input[type=month],
.km-android input[type=color],
.km-android input[type=week],
.km-android input[type=date],
.km-android input[type=time],
.km-android input[type=datetime],
.km-android input[type=datetime-local],
.km-android select:not([multiple]),
.km-android .k-dropdown .k-dropdown-wrap
{
    border-bottom-color: rgba(127,127,127,.5);
    background: 100% 100% no-repeat url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAACWCAQAAABj2vCcAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAf0lEQVR4XuzLsQkAAAwCsP7/tD1CcAqZcykMsizLsizLsizLsizLsizLsizLsizL8ncuxzYAgEAAhJz893BazVfXE2quGc9z32asZahlqGWoZahlqGWoZahlqGWoZahlqGWoZahlqGWoZahlqGWoZahlqOUq5CrkKuStlKuS3QdJPtFaleZ1DgAAAABJRU5ErkJggg==") transparent;
    background-size: auto 100%;
}

// ActionSheet

.km-android li.km-actionsheet-title
{
    color: inherit;
    border-color: inherit;
}

// PopUp

.km-android .km-shim,
.km-phone .km-android .km-actionsheet-wrapper
{
    background: @android-dark-border-color;
}

.km-android .km-actionsheet,
.km-android .km-popup .k-list-container
{
    background: @android-background-color;
    .box-shadow(2px 2px 5px @android-dark-border-color);
}

.km-android-light .km-actionsheet,
.km-android-light .km-popup .k-list-container
{
    background: @android-light-background-color;
}

.km-android .km-popup .k-item,
.km-android .km-actionsheet > li > a
{
    border-color: fade(@android-main-color, 20%);
}

.km-android-light .km-popup .k-item,
.km-android-light .km-actionsheet > li > a
{
    border-color: fade(@android-light-main-color, 20%);
}

.km-android .km-popup-arrow:before
{
    border-color: @android-border-color transparent;
}

.km-android .km-left .km-popup-arrow:before,
.km-android .km-right .km-popup-arrow:before,
.km-android .k-toolbar .km-buttongroup
{
    border-color: transparent @android-border-color;
}

.km-android .km-popup-arrow:after
{
    border-color: @android-background-color transparent;
}

.km-android .km-left .km-popup-arrow:after,
.km-android .km-right .km-popup-arrow:after
{
    border-color: transparent @android-background-color;
}

.km-android-light .km-popup-arrow:after
{
    border-color: darken(@android-light-background-color, 7.5%) transparent;
}

.km-android-light .km-left .km-popup-arrow:after,
.km-android-light .km-right .km-popup-arrow:after
{
    border-color: transparent darken(@android-light-background-color, 7.5%);
}

// Checkboxes and Radios

.km-android .km-state-active input[type=radio],
.km-android .km-state-active input[type=checkbox]
{
    border-color: lighten(@android-background-color, 86.5%);
    .box-shadow(0 0 1px lighten(@android-background-color, 86.5%));
}

.km-android-light .km-state-active input[type=radio],
.km-android-light .km-state-active input[type=checkbox]
{
    border-color: lighten(@android-light-background-color, 86.5%);
    .box-shadow(0 0 1px lighten(@android-light-background-color, 86.5%));
}

// SplitView

.km-android .km-splitview .km-pane:last-child
{
    .box-shadow(-1px 0 1px 1px @android-dark-border-color);
}

.km-android .km-popup.km-pane .km-view,
.km-android .km-splitview .km-pane:last-child .km-content
{
    border-color: fade(darken(@android-main-color, 50%), 40%);
    .box-shadow(inset 0 0 1px 1px @android-background-color);
}

.km-android-light .km-popup.km-pane .km-view,
.km-android-light .km-splitview .km-pane:last-child .km-content
{
    border-color: fade(darken(@android-light-main-color, 50%), 40%);
    .box-shadow(inset 0 0 1px 1px @android-light-background-color);
}

// ModalView

.km-android .km-modalview
{
    .box-shadow(0 0 10px @android-dark-border-color, 0 0 2px fade(@android-main-color, 70%));
    border-color: @android-background-color;
}

.km-android .km-modalview .km-view-title
{
    .box-shadow(inset 0 -2px fade(@android-main-color, 10%));
}

.km-android-light .km-modalview
{
    .box-shadow(0 0 10px @android-dark-border-color, 0 0 2px fade(@android-light-main-color, 70%));
    border-color: @android-light-background-color;
}

// Collapsible

.km-android .km-collapsible-header,
.km-android .km-collapsible-content
{
    border-color: @android-dark-border-color;
}

.km-android-light .km-collapsible-header,
.km-android-light .km-collapsible-content
{
    border-color: @android-light-border-color;
}

.km-android .km-collapsible-header .km-icon
{
    color: @android-gray;
}

// Tablet Styles

.km-tablet .km-android *:not(.km-actionsheet-phone) > .km-actionsheet
{
    .box-shadow(0 0 7px @android-button-color);
}

// Active States

.km-android .k-list,
.km-android .k-draghandle,
.km-android .km-actionsheet,
.km-android .km-actionsheet-wrapper,
.km-android .k-dropdown .k-input,
.km-android .km-tabstrip .km-button,
.km-android .km-actionsheet > li > a:focus,
.km-android .km-actionsheet > li > a:active,
.km-android .km-widget .k-state-hover,
.km-android .km-widget .k-state-focused,
.km-android .km-widget .k-state-selected,
.km-android .km-popup > .k-list-container,
.km-android .km-state-active .km-detail,
.km-android .km-state-active .km-listview-link,
.km-android .km-state-active .km-listview-label
{
    color: inherit;
}

.km-android .km-badge,
.km-android .k-slider-selection,
.km-android .km-touch-scrollbar,
.km-android .km-state-active,
.km-android .km-widget .km-state-active,
.km-android .km-popup .k-state-hover,
.km-android .km-popup .k-state-focused,
.km-android .km-popup .k-state-selected,
.km-android .km-actionsheet > li > a:focus,
.km-android .km-actionsheet > li > a:active,
.km-android .km-detail.km-state-active,
.km-android .km-state-active .km-detail,
.km-android .km-pages .km-current-page,
.km-android .k-slider .k-draghandle,
.km-android .k-slider .k-draghandle:hover,
.km-android .k-slider .k-draghandle:before,
.km-android .km-switch-on .km-switch-handle,
.km-android select:not([multiple]):focus option,
.km-android .km-listview-label input[type=radio]:checked:after
{
    background: currentcolor;
}

.km-android .km-switch-label-on,
.km-android .km-state-active .km-switch-label-off,
.km-android .km-state-active .km-text,
.km-android .km-state-active .km-icon,
.km-android .km-state-active.km-detail:after,
.km-android .km-state-active .km-detail:after
{
    color: @android-active-color;
}

.km-android .km-actionsheet > li > a:focus,
.km-android .km-actionsheet > li > a:active,
.km-android .km-popup .k-state-hover,
.km-android .km-popup .k-state-focused,
.km-android .km-popup .k-state-selected
{
    text-indent: -10000px;
    text-shadow: 10000px 0 0 @android-active-color;
}

.km-android2 .km-actionsheet > li > a:focus,
.km-android2 .km-actionsheet > li > a:active,
.km-android2 .km-popup .k-state-hover,
.km-android2 .km-popup .k-state-focused,
.km-android2 .km-popup .k-state-selected
{
    text-shadow: 10000px 0 1px @android-active-color;
}

.km-android .km-state-active .km-listview-link,
.km-android .km-state-active .km-listview-label
{
    color: @android-active-color;
    background: @android-active-background;
}

.km-android li.km-actionsheet-cancel > a:focus,
.km-android li.km-actionsheet-cancel > a:active,
.km-android .km-badge
{
    text-indent: -10000px;
    text-shadow: 5000px 0 0 @android-active-color;
    opacity: .8;
}

.km-android2 li.km-actionsheet-cancel > a:focus,
.km-android2 li.km-actionsheet-cancel > a:active,
.km-android2 .km-badge
{
    text-shadow: 5000px 0 1px @android-active-color;
}

.km-android .k-split-container > li > a:focus,
.km-android .k-split-container > li > a:active,
.km-android .k-overflow-container > li > a:focus,
.km-android .k-overflow-container > li > a:active
{
    text-indent: 0;
    text-shadow: none;
}

.km-android .km-actionsheet > li > a:focus > *,
.km-android .km-actionsheet > li > a:active > *,
.km-android .km-popup .k-state-hover > *,
.km-android .km-popup .k-state-focused > *,
.km-android .km-popup .k-state-selected > *,
.km-android li.km-actionsheet-cancel > a:focus > *,
.km-android li.km-actionsheet-cancel > a:active > *,
.km-android .km-badge > *
{
    text-indent: 0;
    text-shadow: none;
    color: @android-active-color;
}

.km-android select:focus,
.km-android textarea:focus,
.km-android.km-pane input:focus,
.km-android li.km-actionsheet-title,
.km-android .k-dropdown .k-state-focused
{
    border-color: currentcolor;
}

.km-android .km-listview-label input[type=checkbox]:checked:after
{
    text-shadow: 0 1px 1px fade(@android-background-color, 20%);
}

.km-android .km-state-active input[type=radio]:before,
.km-android .km-state-active input[type=checkbox]:before
{
    background-color: fade(@android-background-color, 20%);
}

.km-android-light .km-listview-label input[type=checkbox]:checked:after
{
    text-shadow: 0 1px 1px fade(@android-light-background-color, 20%);
}

.km-android-light .km-state-active input[type=radio]:before,
.km-android-light .km-state-active input[type=checkbox]:before
{
    background-color: fade(@android-light-background-color, 20%);
}

.km-android .km-icon:before,
.km-android .km-contactadd:before,
.km-android .km-rowdelete:before,
.km-android .km-rowinsert:before,
.km-android .km-detaildisclose:before,
.km-android .k-overflow-container .km-state-disabled
{
    display: block;
    color: @android-gray;
}

.km-android .k-overflow-container a.km-state-disabled
{
    color: @android-gray;
    background-color: @android-background-color;
    border-color: @android-border-color;
}

.km-android-light .k-overflow-container a.km-state-disabled
{
    color: @android-gray;
    background-color: darken(@android-light-background-color, 7.5%);;
    border-color: @android-light-border-color;
}

.km-android .km-state-active.km-state-disabled .km-text
{
    color: @android-gray;
}

.km-android .km-shim,
.km-android .km-popup,
.km-android .k-slider,
.km-android .km-badge,
.km-android .km-switch-on,
.km-android .km-current-page,
.km-android input:focus,
.km-android select:focus,
.km-android textarea:focus,
.km-android input:checked,
.km-android .km-touch-scrollbar,
.km-android .km-widget .k-state-focused,
.km-android .km-widget .km-state-active
{
    color: @android-active-background;
}

// Nova theme features
.km-android .km-required:after {
    color: @error;
}

.km-android-light .km-list fieldset legend {
    -webkit-box-shadow: 0 2px 0 0  fade(@android-light-main-color, 13.5%);
    box-shadow: 0 2px 0 0 fade(@android-light-main-color, 13.5%);
}

.km-android-dark .km-list fieldset legend {
    -webkit-box-shadow: 0 2px 0 0  fade(@android-main-color, 40%);
    box-shadow: 0 2px 0 0 fade(@android-main-color, 40%);
}

.km-android-light .km-label-above,
.km-android-light .km-icon-label,
.km-android-light .km-radio-label:before,
.km-android-light .km-radio-label:after,
.km-android-light .km-checkbox-label:before,
.km-android-light .km-checkbox-label:after {
    color: fade(@android-light-main-color, 40%);
}

.km-android-dark .km-label-above,
.km-android-dark .km-icon-label,
.km-android-dark .km-radio-label:before,
.km-android-dark .km-radio-label:after,
.km-android-dark .km-checkbox-label:before,
.km-android-dark .km-checkbox-label:after {
    color: fade(@android-main-color, 40%);
}

.km-android .km-radio-label:after {
    background-color: @android-active-background;
}

.km-android-dark .km-radio-label:before,
.km-android-dark .km-checkbox-label:before,
.km-android-dark .km-checkbox-label:after {
    border-color: @android-button-color;
}

.km-android-light input.km-checkbox:checked + .km-checkbox-label:before {
    border-color: @android-light-main-color;
}

.km-android input.km-checkbox:focus + .km-checkbox-label:before,
.km-android input.km-checkbox:focus + .km-checkbox-label:before  {
    .box-shadow(0 0 1px 2px @android-active-background);
}

.km-android input.km-checkbox:checked + .km-checkbox-label:after {
    color: @android-active-background;
}

.km-android input.km-radio:checked + .km-radio-label:after {
    .box-shadow(0 0 16px 1px @android-active-background);
    border-color: fade(@android-light-main-color, 40%);
}

// Validation
.km-android .km-list > li label.km-invalid,
.km-android .km-list fieldset .km-legend-button.km-invalid,
.km-android .km-list > li label.km-invalid.km-required:after {
    color: @warning;
}

.km-android .km-invalid-msg {
    color: @android-active-color;
    background: @warning;
}