MaDgIK
/
openaire-theme
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[develop]: Improve variables for buttons and cards. Add uk-border-small-radius.

This commit is contained in:
Konstantinos Triantafyllou 2023-11-30 23:01:14 +02:00
parent 7aa9e57719
commit 49cf2a74e2
3 changed files with 54 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
less/button.less
View File

@ -5,6 +5,9 @@
@button-border-width: @global-border-width; @button-border-width: @global-border-width;
@button-text-transform: uppercase; @button-text-transform: uppercase;
@button-border-radius: 500px; @button-border-radius: 500px;
@button-shadow: @global-medium-box-shadow;
@button-hover-shadow: @global-small-box-shadow;
@button-active-shadow: @button-hover-shadow;
/* Default */ /* Default */
@button-default-background: @global-background; @button-default-background: @global-background;
@ -12,63 +15,63 @@
@button-default-box-shadow: @global-medium-box-shadow; @button-default-box-shadow: @global-medium-box-shadow;
@button-default-border: transparent; @button-default-border: transparent;
@button-default-hover-background: @global-background; @button-default-hover-background: @global-background;
@button-default-hover-color: @global-secondary-background; @button-default-hover-color: @button-shadow;
@button-default-hover-box-shadow: @global-small-box-shadow; @button-default-hover-box-shadow: @button-hover-shadow;
@button-default-hover-border: transparent; @button-default-hover-border: transparent;
@button-default-active-background: @button-default-hover-background; @button-default-active-background: @button-default-hover-background;
@button-default-active-color: @button-default-hover-color; @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; @button-default-active-border: @button-default-hover-border;
/* Primary */ /* Primary */
@button-primary-background: @global-primary-background; @button-primary-background: @global-primary-background;
@button-primary-background-gradient: @global-primary-gradient; @button-primary-background-gradient: @global-primary-gradient;
@button-primary-color: @global-inverse-color; @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-border: transparent;
@button-primary-hover-background: @global-secondary-background; @button-primary-hover-background: @global-secondary-background;
@button-primary-hover-background-gradient: none; @button-primary-hover-background-gradient: none;
@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: @button-hover-shadow;
@button-primary-hover-border: transparent; @button-primary-hover-border: transparent;
@button-primary-active-background: @button-primary-hover-background; @button-primary-active-background: @button-primary-hover-background;
@button-primary-active-background-gradient: @button-primary-hover-background-gradient; @button-primary-active-background-gradient: @button-primary-hover-background-gradient;
@button-primary-active-color: @button-primary-hover-color; @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; @button-primary-active-border: @button-primary-hover-border;
/* Secondary */ /* Secondary */
@button-secondary-background: @global-background; @button-secondary-background: @global-background;
@button-secondary-background-gradient: none; @button-secondary-background-gradient: none;
@button-secondary-color: @global-primary-background; @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-border: @global-primary-background;
@button-secondary-hover-background: @global-primary-background; @button-secondary-hover-background: @global-primary-background;
@button-secondary-hover-background-gradient: @global-primary-gradient; @button-secondary-hover-background-gradient: @global-primary-gradient;
@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: @button-hover-shadow;
@button-secondary-hover-border: transparent; @button-secondary-hover-border: transparent;
@button-secondary-active-background: @button-secondary-hover-background; @button-secondary-active-background: @button-secondary-hover-background;
@button-secondary-active-background-gradient: @button-secondary-hover-background-gradient; @button-secondary-active-background-gradient: @button-secondary-hover-background-gradient;
@button-secondary-active-color: @button-secondary-hover-color; @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; @button-secondary-active-border: @button-secondary-hover-border;
/* Danger */ /* Danger */
@button-danger-background: @global-danger-background; @button-danger-background: @global-danger-background;
@button-danger-background-gradient: none; @button-danger-background-gradient: none;
@button-danger-color: @global-inverse-color; @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-border: @global-danger-background;
@button-danger-hover-background: @global-background; @button-danger-hover-background: @global-background;
@button-danger-hover-background-gradient: none; @button-danger-hover-background-gradient: none;
@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: @button-hover-shadow;
@button-danger-hover-border: @global-danger-background; @button-danger-hover-border: @global-danger-background;
@button-danger-active-background: @button-danger-hover-background; @button-danger-active-background: @button-danger-hover-background;
@button-danger-active-background-gradient: @button-danger-hover-background-gradient; @button-danger-active-background-gradient: @button-danger-hover-background-gradient;
@button-danger-active-color: @button-danger-hover-color; @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; @button-danger-active-border: @button-danger-hover-border;
/* Text */ /* Text */
@ -202,59 +205,62 @@
} }
/* Inverse */ /* 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 */ /* Default */
@inverse-button-default-background: @global-background; @inverse-button-default-background: @global-background;
@inverse-button-default-color: @global-color; @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-border: transparent;
@inverse-button-default-hover-background: @global-background; @inverse-button-default-hover-background: @global-background;
@inverse-button-default-hover-color: @global-secondary-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-hover-border: transparent;
@inverse-button-default-active-background: @global-background; @inverse-button-default-active-background: @global-background;
@inverse-button-default-active-color: @global-secondary-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; @inverse-button-default-active-border: transparent;
/* Primary */ /* Primary */
@inverse-button-primary-background: @button-primary-background; @inverse-button-primary-background: @button-primary-background;
@inverse-button-primary-background-gradient: @button-primary-background-gradient; @inverse-button-primary-background-gradient: @button-primary-background-gradient;
@inverse-button-primary-color: @button-primary-color; @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-border: @button-primary-border;
@inverse-button-primary-hover-background: @button-primary-hover-background; @inverse-button-primary-hover-background: @button-primary-hover-background;
@inverse-button-primary-hover-background-gradient: @button-primary-hover-background-gradient; @inverse-button-primary-hover-background-gradient: @button-primary-hover-background-gradient;
@inverse-button-primary-hover-color: @button-primary-hover-color; @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-hover-border: @button-primary-hover-border;
@inverse-button-primary-active-background: @button-primary-active-background; @inverse-button-primary-active-background: @button-primary-active-background;
@inverse-button-primary-active-background-gradient: @button-primary-active-background-gradient; @inverse-button-primary-active-background-gradient: @button-primary-active-background-gradient;
@inverse-button-primary-active-color: @button-primary-active-color; @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; @inverse-button-primary-active-border: @button-primary-active-border;
/* Secondary */ /* Secondary */
@inverse-button-secondary-background: @global-background; @inverse-button-secondary-background: @global-background;
@inverse-button-secondary-background-gradient: none; @inverse-button-secondary-background-gradient: none;
@inverse-button-secondary-color: @button-secondary-color; @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-border: @button-secondary-border;
@inverse-button-secondary-hover-background: @button-secondary-hover-background; @inverse-button-secondary-hover-background: @button-secondary-hover-background;
@inverse-button-secondary-hover-background-gradient: @button-secondary-hover-background-gradient; @inverse-button-secondary-hover-background-gradient: @button-secondary-hover-background-gradient;
@inverse-button-secondary-hover-color: @button-secondary-hover-color; @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-hover-border: @button-secondary-hover-border;
@inverse-button-secondary-active-background: @button-secondary-active-background; @inverse-button-secondary-active-background: @button-secondary-active-background;
@inverse-button-secondary-active-background-gradient: @button-secondary-active-background-gradient; @inverse-button-secondary-active-background-gradient: @button-secondary-active-background-gradient;
@inverse-button-secondary-active-color: @button-secondary-active-color; @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; @inverse-button-secondary-active-border: transparent;
/* Danger */ /* Danger */
@inverse-button-danger-box-shadow: @inverse-global-medium-box-shadow; @inverse-button-danger-box-shadow: @inverse-button-box-shadow;
@inverse-button-danger-hover-box-shadow: @inverse-global-small-box-shadow; @inverse-button-danger-hover-box-shadow: @button-secondary-hover-background;
@inverse-button-danger-active-box-shadow: @inverse-global-small-box-shadow; @inverse-button-danger-active-box-shadow: @inverse-button-active-box-shadow;
/* Text */ /* Text */
@inverse-button-text-color: @global-inverse-color; @inverse-button-text-color: @global-inverse-color;

31
less/card.less
View File

@ -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-horizontal: @global-small-gutter;
@card-body-padding-vertical: @global-small-gutter; @card-body-padding-vertical: @global-small-gutter;
@card-border-radius: @global-border-radius; @card-border-radius: @global-border-radius;
@card-default-background: @global-inverse-color; @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-width: @global-border-width;
@card-default-border: @global-border; @card-default-border: @global-border;
@card-default-border-m: none; @card-default-border-m: none;
@card-default-hover-border: transparent;
@card-default-hover-background: @card-default-background; @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-width: @global-border-width;
@card-default-header-border: @global-border; @card-default-header-border: @global-border;
@card-default-footer-border-width: @global-border-width; @card-default-footer-border-width: @global-border-width;
@ -18,17 +22,17 @@
@card-primary-background: @global-primary-background; @card-primary-background: @global-primary-background;
@card-primary-background-gradient: @global-primary-gradient; @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-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-primary-hover-background-gradient: @global-primary-gradient;
@card-secondary-background: @global-secondary-background; @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: @global-color;
@card-secondary-color-mode: light; @card-secondary-color-mode: light;
@card-secondary-hover-background: @card-secondary-background; @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-box-shadow: none;
@card-disabled-border: @global-border; @card-disabled-border: @global-border;
@ -49,10 +53,6 @@
opacity: @card-disabled-opacity; opacity: @card-disabled-opacity;
} }
} }
&:not(.uk-card-default, .uk-card-primary, .uk-card-secondary):hover {
background-color: @card-background-hover;
}
} }
.hook-card-header() { .hook-card-header() {
@ -69,14 +69,19 @@
.hook-card-default-hover() { .hook-card-default-hover() {
box-shadow: @card-default-hover-box-shadow; box-shadow: @card-default-hover-box-shadow;
border-color: @card-default-hover-border;
} }
.hook-card-default-header() { .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() { .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() { .hook-card-primary() {

6
less/utility.less
View File

@ -1,5 +1,6 @@
@dropcap-font-size: @global-line-height * 3; @dropcap-font-size: @global-line-height * 3;
@border-rounded-border-radius: @global-border-radius; @border-rounded-border-radius: @global-border-radius;
@border-rounded-small-border-radius: @global-small-border-radius;
@border-width: @global-border-width; @border-width: @global-border-width;
@border-color: @global-border; @border-color: @global-border;
@ -43,6 +44,11 @@
.uk-box-no-shadow, .uk-box-no-shadow-hover:hover { .uk-box-no-shadow, .uk-box-no-shadow-hover:hover {
box-shadow: none; box-shadow: none;
} }
/* Border radius*/
.uk-border-rounded-small {
border-radius: @border-rounded-small-border-radius;
}
} }
/* Inverse */ /* Inverse */