Website : rimsha.abasa.com
backdoor
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
var
/
canvas
/
app
/
stylesheets
/
vendor
/
Filename :
_flexboxgrid.scss
back
Copy
/* @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'); }