Change menu style. Fix buttons font weight to 600. Change uk-text-bold to 600

This commit is contained in:
Konstantinos Triantafyllou 2022-08-03 20:45:44 +03:00
parent ff0dadc5dd
commit 27fc0b10af
3 changed files with 53 additions and 17 deletions

View File

@ -1,7 +1,7 @@
@button-font-size: @global-small-font-size;
@button-small-font-size: @global-xsmall-font-size;
@button-large-font-size: @global-font-size;
@button-font-weight: 700;
@button-font-weight: 600;
@button-border-width: @global-border-width;
@button-text-transform: uppercase;
@button-border-radius: 500px;

View File

@ -7,12 +7,10 @@
@navbar-nav-item-font-weight: 600;
@navbar-nav-item-height: @global-header-height;
@navbar-nav-item-color: @global-color;
@navbar-nav-item-hover-color: @global-secondary-background;
@navbar-nav-item-hover-text-decoration: none;
@navbar-nav-item-active-color: @global-primary-background;
@navbar-nav-item-active-text-decoration: none;
@navbar-nav-item-before-background: @global-secondary-background;
@navbar-nav-item-hover-color: @navbar-nav-item-before-background;
@navbar-nav-item-active-color: @navbar-nav-item-before-background;
@navbar-nav-item-onclick-color: @navbar-nav-item-active-color;
@navbar-nav-item-onclick-text-decoration: @navbar-nav-item-active-text-decoration;
@navbar-item-color: @navbar-nav-item-color;
@ -67,19 +65,48 @@
/* Navbar items */
.hook-navbar-nav-item() {
position: relative;
z-index: 1;
font-weight: @navbar-nav-item-font-weight;
&::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
height: 2px;
transition: .35s ease-in-out;
transition-property: all;
left: 50%;
right: 50%;
opacity: 0;
background: @navbar-nav-item-before-background;
}
}
.hook-navbar-nav-item-hover() {
text-decoration: @navbar-nav-item-hover-text-decoration;
&::before {
left: 10px;
right: 10px;
opacity: 1;
}
}
.hook-navbar-nav-item-onclick() {
text-decoration: @navbar-nav-item-onclick-text-decoration;
&::before {
left: 10px;
right: 10px;
opacity: 1;
}
}
.hook-navbar-nav-item-active() {
text-decoration: @navbar-nav-item-active-text-decoration;
&::before {
left: 10px;
right: 10px;
opacity: 1;
}
}
@ -116,19 +143,21 @@
@inverse-navbar-background: @primary-color;
@inverse-navbar-background-image: @global-primary-gradient;
@inverse-navbar-nav-item-color: @global-muted-background;
@inverse-navbar-nav-item-hover-color: @global-inverse-color;
@inverse-navbar-nav-item-onclick-color: @global-inverse-color;
@inverse-navbar-nav-item-active-color: @global-inverse-color;
@inverse-navbar-nav-item-active-text-decoration: underline;
@inverse-navbar-nav-item-before-background: @global-inverse-color;
@inverse-navbar-nav-item-hover-color: @inverse-navbar-nav-item-before-background;
@inverse-navbar-nav-item-onclick-color: @inverse-navbar-nav-item-before-background;
@inverse-navbar-nav-item-active-color: @inverse-navbar-nav-item-before-background;
@inverse-navbar-toggle-color: @global-inverse-color;
.hook-inverse-navbar-nav-item() {
&::before {
background: @inverse-navbar-nav-item-before-background;
}
}
.hook-inverse() {
.uk-navbar-container:not(.uk-navbar-transparent) {
background-image: @inverse-navbar-background-image;
}
}
.hook-inverse-navbar-nav-item-active {
text-decoration: @inverse-navbar-nav-item-active-text-decoration;
}

View File

@ -15,11 +15,18 @@
/* Light grey text*/
@text-light-grey: @light-grey-color;
/* Bold */
@text-bold-weight: 600;
.hook-text-background() {
background-image: @text-background-gradient;
}
.hook-text-misc() {
.uk-text-bold {
font-weight: @text-bold-weight;
}
.uk-text-xsmall {
font-size: @text-xsmall-font-size;
line-height: @text-xsmall-line-height;