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

less/_import.less

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

less/button.less

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

less/navbar.less

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

less/placeholder.less

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