mue/src/features/marketplace/components/Elements/Carousel/carousel.scss

85 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: 100%;
2022-08-07 17:36:56 +00:00
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;
}
2022-08-31 21:21:37 +00:00
&.is-dragging {
cursor: grabbing;
}
border-radius: 15px !important;
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;
-webkit-touch-callout: none;
2024-03-19 21:45:17 +00:00
user-select: none;
user-select: none;
2022-08-07 17:36:56 +00:00
-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: 250px;
2022-08-07 17:36:56 +00:00
}
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;
}
2022-08-31 21:21:37 +00:00
&.prev {
left: 27px;
}
2022-08-31 21:21:37 +00:00
&.next {
right: 27px;
}
2022-11-06 11:59:59 +00:00
}