Anjing Webshells

Website : rimsha.abasa.com
: / var / canvas / app / stylesheets / vendor /
Filename : _flexboxgrid.scss
back
/*
@styleguide Grid

We use a slightly modified version of [Flexbox Grid](http://flexboxgrid.com) as Canvas' grid.

*Important!* Flexbox Grid's default `.row` class has been changed to `*.grid-row*` due to previous usage of Bootstrap 2.x grid in small parts of the application.

Flexbox Grid is a lot like Bootstrap 3's 12-column grid, with different column widths available for `.xs-`, `.sm-`, `.md-`, and `.lg-` screen sizes.

To create vertical space between grid rows, consider using the `.content-box` and its variants.

## Basic usage

```html
<div class="content-box">
  <div class="grid-row">
      <div class="col-xs-6">
          <div class="styleguide-section__grid-demo-element"></div>
      </div>
      <div class="col-xs-6">
          <div class="styleguide-section__grid-demo-element"></div>
      </div>
  </div>
</div>
```

[Official documentation for Flexbox Grid](http://flexboxgrid.com/) by Kristofer [@dam](https://twitter.com/dam).

*/

@use "sass:math";

@import "base/environment";

$c-grid-sp: $ic-sp;
$c-grid-columns: 12;

@mixin grid-for-size($size) {
  %base-#{$size} {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    padding-#{direction(right)}: $c-grid-sp;
    padding-#{direction(left)}: $c-grid-sp;
  }
  .col-#{$size} {
    @extend %base-#{$size};
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  @for $i from 1 through $c-grid-columns {
    $width: percentage(math.div($i, $c-grid-columns));

    .col-#{$size}-#{$i} {
      @extend %base-#{$size};
      flex-basis: $width;
      max-width: $width;
    }
    .off-#{$size}-#{$i} {
      @extend %base-#{$size};
      @if $i != $c-grid-columns {
        margin-#{direction(left)}: $width;
      }
    }
  }

  .start-#{$size}  { justify-content: flex-start; text-align: start; }
  .center-#{$size} { justify-content: center;     text-align: center; }
  .end-#{$size}    { justify-content: flex-end;   text-align: end; }

  .top-#{$size}    { align-items: flex-start; }
  .middle-#{$size} { align-items: center; }
  .bottom-#{$size} { align-items: flex-end; }

  .around-#{$size}  { justify-content: space-around; }
  .between-#{$size} { justify-content: space-between; }

  .first-#{$size} { order: -1; }
  .last-#{$size}  { order: 1; }
}

.grid-row {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-#{direction(right)}: -$c-grid-sp;
  margin-#{direction(left)}: -$c-grid-sp;

  &.reverse {
    flex-direction: row-reverse;
    flex-wrap: row-reverse;
  }
}

.col.reverse {
  flex-direction: column-reverse;
  flex-wrap: column-reverse;
}

@include grid-for-size('xs');

@include breakpoint(mini-tablet) {
  @include grid-for-size('sm');
}

@include breakpoint(tablet) {
  @include grid-for-size('md');
}

@include breakpoint(desktop) {
  @include grid-for-size('lg');
}