Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * ibgrid.scss
- *
- * An inline-block grid.
- */
- /*
- Variables
- */
- $gutter-size: 1.25rem !default;
- /*
- Core
- */
- /* Container */
- .container-fluid,
- .container {
- margin-right: auto;
- margin-left: auto;
- padding-right: $gutter-size;
- padding-left: $gutter-size;
- /* Clearfix */
- &:before,
- &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
- }
- /* Rows */
- .row {
- display: block;
- margin-left: -$gutter-size;
- margin-right: -$gutter-size;
- text-rendering: optimizespeed;
- letter-spacing: -0.31em;
- word-spacing: -0.43em;
- }
- /* Columns */
- .row > div {
- position: relative;
- display: inline-block;
- *display: inline;
- zoom: 1;
- padding-left: $gutter-size;
- padding-right: $gutter-size;
- vertical-align: top;
- box-sizing: border-box;
- letter-spacing: normal;
- word-spacing: normal;
- }
- // center vertically
- .row.middle-xs > div {
- vertical-align: middle;
- }
- /*
- Mobile
- */
- @for $i from 1 through 12 {
- .col-xs-#{$i} {
- width: percentage($i/12);
- }
- .col-xs-offset-#{$i} {
- margin-left: percentage($i/12);
- }
- .col-xs-push-#{$i} {
- left: percentage($i/12);
- }
- .col-xs-pull-#{$i} {
- right: percentage($i/12);
- }
- }
- /*
- Small
- */
- @media only screen and (min-width: $break-sm) {
- .container {
- width: $break-sm - (2 * $gutter-size);
- }
- @for $i from 1 through 12 {
- .col-sm-#{$i} {
- width: percentage($i/12);
- }
- .col-sm-offset-#{$i} {
- margin-left: percentage($i/12);
- }
- .col-sm-push-#{$i} {
- left: percentage($i/12);
- }
- .col-sm-pull-#{$i} {
- right: percentage($i/12);
- }
- }
- .row.middle-sm > div {
- vertical-align: middle;
- }
- }
- /*
- Medium
- */
- @media only screen and (min-width: $break-md) {
- .container {
- width: $break-md - (2 * $gutter-size);
- }
- @for $i from 1 through 12 {
- .col-md-#{$i} {
- width: percentage($i/12);
- }
- .col-md-offset-#{$i} {
- margin-left: percentage($i/12);
- }
- .col-md-push-#{$i} {
- left: percentage($i/12);
- }
- .col-md-pull-#{$i} {
- right: percentage($i/12);
- }
- }
- .row.middle-md > div {
- vertical-align: middle;
- }
- }
- /*
- Large
- */
- @media only screen and (min-width: $break-lg) {
- .container {
- width: $break-lg - (2 * $gutter-size);
- }
- @for $i from 1 through 12 {
- .col-lg-#{$i} {
- width: percentage($i/12);
- }
- .col-lg-offset-#{$i} {
- margin-left: percentage($i/12);
- }
- .col-lg-push-#{$i} {
- left: percentage($i/12);
- }
- .col-lg-pull-#{$i} {
- right: percentage($i/12);
- }
- }
- .row.middle-lg > div {
- vertical-align: middle;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement