@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
59 lines (56 loc) • 1.65 kB
text/less
.esl-scrollbar-arrows-init(@tagName: esl-scrollbar) {
@{tagName} {
&:not([horizontal]) {
padding-top: 15px;
padding-bottom: 15px;
.scrollbar-track {
&::before,
&::after {
content: '';
position: absolute;
display: block;
height: 10px;
width: 100%;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' xml:space='preserve'%3E%3Cpolyline points='0,0 8,8 16,0' fill='none' stroke='%23BBBBBB' stroke-width='5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
&::before {
top: -15px;
transform: scaleY(-1);
}
&::after {
bottom: -15px;
}
}
}
&[horizontal] {
padding-left: 15px;
padding-right: 15px;
.scrollbar-track {
&::before,
&::after {
content: '';
position: absolute;
display: block;
height: 100%;
width: 10px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' xml:space='preserve'%3E%3Cpolyline points='0,16 8,8 0,0' fill='none' stroke='%23BBBBBB' stroke-width='5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
&::before {
left: -15px;
transform: scaleX(-1);
}
&::after {
right: -15px;
}
}
}
&[at-end] .scrollbar-track::after,
&[at-start] .scrollbar-track::before {
opacity: 0.25;
}
}
}