70 lines
1.2 KiB
CSS
70 lines
1.2 KiB
CSS
.scroll-container {
|
|
overflow-x: auto;
|
|
scroll-behavior: smooth;
|
|
padding-bottom: 20px;
|
|
margin-inline: 0px;
|
|
}
|
|
|
|
.scroll-wrapper {
|
|
display: flex;
|
|
gap: 5px;
|
|
scroll-snap-type: x mandatory;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.scroll-wrapper > li {
|
|
scroll-snap-align: start;
|
|
flex: 0 0 auto;
|
|
width: 272px; /* o el tamaño que mejor se adapte a tus cards */
|
|
}
|
|
|
|
.scroll-container::-webkit-scrollbar {
|
|
height: 10px;
|
|
}
|
|
|
|
.scroll-container::-webkit-scrollbar-thumb {
|
|
background: var(--AJsystem-blue);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.scroll-controls {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.scroll-btn {
|
|
background-color: var(--AJsystem-blue);
|
|
color: white;
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
border: none;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
transition: background 1s;
|
|
}
|
|
|
|
.scroll-btn:hover {
|
|
background-color: var(--AJsystem-glow);
|
|
}
|
|
|
|
.scroll-btn.left {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.scroll-btn.right {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.scroll-container {
|
|
overflow-x: scroll;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
}
|
|
|
|
.scroll-container::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|