[develop | DONE]: 1. Add placeholder.less. 2. Buttons: Active status by default like hover. 3. Add variable for logo height.

This commit is contained in:
Konstantinos Triantafyllou 2023-11-14 16:07:20 +02:00
parent 5e8c1addb1
commit 928dfa11bd
4 changed files with 28 additions and 20 deletions

1
less/_import.less vendored
View File

@ -27,6 +27,7 @@
@import "close"; @import "close";
@import "totop"; @import "totop";
@import "alert"; @import "alert";
@import "placeholder";
@import "badge"; @import "badge";
@import "label"; @import "label";
@import "search"; @import "search";

View File

@ -15,10 +15,10 @@
@button-default-hover-color: @global-secondary-background; @button-default-hover-color: @global-secondary-background;
@button-default-hover-box-shadow: @global-small-box-shadow; @button-default-hover-box-shadow: @global-small-box-shadow;
@button-default-hover-border: transparent; @button-default-hover-border: transparent;
@button-default-active-background: @global-background; @button-default-active-background: @button-default-hover-background;
@button-default-active-color: @global-secondary-background; @button-default-active-color: @button-default-hover-color;
@button-default-active-box-shadow: @global-small-box-shadow; @button-default-active-box-shadow: @button-default-hover-box-shadow;
@button-default-active-border: transparent; @button-default-active-border: @button-default-hover-border;
/* Primary */ /* Primary */
@button-primary-background: @global-primary-background; @button-primary-background: @global-primary-background;
@ -31,11 +31,11 @@
@button-primary-hover-color: @global-inverse-color; @button-primary-hover-color: @global-inverse-color;
@button-primary-hover-box-shadow: @global-small-box-shadow; @button-primary-hover-box-shadow: @global-small-box-shadow;
@button-primary-hover-border: transparent; @button-primary-hover-border: transparent;
@button-primary-active-background: @global-secondary-background; @button-primary-active-background: @button-primary-hover-background;
@button-primary-active-background-gradient: none; @button-primary-active-background-gradient: @button-primary-hover-background-gradient;
@button-primary-active-color: @global-inverse-color; @button-primary-active-color: @button-primary-hover-color;
@button-primary-active-box-shadow: @global-small-box-shadow; @button-primary-active-box-shadow: @button-primary-hover-box-shadow;
@button-primary-active-border: transparent; @button-primary-active-border: @button-primary-hover-border;
/* Secondary */ /* Secondary */
@button-secondary-background: @global-background; @button-secondary-background: @global-background;
@ -48,11 +48,11 @@
@button-secondary-hover-color: @global-inverse-color; @button-secondary-hover-color: @global-inverse-color;
@button-secondary-hover-box-shadow: @global-small-box-shadow; @button-secondary-hover-box-shadow: @global-small-box-shadow;
@button-secondary-hover-border: transparent; @button-secondary-hover-border: transparent;
@button-secondary-active-background: @global-primary-background; @button-secondary-active-background: @button-secondary-hover-background;
@button-secondary-active-background-gradient: @global-primary-gradient; @button-secondary-active-background-gradient: @button-secondary-hover-background-gradient;
@button-secondary-active-color: @global-inverse-color; @button-secondary-active-color: @button-secondary-hover-color;
@button-secondary-active-box-shadow: @global-small-box-shadow; @button-secondary-active-box-shadow: @button-secondary-hover-box-shadow;
@button-secondary-active-border: transparent; @button-secondary-active-border: @button-secondary-hover-border;
/* Danger */ /* Danger */
@button-danger-background: @global-danger-background; @button-danger-background: @global-danger-background;
@ -65,11 +65,11 @@
@button-danger-hover-color: @global-danger-background; @button-danger-hover-color: @global-danger-background;
@button-danger-hover-box-shadow: @global-small-box-shadow; @button-danger-hover-box-shadow: @global-small-box-shadow;
@button-danger-hover-border: @global-danger-background; @button-danger-hover-border: @global-danger-background;
@button-danger-active-background: @global-background; @button-danger-active-background: @button-danger-hover-background;
@button-danger-active-background-gradient: none; @button-danger-active-background-gradient: @button-danger-hover-background-gradient;
@button-danger-active-color: @global-danger-background; @button-danger-active-color: @button-danger-hover-color;
@button-danger-active-box-shadow: @global-small-box-shadow; @button-danger-active-box-shadow: @button-danger-hover-box-shadow;
@button-danger-active-border: @global-danger-background; @button-danger-active-border: @button-danger-hover-border;
/* Text */ /* Text */
@button-text-color: @global-primary-background; @button-text-color: @global-primary-background;

View File

@ -6,6 +6,7 @@
@navbar-nav-item-font-size: @global-small-font-size; @navbar-nav-item-font-size: @global-small-font-size;
@navbar-nav-item-font-weight: 600; @navbar-nav-item-font-weight: 600;
@navbar-nav-item-height: @global-header-height; @navbar-nav-item-height: @global-header-height;
@navbar-nav-logo-height: @navbar-nav-item-height - 20px;
@navbar-nav-logo-max-width: @width-xsmall-width; @navbar-nav-logo-max-width: @width-xsmall-width;
@navbar-nav-item-color: @global-color; @navbar-nav-item-color: @global-color;
@navbar-nav-item-before-background: @global-secondary-background; @navbar-nav-item-before-background: @global-secondary-background;
@ -57,7 +58,7 @@
& .uk-logo { & .uk-logo {
& > img { & > img {
height: @navbar-nav-item-height - 20px; height: @navbar-nav-logo-height;
object-fit: contain; object-fit: contain;
} }

6
less/placeholder.less Normal file
View File

@ -0,0 +1,6 @@
@placeholder-background: @global-inverse-color;
@placeholder-border: 2px dashed @global-border;
.hook-placeholder() {
border: @placeholder-border;
}