Inset

Basic inset utility class styles with module mixins for responsive modifiers.

Utilities (anchor)

Inset utilities and property values
Utility class	Property values
.inset-all	inset: var(--all, 0)
.inset-block	inset-block: var(--block, 0)
.inset-inline	inset-inline: var(--inline, 0)
.inset-top	inset-block-start: var(--top, 0)
.inset-bottom	inset-block-end: var(--bottom, 0)
.inset-left	inset-inline-start: var(--left, 0)
.inset-right	inset-inline-end: var(--right, 0)
.inset-all-initial	inset: initial
.inset-block-initial	inset-block: initial
.inset-inline-initial	inset-inline: initial
.inset-top-initial	inset-block-start: initial
.inset-bottom-initial	inset-block-end: initial
.inset-left-initial	inset-inline-start: initial
.inset-right-initial	inset-inline-end: 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:

.inset-top
.inset-top-xxl
.inset-top-xl
.inset-top-lg
.inset-top-md
.inset-top-sm
.inset-top-xs
.inset-top-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 inset-css;

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

Source code (anchor)

inset.scss

//  ------------------------------------------------------------
//  Inset
//  ------------------------------------------------------------
$inset-all:       inset;
$inset-block:     inset-block;
$inset-inline:    inset-inline;
$inset-top:       inset-block-start;
$inset-bottom:    inset-block-end;
$inset-left:      inset-inline-start;
$inset-right:     inset-inline-end;

$inset-values: (
  "all": $inset-all,
  "block": $inset-block,
  "inline": $inset-inline,
  "top": $inset-top,
  "bottom": $inset-bottom,
  "left": $inset-left,
  "right": $inset-right,
);

@mixin inset-css {  
  @each $name, $value in $inset-values {
    .inset-#{$name} {
      #{$value}: var(--#{$name}, 0);
    }
  }
  
  @each $name, $value in $inset-values {
    .inset-#{$name}-initial {
      #{$value}: initial;
    }
  }
}

@mixin inset-xxl-css { 
  @each $name, $value in $inset-values {
    .inset-#{$name}-xxl {
      #{$value}: var(--#{$name}, 0);
    }
  }
  
  @each $name, $value in $inset-values {
    .inset-#{$name}-initial-xxl {
      #{$value}: initial;
    }
  }
}

@mixin inset-xl-css { 
  @each $name, $value in $inset-values {
    .inset-#{$name}-xl {
      #{$value}: var(--#{$name}, 0);
    }
  }
  
  @each $name, $value in $inset-values {
    .inset-#{$name}-initial-xl {
      #{$value}: initial;
    }
  }
}

@mixin inset-lg-css {  
  @each $name, $value in $inset-values {
    .inset-#{$name}-lg {
      #{$value}: var(--#{$name}, 0);
    }
  }
  
  @each $name, $value in $inset-values {
    .inset-#{$name}-initial-lg {
      #{$value}: initial;
    }
  }
}

@mixin inset-md-css {  
  @each $name, $value in $inset-values {
    .inset-#{$name}-md {
      #{$value}: var(--#{$name}, 0);
    }
  }
  
  @each $name, $value in $inset-values {
    .inset-#{$name}-initial-md {
      #{$value}: initial;
    }
  }
}

@mixin inset-sm-css {  
  @each $name, $value in $inset-values {
    .#{$name}-sm {
      #{$value}: var(--#{$name}, 0);
    }
  }
  
  @each $name, $value in $inset-values {
    .#{$name}-initial-sm {
      #{$value}: initial;
    }
  }
}

@mixin inset-xs-css {  
  @each $name, $value in $inset-values {
    .#{$name}-xs {
      #{$value}: var(--#{$name}, 0);
    }
  }
  
  @each $name, $value in $inset-values {
    .#{$name}-initial-xs {
      #{$value}: initial;
    }
  }
}

@mixin inset-xxs-css {  
  @each $name, $value in $inset-values {
    .#{$name}-xxs {
      #{$value}: var(--#{$name}, 0);
    }
  }
  
  @each $name, $value in $inset-values {
    .#{$name}-initial-xxs {
      #{$value}: initial;
    }
  }
}