beta-scss/src/responsive.scss

@use "sass:math";

@import "variables";

// Responsive grid
[class^="responsive\:"],
[class*="responsive\:"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  > div {
    position: relative;
  }
}

// Build media queries for differents columns grid (2, 3, 4, 6, 8, 10, 12) by reference to 1920px width screen
// customize by defining $responsive-columns variable before beta-scss import
@each $columns in $responsive-columns {
  $factor: math.div(1920, $columns);
  @for $i from $columns through 1 {
    @media (min-width: #{$i * $factor} + "px") {
      .responsive\:#{$columns} {
        > div {
          flex-basis: #{math.div(100%, $i)};
        }
      }
    }
  }
  // 4K resolution
  @media (min-width: 2560px) {
    .responsive\:#{$columns} {
      > div {
        flex-basis: #{math.div(100%, $columns)};
      }
    }
  }
}

// Generate gutters for responsive columns
@each $name, $value in $paddings {
  div[class^="responsive"] {
    &.column-gap\:#{$name} {
      & > div {
        padding-left: $value;
        padding-right: $value;
      }
    }

    &.row-gap\:#{$name} {
      & > div {
        padding-top: $value;
        padding-bottom: $value;
      }
    }
  }
}