formstone/src/less/imports/grid-flex-mixins.less

Library of modular front end components.

// !Extendable Classes

  .fs_grid_row {
    // !Row Default
    min-width: @fs-grid-width-xs;

    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;

    // !Sm fluid
    @media screen and (max-width: (@fs-grid-width-break-md - 1px)) {
      .fs_grid_row_fluid;
    }

    @media screen and (min-width: @fs-grid-width-break-md) {
      width: @fs-grid-width-md;
    }

    @media screen and (min-width: @fs-grid-width-break-lg) {
      width: @fs-grid-width-lg;
    }

    @media screen and (min-width: @fs-grid-width-break-xl) {
      width: @fs-grid-width-xl;
    }
  }

  .fs_grid_row_fluid {
    width: 96%;
    width: ~'calc(100% - 40px)';
  }

  .fs_grid_row_adaptive {

    @media screen and (max-width: (@fs-grid-width-break-sm - 1px)) {
      width: @fs-grid-width-xs;
    }

    @media screen and (min-width: @fs-grid-width-break-sm) and (max-width: (@fs-grid-width-break-md - 1px)) {
      width: @fs-grid-width-sm;
    }
  }

  // Reverse

  .fs_grid_row_reverse {
    flex-direction: row-reverse;
  }

  //

  .fs_grid_row_justify_around {
    justify-content: space-around;
  }

  .fs_grid_row_justify_between {
    justify-content: space-between;
  }

  //

  .fs_grid_row_justify_start {
    justify-content: flex-start;
  }

  .fs_grid_row_justify_center {
    justify-content: center;
  }

  .fs_grid_row_justify_end {
    justify-content: flex-end;
  }

  //

  .fs_grid_row_align_start {
    align-items: flex-start;
  }

  .fs_grid_row_align_center {
    align-items: center;
  }

  .fs_grid_row_align_end {
    align-items: flex-end;
  }

  //

  .fs_grid_row_row {
    min-width: auto;
    width: 100% + (@fs-grid-gutter * 2);

    margin-left: -@fs-grid-gutter;
    margin-right: -@fs-grid-gutter;
  }

  .fs_grid_row_row_contained {
    width: 100%;

    margin-left: 0;
    margin-right: 0;
  }

  // Destroy

  .fs_grid_row_destroy {
    width: auto;

    margin-left: 0;
    margin-right: 0;
  }

  // Cells

  .fs_grid_cell {
    .fs_grid_column(1, @fs-grid-gutter, 1);

    flex-basis: auto;
    // float: left;
    margin-left: @fs-grid-gutter;
    margin-right: @fs-grid-gutter;
  }

  .fs_grid_cell_padded {
    box-sizing: content-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: @fs-grid-gutter;
    padding-right: @fs-grid-gutter;
  }

  .fs_grid_cell_contained {
    width: 100%;

    flex: 0 0 100%;
    margin-left: 0;
    margin-right: 0;
  }

  //

  .fs_grid_cell_justify_start {
    margin-right: auto;
  }

  .fs_grid_cell_justify_center {
    margin-right: auto;
    margin-left: auto;
  }

  .fs_grid_cell_justify_end {
    margin-left: auto;
  }

  .fs_grid_cell_align_start {
    align-self: flex-start;
  }

  .fs_grid_cell_align_center {
    align-self: center;
  }

  .fs_grid_cell_align_end {
    align-self: flex-end;
  }

  // deprecated
  .fs_grid_cell_right {
    &:extend(.fs_grid_cell_justify_end all);
  }
  // deprecated
  .fs_grid_cell_centered {
    &:extend(.fs_grid_cell_justify_center all);
  }

  .fs_grid_cell_first {
    order: -1;
  }

  .fs_grid_cell_last {
    order: 1;
  }

  // Destroy

  .fs_grid_cell_destroy {
    width: auto;

    // float: none;
    margin-left: 0;
    margin-right: 0;
  }

// !Mixins

  // Row Alignment

  .fs_grid_row_alignment(@class) {

    &.@{class}-reverse {
      .fs_grid_row_reverse;
    }

    &.@{class}-justify-around {
      .fs_grid_row_justify_around;
    }

    &.@{class}-justify-between {
      .fs_grid_row_justify_between;
    }

    &.@{class}-justify-start {
      .fs_grid_row_justify_start;
    }

    &.@{class}-justify-center {
      .fs_grid_row_justify_center;
    }

    &.@{class}-justify-end {
      .fs_grid_row_justify_end;
    }

    &.@{class}-align-start {
      .fs_grid_row_align_start;
    }

    &.@{class}-align-center {
      .fs_grid_row_align_center;
    }

    &.@{class}-align-end {
      .fs_grid_row_align_end;
    }
  }

  // Cell Alignment

  .fs_grid_columns_alignment(@class) {

    &.@{class}-first {
      .fs_grid_cell_first;
    }

    &.@{class}-last {
      .fs_grid_cell_last;
    }

    &.@{class}-align-start {
      .fs_grid_cell_align_start;
    }

    &.@{class}-align-center {
      .fs_grid_cell_align_center;
    }

    &.@{class}-align-end {
      .fs_grid_cell_align_end;
    }

    &.@{class}-justify-start {
      .fs_grid_cell_justify_start;
    }

    &.@{class}-justify-center {
      .fs_grid_cell_justify_center;
    }

    &.@{class}-justify-end {
      .fs_grid_cell_justify_end;
    }
  }

  // Column

  .fs_grid_column(@total, @margin, @count) {
    width: (((100% / @total) * @count) - (@margin * 2));
    max-width: (((100% / @total) * @count) - (@margin * 2));
    min-width: 0;

    flex: 0 0 (((100% / @total) * @count) - (@margin * 2));
  }

  // Columns

  .fs_grid_columns(@class, @margin, @total, @combo:~"", @count:1) when (@count <= @total) {

    // Percentage
    & when (@combo = "") {

      .@{class}-@{count} {
        .fs_grid_column(@total, @margin, @count);
      }
    }

    & when not (@combo = "") {

      [class*="@{combo}"] {

        &.@{class}-@{count} {
          .fs_grid_column(@total, @margin, @count);
        }
      }
    }

    .fs_grid_columns(@class, @margin, @total, @combo, (@count + 1));
  }

  // Columns - Fractioned

  .fs_grid_columns_fractioned(@class, @margin, @combo:~"") {

    // Percentage
    & when (@combo = "") {

      .@{class}-fifth {
        .fs_grid_column(5, @margin, 1);
      }

      .@{class}-fourth {
        .fs_grid_column(4, @margin, 1);
      }

      .@{class}-third {
        .fs_grid_column(3, @margin, 1);
      }

      .@{class}-half {
        .fs_grid_column(2, @margin, 1);
      }

      .@{class}-full {
        .fs_grid_column(1, @margin, 1);
      }
    }

    & when not (@combo = "") {

      [class*="@{combo}"] {

        &.@{class}-fifth {
          .fs_grid_column(5, @margin, 1);
        }

        &.@{class}-fourth {
          .fs_grid_column(4, @margin, 1);
        }

        &.@{class}-third {
          .fs_grid_column(3, @margin, 1);
        }

        &.@{class}-half {
          .fs_grid_column(2, @margin, 1);
        }

        &.@{class}-full {
          .fs_grid_column(1, @margin, 1);
        }
      }
    }
  }

  // Columns - Pushed

  .fs_grid_column_pushed(@total, @margin, @count) {
    margin-left: ((100% / @total) * @count) + @margin;
  }

  .fs_grid_columns_pushed(@class, @margin, @total, @combo:~"", @count:1) when (@count < @total) {

    & when (@combo = "") {

      .@{class}-push-@{count} {
        .fs_grid_column_pushed(@total, @margin, @count);
      }
    }

    & when not (@combo = "") {

      [class*="@{combo}"] {

        &.@{class}-push-@{count} {
          .fs_grid_column_pushed(@total, @margin, @count);
        }
      }
    }

    .fs_grid_columns_pushed(@class, @margin, @total, @combo, (@count + 1));
  }

  .fs_grid_columns_pushed_fractioned(@class, @margin, @combo:~"") {

    & when (@combo = "") {

      .@{class}-push-fifth {
        .fs_grid_column_pushed(5, @margin, 1);
      }

      .@{class}-push-fourth {
        .fs_grid_column_pushed(4, @margin, 1);
      }

      .@{class}-push-third {
        .fs_grid_column_pushed(3, @margin, 1);
      }

      .@{class}-push-half {
        .fs_grid_column_pushed(2, @margin, 1);
      }
    }

    & when not (@combo = "") {

      [class*="@{combo}"] {

        &.@{class}-push-fifth {
          .fs_grid_column_pushed(5, @margin, 1);
        }

        &.@{class}-push-fourth {
          .fs_grid_column_pushed(4, @margin, 1);
        }

        &.@{class}-push-third {
          .fs_grid_column_pushed(3, @margin, 1);
        }

        &.@{class}-push-half {
          .fs_grid_column_pushed(2, @margin, 1);
        }
      }
    }
  }

  // Generate - Grid

  .fs_grid(@class, @columns:0) {

    .fs_grid_row_alignment(@class);

    & when not (@columns = 0) {
      // Cells
      .fs_grid_columns(@class, @fs-grid-gutter, @columns, "");

      // Cells Push
      .fs_grid_columns_pushed(@class, @fs-grid-gutter, @columns, "");

      // Contained
      .fs_grid_columns(@class, 0, @columns, ~"@{fs-grid-class-contained}");

      // Contained Push
      .fs_grid_columns_pushed(@class, 0, @columns, ~"@{fs-grid-class-contained}");
    }

    // Alignment
    .@{fs-grid-class-cell} {
      .fs_grid_columns_alignment(@class);
    }

    // Fractions
    .fs_grid_columns_fractioned(@class, @fs-grid-gutter, "");

    // Fractions Push
    .fs_grid_columns_pushed_fractioned(@class, @fs-grid-gutter, "");

    // Fractions Contained
    .fs_grid_columns_fractioned(@class, 0, ~"@{fs-grid-class-contained}");

    // Fractions Contained Push
    .fs_grid_columns_pushed_fractioned(@class, 0, ~"@{fs-grid-class-contained}");

    // Auto
    .@{class}-auto {
      width: auto;
      max-width: (100% - (@fs-grid-gutter * 2));

      flex: 1;
      flex-grow: 1;
    }

    // Hide
    .@{class}-hide {
      display: none;
    }

    // Destroy
    .@{class}-destroy {
      .fs_grid_cell_destroy;
    }
  }