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-min-height: 60vh;
@landing-section-border-width: 3px; @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-section-separator: fade(@landing-portal-color, @global-opacity);
@landing-tab-background: @global-muted-background; @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-border-radius: @global-small-border-radius;
@landing-tab-background-active: @global-background; @landing-tab-background-active: @global-background;
@landing-tab-color-active: @landing-portal-color; @landing-tab-color-active: @landing-portal-color;
@ -89,10 +93,10 @@
#landing-sections { #landing-sections {
.landing-section { .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) { &:not(:first-child) {
margin-top: 80px; margin-top: @landing-section-gutter-vertical;
} }
&:not(.landing-section-height-auto) { &:not(.landing-section-height-auto) {
@ -141,16 +145,20 @@
.landing-tab:extend(.uk-text-small) { .landing-tab:extend(.uk-text-small) {
background: @landing-tab-background; background: @landing-tab-background;
border-radius: @landing-tab-border-radius; border-radius: @landing-tab-border-radius;
border-left: @border-width;
& .uk-tab { & .uk-tab {
& > * > a { & > * > a {
border-bottom: none; 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 { & > .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; background: @landing-tab-background-active;
color: @landing-tab-color-active; color: @landing-tab-color-active;
position: relative; position: relative;