app/assets/stylesheets/jeet/_grid.scss
// Columns with Gutters
@mixin column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter) {
$side: -get_layout_direction();
$column_widths: -get_column($ratios, $gutter);
$margin_last: 0;
$margin_l: $margin_last;
$margin_r: nth($column_widths, 2);
@if $offset != 0 {
@if $offset < 0 {
$offset: $offset * -1;
$offset: nth(-get_column($offset, nth($column_widths, 2)), 1);
$margin_last: $offset + nth($column_widths, 2) * 2;
$margin_r: $margin_last;
} @else {
$offset: nth(-get_column($offset, nth($column_widths, 2)), 1);
$margin_l: $offset + nth($column_widths, 2);
}
}
@include cf();
float: $side;
display: inline;
clear: none;
text-align: inherit;
padding-left: 0;
padding-right: 0;
width: nth($column_widths, 1) * 1%;
margin-#{$side}: $margin_l * 1%;
margin-#{opposite-direction($side)}: $margin_r * 1%;
@if $uncycle != 0 {
&:nth-child(#{$uncycle}n) {
margin-#{opposite-direction($side)}: $margin_r * 1%;
float: $side;
}
&:nth-child(#{$uncycle}n + 1) {
clear: none;
}
}
@if $cycle != 0 {
&:nth-child(#{$cycle}n) {
margin-#{opposite-direction($side)}: $margin_last * 1%;
float: opposite-direction($side);
}
&:nth-child(#{$cycle}n + 1) {
clear: both;
}
} @else {
&:last-child {
margin-#{opposite-direction($side)}: $margin_last * 1%;
}
}
}
@mixin col($args...) {
@include column($args...);
}
// Columns without Gutters
@mixin span($ratio: 1, $offset: 0) {
$side: -get_layout_direction();
$span_width: -get_span($ratio);
$margin_r: 0;
$margin_l: $margin_r;
@if $offset != 0 {
@if $offset < 0 {
$offset: $offset * -1;
$margin_r: -get_span($offset);
} @else {
$margin_l: -get_span($offset);
}
}
@include cf();
float: $side;
display: inline;
clear: none;
padding-left: 0;
padding-right: 0;
text-align: inherit;
width: $span_width * 1%;
margin-#{$side}: $margin_l * 1%;
margin-#{opposite-direction($side)}: $margin_r * 1%;
}
// Source Ordering
@mixin shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter) {
$translate: '';
$side: -get_layout_direction();
@if $side == right {
$ratios: -replace_nth($ratios, 0, nth($ratios, 1) * -1);
}
@if $col_or_span == column or $col_or_span == col or $col_or_span == c {
$column_widths: -get_column($ratios, $gutter);
$translate: nth($column_widths, 1) + nth($column_widths, 2);
} @else {
$translate: -get_span($ratios);
}
position: relative;
left: $translate * 1%;
}
@mixin unshift() {
position: static;
left: 0;
}
// Edit Mode
@mixin edit() {
* {
background: rgba(0, 0, 0, .05);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10000000, endColorstr=#10000000);
}
}
// Horizontal Centering Block Elements
@mixin center($max_width: 1410px, $pad: 0) {
@include cf();
width: auto;
max-width: $max_width;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: $pad;
padding-right: $pad;
}
// Stacking/Unstacking Elements
@mixin stack($pad: 0, $align: false) {
$side: -get_layout_direction();
display: block;
clear: both;
float: none;
width: 100%;
margin-left: auto;
margin-right: auto;
&:first-child {
margin-#{$side}: auto;
}
&:last-child {
margin-#{opposite-direction($side)}: auto;
}
@if $pad != 0 {
padding-left: $pad;
padding-right: $pad;
}
@if ($align is not false) {
@if ($align == center) or ($align == c) {
text-align: center;
}
@if ($align == left) or ($align == l) {
text-align: left;
}
@if ($align == right) or ($align == r) {
text-align: right;
}
}
}
@mixin unstack() {
$side: -get_layout_direction();
display: inline;
clear: none;
width: auto;
margin-left: 0;
margin-right: 0;
&:first-child {
margin-#{$side}: 0;
}
&:last-child {
margin-#{opposite-direction($side)}: 0;
}
@if ($jeet-layout-direction == RTL) {
text-align: right;
} @else {
text-align: left;
}
}
// Horizontal/Vertical/Both Alignment - Parent container needs position relative. IE9+
@mixin align($direction: both) {
position: absolute;
@include jeet-prefixer(transform-style, preserve-3d);
@if ($direction == horizontal) or ($direction == h) {
left: 50%;
@include jeet-prefixer(transform, translateX(-50%));
} @else if ($direction == vertical) or ($direction == v) {
top: 50%;
@include jeet-prefixer(transform, translateY(-50%));
} @else {
top: 50%;
left: 50%;
@include jeet-prefixer(transform, translate(-50%, -50%));
}
}
// Clearfix
@mixin cf() {
*zoom: 1;
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
}
// Define a rule with all vendor-specific prefixes
@mixin jeet-prefixer($name, $arguments) {
-webkit-#{$name}: #{$arguments};
-ms-#{$name}: #{$arguments};
-moz-#{$name}: #{$arguments};
-o-#{$name}: #{$arguments};
#{$name}: #{$arguments};
}