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

pull/8/head
parent 7aa9e57719
commit 49cf2a74e2

@ -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;

@ -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() {

@ -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 */

Loading…
Cancel
Save