Your IP : 216.73.217.80
// 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 / 20px
@panel-title-line-height: round((@panel-title-font-size * 1.32)); // 24px / 26px
@panel-title-color: @global-color;
@panel-box-padding: @global-margin-large;
@panel-box-background: @global-background;
@panel-box-color: @global-color;
@panel-box-title-color: @global-color;
@panel-box-primary-background: @global-primary-background;
@panel-box-primary-color: @global-contrast-color;
@panel-box-primary-title-color: @global-contrast-color;
@panel-box-secondary-background: @global-secondary-background;
@panel-box-secondary-color: @global-contrast-color;
@panel-box-secondary-title-color: @global-contrast-color;
@panel-hover-padding: @global-margin;
@panel-hover-hover-color: @global-color;
@panel-hover-hover-background: @global-background;
@panel-hover-teaser-margin: -(@panel-hover-padding + 1);
@panel-header-title-border: @global-border;
@panel-header-title-color: @global-color;
@panel-divider-gutter: @global-grid-gutter;
@panel-divider-gutter-large: @global-grid-gutter-large;
@panel-divider-border: @global-border;
//
// New
//
@panel-box-border: @global-border;
@panel-box-link-color: @global-link-color;
@panel-box-link-hover-color: @global-link-hover-color;
@panel-box-button-border: @global-color;
@panel-box-button-color: @global-color;
@panel-box-button-hover-border: @global-color;
@panel-box-button-hover-color: @global-contrast-color;
@panel-box-primary-headline-color: @global-contrast-color;
@panel-box-primary-border: @panel-box-primary-background;
@panel-box-primary-link-color: darken(@global-link-color, 5%);
@panel-box-primary-link-hover-color: darken(@global-link-hover-color, 10%);
@panel-box-primary-button-border: @global-contrast-color;
@panel-box-primary-button-color: @global-contrast-color;
@panel-box-primary-button-hover-border: @global-contrast-color;
@panel-box-primary-button-hover-color: @panel-box-primary-background;
@panel-box-secondary-headline-color: @global-contrast-color;
@panel-box-secondary-border: @panel-box-secondary-background;
@panel-box-secondary-link-color: @global-dark-background;
@panel-box-secondary-link-hover-color: lighten(@global-dark-background, 10%);
@panel-box-secondary-button-border: @global-contrast-color;
@panel-box-secondary-button-color: @global-contrast-color;
@panel-box-secondary-button-hover-border: @global-contrast-color;
@panel-box-secondary-button-hover-color: @panel-box-secondary-background;
@panel-box-tertiary-title-color: @global-contrast-color;
@panel-box-tertiary-color: @global-contrast-color;
@panel-box-tertiary-headline-color: @global-contrast-color;
@panel-box-tertiary-border: @panel-box-tertiary-background;
@panel-box-tertiary-background: @global-tertiary-background;
@panel-box-tertiary-link-color: @global-dark-background;
@panel-box-tertiary-link-hover-color: lighten(@global-dark-background, 10%);
@panel-box-tertiary-button-border: @global-contrast-color;
@panel-box-tertiary-button-color: @global-contrast-color;
@panel-box-tertiary-button-hover-border: @global-contrast-color;
@panel-box-tertiary-button-hover-color: @panel-box-tertiary-background;
@panel-hover-border: @global-border;
// Sub-object: `uk-panel-title`
// ========================================================================
.hook-panel-title() {}
// Sub-object: `uk-panel-badge`
// ========================================================================
.hook-panel-badge() {}
// Modifier: `uk-panel-box`
// ========================================================================
.hook-panel-box() {
border: 1px solid @panel-box-border;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
a {
color: @panel-box-link-color;
&:hover { color: @panel-box-link-hover-color; }
}
.uk-button,
.uk-button-primary {
border-color: @panel-box-button-border;
color: @panel-box-button-color;
&:hover {
border-color: @panel-box-button-hover-border;
color: @panel-box-button-hover-color;
box-shadow: inset 0 0 10px 30px @panel-box-button-hover-border;
}
}
}
.hook-panel-box-hover() {}
//
// Sub-modifier: `uk-panel-box-primary`
//
.hook-panel-box-primary() {
border-color: @panel-box-primary-border;
a {
color: @panel-box-primary-link-color;
&:hover { color: @panel-box-primary-link-hover-color; }
}
.uk-button,
.uk-button-primary {
border-color: @panel-box-primary-button-border;
color: @panel-box-primary-button-color;
&:hover {
border-color: @panel-box-primary-button-hover-border;
color: @panel-box-primary-button-hover-color;
box-shadow: inset 0 0 10px 30px @panel-box-primary-button-hover-border;
}
}
h1,h2,h3,h4,h5,h5 { color: @panel-box-primary-headline-color; }
}
.hook-panel-box-primary-hover() {}
//
// Sub-modifier: `uk-panel-box-secondary`
//
.hook-panel-box-secondary() {
border-color: @panel-box-secondary-border;
a {
color: @panel-box-secondary-link-color;
&:hover { color: @panel-box-secondary-link-hover-color; }
}
.uk-button,
.uk-button-primary {
border-color: @panel-box-secondary-button-border;
color: @panel-box-secondary-button-color;
&:hover {
border-color: @panel-box-secondary-button-hover-border;
color: @panel-box-secondary-button-hover-color;
box-shadow: inset 0 0 10px 30px @panel-box-secondary-button-hover-border;
}
}
h1,h2,h3,h4,h5,h5 { color: @panel-box-secondary-headline-color; }
}
.hook-panel-box-secondary-hover() {}
// Modifier: `uk-panel-hover`
// ========================================================================
.hook-panel-hover() { border: 1px solid transparent; }
.hook-panel-hover-hover() { border-color: @panel-hover-border; }
// Modifier: `uk-panel-header`
// ========================================================================
.hook-panel-header() {}
// Miscellaneous
// ========================================================================
.hook-panel-misc() {
.uk-panel-box-tertiary:extend(.uk-panel-box) {
color: @panel-box-tertiary-color;
border-color: @panel-box-tertiary-border;
background: @panel-box-tertiary-background;
.uk-panel-title { color: @panel-box-tertiary-title-color; }
a {
color: @panel-box-tertiary-link-color;
&:hover { color: @panel-box-tertiary-link-hover-color; }
}
.uk-button,
.uk-button-primary {
border-color: @panel-box-tertiary-button-border;
color: @panel-box-tertiary-button-color;
&:hover {
border-color: @panel-box-tertiary-button-hover-border;
color: @panel-box-tertiary-button-hover-color;
box-shadow: inset 0 0 10px 30px @panel-box-tertiary-button-hover-border;
}
}
h1,h2,h3,h4,h5,h5 { color: @panel-box-tertiary-headline-color; }
}
}