style-forge.media/src/tablet/scroll.css

Style-Forge.Media: comprehensive CSS media query helpers for responsive web design.

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .\@tab\:sb\:a { scroll-behavior: auto }
  .\@tab\:sb\:s { scroll-behavior: smooth }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* /// */

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

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

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

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