Overflow

Overflow utility styles with module mixins for responsive modifiers.

Examples

.overflow-auto {
  overflow: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: 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;
}

Responsive mixins

Responsive modifier mixins are also provided with no pre-defined breakpoints so they can be included as modules with custom SCSS breakpoints. The following demonstrates the static and responsive names for the .overflow-auto utility.

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

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin(s) anywhere below.

custom.scss

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

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

Source

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 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};
    }
  }
}