persistentgrid 0.0.1.beta.1

data/scss/pg/helpers/mixins/_breakpoints.scss

@@ -0,0 +1,35 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+// Expects a nested array of valid expressions, for example
+// $properties: (min-width,100px),(orientation,landscape)
+// Use false if a value should not be rendered (0 is a valid value)
+@mixin breakpoint($properties, $media: 'only screen')
+{
+	@if $properties {
+
+		$query: '';
+
+		@if length(nth($properties,1))>1{
+			@each $property in $properties {
+				$name: nth($property,1);
+				$value: nth($property,2);
+				@if $value {
+					$query: '#{$query} and (#{$name}: #{$value})';
+				}
+			}
+		}
+		@else {
+			$name: nth($properties,1);
+			$value: nth($properties,2);
+			$query: '#{$query} and (#{$name}: #{$value})';
+		}
+
+		@media #{$media} #{$query} {
+			@content;
+		}
+	}
+}

data/scss/pg/helpers/mixins/_content.scss

@@ -0,0 +1,19 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+@mixin is-hidden {
+	position: absolute;
+	left: -9999em;
+}
+@mixin is-not-hidden {
+	position: static;
+}
+@mixin is-visible($display: block) {
+	display: $display;
+}
+@mixin is-not-visible {
+	display: none;
+}

data/scss/pg/helpers/mixins/_css-triangle.scss

@@ -0,0 +1,70 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+@mixin tooltipTriangle($size: $base-font-size, $direction: down, $color: $color-theme)
+{
+	border: $size/2 solid transcontainer;
+	display: inline-block;
+	content: "";
+	width: 0;
+	height: 0;
+	position: absolute;
+	@if $direction == right {
+		left: 100%;
+		border-left-color: $color;
+	}
+	@if $direction == left {
+		right: 100%;
+		border-right-color: $color;
+	}
+	@if $direction == up {
+		@include unit(top, $size/-2);
+		border-bottom-color: $color;
+	}
+	@if $direction == down {
+		top: 100%;
+		border-top-color: $color;
+	}
+
+	@if $direction == up {
+		left: 50%;
+		margin-left: $size/-2;
+	}
+	@if $direction == down {
+		left: 50%;
+		margin-left: $size/-2;
+	}
+}
+
+@mixin triangle($size: $base-font-size, $direction: right, $color: $color-theme, $where: after)
+{
+	position: relative;
+	&:#{$where} {
+		border: $size/2 solid transcontainer;
+		// @include unit(border-width, $size/2);
+		display: inline-block;
+		content: "";
+		width: 0;
+		height: 0;
+		position: absolute;
+		@if $direction == right {
+			left: 100%;
+			border-left-color: $color;
+		}
+		@if $direction == left {
+			right: 100%;
+			border-right-color: $color;
+		}
+		@if $direction == up {
+			@include unit(top, $size/-2);
+			border-bottom-color: $color;
+		}
+		@if $direction == down {
+			top: 100%;
+			border-top-color: $color;
+		}
+	}
+}

data/scss/pg/helpers/mixins/_elements.scss

@@ -0,0 +1,106 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later !default; see LICENSE.txt
+//  *
+//  * Uses Hugo Giraudel's awesome Lists functions: https://github.com/HugoGiraudel
+//  *
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+// Dependencies 
+@import "pg/helpers/library/lists";
+
+
+//  Returns a new element
+//  ==========================================================================
+//  @example $button: new('button', 'default');
+//  @example $button: new($button, 'active');
+//  --------------------------------------------------------------------------
+//  @param $properties [Literal] an arbitrary string, or an existing $element
+//  @param $name [String] a namespace for the new element
+//  --------------------------------------------------------------------------
+//  @return [List]
+
+	@function new($properties, $name, $is-state)
+	{
+		@if type-of($properties)!=list {
+			@return ($name, (), $is-state);
+		}
+		@else if type-of($properties)==list and length($properties)==1 {
+			@return ($name, $properties, $is-state);
+		}
+		@else {
+			$old_name: nth($properties, 1);
+			@return replace($properties, $old_name, $name);
+		}
+	}
+
+
+//  Placeholder function for new()
+//  ==========================================================================
+//  @example $button: clone($button, 'new-name');
+//  
+//  @param $element [List] an existing $element
+//  @param $name [String] a namespace for the new element
+//  --------------------------------------------------------------------------
+//  @return [List]
+
+	@function clone($element, $element-name, $is-state)
+	{
+		@return new($element, $element-name, $is-state);
+	}
+
+
+//  Returns the $element with adjusted properties
+//  ==========================================================================
+//  @example $button: change($button, (color, #fff));
+//  
+//  @param $element [List] an existing $element
+//  @param $property [List] a list consisting of property-name and value
+//  --------------------------------------------------------------------------
+//  @return [List]
+
+	@function change($element, $property)
+	{
+		$key: nth($property, 1);
+		$properties: nth($element,2);
+		$new_properties: ();
+
+		$item: find-list-item($properties, $key);
+
+		@if $item==false {
+			$new_properties: append($properties, ($property));
+		}
+		@else {
+			$new_properties: replace($properties, $item, $property);
+		}
+		$element: replace($element, $properties, $new_properties);
+
+		@return $element;
+	}
+
+
+//  Returns a matching element from a nested list
+//  ==========================================================================
+//  @example $button: find-list-item( ((color, blue) (border: none)), border ) => (border: none)
+//  @example $button: find-list-item( ((color, blue) (border: none)), border, true ) => 2
+//  
+//  @param $list [List] a nested list
+//  @param $key [String] the key to match
+//  @param $index [Boolean] return the match's index (true) or the match (false)
+//  --------------------------------------------------------------------------
+//  @return [Literal]
+
+	@function find-list-item($list, $key, $index: false)
+	{
+		$l: length($list);
+		@for $i from 1 through $l {
+			$item: nth($list,$i);
+			@if nth($item,1) == $key {
+				@return $item;
+			}
+		}
+
+		@return false;
+	}

data/scss/pg/helpers/mixins/_module.scss

@@ -0,0 +1,327 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+//  ==========================================================================
+//  Mixin for modules: sides
+//  ==========================================================================
+//  Applies margin, padding, border, outline
+//  
+//  @param $values: an array of 1 or 4 values
+//  @param $property: a string (e.g. padding, margin, or border)
+//  ==========================================================================
+	@mixin sides($values, $property)
+	{
+		$length: length($values);
+
+		// **
+		// Do not accept arrays of 2 and 3 
+		// **
+		@if $length==2 or  $length==3 {
+			@warn "Wrong value for first parameter: mixin accepts either a single value or an array of four values.";
+		}
+
+
+		@if $length==1 {
+			@include module-property($values, $property);
+		}
+
+
+		@if $length==4  {
+
+			$compact: true;
+			@each $value in $values {
+				@if $value==false {
+					$compact: false;
+				}
+			}
+
+			@if $compact {
+
+				@if nth($values, index($sides, top))==nth($values, index($sides, bottom)) and nth($values, index($sides, right))==nth($values, index($sides, left)) {
+					#{$property}: nth($values,1) nth($values,2);
+				}
+				@else {
+					@include module-property($values, $property);
+				}
+			}
+			@else {
+				@each $value in $values {
+
+					@if $value {
+
+						$i: index($values, $value);
+						$side: padding-#{nth($sides,$i)};
+
+						@include module-property($value, $side);
+					}
+				}
+			}
+
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: properties
+//  ==========================================================================
+//  Applies margin, padding, border, outline
+//  
+//  @param $values: a single value
+//  @param $property: a string (e.g. padding, margin-left, border-color) or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-property($values, $property)
+	{
+		@if $values {
+			#{$property}: $values;
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: display
+//  ==========================================================================
+//  
+//  @param $values: a list of display and vertical-align or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-display($values)
+	{
+		@if $values {
+
+			$display: nth($values,1);
+			$vertical-align: nth($values,1);
+
+			@if $display==inline-block {
+				@include inline-block($vertical-align);
+			}
+			@else {
+				@if $display {
+					@include module-property($display, display);
+				}
+				@if $vertical-align {
+					@include module-property($vertical-align, vertical-align);
+				}
+			}
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: margin (placeholder for sides())
+//  ==========================================================================
+//  Accepts either a single value represetning all four sides, 
+//  or a list of four values representing each individual side
+//  
+//  @param $values: a list of 1 or 4 width values or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-margin($margin)
+	{
+		@if $margin {		
+			@include sides($margin, margin);
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: padding (placeholder for sides())
+//  ==========================================================================
+//  Accepts either a single value represetning all four sides, 
+//  or a list of four values representing each individual side
+//  
+//  @param $values: a list of 1 or 4 width values or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-padding($padding)
+	{
+		@if $padding {		
+			@include sides($padding, padding);
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin button border (placeholder for sides)
+//  ==========================================================================
+//  Accepts a list of three values representing width, style and color
+//  
+//  @param $values: a list of properties (width, style, color) or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-border($border)
+	{
+		$length: length($border);
+
+		@if $length>1 {
+			$width: nth($border,1);
+			$style: nth($border,2);
+			$color: nth($border,3);
+			@if $width {
+				border-width: $width;
+			}
+			@if $style {
+				border-style: $style;
+			}
+			@if $color {
+				border-color: $color;
+			}
+		}
+		@else {
+			@if $border {
+				@include module-property(#{$border}, border);
+			}
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: border radius
+//  ==========================================================================
+//  Accepts a list of up to four values representing all four corners
+//  
+//  @param $corner-radius: a list of width values or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-border-radius($corner-radius)
+	{
+
+		@if $corner-radius {
+			@include border-radius($corner-radius);
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: outline (placeholder for sides())
+//  ==========================================================================
+//  Accepts either a single value represetning all four sides, 
+//  or a list of four values representing each individual side
+//  
+//  @param $values: a list of 1 or 4 width values or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-outline($outline, $outline-offset: false)
+	{
+		@if $outline {		
+			@include sides($outline, outline);
+		}
+		@if $outline-offset {
+			outline-offset: $outline-offset;
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: box-shadow (placeholder for box-shadow)
+//  ==========================================================================
+//  a valid box-shadow notation is: inset|outset offset-x offset-y blur color
+//
+//  @param $shadow: a (list of) valid shadow notation(s) or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-shadow($shadow)
+	{
+		@if $shadow {
+			@include box-shadow($shadow);
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: background
+//  ==========================================================================
+//  
+//  @param $background: a list of properties (background-color, background-image) or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-background($background)
+	{
+		@if $background {
+
+			$background-color: nth($background,1);
+			$background-image: nth($background,2);
+
+			@if $background-color {
+				background-color: $background-color;
+			}
+			@if $background-image {
+				@include background-image($background-image);
+			}
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: text
+//  ==========================================================================
+//  
+//  @param $text
+//  ==========================================================================
+	@mixin module-text($text)
+	{		
+		@if $text {
+
+			$align: nth($text,1);
+			$decoration: nth($text,2);
+			$shadow: nth($text,3);
+
+			@if $align {
+				@include module-property($align, text-align);
+			}
+			@if $decoration {
+				@include module-property($decoration, text-decoration);
+			}
+			@if $shadow {
+				@include text-shadow($shadow);
+			}
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: text-shadow
+//  ==========================================================================
+//  
+//  @param $shadow
+//  ==========================================================================
+	@mixin module-text-shadow($shadow)
+	{
+		@if $shadow {
+			@include text-shadow($shadow);
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin for modules: type
+//  ==========================================================================
+//  
+//  @param $type: a list of properties (type, font-size, leading) or false if nothing should be compiled
+//  ==========================================================================
+	@mixin module-type($type)
+	{
+		@if $type {
+
+			$type-size: nth($type,2);
+			$type-rhythm: if(nth($type,3), nth($type,3), 1);
+
+			$type: nth($type,1);
+
+			@if $type-size and $type-size!=$base-font-size {
+				@include adjust-font-size-to($type-size, $type-rhythm);
+			}
+
+			@if extract-type-style($type) != extract-type-style($type-default) {
+				@include font-style($type);
+			}
+
+			@if extract-type-variant($type) != extract-type-variant($type-default) {
+				@include font-variant($type);
+			}
+
+			@if extract-type-weight($type) != extract-type-weight($type-default) {
+				@include font-weight($type);
+			}
+
+			@if extract-type-family($type) != extract-type-family($type-default) {
+				@include font-family($type);
+			}
+
+		}
+	}

data/scss/pg/helpers/mixins/_text.scss

@@ -0,0 +1,87 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+@function calculate-text-shadow($text-color, $bg-color, $down: true)
+{
+	$lightness-text: lightness($text-color);
+	$lightness-background: lightness($background-color);
+
+	$text-is-darker: $lightness-text > $lightness-background;
+
+	@return false;
+
+	@if $down {
+		@if $text-is-darker {
+		}
+		@else {
+		}
+	}
+	@else {
+		@if $text-is-darker {
+		}
+		@else {
+		}
+	}
+}
+//  ==========================================================================
+//  Mixin emboss-text-up
+//  --------------------------------------------------------------------------
+//  @param $text-color
+//  @param $background-color
+//  ==========================================================================
+@mixin emboss-text-up($text-color, $background-color, $transparency: .5, $blur: 1px)
+{
+
+	$lt: lightness($text-color);
+	$lb: lightness($background-color);
+
+	$shadow: mix($text-color,$background-color);
+
+	@if($lt>$lb) {
+		/*
+		 * Dark text on light background
+		 */
+		$shadow: rgba(255,255,255,$transparency);
+		@include text-shadow(-1px -1px $blur $shadow);
+	}
+	@if($lt<$lb) {
+		/*
+		 * Light text on dark background
+		 */
+		$shadow: rgba(0,0,0,$transparency);
+		@include text-shadow(1px 1px $blur $shadow);
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin emboss-text-down
+//  --------------------------------------------------------------------------
+//  @param $text-color
+//  @param $background-color
+//  ==========================================================================
+@mixin emboss-text-down($text-color, $background-color, $transparency: .5, $blur: 1px)
+{
+
+	$lt: lightness($text-color);
+	$lb: lightness($background-color);
+
+	@if($lt>$lb) {
+		/*
+		 * Dark text on light background
+		 */
+		$shadow: rgba(0,0,0,$transparency);
+		@include text-shadow(-1px -1px $blur $shadow);
+	}
+	@if($lt<$lb) {
+		/*
+		 * Light text on dark background
+		 */
+		$shadow: rgba(255,255,255,$transparency);
+		@include text-shadow(1px 1px $blur $shadow);
+	}
+}