Compare commits
61 Commits
explore-re
...
master
argirok
|
|
@ -27,12 +27,14 @@
|
|||
@import "close";
|
||||
@import "totop";
|
||||
@import "alert";
|
||||
@import "placeholder";
|
||||
@import "badge";
|
||||
@import "label";
|
||||
@import "search";
|
||||
|
||||
// JavaScript
|
||||
@import "accordion";
|
||||
@import "drop";
|
||||
@import "dropdown";
|
||||
@import "modal";
|
||||
@import "slider";
|
||||
|
|
@ -58,7 +60,10 @@
|
|||
@import "background";
|
||||
@import "utility";
|
||||
@import "margin";
|
||||
@import "padding";
|
||||
@import "inverse";
|
||||
|
||||
// Extend
|
||||
@import "stepper";
|
||||
@import "banner";
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
@banner-background: @ciel-color;
|
||||
@banner-background-gradient: none;
|
||||
|
||||
@banner-footer-background: #000000;
|
||||
|
||||
@banner-tab-gutter: 60px;
|
||||
@banner-tab-margin-vertical: @global-small-margin;
|
||||
@banner-tab-divider: @global-border-width solid @global-border;
|
||||
@banner-tab-divider-height: @global-line-height;
|
||||
@banner-tab-item-color: @global-inverse-color;
|
||||
@banner-tab-item-hover-color: @global-secondary-background;
|
||||
@banner-tab-item-hover-decoration: none;
|
||||
@banner-tab-item-active-color: @banner-tab-item-hover-color;
|
||||
@banner-tab-item-active-indicator: @global-background;
|
||||
|
||||
@banner-tab-button-background: @global-secondary-background;
|
||||
@banner-tab-button-border-radius: 0;
|
||||
|
||||
.uk-banner:extend(.uk-section) {
|
||||
background: @banner-background;
|
||||
position: relative;
|
||||
|
||||
& .uk-banner-footer:extend(.uk-light all) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: fade(@banner-footer-background, 50%);
|
||||
|
||||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
-webkit-backdrop-filter: blur(30px) opacity(10%) brightness(90%);
|
||||
backdrop-filter: blur(30px) opacity(10%) brightness(90%);
|
||||
}
|
||||
|
||||
& .uk-button {
|
||||
height: 100%;
|
||||
background: @banner-tab-button-background;
|
||||
border-radius: @banner-tab-button-border-radius;
|
||||
|
||||
&:hover {
|
||||
background: fade(@banner-tab-button-background, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& ul.uk-banner-tab:extend(.uk-flex):extend(.uk-margin-top) {
|
||||
list-style: none;
|
||||
margin: @banner-tab-margin-vertical 0;
|
||||
|
||||
& > li {
|
||||
&:not(:first-child) {
|
||||
margin-left: @banner-tab-gutter;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1 * (@banner-tab-gutter/2);
|
||||
transform: translateX(-100%);
|
||||
border-left: @banner-tab-divider;
|
||||
height: @banner-tab-divider-height;
|
||||
}
|
||||
}
|
||||
|
||||
a:extend(.uk-text-truncate) {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: @banner-tab-item-color;
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
color: @banner-tab-item-hover-color;
|
||||
text-decoration: @banner-tab-item-hover-decoration;
|
||||
}
|
||||
|
||||
&.uk-active a {
|
||||
color: @banner-tab-item-active-color;
|
||||
font-weight: @text-bold-weight;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -@banner-tab-margin-vertical;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 2*@banner-tab-margin-vertical solid transparent;
|
||||
border-right: 2*@banner-tab-margin-vertical solid transparent;
|
||||
border-bottom: @banner-tab-margin-vertical solid @banner-tab-item-active-indicator;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uk-banner.dark {
|
||||
background: @background-secondary-background;
|
||||
}
|
||||
|
|
@ -37,10 +37,6 @@
|
|||
@inverse-base-link-hover-color: @global-inverse-color;
|
||||
|
||||
.hook-base-misc() {
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: @breakpoint-medium) {
|
||||
|
||||
|
|
|
|||
|
|
@ -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,72 +15,72 @@
|
|||
@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: @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-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: @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-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: @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-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: @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-active-shadow;
|
||||
@button-danger-active-border: @button-danger-hover-border;
|
||||
|
||||
/* Text */
|
||||
@button-text-color: @global-primary-background;
|
||||
@button-text-hover-color: @button-text-color;
|
||||
|
||||
/* Link */
|
||||
@button-link-color: @global-primary-background;
|
||||
@button-link-hover-color: @global-secondary-background;
|
||||
@button-link-color: @openaire-primary-color;
|
||||
@button-link-hover-color: @openaire-secondary-color;
|
||||
|
||||
/* Disabled */
|
||||
@button-disabled-box-shadow: none;
|
||||
|
|
@ -201,60 +204,71 @@
|
|||
background-image: none;
|
||||
}
|
||||
|
||||
.hook-button-misc() {
|
||||
a:hover {
|
||||
& .uk-button-default:extend(.uk-button-default:hover){};
|
||||
& .uk-button-primary:extend(.uk-button-primary:hover){};
|
||||
& .uk-button-secondary:extend(.uk-button-secondary:hover){};
|
||||
}
|
||||
}
|
||||
|
||||
/* 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,34 +1,38 @@
|
|||
@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-border-width-m: 0;
|
||||
@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;
|
||||
@card-default-footer-border: @global-border;
|
||||
@card-default-footer-border: @card-default-border;
|
||||
|
||||
@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,6 +69,7 @@
|
|||
|
||||
.hook-card-default-hover() {
|
||||
box-shadow: @card-default-hover-box-shadow;
|
||||
border-color: @card-default-hover-border;
|
||||
}
|
||||
|
||||
.hook-card-default-header() {
|
||||
|
|
@ -102,7 +103,7 @@
|
|||
}
|
||||
|
||||
.uk-card-default {
|
||||
border: @card-default-border-m;
|
||||
border-width: @card-default-border-width-m;
|
||||
box-shadow: @card-default-box-shadow-m;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
@primary-color: #211F7E;
|
||||
@primary-light-color: #4687E6;
|
||||
@openaire-primary-color: #211F7E;
|
||||
@openaire-secondary-color: #4687E6;
|
||||
|
||||
@primary-color: @openaire-primary-color;
|
||||
@primary-light-color: @openaire-secondary-color;
|
||||
@primary-dark-color: #1F2379;
|
||||
@secondary-color: #3086ED;
|
||||
|
||||
@dark-color: #000000;
|
||||
@black-color: #000000;
|
||||
@dark-color: #1a1a1a;
|
||||
@grey-color: #2C2C2C;
|
||||
@placeholder-color: #6e6e6e;
|
||||
@disable-color: #B3B3B3;
|
||||
|
|
@ -41,6 +45,11 @@
|
|||
@funder-color: #3C9F94;
|
||||
@ri-color: #D023AE;
|
||||
@organization-color: #E28B6C;
|
||||
@publisher-color: #8B6CE2;
|
||||
@journal-color: #6CE295;
|
||||
@researcher-color: none;
|
||||
@country-color: none;
|
||||
@datasource-color: none;
|
||||
/* Connect */
|
||||
@connect-color: #FECA1D;
|
||||
@connect-light-color: #FECA1D;
|
||||
|
|
@ -64,4 +73,13 @@
|
|||
@youtube-color: #FF0312;
|
||||
/* Access */
|
||||
@open-access-color:#F68212;
|
||||
@restricted-access-color: #920192;
|
||||
@embargo-access-color: #003E92;
|
||||
@closed-access-color: #E34950;
|
||||
@close-access-color: #848484;
|
||||
/* Access Routes */
|
||||
@green-oa-color: #26580fda;
|
||||
@gold-oa-color: #f2cd08ff;
|
||||
@hybrid-oa-color: #fe9800ff;
|
||||
@bronze-oa-color: #b45f05ff;
|
||||
@diamond-oa-color: #842bd7ff;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@drop-z-index: @global-z-index - 19;
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
@dropdown-z-index: @global-z-index - 19;
|
||||
@dropdown-min-width: 260px;
|
||||
@dropdown-padding: 5px 0;
|
||||
@dropdown-background: @global-background;
|
||||
|
|
@ -21,6 +20,21 @@
|
|||
|
||||
@dropdown-nav-divider-margin: 5px;
|
||||
|
||||
/* Mobile Dropdown*/
|
||||
@dropdown-mobile-z-index: @global-z-index + 20;
|
||||
@dropdown-mobile-background: rgba(0, 0, 0, 0.8);
|
||||
@dropdown-mobile-container-height: 70vh;
|
||||
@dropdown-mobile-container-background: @global-inverse-color;
|
||||
@dropdown-mobile-container-border-radius: 30px 30px 0 0;
|
||||
@dropdown-mobile-container-border: @global-border;
|
||||
@dropdown-mobile-container-border-width: @global-border-width;
|
||||
@dropdown-mobile-container-padding-top: @global-medium-gutter + 10px;
|
||||
@dropdown-mobile-container-divider-width: 60px;
|
||||
@dropdown-mobile-container-divider-height: 4px;
|
||||
@dropdown-mobile-container-divider-background: @dropdown-mobile-container-border;
|
||||
@dropdown-mobile-container-divider-border-radius: 50px;
|
||||
@dropdown-mobile-container-close-position: @global-small-gutter;
|
||||
|
||||
.hook-dropdown() {
|
||||
box-shadow: @dropdown-box-shadow;
|
||||
border: @dropdown-border-width solid @dropdown-border;
|
||||
|
|
@ -51,4 +65,57 @@
|
|||
.uk-dropdown-nav > li.uk-active > a {
|
||||
font-weight: @dropdown-nav-item-active-font-weight;
|
||||
}
|
||||
|
||||
.uk-dropdown-mobile {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
z-index: @dropdown-mobile-z-index;
|
||||
overflow-y: auto;
|
||||
background: @dropdown-mobile-background;
|
||||
display: none;
|
||||
|
||||
&.uk-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > .uk-dropdown-mobile-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: @dropdown-mobile-container-height;
|
||||
background: @dropdown-mobile-container-background;
|
||||
border-radius: @dropdown-mobile-container-border-radius;
|
||||
border: @dropdown-mobile-container-border-width solid @dropdown-mobile-container-border;
|
||||
padding-top: @dropdown-mobile-container-padding-top;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: @dropdown-mobile-container-divider-width;
|
||||
height: @dropdown-mobile-container-divider-height;
|
||||
background: @dropdown-mobile-container-divider-background;
|
||||
border-radius: @dropdown-mobile-container-divider-border-radius;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
& > .uk-close {
|
||||
position: absolute;
|
||||
right: @dropdown-mobile-container-close-position;
|
||||
top: @dropdown-mobile-container-close-position;
|
||||
}
|
||||
|
||||
& > .uk-content {
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,4 +11,20 @@
|
|||
.uk-height-max-xsmall {
|
||||
max-height: @height-xsmall-height;
|
||||
}
|
||||
|
||||
.uk-height-min-xsmall {
|
||||
min-height: @height-xsmall-height;
|
||||
}
|
||||
|
||||
.uk-height-min-small {
|
||||
min-height: @height-small-height;
|
||||
}
|
||||
|
||||
.uk-height-min-medium {
|
||||
min-height: @height-medium-height;
|
||||
}
|
||||
|
||||
.uk-height-min-large {
|
||||
min-height: @height-large-height;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@icon-button-xsmall-size: 24px;
|
||||
@icon-bg-background: @global-background;
|
||||
@icon-bg-size: @icon-button-size;
|
||||
@icon-bg-size-small: @icon-button-size*0.5;
|
||||
@icon-bg-size-medium: @icon-button-size*1.5;
|
||||
@icon-bg-size-large: @icon-button-size*2;
|
||||
|
||||
|
|
@ -80,6 +81,23 @@
|
|||
}
|
||||
|
||||
/* Default circle element for SVGs */
|
||||
.uk-icon-bg {
|
||||
border-radius: 100px;
|
||||
width: @icon-bg-size;
|
||||
height: @icon-bg-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: @icon-bg-background;
|
||||
}
|
||||
|
||||
.uk-icon-bg-small {
|
||||
width: @icon-bg-size-small;
|
||||
height: @icon-bg-size-small;
|
||||
}
|
||||
/**/
|
||||
|
||||
/* Default circle element for SVGs with shadow*/
|
||||
.uk-icon-bg-shadow {
|
||||
border-radius: 100px;
|
||||
width: @icon-button-size;
|
||||
|
|
|
|||
|
|
@ -4,13 +4,16 @@
|
|||
/* Basic Information */
|
||||
--input-placeholder-color: @global-meta-color;
|
||||
--input-placeholder-weight: 400;
|
||||
--input-placeholder-padding-horizontal: 5px;
|
||||
--input-placeholder-top: 0px;
|
||||
--input-placeholder-transform: translateY(-50%);
|
||||
--input-hint-color: @global-meta-color;
|
||||
--input-color: @global-emphasis-color;
|
||||
--input-border-radius: @global-border-radius;
|
||||
/* Size modifiers */
|
||||
--input-padding-vertical: 12px;
|
||||
--input-padding-horizontal: 25px;
|
||||
--input-font-size: @global-font-size;
|
||||
--input-font-size: @global-small-font-size;
|
||||
/* Styling */
|
||||
--input-background: transparent;
|
||||
--input-shadow: none;
|
||||
|
|
@ -26,7 +29,7 @@
|
|||
--input-background-focus: var(--input-background);
|
||||
--input-shadow-focus: var(--input-shadow);
|
||||
--input-border-focus: var(--input-border);
|
||||
--input-color-focus: @global-link-hover-color;
|
||||
--input-placeholder-color-focus: @global-emphasis-color;
|
||||
--input-border-style-focus: var(--input-border-style);
|
||||
/* Disabled */
|
||||
--input-color-disabled: @global-muted-color;
|
||||
|
|
@ -60,37 +63,39 @@
|
|||
background: var(--input-background);
|
||||
border-radius: var(--input-border-radius);
|
||||
position: relative;
|
||||
padding: calc(var(--input-padding-vertical) + 23px) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
|
||||
cursor: text;
|
||||
padding: calc(var(--input-padding-vertical) + var(--input-placeholder-top)) 0 calc(var(--input-padding-vertical) - var(--input-placeholder-top)) var(--input-padding-horizontal);
|
||||
cursor: pointer;
|
||||
color: var(--input-color);
|
||||
|
||||
&.static {
|
||||
padding-top: var(--input-padding-vertical);
|
||||
}
|
||||
|
||||
&.select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > .placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
color: var(--input-placeholder-color);
|
||||
font-weight: var(--input-placeholder-weight);
|
||||
|
||||
& > label {
|
||||
position: absolute;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--input-background) 0%,
|
||||
var(--input-background) 50%,
|
||||
transparent 50%,
|
||||
transparent 100%
|
||||
);
|
||||
padding: 0 var(--input-placeholder-padding-horizontal);
|
||||
font-size: var(--input-font-size);
|
||||
line-height: @global-line-height;
|
||||
top: calc(var(--input-padding-vertical) + @global-line-height);
|
||||
left: var(--input-padding-horizontal);
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.5s ease 0s;
|
||||
top: var(--input-padding-vertical);
|
||||
left: calc(var(--input-padding-horizontal) - var(--input-placeholder-padding-horizontal));
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -210,13 +215,17 @@
|
|||
border-color: var(--input-border-focus);
|
||||
border-style: var(--input-border-style-focus);
|
||||
|
||||
& > .input-box:not(.select) {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
& > .input-box {
|
||||
box-shadow: var(--input-shadow-focus);
|
||||
background: var(--input-background-focus);
|
||||
}
|
||||
|
||||
&:not(.hint):not(.disabled) > .input-box > .placeholder > label {
|
||||
color: var(--input-color-focus);
|
||||
&:not(.hint):not(.disabled):not(.danger) > .input-box > .placeholder > label {
|
||||
color: var(--input-placeholder-color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -257,7 +266,8 @@
|
|||
&.active > .input-box > .placeholder > label,
|
||||
&.focused > .input-box > .placeholder > label,
|
||||
&.hint > .input-box > .placeholder > label {
|
||||
top: calc(var(--input-padding-vertical) + 13px);
|
||||
transform: var(--input-placeholder-transform);
|
||||
top: calc(var(--input-placeholder-top) + var(--input-border-width) * -1);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
|
@ -275,6 +285,7 @@
|
|||
&.flat {
|
||||
--input-background: @global-inverse-color;
|
||||
--input-border: @gray-300;
|
||||
--input-border-focus: @global-emphasis-color;
|
||||
}
|
||||
|
||||
&.border-bottom {
|
||||
|
|
@ -283,12 +294,11 @@
|
|||
--input-border-style: hidden hidden solid hidden;
|
||||
--input-padding-horizontal: 0;
|
||||
--input-padding-vertical: 5px;
|
||||
--input-placeholder-padding-horizontal: 0;
|
||||
--input-border-focus: @global-color;
|
||||
--input-font-size: 14px;
|
||||
}
|
||||
|
||||
&.search {
|
||||
--input-font-size: 14px;
|
||||
--input-padding-horizontal: 30px;
|
||||
--input-padding-vertical: 15px;
|
||||
}
|
||||
|
|
@ -297,9 +307,10 @@
|
|||
--input-placeholder-weight: 700;
|
||||
--input-placeholder-color: @global-color;
|
||||
--input-border-radius: 54px;
|
||||
--input-placeholder-top: 10px;
|
||||
--input-placeholder-transform: none;
|
||||
--input-padding-horizontal: 30px;
|
||||
--input-padding-vertical: 10px;
|
||||
--input-font-size: 14px;
|
||||
--input-padding-vertical: var(--search-input-icon-padding-vertical);
|
||||
--input-background-hover: @global-muted-background;
|
||||
--input-shadow-hover: if(@input-mode = dark, @global-medium-box-shadow, @inverse-global-medium-box-shadow);
|
||||
--input-background-focus: @global-background;
|
||||
|
|
@ -308,18 +319,17 @@
|
|||
|
||||
&.icon-left {
|
||||
--input-padding-horizontal: 0;
|
||||
--input-placeholder-padding-horizontal: 0;
|
||||
}
|
||||
|
||||
&.x-small {
|
||||
--input-padding-horizontal: 15px;
|
||||
--input-padding-vertical: 5px;
|
||||
--input-font-size: 14px;
|
||||
--input-padding-vertical: 10px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
--input-padding-horizontal: 20px;
|
||||
--input-padding-vertical: 10px;
|
||||
--input-font-size: 14px;
|
||||
}
|
||||
|
||||
&.small-vertical {
|
||||
|
|
@ -346,8 +356,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.uk-dropdown.options {
|
||||
max-height: 198px; /* 31px each line height, 5+5 margin top+bottom, 1+1 border top+bottom */
|
||||
overflow: auto;
|
||||
.uk-dropdown {
|
||||
&.options {
|
||||
max-height: 198px; /* 31px each line height, 5+5 margin top+bottom, 1+1 border top+bottom */
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
& .mat-calendar-body-selected {
|
||||
color: @global-inverse-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Dark Background: Use hook-inverse-misc in order to add styles
|
||||
in a dark background and use uk-light in a child */
|
||||
@inverse-global-color: @global-inverse-color;
|
||||
@inverse-global-color: @global-background;
|
||||
|
||||
.dark {
|
||||
.hook-inverse-misc();
|
||||
|
|
|
|||
|
|
@ -67,8 +67,12 @@
|
|||
}
|
||||
|
||||
.uk-label-secondary {
|
||||
background-color: @label-secondary-background;
|
||||
color: @label-secondary-color;
|
||||
border-color: @label-secondary-border;
|
||||
background-color: @label-secondary-border;
|
||||
color: @global-inverse-color;
|
||||
border-color: @label-secondary-background;
|
||||
|
||||
.uk-close {
|
||||
color: @global-inverse-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.set-blur-background(@color: @base-body-background, @opacity: 80%) {
|
||||
.set-blur-background(@color: @base-body-background, @opacity: 80%, @blur: saturate(180%) blur(20px)) {
|
||||
&.uk-blur-background, .uk-blur-background {
|
||||
background: fade(@color, 99%);
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
&.uk-blur-background, .uk-blur-background {
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background: fade(@color, @opacity);
|
||||
-webkit-backdrop-filter: @blur;
|
||||
backdrop-filter: @blur;
|
||||
background: fade(@color, @opacity) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,21 +2,21 @@
|
|||
|
||||
@modal-dialog-border-radius: @global-border-radius;
|
||||
|
||||
@modal-body-padding-horizontal: @global-medium-gutter;
|
||||
@modal-body-padding-vertical: @global-medium-gutter;
|
||||
@modal-body-padding-horizontal-mobile: @global-small-gutter;
|
||||
@modal-body-padding-vertical-mobile: @global-small-gutter;
|
||||
@modal-body-padding-horizontal-s: @global-medium-gutter;
|
||||
@modal-body-padding-vertical-s: @global-medium-gutter;
|
||||
@modal-body-padding-horizontal: @global-small-gutter;
|
||||
@modal-body-padding-vertical: @global-small-gutter;
|
||||
|
||||
@modal-header-padding-horizontal: @global-medium-gutter;
|
||||
@modal-header-padding-vertical: @global-gutter;
|
||||
@modal-header-padding-horizontal-mobile: @global-small-gutter;
|
||||
@modal-header-padding-vertical-mobile: @global-small-gutter;
|
||||
@modal-header-padding-horizontal-s: @global-medium-gutter;
|
||||
@modal-header-padding-vertical-s: @global-small-gutter;
|
||||
@modal-header-padding-horizontal: @global-small-gutter;
|
||||
@modal-header-padding-vertical: @global-xsmall-gutter;
|
||||
@modal-header-background: @global-background;
|
||||
|
||||
@modal-footer-padding-horizontal: @global-medium-gutter;
|
||||
@modal-footer-padding-vertical: @global-medium-gutter;
|
||||
@modal-footer-padding-horizontal-mobile: @global-small-gutter;
|
||||
@modal-footer-padding-vertical-mobile: @global-small-gutter;
|
||||
@modal-footer-padding-horizontal-s: @global-medium-gutter;
|
||||
@modal-footer-padding-vertical-s: @global-small-gutter;
|
||||
@modal-footer-padding-horizontal: @global-small-gutter;
|
||||
@modal-footer-padding-vertical: @global-xsmall-gutter;
|
||||
@modal-footer-background: @global-background;
|
||||
@modal-footer-border-width: @global-border-width;
|
||||
@modal-footer-border: @global-border;
|
||||
|
|
@ -42,21 +42,17 @@
|
|||
}
|
||||
|
||||
.hook-modal-misc() {
|
||||
@media (max-width: @breakpoint-small-max) {
|
||||
.uk-modal-body {
|
||||
padding: @modal-body-padding-vertical-mobile @modal-body-padding-horizontal-mobile;
|
||||
#modal-container {
|
||||
& > .uk-dropdown {
|
||||
z-index: @modal-z-index + 1;
|
||||
}
|
||||
|
||||
.uk-modal-header {
|
||||
padding: @modal-header-padding-vertical-mobile @modal-header-padding-horizontal-mobile;
|
||||
}
|
||||
|
||||
.uk-modal-footer {
|
||||
padding: @modal-footer-padding-vertical-mobile @modal-footer-padding-horizontal-mobile;
|
||||
& > .uk-drop {
|
||||
z-index: @modal-z-index + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.uk-modal, uk-dropdown {
|
||||
.uk-modal, .uk-dropdown, .uk-drop {
|
||||
|
||||
.uk-button, uk-icon-button {
|
||||
box-shadow: none !important;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
@nav-primary-item-hover-color: @global-secondary-background;
|
||||
@nav-primary-item-active-color: @global-secondary-background;
|
||||
@nav-primary-header-color: @global-secondary-background;
|
||||
@nav-primary-sublist-font-size: @global-font-size;
|
||||
@nav-primary-sublist-item-color: @nav-primary-item-color;
|
||||
@nav-primary-sublist-item-hover-color: @nav-primary-item-hover-color;
|
||||
@nav-primary-sublist-item-active-font-weight: 600;
|
||||
|
|
@ -54,16 +55,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.hook-nav-parent-icon() {
|
||||
background-image: none !important;
|
||||
font-family: "Material Icons";
|
||||
font-weight: 400 !important;
|
||||
font-size: 1.5em;
|
||||
width: auto;
|
||||
height: auto;
|
||||
content: "\e5c5";
|
||||
}
|
||||
|
||||
.hook-nav-misc() {
|
||||
.uk-nav-sub ul {
|
||||
&:before {
|
||||
|
|
@ -79,8 +70,18 @@
|
|||
font-weight: @nav-primary-sublist-item-active-font-weight;
|
||||
}
|
||||
|
||||
.uk-nav-parent-icon > .uk-parent.uk-open > a::after {
|
||||
content: "\e5c7";
|
||||
.uk-nav-parent-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
background-image: none !important;
|
||||
font-family: "Material Icons";
|
||||
font-weight: 400 !important;
|
||||
font-size: 1.5em;
|
||||
content: "\e5c5";
|
||||
}
|
||||
}
|
||||
|
||||
.uk-nav-sub .uk-nav-divider {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
border: @notification-message-border-width solid @notification-message-border;
|
||||
border-radius: @notification-message-border-radius;
|
||||
box-shadow: @notification-message-box-shadow;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.hook-notification-message-primary() {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
@offcanvas-bar-width: 100vw;
|
||||
@offcanvas-bar-padding-vertical: @global-medium-gutter;
|
||||
@offcanvas-bar-padding-horizontal: @global-medium-gutter;
|
||||
@offcanvas-bar-width-m: 550px;
|
||||
@offcanvas-bar-width-s: 550px;
|
||||
@offcanvas-bar-border-radius: @global-small-border-radius;
|
||||
@offcanvas-bar-background: @global-background;
|
||||
@offcanvas-bar-box-shadow: @global-large-box-shadow;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
@padding-xsmall-padding: @global-xsmall-gutter;
|
||||
|
||||
.uk-padding-xsmall { padding: @padding-xsmall-padding; }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@placeholder-background: @global-inverse-color;
|
||||
@placeholder-border: 2px dashed @global-border;
|
||||
|
||||
.hook-placeholder() {
|
||||
border: @placeholder-border;
|
||||
}
|
||||
|
|
@ -1,20 +1,49 @@
|
|||
@progress-height: 16px;
|
||||
@progress-height: 18px;
|
||||
@progress-background: fade(@progress-bar-background, 30%);
|
||||
@progress-border-radius: 500px;
|
||||
@progress-box-shadow: none;
|
||||
@progress-bar-background: @global-primary-background;
|
||||
@progress-bar-background-open-access: @open-access-color;
|
||||
@progress-background-open-access: @muted-color;
|
||||
|
||||
@progress-circle-size: 100px;
|
||||
@progress-circle-color: @global-primary-background;
|
||||
@progress-circle-text-font-weight: @text-bold-weight;
|
||||
@progress-circle-text-font-size: @global-large-font-size;
|
||||
@progress-circle-sub-background: @table-color;
|
||||
@progress-circle-background: conic-gradient(@progress-bar-background calc(var(--percentage) * 1%), @progress-background 0);
|
||||
@progress-circle-background-open-access: conic-gradient(@progress-bar-background-open-access calc(var(--percentage) * 1%), @progress-background-open-access 0);
|
||||
|
||||
@progress-semicircle-size: 120px;
|
||||
@progress-semicircle-size-small: 80px;
|
||||
@progress-semicircle-color: @global-primary-background;
|
||||
@progress-semicircle-text-font-weight: @text-bold-weight;
|
||||
@progress-semicircle-text-font-size: @global-large-font-size;
|
||||
@progress-semicircle-text-font-size-small: @global-font-size;
|
||||
@progress-semicircle-background: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background calc(var(--percentage) * 1% / 2), @progress-background calc(var(--percentage) * 1% / 2 + 0.1%));
|
||||
@progress-semicircle-background-open-access: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background-open-access calc(var(--percentage) * 1% / 2), @progress-background-open-access calc(var(--percentage) * 1% / 2 + 0.1%));
|
||||
|
||||
|
||||
.hook-progress() {
|
||||
border-radius: @progress-border-radius;
|
||||
box-shadow: @progress-box-shadow;
|
||||
|
||||
&.open-access {
|
||||
background: @progress-background-open-access;
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: @progress-bar-background-open-access;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: @progress-bar-background-open-access;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hook-progress-bar() {
|
||||
border-radius: @progress-border-radius;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.hook-progress-misc() {
|
||||
|
|
@ -25,15 +54,144 @@
|
|||
width: @progress-circle-size;
|
||||
height: @progress-circle-size;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(closest-side, @table-color 70%, @global-inverse-color 70% 80%, transparent 80% 100%),
|
||||
conic-gradient(@progress-bar-background calc(var(--percentage) * 1%), @progress-background 0);
|
||||
background: @progress-circle-background;
|
||||
|
||||
&::before {
|
||||
color: @progress-bar-background;
|
||||
color: @progress-circle-color;
|
||||
font-weight: @progress-circle-text-font-weight;
|
||||
font-size: @progress-circle-text-font-size;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-radius: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: @progress-circle-sub-background;
|
||||
content: attr(percentage) '%';
|
||||
}
|
||||
|
||||
&.open-access {
|
||||
background: @progress-circle-background-open-access;
|
||||
}
|
||||
}
|
||||
|
||||
.uk-progress-semicircle[percentage] {
|
||||
width: @progress-semicircle-size;
|
||||
aspect-ratio: 2 / 1;
|
||||
border-radius: 50% / 100% 100% 0 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @progress-semicircle-background;
|
||||
mask: radial-gradient(at 50% 100%, white 62%, transparent 63%);
|
||||
mask-mode: alpha;
|
||||
-webkit-mask: radial-gradient(at 50% 100%, #0000 62%, #000 63%);
|
||||
-webkit-mask-mode: alpha;
|
||||
}
|
||||
|
||||
&::after {
|
||||
color: @progress-semicircle-color;
|
||||
font-weight: @progress-semicircle-text-font-weight;
|
||||
font-size: @progress-semicircle-text-font-size;
|
||||
content: attr(percentage) '%';
|
||||
}
|
||||
|
||||
&.open-access {
|
||||
&::before {
|
||||
background: @progress-semicircle-background-open-access;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uk-progress-semicircle-small[percentage] {
|
||||
width: @progress-semicircle-size-small;
|
||||
|
||||
&::after {
|
||||
font-size: @progress-semicircle-text-font-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@inverse-progress-background: @inverse-global-color;
|
||||
@inverse-progress-bar-background: @global-secondary-background;
|
||||
@inverse-progress-background-open-access: @inverse-global-color;
|
||||
@inverse-progress-bar-background-open-access: @progress-bar-background-open-access;
|
||||
|
||||
@inverse-progress-circle-color: @inverse-global-color;
|
||||
@inverse-progress-circle-sub-background: @global-primary-background;
|
||||
@inverse-progress-circle-background: conic-gradient(@inverse-progress-bar-background calc(var(--percentage) * 1%), @inverse-progress-background 0);
|
||||
@inverse-progress-circle-background-open-access: conic-gradient(@inverse-progress-bar-background-open-access calc(var(--percentage) * 1%), @inverse-progress-background-open-access 0);
|
||||
|
||||
@inverse-progress-semicircle-color: @inverse-global-color;
|
||||
@inverse-progress-semicircle-background: conic-gradient(from 0.75turn at 50% 100%, @inverse-progress-bar-background calc(var(--percentage) * 1% / 2), @inverse-progress-background calc(var(--percentage) * 1% / 2 + 0.1%));
|
||||
@inverse-progress-semicircle-background-open-access: conic-gradient(from 0.75turn at 50% 100%, @inverse-progress-bar-background-open-access calc(var(--percentage) * 1% / 2), @inverse-progress-background-open-access calc(var(--percentage) * 1% / 2 + 0.1%));
|
||||
|
||||
.hook-inverse() {
|
||||
.uk-progress {
|
||||
background-color: @inverse-progress-background;
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: @inverse-progress-bar-background;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: @inverse-progress-bar-background;
|
||||
}
|
||||
|
||||
&.open-access {
|
||||
background: @inverse-progress-background-open-access;
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: @inverse-progress-bar-background-open-access;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: @inverse-progress-bar-background-open-access;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uk-progress-circle[percentage] {
|
||||
background: @inverse-progress-circle-background;
|
||||
|
||||
&::before {
|
||||
color: @inverse-progress-circle-color;
|
||||
background: @inverse-progress-circle-sub-background;
|
||||
}
|
||||
|
||||
&.open-access {
|
||||
background: @inverse-progress-circle-background-open-access;
|
||||
}
|
||||
}
|
||||
|
||||
.uk-progress-semicircle[percentage] {
|
||||
|
||||
&::before {
|
||||
background: @inverse-progress-semicircle-background;
|
||||
}
|
||||
|
||||
&::after {
|
||||
color: @inverse-progress-semicircle-color;
|
||||
}
|
||||
|
||||
&.open-access {
|
||||
&::before {
|
||||
background: @inverse-progress-semicircle-background-open-access;
|
||||
}
|
||||
|
||||
&::after {
|
||||
color: @inverse-progress-semicircle-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
@section-primary-background: @global-primary-gradient;
|
||||
|
||||
/** Secondary*/
|
||||
@section-secondary-background: @global-color;
|
||||
@section-secondary-background: @global-dark-background;
|
||||
|
|
|
|||
106
less/slider.less
106
less/slider.less
|
|
@ -2,6 +2,48 @@
|
|||
@slider-arrow-width: 50px;
|
||||
@slider-arrow-margin: 5px;
|
||||
|
||||
@slider-container-progress-height: 6px;
|
||||
@slider-nav-item-margin: @global-small-margin;
|
||||
@slider-nav-item-padding: 20px 30px;
|
||||
@slider-nav-item-border-radius: @global-border-radius;
|
||||
@slider-nav-item-background-active: @ciel-color;
|
||||
@slider-nav-item-action-size: @icon-button-small-size;
|
||||
@slider-nav-item-action-background: @global-background;
|
||||
|
||||
@inverse-slider-nav-item-background-active: fade(@global-inverse-color, 5%);
|
||||
|
||||
.mobile(@link-color: @global-link-color, @link-color-hover: @global-link-hover-color) {
|
||||
@media (max-width: @breakpoint-medium-max) {
|
||||
slider-container {
|
||||
|
||||
& slider-nav-item {
|
||||
& > * {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& > *:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
& > .uk-active {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
|
||||
& > .action {
|
||||
& > a {
|
||||
border: @global-border-width solid @link-color;
|
||||
}
|
||||
|
||||
& > a:hover {
|
||||
border-color: @link-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hook-slider-misc() {
|
||||
.uk-slider-arrow {
|
||||
height: 100%;
|
||||
|
|
@ -31,4 +73,68 @@
|
|||
margin-left: -@subnav-margin-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
slider-container {
|
||||
& .uk-progress {
|
||||
height: @slider-container-progress-height;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& slider-nav-item {
|
||||
display: block;
|
||||
|
||||
& > * {
|
||||
padding: @slider-nav-item-padding;
|
||||
border-radius: @slider-nav-item-border-radius;
|
||||
cursor: pointer;
|
||||
|
||||
& > .action {
|
||||
width: @slider-nav-item-action-size;
|
||||
position: relative;
|
||||
|
||||
& > a, & > a:hover {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 500px;
|
||||
width: @slider-nav-item-action-size;
|
||||
height: @slider-nav-item-action-size;
|
||||
background: @slider-nav-item-action-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .uk-active {
|
||||
background: @slider-nav-item-background-active;
|
||||
|
||||
& > .action {
|
||||
& > a, & > a:hover {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: @slider-nav-item-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile();
|
||||
}
|
||||
|
||||
.hook-inverse() {
|
||||
slider-container {
|
||||
|
||||
& slider-nav-item {
|
||||
|
||||
& > .uk-active {
|
||||
box-shadow: 10px 10px 25px #0000001A;
|
||||
background: @inverse-slider-nav-item-background-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile(@inverse-base-link-color, @inverse-base-link-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
@subnav-item-font-size: @global-small-font-size;
|
||||
@subnav-item-font-size-small: @global-xsmall-font-size;
|
||||
@subnav-item-line-height: 17px;
|
||||
@subnav-item-font-weight: 400;
|
||||
@subnav-item-max-width: @width-medium-width;
|
||||
|
||||
/* Pills */
|
||||
@subnav-pill-item-padding-vertical: 10px;
|
||||
@subnav-pill-item-padding-horizontal: 20px;
|
||||
@subnav-pill-item-padding-vertical-small: (@subnav-pill-item-padding-vertical / 2);
|
||||
@subnav-pill-item-padding-horizontal-small: (@subnav-pill-item-padding-horizontal / 2);
|
||||
@subnav-pill-item-border-radius: 60px;
|
||||
@subnav-pill-item-background: transparent;
|
||||
@subnav-pill-item-color: @global-primary-background;
|
||||
|
|
@ -21,7 +25,9 @@
|
|||
/* Pills alt*/
|
||||
@subnav-pill-alt-item-padding-vertical: 10px;
|
||||
@subnav-pill-alt-item-padding-horizontal: 20px;
|
||||
@subnav-pill-alt-item-border-radius: 24px;
|
||||
@subnav-pill-alt-item-padding-vertical-small: (@subnav-pill-alt-item-padding-vertical / 2);
|
||||
@subnav-pill-alt-item-padding-horizontal-small: (@subnav-pill-alt-item-padding-horizontal / 2);
|
||||
@subnav-pill-alt-item-border-radius: @global-xlarge-border-radius;
|
||||
@subnav-pill-alt-item-color: @global-color;
|
||||
@subnav-pill-alt-item-hover-color: @global-secondary-background;
|
||||
@subnav-pill-alt-item-active-font-weight: 600;
|
||||
|
|
@ -34,6 +40,9 @@
|
|||
font-size: @subnav-item-font-size;
|
||||
font-weight: @subnav-item-font-weight;
|
||||
line-height: @subnav-item-line-height;
|
||||
max-width: @subnav-item-max-width;
|
||||
|
||||
& > *:extend(.uk-text-truncate) {}
|
||||
}
|
||||
|
||||
.hook-subnav-pill-item() {
|
||||
|
|
@ -72,13 +81,20 @@
|
|||
background-image: @subnav-pill-alt-item-active-background-gradient;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Inverse */
|
||||
@inverse-subnav-pill-alt-box-shadow: @inverse-global-large-box-shadow;
|
||||
.uk-subnav.uk-subnav-pill.uk-subnav-small {
|
||||
|
||||
.hook-inverse-misc() {
|
||||
.uk-subnav.uk-subnav-pill-alt {
|
||||
box-shadow: @inverse-subnav-pill-alt-box-shadow;
|
||||
& > * > * {
|
||||
font-size: @subnav-item-font-size-small;
|
||||
padding: @subnav-pill-item-padding-vertical-small @subnav-pill-item-padding-horizontal-small;
|
||||
}
|
||||
}
|
||||
|
||||
.uk-subnav.uk-subnav-pill-alt.uk-subnav-small {
|
||||
|
||||
& > * > * {
|
||||
font-size: @subnav-item-font-size-small;
|
||||
padding: @subnav-pill-alt-item-padding-vertical-small @subnav-pill-alt-item-padding-horizontal-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@
|
|||
@table-cell-padding-horizontal: 17px;
|
||||
|
||||
@table-header-cell-font-weight: 300;
|
||||
@table-header-cell-font-size: @global-small-font-size;
|
||||
@table-header-cell-color: @global-meta-color;
|
||||
@table-header-cell-text-transform: uppercase;
|
||||
|
||||
@table-row-active-background: fade(@global-primary-background, 20%);
|
||||
@table-row-active-background: @ciel-color;
|
||||
|
||||
@table-striped-row-background: @table-color;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
@dropcap-font-size: @global-line-height * 3;
|
||||
@border-rounded-border-radius: @global-border-radius;
|
||||
@border-rounded-small-border-radius: @global-small-border-radius;
|
||||
@border-rounded-xlarge-border-radius: @global-xlarge-border-radius;
|
||||
|
||||
|
||||
@border-width: @global-border-width;
|
||||
@border-color: @global-border;
|
||||
|
|
@ -43,6 +46,15 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.uk-border-rounded-xlarge {
|
||||
border-radius: @border-rounded-xlarge-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
/* Inverse */
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
|
||||
/** Colors */
|
||||
@global-color: @grey-color;
|
||||
@global-emphasis-color: @dark-color;
|
||||
@global-emphasis-color: @black-color;
|
||||
@global-inverse-color: @light-color;
|
||||
@global-link-color: @info-color;
|
||||
@global-muted-color: @disable-color;
|
||||
@global-meta-color: @placeholder-color;
|
||||
@global-link-hover-color: @secondary-color;
|
||||
@global-overlay-background: fade(@dark-color, 60%);
|
||||
@global-link-hover-color: @openaire-secondary-color;
|
||||
@global-overlay-background: fade(@black-color, 60%);
|
||||
|
||||
/** Backgrounds */
|
||||
@global-background: @default-color;
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
@global-muted-background: @muted-color;
|
||||
@global-primary-background: @primary-color;
|
||||
@global-secondary-background: @secondary-color;
|
||||
@global-dark-background: @dark-color;
|
||||
@global-success-background: @success-color;
|
||||
@global-warning-background: @warning-color;
|
||||
@global-primary-gradient: linear-gradient(51deg, @primary-light-color 0%, @primary-dark-color 100%);
|
||||
|
|
@ -35,6 +36,7 @@
|
|||
@global-border: @muted-color;
|
||||
@global-border-radius: 6px;
|
||||
@global-small-border-radius: 4px;
|
||||
@global-xlarge-border-radius: 4 * @global-border-radius;
|
||||
|
||||
/* Shadows*/
|
||||
@global-default-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -45,8 +47,19 @@
|
|||
@global-xlarge-box-shadow: -20px -20px 25px rgba(0, 0, 0, 0.02), 20px 20px 25px rgba(0, 0, 0, 0.08);
|
||||
|
||||
/* Spacings */
|
||||
@global-small-gutter: 20px;
|
||||
@global-xsmall-margin: 5px;
|
||||
@global-xsmall-gutter: 8px;
|
||||
@global-small-gutter: 16px;
|
||||
@global-gutter: 32px;
|
||||
@global-medium-gutter: 40px;
|
||||
@global-large-gutter: 72px;
|
||||
|
||||
@global-xsmall-margin: 4px;
|
||||
@global-small-margin: 8px;
|
||||
@global-margin: 16px;
|
||||
@global-medium-margin: 40px;
|
||||
@global-large-margin: 72px;
|
||||
@global-xlarge-margin: 144px;
|
||||
|
||||
|
||||
/* Controls */
|
||||
@global-control-small-height: 30px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue