188 lines
3.5 KiB
SCSS
188 lines
3.5 KiB
SCSS
|
|
|
|
// Gumby Semantic Grid Mixin //
|
|
|
|
|
|
// Mixin for rows
|
|
|
|
@mixin row($nested: false) {
|
|
@if $nested == nested {
|
|
width: auto;
|
|
min-width: 0px;
|
|
max-width: none;
|
|
@extend %clearfix;
|
|
}
|
|
@else {
|
|
width: 100%;
|
|
max-width: $row-max-width;
|
|
min-width: $min-device-width;
|
|
margin: 0 auto;
|
|
@extend %clearfix;
|
|
}
|
|
> *:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
@include respond(document-width) {
|
|
padding: 0 20px;
|
|
}
|
|
@include respond(all-phones) {
|
|
width: auto;
|
|
min-width: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
// Mixin for rows that are nested within columns
|
|
|
|
@mixin nestedRow() {
|
|
width: auto;
|
|
min-width: 0px;
|
|
max-width: none;
|
|
@extend %clearfix;
|
|
}
|
|
|
|
|
|
@mixin column($columns:$columns, $alignment: false, $behavior: false) {
|
|
@if $alignment == center {
|
|
float: none;
|
|
margin: 0 auto !important;
|
|
width: columns($columns);
|
|
@extend %columnconfig;
|
|
@include respond(all-phones) {
|
|
float: left;
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@else if $behavior == collapse {
|
|
width: columns($columns);
|
|
@extend %columnconfig;
|
|
@extend %collapse;
|
|
@include respond(all-phones) {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@else {
|
|
width: columns($columns);
|
|
@extend %columnconfig;
|
|
@include respond(all-phones) {
|
|
float: left;
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
|
|
@if $alignment == center {
|
|
float: none;
|
|
margin: 0 auto !important;
|
|
width: columns($columns, true);
|
|
@extend %columnconfig;
|
|
@include respond(all-phones) {
|
|
float: left;
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@else if $behavior == collapse {
|
|
width: columns($columns, true);
|
|
@extend %columnconfig;
|
|
@extend %collapse;
|
|
@include respond(all-phones) {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@else {
|
|
width: columns($columns, true);
|
|
@extend %columnconfig;
|
|
@include respond(all-phones) {
|
|
float: left;
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin push($columns, $hybrid-grid: false) {
|
|
@if $hybrid-grid == hybrid {
|
|
margin-left: push_x($columns, false, true);
|
|
&:first-child {
|
|
margin-left: push_x($columns, true, true);
|
|
}
|
|
@include respond(all-phones) {
|
|
margin-left: 0;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
@else {
|
|
margin-left: push_x($columns);
|
|
&:first-child {
|
|
margin-left: push_x($columns, true);
|
|
}
|
|
@include respond(all-phones) {
|
|
margin-left: 0;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin pull($direction:false) {
|
|
@if $direction == left {
|
|
@extend %pull-left;
|
|
}
|
|
@elseif $direction == none {
|
|
@extend %pull-none;
|
|
}
|
|
@else {
|
|
@extend %pull-right;
|
|
}
|
|
}
|
|
|
|
|
|
// Placeholders for the Semantic Grid
|
|
|
|
%container {
|
|
padding: 0px $gutter-in-px + px;
|
|
@include respond(all-phones) {
|
|
min-width: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
// Clearfix placeholder
|
|
%clearfix { @include clearfix(); }
|
|
|
|
// Clearfix placeholder for mobile
|
|
%mobilefix { @include mobilefix(); }
|
|
|
|
// Row placeholders
|
|
%row { @include row(); }
|
|
%nestedrow { @include row(); }
|
|
|
|
// Column Configuration placeholder
|
|
%columnconfig {
|
|
margin-left: $gutter;
|
|
float: $default-float;
|
|
min-height: 1px;
|
|
position: relative;
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
%pull-right { float: right; }
|
|
%pull-left { float: left; }
|
|
%pull-none { float: none; }
|
|
|
|
// Collapse Gutters
|
|
%collapse {
|
|
margin-left: 0px;
|
|
}
|