@progress/kendo-ui/css/mobile/nova/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.
 */
@accent: #ff4350;
@base: #f8fafb;
@background: #fff;

@border-radius: 4px;

@normal-background: #fff;
@normal-text-color: #32364c;
@normal-gradient: none;

@hover-background: #f8fafb;
@hover-text-color: #888e90;
@hover-gradient: none;

@selected-background: #f5f6f6;
@selected-text-color: #888e90;
@selected-gradient: none;

@accentSecond: #00acc1;

@error: #f44336;
@warning: #f9a825;
@success: #00c853;
@info: #2196f3;

.km-nova h1,
.km-nova h2,
.km-nova h3,
.km-nova h4,
.km-nova h5,
.km-nova h6,
.km-nova p {
    color: @normal-text-color;
}

.km-nova .km-content {
    color: @normal-text-color;
    background-color: @background;
}

// Shim
.km-nova .km-popup,
.km-nova .km-shim,
.km-phone .km-nova .km-actionsheet-wrapper,
.km-nova .km-actionsheet-root {
    background: rgba(0,0,0,.4);
}

// Button
.km-nova .km-button {
    color: @hover-text-color;
    background: @background;
    border-color: @hover-text-color;
}

.km-nova .km-button.km-state-active {
    background: @selected-background;
}

// Primary Button
.km-nova .km-primary {
    color: @background;
    background: @accent;
    border-color: @accent;
}

.km-nova .km-icon-button,
.km-nova .km-list .km-icon-button .km-icon {
    color: @background;
}

.km-nova .km-primary.km-state-active {
    background: hsv(hsvHue(@accent), hsvSaturation(@accent), (hsvValue(@accent) - 10));
    border-color: hsv(hsvHue(@accent), hsvSaturation(@accent), (hsvValue(@accent) - 10));
}

// Link button
.km-nova .km-link-button {
    color: @accentSecond;
    border-color: transparent;
}

.km-nova a:not([class]),
.km-nova .km-external-link {
    color: @accentSecond;
}

// TabStrip
.km-nova .km-footer {
    background: @normal-text-color;
}

.km-nova .km-navbar,
.km-nova .k-toolbar,
.km-nova .km-tabstrip {
    background-image: linear-gradient(to bottom, darken(@normal-text-color, 2%) 0%, darken(@normal-text-color, 7%) 100%);
}

.km-nova .km-vertical-tabstrip {
    background-color: darken(@normal-text-color, 7%);
}

.km-nova .km-navbar,
.km-nova .k-toolbar,
.km-nova .k-toolbar .km-button,
.km-nova .k-toolbar .km-icon,
.km-nova .km-tabstrip,
.km-nova .km-navbar .km-back:before,
.km-nova .k-toolbar .km-back:before,
.km-nova .km-navbar .km-button,
.km-nova .km-view-title {
    color: @background;
}

.km-nova .km-tabstrip .km-button {
    color: @background;
    background: transparent;
    border-color: transparent;
}

.km-nova .km-tabstrip .km-button.km-state-active {
    background-image: linear-gradient(to bottom, #202333 0%, #081421 100%);
}

.km-nova .km-drawer .km-navbar,
.km-nova .km-drawer .km-vertical-tabstrip .km-button.km-state-active,
.km-nova .km-drawer .km-listview li.km-state-active {
    background: darken(@normal-text-color, 10%);
}

.km-nova .km-light .km-view-title {
    color: @accent;
}

.km-nova .km-light.km-navbar,
.km-nova .km-light.k-toolbar,
.km-nova .km-light.km-tabstrip {
    background: @background;
    .box-shadow(0 1px 40px 4px @hover-background);
}

.km-nova .km-accent.km-navbar,
.km-nova .km-accent.k-toolbar,
.km-nova .km-accent.km-tabstrip,
.km-nova .km-vertical-tabstrip .km-button.km-state-active:before,
.km-nova .km-drawer .km-listview li.km-state-active:before {
    background: @accent;
}

.km-nova .km-listview-link:after,
.km-nova .km-listview-label:after {
    border-color: lighten(@selected-text-color, 25%);
}

.km-nova .km-drawer .km-list .km-listview-link:after,
.km-nova .km-drawer .km-list .km-listview-label:after {
    border-color: @background;
    opacity: .3;
}

.km-nova .km-touch-scrollbar {
    background: @normal-text-color;
}

// Light NavBar button
.km-nova .km-light.km-navbar .km-back:before,
.km-nova .km-light.k-toolbar .km-back:before,
.km-nova .km-light.km-navbar .km-button {
    color: @accent;
}

.km-nova .km-navbar .km-button,
.km-nova .k-toolbar .km-button {
    background: transparent;
    border-color: transparent;
    .box-shadow(none);
}

// ButtonGroup
.km-nova .km-buttongroup .km-button {
    border-color: darken(@selected-background, 33%);
}

.km-nova .km-buttongroup .km-state-active {
    color: @background;
    background-color: darken(@selected-background, 33%);
}

.km-nova .km-buttongroup.km-primary .km-button {
    color: @accent;
    border-color: @accent;
}

.km-nova .km-buttongroup.km-primary .km-state-active {
    color: @background;
    background-color: @accent;
}

// Inverse ButtonGroup
.km-nova .km-inverse .km-button {
    color: @background;
    background-color: darken(@selected-background, 33%);
    border-color: @background;
}

.km-nova .km-inverse .km-state-active {
    color: darken(@selected-background, 33%);
    background-color: @background;
}

.km-nova .km-inverse.km-primary .km-button {
    color: @background;
    border-color: @background;
    background-color: @accent;
}

.km-nova .km-inverse.km-primary .km-state-active {
    color: @accent;
    background-color: @background;
}

// Accent NavBar
.km-nova .km-accent.km-navbar,
.km-nova .km-accent.k-toolbar,
.km-nova .km-accent.km-tabstrip,
.km-nova .km-accent.km-navbar .km-back:before,
.km-nova .km-accent.k-toolbar .km-back:before,
.km-nova .km-accent.km-navbar .km-button {
    color: @background;
}

// ButtonGroup in NavBar
.km-nova .km-navbar .km-buttongroup .km-button {
    border-color: @background;
}

.km-nova .km-navbar .km-buttongroup .km-state-active {
    color: @normal-text-color;
    background-color: @background;
}

// ListView
.km-nova .km-list > li
{
    border-color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
    color: @normal-text-color;
}

.km-nova .km-list > li.km-load-more {
    border-color: transparent;
}

.km-nova .km-list > li > .km-listview-link,
.km-nova .km-legend-button,
.km-nova .km-collapsible-header,
.km-nova .km-collapsible-header h1,
.km-nova .km-collapsible-header h2,
.km-nova .km-collapsible-header h3,
.km-nova .km-collapsible-header h4,
.km-nova .km-collapsible-header h5,
.km-nova .km-collapsible-header h6 {
    color: @accent;
}

.km-nova .km-legend-button,
.km-nova .km-drawer a {
    text-decoration: none;
}

.km-nova .km-list > li label,
.km-nova .km-list fieldset textarea,
.km-nova .km-list fieldset input,
.km-nova .km-checkbox-label,
.km-nova .km-radio-label {
    color: lighten(@selected-text-color, 8%);
}

.km-nova .km-list fieldset .km-inline-field {
    border-color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
}

.km-nova label.km-required:after {
    color: @accent;
}

.km-nova .km-group-title,
.km-nova .km-list fieldset legend,
.km-nova .km-shim li.km-actionsheet-title {
    background: @base;
    border-color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
    color: @normal-text-color;
}

.km-nova .km-popup .k-state-focused,
.km-nova .km-popup .k-state-selected {
    color: @base;
    background: @accent;
}

// Drawer
.km-nova .km-drawer {
    color: @background;
    background-color: darken(@normal-text-color, 4%);
}

.km-nova .km-drawer .km-content {
    background-color: darken(@normal-text-color, 4%);
}

// ListView in Drawer
.km-nova .km-drawer .km-group-title {
    color: @background;
    background-color: darken(@normal-text-color, 15%);
    border-color: lighten(@normal-text-color, 5%);
}

.km-nova .km-drawer .km-list > li {
    border-color: lighten(@normal-text-color, 5%);
}

.km-nova .km-drawer .km-list > li,
.km-nova .km-drawer .km-list > li > .km-listview-link,
.km-nova .km-drawer .km-list > li .km-icon {
    color: @background;
}

// Generic content
.km-nova .km-thumbnail {
    border-color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
}

.km-nova .km-listview-link:after {
    color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
}

// Filter box
.km-nova .km-filter-wrap {
    background: @base;
    color: @normal-text-color;
}

.km-nova .km-filter-wrap:before,
.km-nova .km-filter-wrap .km-clear {
    color: lighten(@selected-text-color, 25%);
}

// Slider
.km-nova .k-slider .k-slider-track {
    background-color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
    .box-shadow(none);
}

.km-nova .k-slider-selection {
    background-color: @accent;
    .box-shadow(none);
}

.km-nova .k-slider .k-draghandle,
.km-nova .k-slider .k-draghandle:hover {
    background-color: @background;
    .box-shadow(0 0.202rem 0.403rem 0 rgba(0, 0, 0, 0.3));
}

// Switch
.km-nova .km-switch-wrapper {
    border-color: @accent;
    background-color: @accent;
}

.km-nova .km-switch-off .km-switch-container {
    .box-shadow(inset 0 0.202rem 0.403rem 0 darken(@base, 8%));
    border-color: @base;
    background-color: @base;
}

.km-nova span.km-switch {
    color: @accent;
}

.km-nova span.km-switch-off {
    color: @base;
}

.km-nova .km-switch-off .km-switch-wrapper {
    background-color: @base;
    border-color: @base;
}

.km-nova .km-switch-handle {
    background: @background;
    .box-shadow(0 0.202rem 0.403rem 0 rgba(0,0,0,.3));
    border-color: darken(@base, 8%);
}

// ScrollView
.km-nova .km-scrollview-dark {
    background-color: @normal-text-color;
}

.km-nova .km-pages li {
    background: rgba(255, 255, 255, 0.2);
    border-color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
}

.km-nova .km-pages .km-current-page {
    background: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
}

// Checkboxes and RadioButtons inside ListView
.km-nova input[type=radio],
.km-nova input[type=checkbox] {
   color: @accent;
   border-color: darken(@base, 8%);
}

.km-nova input[type=checkbox]:checked:after {
    color: @accent;
}

.km-nova input[type=radio]:checked:after,
.km-nova.km-on-android .km-view input[type=radio].km-check:checked:after {
    background: @accent;
}

// Standalone Checkboxes and RadioButtons
.km-nova .km-checkbox:checked + .km-checkbox-label:after {
    color: @accent;
    border-color: darken(@base, 8%);
}

.km-nova .km-checkbox-label:before {
    border-color: transparent;
}

.km-nova .km-checkbox-label:after,
.km-nova .km-radio-label:after {
    color: darken(@base, 8%);
}

.km-nova .km-radio:checked + .km-radio-label:after {
    background: @accent;
}

// ModalView
.km-nova .km-modalview,
.km-nova .km-modalview .km-footer .km-rightitem {
    background: @background;
}

.km-nova .km-modalview .km-footer .km-button {
    color: darken(@base, 50%);
    border-color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
}

.km-nova .km-modalview .km-footer .km-rightitem .km-button:last-child,
.km-nova .km-modalview .km-footer .km-button.km-state-active {
    color: @accentSecond;
}

// ActionSheet, Footer
.km-nova .km-actionsheet > li > a,
.km-nova .km-popup .k-item {
    color: @normal-text-color;
    background: @background;
}

.km-nova .km-actionsheet > li:nth-last-child(2) > a {
    border-image: none;
}

.km-nova .km-footer .km-tabstrip .km-button,
.km-nova .km-actionsheet-wrapper,
.km-nova .km-actionsheet > li > a,
.km-nova .km-shim li.km-actionsheet-title,
.km-nova .km-popup .k-list-container,
.km-nova .km-popup .k-item {
    border-color: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
}

.km-nova .km-actionsheet > .km-actionsheet-cancel > a {
    color: @normal-text-color;
}

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

// Collapsible
.km-nova .km-collapsible-header,
.km-nova .km-collapsible-content {
    background: @background;
    border-color: darken(@base, 8%);
}

.km-nova .km-collapsible-content {
    color: @normal-text-color;
}

.km-nova .km-collapsible-header .km-icon,
.km-nova .km-expanded .km-collapsible-header .km-icon {
    color: lighten(@selected-text-color, 25%);
}

// Loader & Pull-to-refresh
.km-nova .km-loader {
    background: rgba(0,0,0,.05);
}

.km-nova .km-detail,
.km-nova .km-detail .km-icon:after {
    color: @accent;
    background: @background;
}

.km-nova .km-list > li .km-style-default .km-icon:after {
    color: @normal-text-color;
}

.km-nova .km-list > li .km-style-info .km-icon:after {
    color: @info;
}

.km-nova .km-list > li .km-style-success .km-icon:after {
    color: @success;
}

.km-nova .km-list > li .km-style-warning .km-icon:after {
    color: @warning;
}

.km-nova .km-list > li .km-style-error .km-icon:after {
    color: @error;
}

.km-nova .km-badge {
    color: @background;
    background: @accent;
    border-color: @accent;
}

.km-nova .km-loading-left:before {
  background: @normal-text-color;
}

.km-nova .km-loading-left:after {
  background: hsv(hsvHue(@base) , hsvSaturation(@base), (hsvValue(@base) - 10));
}

.km-nova span.km-loading-right {
   background: @background;
}

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

.km-nova .km-invalid-msg {
    background: @warning;
}

.km-nova .km-invalid-msg {
    color: @background;
}