EnVisageOnline/Main/Source/EnVisage/Content/stylesheets/kendo/mobile/material/template.less

775 lines
23 KiB
Plaintext

/*!
*/
@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 .k-slider .k-draghandle,
.km-material-dark .k-slider .k-draghandle:hover,
.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;
}