Change subnav alt pills

This commit is contained in:
Konstantinos Triantafyllou 2023-01-11 16:19:48 +02:00
parent 996b48573c
commit 24928e0c79
1 changed files with 7 additions and 25 deletions

View File

@ -18,16 +18,14 @@
@subnav-pill-item-active-border: transparent;
@subnav-pill-item-active-color: @global-inverse-color;
/* Pills aly*/
@subnav-pill-alt-padding: 4px;
@subnav-pill-alt-border-radius: 60px;
@subnav-pill-alt-background: @global-inverse-color;
@subnav-pill-alt-box-shadow: @global-large-box-shadow;
/* Pills alt*/
@subnav-pill-alt-item-padding-vertical: 10px;
@subnav-pill-alt-item-padding-horizontal: 20px;
@subnav-pill-alt-item-color: @global-meta-color;
@subnav-pill-alt-item-border-radius: 24px;
@subnav-pill-alt-item-color: @global-color;
@subnav-pill-alt-item-hover-color: @global-secondary-background;
@subnav-pill-alt-item-active-background: unset;
@subnav-pill-alt-item-active-font-weight: 600;
@subnav-pill-alt-item-active-background: @global-primary-background;
@subnav-pill-alt-item-active-background-gradient: @global-primary-gradient;
@subnav-pill-alt-item-active-color: @global-inverse-color;
@ -55,10 +53,6 @@
.hook-subnav-misc() {
.uk-subnav.uk-subnav-pill-alt {
background: @subnav-pill-alt-background;
border-radius: @subnav-pill-alt-border-radius;
box-shadow: @subnav-pill-alt-box-shadow;
padding: @subnav-pill-alt-padding;
& > :first-child {
padding-left: 0;
@ -67,28 +61,16 @@
& > * > :first-child {
padding: @subnav-pill-alt-item-padding-vertical @subnav-pill-alt-item-padding-horizontal;
color: @subnav-pill-alt-item-color;
border-radius: @subnav-pill-alt-border-radius;
border-radius: @subnav-pill-alt-item-border-radius;
}
& > :hover > a {
color: @subnav-pill-alt-item-hover-color;
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: @subnav-pill-alt-item-active-background;
background-image: @subnav-pill-alt-item-active-background-gradient;
opacity: 0.1;
border-radius: inherit;
}
}
& > .uk-active > a {
font-weight: @subnav-pill-alt-item-active-font-weight;
background-color: @subnav-pill-alt-item-active-background;
color: @subnav-pill-alt-item-active-color;
background-image: @subnav-pill-alt-item-active-background-gradient;