style-forge.helpers/src/scroll.css

Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.

.sb\:a { scroll-behavior: auto }
.sb\:s { scroll-behavior: smooth }

.sst\:n { scroll-snap-type: none }
.sst\:x { scroll-snap-type: x mandatory }
.sst\:y { scroll-snap-type: y mandatory }
.sst\:b { scroll-snap-type: block mandatory }
.sst\:in { scroll-snap-type: inline mandatory }
.sst\:x\:p { scroll-snap-type: x proximity }
.sst\:y\:p { scroll-snap-type: y proximity }
.sst\:b\:p { scroll-snap-type: block proximity }
.sst\:in\:p { scroll-snap-type: inline proximity }

.ssa\:s { scroll-snap-align: start }
.ssa\:e { scroll-snap-align: end }
.ssa\:c { scroll-snap-align: center }
.ssa\:none { scroll-snap-align: none }

.sp { scroll-padding: var(--sf-rem) }
.sp\:0 { scroll-padding: 0 }
.sp\:xs { scroll-padding: var(--sf-rem-xs) }
.sp\:sm { scroll-padding: var(--sf-rem-sm) }
.sp\:s { scroll-padding: var(--sf-rem-s) }
.sp\:ms { scroll-padding: var(--sf-rem-ms) }
.sp\:ls { scroll-padding: var(--sf-rem-ls) }
.sp\:md { scroll-padding: var(--sf-rem-md) }
.sp\:lg { scroll-padding: var(--sf-rem-lg) }
.sp\:xl { scroll-padding: var(--sf-rem-xl) }

.sp\:t { scroll-padding-top: var(--sf-rem) }
.sp\:r { scroll-padding-right: var(--sf-rem) }
.sp\:b { scroll-padding-bottom: var(--sf-rem) }
.sp\:l { scroll-padding-left: var(--sf-rem) }

.sm { scroll-margin: var(--sf-rem) }
.sm\:0 { scroll-margin: 0 }
.sm\:xs { scroll-margin: var(--sf-rem-xs) }
.sm\:sm { scroll-margin: var(--sf-rem-sm) }
.sm\:s { scroll-margin: var(--sf-rem-s) }
.sm\:ms { scroll-margin: var(--sf-rem-ms) }
.sm\:ls { scroll-margin: var(--sf-rem-ls) }
.sm\:md { scroll-margin: var(--sf-rem-md) }
.sm\:lg { scroll-margin: var(--sf-rem-lg) }
.sm\:xl { scroll-margin: var(--sf-rem-xl) }

.sm\:t { scroll-margin-top: var(--sf-rem) }
.sm\:r { scroll-margin-right: var(--sf-rem) }
.sm\:b { scroll-margin-bottom: var(--sf-rem) }
.sm\:l { scroll-margin-left: var(--sf-rem) }

.ov { overflow: auto }
.ov\:h { overflow: hidden }
.ov\:s { overflow: scroll }
.ov\:v { overflow: visible }

.ov\:x { overflow-x: auto }
.ov\:x\:h, .ov\:h\:x { overflow-x: hidden }
.ov\:x\:s, .ov\:s\:x { overflow-x: scroll }
.ov\:x\:v, .ov\:v\:x { overflow-x: visible }

.ov\:y { overflow-y: auto }
.ov\:y\:h, .ov\:h\:y { overflow-y: hidden }
.ov\:y\:s, .ov\:s\:y { overflow-y: scroll }
.ov\:y\:v, .ov\:v\:y { overflow-y: visible }

.osb\:a { overscroll-behavior: auto }
.osb\:c { overscroll-behavior: contain }
.osb\:n { overscroll-behavior: none }

.osb\:x\:a { overscroll-behavior-x: auto }
.osb\:x\:c { overscroll-behavior-x: contain }
.osb\:x\:n { overscroll-behavior-x: none }

.osb\:y\:a { overscroll-behavior-y: auto }
.osb\:y\:c { overscroll-behavior-y: contain }
.osb\:y\:n { overscroll-behavior-y: none }

.sb\:w\:sm { scrollbar-width: thin }
.sb\:w\:md { scrollbar-width: auto }
.sb\:w\:none { scrollbar-width: none }

.sb\:c\:t { scrollbar-color: transparent }
.sb\:c\:d { scrollbar-color: dark }
.sb\:c\:l { scrollbar-color: light }

/* /// */

html.var .sp { scroll-padding: 16px }
html.var .sp\:0 { scroll-padding: 0 }
html.var .sp\:xs { scroll-padding: 4px }
html.var .sp\:sm { scroll-padding: 8px }
html.var .sp\:s { scroll-padding: 10px }
html.var .sp\:ms { scroll-padding: 12px }
html.var .sp\:ls { scroll-padding: 14px }
html.var .sp\:md { scroll-padding: 16px }
html.var .sp\:lg { scroll-padding: 18px }
html.var .sp\:xl { scroll-padding: 20px }

html.var .sp\:t { scroll-padding-top: 16px }
html.var .sp\:r { scroll-padding-right: 16px }
html.var .sp\:b { scroll-padding-bottom: 16px }
html.var .sp\:l { scroll-padding-left: 16px }

html.var .sm { scroll-margin: 16px }
html.var .sm\:0 { scroll-margin: 0 }
html.var .sm\:xs { scroll-margin: 4px }
html.var .sm\:sm { scroll-margin: 8px }
html.var .sm\:s { scroll-margin: 10px }
html.var .sm\:ms { scroll-margin: 12px }
html.var .sm\:ls { scroll-margin: 14px }
html.var .sm\:md { scroll-margin: 16px }
html.var .sm\:lg { scroll-margin: 18px }
html.var .sm\:xl { scroll-margin: 20px }

html.var .sm\:t { scroll-margin-top: 16px }
html.var .sm\:r { scroll-margin-right: 16px }
html.var .sm\:b { scroll-margin-bottom: 16px }
html.var .sm\:l { scroll-margin-left: 16px }