mue/src/components/helpers/carousel/carousel.scss

78 lines
1.2 KiB
SCSS
Raw Normal View History

2022-08-31 21:21:37 +00:00
.carousel {
2022-08-07 17:36:56 +00:00
position: relative;
width: 350px;
margin-left: 5px;
}
2022-08-31 21:21:37 +00:00
.carousel_viewport {
2022-08-07 17:36:56 +00:00
overflow: hidden;
width: 100%;
2022-08-31 21:21:37 +00:00
&.is-draggable {
cursor: move;
cursor: grab;
}
&.is-dragging {
cursor: grabbing;
}
2022-08-07 17:36:56 +00:00
}
2022-08-31 21:21:37 +00:00
.carousel_container {
2022-08-07 17:36:56 +00:00
display: flex;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: transparent;
margin-left: -10px;
}
2022-08-31 21:21:37 +00:00
.carousel_slide {
2022-08-07 17:36:56 +00:00
position: relative;
min-width: 100%;
padding-left: 10px;
2022-08-31 21:21:37 +00:00
img {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: auto;
min-height: 100%;
min-width: 100%;
max-width: none;
transform: translate(-50%, -50%);
}
2022-08-07 17:36:56 +00:00
}
2022-08-31 21:24:01 +00:00
.carousel_slide_inner {
2022-08-07 17:36:56 +00:00
position: relative;
overflow: hidden;
height: 190px;
}
2022-08-31 21:21:37 +00:00
.carousel_button {
2022-08-07 17:36:56 +00:00
outline: 0;
cursor: pointer;
touch-action: manipulation;
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
border: 0;
width: 30px !important;
height: 30px !important;
display: grid;
place-items: center;
justify-content: center;
align-items: center;
padding: 0;
2022-08-31 21:21:37 +00:00
&:disabled {
cursor: default;
opacity: 0.3;
}
&.prev {
left: 27px;
}
&.next {
right: 27px;
}
2022-11-06 11:59:59 +00:00
}