Your IP : 216.73.216.170
/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
//
// Component: Panel
//
// ========================================================================
// Variables
// ========================================================================
@panel-title-margin-bottom: @global-margin;
@panel-title-font-size: round(@global-font-size * 1.28); // 18px
@panel-title-line-height: round(@panel-title-font-size * 1.33); // 24px
@panel-title-color: @global-heading-color;
@panel-box-padding: 30px;
@panel-box-background: @global-background;
@panel-box-color: @global-color;
@panel-box-title-color: @global-heading-color;
@panel-box-badge-top: 15px;
@panel-box-badge-right: 0;
@panel-box-primary-background: rgba(255,255,255,0.1);
@panel-box-primary-color: @global-light-color;
@panel-box-primary-title-color: @global-light-color;
@panel-box-secondary-background: rgba(45,55,70,0.15);
@panel-box-secondary-color: @global-light-color;
@panel-box-secondary-title-color: @global-light-color;
@panel-header-title-padding: (@panel-box-padding / 2);
@panel-header-title-border: @global-border;
@panel-header-title-color: @global-heading-color;
@panel-space-padding: 40px;
@panel-divider-gutter: @global-grid-gutter;
@panel-divider-gutter-large: @global-grid-gutter-large;
@panel-divider-border: @global-border;
//
// New
//
@panel-box-badge-padding: 10px 12px;
@panel-box-badge-font-size: 12px;
@panel-box-box-shadow-size: @global-box-shadow-size;
@panel-box-box-shadow: @global-box-shadow;
@panel-box-primary-link-color: lighten(@global-link-color, 5%);
@panel-box-primary-link-hover-color: lighten(@global-link-hover-color, 5%);
@panel-box-primary-box-shadow-size: @global-box-shadow-size;
@panel-box-primary-box-shadow: @global-box-shadow;
@panel-box-primary-inner-box-shadow: rgba(255,255,255,0.15);
@panel-box-primary-top-box-shadow: rgba(255,255,255,0.12);
@panel-box-primary-nav-side-hover-color: @global-light-color;
@panel-box-primary-nav-side-hover-background: rgba(0,0,0,0.02);
@panel-box-primary-nav-side-active-color: @panel-box-primary-link-color;
@panel-box-primary-nav-side-item-border: rgba(0,0,0,0.1);
@panel-box-primary-nav-side-item-box-shadow: rgba(255,255,255,0.1);
@panel-box-primary-nav-side-nav-sub: rgba(0,0,0,0.03);
@panel-box-primary-text-shadow: @global-text-shadow;
@panel-box-primary-bg-image: url('@{global-image-path}/@{global-style}/panel-box-noise-bg.png');
@panel-box-primary-form-border: rgba(255,255,255,0.15);
@panel-box-primary-form-background: rgba(45,55,70,0.15);
@panel-box-primary-form-focus-border: rgba(255,255,255,0.25);
@panel-box-primary-form-box-shadow: rgba(0,0,0,0.1);
@panel-box-secondary-link-color: lighten(@global-link-color, 5%);
@panel-box-secondary-link-hover-color: lighten(@global-link-hover-color, 5%);
@panel-box-secondary-box-shadow-size: @global-box-shadow-size;
@panel-box-secondary-box-shadow: darken(@panel-box-primary-box-shadow, 10%);
@panel-box-secondary-inner-box-shadow: @panel-box-primary-inner-box-shadow;
@panel-box-secondary-top-box-shadow: @panel-box-primary-top-box-shadow;
@panel-box-secondary-nav-side-hover-color: @global-light-color;
@panel-box-secondary-nav-side-hover-background: @panel-box-primary-nav-side-hover-background;
@panel-box-secondary-nav-side-active-color: @panel-box-secondary-link-color;
@panel-box-secondary-nav-side-item-border: @panel-box-primary-nav-side-item-border;
@panel-box-secondary-nav-side-item-box-shadow: @panel-box-primary-nav-side-item-box-shadow;
@panel-box-secondary-nav-side-nav-sub: rgba(0,0,0,0.06);
@panel-box-secondary-text-shadow: @global-text-shadow;
@panel-box-secondary-bg-image: url('@{global-image-path}/@{global-style}/panel-box-noise-bg.png');
@panel-box-secondary-form-border: @panel-box-primary-form-border;
@panel-box-secondary-form-background: @panel-box-primary-form-background;
@panel-box-secondary-form-focus-border: @panel-box-primary-form-focus-border;
@panel-box-secondary-form-box-shadow: @panel-box-primary-form-box-shadow;
@panel-header-badge-top: (@panel-box-padding / 2);
@panel-header-badge-right: @panel-header-badge-top;
// Sub-object: `uk-panel-title`
// ========================================================================
.hook-panel-title() {}
// Sub-object: `uk-panel-badge`
// ========================================================================
.hook-panel-badge() {}
// Modifier: `uk-panel-box`
// ========================================================================
.hook-panel-box() {
box-shadow: @panel-box-box-shadow-size @panel-box-box-shadow;
/*
* Badge in Panel
*/
.uk-panel-badge {
padding: @panel-box-badge-padding;
font-size: @panel-box-badge-font-size;
}
//
// Nav side in panel
//
.uk-nav-side {
> li > a,
.uk-nav-header {
padding-left: @panel-box-padding;
padding-right: @panel-box-padding;
}
.uk-nav-divider { margin: 0 @panel-box-padding; }
ul.uk-nav-sub { padding-left: @panel-box-padding + 10px; }
}
}
//
// Sub-modifier: `uk-panel-box-primary`
//
.hook-panel-box-primary() {
background-image: @panel-box-primary-bg-image;
box-shadow: @panel-box-primary-box-shadow-size @panel-box-primary-box-shadow,
inset 0 0 1px @panel-box-primary-inner-box-shadow,
inset 0 1px 0 @panel-box-primary-top-box-shadow;
text-shadow: 0 1px 1px @panel-box-primary-text-shadow;
/* link color */
> a:not([class]),
> :not([class*='uk-nav']) a:not([class]) { color: @panel-box-primary-link-color; }
> a:not([class]):hover,
> :not([class*='uk-nav']) a:not([class]):hover { color: @panel-box-primary-link-hover-color; }
.uk-button {
box-shadow: 0 1px 0 rgba(0,0,0,0.1);
&:active,
&.uk-active { box-shadow: inset 0 2px 2px rgba(0,0,0,0.1); };
}
/*
* Nav side
*/
.uk-nav-side > li > a {
border-color: @panel-box-primary-nav-side-item-border;
box-shadow: inset 0 1px 0 @panel-box-primary-nav-side-item-box-shadow;
color: @global-light-color;
}
.uk-nav-side > li:first-child > a,
.uk-nav-divider + li > a {
border: none;
box-shadow: none;
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-side .uk-nav-header { color: @global-light-color; }
/*
* Sub-object: `uk-nav-divider`
*/
.uk-nav-divider {
border-color: @panel-box-primary-nav-side-item-border!important;
box-shadow: 0 1px 0 @panel-box-primary-nav-side-item-box-shadow;
}
/*
* Nested items
*/
.uk-nav-side ul.uk-nav-sub {
border-color: @panel-box-primary-nav-side-item-border;
background: @panel-box-primary-nav-side-nav-sub;
}
.uk-nav-side ul a { color: @global-light-color; }
/* Hover */
.uk-nav-side > li > a:hover,
.uk-nav-side > li > a:focus {
background: @panel-box-primary-nav-side-hover-background;
color: @panel-box-primary-nav-side-hover-color;
}
/* Active */
.uk-nav-side > li.uk-active > a { color: @panel-box-primary-nav-side-active-color }
/*
* Horizontal rule
*/
hr {
height: 1px;
border-color: @panel-box-primary-nav-side-item-border;
box-shadow: inset 0 1px 0 @panel-box-primary-nav-side-item-box-shadow;
}
/*
* Headings
*/
h1, h2, h3, h4, h5, h6 {
color: @panel-box-primary-color;
text-shadow: 0 1px 1px @panel-box-primary-text-shadow;
}
/*
* Form
*/
.uk-form select,
.uk-form textarea,
.uk-form input:not([type]),
.uk-form input[type="text"],
.uk-form input[type="password"],
.uk-form input[type="email"] {
border-color: @panel-box-primary-form-border;
background: @panel-box-primary-form-background;
box-shadow: inset 0 1px 1px @panel-box-primary-form-box-shadow;
color: @panel-box-primary-color;
/* Focus state */
&:focus {
border-color: @panel-box-primary-form-focus-border;
background: @panel-box-primary-form-background;
color: @panel-box-primary-color;
}
}
/* Placeholder */
.uk-form :-ms-input-placeholder { color: @panel-box-primary-color !important; }
.uk-form ::-moz-placeholder { color: @panel-box-primary-color; }
.uk-form ::-webkit-input-placeholder { color: @panel-box-primary-color; }
}
//
// Sub-modifier: `uk-panel-box-secondary`
//
.hook-panel-box-secondary() {
background-image: @panel-box-secondary-bg-image;
box-shadow: @panel-box-secondary-box-shadow-size @panel-box-secondary-box-shadow,
inset 0 0 1px @panel-box-secondary-inner-box-shadow,
inset 0 1px 0 @panel-box-secondary-top-box-shadow;
text-shadow: 0 1px 1px @panel-box-secondary-text-shadow;
/* link color */
> a:not([class]),
> :not([class*='uk-nav']) a:not([class]) { color: @panel-box-secondary-link-color; }
> a:not([class]):hover,
> :not([class*='uk-nav']) a:not([class]):hover { color: @panel-box-secondary-link-hover-color; }
.uk-button {
box-shadow: 0 1px 0 rgba(0,0,0,0.12);
&:active,
&.uk-active { box-shadow: inset 0 2px 2px rgba(0,0,0,0.2); };
}
/*
* Nav side
*/
.uk-nav-side > li > a {
border-color: @panel-box-secondary-nav-side-item-border;
box-shadow: inset 0 1px 0 @panel-box-secondary-nav-side-item-box-shadow;
color: @global-light-color;
}
.uk-nav-side > li:first-child > a,
.uk-nav-divider + li > a {
border: none;
box-shadow: none;
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-side .uk-nav-header { color: @global-light-color; }
/*
* Sub-object: `uk-nav-divider`
*/
.uk-nav-divider {
border-color: @panel-box-secondary-nav-side-item-border!important;
box-shadow: 0 1px 0 @panel-box-secondary-nav-side-item-box-shadow;
}
/*
* Nested items
*/
.uk-nav-side ul.uk-nav-sub {
border-color: @panel-box-secondary-nav-side-item-border;
background: @panel-box-secondary-nav-side-nav-sub;
}
.uk-nav-side ul a { color: @global-light-color; }
/* Hover */
.uk-nav-side > li > a:hover,
.uk-nav-side > li > a:focus {
background: @panel-box-secondary-nav-side-hover-background;
color: @panel-box-secondary-nav-side-hover-color;
}
/* Active */
.uk-nav-side > li.uk-active > a { color: @panel-box-secondary-nav-side-active-color }
/*
* Horizontal rule
*/
hr {
height: 1px;
border-color: @panel-box-primary-nav-side-item-border;
box-shadow: inset 0 1px 0 @panel-box-primary-nav-side-item-box-shadow;
}
/*
* Headings
*/
h1, h2, h3, h4, h5, h6 {
color: @panel-box-primary-color;
text-shadow: 0 1px 1px @panel-box-primary-text-shadow;
}
/*
* Form
*/
.uk-form select,
.uk-form textarea,
.uk-form input:not([type]),
.uk-form input[type="text"],
.uk-form input[type="password"],
.uk-form input[type="email"] {
border-color: @panel-box-secondary-form-border;
background: @panel-box-secondary-form-background;
box-shadow: inset 0 1px 1px @panel-box-secondary-form-box-shadow;
color: @panel-box-primary-color;
/* Focus state */
&:focus {
border-color: @panel-box-secondary-form-focus-border;
background: @panel-box-secondary-form-background;
color: @panel-box-primary-color;
}
}
/* Placeholder */
.uk-form :-ms-input-placeholder { color: @panel-box-secondary-color !important; }
.uk-form ::-moz-placeholder { color: @panel-box-secondary-color; }
.uk-form ::-webkit-input-placeholder { color: @panel-box-secondary-color; }
}
// Modifier: `uk-panel-header`
// ========================================================================
.hook-panel-header() {
margin: @panel-header-title-padding -@panel-box-padding;
margin-top: -(@panel-box-padding / 2);
padding-right: @panel-box-padding;
padding-left: @panel-box-padding;
}
// Miscellaneous
// ========================================================================
.hook-panel-misc() {
/*
* Panel header
*/
.uk-panel-header {
padding: @panel-box-padding;
background: @panel-box-background;
box-shadow: @panel-box-box-shadow-size @panel-box-box-shadow;
/*
* Badge in Panel
*/
.uk-panel-badge {
top: @panel-header-badge-top;
right: @panel-header-badge-right;
}
}
/*
* Panel teaser
*/
.uk-panel-teaser:before {
z-index: 10;
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
border-bottom: 1px solid @panel-box-primary-top-box-shadow;
}
}