https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
8.9 KiB
385 lines
8.9 KiB
// 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); |
|
}
|
|
|