diff --git a/less/_import.less b/less/_import.less index 6e157a3..2d9b768 100644 --- a/less/_import.less +++ b/less/_import.less @@ -65,3 +65,5 @@ // Extend @import "stepper"; +@import "banner"; + diff --git a/less/banner.less b/less/banner.less new file mode 100644 index 0000000..44dbb7f --- /dev/null +++ b/less/banner.less @@ -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; +} diff --git a/less/base.less b/less/base.less index 737c53a..6e0245b 100644 --- a/less/base.less +++ b/less/base.less @@ -37,10 +37,6 @@ @inverse-base-link-hover-color: @global-inverse-color; .hook-base-misc() { - body { - overflow-y: scroll; - } - @media (min-width: @breakpoint-medium) { diff --git a/less/color.less b/less/color.less index 34cd331..157c95a 100644 --- a/less/color.less +++ b/less/color.less @@ -45,6 +45,9 @@ @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 */ diff --git a/less/icon.less b/less/icon.less index 6012550..4939dac 100644 --- a/less/icon.less +++ b/less/icon.less @@ -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; diff --git a/less/label.less b/less/label.less index 8c98005..586f7d8 100644 --- a/less/label.less +++ b/less/label.less @@ -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; + } } } diff --git a/less/mixin.less b/less/mixin.less index d332f5c..74bfe6f 100644 --- a/less/mixin.less +++ b/less/mixin.less @@ -1,12 +1,12 @@ -.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); + -webkit-backdrop-filter: @blur; + backdrop-filter: @blur; background: fade(@color, @opacity) !important; } } diff --git a/less/modal.less b/less/modal.less index 54fd0bf..32d8a14 100644 --- a/less/modal.less +++ b/less/modal.less @@ -46,9 +46,13 @@ & > .uk-dropdown { z-index: @modal-z-index + 1; } + + & > .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; diff --git a/less/progress.less b/less/progress.less index 3699a20..7c51f71 100644 --- a/less/progress.less +++ b/less/progress.less @@ -15,9 +15,11 @@ @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%)); @@ -110,6 +112,14 @@ } } } + + .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; diff --git a/less/subnav.less b/less/subnav.less index 25cf0f7..eb5a9f0 100644 --- a/less/subnav.less +++ b/less/subnav.less @@ -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; + } } } diff --git a/less/utility.less b/less/utility.less index 9be2444..e3b44be 100644 --- a/less/utility.less +++ b/less/utility.less @@ -1,6 +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; @@ -49,6 +51,10 @@ .uk-border-rounded-small { border-radius: @border-rounded-small-border-radius; } + + .uk-border-rounded-xlarge { + border-radius: @border-rounded-xlarge-border-radius; + } } /* Inverse */ diff --git a/less/variables.less b/less/variables.less index f670e63..cf0260f 100644 --- a/less/variables.less +++ b/less/variables.less @@ -36,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);