.position_relative { position: relative; } .position_absolute { position: absolute; } .position_fixed { position: fixed; } .position_sticky { position: sticky; } .position_static { position: static; } .z_index_1 { z-index: $z_1 !important; } .z_index_2 { z-index: $z_2 !important; } .z_index_3 { z-index: $z_3 !important; } .z_index_4 { z-index: $z_4 !important; } .z_index_5 { z-index: $z_5 !important; } .z_index_6 { z-index: $z_6 !important; } .z_index_7 { z-index: $z_7 !important; } .z_index_8 { z-index: $z_8 !important; } .z_index_9 { z-index: $z_9 !important; } .z_index_10 { z-index: $z_10 !important; } $zIndex_values: ( 1: $z_1, 2: $z_2, 3: $z_3, 4: $z_4, 5: $z_5, 6: $z_6, 7: $z_7, 8: $z_8, 9: $z_9, 10: $z_10 ); @each $size, $size_value in $breakpoints_grid { @each $zIndex_value, $zIndex_variable in $zIndex_values { $min_size: map-get($size_value, "min"); $max_size: map-get($size_value, "max"); .z_index_#{$size}_#{$zIndex_value} { @include break_on($min_size, $max_size) { z-index: $zIndex_variable !important; } } } } $space_classes: ( xxs: $space_xxs, xs: $space_xs, sm: $space_sm, md: $space_md, lg: $space_lg, xl: $space_xl, 0: 0, auto: auto, initial: initial, inherit: inherit ); $positions: "top", "right", "bottom", "left"; @mixin position-property($position, $space_name, $space, $is_inset: false) { @if $space_name == "0" { #{$position}: 0 !important; } @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" { #{$position}: #{$space} !important; } @else { @if $is_inset { #{$position}: #{$space} !important; } @else { #{$position}: #{-$space} !important; } } } @each $position in $positions { @each $space_name, $space in $space_classes { $space_name_str: "#{ $space_name }"; .#{$position}_#{$space_name_str} { @include position-property($position, $space_name_str, $space) } .#{$position}_#{$space_name_str}_inset { @include position-property($position, $space_name_str, $space, true) } } }