src/components/ScrollView/style.less (52 lines of code) (raw):
.ScrollView {
overflow: hidden;
&-scroller {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none; // IE/Edge
scrollbar-width: none; // FF
&::-webkit-scrollbar {
display: none;
}
}
&--fullWidth {
margin: 0 calc(var(--gutter) * -1);
}
&--fullWidth:not(&--hasControls) &-inner {
padding: 0 var(--gutter);
}
}
.ScrollView--x {
.ScrollView-scroller {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: -18Px;
padding-bottom: 18Px;
}
.ScrollView-inner {
display: flex;
}
.ScrollView-item {
flex: 0 0 auto;
margin-left: @scroll-view-spacing-x;
&:first-child {
margin-left: 0;
}
}
}
.ScrollView--hasControls {
display: flex;
align-items: center;
.ScrollView-scroller {
flex: 1;
}
}
.ScrollView-control {
padding: 6px;
color: var(--color-text-3);
font-size: @font-size-md;
&:not(:disabled):hover {
color: var(--brand-1);
}
}