79 lines
2.1 KiB
Plaintext
79 lines
2.1 KiB
Plaintext
|
@banner-background: @irish-thin-color;
|
||
|
@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-color: @global-color;
|
||
|
@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 {
|
||
|
color: @banner-tab-item-color;
|
||
|
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) {}
|