Sha256: 958fdf31c5fb4ad74a687fccc24286dd844bac86529117b58864b9ab2dcf51c5
Contents?: true
Size: 1.9 KB
Versions: 33
Compression:
Stored size: 1.9 KB
Contents
//
// flickity.scss
// Library overrides
//
// Controls
.flickity-button {
display: flex;
align-items: center;
justify-content: center;
width: $input-height;
height: $input-height;
background-color: $primary;
box-shadow: $box-shadow-light;
color: $white;
&::before, &::after {
font-family: "Feather";
}
@include hover-focus {
background-color: $primary;
box-shadow: $box-shadow;
}
}
.flickity-button.previous {
left: 0;
transform: translate(calc(-50% + #{$grid-gutter-width / 4}), -50%);
@include media-breakpoint-up(md) {
transform: translate(-50%, -50%);
}
&::before {
content: "\e910";
}
}
.flickity-button.next {
right: 0;
transform: translate(calc(50% - #{$grid-gutter-width / 4}), -50%);
@include media-breakpoint-up(md) {
transform: translate(50%, -50%);
}
&::before {
content: "\e912";
}
}
.flickity-button-icon {
display: none;
}
// Button white
.flickity-button-white .flickity-button {
background-color: $white;
color: $primary;
}
// Button bottom
.flickity-button-bottom .flickity-button {
top: auto;
bottom: 1.5rem;
transform: none;
}
.flickity-button-bottom .flickity-button.previous {
left: auto;
right: 6.375rem;
}
.flickity-button-bottom .flickity-button.next {
left: auto;
right: 2.5rem;
}
// Button inset
.flickity-button-inset .flickity-button {
transform: translateY(-50%);
}
.flickity-button-inset .flickity-button.previous {
left: 1.5rem;
}
.flickity-button-inset .flickity-button.next {
right: 1.5rem;
}
// Viewport
.flickity-viewport-visible .flickity-viewport {
overflow: visible;
}
// Adaptive height
[data-flickity*='"adaptiveHeight": true'] .flickity-viewport {
transition: all .5s ease; // Make the transition match the rough duration of flicking between items
}
Version data entries
33 entries across 33 versions & 2 rubygems