.-.-.-.-.-

/* 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;

}

/var/www/iplanru/data/www/www.i-plan.ru/templates/yoo_everest/less/uikit/panel.less