@progress/kendo-ui/css/mobile/material/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.
 */
@material-primary-color: #3f51b5;
@material-primary-selected-color: #283593;
@material-accent-color: #55c6ff;
@material-main-color: #333;
@material-icon-color: rgba(0,0,0,.54);
@material-disabled-color: rgba(128,128,128,.3);
@material-input-text-color: @material-disabled-color;
@material-border-color: rgba(0,0,0,.12);


@material-background: #fafafa;
@material-primary-inverse-color: @material-background;
@material-selected-background: rgba(128,128,128,.2);
@material-overlay-background: rgba(0,0,0,.2);
@material-box-shadow-color: rgba(0,0,0,.4);

@material-dark-color: #333;
@material-light-color: rgba(0,0,0,.39);

@material-overlay-shadow: 0 15px 30px 3px rgba(0, 0, 0, 0.30);
@material-second-active-background: #da2228;

@material-dark-main-color: @material-background;
@material-dark-icon-color: @material-dark-main-color;
@material-dark-input-text-color: rgba(255,255,255,.5);

@material-dark-background: #333;
@material-dark-inverse-color: @material-dark-background;

// Button

.km-material .km-button
{
    background: @material-background;
    border-color: transparent;
    .box-shadow(0 1px 4px @material-box-shadow-color);
}

.km-material-dark .km-button
{
    background: @material-primary-color;
}

// Badges and Details

.km-material .k-toolbar
{
    border-color: @material-border-color;
}

// Switch

.km-material .km-switch-handle
{
    background: @material-primary-color;
    border-color: rgba(0,0,0,.1);
     -webkit-box-shadow: 0 2px 4px @material-primary-color, 0 2px @material-primary-color;
    box-shadow: 0 2px 4px @material-primary-color, 0 2px @material-primary-color;
}

.km-material .km-switch-off .km-switch-handle
{
    background-color: @material-background;
    -webkit-box-shadow: 0 2px 4px @material-border-color, 0 2px @material-overlay-background;
    box-shadow: 0 2px 4px @material-border-color, 0 2px @material-overlay-background;
}

.km-material-dark .km-switch-off .km-switch-handle
{
    background-color: darken(@material-dark-background, 7%);
}

.km-material .km-switch-container,
.km-material .km-switch-wrapper
{
    border-color: @material-main-color;
}

.km-material-dark .km-switch-container,
.km-material-dark .km-switch-wrapper
{
    border-color: @material-dark-main-color;
}

// ListView
.km-material .km-group-container,
.km-material .km-list > li,
.km-material .km-listinset > li:first-child,
.km-material .km-listgroupinset .km-list > li:first-child,
.km-material .km-listinset > li:last-child,
.km-material .km-listgroupinset .km-list > li:last-child
{
    border-color: @material-border-color;
}

.km-material .km-group-title,
.km-material .km-listview-link:after
{
    color: lighten(@material-main-color, 30%);
}

.km-material .km-group-title
{
    border-color: @material-border-color;
}

.km-material .km-filter-wrap:before,
.km-material .km-filter-reset .km-clear,
.km-material .km-filter-wrap > input
{
    color: @material-main-color;
}

.km-material-dark .km-filter-wrap:before,
.km-material-dark .km-filter-reset .km-clear,
.km-material-dark .km-filter-wrap > input
{
    color: @material-dark-main-color;
}

// ScrollView

.km-material .km-pages li
{
    background: @material-disabled-color;
}

// Forms

.km-material .km-list select:not([multiple]) option
{
    color: @material-dark-background;
}

// Checkboxes and Radios

.km-material .km-listview-label input[type=radio],
.km-material .km-listview-label input[type=checkbox]
{
    border-color: @material-icon-color;
    background: @material-primary-inverse-color;
}

.km-material-dark .km-listview-label input[type=radio],
.km-material-dark .km-listview-label input[type=checkbox]
{
    border-color: @material-dark-icon-color;
    background: @material-dark-inverse-color;
}

.km-material .km-listview-label input[type=checkbox]:checked:after
{
    color: @material-primary-inverse-color;
}

.km-material-dark .km-listview-label input[type=checkbox]:checked:after
{
    color: @material-dark-inverse-color;
}

// Shim

.km-material .km-shim
{
    background: @material-overlay-background;
}

.km-phone .km-material .km-actionsheet-wrapper
{
    background: @material-background;
}

.km-phone .km-material-dark .km-actionsheet-wrapper
{
    background: @material-dark-background;
}

// PopUp

.km-material .km-popup .k-item,
.km-material .km-actionsheet > li > a
{
    color: @material-main-color;
    background: @material-background;
    border-bottom-color: @material-background;
}

.km-material-dark .km-popup .k-item,
.km-material-dark .km-actionsheet > li > a
{
    color: @material-dark-main-color;
    background: @material-dark-background;
    border-bottom-color: @material-dark-background;
}

.km-material .km-popup
{
    background: @material-background;
}

.km-material-dark .km-popup
{
    background: @material-dark-background;
}

.km-material .km-actionsheet-wrapper,
.km-material .km-popup .k-list-container
{
    background: @material-background;
    border-top-color: @material-background;
    box-shadow: @material-overlay-shadow;
}

.km-material-dark .km-actionsheet-wrapper,
.km-material-dark .km-popup .k-list-container
{
    background: @material-dark-background;
    border-top-color: @material-dark-background;
}

.km-material .km-popup.km-pane,
.km-tablet .km-material .km-actionsheet-wrapper
{
    color: @material-main-color;
    background-color: @material-background;
}

.km-material-dark .km-popup.km-pane,
.km-tablet .km-material-dark .km-actionsheet-wrapper
{
    color: @material-dark-main-color;
    background-color: @material-dark-background;
}

.km-material .km-popup-arrow:after,
.km-material-dark .km-popup-arrow:after,
.km-material .km-left .km-popup-arrow:after,
.km-material .km-right .km-popup-arrow:after,
.km-material-dark .km-left .km-popup-arrow:after,
.km-material-dark .km-right .km-popup-arrow:after
{
    border-color: transparent;
}

.km-material .km-popup {
    box-shadow: @material-overlay-shadow;
}

// Loader & Pull-to-refresh

.km-material .km-loading:before,
.km-material .km-scroller-refresh .km-icon:before
{
    border-color: @material-primary-color;
}

.km-material .km-scroller-pull.km-scroller-refresh .km-icon:before
{
    border-color: fade(@material-dark-background, 50%);
}

.km-material-dark .km-scroller-pull.km-scroller-refresh .km-icon:before
{
    border-color: fade(@material-dark-main-color, 50%);
}

.km-material .km-loading,
.km-material .km-scroller-refresh .km-icon,
.km-material .km-loading-left:before,
.km-material .km-loading-left:after,
.km-material .km-loading-right:before,
.km-material .km-loading-right:after
{
    background-color: @material-background;
}

.km-material-dark .km-loading,
.km-material-dark .km-scroller-refresh .km-icon,
.km-material-dark .km-loading-left:before,
.km-material-dark .km-loading-left:after,
.km-material-dark .km-loading-right:before,
.km-material-dark .km-loading-right:after
{
    background-color: @material-primary-color;
}

.km-material-dark .km-loading:before,
.km-material-dark .km-scroller-refresh .km-icon:before
{
    border-color: @material-dark-main-color;
}

.km-material .km-loading,
.km-material .km-scroller-pull .km-icon
{
    .box-shadow(0 1px 4px @material-box-shadow-color);
}

.km-material .km-loader h1
{
    color: @material-main-color;
}

.km-material-dark .km-loader h1
{
    color: @material-dark-main-color;
}

// Collapsible

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

.km-material .km-collapsible-header .km-icon
{
    color: #7d7d7d;
}

.km-material .km-expanded .km-collapsible-header .km-icon
{
    color: @material-primary-selected-color;
}

.km-material-dark .km-collapsible-header,
.km-material-dark .km-collapsible-content
{
    border-color: #4d4d4d;
}

// Active States

.km-material .km-detail.km-state-active,
.km-material .km-state-active[style*=background]
{
    .box-shadow(inset 0 0 0 1000px @material-selected-background);
}

// Active States

.km-material .km-badge,
.km-material .km-switch-label-on,
.km-material .km-switch-label-off,
.km-material .k-slider .k-draghandle,
.km-material .k-slider .k-draghandle:hover,
.km-material .km-actionsheet > li > a:focus,
.km-material .km-actionsheet > li > a:active,
.km-material .km-popup.km-pane .k-toolbar,
.km-material .km-popup.km-pane .km-tabstrip,
.km-material .km-popup .k-state-hover,
.km-material .km-popup .k-state-focused,
.km-material .km-state-active .km-listview-link:after
{
    color: @material-primary-inverse-color;
}

.km-material-dark .km-switch-label-on,
.km-material-dark .km-switch-label-off,
.km-material-dark .k-slider .k-draghandle,
.km-material-dark .k-slider .k-draghandle:hover,
.km-material-dark .km-popup.km-pane .k-toolbar,
.km-material-dark .km-popup.km-pane .km-tabstrip,
.km-material-dark .km-popup .k-state-hover,
.km-material-dark .km-popup .k-state-focused,
.km-material-dark .km-state-active .km-listview-link:after
{
    color: @material-dark-inverse-color;
}

.km-material .km-filter-wrap > input,
.km-material .km-switch-handle.km-state-active
{
    background: @material-primary-inverse-color;
}

.km-material-dark .km-filter-wrap > input,
.km-material-dark .km-switch-handle.km-state-active
{
    background: @material-dark-inverse-color;
}

.km-material .km-switch-handle,
.km-material .k-slider-selection
{
    color: @material-primary-color;
}

.km-material .km-switch-background
{
    color: lighten(@material-primary-color, 20%);
}

.km-material .km-switch-off .km-switch-background
{
    background-color: @material-disabled-color;
}

.km-material .k-slider-selection,
.km-material .km-touch-scrollbar,
.km-material .km-pages .km-current-page,
.km-material .k-slider .k-draghandle,
.km-material .k-slider .k-draghandle:hover,
.km-material .km-actionsheet > li > a:focus,
.km-material .km-actionsheet > li > a:active,
.km-material li.km-state-active .km-listview-label,
.km-material .km-listview-label input[type=radio]:checked:after,
.km-material .km-listview-label input[type=checkbox]:checked
{
    background: @material-primary-color;
}

.km-material .km-filter-wrap > input:focus,
.km-material .km-listview-label input[type=radio]:checked,
.km-material .km-listview-label input[type=checkbox]:checked
{
    border-color: @material-primary-color;
}

.km-material-dark .k-slider-selection,
.km-material-dark .km-touch-scrollbar,
.km-material-dark .km-pages .km-current-page,
.km-material-dark .km-actionsheet > li > a:focus,
.km-material-dark .km-actionsheet > li > a:active,
.km-material-dark li.km-state-active .km-listview-label,
.km-material-dark .km-listview-label input[type=radio]:checked:after,
.km-material-dark .km-listview-label input[type=checkbox]:checked
{
    background: @material-accent-color;
}

.km-material-dark .km-filter-wrap > input:focus,
.km-material-dark .km-listview-label input[type=radio]:checked,
.km-material-dark .km-listview-label input[type=checkbox]:checked
{
    border-color: @material-accent-color;
}

.km-material .km-badge
{
    background: @material-second-active-background;
}

.km-material .km-tabstrip .km-button,
.km-material .km-popover-root .km-header .km-button,
.km-material .km-popover-root .km-footer .km-button,
.km-material .km-modalview .km-header .km-button,
.km-material .km-modalview .km-footer .km-button
{
    color: @material-primary-color;
}

.km-material-dark .km-tabstrip .km-button,
.km-material-dark .km-popover-root .km-header .km-button,
.km-material-dark .km-popover-root .km-footer .km-button,
.km-material-dark .km-modalview .km-header .km-button,
.km-material-dark .km-modalview .km-footer .km-button
{
    color: @material-accent-color;
}

.km-material-dark .km-pages .km-current-page
{
    background: @material-accent-color;
}

.km-material .km-tabstrip .km-button.km-state-active
{
    border-color: currentcolor;
}

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

.km-material .km-content .km-button.km-state-active
{
    .box-shadow(~"0 1px 3px "@material-box-shadow-color~", 0 5px 8px "@material-box-shadow-color~", inset 0 0 0 1000px "@material-selected-background);
}

.km-material .km-content .km-button.km-state-active[style*=background]
{
    .box-shadow(~"0 1px 3px "@material-box-shadow-color~", 0 5px 8px "@material-box-shadow-color~", inset 0 0 0 1000px "darken(@material-selected-background, 40));
}

.km-root .km-material .km-button.km-state-disabled
{
    color: @material-disabled-color;
    opacity: 1;
}

.km-material .km-buttongroup,
.km-material .km-widget.km-navbar .km-buttongroup,
.km-pane-wrapper .k-mobile-list .k-edit-field.k-scheduler-toolbar
{
    border-color: @material-border-color;
}

.km-material .km-buttongroup .km-button,
.km-pane-wrapper .k-mobile-list .k-scheduler-toolbar .k-link
{
    color: @material-main-color;
}

.km-material-dark .km-buttongroup .km-button
{
    color: @material-dark-main-color;
}

.km-material .km-widget.km-navbar .km-buttongroup .km-button
{
    color: @material-primary-inverse-color;
}

.km-material-dark .km-widget.km-navbar .km-buttongroup .km-button
{
    color: @material-dark-inverse-color;
}

.km-root .km-material .km-buttongroup > .km-state-active
{
    color: @material-primary-color;
    background-color: transparent;
    border-color: @material-primary-color;
    .box-shadow(none);
}

.km-root .km-material-dark .km-buttongroup > .km-state-active,
.km-root .km-material .km-widget.km-navbar .km-buttongroup .km-state-active
{
    color: @material-accent-color;
    background-color: transparent;
    border-color: @material-accent-color;
}

.km-pane-wrapper .k-mobile-list .k-edit-field.k-scheduler-toolbar {
    .box-shadow(none);
}

.km-pane-wrapper .k-mobile-list .k-scheduler-toolbar ul li {
    border-color: transparent;
}

.km-pane-wrapper .k-mobile-list .k-scheduler-toolbar ul li.k-state-selected {
    border-bottom-color: @material-primary-color;
    .box-shadow(none);
}

.km-material .km-content,
.km-material .km-tabstrip,
.km-material .km-popover-root .km-navbar,
.km-material .km-modalview .km-navbar
{
    color: @material-main-color;
    background-color: @material-background;
}

.km-material-dark .km-content,
.km-material-dark .km-tabstrip,
.km-material-dark .km-popover-root .km-navbar,
.km-material-dark .km-modalview .km-navbar
{
    color: @material-dark-main-color;
    background-color: @material-dark-background;
}

.km-material-dark .km-content button
{
    color: @material-dark-main-color;
}

.km-material .km-navbar,
.km-material .k-toolbar
{
    background-color: @material-primary-color;
    border-color: @material-primary-color;
    color: @material-primary-inverse-color;
}

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

.km-material .km-navbar .km-button.km-state-active,
.km-material .k-toolbar .km-button.km-state-active
{
    color: fade(@material-primary-inverse-color, 50%);
}

.km-material .km-popup .k-state-hover,
.km-material .km-popup .k-state-focused,
.km-material .km-popup .k-state-selected,
.km-material .km-popup .k-list-container
{
    border-color: @material-primary-color;
}

.km-material .k-toolbar .km-state-active
{
    background-color: @material-primary-selected-color;
}

.km-material .km-popup .k-popup .k-item.k-state-selected,
.km-material .km-popup .k-popup .k-item.k-state-focused
{
    color: @material-main-color;
    background-color: @material-selected-background;
}

.km-material .km-popup .k-popup .k-item.k-state-hover
{
    color: @material-main-color;
}

.km-material-dark .km-popup .k-popup .k-item.k-state-selected,
.km-material-dark .km-popup .k-popup .k-item.k-state-focused,
.km-material-dark .km-popup .k-popup .k-item.k-state-hover
{
    color: @material-dark-main-color;
}

.km-material .km-modalview
{
    box-shadow: @material-overlay-shadow;
}

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

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

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

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

.km-material input[type=radio],
.km-material input[type=checkbox]
{
    color: @material-main-color;
    border-color: @material-border-color;
}

.km-material-dark input[type=radio],
.km-material-dark input[type=checkbox]
{
    color: @material-dark-main-color;
}

.km-material .km-shim,
.km-material .km-popup,
.km-material .k-slider,
.km-material .km-switch-on,
.km-material .km-current-page,
.km-material input:focus,
.km-material select:focus,
.km-material textarea:focus,
.km-material input:checked,
.km-material .km-touch-scrollbar,
.km-material input[type=text]:not(.k-input):focus
{
    color: @material-primary-color;
}

.km-material-dark select:focus,
.km-material-dark input:checked,
.km-material-dark textarea:focus,
.km-material-dark.km-pane input:focus,
.km-material-dark li.km-actionsheet-title,
.km-material-dark .k-dropdown .k-state-focused,
.km-material-dark input[type=text]:not(.k-input):focus
{
    color: @material-accent-color;
}

// Animation effects

.km-material .km-button[data-animated]
{
    -webkit-transition: -webkit-box-shadow 300ms linear;
    -ms-transition: box-shadow 300ms linear;
    transition: box-shadow 300ms linear;
    -webkit-transition-property: -webkit-box-shadow, background-color;
    transition-property: box-shadow, background-color;
}

// Nova theme features
.km-material {
    label.km-required:after {
        color: @material-second-active-background;
    }

    .km-list {
        fieldset {
            legend,
            .km-inline-field {
                border-color: @material-border-color;
            }
        }

        .km-label-above {
            input[type=text]:not(.k-input),
            input[type=password],
            input[type=search],
            input[type=number],
            input[type=tel],
            input[type=url],
            input[type=email],
            input[type=file],
            input[type=month],
            input[type=color],
            input[type=week],
            input[type=date],
            input[type=time],
            input[type=datetime],
            input[type=datetime-local],
            select:not([multiple]),
            .k-dropdown,
            textarea {
                color: @material-main-color;
                border-color: @material-input-text-color;
            }

            input[type=text]:not(.k-input):focus,
            input[type=password]:focus,
            input[type=search]:focus,
            input[type=number]:focus,
            input[type=tel]:focus,
            input[type=url]:focus,
            input[type=email]:focus,
            input[type=file]:focus,
            input[type=month]:focus,
            input[type=color]:focus,
            input[type=week]:focus,
            input[type=date]:focus,
            input[type=time]:focus,
            input[type=datetime]:focus,
            input[type=datetime-local]:focus,
            select:not([multiple]):focus,
            .k-dropdown:focus,
            textarea:focus {
                border-color: @material-primary-color;
            }
        }
    }

    .km-label-above {
        color: lighten(@material-dark-color, 44%);
    }

    .km-icon-label {
        color: lighten(@material-dark-color, 25%);
    }

    .km-checkbox-label:before,
    .km-checkbox-label:after {
        background: @material-primary-inverse-color;
        border-color: @material-icon-color;
    }

    .km-checkbox:checked + .km-checkbox-label:after {
        color:  @material-background;
        background: @material-primary-color;
        border-color: @material-primary-color;
    }

    .km-radio-label:before {
        border-color: @material-icon-color;
    }

    .km-radio-label:after {
        background-color: @material-primary-color;
    }

    .km-radio:checked + .km-radio-label:before {
        border-color: @material-primary-color;
    }
}

.km-material-dark {
    .km-list {
        .km-label-above {
            input[type=text]:not(.k-input),
            input[type=password],
            input[type=search],
            input[type=number],
            input[type=tel],
            input[type=url],
            input[type=email],
            input[type=file],
            input[type=month],
            input[type=color],
            input[type=week],
            input[type=date],
            input[type=time],
            input[type=datetime],
            input[type=datetime-local],
            select:not([multiple]),
            .k-dropdown,
            textarea {
                color: @material-dark-main-color;
                border-color: @material-input-text-color;
            }

            input[type=text]:not(.k-input):focus,
            input[type=password]:focus,
            input[type=search]:focus,
            input[type=number]:focus,
            input[type=tel]:focus,
            input[type=url]:focus,
            input[type=email]:focus,
            input[type=file]:focus,
            input[type=month]:focus,
            input[type=color]:focus,
            input[type=week]:focus,
            input[type=date]:focus,
            input[type=time]:focus,
            input[type=datetime]:focus,
            input[type=datetime-local]:focus,
            select:not([multiple]):focus,
            .k-dropdown:focus,
            textarea:focus {
                border-color: @material-accent-color;
            }
        }
    }

    .km-checkbox-label:before,
    .km-checkbox-label:after {
        border-color: @material-dark-icon-color;
        background: @material-dark-inverse-color;
    }

    .km-checkbox:checked + .km-checkbox-label:after {
        color: @material-dark-inverse-color;
        background: @material-accent-color;
        border-color: @material-accent-color;
    }

    .km-radio-label:before {
        border-color: @material-dark-icon-color;
    }

    .km-radio-label:after {
        background-color: @material-accent-color;
    }

    .km-radio:checked + .km-radio-label:before {
        border-color: @material-accent-color;
    }
}