Inset

Basic inset utility classes with module mixins for responsive modifiers.

Examples

.inset-top {
  --inset-top: 0;
  inset-block-start: var(--inset-top);
}

.inset-bottom {
  --inset-bottom: 0;
  inset-block-end: var(--inset-bottom);
}

.inset-left {
  --inset-left: 0;
  inset-inline-start: var(--inset-left);
}

.inset-right {
  --inset-right: 0;
  inset-inline-end: var(--inset-right);
}

.inset-top-unset {
  inset-block-start: unset;
}

.inset-bottom-unset {
  inset-block-end: unset;
}

.inset-left-unset {
  inset-inline-start: unset;
}

.inset-right-unset {
  inset-inline-end: unset;
}

Responsive mixins

Responsive modifier mixins are also provided with no pre-defined breakpoints so they can be included as modules with custom SCSS breakpoints, or alternatively enabled in the breakpoints included with the framework (see below). The following demonstrates the static and responsive names for the .inset-top utility.

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

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

Source

_inset.scss

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

$inset: (
  "inset-top": $top,
  "inset-bottom": $bottom,
  "inset-left": $left,
  "inset-right": $right,
);

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

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

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

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

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

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