54 changed files with 4073 additions and 0 deletions
@ -0,0 +1,4 @@ |
|||||||
|
// Susy |
||||||
|
// ==== |
||||||
|
|
||||||
|
@import 'susy/language/susyone'; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
// Su |
||||||
|
// == |
||||||
|
|
||||||
|
@import "su/utilities"; |
||||||
|
@import "su/settings"; |
||||||
|
@import "su/validation"; |
||||||
|
@import "su/grid"; |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
// Susy Next Syntax |
||||||
|
// ================ |
||||||
|
|
||||||
|
$susy-version: 2.1; |
||||||
|
|
||||||
|
@import "../su"; |
||||||
|
@import "../output/float"; |
||||||
|
|
||||||
|
@import "susy/settings"; |
||||||
|
@import "susy/validation"; |
||||||
|
@import "susy/grids"; |
||||||
|
@import "susy/box-sizing"; |
||||||
|
@import "susy/context"; |
||||||
|
@import "susy/background"; |
||||||
|
@import "susy/container"; |
||||||
|
@import "susy/span"; |
||||||
|
@import "susy/gutters"; |
||||||
|
@import "susy/isolate"; |
||||||
|
@import "susy/gallery"; |
||||||
|
@import "susy/rows"; |
||||||
|
@import "susy/margins"; |
||||||
|
@import "susy/padding"; |
||||||
|
@import "susy/bleed"; |
||||||
|
@import "susy/breakpoint-plugin"; |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Partials |
||||||
|
|
||||||
|
$susy-version: 1.5; |
||||||
|
|
||||||
|
@import "susyone/settings"; |
||||||
|
@import "susyone/functions"; |
||||||
|
@import "susyone/grid"; |
||||||
|
@import "susyone/isolation"; |
||||||
|
@import "susyone/padding"; |
||||||
|
@import "susyone/margin"; |
||||||
|
@import "susyone/media"; |
||||||
|
@import "susyone/background"; |
||||||
@ -0,0 +1,385 @@ |
|||||||
|
// Background Grid Syntax |
||||||
|
// ====================== |
||||||
|
|
||||||
|
$susy-overlay-grid-head-exists: false; |
||||||
|
|
||||||
|
|
||||||
|
// Show Grid/s |
||||||
|
// ----------- |
||||||
|
// Show grid on any element using either background or overlay. |
||||||
|
// - [$grid] : <settings> |
||||||
|
@mixin show-grid( |
||||||
|
$grid: $susy |
||||||
|
) { |
||||||
|
$inspect: $grid; |
||||||
|
$_output: debug-get(output, $grid); |
||||||
|
|
||||||
|
@include susy-inspect(show-grid, $inspect); |
||||||
|
@if $_output == overlay and susy-get(debug image, $grid) != hide { |
||||||
|
@include overlay-grid($grid); |
||||||
|
} @else { |
||||||
|
@include background-grid($grid); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin show-grids( |
||||||
|
$grid: $susy |
||||||
|
) { |
||||||
|
@include show-grid($grid); |
||||||
|
} |
||||||
|
|
||||||
|
// Background Grid |
||||||
|
// --------------- |
||||||
|
// Show a grid background on any element. |
||||||
|
// - [$grid] : <settings> |
||||||
|
@mixin background-grid( |
||||||
|
$grid: $susy |
||||||
|
) { |
||||||
|
$inspect : $grid; |
||||||
|
$_output : get-background($grid); |
||||||
|
|
||||||
|
@if length($_output) > 0 { |
||||||
|
$_flow: susy-get(flow, $grid); |
||||||
|
|
||||||
|
$_image: (); |
||||||
|
@each $name, $layer in map-get($_output, image) { |
||||||
|
$_direction: if($name == baseline, to bottom, to to($_flow)); |
||||||
|
$_image: append($_image, linear-gradient($_direction, $layer), comma); |
||||||
|
} |
||||||
|
$_output: map-merge($_output, (image: $_image)); |
||||||
|
|
||||||
|
@include background-grid-output($_output...); |
||||||
|
@include susy-inspect(background-grid, $inspect); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Overlay Grid |
||||||
|
// ------------ |
||||||
|
// Generate an icon to trigger grid-overlays on any given elements. |
||||||
|
// $grids... : <selector> [<settings>] [, <selector>]* |
||||||
|
@mixin overlay-grid ( |
||||||
|
$grid: $susy |
||||||
|
) { |
||||||
|
@if not($susy-overlay-grid-head-exists) { |
||||||
|
@at-root head { @include overlay-head($grid); } |
||||||
|
@at-root head:before { @include overlay-trigger; } |
||||||
|
@at-root head:hover { @include overlay-trigger-hover; } |
||||||
|
$susy-overlay-grid-head-exists: true !global; |
||||||
|
} |
||||||
|
|
||||||
|
head:hover ~ &, |
||||||
|
head:hover ~ body & { |
||||||
|
position: relative; |
||||||
|
&:before { |
||||||
|
@include grid-overlay-base; |
||||||
|
@include background-grid($grid); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// [Private] Overlay Trigger |
||||||
|
// ------------------------- |
||||||
|
@mixin overlay-trigger { |
||||||
|
content: "|||"; |
||||||
|
display: block; |
||||||
|
padding: 5px 10px; |
||||||
|
font: { |
||||||
|
family: sans-serif; |
||||||
|
size: 16px; |
||||||
|
weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// [Private] Overlay Trigger Hover |
||||||
|
// ------------------------------- |
||||||
|
@mixin overlay-trigger-hover { |
||||||
|
background: rgba(white, .5); |
||||||
|
color: red; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// [Private] Overlay Head |
||||||
|
// ---------------------- |
||||||
|
// <head> styles to create grid overlay toggle |
||||||
|
@mixin overlay-head ( |
||||||
|
$grid: $susy |
||||||
|
) { |
||||||
|
$_toggle: debug-get(toggle, $grid); |
||||||
|
$_horz: null; |
||||||
|
$_vert: null; |
||||||
|
|
||||||
|
@each $side in $_toggle { |
||||||
|
$_horz: if($side == left or $side == right, $side, $_horz); |
||||||
|
$_vert: if($side == top or $side == bottom, $side, $_vert); |
||||||
|
} |
||||||
|
|
||||||
|
display: block; |
||||||
|
position: fixed; |
||||||
|
#{$_horz}: 10px; |
||||||
|
#{$_vert}: 10px; |
||||||
|
z-index: 999; |
||||||
|
color: #333; |
||||||
|
background: rgba(white, .25); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// [Private] Grid Overlay Base |
||||||
|
// --------------------------- |
||||||
|
// Base styles for generating a grid overlay |
||||||
|
@mixin grid-overlay-base() { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
content: " "; |
||||||
|
z-index: 998; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Symmetrical Background |
||||||
|
// -------------------------- |
||||||
|
// - $grid: <map> |
||||||
|
@function get-background-sym( |
||||||
|
$grid |
||||||
|
) { |
||||||
|
$grid : parse-grid($grid); |
||||||
|
$_gutters : susy-get(gutters, $grid); |
||||||
|
$_column-width : susy-get(column-width, $grid); |
||||||
|
$_math : susy-get(math, $grid); |
||||||
|
|
||||||
|
$_color : debug-get(color); |
||||||
|
$_trans : transparent; |
||||||
|
$_light : lighten($_color, 15%); |
||||||
|
|
||||||
|
$_end : 1 + $_gutters; |
||||||
|
$_after : percentage(1/$_end); |
||||||
|
$_stops : (); |
||||||
|
$_size : span(1 $grid wide); |
||||||
|
|
||||||
|
@if is-inside($grid) { |
||||||
|
$_stops: $_color, $_light; |
||||||
|
} @else if is-split($grid) { |
||||||
|
$_split: $_gutters/2; |
||||||
|
$_before: percentage($_split/$_end); |
||||||
|
$_after: percentage((1 + $_split)/$_end); |
||||||
|
$_stops: $_trans $_before, $_color $_before, $_light $_after, $_trans $_after; |
||||||
|
} @else { |
||||||
|
$_stops: $_color, $_light $_after, $_trans $_after; |
||||||
|
} |
||||||
|
|
||||||
|
@if $_math == static { |
||||||
|
$_size: valid-column-math($_math, $_column-width) * $_end; |
||||||
|
} |
||||||
|
|
||||||
|
$_output: ( |
||||||
|
image: (columns: $_stops), |
||||||
|
size: $_size, |
||||||
|
); |
||||||
|
|
||||||
|
@return $_output; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Asymmetrical Inside |
||||||
|
// ----------------------- |
||||||
|
// - $grid: <settings> |
||||||
|
@function get-asym-inside( |
||||||
|
$grid |
||||||
|
) { |
||||||
|
$grid : parse-grid($grid); |
||||||
|
$_columns : susy-get(columns, $grid); |
||||||
|
|
||||||
|
$_color : debug-get(color); |
||||||
|
$_light : lighten($_color, 15%); |
||||||
|
$_stops : (); |
||||||
|
|
||||||
|
@for $location from 1 through susy-count($_columns) { |
||||||
|
$this-stop: (); |
||||||
|
|
||||||
|
@if $location == 1 { |
||||||
|
$this-stop: append($this-stop, $_color, comma); |
||||||
|
} @else { |
||||||
|
$start: parse-span(1 at $location $grid); |
||||||
|
$start: get-isolation($start); |
||||||
|
$this-stop: append($this-stop, $_color $start, comma); |
||||||
|
} |
||||||
|
|
||||||
|
@if $location == susy-count($_columns) { |
||||||
|
$this-stop: append($this-stop, $_light, comma); |
||||||
|
} @else { |
||||||
|
$_end: parse-span(1 at ($location + 1) $grid); |
||||||
|
$_end: get-isolation($_end); |
||||||
|
$this-stop: append($this-stop, $_light $_end, comma); |
||||||
|
} |
||||||
|
|
||||||
|
$_stops: join($_stops, $this-stop, comma); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_stops; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Asymmetrical Split |
||||||
|
// ---------------------- |
||||||
|
// - $grid: <settings> |
||||||
|
@function get-asym-split( |
||||||
|
$grid |
||||||
|
) { |
||||||
|
$grid : parse-grid($grid); |
||||||
|
$_columns : susy-get(columns, $grid); |
||||||
|
|
||||||
|
$_color : debug-get(color); |
||||||
|
$_light : lighten($_color, 15%); |
||||||
|
$_stops : (); |
||||||
|
|
||||||
|
@for $location from 1 through susy-count($_columns) { |
||||||
|
$this-stop: (); |
||||||
|
|
||||||
|
$start: parse-span(1 at $location $grid); |
||||||
|
$start: get-isolation($start); |
||||||
|
$this-stop: append($this-stop, transparent $start, comma); |
||||||
|
$this-stop: append($this-stop, $_color $start, comma); |
||||||
|
|
||||||
|
$_end: $start + span(1 at $location $grid); |
||||||
|
$this-stop: append($this-stop, $_light $_end, comma); |
||||||
|
$this-stop: append($this-stop, transparent $_end, comma); |
||||||
|
|
||||||
|
$_stops: join($_stops, $this-stop, comma); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_stops; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Asymmetrical Outside |
||||||
|
// ------------------------ |
||||||
|
// - $grid: <settings> |
||||||
|
@function get-asym-outside( |
||||||
|
$grid |
||||||
|
) { |
||||||
|
$grid : parse-grid($grid); |
||||||
|
$_columns : susy-get(columns, $grid); |
||||||
|
|
||||||
|
$_color : debug-get(color); |
||||||
|
$_light : lighten($_color, 15%); |
||||||
|
$_trans : transparent; |
||||||
|
$_stops : (); |
||||||
|
|
||||||
|
@for $location from 1 through susy-count($_columns) { |
||||||
|
$this-stop: (); |
||||||
|
|
||||||
|
@if $location == 1 { |
||||||
|
$this-stop: append($this-stop, $_color, comma); |
||||||
|
} @else { |
||||||
|
$start: parse-span(1 at $location $grid); |
||||||
|
$start: get-isolation($start); |
||||||
|
$this-stop: append($this-stop, $_color $start, comma); |
||||||
|
} |
||||||
|
|
||||||
|
@if $location == susy-count($_columns) { |
||||||
|
$this-stop: append($this-stop, $_light, comma); |
||||||
|
} @else { |
||||||
|
$gutter: get-span-width(first $location $grid); |
||||||
|
|
||||||
|
$_end: parse-span(1 at ($location + 1) $grid); |
||||||
|
$_end: get-isolation($_end); |
||||||
|
|
||||||
|
$gutter: $_light $gutter, $_trans $gutter, $_trans $_end; |
||||||
|
$this-stop: join($this-stop, $gutter, comma); |
||||||
|
} |
||||||
|
|
||||||
|
$_stops: join($_stops, $this-stop, comma); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_stops; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Asymmetrical Background |
||||||
|
// --------------------------- |
||||||
|
// - $grid: <settings> |
||||||
|
@function get-background-asym( |
||||||
|
$grid |
||||||
|
) { |
||||||
|
$_stops: (); |
||||||
|
|
||||||
|
@if is-inside($grid) { |
||||||
|
$_stops: get-asym-inside($grid); |
||||||
|
} @else if is-split($grid) { |
||||||
|
$_stops: get-asym-split($grid); |
||||||
|
} @else { |
||||||
|
$_stops: get-asym-outside($grid); |
||||||
|
} |
||||||
|
|
||||||
|
@return (image: (columns: $_stops)); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Background |
||||||
|
// -------------- |
||||||
|
// - $grid: <settings> |
||||||
|
@function get-background( |
||||||
|
$grid |
||||||
|
) { |
||||||
|
$grid : parse-grid($grid); |
||||||
|
$_show : susy-get(debug image, $grid); |
||||||
|
$_return : (); |
||||||
|
|
||||||
|
@if $_show and $_show != 'hide' { |
||||||
|
$_columns: susy-get(columns, $grid); |
||||||
|
|
||||||
|
@if $_show != 'show-baseline' { |
||||||
|
$_sym: is-symmetrical($_columns); |
||||||
|
$_return: if($_sym, get-background-sym($grid), get-background-asym($grid)); |
||||||
|
$_return: map-merge($_return, (clip: content-box)); |
||||||
|
} |
||||||
|
|
||||||
|
@if $_show != 'show-columns' |
||||||
|
and global-variable-exists(base-line-height) |
||||||
|
and type-of($base-line-height) == 'number' |
||||||
|
and not unitless($base-line-height) { |
||||||
|
$_color: variable-exists('grid-background-baseline-color'); |
||||||
|
$_color: if($_color, $grid-background-baseline-color, #000); |
||||||
|
|
||||||
|
$_image: map-get($_return, image); |
||||||
|
$_size: map-get($_return, size); |
||||||
|
$_baseline: (baseline: ($_color 1px, transparent 1px)); |
||||||
|
$_baseline-size: 100% $base-line-height; |
||||||
|
|
||||||
|
$_return: map-merge($_return, ( |
||||||
|
image: if($_image, map-merge($_image, $_baseline), $_baseline), |
||||||
|
size: if($_size, ($_size, $_baseline-size), $_baseline-size), |
||||||
|
)); |
||||||
|
|
||||||
|
@if $_show == 'show' { |
||||||
|
$_clip: map-get($_return, clip); |
||||||
|
$_return: map-merge($_return, (clip: join($_clip, border-box, comma))); |
||||||
|
} |
||||||
|
} @else if $_show == 'show-baseline' { |
||||||
|
@warn 'Please provide a $base-line-height with the desired height and units'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@if map-get($_return, image) { |
||||||
|
$_return: map-merge($_return, (flow: susy-get(flow, $grid))); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Debug |
||||||
|
// --------- |
||||||
|
// Return the value of a debug setting |
||||||
|
// - $key: <setting> |
||||||
|
@function debug-get( |
||||||
|
$key, |
||||||
|
$grid: $susy |
||||||
|
) { |
||||||
|
$key: join(debug, $key, space); |
||||||
|
@return susy-get($key, $grid); |
||||||
|
} |
||||||
@ -0,0 +1,200 @@ |
|||||||
|
// Bleed Syntax |
||||||
|
// ============ |
||||||
|
|
||||||
|
// Bleed |
||||||
|
// ----- |
||||||
|
// Add negative margins, and equal positive padding to create bleed. |
||||||
|
// - $bleed : <span> |
||||||
|
@mixin bleed( |
||||||
|
$bleed: 0 gutter() |
||||||
|
) { |
||||||
|
$inspect : $bleed; |
||||||
|
$output : get-bleed($bleed); |
||||||
|
|
||||||
|
@if susy-get(global-box-sizing) != content-box { |
||||||
|
$output: map-merge((box-sizing: content-box), $output); |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-inspect(bleed, $inspect); |
||||||
|
@include output($output); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Bleed-x |
||||||
|
// ------- |
||||||
|
// Shortcut for horizontal bleed. |
||||||
|
// - $bleed : <span> |
||||||
|
@mixin bleed-x( |
||||||
|
$bleed: gutter() |
||||||
|
) { |
||||||
|
$bleed : parse-span($bleed); |
||||||
|
$trbl : susy-get(span, $bleed); |
||||||
|
|
||||||
|
@if length($trbl) == 1 { |
||||||
|
$bleed: map-merge($bleed, (span: 0 nth($trbl, 1))); |
||||||
|
} @else if length($trbl) == 2 { |
||||||
|
$bleed: map-merge($bleed, (span: 0 nth($trbl, 2) 0 nth($trbl, 1))); |
||||||
|
} @else { |
||||||
|
@warn 'bleed-x only takes 2 lengths, but #{length($trbl)} were passed.'; |
||||||
|
} |
||||||
|
|
||||||
|
@include bleed($bleed); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Bleed-y |
||||||
|
// ------- |
||||||
|
// Shortcut for vertical bleed. |
||||||
|
// - $bleed : <span> |
||||||
|
@mixin bleed-y( |
||||||
|
$bleed: if(function-exists(rhythm), rhythm(1), 1em) |
||||||
|
) { |
||||||
|
$bleed : parse-span($bleed); |
||||||
|
$trbl : susy-get(span, $bleed); |
||||||
|
|
||||||
|
@if length($trbl) == 1 { |
||||||
|
$bleed: map-merge($bleed, (span: nth($trbl, 1) 0)); |
||||||
|
} @else if length($trbl) == 2 { |
||||||
|
$bleed: map-merge($bleed, (span: nth($trbl, 1) 0 nth($trbl, 2) 0)); |
||||||
|
} @else { |
||||||
|
@warn 'bleed-y only takes 2 lengths, but #{length($trbl)} were passed.'; |
||||||
|
} |
||||||
|
|
||||||
|
@include bleed($bleed); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Bleed |
||||||
|
// --------- |
||||||
|
// Return bleed output values |
||||||
|
// - $bleed: <span> |
||||||
|
@function get-bleed( |
||||||
|
$bleed |
||||||
|
) { |
||||||
|
$bleed : map-merge((spread: wide), parse-span($bleed)); |
||||||
|
$trbl : susy-get(span, $bleed); |
||||||
|
$short : null; |
||||||
|
$output : (); |
||||||
|
|
||||||
|
@for $i from 1 through length($trbl) { |
||||||
|
$this: nth($trbl, $i); |
||||||
|
$new: (); |
||||||
|
$margin: null; |
||||||
|
$padding: null; |
||||||
|
$padding-x: null; |
||||||
|
|
||||||
|
@if $this > 0 { |
||||||
|
$this: map-merge($bleed, (span: $this)); |
||||||
|
$margin: span($this); |
||||||
|
$padding: $margin; |
||||||
|
$padding-x: $padding; |
||||||
|
} |
||||||
|
|
||||||
|
@if $margin and $margin > 0 { |
||||||
|
$margin: - $margin; |
||||||
|
|
||||||
|
@if is-inside($this) { |
||||||
|
$gutter: gutter($this); |
||||||
|
$join: if($gutter and comparable($padding, $gutter), true, false); |
||||||
|
$padding-x: if($join and $padding > 0, $padding + $gutter, $padding); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@if $i == 1 { |
||||||
|
$new: ( |
||||||
|
margin-top: $margin, |
||||||
|
padding-top: $padding, |
||||||
|
margin-right: $margin, |
||||||
|
padding-right: $padding-x, |
||||||
|
margin-bottom: $margin, |
||||||
|
padding-bottom: $padding, |
||||||
|
margin-left: $margin, |
||||||
|
padding-left: $padding-x, |
||||||
|
); |
||||||
|
} @else if $i == 2 { |
||||||
|
$new: ( |
||||||
|
margin-right: $margin, |
||||||
|
padding-right: $padding-x, |
||||||
|
margin-left: $margin, |
||||||
|
padding-left: $padding-x, |
||||||
|
); |
||||||
|
} @else if $i == 3 { |
||||||
|
$new: ( |
||||||
|
margin-bottom: $margin, |
||||||
|
padding-bottom: $padding, |
||||||
|
); |
||||||
|
} @else if $i == 4 { |
||||||
|
$new: ( |
||||||
|
margin-left: $margin, |
||||||
|
padding-left: $padding-x, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
$output: map-merge($output, $new); |
||||||
|
} |
||||||
|
|
||||||
|
@each $prop, $value in $output { |
||||||
|
$output: if($value == 0, map-merge($output, ($prop: null)), $output); |
||||||
|
} |
||||||
|
|
||||||
|
@return bleed-shorthand($output); |
||||||
|
} |
||||||
|
|
||||||
|
// Bleed Shorthand |
||||||
|
// --------------- |
||||||
|
// Convert bleed output into shorthand when possible. |
||||||
|
// - $bleed: <output map> |
||||||
|
@function bleed-shorthand( |
||||||
|
$bleed |
||||||
|
) { |
||||||
|
$margin: (); |
||||||
|
$padding: (); |
||||||
|
$return: (); |
||||||
|
|
||||||
|
@each $key, $value in $bleed { |
||||||
|
@if str-index($key, margin) { |
||||||
|
$margin: map-merge($margin, ($key: $value)); |
||||||
|
} @else if str-index($key, padding) > 0 { |
||||||
|
$padding: map-merge($padding, ($key: $value)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$props: ( |
||||||
|
margin: $margin, |
||||||
|
padding: $padding, |
||||||
|
); |
||||||
|
|
||||||
|
@each $name, $map in $props { |
||||||
|
$four: if(length(map-keys($map)) == 4, true, false); |
||||||
|
$null: if(index(map-values($map), null), true, false); |
||||||
|
|
||||||
|
@if $four and not($null) { |
||||||
|
$top: map-get($map, '#{$name}-top'); |
||||||
|
$right: map-get($map, '#{$name}-right'); |
||||||
|
$bottom: map-get($map, '#{$name}-bottom'); |
||||||
|
$left: map-get($map, '#{$name}-left'); |
||||||
|
|
||||||
|
$tb: if($top == $bottom, $top, null); |
||||||
|
$rl: if($right == $left, $right, null); |
||||||
|
$all: if($tb == $rl, $tb, null); |
||||||
|
|
||||||
|
$new: if($all, $all, null); |
||||||
|
|
||||||
|
@if not($new) { |
||||||
|
@if $tb and $rl { |
||||||
|
$new: $tb $rl; |
||||||
|
} @else if $rl { |
||||||
|
$new: $top $rl $bottom; |
||||||
|
} @else { |
||||||
|
$new: $top $right $bottom $left; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$return: map-merge($return, ($name: $new)); |
||||||
|
} @else { |
||||||
|
$return: map-merge($return, $map); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $return; |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
// Susy Box Sizing |
||||||
|
// ================= |
||||||
|
|
||||||
|
// Global Box Sizing |
||||||
|
// ----------------- |
||||||
|
// Set a box model globally on all elements. |
||||||
|
// - [$box]: border-box | content-box |
||||||
|
// - [$inherit]: true | false |
||||||
|
@mixin global-box-sizing( |
||||||
|
$box: susy-get(global-box-sizing), |
||||||
|
$inherit: false |
||||||
|
) { |
||||||
|
$inspect: $box; |
||||||
|
|
||||||
|
@if $inherit { |
||||||
|
@at-root { |
||||||
|
html { @include output((box-sizing: $box)); } |
||||||
|
*, *:before, *:after { box-sizing: inherit; } |
||||||
|
} |
||||||
|
} @else { |
||||||
|
*, *:before, *:after { @include output((box-sizing: $box)); } |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-inspect(global-box-sizing, $inspect); |
||||||
|
@include update-box-model($box); |
||||||
|
} |
||||||
|
|
||||||
|
// Border Box Sizing |
||||||
|
// ----------------- |
||||||
|
// A legacy shortcut... |
||||||
|
// - [$inherit]: true | false |
||||||
|
@mixin border-box-sizing( |
||||||
|
$inherit: false |
||||||
|
) { |
||||||
|
@include global-box-sizing(border-box, $inherit); |
||||||
|
} |
||||||
|
|
||||||
|
// Update Box Model |
||||||
|
// ---------------- |
||||||
|
// PRIVATE: Updates global box model setting |
||||||
|
@mixin update-box-model( |
||||||
|
$box |
||||||
|
) { |
||||||
|
@if $box != susy-get(global-box-sizing) { |
||||||
|
@include susy-set(global-box-sizing, $box); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,185 @@ |
|||||||
|
// Breakpoint Integration |
||||||
|
// ====================== |
||||||
|
|
||||||
|
$susy-media: () !default; |
||||||
|
$susy-media-fallback: false !default; |
||||||
|
|
||||||
|
$_susy-media-context: (); |
||||||
|
|
||||||
|
|
||||||
|
// Susy Breakpoint |
||||||
|
// --------------- |
||||||
|
// Change grids at different media query breakpoints. |
||||||
|
// - $query : <min-width> [<max-width>] | <property> <value> | <map> |
||||||
|
// - $layout : <settings> |
||||||
|
// - $no-query : <boolean> | <selector> |
||||||
|
@mixin susy-breakpoint( |
||||||
|
$query, |
||||||
|
$layout: false, |
||||||
|
$no-query: $susy-media-fallback |
||||||
|
) { |
||||||
|
@include susy-media-router($query, $no-query) { |
||||||
|
@if $layout { |
||||||
|
@include with-layout($layout) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} @else { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Susy Media |
||||||
|
// ---------- |
||||||
|
// - $query: <min-width> [<max-width>] | <property> <value> |
||||||
|
// - $no-query: <boolean> | <selector> |
||||||
|
@mixin susy-media( |
||||||
|
$query, |
||||||
|
$no-query: $susy-media-fallback |
||||||
|
) { |
||||||
|
$old-context: $_susy-media-context; |
||||||
|
$name: if(map-has-key($susy-media, $query), $query, null); |
||||||
|
$query: susy-get-media($query); |
||||||
|
$query: susy-parse-media($query); |
||||||
|
|
||||||
|
@include susy-media-context($query, $name); |
||||||
|
|
||||||
|
@if $no-query and type-of($no-query) != string { |
||||||
|
@content; |
||||||
|
} @else { |
||||||
|
@media #{susy-render-media($query)} { |
||||||
|
@content; |
||||||
|
} |
||||||
|
|
||||||
|
@if type-of($no-query) == string { |
||||||
|
#{$no-query} & { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-media-context($old-context, $clean: true); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Media Router |
||||||
|
// ------------ |
||||||
|
// Rout media arguments to the correct mixin. |
||||||
|
@mixin susy-media-router( |
||||||
|
$query, |
||||||
|
$no-query: $susy-media-fallback |
||||||
|
) { |
||||||
|
@if susy-support(breakpoint, (mixin: breakpoint), $warn: false) { |
||||||
|
@include breakpoint($query, $no-query) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} @else { |
||||||
|
@include susy-media($query, $no-query) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Update Context |
||||||
|
// ------------- |
||||||
|
// Set the new media context |
||||||
|
@mixin susy-media-context( |
||||||
|
$query, |
||||||
|
$name: null, |
||||||
|
$clean: false |
||||||
|
) { |
||||||
|
$query: map-merge((name: $name), $query); |
||||||
|
|
||||||
|
@if $clean { |
||||||
|
$_susy-media-context: $query !global; |
||||||
|
} @else { |
||||||
|
$_susy-media-context: map-merge($_susy-media-context, $query) !global; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Media Context |
||||||
|
// ------------- |
||||||
|
// Return the full media context, or a single media property (e.g. min-width) |
||||||
|
@function susy-media-context( |
||||||
|
$property: false |
||||||
|
) { |
||||||
|
@if $property { |
||||||
|
@return map-get($_susy-media-context, $property); |
||||||
|
} @else { |
||||||
|
@return $_susy-media-context; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Media |
||||||
|
// --------- |
||||||
|
// Return a named media-query from $susy-media. |
||||||
|
// - $name: <key> |
||||||
|
@function susy-get-media( |
||||||
|
$name |
||||||
|
) { |
||||||
|
@if map-has-key($susy-media, $name) { |
||||||
|
$map-value: map-get($susy-media, $name); |
||||||
|
@if ($name == $map-value) { |
||||||
|
$name: $map-value; |
||||||
|
} @else { |
||||||
|
$name: susy-get-media($map-value); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $name; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Render Media |
||||||
|
// ------------ |
||||||
|
// Build a media-query string from various media settings |
||||||
|
@function susy-render-media( |
||||||
|
$query |
||||||
|
) { |
||||||
|
$output: null; |
||||||
|
@each $property, $value in $query { |
||||||
|
$string: null; |
||||||
|
|
||||||
|
@if $property == media { |
||||||
|
$string: $value; |
||||||
|
} @else { |
||||||
|
$string: '(#{$property}: #{$value})'; |
||||||
|
} |
||||||
|
|
||||||
|
$output: if($output, '#{$output} and #{$string}', $string); |
||||||
|
} |
||||||
|
|
||||||
|
@return $output; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Parse Media |
||||||
|
// ----------- |
||||||
|
// Return parsed media-query settings based on shorthand |
||||||
|
@function susy-parse-media( |
||||||
|
$query |
||||||
|
) { |
||||||
|
$mq: null; |
||||||
|
@if type-of($query) == map { |
||||||
|
$mq: $query; |
||||||
|
} @else if type-of($query) == number { |
||||||
|
$mq: (min-width: $query); |
||||||
|
} @else if type-of($query) == list and length($query) == 2 { |
||||||
|
@if type-of(nth($query, 1)) == number { |
||||||
|
$mq: ( |
||||||
|
min-width: min($query...), |
||||||
|
max-width: max($query...), |
||||||
|
); |
||||||
|
} @else { |
||||||
|
$mq: (nth($query, 1): nth($query, 2)); |
||||||
|
} |
||||||
|
} @else { |
||||||
|
$mq: (media: '#{$query}'); |
||||||
|
} |
||||||
|
|
||||||
|
@return $mq; |
||||||
|
} |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
// Container Syntax |
||||||
|
// ================ |
||||||
|
|
||||||
|
// Container [mixin] |
||||||
|
// ----------------- |
||||||
|
// Set a container element |
||||||
|
// - [$layout] : <settings> |
||||||
|
@mixin container( |
||||||
|
$layout: $susy |
||||||
|
) { |
||||||
|
$inspect : $layout; |
||||||
|
$layout : parse-grid($layout); |
||||||
|
|
||||||
|
$_width : get-container-width($layout); |
||||||
|
$_justify : parse-container-position(susy-get(container-position, $layout)); |
||||||
|
$_property : if(susy-get(math, $layout) == static, width, max-width); |
||||||
|
|
||||||
|
$_box : susy-get(box-sizing, $layout); |
||||||
|
|
||||||
|
@if $_box { |
||||||
|
@include output((box-sizing: $_box)); |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-inspect(container, $inspect); |
||||||
|
@include float-container($_width, $_justify, $_property); |
||||||
|
@include show-grid($layout); |
||||||
|
} |
||||||
|
|
||||||
|
// Container [function] |
||||||
|
// -------------------- |
||||||
|
// Return container width |
||||||
|
// - [$layout] : <settings> |
||||||
|
@function container( |
||||||
|
$layout: $susy |
||||||
|
) { |
||||||
|
$layout: parse-grid($layout); |
||||||
|
@return get-container-width($layout); |
||||||
|
} |
||||||
|
|
||||||
|
// Get Container Width |
||||||
|
// ------------------- |
||||||
|
// Calculate the container width |
||||||
|
// - [$layout]: <settings> |
||||||
|
@function get-container-width( |
||||||
|
$layout: $susy |
||||||
|
) { |
||||||
|
$layout : parse-grid($layout); |
||||||
|
$_width : susy-get(container, $layout); |
||||||
|
$_column-width : susy-get(column-width, $layout); |
||||||
|
$_math : susy-get(math, $layout); |
||||||
|
|
||||||
|
@if not($_width) or $_width == auto { |
||||||
|
@if valid-column-math($_math, $_column-width) { |
||||||
|
$_columns : susy-get(columns, $layout); |
||||||
|
$_gutters : susy-get(gutters, $layout); |
||||||
|
$_spread : if(is-split($layout), wide, narrow); |
||||||
|
$_width : susy-sum($_columns, $_gutters, $_spread) * $_column-width; |
||||||
|
} @else { |
||||||
|
$_width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $_width; |
||||||
|
} |
||||||
|
|
||||||
|
// Parse Container Position |
||||||
|
// ------------------------ |
||||||
|
// Parse the $container-position into margin values. |
||||||
|
// - [$justify] : left | center | right | <length> [<length>] |
||||||
|
@function parse-container-position( |
||||||
|
$justify: map-get($susy-defaults, container-position) |
||||||
|
) { |
||||||
|
$_return: if($justify == left, 0, auto) if($justify == right, 0, auto); |
||||||
|
|
||||||
|
@if not(index(left right center, $justify)) { |
||||||
|
$_return: nth($justify, 1); |
||||||
|
$_return: $_return if(length($justify) > 1, nth($justify, 2), $_return); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
// Context Syntax |
||||||
|
// ============== |
||||||
|
|
||||||
|
// Nested [function] |
||||||
|
// ----------------- |
||||||
|
// Return a subset grid for nested context. |
||||||
|
// - $context : <span> |
||||||
|
@function nested( |
||||||
|
$context |
||||||
|
) { |
||||||
|
$context : parse-span($context); |
||||||
|
$span : susy-get(span, $context); |
||||||
|
$location : get-location($context); |
||||||
|
$columns : susy-get(columns, $context); |
||||||
|
|
||||||
|
@return susy-slice($span, $location, $columns); |
||||||
|
} |
||||||
|
|
||||||
|
// Nested [mixin] |
||||||
|
// -------------- |
||||||
|
// Use a subset grid for a nested context |
||||||
|
// - $context : <span> |
||||||
|
// - @content : <content> |
||||||
|
@mixin nested( |
||||||
|
$context |
||||||
|
) { |
||||||
|
$inspect : $context; |
||||||
|
$context : parse-span($context); |
||||||
|
$old : susy-get(columns); |
||||||
|
$susy : map-merge($susy, (columns: nested($context))) !global; |
||||||
|
|
||||||
|
@include susy-inspect(nested, $inspect); |
||||||
|
@content; |
||||||
|
|
||||||
|
$susy : map-merge($susy, (columns: $old)) !global; |
||||||
|
} |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
// Gallery Syntax |
||||||
|
// ============== |
||||||
|
|
||||||
|
// Gallery |
||||||
|
// ------- |
||||||
|
// Create an isolated gallery |
||||||
|
// - $span : <span> |
||||||
|
// - [$selector] : child | of-type |
||||||
|
@mixin gallery( |
||||||
|
$span, |
||||||
|
$selector: child |
||||||
|
) { |
||||||
|
$inspect : $span; |
||||||
|
$span : parse-span($span); |
||||||
|
$span : map-merge($span, (location: 1)); |
||||||
|
|
||||||
|
$n : susy-get(span, $span); |
||||||
|
$columns : susy-get(columns, $span); |
||||||
|
$context : susy-count($columns); |
||||||
|
$flow : susy-get(flow, $span); |
||||||
|
|
||||||
|
$inside : is-inside($span); |
||||||
|
$from : from($flow); |
||||||
|
$line : floor($context / $n); |
||||||
|
$symmetrical : is-symmetrical($columns); |
||||||
|
|
||||||
|
$output: ( |
||||||
|
width : null, |
||||||
|
float : from, |
||||||
|
margin-before : null, |
||||||
|
margin-after : null, |
||||||
|
padding-before : null, |
||||||
|
padding-after : null, |
||||||
|
flow : $flow, |
||||||
|
); |
||||||
|
|
||||||
|
@if $inside { |
||||||
|
$gutters: get-gutters($span); |
||||||
|
$output: map-merge($output, ( |
||||||
|
padding-before: map-get($gutters, before), |
||||||
|
padding-after: map-get($gutters, after), |
||||||
|
)); |
||||||
|
} |
||||||
|
|
||||||
|
@if $symmetrical { |
||||||
|
$output: map-merge($output, (width: get-span-width($span))); |
||||||
|
} |
||||||
|
|
||||||
|
$box : susy-get(box-sizing, $span); |
||||||
|
$global-box : if(susy-get(global-box-sizing) == 'border-box', true, false); |
||||||
|
|
||||||
|
@include susy-inspect(gallery, $inspect); |
||||||
|
|
||||||
|
// Collective Output |
||||||
|
@if $box == border-box or ($inside and not($box) and not($global-box)) { |
||||||
|
@include output((box-sizing: border-box)); |
||||||
|
} @else if $box == content-box { |
||||||
|
@include output((box-sizing: content-box)); |
||||||
|
} |
||||||
|
|
||||||
|
@include float-span-output($output...); |
||||||
|
|
||||||
|
// Individual Loop |
||||||
|
@for $item from 1 through $line { |
||||||
|
$nth: '#{$line}n + #{$item}'; |
||||||
|
&:nth-#{$selector}(#{$nth}) { |
||||||
|
// Individual Prep |
||||||
|
$output: ( |
||||||
|
width : if($symmetrical, null, get-span-width($span)), |
||||||
|
float : null, |
||||||
|
margin-before : get-isolation($span), |
||||||
|
margin-after : -100%, |
||||||
|
padding-before : null, |
||||||
|
padding-after : null, |
||||||
|
flow : $flow, |
||||||
|
); |
||||||
|
|
||||||
|
// Individual Output |
||||||
|
@include float-span-output($output...); |
||||||
|
|
||||||
|
@if get-edge($span) == first { |
||||||
|
@include break; |
||||||
|
@include first($span); |
||||||
|
} @else { |
||||||
|
@include nobreak; |
||||||
|
} |
||||||
|
|
||||||
|
// Individual Location Increment |
||||||
|
$location: get-location($span) + $n; |
||||||
|
$location: if($location > $context, 1, $location); |
||||||
|
$span: map-merge($span, (location: $location)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
// Grid Syntax |
||||||
|
// =========== |
||||||
|
|
||||||
|
|
||||||
|
// Layout |
||||||
|
// ------ |
||||||
|
// Set a new layout using a shorthand |
||||||
|
// - $layout: <settings> |
||||||
|
// - $clean: boolean |
||||||
|
@mixin layout( |
||||||
|
$layout, |
||||||
|
$clean: false |
||||||
|
) { |
||||||
|
$inspect : $layout; |
||||||
|
$susy : _get-layout($layout, $clean) !global; |
||||||
|
|
||||||
|
@include susy-inspect(layout, $inspect); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Use Grid |
||||||
|
// -------- |
||||||
|
// Use an arbitrary layout for a section of code |
||||||
|
// - $layout: <settings> |
||||||
|
// - $clean: boolean |
||||||
|
@mixin with-layout( |
||||||
|
$layout, |
||||||
|
$clean: false |
||||||
|
) { |
||||||
|
$inspect : $layout; |
||||||
|
$old : $susy; |
||||||
|
$susy : _get-layout($layout, $clean) !global; |
||||||
|
|
||||||
|
@include susy-inspect(with-layout, $inspect); |
||||||
|
|
||||||
|
@content; |
||||||
|
|
||||||
|
$susy: $old !global; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Layout |
||||||
|
// ------ |
||||||
|
// Return a parsed layout map based on shorthand syntax |
||||||
|
// - $layout: <settings> |
||||||
|
@function layout( |
||||||
|
$layout: $susy |
||||||
|
) { |
||||||
|
@return parse-grid($layout); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Layout |
||||||
|
// ---------- |
||||||
|
// Return a new layout based on current and given settings |
||||||
|
// - $layout: <settings> |
||||||
|
// - $clean: boolean |
||||||
|
@function _get-layout( |
||||||
|
$layout, |
||||||
|
$clean: false |
||||||
|
) { |
||||||
|
$layout: layout($layout); |
||||||
|
@return if($clean, $layout, _susy-deep-merge($susy, $layout)); |
||||||
|
} |
||||||
@ -0,0 +1,154 @@ |
|||||||
|
// Gutter Syntax |
||||||
|
// ============= |
||||||
|
|
||||||
|
|
||||||
|
// Gutters |
||||||
|
// ------- |
||||||
|
// Set gutters on an element. |
||||||
|
// - [$span] : <settings> |
||||||
|
@mixin gutters( |
||||||
|
$span: $susy |
||||||
|
) { |
||||||
|
$inspect : $span; |
||||||
|
$span : parse-gutters($span); |
||||||
|
$_gutters : get-gutters($span); |
||||||
|
|
||||||
|
$_output: ( |
||||||
|
before: map-get($_gutters, before), |
||||||
|
after: map-get($_gutters, after), |
||||||
|
flow: susy-get(flow, $span), |
||||||
|
); |
||||||
|
|
||||||
|
@include susy-inspect(gutters, $inspect); |
||||||
|
|
||||||
|
@if is-inside($span) { |
||||||
|
@include padding-output($_output...); |
||||||
|
} @else { |
||||||
|
@include margin-output($_output...); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin gutter( |
||||||
|
$span: $susy |
||||||
|
) { |
||||||
|
@include gutters($span); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Gutter |
||||||
|
// ------ |
||||||
|
// Return the width of a gutter. |
||||||
|
// - [$span] : <settings> |
||||||
|
@function gutter( |
||||||
|
$span: $susy |
||||||
|
) { |
||||||
|
$span: parse-gutters($span); |
||||||
|
|
||||||
|
$_gutters: get-gutters($span); |
||||||
|
$_gutters: map-get($_gutters, before) or map-get($_gutters, after); |
||||||
|
|
||||||
|
@return $_gutters; |
||||||
|
} |
||||||
|
|
||||||
|
@function gutters( |
||||||
|
$span: $susy |
||||||
|
) { |
||||||
|
@return gutter($span); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Gutter Width |
||||||
|
// ---------------- |
||||||
|
// Return gutter width. |
||||||
|
// - [$context]: <context> |
||||||
|
@function get-gutter-width( |
||||||
|
$context: $susy |
||||||
|
) { |
||||||
|
$context : parse-gutters($context); |
||||||
|
|
||||||
|
$_gutters : susy-get(gutters, $context); |
||||||
|
$_gutter : susy-get(gutter-override, $context); |
||||||
|
|
||||||
|
@if $_gutters and ($_gutters > 0) and not($_gutter) { |
||||||
|
$_column-width: susy-get(column-width, $context); |
||||||
|
$_math: gutter-math($context); |
||||||
|
@if $_math == static { |
||||||
|
$_gutter: $_gutters * valid-column-math($_math, $_column-width); |
||||||
|
} @else { |
||||||
|
$_columns : susy-get(columns, $context); |
||||||
|
$_spread : if(is-split($context), wide, susy-get(spread, $context)); |
||||||
|
$_gutter : percentage($_gutters / susy-sum($_columns, $_gutters, $_spread)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$_gutter: if($_gutter == 'no-gutters' or $_gutter == 'no-gutter', null, $_gutter); |
||||||
|
|
||||||
|
@return $_gutter; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Gutters |
||||||
|
// ----------- |
||||||
|
// Return before and after gutter values. |
||||||
|
// - [$context]: <context> |
||||||
|
@function get-gutters( |
||||||
|
$context: $susy |
||||||
|
) { |
||||||
|
$context : parse-gutters($context); |
||||||
|
|
||||||
|
$_gutter-position : susy-get(gutter-position, $context); |
||||||
|
$_gutter : get-gutter-width($context); |
||||||
|
|
||||||
|
$_return : (before: null, after: null); |
||||||
|
|
||||||
|
@if is-split($context) and $_gutter { |
||||||
|
$_gutter: $_gutter / 2; |
||||||
|
$_return: map-merge($_return, (before: $_gutter, after: $_gutter)); |
||||||
|
} @else { |
||||||
|
$_return: map-merge($_return, ($_gutter-position: $_gutter)); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Is Inside |
||||||
|
// --------- |
||||||
|
// Returns true if gutters are inside. |
||||||
|
// $context: <context> |
||||||
|
@function is-inside( |
||||||
|
$context |
||||||
|
) { |
||||||
|
$_inside: inside inside-static; |
||||||
|
$_gutter-position: susy-get(gutter-position, $context); |
||||||
|
|
||||||
|
@return if(index($_inside, $_gutter-position), true, false); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Is Split |
||||||
|
// -------- |
||||||
|
// Returns true if gutters are split. |
||||||
|
// $context: <context> |
||||||
|
@function is-split( |
||||||
|
$context |
||||||
|
) { |
||||||
|
$_split: split inside inside-static; |
||||||
|
$_gutter-position: susy-get(gutter-position, $context); |
||||||
|
|
||||||
|
@return if(index($_split, $_gutter-position), true, false); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Gutter Math |
||||||
|
// ----------- |
||||||
|
// Return the math to use for gutter calculations |
||||||
|
// $context: <context> |
||||||
|
@function gutter-math( |
||||||
|
$context: $susy |
||||||
|
) { |
||||||
|
$_return : susy-get(math, $context); |
||||||
|
$_return : if(susy-get(gutter-position, $context) == inside-static, static, $_return); |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
// Isolation Syntax |
||||||
|
// ================ |
||||||
|
|
||||||
|
|
||||||
|
// Isolate [Mixin] |
||||||
|
// --------------- |
||||||
|
// Set isolation as an override. |
||||||
|
// - $location: <span> |
||||||
|
@mixin isolate( |
||||||
|
$isolate: 1 |
||||||
|
) { |
||||||
|
$inspect: $isolate; |
||||||
|
|
||||||
|
$output: ( |
||||||
|
push: isolate($isolate), |
||||||
|
flow: susy-get(flow, $isolate), |
||||||
|
); |
||||||
|
|
||||||
|
@include susy-inspect(isolate, $inspect); |
||||||
|
@include isolate-output($output...); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Isolate [function] |
||||||
|
// ------------------ |
||||||
|
// Return an isolation offset width. |
||||||
|
// - $location: <span> |
||||||
|
@function isolate( |
||||||
|
$isolate: 1 |
||||||
|
) { |
||||||
|
$isolate: parse-span($isolate); |
||||||
|
$isolation: susy-get(span, $isolate); |
||||||
|
|
||||||
|
@if $isolation and not(get-location($isolate)) { |
||||||
|
$new: ( |
||||||
|
span: null, |
||||||
|
location: $isolation, |
||||||
|
); |
||||||
|
$isolate: map-merge($isolate, $new); |
||||||
|
} |
||||||
|
|
||||||
|
@return get-isolation($isolate); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Isolation |
||||||
|
// ------------- |
||||||
|
// Return the isolation offset width |
||||||
|
// - $input: <map> |
||||||
|
@function get-isolation( |
||||||
|
$input |
||||||
|
) { |
||||||
|
$location : get-location($input); |
||||||
|
$columns : susy-get(columns, $input); |
||||||
|
$width : null; |
||||||
|
|
||||||
|
@if type-of($location) == number and not(unitless($location)) { |
||||||
|
$width: $location; |
||||||
|
} @else if $location { |
||||||
|
$push: $location - 1; |
||||||
|
@if $push > 0 { |
||||||
|
$push: map-merge($input, ( |
||||||
|
span: $push, |
||||||
|
location: 1, |
||||||
|
spread: wide, |
||||||
|
)); |
||||||
|
$width: get-span-width($push); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@if susy-get(gutter-position, $input) == split |
||||||
|
and susy-get(gutters, $input) > 0 { |
||||||
|
$width: if($width == null, gutters($input), $width + gutters($input)); |
||||||
|
} |
||||||
|
|
||||||
|
@return $width or 0; |
||||||
|
} |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
// Margin Syntax |
||||||
|
// ============= |
||||||
|
|
||||||
|
// Pre |
||||||
|
// --- |
||||||
|
// Add spanning-margins before an element. |
||||||
|
// - $span : <span> |
||||||
|
@mixin pre( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$inspect: $span; |
||||||
|
$span : map-merge((spread: wide), parse-span($span)); |
||||||
|
$flow : susy-get(flow, $span); |
||||||
|
$split : if(susy-get(gutter-position, $span) == split, true, false); |
||||||
|
$gutter : gutter($span); |
||||||
|
$span : span($span); |
||||||
|
$width : if($split and $gutter, $span + $gutter, $span); |
||||||
|
|
||||||
|
@include susy-inspect(pre, $inspect); |
||||||
|
@include margin-output($width, null, $flow); |
||||||
|
} |
||||||
|
|
||||||
|
// Post |
||||||
|
// ---- |
||||||
|
// Add spanning-margins after an element. |
||||||
|
// - $span : <span> |
||||||
|
@mixin post( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$inspect : $span; |
||||||
|
$span : map-merge((spread: wide), parse-span($span)); |
||||||
|
$flow : susy-get(flow, $span); |
||||||
|
$split : if(susy-get(gutter-position, $span) == split, true, false); |
||||||
|
$width : if($split, span($span) + gutter($span), span($span)); |
||||||
|
|
||||||
|
@include susy-inspect(post, $inspect); |
||||||
|
@include margin-output(null, $width, $flow); |
||||||
|
} |
||||||
|
|
||||||
|
// Push |
||||||
|
// ---- |
||||||
|
// Simple synonymn for pre. |
||||||
|
// - $span : <span> |
||||||
|
@mixin push( |
||||||
|
$span |
||||||
|
) { |
||||||
|
@include pre($span); |
||||||
|
} |
||||||
|
|
||||||
|
// Pull |
||||||
|
// ---- |
||||||
|
// Add negative spanning-margins before an element. |
||||||
|
// - $span : <span> |
||||||
|
@mixin pull( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$inspect : $span; |
||||||
|
$span : map-merge((spread: wide), parse-span($span)); |
||||||
|
$flow : susy-get(flow, $span); |
||||||
|
$split : if(susy-get(gutter-position, $span) == split, true, false); |
||||||
|
$width : if($split, 0 - span($span) + gutter($span), 0 - span($span)); |
||||||
|
|
||||||
|
@include susy-inspect(pull, $inspect); |
||||||
|
@include margin-output($width, null, $flow); |
||||||
|
} |
||||||
|
|
||||||
|
// Squish |
||||||
|
// ------ |
||||||
|
// Add spanning-margins before and after an element. |
||||||
|
// - $pre : <span> |
||||||
|
// - [$post] : <span> |
||||||
|
@mixin squish( |
||||||
|
$pre, |
||||||
|
$post: false |
||||||
|
) { |
||||||
|
$inspect : ($pre, $post); |
||||||
|
$pre : map-merge((spread: wide), parse-span($pre)); |
||||||
|
|
||||||
|
@if $post { |
||||||
|
$post: map-merge((spread: wide), parse-span($post)); |
||||||
|
} @else { |
||||||
|
$span: susy-get(span, $pre); |
||||||
|
@if length($span) > 1 { |
||||||
|
$pre: map-merge($pre, (span: nth($span, 1))); |
||||||
|
$post: map-merge($pre, (span: nth($span, 2))); |
||||||
|
} @else { |
||||||
|
$post: $pre; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-inspect(squish, $inspect); |
||||||
|
@include pre($pre); |
||||||
|
@include post($post); |
||||||
|
} |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
// Padding Syntax |
||||||
|
// ============== |
||||||
|
|
||||||
|
// Prefix |
||||||
|
// ------ |
||||||
|
// Add spanning-padding before an element. |
||||||
|
// - $span : <span> |
||||||
|
@mixin prefix( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$inspect : $span; |
||||||
|
$span : map-merge((spread: wide), parse-span($span)); |
||||||
|
$flow : susy-get(flow, $span); |
||||||
|
$width : span($span); |
||||||
|
|
||||||
|
@if is-inside($span) { |
||||||
|
$gutter: gutter($span); |
||||||
|
$width: if($gutter and comparable($width, $gutter), $width + $gutter, $width); |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-inspect(prefix, $inspect); |
||||||
|
@include padding-output($width, null, $flow); |
||||||
|
} |
||||||
|
|
||||||
|
// Suffix |
||||||
|
// ------ |
||||||
|
// Add spanning-padding after an element. |
||||||
|
// - $span : <span> |
||||||
|
@mixin suffix( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$inspect : $span; |
||||||
|
$span : map-merge((spread: wide), parse-span($span)); |
||||||
|
$flow : susy-get(flow, $span); |
||||||
|
$width : span($span); |
||||||
|
|
||||||
|
@if is-inside($span) { |
||||||
|
$gutter: gutter($span); |
||||||
|
$width: if($gutter and comparable($width, $gutter), $width + $gutter, $width); |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-inspect(suffix, $inspect); |
||||||
|
@include padding-output(null, $width, $flow); |
||||||
|
} |
||||||
|
|
||||||
|
// Pad |
||||||
|
// --- |
||||||
|
// Add spanning-padding before and after an element. |
||||||
|
// - $pre : <span> |
||||||
|
// - [$post] : <span> |
||||||
|
@mixin pad( |
||||||
|
$pre, |
||||||
|
$post: false |
||||||
|
) { |
||||||
|
$inspect : ($pre, $post); |
||||||
|
$pre : map-merge((spread: wide), parse-span($pre)); |
||||||
|
|
||||||
|
@if $post { |
||||||
|
$post: map-merge((spread: wide), parse-span($post)); |
||||||
|
} @else { |
||||||
|
$span: susy-get(span, $pre); |
||||||
|
@if length($span) > 1 { |
||||||
|
$pre: map-merge($pre, (span: nth($span, 1))); |
||||||
|
$post: map-merge($pre, (span: nth($span, 2))); |
||||||
|
} @else { |
||||||
|
$post: $pre; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-inspect(pad, $inspect); |
||||||
|
@include prefix($pre); |
||||||
|
@include suffix($post); |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,138 @@ |
|||||||
|
// Row Start & End |
||||||
|
// =============== |
||||||
|
|
||||||
|
// Break |
||||||
|
// ----- |
||||||
|
// Apply to any element that should force a line break. |
||||||
|
@mixin break { |
||||||
|
@include output((clear: both)); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// NoBreak |
||||||
|
// ------- |
||||||
|
// Cancel the break() effect, e.g. when using media queries. |
||||||
|
@mixin nobreak { |
||||||
|
@include output((clear: none)); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Full |
||||||
|
// ---- |
||||||
|
// - [$context]: <layout shorthand> |
||||||
|
@mixin full( |
||||||
|
$context: $susy |
||||||
|
) { |
||||||
|
$inspect : $context; |
||||||
|
@include susy-inspect(full, $inspect); |
||||||
|
@include span(full of parse-grid($context) break); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// First |
||||||
|
// ----- |
||||||
|
// - [$context]: <settings> |
||||||
|
@mixin first( |
||||||
|
$context: $susy |
||||||
|
) { |
||||||
|
$inspect : $context; |
||||||
|
$context : parse-grid($context); |
||||||
|
$flow : susy-get(flow, $context); |
||||||
|
|
||||||
|
@include susy-inspect(first, $inspect); |
||||||
|
@if not(is-split($context)) { |
||||||
|
@include float-first($flow); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin alpha( |
||||||
|
$context: $susy |
||||||
|
) { |
||||||
|
@include first($context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Last |
||||||
|
// ---- |
||||||
|
// - [$context]: <settings> |
||||||
|
@mixin last( |
||||||
|
$context: $susy |
||||||
|
) { |
||||||
|
$inspect : $context; |
||||||
|
$context : parse-grid($context); |
||||||
|
|
||||||
|
@include susy-inspect(last, $inspect); |
||||||
|
|
||||||
|
$output: ( |
||||||
|
flow: susy-get(flow, $context), |
||||||
|
last-flow: susy-get(last-flow, $context), |
||||||
|
margin: if(is-split($context), null, 0), |
||||||
|
); |
||||||
|
|
||||||
|
@include float-last($output...); |
||||||
|
} |
||||||
|
|
||||||
|
@mixin omega( |
||||||
|
$context: $susy |
||||||
|
) { |
||||||
|
@include last($context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Edge |
||||||
|
// -------- |
||||||
|
// Calculate edge value based on location, if possible |
||||||
|
@function get-edge( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$span : parse-span($span); |
||||||
|
$edge : susy-get(edge, $span); |
||||||
|
|
||||||
|
@if not($edge) { |
||||||
|
$count: susy-count(susy-get(columns, $span)); |
||||||
|
$location: susy-get(location, $span); |
||||||
|
$n: susy-get(span, $span); |
||||||
|
|
||||||
|
$number: if(type-of($location) == number, true, false); |
||||||
|
$index: if($number and unitless($location), true, false); |
||||||
|
|
||||||
|
@if $n == $count { |
||||||
|
$edge: full; |
||||||
|
} @else if $location and $n and $index { |
||||||
|
@if $location == 1 { |
||||||
|
$edge: if($n == $count, full, first); |
||||||
|
} @else if $location + $n - 1 == $count { |
||||||
|
$edge: last; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@if $edge == alpha or $edge == omega { |
||||||
|
$edge: if($edge == alpha, first, last); |
||||||
|
} |
||||||
|
|
||||||
|
@return $edge; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Get Location |
||||||
|
// ------------ |
||||||
|
// Calculate location value based on edge, if possible |
||||||
|
@function get-location( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$span : parse-span($span); |
||||||
|
$location : susy-get(location, $span); |
||||||
|
$edge : get-edge($span); |
||||||
|
$n : susy-get(span, $span); |
||||||
|
|
||||||
|
@if $edge and not($location) and type-of($n) == number and unitless($n) { |
||||||
|
@if $edge == first { |
||||||
|
$location: 1; |
||||||
|
} @else if $edge == last { |
||||||
|
$location: susy-count(susy-get(columns, $span)) - $n + 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $location |
||||||
|
} |
||||||
@ -0,0 +1,216 @@ |
|||||||
|
// Susy Settings |
||||||
|
// ============= |
||||||
|
|
||||||
|
// Susy Language Defaults |
||||||
|
// ---------------------- |
||||||
|
// - PRIVATE |
||||||
|
@include susy-defaults(( |
||||||
|
container: auto, |
||||||
|
math: fluid, |
||||||
|
output: float, |
||||||
|
container-position: center, |
||||||
|
gutter-position: after, |
||||||
|
global-box-sizing: content-box, |
||||||
|
debug: ( |
||||||
|
image: hide, |
||||||
|
color: rgba(#66f, .25), |
||||||
|
output: background, |
||||||
|
toggle: top right, |
||||||
|
), |
||||||
|
)); |
||||||
|
|
||||||
|
|
||||||
|
// Valid Keyword Values |
||||||
|
// -------------------- |
||||||
|
// - PRIVATE: DONT'T TOUCH |
||||||
|
$susy-keywords: ( |
||||||
|
container: auto, |
||||||
|
math: static fluid, |
||||||
|
output: isolate float, |
||||||
|
container-position: left center right, |
||||||
|
flow: ltr rtl, |
||||||
|
gutter-position: before after split inside inside-static, |
||||||
|
box-sizing: border-box content-box, |
||||||
|
span: full, |
||||||
|
edge: first alpha last omega full, |
||||||
|
spread: narrow wide wider, |
||||||
|
gutter-override: no-gutters no-gutter, |
||||||
|
role: nest, |
||||||
|
clear: break nobreak, |
||||||
|
debug image: show hide show-columns show-baseline, |
||||||
|
debug output: background overlay, |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
// Parse Susy Keywords and Maps |
||||||
|
// ---------------------------- |
||||||
|
@function parse-settings( |
||||||
|
$short: $susy |
||||||
|
) { |
||||||
|
$_return: (); |
||||||
|
|
||||||
|
@if type-of($short) == map { |
||||||
|
$_return: $short; |
||||||
|
} @else { |
||||||
|
@each $item in $short { |
||||||
|
// strings |
||||||
|
@if type-of($item) == string { |
||||||
|
@each $key, $value in $susy-keywords { |
||||||
|
@if index($value, $item) { |
||||||
|
$_key-value: append($key, $item); |
||||||
|
$_return: _susy-deep-set($_return, $_key-value...); |
||||||
|
} |
||||||
|
} |
||||||
|
// maps |
||||||
|
} @else if type-of($item) == map { |
||||||
|
$_return: map-merge($_return, $item); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Parse Columns & Gutters |
||||||
|
// ----------------------- |
||||||
|
@function parse-layout( |
||||||
|
$short |
||||||
|
) { |
||||||
|
$_return: (); |
||||||
|
$_columns: (); |
||||||
|
$_gutters: null; |
||||||
|
|
||||||
|
@if not(unitless(nth(nth($short, 1), 1))) { |
||||||
|
$_gutters: nth($short, 1); |
||||||
|
} @else { |
||||||
|
$_columns: (columns: nth($short, 1)); |
||||||
|
$_gutters: if(length($short) > 1, nth($short, 2), $_gutters); |
||||||
|
} |
||||||
|
|
||||||
|
@if type-of($_gutters) == list and length($_gutters) > 0 { |
||||||
|
$_gutters: ( |
||||||
|
gutters: nth($_gutters, 2) / nth($_gutters, 1), |
||||||
|
column-width: nth($_gutters, 1), |
||||||
|
); |
||||||
|
} @else { |
||||||
|
$_gutters: if($_gutters, (gutters: $_gutters), ()); |
||||||
|
} |
||||||
|
|
||||||
|
$_return: map-merge($_return, $_columns); |
||||||
|
$_return: map-merge($_return, $_gutters); |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Parse Grid/Context |
||||||
|
// ------------------ |
||||||
|
@function parse-grid( |
||||||
|
$short: $susy |
||||||
|
) { |
||||||
|
$_return: parse-settings($short); |
||||||
|
$_layout: (); |
||||||
|
|
||||||
|
@if type-of($short) == map { |
||||||
|
$_return: $short; |
||||||
|
} @else { |
||||||
|
@each $item in $short { |
||||||
|
// number or list |
||||||
|
@if type-of($item) == number or type-of($item) == list { |
||||||
|
@if type-of($item) == list or unitless($item) { |
||||||
|
$_layout: append($_layout, $item); |
||||||
|
} @else { |
||||||
|
$_return: map-merge($_return, (container: $item)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$_layout: if(length($_layout) > 0, parse-layout($_layout), $_layout); |
||||||
|
} |
||||||
|
|
||||||
|
@return map-merge($_return, $_layout); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Parse Span |
||||||
|
// ---------- |
||||||
|
@function parse-span( |
||||||
|
$short, |
||||||
|
$key: span |
||||||
|
) { |
||||||
|
$_return: (); |
||||||
|
|
||||||
|
@if type-of($short) == map { |
||||||
|
$_return: $short; |
||||||
|
} @else { |
||||||
|
$_at: index($short, at); |
||||||
|
|
||||||
|
@if $_at { |
||||||
|
$_loci: $_at + 1; |
||||||
|
$_location: nth($short, $_loci); |
||||||
|
$_return: map-merge($_return, (location: $_location)); |
||||||
|
$short: set-nth($short, $_at, null); |
||||||
|
$short: set-nth($short, $_loci, null); |
||||||
|
} |
||||||
|
|
||||||
|
$_i: 1; |
||||||
|
$_span: (); |
||||||
|
|
||||||
|
@while $_i <= length($short) { |
||||||
|
$_this: nth($short, $_i); |
||||||
|
|
||||||
|
@if type-of($_this) == number { |
||||||
|
$_span: append($_span, $_this); |
||||||
|
$short: set-nth($short, $_i, null); |
||||||
|
} @else if $_this == of { |
||||||
|
$short: set-nth($short, $_i, null); |
||||||
|
$_i: length($short) + 1; |
||||||
|
} |
||||||
|
|
||||||
|
$_i: $_i + 1; |
||||||
|
} |
||||||
|
|
||||||
|
@if length($_span) > 0 { |
||||||
|
$_span: if(length($_span) == 1, nth($_span, 1), $_span); |
||||||
|
$_return: map-merge($_return, ($key: $_span)); |
||||||
|
} |
||||||
|
|
||||||
|
$_return: map-merge($_return, parse-grid($short)); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Parse Gutters |
||||||
|
// ------------- |
||||||
|
@function parse-gutters( |
||||||
|
$short: $susy |
||||||
|
) { |
||||||
|
$_gutters: parse-span($short, gutter-override); |
||||||
|
$_span: susy-get(gutter-override, $_gutters); |
||||||
|
|
||||||
|
@if $_span and not(map-get($_gutters, columns)) { |
||||||
|
$_context: (); |
||||||
|
$_new: (); |
||||||
|
|
||||||
|
@each $item in $_span { |
||||||
|
@if type-of($item) == number and unitless($item) { |
||||||
|
$_context: append($_context, $item); |
||||||
|
} @else { |
||||||
|
$_new: append($_new, $item); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$_context: parse-grid($_context); |
||||||
|
$_new: if(length($_new) == 0, null, $_new); |
||||||
|
$_new: if(length($_new) == 1, nth($_new, 1), $_new); |
||||||
|
$_new: (gutter-override: if($_new != $_span, $_new, $_span)); |
||||||
|
|
||||||
|
$_gutters: map-merge($_gutters, $_new); |
||||||
|
$_gutters: map-merge($_gutters, $_context); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_gutters; |
||||||
|
} |
||||||
@ -0,0 +1,163 @@ |
|||||||
|
// Span Syntax |
||||||
|
// =========== |
||||||
|
|
||||||
|
// Span [mixin] |
||||||
|
// ------------ |
||||||
|
// Set a spanning element using shorthand syntax. |
||||||
|
// - $span : <span> |
||||||
|
@mixin span( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$inspect: $span; |
||||||
|
$span: parse-span($span); |
||||||
|
$output: span-math($span); |
||||||
|
$nesting: susy-get(span, $span); |
||||||
|
$clear: susy-get(clear, $span); |
||||||
|
|
||||||
|
$box: susy-get(box-sizing, $span); |
||||||
|
$content-box: if(susy-get(global-box-sizing) != 'border-box', true, false); |
||||||
|
$box: $box or if(is-inside($span) and $content-box, border-box, null); |
||||||
|
|
||||||
|
@if $clear == break { |
||||||
|
@include break; |
||||||
|
} @else if $clear == nobreak { |
||||||
|
@include nobreak; |
||||||
|
} |
||||||
|
|
||||||
|
@include susy-inspect(span, $inspect); |
||||||
|
@include output((box-sizing: $box)); |
||||||
|
@include float-span-output($output...); |
||||||
|
|
||||||
|
@if valid-columns($nesting, silent) { |
||||||
|
@include nested($span) { @content; } |
||||||
|
} @else { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Span [function] |
||||||
|
// --------------- |
||||||
|
// Return the width of a span. |
||||||
|
// - $span : <span> |
||||||
|
@function span( |
||||||
|
$span |
||||||
|
) { |
||||||
|
@return get-span-width($span); |
||||||
|
} |
||||||
|
|
||||||
|
// Span Math |
||||||
|
// --------- |
||||||
|
// Get all the span results. |
||||||
|
// - $span: <map> |
||||||
|
@function span-math( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$nest : if(susy-get(role, $span) == nest, true, false); |
||||||
|
$split-nest : if(is-split($span) and $nest, true, false); |
||||||
|
$edge : get-edge($span); |
||||||
|
$location : get-location($span); |
||||||
|
|
||||||
|
$float : from; |
||||||
|
$padding-before : null; |
||||||
|
$padding-after : null; |
||||||
|
$margin-before : null; |
||||||
|
$margin-after : null; |
||||||
|
|
||||||
|
// calculate widths |
||||||
|
$spread: index(map-values($span), spread); |
||||||
|
$span: if($split-nest and not($spread), map-merge($span, (spread: wide)), $span); |
||||||
|
$width: get-span-width($span); |
||||||
|
$gutters: get-gutters($span); |
||||||
|
|
||||||
|
// apply gutters |
||||||
|
@if is-inside($span) { |
||||||
|
@if not(susy-get(role, $span)) { |
||||||
|
$padding-before: map-get($gutters, before); |
||||||
|
$padding-after: map-get($gutters, after); |
||||||
|
} |
||||||
|
} @else { |
||||||
|
@if not($split-nest) { |
||||||
|
$margin-before: map-get($gutters, before); |
||||||
|
$margin-after: map-get($gutters, after); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// special margin handling |
||||||
|
@if susy-get(output, $span) == isolate and $location { |
||||||
|
$margin-before: get-isolation($span); |
||||||
|
$margin-after: -100%; |
||||||
|
} @else if $edge { |
||||||
|
$is-split: is-split($span); |
||||||
|
$pos: susy-get(gutter-position, $span); |
||||||
|
|
||||||
|
@if $edge == last { |
||||||
|
$float: susy-get(last-flow, $span); |
||||||
|
} |
||||||
|
|
||||||
|
@if not($is-split) { |
||||||
|
@if $edge == full or ($edge == first and $pos == before) { |
||||||
|
$margin-before: 0; |
||||||
|
} |
||||||
|
@if $edge == full or ($edge == last and $pos == after) { |
||||||
|
$margin-after: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
@return ( |
||||||
|
width : $width, |
||||||
|
float : $float, |
||||||
|
margin-before : $margin-before, |
||||||
|
margin-after : $margin-after, |
||||||
|
padding-before : $padding-before, |
||||||
|
padding-after : $padding-after, |
||||||
|
flow : susy-get(flow, $span), |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
// Get Span Width |
||||||
|
// -------------- |
||||||
|
// Return span width. |
||||||
|
// - $span: <map> |
||||||
|
@function get-span-width( |
||||||
|
$span |
||||||
|
) { |
||||||
|
$span : parse-span($span); |
||||||
|
|
||||||
|
$n : susy-get(span, $span); |
||||||
|
$location : get-location($span); |
||||||
|
$columns : susy-get(columns, $span); |
||||||
|
$gutters : susy-get(gutters, $span); |
||||||
|
$spread : susy-get(spread, $span); |
||||||
|
|
||||||
|
$context : null; |
||||||
|
$span-sum : null; |
||||||
|
$width : null; |
||||||
|
|
||||||
|
@if $n == 'full' { |
||||||
|
$pos: susy-get(gutter-position, $span); |
||||||
|
$role: susy-get(role, $span); |
||||||
|
$n: if($pos == split and $role != nest, susy-count($columns), 100%); |
||||||
|
} |
||||||
|
|
||||||
|
@if type-of($n) != number { |
||||||
|
@warn "(#{type-of($n)}) #{$n} is not a valid span."; |
||||||
|
} @else if unitless($n) { |
||||||
|
$context: susy-sum($columns, $gutters, if(is-split($span), wide, narrow)); |
||||||
|
$spread: if(is-inside($span), $spread or wide, $spread); |
||||||
|
$span-sum: susy($n, $location, $columns, $gutters, $spread); |
||||||
|
|
||||||
|
$_math: susy-get(math, $span); |
||||||
|
$_column-width: susy-get(column-width, $span); |
||||||
|
@if $_math == static { |
||||||
|
$width: $span-sum * valid-column-math($_math, $_column-width); |
||||||
|
} @else { |
||||||
|
$width: percentage($span-sum / $context); |
||||||
|
} |
||||||
|
} @else { |
||||||
|
$width: $n; |
||||||
|
} |
||||||
|
|
||||||
|
@return $width; |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
// Validation |
||||||
|
// ========== |
||||||
|
|
||||||
|
|
||||||
|
// Validate Column Math |
||||||
|
// -------------------- |
||||||
|
@function valid-column-math( |
||||||
|
$math, |
||||||
|
$column-width |
||||||
|
) { |
||||||
|
@if $math == static and not($column-width) { |
||||||
|
@error 'Static math requires a valid column-width setting.'; |
||||||
|
} |
||||||
|
|
||||||
|
@return $column-width; |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Imports |
||||||
|
|
||||||
|
@import "compass/layout/grid-background"; |
||||||
|
@import "compass/css3/background-origin"; |
||||||
|
@import "compass/css3/background-clip"; |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Susy Grid Background |
||||||
|
// |
||||||
|
// A wrapper for the compass "column-grid-background" mixin |
||||||
|
// Uses all your settings to create a grid background for a container element. |
||||||
|
// Note: Sub-pixel rounding can lead to several pixels of variation between browsers. |
||||||
|
@mixin susy-grid-background(){ |
||||||
|
@include column-grid-background($total-columns, column(), gutter(), 0); |
||||||
|
@include background-origin(content-box); |
||||||
|
@include background-clip(content-box); |
||||||
|
} |
||||||
@ -0,0 +1,377 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Imports |
||||||
|
|
||||||
|
// We need access to some basic font settings for handling media-queries. |
||||||
|
@import "compass/typography/vertical_rhythm"; |
||||||
|
|
||||||
|
// For now, we also need this... |
||||||
|
$browser-default-font-size-px : 16px; |
||||||
|
$browser-default-font-size-percent : 100%; |
||||||
|
$browser-default-font-size-pt : 12pt; |
||||||
|
|
||||||
|
$rem-with-px-fallback : true !default; |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Sass list Functions |
||||||
|
|
||||||
|
// Return a list with specific items removed |
||||||
|
// |
||||||
|
// filter($list, $target) |
||||||
|
// - $list : The list to filter. |
||||||
|
// - $target : An item to be removed from the list. |
||||||
|
@function filter($list, $target) { |
||||||
|
$clean: compact(); |
||||||
|
@if index($list, $target) { |
||||||
|
@each $item in $list { |
||||||
|
$clean: if($item == $target, $clean, append($clean, $item)); |
||||||
|
} |
||||||
|
} @else { $clean: $list; } |
||||||
|
@return $clean; |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Don't use static output when it will break things |
||||||
|
|
||||||
|
// Switch element-level output to fluid, when container-width is wrong for static |
||||||
|
// |
||||||
|
// fix-static-misalignment([$style, $width]) |
||||||
|
// - $style: $container-style. |
||||||
|
// - $width: $container-width. |
||||||
|
@function fix-static-misalignment( |
||||||
|
$style: $container-style, |
||||||
|
$width: $container-width |
||||||
|
) { |
||||||
|
@if $container-width and $container-width != container-outer-width($width: false) { |
||||||
|
$style: fluid; |
||||||
|
} |
||||||
|
@return $style; |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Grid Functions |
||||||
|
|
||||||
|
// Returns the full width of a grid based on your grid settings. |
||||||
|
// |
||||||
|
// $columns : The number of columns to get width for. |
||||||
|
@function columns-width( |
||||||
|
$columns : $total-columns |
||||||
|
) { |
||||||
|
@if round($columns) != $columns { |
||||||
|
@warn "Susy works best with integer column-spans." + |
||||||
|
"For partial-columns, you may need to finesse the math by hand using functions directly."; |
||||||
|
} |
||||||
|
@return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width); |
||||||
|
} |
||||||
|
|
||||||
|
// Return the grid width after adding or subtracting grid padding |
||||||
|
// |
||||||
|
// $width : the width of the grid without padding; |
||||||
|
// $operation : ( add | subtract ) if padding should be added or subtracted; |
||||||
|
@function handle-grid-padding( |
||||||
|
$width, |
||||||
|
$operation : subtract |
||||||
|
) { |
||||||
|
$pad: $grid-padding*2; |
||||||
|
|
||||||
|
@if comparable($width, $grid-padding) { |
||||||
|
$width: if($operation == subtract, $width - $pad, $width + $pad); |
||||||
|
} @else { |
||||||
|
@warn "$grid-padding must be set in units comparable to the container width."; |
||||||
|
} |
||||||
|
|
||||||
|
@return $width; |
||||||
|
} |
||||||
|
|
||||||
|
// Return the full outer width of a Container element. |
||||||
|
// |
||||||
|
// $columns : The number of columns in the Grid Layout. |
||||||
|
@function container-outer-width( |
||||||
|
$columns : $total-columns, |
||||||
|
$width : $container-width |
||||||
|
) { |
||||||
|
$outerwidth: if($width, $width, columns-width($columns)); |
||||||
|
|
||||||
|
@if $width { |
||||||
|
@if not($border-box-sizing) { $outerwidth: handle-grid-padding($outerwidth, subtract); } |
||||||
|
} @else { |
||||||
|
@if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); } |
||||||
|
} |
||||||
|
|
||||||
|
@return $outerwidth; |
||||||
|
} |
||||||
|
|
||||||
|
// Return the percentage width of a single column in a given 'context'. |
||||||
|
// |
||||||
|
// $context : The grid context in columns, if nested. |
||||||
|
// $style : The container style to use. |
||||||
|
@function column( |
||||||
|
$context : $total-columns, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
@return if($style == static, $column-width, relative-width($column-width, $context)); |
||||||
|
} |
||||||
|
|
||||||
|
// Return the percentage width of multiple 'columns' in a given 'context'. |
||||||
|
// |
||||||
|
// $columns : The number of columns to get relative width for. |
||||||
|
// $context : The grid context in columns, if nested. |
||||||
|
// $style : The container style to use. |
||||||
|
@function columns( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
@return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context)); |
||||||
|
} |
||||||
|
|
||||||
|
// Return the percentage width of a single gutter in a given 'context'. |
||||||
|
// |
||||||
|
// $context : The grid context in columns, if nested. |
||||||
|
// $style : The container style to use. |
||||||
|
@function gutter( |
||||||
|
$context : $total-columns, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
@return if($style == static, $gutter-width, relative-width($gutter-width, $context)); |
||||||
|
} |
||||||
|
|
||||||
|
// Return the percentage width of a given value in a given 'context'. |
||||||
|
// |
||||||
|
// $width : Any given width value. |
||||||
|
// $context : The grid context in columns, if nested. |
||||||
|
@function relative-width( |
||||||
|
$width, |
||||||
|
$context : $total-columns |
||||||
|
) { |
||||||
|
@return percentage($width / columns-width($context)); |
||||||
|
} |
||||||
|
|
||||||
|
// Return the total space occupied by multiple columns and associated gutters. |
||||||
|
// Useful for adding padding or margins (prefix, suffix, push, pull, etc.) |
||||||
|
// |
||||||
|
// $columns : The number of columns to get relative space for. |
||||||
|
// $context : The grid context in columns, if nested. |
||||||
|
// $style : The container style to use. |
||||||
|
@function space( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
@return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0); |
||||||
|
} |
||||||
|
|
||||||
|
// Accept a list including column-count and (optional) position. |
||||||
|
// Return either the column count or the position alone. |
||||||
|
// |
||||||
|
// $columns : the list to split and interprate. |
||||||
|
// $request : The value to return, either 'columns' or 'position'. |
||||||
|
@function split-columns-value( |
||||||
|
$columns, |
||||||
|
$request : columns |
||||||
|
) { |
||||||
|
$pos : false; |
||||||
|
$cols : false; |
||||||
|
|
||||||
|
@each $var in $columns { |
||||||
|
@if (type-of($var) == 'string') { |
||||||
|
$pos: $var; |
||||||
|
} @else { |
||||||
|
@if (type-of($var) == 'number') and (unitless($var)) { |
||||||
|
$cols: $var; |
||||||
|
} @else { |
||||||
|
@warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@if $request == 'columns' { |
||||||
|
@return $cols; |
||||||
|
} @else { |
||||||
|
@if $request == 'position' { |
||||||
|
@return $pos; |
||||||
|
} @else { |
||||||
|
@warn '"#{$request}" is not a valid value for $request'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Accept nth-selector variables, and format them as a valid CSS3 selector. |
||||||
|
// |
||||||
|
// $n : [first | only | last | <equation>] |
||||||
|
// $selector : [child | last-child | of-type | last-of-type ] |
||||||
|
@function format-nth( |
||||||
|
$n : last, |
||||||
|
$selector : child |
||||||
|
) { |
||||||
|
@if ($n == 'last') or ($n =='first') or ($n =='only') { |
||||||
|
$selector: '#{$n}-#{$selector}'; |
||||||
|
} @else { |
||||||
|
$selector: 'nth-#{$selector}(#{$n})'; |
||||||
|
} |
||||||
|
@return $selector; |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Media Functions |
||||||
|
|
||||||
|
// Return an em value adjusted to match the browser default font size. |
||||||
|
// Note: This only works if actual sizes are set relative to browser defaults. |
||||||
|
// |
||||||
|
// $ems : The initial value to be converted. |
||||||
|
// $font-size : The current font-size in. |
||||||
|
@function base-ems( |
||||||
|
$ems, |
||||||
|
$font-size: $base-font-size |
||||||
|
){ |
||||||
|
$font-size : if(unit($ems) == 'rem', $base-font-size, $font-size); |
||||||
|
$unit : unit($font-size); |
||||||
|
$mult : $ems / ($ems * 0 + 1); |
||||||
|
|
||||||
|
@if $unit == 'px' { |
||||||
|
@return $font-size / $browser-default-font-size-px * $mult * 1em; |
||||||
|
} |
||||||
|
@else if $unit == '%' { |
||||||
|
@return $font-size / $browser-default-font-size-percent * $mult * 1em; |
||||||
|
} |
||||||
|
@else if $unit == 'em' { |
||||||
|
@return $font-size / 1em * $mult * 1em; |
||||||
|
} |
||||||
|
@else if $unit == 'pt' { |
||||||
|
@return $font-size / $browser-default-font-size-pt * $mult * 1em; |
||||||
|
} |
||||||
|
@else { |
||||||
|
@warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// This name will be deprecated... |
||||||
|
@function absolute-ems( |
||||||
|
$ems, |
||||||
|
$font-size: $base-font-size |
||||||
|
){ |
||||||
|
@return base-ems( $ems, $font-size); |
||||||
|
} |
||||||
|
|
||||||
|
// Return a length, after any em-values have been sent through absolute-ems(). |
||||||
|
// |
||||||
|
// $length : The length value to be checked and adjusted if necessary. |
||||||
|
// $font-size : The current font-size in px. |
||||||
|
@function fix-ems( |
||||||
|
$length, |
||||||
|
$font-size: $base-font-size |
||||||
|
){ |
||||||
|
@if $length { |
||||||
|
@if (unit($length) == 'em') or (unit($length) == 'rem') { |
||||||
|
$length: absolute-ems($length,$font-size); |
||||||
|
} |
||||||
|
} |
||||||
|
@return $length; |
||||||
|
} |
||||||
|
|
||||||
|
// Sort a list of arguments into "$min $layout $max $ie" order, and return the list. |
||||||
|
// |
||||||
|
// $media-layout : a list of values [$min $layout $max $ie] including... |
||||||
|
// : - one unitless number (columns in a layout) |
||||||
|
// : - two optional lengths (min and max-width media-query breakpoints). |
||||||
|
// : - one optional boolean or string to trigger fallback support for IE. |
||||||
|
// $font-size : [optional] The base font-size of your layout, if you are using ems. |
||||||
|
// : - defaults to $base-font-size |
||||||
|
@function medialayout( |
||||||
|
$media-layout, |
||||||
|
$font-size: $base-font-size |
||||||
|
) { |
||||||
|
$media : false; |
||||||
|
$min : false; |
||||||
|
$layout : false; |
||||||
|
$max : false; |
||||||
|
$ie : false; |
||||||
|
$has-layout : false; |
||||||
|
|
||||||
|
@each $val in $media-layout { |
||||||
|
@if (type-of($val) == "number") { |
||||||
|
@if unitless($val) { |
||||||
|
$layout : $val; |
||||||
|
$has-layout : true; |
||||||
|
} @else { |
||||||
|
@if ($has-layout) and not($media) { |
||||||
|
$max: $val; |
||||||
|
} @else { |
||||||
|
@if $media { |
||||||
|
$media: join($media,$val); |
||||||
|
} @else { |
||||||
|
$media: $val; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
$ie: $val; |
||||||
|
} |
||||||
|
} |
||||||
|
@if (length($media) > 0) { |
||||||
|
@if (length($media) == 1) { |
||||||
|
$min: nth($media,1); |
||||||
|
} @else { |
||||||
|
$min: nth($media,1); |
||||||
|
$max: nth($media,2); |
||||||
|
@if comparable($min, $max) { |
||||||
|
@if ($min > $max) { |
||||||
|
$max: nth($media,1); |
||||||
|
$min: nth($media,2); |
||||||
|
} |
||||||
|
} @else { |
||||||
|
@warn "Can't compare incompatible units." + |
||||||
|
"Using #{$min} for min-width, and #{$max} for max-width"; |
||||||
|
} |
||||||
|
@if (length($media) > 2) { |
||||||
|
@warn "You can only send two lengths: a min-width and an (optional) max-width." + |
||||||
|
"You sent #{length($media)}: #{$media}"; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// media-queries must be set in ems relative to the browser default |
||||||
|
// rather than the font-size set in CSS. |
||||||
|
$min: fix-ems($min,$font-size); |
||||||
|
$max: fix-ems($max,$font-size); |
||||||
|
|
||||||
|
@return $min $layout $max $ie; |
||||||
|
} |
||||||
|
|
||||||
|
// Return the nearest layout (column-count) above a given breakpoint. |
||||||
|
// |
||||||
|
// $min : The min-width media-query breakpoint above which to establish a new layout. |
||||||
|
@function get-layout( |
||||||
|
$min |
||||||
|
) { |
||||||
|
$min : fix-ems($min); |
||||||
|
$return : false; |
||||||
|
|
||||||
|
@if comparable($min, $column-width) { |
||||||
|
$return : ceil(($min + $gutter-width) / ($column-width + $gutter-width)); |
||||||
|
} @else { |
||||||
|
@warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable."; |
||||||
|
} |
||||||
|
|
||||||
|
@return $return; |
||||||
|
} |
||||||
|
|
||||||
|
// Check to see if a given $media-layout list is simply the default. |
||||||
|
// |
||||||
|
// $media-layout : a list of values including - |
||||||
|
// : One unitless number (columns in a layout) |
||||||
|
// : Two optional lengths (min and max-width media-query breakpoints). |
||||||
|
// : One optional boolean or string to trigger fallback support for IE. |
||||||
|
@function is-default-layout( |
||||||
|
$media-layout |
||||||
|
) { |
||||||
|
$media-layout : medialayout($media-layout); |
||||||
|
$min : nth($media-layout,1); |
||||||
|
$layout-cols : nth($media-layout,2); |
||||||
|
$max : nth($media-layout,3); |
||||||
|
|
||||||
|
@if $min or $max { |
||||||
|
@return false; |
||||||
|
} @else { |
||||||
|
@return if($layout-cols == $total-columns,true,false); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,312 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Imports |
||||||
|
|
||||||
|
@import "compass/utilities/general/clearfix"; |
||||||
|
@import "compass/css3/box-sizing"; |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Border-Box Sizing |
||||||
|
|
||||||
|
// Apply the border-box sizing model to all elements |
||||||
|
// and adjust the grid math appropriately. |
||||||
|
@mixin border-box-sizing { |
||||||
|
$border-box-sizing: true !global; |
||||||
|
* { @include box-sizing(border-box); } |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Container |
||||||
|
|
||||||
|
// Set the width of a container |
||||||
|
// |
||||||
|
// $columns : The number of columns in the Grid Layout. |
||||||
|
@mixin set-container-width( |
||||||
|
$columns : $total-columns, |
||||||
|
$style : $container-style, |
||||||
|
$px-vals : $pixel-values-only |
||||||
|
){ |
||||||
|
$width: container-outer-width($columns); |
||||||
|
|
||||||
|
@if $style == 'static' { |
||||||
|
@if $px-vals == true { |
||||||
|
width: round(convert-length($width, px)); |
||||||
|
} @else { |
||||||
|
@include rem(width, $width); |
||||||
|
} |
||||||
|
} @else { |
||||||
|
@if $style == 'fluid' { |
||||||
|
@if unit($width) == '%' { |
||||||
|
@if $px-vals == true { |
||||||
|
width: round(convert-length($width, px)); |
||||||
|
} @else { |
||||||
|
@include rem(width, $width); |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
@if $px-vals == true { |
||||||
|
max-width: round(convert-length($width, px)); |
||||||
|
} @else { |
||||||
|
@include rem(max-width, $width); |
||||||
|
} |
||||||
|
|
||||||
|
@include for-legacy-browser(ie,"6") { |
||||||
|
@if unit($width) == 'rem' { |
||||||
|
_width: round(convert-length($width, px)); |
||||||
|
} @else { |
||||||
|
_width: $width; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Set the outer grid-containing element(s). |
||||||
|
// |
||||||
|
// $columns : The number of columns in the container. |
||||||
|
@mixin apply-container( |
||||||
|
$columns : $total-columns, |
||||||
|
$px-vals : $pixel-values-only |
||||||
|
){ |
||||||
|
@include pie-clearfix; |
||||||
|
@include set-container-width($columns); |
||||||
|
@if $px-vals == true { |
||||||
|
padding-left: round(convert-length($grid-padding, px)); |
||||||
|
padding-right: round(convert-length($grid-padding, px)); |
||||||
|
} @else { |
||||||
|
@include rem(padding-left, $grid-padding); |
||||||
|
@include rem(padding-right, $grid-padding); |
||||||
|
} |
||||||
|
margin: { left: auto; right: auto; } |
||||||
|
} |
||||||
|
|
||||||
|
// Set one or more layouts on a grid-containing element at any number of media-query breakpoints. |
||||||
|
// |
||||||
|
// $media-layout-1 : [default:$total-columns] A list of values including - |
||||||
|
// : One unitless number (representing columns in a layout) |
||||||
|
// : Two optional lengths (representing min and max-width media-query breakpoints). |
||||||
|
// $media-layout-2 ...-10 : [optional] Same as $media-layout-1 |
||||||
|
@mixin container( |
||||||
|
$media-layouts... |
||||||
|
){ |
||||||
|
$media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns); |
||||||
|
|
||||||
|
@each $ml in $media-layouts { |
||||||
|
@if is-default-layout($ml) { |
||||||
|
@include apply-container; |
||||||
|
} @else { |
||||||
|
@include at-breakpoint($ml) { |
||||||
|
@include apply-container; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Columns |
||||||
|
|
||||||
|
// Create a grid element spanning any number of 'columns' in a grid 'context'. |
||||||
|
// $columns : The number of columns to span. |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// : Context is required on any nested elements. |
||||||
|
// : Context MUST NOT be declared on a root element. |
||||||
|
// $padding : [optional] Padding applied to the inside of individual grid columns. |
||||||
|
// : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px) |
||||||
|
// : Padding values are applied only on the horizontal axis in from-to order |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin span-columns( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$padding : false, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
$to : opposite-position($from); |
||||||
|
$pos : split-columns-value($columns,position); |
||||||
|
$cols : split-columns-value($columns,columns); |
||||||
|
$pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); |
||||||
|
$pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); |
||||||
|
|
||||||
|
@if $padding != false { |
||||||
|
$pad-from : nth($padding, 1); |
||||||
|
|
||||||
|
@if length($padding) > 1 { |
||||||
|
$pad-to: nth($padding, 2); |
||||||
|
} @else { |
||||||
|
$pad-to: $pad-from; |
||||||
|
} |
||||||
|
|
||||||
|
$pad-from : if($style == static, $pad-from, relative-width($pad-from, $context)); |
||||||
|
$pad-to : if($style == static, $pad-to, relative-width($pad-to, $context)); |
||||||
|
|
||||||
|
padding-#{$from}: $pad-from; |
||||||
|
padding-#{$to}: $pad-to; |
||||||
|
} |
||||||
|
|
||||||
|
width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from); |
||||||
|
|
||||||
|
@if ($pos == 'omega') { |
||||||
|
@include omega($from); |
||||||
|
} @else { |
||||||
|
float: $from; |
||||||
|
margin-#{$to}: gutter($context, $style); |
||||||
|
@include for-legacy-browser(ie, "6") { |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Apply to elements spanning the last column, to account for the page edge. |
||||||
|
// Only needed as an override. Normally 'omega' can just be called by `columns`. |
||||||
|
// |
||||||
|
// $from : The start-direction for your document. |
||||||
|
@mixin omega( |
||||||
|
$from : $from-direction |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
$to : opposite-position($from); |
||||||
|
$hack : opposite-position($omega-float); |
||||||
|
|
||||||
|
float: $omega-float; |
||||||
|
margin-#{$to}: 0; |
||||||
|
|
||||||
|
@include for-legacy-browser(ie, "6", "7") { |
||||||
|
*margin-#{$hack}: - $gutter-width; |
||||||
|
@include for-legacy-browser(ie, "6") { |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Shortcut to apply omega to a specific subset of elements. |
||||||
|
// |
||||||
|
// $n : [first | only | last | <equation>] |
||||||
|
// $selector : [child | last-child | of-type | last-of-type ] |
||||||
|
// $from : The start-direction for your document. |
||||||
|
@mixin nth-omega( |
||||||
|
$n : last, |
||||||
|
$selector : child, |
||||||
|
$from : $from-direction |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
|
||||||
|
&:#{format-nth($n,$selector)} { |
||||||
|
@if $n == "first" { |
||||||
|
@include omega($from); |
||||||
|
} @else { |
||||||
|
@include with-browser-ranges(css-sel3) { |
||||||
|
@include omega($from); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Resets |
||||||
|
|
||||||
|
// Reset a '+columns' grid element to default block behavior |
||||||
|
// |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
@mixin reset-columns( |
||||||
|
$from: $from-direction |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
$to : opposite-position($from); |
||||||
|
$hack : opposite-position($omega-float); |
||||||
|
|
||||||
|
float: none; |
||||||
|
width: auto; |
||||||
|
margin-#{$to}: auto; |
||||||
|
|
||||||
|
@include for-legacy-browser(ie, "6", "7") { |
||||||
|
*margin-#{$hack}: auto; |
||||||
|
@include for-legacy-browser(ie, "6") { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Apply to elements previously set as omega. |
||||||
|
// This will return floats and margins back to non-omega settigns. |
||||||
|
// |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// $from : The start-direction for your document. |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin remove-omega( |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
$to : opposite-position($from); |
||||||
|
$hack : opposite-position($omega-float); |
||||||
|
|
||||||
|
float: $from; |
||||||
|
margin-#{$to}: gutter($context, $style); |
||||||
|
|
||||||
|
@include for-legacy-browser(ie, "6", "7") { |
||||||
|
*margin-#{$hack}: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Shortcut to apply remove-omega to a specific subset of elements. |
||||||
|
// |
||||||
|
// $n : [first | only | last | <equation>] |
||||||
|
// $selector : [child | last-child | of-type | last-of-type ] |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// $from : The start-direction for your document. |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin remove-nth-omega( |
||||||
|
$n : last, |
||||||
|
$selector : child, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
|
||||||
|
&:#{format-nth($n,$selector)} { |
||||||
|
@if $n == "first" { |
||||||
|
@include remove-omega($context, $from, $style); |
||||||
|
} @else { |
||||||
|
@include with-browser-ranges(css-sel3) { |
||||||
|
@include remove-omega($context, $from, $style); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Change Settings |
||||||
|
|
||||||
|
@mixin with-grid-settings( |
||||||
|
$columns: $total-columns, |
||||||
|
$width: $column-width, |
||||||
|
$gutter: $gutter-width, |
||||||
|
$padding: $grid-padding |
||||||
|
) { |
||||||
|
// keep the defaults around |
||||||
|
$default-columns: $total-columns; |
||||||
|
$default-width: $column-width; |
||||||
|
$default-gutter: $gutter-width; |
||||||
|
$default-padding: $grid-padding; |
||||||
|
|
||||||
|
// use the new settings |
||||||
|
$total-columns: $columns !global; |
||||||
|
$column-width: $width !global; |
||||||
|
$gutter-width: $gutter !global; |
||||||
|
$grid-padding: $padding !global; |
||||||
|
|
||||||
|
// apply to contents |
||||||
|
@content; |
||||||
|
|
||||||
|
// re-instate the defaults |
||||||
|
$total-columns: $default-columns !global; |
||||||
|
$column-width: $default-width !global; |
||||||
|
$gutter-width: $default-gutter !global; |
||||||
|
$grid-padding: $default-padding !global; |
||||||
|
} |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Isolation |
||||||
|
|
||||||
|
// Isolate the position of a grid element (use in addition to span-columns) |
||||||
|
// |
||||||
|
// $location : The grid column to isolate in, relative to the container; |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
@mixin isolate( |
||||||
|
$location, |
||||||
|
$context: $total-columns, |
||||||
|
$from: $from-direction, |
||||||
|
$style: fix-static-misalignment() |
||||||
|
) { |
||||||
|
$to: opposite-position($from); |
||||||
|
margin-#{$to}: -100%; |
||||||
|
margin-#{$from}: space($location - 1, $context, $style); |
||||||
|
} |
||||||
|
|
||||||
|
// Isolate a group of elements in a grid, using nth-child selectors |
||||||
|
// |
||||||
|
// $columns : The column-width of each item on the grid; |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// $selector : [child | of-type | last-of-type ] (default is 'child') |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
@mixin isolate-grid( |
||||||
|
$columns, |
||||||
|
$context: $total-columns, |
||||||
|
$selector: 'child', |
||||||
|
$from: $from-direction, |
||||||
|
$style: fix-static-misalignment() |
||||||
|
) { |
||||||
|
$to: opposite-position($from); |
||||||
|
$location: 1; |
||||||
|
$line: floor($context / $columns); |
||||||
|
|
||||||
|
@include span-columns($columns, $context, $from: $from, $style: $style); |
||||||
|
margin-#{$to}: -100%; |
||||||
|
|
||||||
|
@for $item from 1 through $line { |
||||||
|
$nth: '#{$line}n + #{$item}'; |
||||||
|
&:#{format-nth($nth,$selector)} { |
||||||
|
margin-#{$from}: space($location - 1, $context, $style); |
||||||
|
@if $location == 1 { clear: $from; } |
||||||
|
@else { clear: none; } |
||||||
|
|
||||||
|
$location: $location + $columns; |
||||||
|
@if $location > $context { $location: 1; } |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Margin Mixins |
||||||
|
|
||||||
|
// Apply 'columns' margin before an element to push it along the grid. |
||||||
|
// |
||||||
|
// $columns : The number of columns to span. |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// : Context is required on any nested elements. |
||||||
|
// : Context MUST NOT be declared on a root element. |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin pre( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
margin-#{$from}: space($columns, $context, $style); |
||||||
|
} |
||||||
|
|
||||||
|
// 'push' is a synonymn for 'pre' |
||||||
|
@mixin push( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
@include pre($columns, $context, $from, $style); |
||||||
|
} |
||||||
|
|
||||||
|
// Apply negative 'columns' margin before an element to pull it along the grid. |
||||||
|
// |
||||||
|
// $columns : The number of columns to span. |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// : Context is required on any nested elements. |
||||||
|
// : Context MUST NOT be declared on a root element. |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin pull( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
margin-#{$from}: 0 - space($columns, $context, $style); |
||||||
|
} |
||||||
|
|
||||||
|
// Apply 'columns' margin after an element to contain it in a grid. |
||||||
|
// |
||||||
|
// $columns : The number of columns to span. |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// : Context is required on any nested elements. |
||||||
|
// : Context MUST NOT be declared on a root element. |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin post( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
$to : opposite-position($from); |
||||||
|
margin-#{$to}: space($columns, $context, $style); |
||||||
|
} |
||||||
|
|
||||||
|
// Apply 'columns' before and/or after an element to contain it on a grid. |
||||||
|
// |
||||||
|
// $pre : The number of columns to add as margin before. |
||||||
|
// $post : The number of columns to add as margin after. |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// : Context is required on any nested elements. |
||||||
|
// : Context MUST NOT be declared on a root element. |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin squish( |
||||||
|
$pre : false, |
||||||
|
$post : false, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
@if $pre { |
||||||
|
@include pre($pre, $context, $from, $style) |
||||||
|
} |
||||||
|
@if $post { |
||||||
|
@include post($post, $context, $from, $style) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,105 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Media Mixins |
||||||
|
|
||||||
|
// Create a new layout context for (@content) descendants. |
||||||
|
// |
||||||
|
// $layout-cols : a (unitless) number of columns to use for this layout. |
||||||
|
@mixin layout( |
||||||
|
$layout-cols |
||||||
|
) { |
||||||
|
// store default $total-columns setting for later, then change it. |
||||||
|
$default-layout : $total-columns; |
||||||
|
$total-columns : $layout-cols !global; |
||||||
|
|
||||||
|
// apply children in this new layout context. |
||||||
|
@content; |
||||||
|
|
||||||
|
// return to default $total-columns setting. |
||||||
|
$total-columns : $default-layout !global; |
||||||
|
} |
||||||
|
|
||||||
|
// Nest a block of code inside a new media-query and layout context. |
||||||
|
// |
||||||
|
// $media-layout : a list of values [$min $layout $max $ie] including... |
||||||
|
// : - one unitless number (columns in a layout) |
||||||
|
// : - two optional lengths (min and max-width media-query breakpoints). |
||||||
|
// : - one optional boolean or string to trigger fallback support for IE. |
||||||
|
// $font-size : [optional] The base font-size of your layout, if you are using ems. |
||||||
|
// : - defaults to $base-font-size |
||||||
|
@mixin at-breakpoint( |
||||||
|
$media-layout, |
||||||
|
$font-size: $base-font-size |
||||||
|
) { |
||||||
|
$media-layout : medialayout($media-layout,$font-size); |
||||||
|
$min : nth($media-layout,1); |
||||||
|
$layout : nth($media-layout,2); |
||||||
|
$max : nth($media-layout,3); |
||||||
|
$ie : nth($media-layout,4); |
||||||
|
|
||||||
|
@if not($breakpoint-media-output) and not($breakpoint-ie-output) and not($breakpoint-raw-output) { |
||||||
|
@warn "Either $breakpoint-media-output, $breakpoint-ie-output, or $breakpoint-raw-output must be true for at-breakpoint to work."; |
||||||
|
} |
||||||
|
|
||||||
|
// We need to have either a min-width breakpoint or a layout in order to proceed. |
||||||
|
@if $min or $layout or $max { |
||||||
|
|
||||||
|
// If we don't have a layout, we create one based on the min-width. |
||||||
|
@if not($layout) { |
||||||
|
$layout: get-layout($min); |
||||||
|
} |
||||||
|
|
||||||
|
// If we still don't have a layout, we have a problem. |
||||||
|
@if $layout { |
||||||
|
// Set our new layout context. |
||||||
|
@include layout($layout) { |
||||||
|
@if $breakpoint-media-output { |
||||||
|
@include with-browser-ranges(css-mediaqueries) { |
||||||
|
@if $min and $max { |
||||||
|
// Both $min and $max |
||||||
|
@media (min-width: $min) and (max-width: $max) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} @else { |
||||||
|
@if not($min) and not($max) { |
||||||
|
// Neither $min nor $max: |
||||||
|
// We can create a breakpoint based on the number of columns in the layout. |
||||||
|
$min: fix-ems(container-outer-width($width: false)); |
||||||
|
} |
||||||
|
@if $min { |
||||||
|
// Min only: |
||||||
|
@media (min-width: $min) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} @else { |
||||||
|
// Max only: |
||||||
|
@media (max-width: $max) { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// Set an IE fallback |
||||||
|
@if $ie and $breakpoint-ie-output { |
||||||
|
@if (type-of($ie) == 'bool') { |
||||||
|
$ie: 'lt-ie9'; |
||||||
|
} |
||||||
|
.#{$ie} & { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@if $breakpoint-raw-output { |
||||||
|
@content; |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
@warn "We were unable to determine a layout for your breakpoint."; |
||||||
|
} |
||||||
|
|
||||||
|
} @else { |
||||||
|
@warn "You need to provide either a valid layout (number of columns)" |
||||||
|
+ "or a valid media-query min-width breakpoint (length)."; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,92 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Padding Mixins |
||||||
|
|
||||||
|
// add empty colums as padding before an element. |
||||||
|
// $columns : The number of columns to prefix. |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// : Context is required on any nested elements. |
||||||
|
// : Context MUST NOT be declared on a root element. |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin prefix( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
padding-#{$from}: space($columns, $context, $style); |
||||||
|
} |
||||||
|
|
||||||
|
// add empty colums as padding after an element. |
||||||
|
// $columns : The number of columns to suffix. |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// : Context is required on any nested elements. |
||||||
|
// : Context MUST NOT be declared on a root element. |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin suffix( |
||||||
|
$columns, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
$to : opposite-position($from); |
||||||
|
padding-#{$to}: space($columns, $context, $style); |
||||||
|
} |
||||||
|
|
||||||
|
// add empty colums as padding before and after an element. |
||||||
|
// $columns : The number of columns to pad. |
||||||
|
// $context : [optional] The context (columns spanned by parent). |
||||||
|
// : Context is required on any nested elements. |
||||||
|
// : Context MUST NOT be declared on a root element. |
||||||
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin pad( |
||||||
|
$prefix : false, |
||||||
|
$suffix : false, |
||||||
|
$context : $total-columns, |
||||||
|
$from : $from-direction, |
||||||
|
$style : fix-static-misalignment() |
||||||
|
) { |
||||||
|
$from : unquote($from); |
||||||
|
@if $prefix { |
||||||
|
@include prefix($prefix, $context, $from, $style); |
||||||
|
} |
||||||
|
@if $suffix { |
||||||
|
@include suffix($suffix, $context, $from, $style); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Bleed into colums with margin/padding on any side of an element. |
||||||
|
// $width : The side of the bleed. |
||||||
|
// : Any unit-length will be used directly. |
||||||
|
// : Any unitless number will be used as a column-count. |
||||||
|
// : Use "2 of 6" format to represent 2 cals in a 6-col nested context. |
||||||
|
// $sides : One or more sides to bleed [ top | right | bottom | left | all ]. |
||||||
|
// $style : The container style to use. |
||||||
|
@mixin bleed( |
||||||
|
$width: $grid-padding, |
||||||
|
$sides: left right, |
||||||
|
$style: fix-static-misalignment() |
||||||
|
) { |
||||||
|
@if $border-box-sizing { @include box-sizing(content-box) } |
||||||
|
|
||||||
|
@if type-of($width) == 'list' { |
||||||
|
$width: filter($width, of); |
||||||
|
$width: space(nth($width,1), nth($width,2), $style); |
||||||
|
} @else if unitless($width) { |
||||||
|
$width: space($width, $style: $style); |
||||||
|
} |
||||||
|
|
||||||
|
@if $sides == 'all' { |
||||||
|
margin: - $width; |
||||||
|
padding: $width; |
||||||
|
} @else { |
||||||
|
@each $side in $sides { |
||||||
|
margin-#{$side}: - $width; |
||||||
|
padding-#{$side}: $width; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Susy Settings |
||||||
|
|
||||||
|
// The total number of columns in the grid |
||||||
|
$total-columns : 12 !default; |
||||||
|
|
||||||
|
// The width of columns and gutters. |
||||||
|
// These must all be set with the comparable units. |
||||||
|
$column-width : 4em !default; |
||||||
|
$gutter-width : 1em !default; |
||||||
|
|
||||||
|
// Padding on the left and right of a Grid Container. |
||||||
|
$grid-padding : $gutter-width !default; |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// Advanced Settings |
||||||
|
|
||||||
|
// From Direction: |
||||||
|
// Controls for right-to-left or bi-directional sites. |
||||||
|
$from-direction : left !default; |
||||||
|
|
||||||
|
// Omega Float Direction: |
||||||
|
// The direction that +omega elements are floated by deafult. |
||||||
|
$omega-float : opposite-position($from-direction) !default; |
||||||
|
|
||||||
|
// Container Width: |
||||||
|
// Override the total width of your grid, using any length (50em, 75%, etc.) |
||||||
|
$container-width : false !default; |
||||||
|
|
||||||
|
// Container Style: |
||||||
|
// 'magic' - Static (fixed or elastic) when there's enough space, |
||||||
|
// fluid when there isn't. This is the SUSY MAGIC SAUCE(TM). |
||||||
|
// 'static' - Forces the grid container to remain static at all times. |
||||||
|
// 'fluid' - Forces the grid to remain fluid at all times. |
||||||
|
// (this will overrule any static $container-width settings) |
||||||
|
$container-style : magic !default; |
||||||
|
|
||||||
|
// Border-Box Sizing |
||||||
|
// Adjust the grid math appropriately for box-sizing: border-box; |
||||||
|
// Warning: This does not actually apply the new box model! |
||||||
|
// In most cases you can ignore this setting, |
||||||
|
// and simply apply the border-box-sizing mixin. |
||||||
|
$border-box-sizing : false !default; |
||||||
|
|
||||||
|
// Pixel Values only: |
||||||
|
// Make sure only pixel values are set for the container width. |
||||||
|
$pixel-values-only : false !default; |
||||||
|
|
||||||
|
// --------------------------------------------------------------------------- |
||||||
|
// IE Settings |
||||||
|
|
||||||
|
// When you are using a seperate IE stylesheet, |
||||||
|
// you can use these settings to control the output of at-breakpoint. |
||||||
|
// By default, at-breakpoint will output media-queries as well as |
||||||
|
// any defined ie-fallback classes. |
||||||
|
$breakpoint-media-output : true !default; |
||||||
|
$breakpoint-ie-output : true !default; |
||||||
|
|
||||||
|
// Danger Zone! Only set as 'true' in IE-specific style sheets. |
||||||
|
$breakpoint-raw-output : false !default; |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
// Float API |
||||||
|
// ========= |
||||||
|
|
||||||
|
@import "shared"; |
||||||
|
|
||||||
|
@import "float/container"; |
||||||
|
@import "float/span"; |
||||||
|
@import "float/end"; |
||||||
|
@import "float/isolate"; |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
// Shared API |
||||||
|
// ========== |
||||||
|
|
||||||
|
@import "support"; |
||||||
|
|
||||||
|
@import "shared/inspect"; |
||||||
|
@import "shared/output"; |
||||||
|
@import "shared/direction"; |
||||||
|
@import "shared/background"; |
||||||
|
@import "shared/container"; |
||||||
|
@import "shared/margins"; |
||||||
|
@import "shared/padding"; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,9 @@ |
|||||||
|
// Susy Browser Support |
||||||
|
// ==================== |
||||||
|
|
||||||
|
@import "support/support"; |
||||||
|
@import "support/prefix"; |
||||||
|
@import "support/background"; |
||||||
|
@import "support/box-sizing"; |
||||||
|
@import "support/rem"; |
||||||
|
@import "support/clearfix"; |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
// Float Container API |
||||||
|
// =================== |
||||||
|
|
||||||
|
// Float Container |
||||||
|
// --------------- |
||||||
|
// - [$width] : <length> |
||||||
|
// - [$justify] : left | center | right |
||||||
|
// - [$math] : fluid | static |
||||||
|
@mixin float-container( |
||||||
|
$width, |
||||||
|
$justify: auto auto, |
||||||
|
$property: max-width |
||||||
|
) { |
||||||
|
@include susy-clearfix; |
||||||
|
@include container-output($width, $justify, $property); |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
// Float Ends API |
||||||
|
// ============== |
||||||
|
|
||||||
|
// Susy End Defaults |
||||||
|
// ----------------- |
||||||
|
// - PRIVATE |
||||||
|
@include susy-defaults(( |
||||||
|
last-flow: to, |
||||||
|
)); |
||||||
|
|
||||||
|
// Float Last |
||||||
|
// ---------- |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
@mixin float-last( |
||||||
|
$flow: map-get($susy-defaults, flow), |
||||||
|
$last-flow: map-get($susy-defaults, last-flow), |
||||||
|
$margin: 0 |
||||||
|
) { |
||||||
|
$to: to($flow); |
||||||
|
|
||||||
|
$output: ( |
||||||
|
float: if($last-flow == to, $to, null), |
||||||
|
margin-#{$to}: $margin, |
||||||
|
); |
||||||
|
|
||||||
|
@include output($output); |
||||||
|
} |
||||||
|
|
||||||
|
// Float First |
||||||
|
// ----------- |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
@mixin float-first( |
||||||
|
$flow: map-get($susy-defaults, flow) |
||||||
|
) { |
||||||
|
$output: ( |
||||||
|
margin-#{from($flow)}: 0, |
||||||
|
); |
||||||
|
|
||||||
|
@include output($output); |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
// Float Isolation API |
||||||
|
// =================== |
||||||
|
|
||||||
|
// Isolate Output |
||||||
|
// -------------- |
||||||
|
// - $push : <length> |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
@mixin isolate-output( |
||||||
|
$push, |
||||||
|
$flow: map-get($susy-defaults, flow) |
||||||
|
) { |
||||||
|
$to: to($flow); |
||||||
|
$from: from($flow); |
||||||
|
|
||||||
|
$output: ( |
||||||
|
float: $from, |
||||||
|
margin-#{$from}: $push, |
||||||
|
margin-#{$to}: -100%, |
||||||
|
); |
||||||
|
|
||||||
|
@include output($output); |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
// Float Span API |
||||||
|
// ============== |
||||||
|
|
||||||
|
// Float Span Output |
||||||
|
// ----------------- |
||||||
|
// - $width : <length> |
||||||
|
// - [$float] : from | to |
||||||
|
// - [$margin-before] : <length> |
||||||
|
// - [$margin-after] : <length> |
||||||
|
// - [$padding-before] : <length> |
||||||
|
// - [$padding-after] : <length> |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
@mixin float-span-output( |
||||||
|
$width, |
||||||
|
$float : from, |
||||||
|
$margin-before : null, |
||||||
|
$margin-after : null, |
||||||
|
$padding-before : null, |
||||||
|
$padding-after : null, |
||||||
|
$flow : map-get($susy-defaults, flow) |
||||||
|
) { |
||||||
|
$to : to($flow); |
||||||
|
$from : from($flow); |
||||||
|
|
||||||
|
$output: ( |
||||||
|
width: $width, |
||||||
|
float: if($float == to, $to, null) or if($float == from, $from, null), |
||||||
|
margin-#{$from}: $margin-before, |
||||||
|
margin-#{$to}: $margin-after, |
||||||
|
padding-#{$from}: $padding-before, |
||||||
|
padding-#{$to}: $padding-after, |
||||||
|
); |
||||||
|
|
||||||
|
@include output($output); |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
// Grid Background API |
||||||
|
// =================== |
||||||
|
// - Sub-pixel rounding can lead to several pixels variation between browsers. |
||||||
|
|
||||||
|
// Grid Background Output |
||||||
|
// ---------------------- |
||||||
|
// - $image: background-image |
||||||
|
// - $size: background-size |
||||||
|
// - $clip: background-clip |
||||||
|
// - [$flow]: ltr | rtl |
||||||
|
@mixin background-grid-output ( |
||||||
|
$image, |
||||||
|
$size: null, |
||||||
|
$clip: null, |
||||||
|
$flow: map-get($susy-defaults, flow) |
||||||
|
) { |
||||||
|
$output: ( |
||||||
|
background-image: $image, |
||||||
|
background-size: $size, |
||||||
|
background-origin: $clip, |
||||||
|
background-clip: $clip, |
||||||
|
background-position: from($flow) top, |
||||||
|
); |
||||||
|
|
||||||
|
@include output($output); |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
// Shared Container API |
||||||
|
// ==================== |
||||||
|
|
||||||
|
// Container Output |
||||||
|
// ---------------- |
||||||
|
// - [$width] : <length> |
||||||
|
// - [$justify] : left | center | right |
||||||
|
// - [$math] : fluid | static |
||||||
|
@mixin container-output( |
||||||
|
$width, |
||||||
|
$justify: auto auto, |
||||||
|
$property: max-width |
||||||
|
) { |
||||||
|
$output: ( |
||||||
|
#{$property}: $width or 100%, |
||||||
|
margin-left: nth($justify, 1), |
||||||
|
margin-right: nth($justify, 2), |
||||||
|
); |
||||||
|
|
||||||
|
@include output($output); |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
// Direction Helpers |
||||||
|
// ================= |
||||||
|
|
||||||
|
// Susy Flow Defaults |
||||||
|
// ------------------ |
||||||
|
// - PRIVATE |
||||||
|
@include susy-defaults(( |
||||||
|
flow: ltr, |
||||||
|
)); |
||||||
|
|
||||||
|
// Get Direction |
||||||
|
// ------------- |
||||||
|
// Return the 'from' or 'to' direction of a ltr or rtl flow. |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
// - [$key] : from | to |
||||||
|
@function get-direction( |
||||||
|
$flow: map-get($susy-defaults, flow), |
||||||
|
$key: from |
||||||
|
) { |
||||||
|
$return: if($flow == rtl, (from: right, to: left), (from: left, to: right)); |
||||||
|
@return map-get($return, $key); |
||||||
|
} |
||||||
|
|
||||||
|
// To |
||||||
|
// -- |
||||||
|
// Return the 'to' direction of a flow |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
@function to( |
||||||
|
$flow: map-get($susy-defaults, flow) |
||||||
|
) { |
||||||
|
@return get-direction($flow, to); |
||||||
|
} |
||||||
|
|
||||||
|
// From |
||||||
|
// ---- |
||||||
|
// Return the 'from' direction of a flow |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
@function from( |
||||||
|
$flow: map-get($susy-defaults, flow) |
||||||
|
) { |
||||||
|
@return get-direction($flow, from); |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
// Debugging |
||||||
|
// ========= |
||||||
|
|
||||||
|
// Susy Inspect |
||||||
|
// ------------ |
||||||
|
// Output arguments passed to a inspect. |
||||||
|
// - $mixin : <susy mixin> |
||||||
|
// - $inspec : <mixin arguments> |
||||||
|
|
||||||
|
@mixin susy-inspect( |
||||||
|
$mixin, |
||||||
|
$inspect |
||||||
|
) { |
||||||
|
$show: false; |
||||||
|
|
||||||
|
@each $item in $inspect { |
||||||
|
@if index($item, inspect) { |
||||||
|
$show: true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@if $show or susy-get(debug inspect) { |
||||||
|
-susy-#{$mixin}: inspect($inspect); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
// Margins API |
||||||
|
// =========== |
||||||
|
|
||||||
|
// Margin Output |
||||||
|
// ------------- |
||||||
|
// - $before : <length> |
||||||
|
// - $after : <length> |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
@mixin margin-output( |
||||||
|
$before, |
||||||
|
$after, |
||||||
|
$flow: map-get($susy-defaults, flow) |
||||||
|
) { |
||||||
|
$to: to($flow); |
||||||
|
$from: from($flow); |
||||||
|
|
||||||
|
$output: ( |
||||||
|
margin-#{$from}: $before, |
||||||
|
margin-#{$to}: $after, |
||||||
|
); |
||||||
|
|
||||||
|
@include output($output); |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
// Output |
||||||
|
// ====== |
||||||
|
|
||||||
|
// Output |
||||||
|
// ------ |
||||||
|
// Output CSS with proper browser support. |
||||||
|
// - $styles : <map of css property-value pairs> |
||||||
|
@mixin output( |
||||||
|
$styles |
||||||
|
) { |
||||||
|
@each $prop, $val in $styles { |
||||||
|
@include susy-support($prop, $val); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
// Padding API |
||||||
|
// =========== |
||||||
|
|
||||||
|
// Padding Output |
||||||
|
// -------------- |
||||||
|
// - $before : <length> |
||||||
|
// - $after : <length> |
||||||
|
// - [$flow] : ltr | rtl |
||||||
|
@mixin padding-output( |
||||||
|
$before, |
||||||
|
$after, |
||||||
|
$flow: map-get($susy-defaults, flow) |
||||||
|
) { |
||||||
|
$to: to($flow); |
||||||
|
$from: from($flow); |
||||||
|
|
||||||
|
$output: ( |
||||||
|
padding-#{$from}: $before, |
||||||
|
padding-#{$to}: $after, |
||||||
|
); |
||||||
|
|
||||||
|
@include output($output); |
||||||
|
} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
// Background Properties |
||||||
|
// ===================== |
||||||
|
|
||||||
|
// Susy Background Image |
||||||
|
// --------------------- |
||||||
|
// Check for an existing support mixin, or provide a simple fallback. |
||||||
|
// - $image: <background-image> |
||||||
|
@mixin susy-background-image( |
||||||
|
$image |
||||||
|
) { |
||||||
|
@if susy-support(background-image, (mixin: background-image), $warn: false) { |
||||||
|
@include background-image($image...); |
||||||
|
} @else { |
||||||
|
background-image: $image; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Susy Background Size |
||||||
|
// --------------------- |
||||||
|
// Check for an existing support mixin, or provide a simple fallback. |
||||||
|
// - $image: <background-size> |
||||||
|
@mixin susy-background-size( |
||||||
|
$size |
||||||
|
) { |
||||||
|
@if susy-support(background-options, (mixin: background-size)) { |
||||||
|
@include background-size($size); |
||||||
|
} @else { |
||||||
|
background-size: $size; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Susy Background Origin |
||||||
|
// ---------------------- |
||||||
|
// Check for an existing support mixin, or provide a simple fallback. |
||||||
|
// - $image: <background-origin> |
||||||
|
@mixin susy-background-origin( |
||||||
|
$origin |
||||||
|
) { |
||||||
|
@if susy-support(background-options, (mixin: background-origin)) { |
||||||
|
@include background-origin($origin); |
||||||
|
} @else { |
||||||
|
background-origin: $origin; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Susy Background Clip |
||||||
|
// -------------------- |
||||||
|
// Check for an existing support mixin, or provide a simple fallback. |
||||||
|
// - $image: <background-clip> |
||||||
|
@mixin susy-background-clip( |
||||||
|
$clip |
||||||
|
) { |
||||||
|
@if susy-support(background-options, (mixin: background-clip)) { |
||||||
|
@include background-clip($clip); |
||||||
|
} @else { |
||||||
|
background-clip: $clip; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
// Box Sizing |
||||||
|
// ========== |
||||||
|
|
||||||
|
// Box Sizing |
||||||
|
// ---------- |
||||||
|
// Check for an existing support mixin, or provide a simple fallback. |
||||||
|
// - $model: <box-sizing> |
||||||
|
@mixin susy-box-sizing( |
||||||
|
$model: content-box |
||||||
|
) { |
||||||
|
@if $model { |
||||||
|
@if susy-support(box-sizing, (mixin: box-sizing), $warn: false) { |
||||||
|
@include box-sizing($model); |
||||||
|
} @else { |
||||||
|
$prefix: (moz, webkit, official); |
||||||
|
@include susy-prefix(box-sizing, $model, $prefix); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
// Susy Fallback Clearfix |
||||||
|
// ====================== |
||||||
|
|
||||||
|
|
||||||
|
// Clearfix |
||||||
|
// -------- |
||||||
|
// Check for an existing support mixin, or provide a simple fallback. |
||||||
|
@mixin susy-clearfix { |
||||||
|
@if susy-support(clearfix, (mixin: clearfix)) { |
||||||
|
@include clearfix; |
||||||
|
} @else { |
||||||
|
&:after { |
||||||
|
content: " "; |
||||||
|
display: block; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
// Susy Prefix |
||||||
|
// =========== |
||||||
|
|
||||||
|
// Prefix |
||||||
|
// ------ |
||||||
|
// Output simple prefixed properties. |
||||||
|
// - $prop : <css property> |
||||||
|
// - $val : <css value> |
||||||
|
// - [$prefix] : <browser prefix list> |
||||||
|
@mixin susy-prefix( |
||||||
|
$prop, |
||||||
|
$val, |
||||||
|
$prefix: official |
||||||
|
) { |
||||||
|
@each $fix in $prefix { |
||||||
|
$fix: if($fix == official or not($fix), $prop, '-#{$fix}-#{$prop}'); |
||||||
|
@include susy-rem($fix, $val); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
// rem Support |
||||||
|
// =========== |
||||||
|
|
||||||
|
// rem |
||||||
|
// --- |
||||||
|
// Check for an existing support mixin, or output directly. |
||||||
|
// - $prop : <css property> |
||||||
|
// - $val : <css value> |
||||||
|
@mixin susy-rem( |
||||||
|
$prop, |
||||||
|
$val |
||||||
|
) { |
||||||
|
$_reqs: ( |
||||||
|
variable: rhythm-unit rem-with-px-fallback, |
||||||
|
mixin: rem, |
||||||
|
); |
||||||
|
@if susy-support(rem, $_reqs, $warn: false) and $rhythm-unit == rem { |
||||||
|
@include rem($prop, $val); |
||||||
|
} @else { |
||||||
|
#{$prop}: $val; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
// Browser Support |
||||||
|
// =============== |
||||||
|
|
||||||
|
// Susy Support Defaults |
||||||
|
// --------------------- |
||||||
|
@include susy-defaults(( |
||||||
|
use-custom: ( |
||||||
|
clearfix: false, |
||||||
|
background-image: true, |
||||||
|
background-options: false, |
||||||
|
breakpoint: true, |
||||||
|
box-sizing: true, |
||||||
|
rem: true, |
||||||
|
), |
||||||
|
)); |
||||||
|
|
||||||
|
|
||||||
|
// Susy Support [mixin] |
||||||
|
// -------------------- |
||||||
|
// Send property-value pairs to the proper support modules. |
||||||
|
// - $prop : <css property> |
||||||
|
// - $val : <css value> |
||||||
|
@mixin susy-support( |
||||||
|
$prop, |
||||||
|
$val |
||||||
|
) { |
||||||
|
// Background Support |
||||||
|
@if $prop == background-image { |
||||||
|
@include susy-background-image($val); |
||||||
|
} @else if $prop == background-size { |
||||||
|
@include susy-background-size($val); |
||||||
|
} @else if $prop == background-origin { |
||||||
|
@include susy-background-origin($val); |
||||||
|
} @else if $prop == background-clip { |
||||||
|
@include susy-background-clip($val); |
||||||
|
} |
||||||
|
|
||||||
|
// Box-Sizing Support |
||||||
|
@else if $prop == box-sizing { |
||||||
|
@include susy-box-sizing($val); |
||||||
|
} |
||||||
|
|
||||||
|
// Rem Support |
||||||
|
@else { |
||||||
|
@include susy-rem($prop, $val); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Susy Support [function] |
||||||
|
// ----------------------- |
||||||
|
// Check for support of a feature. |
||||||
|
// - $feature : <string> |
||||||
|
// - e.g "rem" or "box-sizing" |
||||||
|
// - $requirements : <map> |
||||||
|
// - e.g (variable: rem-with-px-fallback, mixin: rem) |
||||||
|
// - $warn : <bool> |
||||||
|
@function susy-support( |
||||||
|
$feature, |
||||||
|
$requirements: (), |
||||||
|
$warn: true |
||||||
|
) { |
||||||
|
$_support: susy-get(use-custom $feature); |
||||||
|
|
||||||
|
@if $_support { |
||||||
|
$_fail: false; |
||||||
|
|
||||||
|
@each $_type, $_req in $requirements { |
||||||
|
@each $_i in $_req { |
||||||
|
$_pass: call(unquote("#{$_type}-exists"), $_i); |
||||||
|
|
||||||
|
@if not($_pass) { |
||||||
|
$_fail: true; |
||||||
|
@if $warn { |
||||||
|
@warn "You requested custom support of #{$feature}, but the #{$_i} #{$_type} is not available."; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$_support: if($_fail, false, $_support); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_support; |
||||||
|
} |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
// Column math |
||||||
|
// =========== |
||||||
|
|
||||||
|
|
||||||
|
// Is Symmetrical |
||||||
|
// -------------- |
||||||
|
// Returns true if a grid is symmetrical. |
||||||
|
// - [$columns] : <number> | <list> |
||||||
|
@function is-symmetrical( |
||||||
|
$columns: susy-get(columns) |
||||||
|
) { |
||||||
|
$columns: valid-columns($columns); |
||||||
|
@return if(type-of($columns) == number, $columns, null); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Susy Count |
||||||
|
// ---------- |
||||||
|
// Find the number of columns in a given layout |
||||||
|
// - [$columns] : <number> | <list> |
||||||
|
@function susy-count( |
||||||
|
$columns: susy-get(columns) |
||||||
|
) { |
||||||
|
$columns: valid-columns($columns); |
||||||
|
@return is-symmetrical($columns) or length($columns); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Susy Sum |
||||||
|
// -------- |
||||||
|
// Find the total sum of column-units in a layout |
||||||
|
// - [$columns] : <number> | <list> |
||||||
|
// - [$gutters] : <ratio> |
||||||
|
// - [$spread] : false/narrow | wide | wider |
||||||
|
@function susy-sum( |
||||||
|
$columns : susy-get(columns), |
||||||
|
$gutters : susy-get(gutters), |
||||||
|
$spread : false |
||||||
|
) { |
||||||
|
$columns: valid-columns($columns); |
||||||
|
$gutters: valid-gutters($gutters); |
||||||
|
|
||||||
|
$spread: if($spread == wide, 0, if($spread == wider, 1, -1)); |
||||||
|
$gutter-sum: (susy-count($columns) + $spread) * $gutters; |
||||||
|
$column-sum: is-symmetrical($columns); |
||||||
|
|
||||||
|
@if not($column-sum) { |
||||||
|
@each $column in $columns { |
||||||
|
$column-sum: ($column-sum or 0) + $column; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $column-sum + $gutter-sum; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Susy Slice |
||||||
|
// ---------- |
||||||
|
// Return a subset of columns at a given location. |
||||||
|
// - $span : <number> |
||||||
|
// - $location : <number> |
||||||
|
// - [$columns] : <number> | <list> |
||||||
|
@function susy-slice( |
||||||
|
$span, |
||||||
|
$location, |
||||||
|
$columns: susy-get(columns) |
||||||
|
) { |
||||||
|
$columns: valid-columns($columns); |
||||||
|
$sub-columns: $span; |
||||||
|
|
||||||
|
@if not(is-symmetrical($columns)) { |
||||||
|
$location: $location or 1; |
||||||
|
$sub-columns: (); |
||||||
|
@for $i from $location to ($location + $span) { |
||||||
|
$sub-columns: append($sub-columns, nth($columns, $i)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $sub-columns; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Susy |
||||||
|
// ---- |
||||||
|
// Find the sum of a column-span. |
||||||
|
// - $span : <number> |
||||||
|
// - $location : <number> |
||||||
|
// - [$columns] : <number> | <list> |
||||||
|
// - [$gutters] : <ratio> |
||||||
|
// - [$spread] : false/narrow | wide | wider |
||||||
|
@function susy( |
||||||
|
$span, |
||||||
|
$location : false, |
||||||
|
$columns : susy-get(columns), |
||||||
|
$gutters : susy-get(gutters), |
||||||
|
$spread : false |
||||||
|
) { |
||||||
|
$columns: valid-columns($columns); |
||||||
|
$gutters: valid-gutters($gutters); |
||||||
|
$span: susy-slice($span, $location, $columns); |
||||||
|
|
||||||
|
@return susy-sum($span, $gutters, $spread); |
||||||
|
} |
||||||
@ -0,0 +1,73 @@ |
|||||||
|
// Settings |
||||||
|
// ======== |
||||||
|
|
||||||
|
// Version |
||||||
|
// ------- |
||||||
|
$su-version: 1.1; |
||||||
|
|
||||||
|
|
||||||
|
// Default Settings |
||||||
|
// ---------------- |
||||||
|
// PRIVATE: The basic settings |
||||||
|
$susy-defaults: ( |
||||||
|
columns: 4, |
||||||
|
gutters: .25, |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
// User Settings |
||||||
|
// ------------- |
||||||
|
// - Define the $susy variable with a map of your own settings. |
||||||
|
// - Set EITHER $column-width OR $container |
||||||
|
// - Use $column-width for static layouts |
||||||
|
$susy: () !default; |
||||||
|
|
||||||
|
|
||||||
|
// Susy Defaults |
||||||
|
// ------------- |
||||||
|
// PRIVATE: Add defaults to Susy |
||||||
|
@mixin susy-defaults( |
||||||
|
$defaults |
||||||
|
) { |
||||||
|
$susy-defaults: map-merge($susy-defaults, $defaults) !global; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Susy Set |
||||||
|
// -------- |
||||||
|
// Change one setting |
||||||
|
// - $key : setting name |
||||||
|
// - $value : setting value |
||||||
|
@mixin susy-set( |
||||||
|
$key-value... |
||||||
|
) { |
||||||
|
$susy: _susy-deep-set($susy, $key-value...) !global; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Susy Get |
||||||
|
// -------- |
||||||
|
// Return one setting from a grid |
||||||
|
// - $key : <keyword> |
||||||
|
// - $layout : <settings> |
||||||
|
@function susy-get( |
||||||
|
$key, |
||||||
|
$layout: map-merge($susy-defaults, $susy) |
||||||
|
) { |
||||||
|
$layout: parse-grid($layout); |
||||||
|
$_options: $layout $susy $susy-defaults; |
||||||
|
$_break: false; |
||||||
|
$_return: null; |
||||||
|
|
||||||
|
@each $opt in $_options { |
||||||
|
@if type-of($opt) == map and not($_break) { |
||||||
|
$_keyset: _susy-deep-has-key($opt, $key...); |
||||||
|
@if $_keyset { |
||||||
|
$_return: _susy-deep-get($opt, $key...); |
||||||
|
$_break: true; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
// Map Functions |
||||||
|
// ============= |
||||||
|
|
||||||
|
|
||||||
|
// Truncate List |
||||||
|
// ------------- |
||||||
|
// - Return a list, truncated to a given length |
||||||
|
@function _susy-truncate-list( |
||||||
|
$list, |
||||||
|
$length |
||||||
|
) { |
||||||
|
$_return: (); |
||||||
|
|
||||||
|
@for $i from 1 through length($list) { |
||||||
|
$_return: if($i <= $length, append($_return, nth($list, $i)), $_return); |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Deep Get |
||||||
|
// -------- |
||||||
|
// - Return a value deep in nested maps |
||||||
|
@function _susy-deep-get( |
||||||
|
$map, |
||||||
|
$keys... |
||||||
|
) { |
||||||
|
$_return: $map; |
||||||
|
|
||||||
|
@each $key in $keys { |
||||||
|
@if type-of($_return) == map { |
||||||
|
$_return: map-get($_return, $key); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Deep Set |
||||||
|
// -------- |
||||||
|
// - Set a value deep in nested maps |
||||||
|
@function _susy-deep-set( |
||||||
|
$map, |
||||||
|
$keys-value... |
||||||
|
) { |
||||||
|
$_value: nth($keys-value, -1); |
||||||
|
$_keys: _susy-truncate-list($keys-value, length($keys-value) - 1); |
||||||
|
$_length: length($_keys); |
||||||
|
$_return: (); |
||||||
|
|
||||||
|
@for $i from 1 through $_length { |
||||||
|
$_n: 0 - $i; |
||||||
|
$_level: _susy-truncate-list($_keys, $_length + $_n); |
||||||
|
$_level: _susy-deep-get($map, $_level...); |
||||||
|
$_merge: nth($_keys, $_n); |
||||||
|
$_merge: ($_merge: $_value); |
||||||
|
$_return: if($_level, map-merge($_level, $_merge), $_merge); |
||||||
|
$_value: $_return; |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Deep Merge |
||||||
|
// ---------- |
||||||
|
// Return 2 objects of any depth, merged |
||||||
|
@function _susy-deep-merge( |
||||||
|
$map1, |
||||||
|
$map2 |
||||||
|
) { |
||||||
|
|
||||||
|
@if type-of($map1) != map or type-of($map2) != map { |
||||||
|
$map1: $map2; |
||||||
|
} @else { |
||||||
|
@each $key, $value in $map2 { |
||||||
|
$_new: ($key: _susy_deep-merge(map-get($map1, $key), $value)); |
||||||
|
$map1: map-merge($map1, $_new); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $map1; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Deep Has-Key |
||||||
|
// ------------ |
||||||
|
// - Return true if a deep key exists |
||||||
|
@function _susy-deep-has-key( |
||||||
|
$map, |
||||||
|
$keys... |
||||||
|
) { |
||||||
|
$_return: null; |
||||||
|
$_stop: false; |
||||||
|
|
||||||
|
@each $key in $keys { |
||||||
|
@if not($_stop) { |
||||||
|
$_return: map-has-key($map, $key); |
||||||
|
} |
||||||
|
|
||||||
|
@if $_return { |
||||||
|
$map: map-get($map, $key); |
||||||
|
} @else { |
||||||
|
$_stop: true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@return $_return; |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
// Math Validation |
||||||
|
// =============== |
||||||
|
|
||||||
|
|
||||||
|
// Valid Columns |
||||||
|
// ------------- |
||||||
|
// Check that a column setting is valid. |
||||||
|
@function valid-columns( |
||||||
|
$columns, |
||||||
|
$silent: false |
||||||
|
) { |
||||||
|
$type: type-of($columns); |
||||||
|
$return: null; |
||||||
|
|
||||||
|
@if $type == number and unitless($columns) { |
||||||
|
$return: $columns; |
||||||
|
} @else if $type == list { |
||||||
|
$fail: null; |
||||||
|
@each $col in $columns { |
||||||
|
@if type-of($col) == number { |
||||||
|
$fail: $fail or if(unitless($col), null, true); |
||||||
|
} @else { |
||||||
|
$fail: true; |
||||||
|
} |
||||||
|
} |
||||||
|
$return: if($fail, $return, $columns); |
||||||
|
} |
||||||
|
|
||||||
|
@if $return != $columns and not($silent) { |
||||||
|
$return: null; |
||||||
|
$warn: '$columns must be a unitless number or list of unitless numbers.'; |
||||||
|
@warn $warn + ' Current value [#{$type}]: #{$columns}'; |
||||||
|
} |
||||||
|
|
||||||
|
@return $return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Valid Gutters |
||||||
|
// ------------- |
||||||
|
// Check that a gutter setting is valid. |
||||||
|
@function valid-gutters( |
||||||
|
$gutters, |
||||||
|
$silent: false |
||||||
|
) { |
||||||
|
$type: type-of($gutters); |
||||||
|
$return: null; |
||||||
|
|
||||||
|
@if $type == number and unitless($gutters) { |
||||||
|
$return: $gutters; |
||||||
|
} @else if not($silent) { |
||||||
|
$warn: '$gutters must be a unitless number.'; |
||||||
|
@warn $warn + ' Current value [#{$type}]: #{$gutters}'; |
||||||
|
} |
||||||
|
|
||||||
|
@return $return; |
||||||
|
} |
||||||
Loading…
Reference in new issue