element/packages/theme-default/src/scrollbar.css

72 lines
1.2 KiB
CSS

@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b scrollbar {
overflow: hidden;
position: relative;
&:hover,
&:active,
&:focus {
.el-scrollbar__bar {
opacity: 1;
transition: opacity 340ms ease-out;
}
}
@e wrap {
overflow: scroll;
@m hidden-default {
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
}
@e thumb {
position: relative;
display: block;
size: 0;
cursor: pointer;
border-radius: inherit;
background-color: var(--scrollbar-background-color);
transition: .3s background-color;
&:hover {
background-color: var(--scrollbar-hover-background-color);
}
}
@e bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 4px;
opacity: 0;
transition: opacity 120ms ease-out;
@when vertical {
width: 6px;
top: 2px;
> div {
width: 100%;
}
}
@when horizontal {
height: 6px;
left: 2px;
> div {
height: 100%;
}
}
}
}
}