Add dark mode for progress and add slider-* classes in slider
This commit is contained in:
parent
3a4aa92c44
commit
51ac1b254b
|
@ -8,6 +8,9 @@
|
||||||
@progress-circle-text-font-weight: @text-bold-weight;
|
@progress-circle-text-font-weight: @text-bold-weight;
|
||||||
@progress-circle-text-font-size: @global-large-font-size;
|
@progress-circle-text-font-size: @global-large-font-size;
|
||||||
|
|
||||||
|
@inverse-progress-background: @inverse-global-color;
|
||||||
|
@inverse-progress-bar-background: @global-secondary-background;
|
||||||
|
|
||||||
.hook-progress() {
|
.hook-progress() {
|
||||||
border-radius: @progress-border-radius;
|
border-radius: @progress-border-radius;
|
||||||
box-shadow: @progress-box-shadow;
|
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
116
less/slider.less
|
@ -2,6 +2,50 @@
|
||||||
@slider-arrow-width: 50px;
|
@slider-arrow-width: 50px;
|
||||||
@slider-arrow-margin: 5px;
|
@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() {
|
.hook-slider-misc() {
|
||||||
.uk-slider-arrow {
|
.uk-slider-arrow {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -31,4 +75,76 @@
|
||||||
margin-left: -@subnav-margin-horizontal;
|
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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue