442 lines
13 KiB
Plaintext
442 lines
13 KiB
Plaintext
/*!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*/
|
|
@ios7-main-color: #000;
|
|
@ios7-second-color: #bababa;
|
|
@ios7-background: #fff;
|
|
@ios7-actionsheet-background: #F7F7F8;
|
|
@ios7-light-background: rgba(244,244,244,.95);
|
|
@ios7-list-select-background: #d9d9d9;
|
|
@ios7-list-title-background: #efeff4;
|
|
@ios7-dark-background: #363940;
|
|
@ios7-lighter-background: lighten(@ios7-dark-background, 40);
|
|
@ios7-button-background: rgba(0,0,0,0);
|
|
@ios7-border-color: #007aff;
|
|
@ios7-second-border-color: rgba(180, 180, 180, .5);
|
|
@ios7-active-color: #fff;
|
|
@ios7-active-background: #007aff;
|
|
@ios7-second-active-background: #fd472b;
|
|
@ios7-switch-color: #4CDA64;
|
|
@ios7-light-shadow: rgba(255,255,255,.2);
|
|
@ios7-overlay-background: rgba(0,0,0,.4);
|
|
@ios7-tabstrip-color: #929292;
|
|
|
|
@warning: #ff3b30;
|
|
|
|
.km-ios7 .km-navbar,
|
|
.km-ios7 .k-toolbar,
|
|
.km-ios7 .km-tabstrip
|
|
{
|
|
background-color: @ios7-light-background;
|
|
}
|
|
|
|
.km-ios7,
|
|
.km-ios7.km-pane .km-content
|
|
{
|
|
color: @ios7-main-color;
|
|
background-color: @ios7-background;
|
|
}
|
|
|
|
.km-ios7 .km-splitview > .km-split-content > .km-pane:first-child
|
|
{
|
|
border-right-color: @ios7-second-border-color;
|
|
}
|
|
|
|
/* NavBar */
|
|
|
|
.km-ios7 .km-navbar,
|
|
.km-ios7 .k-toolbar,
|
|
.km-ios7 .km-tabstrip
|
|
{
|
|
border-color: @ios7-second-border-color;
|
|
}
|
|
|
|
.km-ios7 .km-view-title
|
|
{
|
|
color: @ios7-main-color;
|
|
}
|
|
|
|
/* Button */
|
|
|
|
.km-ios7 .km-button
|
|
{
|
|
background: @ios7-button-background;
|
|
}
|
|
|
|
.km-ios7 .km-state-active[style*=background]
|
|
{
|
|
.box-shadow(inset 0 0 0 1000px rgba(0,0,0,.2));
|
|
}
|
|
|
|
.km-ios7 .km-back:before
|
|
{
|
|
-webkit-box-shadow: inset .25rem -.25rem 0 @ios7-active-background;
|
|
box-shadow: inset .25rem -.25rem 0 @ios7-active-background;
|
|
}
|
|
|
|
.km-ios7 .km-detail
|
|
{
|
|
color: @ios7-active-background;
|
|
background-color: @ios7-background;
|
|
}
|
|
|
|
.km-ios7 .km-detail:active,
|
|
.km-ios7 .km-state-active .km-detail
|
|
{
|
|
.box-shadow(inset 0 0 0 1000px @ios7-button-background);
|
|
}
|
|
|
|
.km-ios7 .km-detail.km-rowinsert
|
|
{
|
|
color: green;
|
|
}
|
|
|
|
.km-ios7 .km-detail.km-rowdelete
|
|
{
|
|
color: red;
|
|
}
|
|
|
|
/* Switch */
|
|
|
|
.km-ios7 .km-switch-wrapper
|
|
{
|
|
background-color: @ios7-second-color;
|
|
}
|
|
|
|
.km-ios7 .km-switch-background,
|
|
.km-ios7 .k-slider-selection
|
|
{
|
|
background-image: linear-gradient(to bottom, @ios7-active-color, @ios7-active-color);
|
|
}
|
|
|
|
.km-ios7 .km-switch-handle
|
|
{
|
|
background: @ios7-background;
|
|
-webkit-box-shadow: 0 3px 8px @ios7-overlay-background, 0 0 0 1px currentcolor;
|
|
box-shadow: 0 3px 8px @ios7-overlay-background, 0 0 0 1px currentcolor;
|
|
}
|
|
|
|
.km-ios7 .km-switch-off .km-switch-handle
|
|
{
|
|
-webkit-box-shadow: 0 3px 8px @ios7-overlay-background, 0 0 0 1px @ios7-active-color;
|
|
box-shadow: 0 3px 8px @ios7-overlay-background, 0 0 0 1px @ios7-active-color;
|
|
}
|
|
|
|
.km-ios7 .km-switch-container,
|
|
.km-ios7 .km-switch-wrapper
|
|
{
|
|
border-color: @ios7-list-title-background;
|
|
}
|
|
|
|
/* Slider */
|
|
|
|
.km-ios7 .k-slider .k-draghandle,
|
|
.km-ios7 .k-slider .k-draghandle:hover
|
|
{
|
|
box-shadow: 0 5px 5px @ios7-list-select-background, inset 0 0 0 1px @ios7-second-border-color;
|
|
}
|
|
|
|
.km-ios7 .k-slider-track
|
|
{
|
|
background-color: @ios7-second-color;
|
|
}
|
|
|
|
/* ListView */
|
|
|
|
.km-ios7 .km-list > li
|
|
{
|
|
color: @ios7-main-color;
|
|
border-top-color: @ios7-second-border-color;
|
|
border-image: linear-gradient(to right, transparent 1em, @ios7-second-border-color 1em, @ios7-second-border-color 100%) 1 stretch;
|
|
}
|
|
|
|
.km-ios7 .km-list > li:last-child
|
|
{
|
|
.box-shadow(inset 0 -1px 0 @ios7-second-border-color);
|
|
}
|
|
|
|
.km-ios7 .km-list > li.km-state-active,
|
|
.km-ios7 .km-list > li.km-state-active + li
|
|
{
|
|
border-image: none;
|
|
}
|
|
|
|
.km-ios7 .km-listview-link:after
|
|
{
|
|
color: @ios7-lighter-background;
|
|
-webkit-box-shadow: inset -.2rem .2rem 0 @ios7-lighter-background;
|
|
box-shadow: inset -.2rem .2rem 0 @ios7-lighter-background;
|
|
}
|
|
|
|
.km-ios7 .km-group-title
|
|
{
|
|
color: darken(@ios7-second-border-color, 30);
|
|
border-bottom-color: @ios7-second-border-color;
|
|
background: @ios7-list-title-background;
|
|
}
|
|
|
|
.km-ios7 .km-listgroup .km-group-title,
|
|
.km-ios7 .km-listgroupinset .km-group-title
|
|
{
|
|
border-top-color: @ios7-list-title-background;
|
|
}
|
|
|
|
.km-ios7 .km-filter-form
|
|
{
|
|
color: @ios7-list-title-background;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,.3));
|
|
}
|
|
|
|
.km-ios7 .km-filter-wrap > input
|
|
{
|
|
text-shadow: 0 0 0 @ios7-overlay-background;
|
|
}
|
|
|
|
.km-ios7 .km-filter-wrap:before,
|
|
.km-ios7 .km-filter-reset .km-clear
|
|
{
|
|
color: @ios7-overlay-background;
|
|
}
|
|
|
|
.km-ios7 label.km-required:after {
|
|
color: @ios7-second-active-background;
|
|
}
|
|
|
|
/* Scroller */
|
|
|
|
.km-ios7 .km-touch-scrollbar
|
|
{
|
|
background-color: #919191;
|
|
}
|
|
|
|
/* Shim */
|
|
|
|
.km-ios7 .km-shim,
|
|
.km-ios7 .km-popup-overlay
|
|
{
|
|
background: rgba(0,0,0,.4);
|
|
}
|
|
|
|
/* PopUp */
|
|
|
|
.km-ios7 .km-popup .k-item,
|
|
.km-ios7 .km-actionsheet > li > a,
|
|
.km-ios7 .k-overflow-container a.km-state-disabled,
|
|
.km-ios7 .k-overflow-container .km-state-disabled:active
|
|
{
|
|
background: @ios7-actionsheet-background;
|
|
border-bottom-color: @ios7-second-border-color;
|
|
}
|
|
|
|
.km-ios7 .km-popup
|
|
{
|
|
background: @ios7-overlay-background;
|
|
}
|
|
|
|
.km-ios7 .km-popup.km-pane,
|
|
.km-tablet .km-ios7 .km-actionsheet-wrapper
|
|
{
|
|
background-color: @ios7-actionsheet-background;
|
|
}
|
|
|
|
/* PopOver */
|
|
|
|
.km-ios7 .km-popup.km-pane
|
|
{
|
|
.box-shadow(0 0 0 1px @ios7-second-border-color);
|
|
}
|
|
|
|
.km-ios7 .k-split-wrapper .km-popup,
|
|
.km-ios7 .k-overflow-wrapper .km-popup
|
|
{
|
|
.box-shadow(0 0 5px @ios7-second-border-color);
|
|
}
|
|
|
|
.km-ios7 .km-popup-arrow:after
|
|
{
|
|
border-color: @ios7-actionsheet-background transparent;
|
|
}
|
|
|
|
.km-ios7 .km-left .km-popup-arrow:after,
|
|
.km-ios7 .km-right .km-popup-arrow:after
|
|
{
|
|
border-color: transparent @ios7-actionsheet-background;
|
|
}
|
|
|
|
/* Loader */
|
|
|
|
.km-ios7.km-pane > .km-loader,
|
|
.km-ios7 .km-pane > .km-loader
|
|
{
|
|
background: rgba(0,0,0,.1);
|
|
}
|
|
|
|
.km-ios7 .k-split-wrapper .km-actionsheet-wrapper,
|
|
.km-ios7 .k-overflow-wrapper .km-actionsheet-wrapper
|
|
{
|
|
background: rgba(0,0,0,.2);
|
|
}
|
|
|
|
.km-ios7 .km-loader h1,
|
|
.km-ios7 .km-scroller-refresh .km-template
|
|
{
|
|
color: #222;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
|
}
|
|
|
|
.km-ios7 .km-scroller-pull .km-template
|
|
{
|
|
color: @ios7-dark-background;
|
|
}
|
|
|
|
/* Forms */
|
|
|
|
.km-ios7 .km-list select:not([multiple]) option
|
|
{
|
|
color: #333;
|
|
}
|
|
|
|
/* Collapsible */
|
|
|
|
.km-ios7 .km-collapsible-header,
|
|
.km-ios7 .km-collapsible-content
|
|
{
|
|
border-color: @ios7-second-border-color;
|
|
color: #000;
|
|
}
|
|
|
|
.km-ios7 .km-collapsible-header .km-icon
|
|
{
|
|
color: @ios7-second-color;
|
|
}
|
|
|
|
.km-ios7 .km-legend-button,
|
|
.km-ios7 .km-drawer a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.km-ios7 .km-list .km-label-above,
|
|
.km-ios7 .km-checkbox-label,
|
|
.km-ios7 .km-radio-label {
|
|
color: darken(@ios7-second-color, 17%);
|
|
}
|
|
|
|
.km-ios7 .km-list fieldset .km-inline-field {
|
|
border-color: @ios7-second-border-color;
|
|
}
|
|
|
|
.km-ios7 .km-group-title,
|
|
.km-ios7 .km-list fieldset legend,
|
|
.km-ios7 .km-shim li.km-actionsheet-title {
|
|
background: @ios7-list-title-background;
|
|
border-color: @ios7-second-border-color;
|
|
color: @ios7-active-background;
|
|
}
|
|
|
|
/* Active States */
|
|
|
|
.km-ios7 .km-badge,
|
|
.km-ios7 .k-slider .k-draghandle,
|
|
.km-ios7 .k-slider .k-draghandle:hover,
|
|
.km-ios7 .km-buttongroup .km-state-active .km-icon,
|
|
.km-ios7 .km-state-active .km-text,
|
|
.km-ios7 .km-state-active.km-detail:after,
|
|
.km-ios7 .km-state-active.km-detail .km-icon:after,
|
|
.km-ios7 .km-switch-handle.km-state-active
|
|
{
|
|
color: @ios7-active-color;
|
|
}
|
|
|
|
.km-ios7 .km-tabstrip .km-state-active .km-text,
|
|
.km-ios7 .k-toolbar .km-state-active .km-text,
|
|
.km-ios7 .k-overflow-container .km-state-active .km-text
|
|
{
|
|
color: inherit;
|
|
}
|
|
|
|
.km-ios7 .k-slider .k-draghandle,
|
|
.km-ios7 .k-slider .k-draghandle:hover
|
|
{
|
|
background: @ios7-active-color;
|
|
}
|
|
|
|
.km-ios7 span.km-switch
|
|
{
|
|
color: @ios7-switch-color;
|
|
}
|
|
|
|
.km-ios7 .km-badge
|
|
{
|
|
background: @ios7-second-active-background;
|
|
}
|
|
|
|
.km-ios7 .km-popup .k-state-hover,
|
|
.km-ios7 .km-popup .k-state-focused,
|
|
.km-ios7 .km-popup .k-state-selected,
|
|
.km-ios7 .km-actionsheet > li > a:active,
|
|
.km-ios7 li.km-state-active .km-listview-link,
|
|
.km-ios7 li.km-state-active .km-listview-label
|
|
{
|
|
background: @ios7-list-select-background;
|
|
}
|
|
|
|
.km-ios7 li.km-state-active .km-listview-link,
|
|
.km-ios7 li.km-state-active .km-listview-label
|
|
{
|
|
color: @ios7-main-color;
|
|
}
|
|
|
|
.km-ios7 .km-tabstrip .km-button:not(.km-state-active)
|
|
{
|
|
color: @ios7-tabstrip-color;
|
|
}
|
|
|
|
.km-ios7 .k-list,
|
|
.km-ios7 .k-slider,
|
|
.km-ios7 .km-widget,
|
|
.km-ios7 .km-checkbox-label:after
|
|
{
|
|
color: @ios7-active-background;
|
|
}
|
|
|
|
.km-ios7 .km-checkbox-label,
|
|
.km-ios7 .km-radio-label {
|
|
color: @ios7-main-color;
|
|
}
|
|
|
|
.km-ios7 .km-radio-label:before {
|
|
border-color: darken(@ios7-second-color, 17%);
|
|
}
|
|
|
|
.km-ios7 .km-radio-label:after {
|
|
background-color: @ios7-active-background;
|
|
}
|
|
|
|
/* Validation */
|
|
.km-ios7 .km-list > li label.km-invalid,
|
|
.km-ios7 .km-list fieldset .km-legend-button.km-invalid,
|
|
.km-ios7 .km-list > li label.km-invalid.km-required:after,
|
|
.km-ios7 .km-invalid-msg {
|
|
color: @warning;
|
|
} |