You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.0 KiB
Plaintext
141 lines
3.0 KiB
Plaintext
@slider-arrow-background: @global-background;
|
|
@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-active: @ciel-color;
|
|
@slider-nav-item-action-size: @icon-button-small-size;
|
|
@slider-nav-item-action-background: @global-background;
|
|
|
|
@inverse-slider-nav-item-background-active: fade(@global-inverse-color, 5%);
|
|
|
|
.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%;
|
|
width: @slider-arrow-width;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: @slider-arrow-background;
|
|
|
|
&.uk-slider-left {
|
|
padding-right: @slider-arrow-margin;
|
|
}
|
|
|
|
&.uk-slider-right {
|
|
padding-left: @slider-arrow-margin;
|
|
}
|
|
}
|
|
|
|
.uk-slider-container-tabs:extend(.uk-slider-container) {
|
|
position: relative;
|
|
|
|
& .uk-tab {
|
|
margin-left: -@tab-margin-horizontal;
|
|
}
|
|
|
|
& .uk-subnav {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .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 {
|
|
|
|
& > .uk-active {
|
|
box-shadow: 10px 10px 25px #0000001A;
|
|
background: @inverse-slider-nav-item-background-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile(@inverse-base-link-color, @inverse-base-link-color);
|
|
}
|