From 49cf2a74e22fe0af392fa776ee10bcfe01d7f565 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Thu, 30 Nov 2023 23:01:14 +0200
Subject: [PATCH] [develop]: Improve variables for buttons and cards. Add
 uk-border-small-radius.

---
 less/button.less  | 54 ++++++++++++++++++++++++++---------------------
 less/card.less    | 31 +++++++++++++++------------
 less/utility.less |  6 ++++++
 3 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/less/button.less b/less/button.less
index 7001ff0..b7b8722 100644
--- a/less/button.less
+++ b/less/button.less
@@ -5,6 +5,9 @@
 @button-border-width: @global-border-width;
 @button-text-transform: uppercase;
 @button-border-radius: 500px;
+@button-shadow: @global-medium-box-shadow;
+@button-hover-shadow: @global-small-box-shadow;
+@button-active-shadow: @button-hover-shadow;
 
 /* Default */
 @button-default-background: @global-background;
@@ -12,63 +15,63 @@
 @button-default-box-shadow: @global-medium-box-shadow;
 @button-default-border: transparent;
 @button-default-hover-background: @global-background;
-@button-default-hover-color: @global-secondary-background;
-@button-default-hover-box-shadow: @global-small-box-shadow;
+@button-default-hover-color: @button-shadow;
+@button-default-hover-box-shadow: @button-hover-shadow;
 @button-default-hover-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-box-shadow: @button-active-shadow;
 @button-default-active-border: @button-default-hover-border;
 
 /* Primary */
 @button-primary-background: @global-primary-background;
 @button-primary-background-gradient: @global-primary-gradient;
 @button-primary-color: @global-inverse-color;
-@button-primary-box-shadow: @global-medium-box-shadow;
+@button-primary-box-shadow: @button-shadow;
 @button-primary-border: transparent;
 @button-primary-hover-background: @global-secondary-background;
 @button-primary-hover-background-gradient: none;
 @button-primary-hover-color: @global-inverse-color;
-@button-primary-hover-box-shadow: @global-small-box-shadow;
+@button-primary-hover-box-shadow: @button-hover-shadow;
 @button-primary-hover-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-box-shadow: @button-active-shadow;
 @button-primary-active-border: @button-primary-hover-border;
 
 /* Secondary */
 @button-secondary-background: @global-background;
 @button-secondary-background-gradient: none;
 @button-secondary-color: @global-primary-background;
-@button-secondary-box-shadow: @global-medium-box-shadow;
+@button-secondary-box-shadow: @button-shadow;
 @button-secondary-border: @global-primary-background;
 @button-secondary-hover-background: @global-primary-background;
 @button-secondary-hover-background-gradient: @global-primary-gradient;
 @button-secondary-hover-color: @global-inverse-color;
-@button-secondary-hover-box-shadow: @global-small-box-shadow;
+@button-secondary-hover-box-shadow: @button-hover-shadow;
 @button-secondary-hover-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-box-shadow: @button-active-shadow;
 @button-secondary-active-border: @button-secondary-hover-border;
 
 /* Danger */
 @button-danger-background: @global-danger-background;
 @button-danger-background-gradient: none;
 @button-danger-color: @global-inverse-color;
-@button-danger-box-shadow: @global-medium-box-shadow;
+@button-danger-box-shadow: @button-shadow;
 @button-danger-border: @global-danger-background;
 @button-danger-hover-background: @global-background;
 @button-danger-hover-background-gradient: none;
 @button-danger-hover-color: @global-danger-background;
-@button-danger-hover-box-shadow: @global-small-box-shadow;
+@button-danger-hover-box-shadow: @button-hover-shadow;
 @button-danger-hover-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-box-shadow: @button-active-shadow;
 @button-danger-active-border: @button-danger-hover-border;
 
 /* Text */
@@ -202,59 +205,62 @@
 }
 
 /* Inverse */
+@inverse-button-box-shadow: @inverse-global-medium-box-shadow;
+@inverse-button-hover-box-shadow: @inverse-global-small-box-shadow;
+@inverse-button-active-box-shadow: @inverse-button-hover-box-shadow;
 
 /* Default */
 @inverse-button-default-background: @global-background;
 @inverse-button-default-color: @global-color;
-@inverse-button-default-box-shadow: @inverse-global-medium-box-shadow;
+@inverse-button-default-box-shadow: @inverse-button-box-shadow;
 @inverse-button-default-border: transparent;
 @inverse-button-default-hover-background: @global-background;
 @inverse-button-default-hover-color: @global-secondary-background;
-@inverse-button-default-hover-box-shadow: @inverse-global-small-box-shadow;
+@inverse-button-default-hover-box-shadow: @inverse-button-hover-box-shadow;
 @inverse-button-default-hover-border: transparent;
 @inverse-button-default-active-background: @global-background;
 @inverse-button-default-active-color: @global-secondary-background;
-@inverse-button-default-active-box-shadow: @inverse-global-small-box-shadow;
+@inverse-button-default-active-box-shadow: @inverse-button-active-box-shadow;
 @inverse-button-default-active-border: transparent;
 
 /* Primary */
 @inverse-button-primary-background: @button-primary-background;
 @inverse-button-primary-background-gradient: @button-primary-background-gradient;
 @inverse-button-primary-color: @button-primary-color;
-@inverse-button-primary-box-shadow: @inverse-global-medium-box-shadow;;
+@inverse-button-primary-box-shadow: @inverse-button-box-shadow;
 @inverse-button-primary-border: @button-primary-border;
 @inverse-button-primary-hover-background: @button-primary-hover-background;
 @inverse-button-primary-hover-background-gradient: @button-primary-hover-background-gradient;
 @inverse-button-primary-hover-color: @button-primary-hover-color;
-@inverse-button-primary-hover-box-shadow: @inverse-global-small-box-shadow;
+@inverse-button-primary-hover-box-shadow: @inverse-button-hover-box-shadow;
 @inverse-button-primary-hover-border: @button-primary-hover-border;
 @inverse-button-primary-active-background: @button-primary-active-background;
 @inverse-button-primary-active-background-gradient: @button-primary-active-background-gradient;
 @inverse-button-primary-active-color: @button-primary-active-color;
-@inverse-button-primary-active-box-shadow: @inverse-global-small-box-shadow;
+@inverse-button-primary-active-box-shadow: @inverse-button-active-box-shadow;
 @inverse-button-primary-active-border: @button-primary-active-border;
 
 /* Secondary */
 @inverse-button-secondary-background: @global-background;
 @inverse-button-secondary-background-gradient: none;
 @inverse-button-secondary-color: @button-secondary-color;
-@inverse-button-secondary-box-shadow: @inverse-global-medium-box-shadow;
+@inverse-button-secondary-box-shadow: @inverse-button-box-shadow;
 @inverse-button-secondary-border: @button-secondary-border;
 @inverse-button-secondary-hover-background: @button-secondary-hover-background;
 @inverse-button-secondary-hover-background-gradient: @button-secondary-hover-background-gradient;
 @inverse-button-secondary-hover-color: @button-secondary-hover-color;
-@inverse-button-secondary-hover-box-shadow: @inverse-global-small-box-shadow;
+@inverse-button-secondary-hover-box-shadow: @inverse-button-hover-box-shadow;
 @inverse-button-secondary-hover-border: @button-secondary-hover-border;
 @inverse-button-secondary-active-background: @button-secondary-active-background;
 @inverse-button-secondary-active-background-gradient: @button-secondary-active-background-gradient;
 @inverse-button-secondary-active-color: @button-secondary-active-color;
-@inverse-button-secondary-active-box-shadow: @inverse-global-small-box-shadow;
+@inverse-button-secondary-active-box-shadow: @inverse-button-active-box-shadow;
 @inverse-button-secondary-active-border: transparent;
 
 /* Danger */
-@inverse-button-danger-box-shadow: @inverse-global-medium-box-shadow;
-@inverse-button-danger-hover-box-shadow: @inverse-global-small-box-shadow;
-@inverse-button-danger-active-box-shadow: @inverse-global-small-box-shadow;
+@inverse-button-danger-box-shadow: @inverse-button-box-shadow;
+@inverse-button-danger-hover-box-shadow: @button-secondary-hover-background;
+@inverse-button-danger-active-box-shadow: @inverse-button-active-box-shadow;
 
 /* Text */
 @inverse-button-text-color: @global-inverse-color;
diff --git a/less/card.less b/less/card.less
index d03ea1b..61acde3 100644
--- a/less/card.less
+++ b/less/card.less
@@ -1,16 +1,20 @@
-@card-background-hover: @ciel-color;
+@card-hover-background: @ciel-color;
+@card-box-shadow-m: @global-large-box-shadow;
+@card-hover-box-shadow: @global-small-box-shadow;
+
 
 @card-body-padding-horizontal: @global-small-gutter;
 @card-body-padding-vertical: @global-small-gutter;
 @card-border-radius: @global-border-radius;
 
 @card-default-background: @global-inverse-color;
-@card-default-box-shadow-m: @global-large-box-shadow;
+@card-default-box-shadow-m: @card-box-shadow-m;
 @card-default-border-width: @global-border-width;
 @card-default-border: @global-border;
 @card-default-border-m: none;
+@card-default-hover-border: transparent;
 @card-default-hover-background: @card-default-background;
-@card-default-hover-box-shadow: @global-small-box-shadow;
+@card-default-hover-box-shadow: @card-hover-box-shadow;
 @card-default-header-border-width: @global-border-width;
 @card-default-header-border: @global-border;
 @card-default-footer-border-width: @global-border-width;
@@ -18,17 +22,17 @@
 
 @card-primary-background: @global-primary-background;
 @card-primary-background-gradient: @global-primary-gradient;
-@card-primary-box-shadow-m: @global-large-box-shadow;
+@card-primary-box-shadow-m: @card-box-shadow-m;
 @card-primary-hover-background: @card-primary-background;
-@card-primary-hover-box-shadow: @global-small-box-shadow;
+@card-primary-hover-box-shadow: @card-hover-box-shadow;
 @card-primary-hover-background-gradient: @global-primary-gradient;
 
 @card-secondary-background: @global-secondary-background;
-@card-secondary-box-shadow-m: @global-large-box-shadow;
+@card-secondary-box-shadow-m: @card-box-shadow-m;
 @card-secondary-color: @global-color;
 @card-secondary-color-mode: light;
 @card-secondary-hover-background: @card-secondary-background;
-@card-secondary-hover-box-shadow: @global-small-box-shadow;
+@card-secondary-hover-box-shadow: @card-hover-box-shadow;
 
 @card-disabled-box-shadow: none;
 @card-disabled-border: @global-border;
@@ -49,10 +53,6 @@
       opacity: @card-disabled-opacity;
     }
   }
-
-  &:not(.uk-card-default, .uk-card-primary, .uk-card-secondary):hover {
-    background-color: @card-background-hover;
-  }
 }
 
 .hook-card-header() {
@@ -69,14 +69,19 @@
 
 .hook-card-default-hover() {
   box-shadow: @card-default-hover-box-shadow;
+  border-color: @card-default-hover-border;
 }
 
 .hook-card-default-header() {
-  border-bottom: @card-default-header-border-width solid @card-default-header-border;
+  &:not(.uk-background-*) {
+    border-bottom: @card-default-header-border-width solid @card-default-header-border;
+  }
 }
 
 .hook-card-default-footer() {
-  border-top: @card-default-footer-border-width solid @card-default-footer-border;
+  &:not([class*='uk-background-']) {
+    border-top: @card-default-footer-border-width solid @card-default-footer-border;
+  }
 }
 
 .hook-card-primary() {
diff --git a/less/utility.less b/less/utility.less
index 472a40a..9be2444 100644
--- a/less/utility.less
+++ b/less/utility.less
@@ -1,5 +1,6 @@
 @dropcap-font-size: @global-line-height * 3;
 @border-rounded-border-radius: @global-border-radius;
+@border-rounded-small-border-radius: @global-small-border-radius;
 
 @border-width: @global-border-width;
 @border-color: @global-border;
@@ -43,6 +44,11 @@
   .uk-box-no-shadow, .uk-box-no-shadow-hover:hover {
     box-shadow: none;
   }
+
+  /* Border radius*/
+  .uk-border-rounded-small {
+    border-radius: @border-rounded-small-border-radius;
+  }
 }
 
 /* Inverse */