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

Add dark mode for progress and add slider-* classes in slider

This commit is contained in:
Konstantinos Triantafyllou 2023-10-05 17:01:22 +03:00
parent 3a4aa92c44
commit 51ac1b254b
2 changed files with 129 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
less/progress.less
View File

@ -8,6 +8,9 @@
@progress-circle-text-font-weight: @text-bold-weight;
@progress-circle-text-font-size: @global-large-font-size;
@inverse-progress-background: @inverse-global-color;
@inverse-progress-bar-background: @global-secondary-background;
.hook-progress() {
border-radius: @progress-border-radius;
box-shadow: @progress-box-shadow;
@ -37,3 +40,13 @@
}
}
}
.hook-inverse() {
.uk-progress {
background-color: @inverse-progress-background;
}
.uk-progress::-webkit-progress-value, .uk-progress::-moz-progress-bar {
background-color: @inverse-progress-bar-background;
}
}

116
less/slider.less
View File

@ -2,6 +2,50 @@
@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-hover: @ciel-color;
@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-hover: fade(@global-inverse-color, 15%);
@inverse-slider-nav-item-background-active: fade(@global-inverse-color, 15%);
.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 +75,76 @@
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;
}
}
}
& > *:hover {
background: @slider-nav-item-background-hover;
}
& > .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 {
& > *:hover {
background: @inverse-slider-nav-item-background-hover;
}
& > .uk-active {
box-shadow: 10px 10px 25px #0000001A;
background: @inverse-slider-nav-item-background-active;
}
}
}
.mobile(@inverse-base-link-color, @inverse-base-link-color);
}