| Current Path : /home/jlgagfroyt/www/AAOLD/templates/yoo_peak/less/uikit/ |
| Current File : /home/jlgagfroyt/www/AAOLD/templates/yoo_peak/less/uikit/panel.less |
// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
//
// Component: Panel
//
// ========================================================================
// Variables
// ========================================================================
@panel-title-color: @global-secondary-color;
@panel-box-padding: 30px;
@panel-box-background: @global-background;
@panel-box-color: @global-color;
@panel-box-title-color: @global-secondary-color;
@panel-box-primary-background: #3f3f3f;
@panel-box-primary-title-color: @global-contrast-color;
@panel-box-primary-color: @global-color;
@panel-box-secondary-background: #f7f8f8;
@panel-box-secondary-color: @global-color;
@panel-box-secondary-title-color: @global-secondary-color;
@panel-header-title-border-width: 4px;
@panel-header-title-border: @global-border;
@panel-header-title-color: @global-secondary-color;
@panel-divider-border: @global-border;
@panel-divider-border-width: 4px;
@panel-box-teaser-margin: -(@global-margin-large + @global-border-width);
@panel-box-teaser-margin-bottom: @global-margin-large;
@panel-hover-hover-background: transparent;
//
// New
//
@panel-box-border-width: @global-border-width;
@panel-box-border: @global-border;
@panel-box-primary-border: @global-transparent-background;
@panel-box-primary-link: @global-link-color;
@panel-box-primary-link-hover: @global-contrast-color;
@panel-box-primary-button-color: @global-muted-color;
@panel-box-primary-button-border: #535353;
@panel-box-primary-button-hover-color: @global-contrast-color;
@panel-box-primary-button-active-color: lighten(@global-color, 10%);
@panel-box-primary-button-primary-color: @global-contrast-color;
@panel-box-primary-button-primary-border: @global-contrast-color;
@panel-box-primary-button-primary-hover-color: #3f3f3f;
@panel-box-primary-button-primary-active-color: lighten(@panel-box-primary-button-primary-hover-color, 20%);
@panel-box-secondary-border: darken(@panel-box-secondary-background, 2%);
@panel-box-secondary-button-border: #e6e8e8;
@panel-box-primary-badge-color: @global-contrast-color;
@panel-box-primary-badge-border: @panel-box-primary-badge-color;
// Sub-object: `uk-panel-title`
// ========================================================================
.hook-panel-title() {}
// Sub-object: `uk-panel-badge`
// ========================================================================
.hook-panel-badge() {}
// Modifier: `uk-panel-box`
// ========================================================================
.hook-panel-box() {
border: @panel-box-border-width solid @panel-box-border;
border-radius: @global-border-radius;
}
//
// Sub-modifier: `uk-panel-box-primary`
//
.hook-panel-box-primary() {
border-color: @panel-box-primary-border;
> a { color: @panel-box-primary-link; }
> a:hover { color: @panel-box-primary-link-hover; }
.uk-badge {
color: @panel-box-primary-badge-color;
border-bottom-color: @panel-box-primary-badge-border;
}
.uk-button:not(.uk-button-primary):not(.uk-button-success):not(.uk-button-danger) {
border-color: @panel-box-primary-button-border;
color: @panel-box-primary-button-color;
box-shadow: inset 0 0 0 0 @panel-box-primary-button-border;
&:hover,
&:focus {
background: @panel-box-primary-button-border;
color: @panel-box-primary-button-hover-color;
box-shadow: inset 0 0 0 20px @panel-box-primary-button-border;
}
&:active,
&.uk-active {
background: @panel-box-primary-button-border;
color: @panel-box-primary-button-active-color;
}
}
.uk-button-primary {
border-color: @panel-box-primary-button-primary-border;
color: @panel-box-primary-button-primary-color;
box-shadow: inset 0 0 0 0 @panel-box-primary-button-primary-border;
&:hover,
&:focus {
background: @panel-box-primary-button-primary-border;
color: @panel-box-primary-button-primary-hover-color;
box-shadow: inset 0 0 0 20px @panel-box-primary-button-primary-border;
}
&:active,
&.uk-active {
background: @panel-box-primary-button-primary-border;
color: @panel-box-primary-button-primary-active-color;
}
}
}
//
// Sub-modifier: `uk-panel-box-secondary`
//
.hook-panel-box-secondary() {
border-color: @panel-box-secondary-border;
.uk-button:not(.uk-button-primary):not(.uk-button-success):not(.uk-button-danger) {
border-color: @panel-box-secondary-button-border;
box-shadow: inset 0 0 0 0 @panel-box-secondary-button-border;
&:hover,
&:focus {
background: @panel-box-secondary-button-border;
box-shadow: inset 0 0 0 20px @panel-box-secondary-button-border;
}
&:active,
&.uk-active { background: @panel-box-secondary-button-border; }
}
}
// Modifier: `uk-panel-header`
// ========================================================================
.hook-panel-header() {}
/* Modifier: `uk-panel-hover`
========================================================================== */
.hook-panel-hover() {
border: @panel-box-border-width solid transparent;
border-radius: @global-border-radius;
}
.hook-panel-hover-hover() { border-color: @panel-box-border; }
// Miscellaneous
// ========================================================================
.hook-panel-misc() {
// Nav in panel
// ==========================================================================
.uk-panel-box .uk-nav { margin: 0; }
}