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

Library of modular front end components.

// !Extendable Classes

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

    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;
    }

    &:after {
      height: 0;

      clear: both;
      content: ".";
      display: block;
      line-height: 0;
      visibility: hidden;
    }
  }

  .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;
    }
  }

  .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;
  }

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

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

  .fs_grid_cell_centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  .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 {
    margin-left: 0;
    margin-right: 0;
  }

  .fs_grid_cell_right {
    float: right;
  }

  // Destroy

  .fs_grid_cell_destroy {
    width: auto;

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

// !Mixins

  // Column

  .fs_grid_column(@total, @margin, @count) {
    width: (((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) {

    & 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}");
    }

    // 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}");

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

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