Overflow

View Source

A series of utility classes that adjust the overflow property of a selector, with support for responsive modifiers.

Install

npm install seed-overflow --save

Dependencies

Usage

Horizontal and vertical

All of the following classes support responsive modifiers.

Class Overflow
.u-overflow-visible visible
.u-overflow-hidden hidden
.u-overflow-scroll scroll
.u-overflow-auto auto

Horizontal only

All of the following classes support responsive modifiers.

Class Overflow
.u-overflow-x-visible visible
.u-overflow-x-hidden hidden
.u-overflow-x-scroll scroll
.u-overflow-x-auto auto

Vertical only

All of the following classes support responsive modifiers.

Class Overflow
.u-overflow-y-visible visible
.u-overflow-y-hidden hidden
.u-overflow-y-scroll scroll
.u-overflow-y-auto auto

Configurations

Below are the default Sass configuration variables for seed-overflow. The variables can be found in the pack’s _config.scss file.

seed-overflow/_config.scss
// Namespaces
$seed-overflow-namespace: "u-overflow" !default;

// Overflow
$seed-overflow: (
  visible: visible,
  hidden: hidden,
  scroll: scroll,
  auto: auto,
  x-visible: visible,
  x-hidden: hidden,
  x-scroll: scroll,
  x-auto: auto,
  y-visible: visible,
  y-hidden: hidden,
  y-scroll: scroll,
  y-auto: auto
) !default;
↑Back to top
© Help Scout 2024