Overflow

Overflow utility 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)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

custom.scss

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

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

Source code (anchor)

overflow.scss

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

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

@mixin overflow-css {
  @each $name, $value in $overflow {
    .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 {
    .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 {
    .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 {
    .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 {
    .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 {
    .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 {
    .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 {
    .overflow-#{$name}-xxs {
      overflow: #{$value};
    }
    
    .overflow-x-#{$name}-xxs {
      overflow-x: #{$value};
    }

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