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

Landing tabs: Add border-left and radius-left, reduce gutter between sections and align section content with Tab name.

This commit is contained in:
Konstantinos Triantafyllou 2023-07-06 16:30:04 +03:00
parent ad6883318d
commit 63c54c7db3
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
less/landing.less
View File

@ -32,10 +32,14 @@
@landing-section-min-height: 60vh;
@landing-section-border-width: 3px;
@landing-section-gutter-vertical: @global-large-gutter;
@landing-section-gutter-horizontal: @global-small-margin;
@landing-section-separator: fade(@landing-portal-color, @global-opacity);
@landing-tab-background: @global-muted-background;
@landing-tab-border-width: 4px;
@landing-tab-border-horizontal-width: @global-border-width;
@landing-tab-border-horizontal: @global-border;
@landing-tab-border-top-width: 4px;
@landing-tab-border-radius: @global-small-border-radius;
@landing-tab-background-active: @global-background;
@landing-tab-color-active: @landing-portal-color;
@ -89,10 +93,10 @@
#landing-sections {
.landing-section {
padding-bottom: 80px;
padding: (@landing-section-gutter-vertical/2) @landing-section-gutter-horizontal @landing-section-gutter-vertical @landing-section-gutter-horizontal;
&:not(:first-child) {
margin-top: 80px;
margin-top: @landing-section-gutter-vertical;
}
&:not(.landing-section-height-auto) {
@ -141,16 +145,20 @@
.landing-tab:extend(.uk-text-small) {
background: @landing-tab-background;
border-radius: @landing-tab-border-radius;
border-left: @border-width;
& .uk-tab {
& > * > a {
border-bottom: none;
border-top: @landing-tab-border-width solid transparent;
border-left: @landing-tab-border-horizontal-width solid @landing-tab-border-horizontal;
border-right: @landing-tab-border-horizontal-width solid @landing-tab-border-horizontal;
border-top: @landing-tab-border-top-width solid transparent;
}
& > .uk-active > a {
border-color: @landing-tab-border-active;
border-radius: @landing-tab-border-radius 0 0 0;
border-top: @landing-tab-border-top-width solid @landing-tab-border-active;
background: @landing-tab-background-active;
color: @landing-tab-color-active;
position: relative;