Overflow

Overflow utility class styles with module mixins for responsive modifiers.

Utilities (anchor)

Overflow utilities and property values
Utility class	Property values
.overflow-auto	overflow: auto
.overflow-x-auto	overflow-x: auto
.overflow-y-auto	overflow-y-auto: auto
.overflow-scroll	overflow: scroll
.overflow-x-scroll	overflow-x: scroll
.overflow-y-scroll	overflow-y: scroll
.overflow-hidden	overflow: hidden
.overflow-x-hidden	overflow-x: hidden
.overflow-y-hidden	overflow-y: hidden
.overflow-visible	overflow: visible
.overflow-x-visible	overflow-x: visible
.overflow-y-visible	overflow-y: visible
.overflow-initial	overflow: initial
.overflow-x-initial	overflow-x: initial
.overflow-y-initial	overflow-y: initial

Responsive mixins (anchor)

Responsive modifier mixins are provided to include where required in custom breakpoints, the utilities available use the following modifier class naming convention:

.overflow-auto
.overflow-auto-xxl
.overflow-auto-xl
.overflow-auto-lg
.overflow-auto-md
.overflow-auto-sm
.overflow-auto-xs
.overflow-auto-xxs

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss

@use "stylemods/scss" as *;
@include overflow-css;

// Example breakpoint
@media (width <= 480px) {
  @include overflow-sm-css;
}

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Enable them (and required breakpoints) using custom overrides or in the configuration.scss document:

overrides.scss

@use 'stylemods/scss/configuration' with (
  $enable-overflow: true,
  $enable-overflow-sm: true,
);

configuration.scss

$enable-overflow:      true !default;
$enable-overflow-sm:   true !default;

Using overrides in a custom setup is recommended. See using the framework for more information including how the styles can also be compiled within cascade layers if preferred or required.

Source code (anchor)

The modules and framework use the same source code, see Sass variables and Sass maps on the customizing page to learn how to customize the default values and styles.

overflow.scss

//  ------------------------------------------------------------
//  Overflow
//  ------------------------------------------------------------
$overflow-auto:       auto;
$overflow-scroll:     scroll;
$overflow-hidden:     hidden;
$overflow-visible:    visible;
$overflow-initial:    initial;

$overflow-values: (
  "auto": $overflow-auto,
  "scroll": $overflow-scroll,
  "hidden": $overflow-hidden,
  "visible": $overflow-visible,
  "initial": $overflow-initial,
) !default;

@mixin overflow-css {
  @each $name, $value in $overflow-values {
    .overflow-#{$name} {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name} {
      overflow-x: #{$value};
    }

    .overflow-y-#{$name} {
      overflow-y: #{$value};
    }
  }
}

// Breakpoint XXL
@mixin overflow-xxl-css {
  @each $name, $value in $overflow-values {
    .overflow-#{$name}-xxl {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name}-xxl {
      overflow-x: #{$value};
    }

    .overflow-y-#{$name}-xxl {
      overflow-y: #{$value};
    }
  }
}

// Breakpoint XL
@mixin overflow-xl-css {
  @each $name, $value in $overflow-values {
    .overflow-#{$name}-xl {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name}-xl {
      overflow-x: #{$value};
    }

    .overflow-y-#{$name}-xl {
      overflow-y: #{$value};
    }
  }
}

// Breakpoint LG
@mixin overflow-lg-css {
  @each $name, $value in $overflow-values {
    .overflow-#{$name}-lg {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name}-lg {
      overflow-x: #{$value};
    }

    .overflow-y-#{$name}-lg {
      overflow-y: #{$value};
    }
  }
}

// Breakpoint MD
@mixin overflow-md-css {
  @each $name, $value in $overflow-values {
    .overflow-#{$name}-md {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name}-md {
      overflow-x: #{$value};
    }

    .overflow-y-#{$name}-md {
      overflow-y: #{$value};
    }
  }
}

// Breakpoint SM
@mixin overflow-sm-css {
  @each $name, $value in $overflow-values {
    .overflow-#{$name}-sm {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name}-sm {
      overflow-x: #{$value};
    }

    .overflow-y-#{$name}-sm {
      overflow-y: #{$value};
    }
  }
}

// Breakpoint XS
@mixin overflow-xs-css {
  @each $name, $value in $overflow-values {
    .overflow-#{$name}-xs {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name}-xs {
      overflow-x: #{$value};
    }

    .overflow-y-#{$name}-xs {
      overflow-y: #{$value};
    }
  }
}

// Breakpoint XXS
@mixin overflow-xxs-css {
  @each $name, $value in $overflow-values {
    .overflow-#{$name}-xxs {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name}-xxs {
      overflow-x: #{$value};
    }

    .overflow-y-#{$name}-xxs {
      overflow-y: #{$value};
    }
  }
}