persistentgrid 0.0.1.beta.1

data/scss/pg/modules/forms/_behavior.bak.scss

@@ -0,0 +1,215 @@
+// /**
+//  * 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'; }
+
+
+//  ==========================================================================
+//  Placeholders
+//  ==========================================================================
+
+	/*
+	 * Field styles
+	 */
+	%#{$input-field-class} {
+		/*
+		 * Box-model treatments
+		 */
+		width: $input-width;
+		@include box-sizing(border-box);
+		@include inline-block(baseline);
+		@include module-margin($input-margin-top $input-margin-right $input-margin-bottom $input-margin-left);
+		@include module-padding($input-padding-top $input-padding-right $input-padding-bottom $input-padding-left);
+		@include column-spacing;
+		@include module-border($input-border);
+		@include module-border-radius($input-border-radius);
+		@include module-background($input-background);
+
+		@include input-shadow($input-shadow);
+
+		/*
+		 * Font and text treatments
+		 */
+		@include module-type($input-type);
+		@include module-property($label-text-color, 'color');
+		@include module-property($label-text-align, 'text-align');
+		@include module-property($label-text-decoration, 'text-decoration');
+		@include module-text-shadow($label-text-shadow);
+
+		&:focus {
+			@extend %is-#{$input-field-class}-focus;
+		}
+		@include placeholder()
+		{
+			color: $color-primary;
+		}
+	}
+
+	/*
+	 * Field focus styles
+	 */
+	%is-#{$input-field-class}-focus {
+
+		@include module-border($input-focussed-border);
+		@include module-border-radius($input-focussed-border-radius);
+		@include module-background($input-focussed-background);
+		@include input-shadow($input-focussed-shadow);
+		@include module-outline($input-focussed-outline-border, $input-focussed-outline-offset);
+				  // -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+	}
+
+
+//  ==========================================================================
+//  Fields
+//  ==========================================================================
+
+	.#{$input-field-class}
+	{
+		@extend %#{$input-field-class};
+	}
+
+	select,
+	textarea,
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	input[type="password"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="text"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"]
+	{
+	}
+
+	/*
+	 * Override some properties for the search field
+	 */
+	.#{$input-search-class} {
+		// Not sure why this needs to be repeated
+		@include box-sizing(border-box);
+		@if $input-search-border-radius != $input-border-radius {
+			@include border-radius($input-search-border-radius);
+		}
+	}
+
+	/*
+	 * Override some properties for the color field
+	 */
+	.#{$input-color-class} {
+		@if $input-color-width {
+			width: $input-color-width;
+		}
+	}
+
+	/*
+	 * Override some properties for the range field
+	 */
+	.#{$input-range-class} {
+		@if $input-range-width {
+			width: $input-range-width;
+		}
+	}
+
+	/*
+	 * Override some properties for the range and color field
+	 */
+	.#{$input-color-class},
+	.#{$input-range-class} {
+		padding: 0;
+		height: vertical-rhythm($input-type-rhythm) + $input-padding-top + $input-padding-bottom;
+	}
+
+	.#{$input-check-class} {
+	}
+
+
+//  ==========================================================================
+//  Select and Datalists
+//  ==========================================================================
+
+	.#{$select-dropdown-class} {
+		optgroup,
+		option {
+			@include module-padding($input-padding);
+			@include column-spacing;
+			font-weight: inherit;
+			font-style: inherit;
+			font-variant: inherit;
+			font-family: inherit;
+			font-size: inherit;
+			line-height: inherit;
+		}
+	}
+
+	.#{$select-dropdown-class} {
+		@extend %#{$input-field-class};
+		@if $select-appearance-default {
+			@include reset-appearance(menulist);
+			height: vertical-rhythm($input-type-rhythm) + $input-padding-top + $input-padding-bottom;
+		}
+	}
+	@if $select-webkit {
+		.webkit {
+			.#{$select-dropdown-class} {
+				background: $input-background-color url('/assets/images/icons/icon-sort.svg') no-repeat 1% center;
+				background-size: 10px auto;
+			}
+		}
+	}
+
+//  ==========================================================================
+//  Textarea
+//  ==========================================================================
+
+	.#{$textarea-class} {
+		@extend %#{$input-field-class};
+		&.large {
+			height: vertical-rhythm(10);
+		}
+		&.medium {
+			height: vertical-rhythm(6);
+		}
+		&.small {
+			height: vertical-rhythm(2);
+		}
+	}
+
+
+//  ==========================================================================
+//  Labels
+//  ==========================================================================
+
+
+	.#{$label-base-class} {
+		@include inline-block(baseline);
+		width: $input-width;
+		@include inline-block(baseline);
+		@include module-margin($label-margin);
+		@include module-padding($label-padding);
+		@include module-border($label-border);
+		@include module-border-radius($label-border-radius);
+		@include module-background($label-background);
+		@include module-shadow($label-shadow);
+
+		@include module-type($label-type);
+		@include module-property($label-text-color, 'color');
+		@include module-property($label-text-align, 'text-align');
+		@include module-property($label-text-decoration, 'text-decoration');
+		@include module-text-shadow($label-text-shadow);
+	}
+
+
+//  ==========================================================================
+//  Legends
+//  ==========================================================================
+
+	.#{$legend-class} {
+		@extend .#{$label-base-class};
+	}

data/scss/pg/modules/forms/_behavior.scss

@@ -0,0 +1,215 @@
+// /**
+//  * 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'; }
+
+
+//  ==========================================================================
+//  Placeholders
+//  ==========================================================================
+
+	/*
+	 * Field styles
+	 */
+	%#{$input-field-class} {
+		/*
+		 * Box-model treatments
+		 */
+		width: $input-width;
+		@include box-sizing(border-box);
+		@include inline-block(baseline);
+		@include module-margin($input-margin);
+		@include module-padding($input-padding);
+		@include column-spacing;
+		@include module-border($input-border);
+		@include module-border-radius($input-border-radius);
+		@include module-background($input-background);
+
+		@include input-shadow($input-shadow);
+
+		/*
+		 * Font and text treatments
+		 */
+		@include module-type($input-type);
+		@include module-property($input-text-color, 'color');
+		@include module-property($input-text-align, 'text-align');
+		@include module-property($input-text-decoration, 'text-decoration');
+		@include module-text-shadow($input-text-shadow);
+
+		&:focus {
+			@extend %is-#{$input-field-class}-focus;
+		}
+		@include placeholder()
+		{
+			color: $color-primary;
+		}
+	}
+
+	/*
+	 * Field focus styles
+	 */
+	%is-#{$input-field-class}-focus {
+
+		@include module-border($input-focussed-border);
+		@include module-border-radius($input-focussed-border-radius);
+		@include module-background($input-focussed-background);
+		@include input-shadow($input-focussed-shadow);
+		@include module-outline($input-focussed-outline-border, $input-focussed-outline-offset);
+				  // -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+	}
+
+
+//  ==========================================================================
+//  Fields
+//  ==========================================================================
+
+	.#{$input-field-class}
+	{
+		@extend %#{$input-field-class};
+	}
+
+	select,
+	textarea,
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	input[type="password"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="text"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"]
+	{
+	}
+
+	/*
+	 * Override some properties for the search field
+	 */
+	.#{$input-search-class} {
+		// Not sure why this needs to be repeated
+		@include box-sizing(border-box);
+		@if $input-search-border-radius != $input-border-radius {
+			@include border-radius($input-search-border-radius);
+		}
+	}
+
+	/*
+	 * Override some properties for the color field
+	 */
+	.#{$input-color-class} {
+		@if $input-color-width {
+			width: $input-color-width;
+		}
+	}
+
+	/*
+	 * Override some properties for the range field
+	 */
+	.#{$input-range-class} {
+		@if $input-range-width {
+			width: $input-range-width;
+		}
+	}
+
+	/*
+	 * Override some properties for the range and color field
+	 */
+	.#{$input-color-class},
+	.#{$input-range-class} {
+		padding: 0;
+		height: vertical-rhythm($input-type-rhythm) + $input-padding-top + $input-padding-bottom;
+	}
+
+	.#{$input-check-class} {
+	}
+
+
+//  ==========================================================================
+//  Select and Datalists
+//  ==========================================================================
+
+	.#{$select-dropdown-class} {
+		optgroup,
+		option {
+			@include module-padding($input-padding);
+			@include column-spacing;
+			font-weight: inherit;
+			font-style: inherit;
+			font-variant: inherit;
+			font-family: inherit;
+			font-size: inherit;
+			line-height: inherit;
+		}
+	}
+
+	.#{$select-dropdown-class} {
+		@extend %#{$input-field-class};
+		@if $select-appearance-default {
+			@include reset-appearance(menulist);
+			height: vertical-rhythm($input-type-rhythm) + $input-padding-top + $input-padding-bottom;
+		}
+	}
+	@if $select-webkit {
+		.webkit {
+			.#{$select-dropdown-class} {
+				background: $input-background-color url('/assets/images/icons/icon-sort.svg') no-repeat 1% center;
+				background-size: 10px auto;
+			}
+		}
+	}
+
+//  ==========================================================================
+//  Textarea
+//  ==========================================================================
+
+	.#{$textarea-class} {
+		@extend %#{$input-field-class};
+		&.large {
+			height: vertical-rhythm(10);
+		}
+		&.medium {
+			height: vertical-rhythm(6);
+		}
+		&.small {
+			height: vertical-rhythm(2);
+		}
+	}
+
+
+//  ==========================================================================
+//  Labels
+//  ==========================================================================
+
+
+	.#{$label-base-class} {
+		@include inline-block(baseline);
+		width: $input-width;
+		@include inline-block(baseline);
+		@include module-margin($label-margin);
+		@include module-padding($label-padding);
+		@include module-border($label-border);
+		@include module-border-radius($label-border-radius);
+		@include module-background($label-background);
+		@include module-shadow($label-shadow);
+
+		@include module-type($label-type);
+		@include module-property($label-text-color, 'color');
+		@include module-property($label-text-align, 'text-align');
+		@include module-property($label-text-decoration, 'text-decoration');
+		@include module-text-shadow($label-text-shadow);
+	}
+
+
+//  ==========================================================================
+//  Legends
+//  ==========================================================================
+
+	.#{$legend-class} {
+		@extend .#{$label-base-class};
+	}

data/scss/pg/modules/forms/_helpers.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
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+@import "helpers/mixins";

data/scss/pg/modules/forms/_settings.scss

@@ -0,0 +1,10 @@
+// /**
+//  * 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 "settings/input";
+@import "settings/labels";
+@import "settings/forms";

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

@@ -0,0 +1,94 @@
+// /**
+//  * 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 input-shadow
+//  ==========================================================================
+//  a valid text-shadow notation is: inset|outset offset-x offset-y blur color
+//  
+//  @param $appearance: a string
+//  ==========================================================================
+	@mixin input-shadow($shadow: $input-shadow){
+		@if $shadow {
+			@include module-shadow($shadow);
+			@include reset-appearance(none);
+			  -webkit-tap-highlight-color: rgba(0,0,0,0);
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin appearance
+//  ==========================================================================
+//  Accepts a string which a valid appearance
+//  
+//  @param $appearance: a string
+//  ==========================================================================
+@mixin reset-appearance($appearance)
+{
+	@include reset-webkit-appearance($appearance);
+	@include reset-mozilla-appearance($appearance);
+}
+
+
+//  ==========================================================================
+//  Mixin Webkit appearance
+//  ==========================================================================
+//  Accepts a string which a valid appearance
+//  
+//  @param $appearance: a string
+//  ==========================================================================
+@mixin reset-webkit-appearance($appearance)
+{
+	-webkit-appearance: $appearance; /* mobile firefox too! */
+}
+
+
+//  ==========================================================================
+//  Mixin Mozilla appearance
+//  ==========================================================================
+//  Accepts a string which a valid appearance
+//  
+//  @param $appearance: a string
+//  ==========================================================================
+@mixin reset-mozilla-appearance($appearance)
+{
+	-moz-appearance: $appearance; /* mobile firefox too! */
+}
+
+
+//  ==========================================================================
+//  Mixin placeholder
+//  ==========================================================================
+//  Yields @content
+//  
+//  @param $appearance: a set of CSS property declarations
+//  ==========================================================================
+	@mixin placeholder()
+	{
+		&::-webkit-input-placeholder,
+		&:-moz-placeholder,
+		&::-moz-placeholder,
+		&:-ms-placeholder {
+		    @content;
+		}
+	}
+
+
+//  ==========================================================================
+//  Mixin webkit-remove-padding-spin-button
+//  ==========================================================================
+//  Yields @content
+//  
+//  ==========================================================================
+	@mixin webkit-remove-padding-spin-button {
+
+		&::-webkit-inner-spin-button,
+		&::-webkit-outer-spin-button {
+			@include reset-webkit-appearance(none);
+		}	
+	}

data/scss/pg/modules/forms/settings/forms.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'; }
+
+
+//  ==========================================================================
+//  Form base class
+//  ==========================================================================
+
+	$form-base-class: "form" !default;
+
+
+//  ==========================================================================
+//  Legend properties
+//  ==========================================================================
+
+	$legend-class: 'legend' !default;