persistentgrid 0.0.1.beta.1

data/scss/pg/helpers/mixins/_units.scss

@@ -0,0 +1,67 @@
+// /**
+//  * @copyright	Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * @license		GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+// Accepts a value and returns it without a value
+@function return-unitless($value)
+{
+	@if unitless($value) {
+		@return $value;
+	}
+
+	$unit: unit($value);
+
+	@if $unit=="px" {
+		@return $value / 1px;
+	}
+	@if $unit=="rem" {
+		@return $value / 1rem;
+	}
+	@if $unit=="em" {
+		@return $value / 1em;
+	}
+	@if $unit=="%" {
+		@return $value / 1%;
+	}
+	@if $unit=="pt" {
+		@return $value / 1pt;
+	}
+}
+
+
+// Use these methods to convert px based units to other units
+// There is also a px to px function in case you need to recalculate a px unit for a different context
+// Use these methods to convert px based units to other units
+// There is also a px to px function in case you need to recalculate a px unit for a different context
+@function px-to-percentage($target-px, $context: $base-font-size) {
+  @return percentage($target-px / $context);
+}
+@function px-to-em($target-px, $context: $base-font-size) {
+  @return ($target-px / $context) * 1em;
+}
+@function px-to-rem($target-px, $context: $base-font-size) {
+  @return ($target-px / $context) * .1rem;
+}
+@function px-to-px($target-px, $context: $base-font-size) {
+  @return ($target-px / $context) * .1px;
+}
+
+// Let this function figure out which conversion function to use.
+// Both $target and $context values *must* be in px
+@function px-to-relative-size($target-px, $context: $base-font-size, $unit: $font-unit) {
+
+	@if unit($unit)=="%" {
+		@return px-to-percentage($target-px, $context);
+	}
+	@if unit($unit)=="em" {
+		@return px-to-em($target-px, $context);
+	}
+	@if unit($unit)=="rem" {
+		@return px-to-rem($target-px, $context);
+	}
+	@if unit($unit)=="px" {
+		@return px-to-px($target-px, $context);
+	}
+}

data/scss/pg/helpers/settings/_all.scss

@@ -0,0 +1,7 @@
+// /**
+//  * 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'; }
+
+@import "breakpoints";

data/scss/pg/helpers/settings/_breakpoints.scss

@@ -0,0 +1,21 @@
+// /**
+//  * 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'; }
+
+$small_handheld: (max-width px-to-em(480px,$base-font-size)) !default;
+$small_handheld_tall: (max-width px-to-em(480px,$base-font-size)),(orientation portrait) !default;
+$small_handheld_wide: (max-width px-to-em(480px,$base-font-size)),(orientation landscape) !default;
+
+$medium_handheld: (max-width px-to-em(768px,$base-font-size)) !default;
+$medium_handheld_tall: (min-width px-to-em(481px,$base-font-size)),(max-width px-to-em(768px,$base-font-size)),(orientation portrait) !default;
+$medium_handheld_wide: (min-width px-to-em(1024px,$base-font-size));
+
+$large_handheld: ();
+$large_handheld_tall: ();
+$large_handheld_wide: ();
+
+$small_desktop: $medium_handheld_wide !default;
+$medium_desktop: (min-width,px-to-em(1280px,$base-font-size)) !default;
+$large_desktop: (min-width,px-to-em(1680px,$base-font-size)) !default;

data/scss/pg/modules/_all.scss

@@ -0,0 +1,9 @@
+// /**
+//  * 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'; }
+
+@import "helpers";
+@import "settings";
+@import "behavior";

data/scss/pg/modules/_behavior.scss

@@ -0,0 +1,13 @@
+// /**
+//  * 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'; }
+
+
+@import "forms/behavior";
+@import "buttons/behavior";
+// @import "tables/behavior";
+@import "lists/behavior";
+// @import "tabs/behavior";
+// @import "accordions/behavior";

data/scss/pg/modules/_helpers.scss

@@ -0,0 +1,13 @@
+// /**
+//  * 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'; }
+
+
+@import "forms/helpers";
+@import "buttons/helpers";
+// @import "tables/helpers";
+@import "lists/helpers";
+// @import "tabs/helpers";
+// @import "accordions/helpers";

data/scss/pg/modules/_settings.scss

@@ -0,0 +1,13 @@
+// /**
+//  * 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'; }
+
+
+@import "forms/settings";
+@import "buttons/settings";
+// @import "tables/settings";
+@import "lists/settings";
+// @import "tabs/settings";
+// @import "accordions/settings";

data/scss/pg/modules/accordions/_all.scss

@@ -0,0 +1,8 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+
+@import "settings";
+@import "helpers";
+@import "behavior";

data/scss/pg/modules/accordions/_behavior.scss

@@ -0,0 +1,5 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+

data/scss/pg/modules/accordions/_helpers.scss

@@ -0,0 +1,5 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+

data/scss/pg/modules/accordions/_settings.scss

@@ -0,0 +1,4 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */

data/scss/pg/modules/buttons/_all.scss

@@ -0,0 +1,8 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+
+@import "settings";
+@import "helpers";
+@import "behavior";

data/scss/pg/modules/buttons/_behavior.scss

@@ -0,0 +1,89 @@
+// /**
+//  * @copyright  Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * @license    GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+//  ==========================================================================
+//  Render button styles
+//  ==========================================================================
+
+@each $button in $buttons {
+
+  $selector: nth($button,1);
+  $properties: nth($button,2);
+  $is-state: nth($button,3);
+
+  @if length($properties) != 0 {
+
+    .#{$selector} {
+      @each $property in $properties {
+
+        $value: nth($property,2);
+        $property: nth($property,1);
+
+        @if $property=="cursor" {
+          @include module-property($value, $property);
+        }
+        @else if $property=="display" {
+          @include module-display($value);
+        }
+        @else if $property=="padding" {
+          @include module-padding($value);
+        }
+        @else if $property=="background" {
+          @include module-background($value);
+        }
+        @else if $property=="border" {
+          @include module-border($value);
+        }
+        @else if $property=="border-radius" {
+          @include module-border-radius($value);
+        }
+        @else if $property=="box-shadow" {
+          @include module-shadow($value);
+        }
+        @else if $property=="color" {
+          @include module-property($value, "color");
+        }
+        @else if $property=="text" {
+          @include module-text($value);
+        }
+        @else if $property=="type" {
+          @include module-type($value);
+        }
+        @else {
+          @include module-property($value, $property);
+        }
+      }
+      @if $is-state == false {
+        &:hover {
+          @extend .is-#{$selector}-hover !optional;
+        }
+        &:active {
+          @extend .is-#{$selector}-active !optional;
+        }
+      }
+    }
+  }
+}
+
+
+//  ==========================================================================
+//  Render layout styles
+//  ==========================================================================
+
+.#{$button-base-class}-align-top {
+  @include inline-block(top);
+}
+.#{$button-base-class}-small {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.#{$button-base-class}-big {
+  @include adjust-font-size-to($font-size-l, 1.5);
+}
+.#{$button-base-class}-stretch {
+  width: 100%;
+}

data/scss/pg/modules/buttons/_helpers.scss

@@ -0,0 +1,7 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+
+// @import "base/functions";
+@import "helpers/mixins";

data/scss/pg/modules/buttons/_settings.scss

@@ -0,0 +1,153 @@
+// /**
+//  * 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
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+//  ==========================================================================
+//  Button base class
+//  ==========================================================================
+
+	$button-base-class: "btn" !default;
+
+
+//  ==========================================================================
+//  Button base properties
+//  ==========================================================================
+
+	$button-cursor: pointer !default;
+	$button-vertical-align: baseline;
+
+
+	// -----------------------------------------------------------------------
+	// Button display (display, vertical-align)
+	// -----------------------------------------------------------------------
+
+	$button-display: inline-block !default;
+	$button-vertical-align: middle !default;
+
+
+	// -----------------------------------------------------------------------
+	// Button padding (top, right, left, bottom)
+	// -----------------------------------------------------------------------
+
+	$button-padding-top: vertical-rhythm(.25) !default;
+	$button-padding-right: horizontal-rhythm(1/2) !default;
+	$button-padding-bottom: vertical-rhythm(.25) !default;
+	$button-padding-left: horizontal-rhythm(1/2) !default;
+
+
+	// -----------------------------------------------------------------------
+	// Button background (background-color, background-image)
+	// -----------------------------------------------------------------------
+
+	$button-background-color: $color-theme !default; // not base
+	$button-background-image: false !default; // not base
+
+
+	// -----------------------------------------------------------------------
+	// Button border (top, right, left, bottom)
+	// -----------------------------------------------------------------------
+
+	$button-border-width: 1px !default;
+	$button-border-style: solid !default; // not base
+	$button-border-color: $button-background-color !default; // not base
+	$button-border-radius: $corner-radius !default;
+
+
+	// -----------------------------------------------------------------------
+	// Button shadow (box-shadow, inner-shadow)
+	// -----------------------------------------------------------------------
+
+	$button-shadow-box-outer: false !default;
+	$button-shadow-box-inner: false !default;
+
+
+	// -----------------------------------------------------------------------
+	// Button text (color, shadow, align, decoration)
+	// -----------------------------------------------------------------------
+
+	$button-text-color: $white !default;
+	$button-text-shadow: -1px -1px 0 rgba(0,0,0,.3) !default;
+	$button-text-align: center !default;
+	$button-text-decoration: none !default;
+
+
+	// -----------------------------------------------------------------------
+	// Button type (type, size, leading)
+	// -----------------------------------------------------------------------
+
+	$button-type-type: $type-default !default;
+	$button-type-size: $base-font-size !default;
+	$button-type-rhythm: 1 !default;
+
+
+//  ==========================================================================
+//  Button hover state properties
+//  ==========================================================================
+
+	$button-hover-background-color: lighten($button-background-color, 20%) !default;
+	$button-hover-background-image: false !default;
+	$button-hover-border-color: $button-hover-background-color !default;
+
+
+//  ==========================================================================
+//  Button active state properties
+//  $button-active-background-image: linear-gradient(lighten($button-active-background-color,5),darken($button-active-background-color,5))
+//  ==========================================================================
+
+	$button-active-background-color: lighten($button-background-color, 20%) !default;
+	$button-active-background-image: false !default;
+	$button-active-border-color: $button-active-background-color !default;
+
+
+//  ==========================================================================
+//  Elements
+//  ==========================================================================
+
+	$button-base: 
+		$button-base-class,
+		(
+			(cursor, ($button-cursor))
+			(display, ($button-display $button-vertical-align))
+			(padding, ($button-padding-top $button-padding-right $button-padding-bottom $button-padding-left))
+			(background, ($button-background-color $button-background-image))
+			(border, ($button-border-width $button-border-style $button-border-color))
+			(border-radius, ($button-border-radius))
+			(box-shadow, ($button-shadow-box-outer $button-shadow-box-inner))
+			(color, ($button-text-color))
+			(text, ($button-text-align $button-text-decoration $button-text-shadow))
+			(type, ($button-type-type $button-type-size $button-type-rhythm))
+		),
+		false
+		!default;
+
+	$button-state: 
+		'state',
+		(
+			(cursor, false)
+			(display, false)
+			(padding, false)
+			(background, false)
+			(border, false)
+			(border-radius, false)
+			(box-shadow, false)
+			(color, false)
+			(text, false)
+			(type, false)
+		),
+		true
+		!default;
+
+	$button: clone($button-base, "#{$button-base-class}", false) !default;
+	$button-hover: new($button-state, "is-#{$button-base-class}-hover", true) !default;
+	$button-active: new($button-state, "is-#{$button-base-class}-active", true) !default;
+
+	$button-hover: change($button-hover, (background, ($button-hover-background-color $button-hover-background-image)));
+	$button-hover: change($button-hover, (border, (false false $button-hover-border-color)));
+
+	$button-active: change($button-active, (background, ($button-active-background-color $button-active-background-image)));
+	$button-active: change($button-active, (border, (false false $button-active-border-color)));
+
+	$buttons: $button, $button-hover, $button-active !default;

data/scss/pg/modules/buttons/helpers/_mixins.scss

@@ -0,0 +1,33 @@
+// /**
+//  * 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 button
+//  ==========================================================================
+//  Accepts a string which will be used as a selector
+//  Will yield content as its output
+//  
+//  @param $selector: a string
+//  ==========================================================================
+@mixin button-base($selector)
+{
+  #{$selector} {
+    @content;
+  }
+}
+
+@mixin button($button-base-class, $button-class)
+{
+	$selector: '.' + $button-base-class;
+	@if $button-class != '' {
+		$selector: $selector + '-' + $button-class;
+	}
+	
+	#{$selector} {
+	    @content;
+	}
+}

data/scss/pg/modules/forms/_all.scss

@@ -0,0 +1,8 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+
+@import "settings";
+@import "helpers";
+@import "behavior";