scrollbar-h-hover
|
--sf-scrollbar-track-color: rgba(0, 0, 0, 0);
--sf-scrollbar-thumb-color: rgba(0, 0, 0, 0);
--sf-scrollbar-track-hover-color: rgba(0, 0, 0, 0);
--sf-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.25);
--sf-scrollbar-track-hover-dark-color: rgba(0, 0, 0, 0);
--sf-scrollbar-thumb-hover-dark-color: rgba(255, 255, 255, 0.35);
--sf-scrollbar-size: 0.5rem;
display: block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
& > * {
margin-bottom: calc(var(--sf-scrollbar-size) * -1);
}
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-scrollbar {
width: 0;
height: var(--sf-scrollbar-size);
cursor: pointer;
}
&::-webkit-scrollbar-track {
background-color: var(--sf-scrollbar-track-color);
cursor: pointer;
}
&::-webkit-scrollbar-thumb {
background-color: var(--sf-scrollbar-thumb-color);
border-radius: var(--sf-scrollbar-size);
cursor: pointer;
}
@-moz-document url-prefix() {
padding-bottom: var(--sf-scrollbar-size);
}
@supports (-webkit-touch-callout: none) {
padding-bottom: var(--sf-scrollbar-size);
}
@supports (scrollbar-color: red blue) {
* {
scrollbar-color: var(--sf-scrollbar-thumb-color) var(--sf-scrollbar-track-color);
}
}
&:hover {
&::-webkit-scrollbar-track {
background-color: var(--sf-scrollbar-track-hover-color);
}
&::-webkit-scrollbar-thumb {
background-color: var(--sf-scrollbar-thumb-hover-color);
}
@supports (scrollbar-color: red blue) {
* {
scrollbar-color: var(--sf-scrollbar-thumb-hover-color) var(--sf-scrollbar-track-hover-color);
scrollbar-width: thin;
}
}
}
@variant dark {
&:hover {
&::-webkit-scrollbar-track {
background-color: var(--sf-scrollbar-track-hover-dark-color);
}
&::-webkit-scrollbar-thumb {
background-color: var(--sf-scrollbar-thumb-hover-dark-color);
}
@supports (scrollbar-color: red blue) {
* {
scrollbar-color: var(--sf-scrollbar-thumb-hover-dark-color) var(--sf-scrollbar-track-hover-dark-color);
}
}
}
}
|
scrollbar-v-hover
|
--sf-scrollbar-track-color: rgba(0, 0, 0, 0);
--sf-scrollbar-thumb-color: rgba(0, 0, 0, 0);
--sf-scrollbar-track-hover-color: rgba(0, 0, 0, 0);
--sf-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.25);
--sf-scrollbar-track-hover-dark-color: rgba(0, 0, 0, 0);
--sf-scrollbar-thumb-hover-dark-color: rgba(255, 255, 255, 0.35);
--sf-scrollbar-size: 0.5rem;
display: block;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
& > * {
padding-right: var(--sf-scrollbar-size);
margin-right: calc(var(--sf-scrollbar-size) * -1);
}
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-scrollbar {
width: var(--sf-scrollbar-size);
height: 0;
cursor: pointer;
}
&::-webkit-scrollbar-track {
background-color: var(--sf-scrollbar-track-color);
cursor: pointer;
}
&::-webkit-scrollbar-thumb {
background-color: var(--sf-scrollbar-thumb-color);
border-radius: var(--sf-scrollbar-size);
cursor: pointer;
}
@-moz-document url-prefix() {
padding-right: var(--sf-scrollbar-size);
}
@supports (-webkit-touch-callout: none) {
padding-right: var(--sf-scrollbar-size);
}
@supports (scrollbar-color: red blue) {
* {
scrollbar-color: var(--sf-scrollbar-thumb-color) var(--sf-scrollbar-track-color);
}
}
&:hover {
&::-webkit-scrollbar-track {
background-color: var(--sf-scrollbar-track-hover-color);
}
&::-webkit-scrollbar-thumb {
background-color: var(--sf-scrollbar-thumb-hover-color);
}
@supports (scrollbar-color: red blue) {
* {
scrollbar-color: var(--sf-scrollbar-thumb-hover-color) var(--sf-scrollbar-track-hover-color);
scrollbar-width: thin;
}
}
}
@variant dark {
&:hover {
&::-webkit-scrollbar-track {
background-color: var(--sf-scrollbar-track-hover-dark-color);
}
&::-webkit-scrollbar-thumb {
background-color: var(--sf-scrollbar-thumb-hover-dark-color);
}
@supports (scrollbar-color: red blue) {
* {
scrollbar-color: var(--sf-scrollbar-thumb-hover-dark-color) var(--sf-scrollbar-track-hover-dark-color);
}
}
}
}
|
scrollbar-dark
|
&:hover {
&::-webkit-scrollbar-track {
background-color: var(--sf-scrollbar-track-hover-dark-color);
}
&::-webkit-scrollbar-thumb {
background-color: var(--sf-scrollbar-thumb-hover-dark-color);
}
@supports (scrollbar-color: red blue) {
* {
scrollbar-color: var(--sf-scrollbar-thumb-hover-dark-color) var(--sf-scrollbar-track-hover-dark-color);
}
}
}
|
scrollbar-auto
|
scrollbar-width: auto;
|
scrollbar-thin
|
scrollbar-width: thin;
|
scrollbar-none
|
scrollbar-width: none;
|
scrollbar-gutter-auto
|
scrollbar-gutter: auto;
|
scrollbar-gutter-stable
|
scrollbar-gutter: stable;
|
scrollbar-gutter-both
|
scrollbar-gutter: stable both-edges;
|
scrollbar-thumb-current
|
--sf-scrollbar-thumb: currentColor;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-inherit
|
--sf-scrollbar-thumb: inherit;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-transparent
|
--sf-scrollbar-thumb: transparent;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-current
|
--sf-scrollbar-track: currentColor;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-inherit
|
--sf-scrollbar-track: inherit;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-transparent
|
--sf-scrollbar-track: transparent;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-<color-name>
|
--sf-scrollbar-thumb: <value>;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-red-500
|
--sf-scrollbar-thumb: var(--color-red-500);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-<color-name>/<opacity>
|
--sf-scrollbar-thumb: <value>;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-red-500/42
|
--sf-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 42%, transparent);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-[<value>]
|
--sf-scrollbar-thumb: <value>;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-[#ff0000]
|
--sf-scrollbar-thumb: #ff0000;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-[<value>]/<opacity>
|
--sf-scrollbar-thumb: <value>;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-[#ff0000]/42
|
--sf-scrollbar-thumb: rgba(255,0,0,0.42);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-(<custom-property>)
|
--sf-scrollbar-thumb: var(<custom-property>);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-(--my-color)
|
--sf-scrollbar-thumb: var(--my-color);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-(color:<custom-property>)
|
--sf-scrollbar-thumb: var(<custom-property>);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-thumb-(color:--my-color)
|
--sf-scrollbar-thumb: var(--my-color);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-<color-name>
|
--sf-scrollbar-track: <value>;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-red-500
|
--sf-scrollbar-track: var(--color-red-500);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-<color-name>/<opacity>
|
--sf-scrollbar-track: <value>;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-red-500/42
|
--sf-scrollbar-track: color-mix(in oklab, var(--color-red-500) 42%, transparent);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-[<value>]
|
--sf-scrollbar-track: <value>;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-[#ff0000]
|
--sf-scrollbar-track: #ff0000;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-[<value>]/<opacity>
|
--sf-scrollbar-track: <value>;
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-[#ff0000]/42
|
--sf-scrollbar-track: rgba(255,0,0,0.42);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-(<custom-property>)
|
--sf-scrollbar-track: var(<custom-property>);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-(--my-color)
|
--sf-scrollbar-track: var(--my-color);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-(color:<custom-property>)
|
--sf-scrollbar-track: var(<custom-property>);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
scrollbar-track-(color:--my-color)
|
--sf-scrollbar-track: var(--my-color);
scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
|
