2023-11-15 16:40:20 +01:00
|
|
|
@banner-background: @ciel-color;
|
|
|
|
@banner-background-gradient: none;
|
2023-11-15 09:36:56 +01:00
|
|
|
@banner-mode: dark;
|
|
|
|
|
|
|
|
@banner-footer-background: transparent;
|
|
|
|
|
|
|
|
@banner-tab-gutter: 60px;
|
|
|
|
@banner-tab-margin-bottom: @global-small-margin;
|
|
|
|
@banner-tab-divider: @global-border-width solid @global-border;
|
|
|
|
@banner-tab-divider-height: @global-line-height;
|
|
|
|
@banner-tab-item-hover-color: @global-secondary-background;
|
|
|
|
@banner-tab-item-active-color: @global-secondary-background;
|
|
|
|
@banner-tab-item-active-indicator: @global-background;
|
|
|
|
|
|
|
|
.uk-banner:extend(.uk-section) {
|
|
|
|
background: @banner-background;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
& .uk-banner-footer {
|
|
|
|
background: @banner-footer-background;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
|
|
|
|
& ul.uk-banner-tab:extend(.uk-flex) {
|
|
|
|
list-style: none;
|
|
|
|
margin-bottom: @banner-tab-margin-bottom;
|
|
|
|
|
|
|
|
& > li {
|
|
|
|
&:not(:first-child) {
|
|
|
|
margin-left: @banner-tab-gutter;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
left: -1 * (@banner-tab-gutter/2);
|
|
|
|
transform: translateX(-100%);
|
|
|
|
border-left: @banner-tab-divider;
|
|
|
|
height: @banner-tab-divider-height;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
text-transform: uppercase;
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover a {
|
|
|
|
color:@banner-tab-item-hover-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.uk-active a {
|
|
|
|
color: @banner-tab-item-active-color;
|
|
|
|
font-weight: @text-bold-weight;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
bottom: -@banner-tab-margin-bottom;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, 50%);
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
|
|
|
border-left: 2*@banner-tab-margin-bottom solid transparent;
|
|
|
|
border-right: 2*@banner-tab-margin-bottom solid transparent;
|
|
|
|
border-bottom: @banner-tab-margin-bottom solid @banner-tab-item-active-indicator;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.uk-banner:extend(.uk-light all) when (@banner-mode = light) {}
|