85 lines
2.7 KiB
Plaintext
85 lines
2.7 KiB
Plaintext
@subnav-item-font-size: @global-small-font-size;
|
|
@subnav-item-line-height: 17px;
|
|
@subnav-item-font-weight: 400;
|
|
|
|
/* Pills */
|
|
@subnav-pill-item-padding-vertical: 10px;
|
|
@subnav-pill-item-padding-horizontal: 20px;
|
|
@subnav-pill-item-border-radius: 60px;
|
|
@subnav-pill-item-background: transparent;
|
|
@subnav-pill-item-color: @global-primary-background;
|
|
@subnav-pill-item-border: @global-muted-background;
|
|
@subnav-pill-item-border-width: @global-border-width;
|
|
@subnav-pill-item-hover-background: transparent;
|
|
@subnav-pill-item-hover-color: @primary-light-color;
|
|
@subnav-pill-item-hover-border: @primary-light-color;
|
|
@subnav-pill-item-active-background: @global-primary-background;
|
|
@subnav-pill-item-active-background-gradient: @global-primary-gradient;
|
|
@subnav-pill-item-active-border: transparent;
|
|
@subnav-pill-item-active-color: @global-inverse-color;
|
|
|
|
/* Pills alt*/
|
|
@subnav-pill-alt-item-padding-vertical: 10px;
|
|
@subnav-pill-alt-item-padding-horizontal: 20px;
|
|
@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-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;
|
|
|
|
|
|
.hook-subnav-item() {
|
|
font-size: @subnav-item-font-size;
|
|
font-weight: @subnav-item-font-weight;
|
|
line-height: @subnav-item-line-height;
|
|
}
|
|
|
|
.hook-subnav-pill-item() {
|
|
border: @subnav-pill-item-border-width solid @subnav-pill-item-border;
|
|
border-radius: @subnav-pill-item-border-radius;
|
|
background-origin: border-box;
|
|
}
|
|
|
|
.hook-subnav-pill-item-hover() {
|
|
border-color: @subnav-pill-item-hover-border;
|
|
}
|
|
|
|
.hook-subnav-pill-item-active() {
|
|
border-color: @subnav-pill-item-active-border;
|
|
background-image: @subnav-pill-item-active-background-gradient;
|
|
}
|
|
|
|
.hook-subnav-misc() {
|
|
.uk-subnav.uk-subnav-pill-alt {
|
|
|
|
& > * > :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-item-border-radius;
|
|
}
|
|
|
|
& > :hover > a {
|
|
color: @subnav-pill-alt-item-hover-color;
|
|
position: relative;
|
|
}
|
|
|
|
& > .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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Inverse */
|
|
@inverse-subnav-pill-alt-box-shadow: @inverse-global-large-box-shadow;
|
|
|
|
.hook-inverse-misc() {
|
|
.uk-subnav.uk-subnav-pill-alt {
|
|
box-shadow: @inverse-subnav-pill-alt-box-shadow;
|
|
}
|
|
}
|