piecss 0.1.0.alpha.01

data/sass/piecss/settings/fonts/icon-fonts/foundation-accessability/_settings.scss

@@ -0,0 +1,28 @@
+$fontFileName: "/PGFramework/Fonts/accessibility_foundicons";
+$fontName: "AccessibilityFoundicons";
+$classPrefix: "foundicon-";
+
+@mixin i-class($name,$pua) {
+  .#{$classPrefix}#{$name}:before { 
+    content: "\f#{$pua}";
+  }
+}
+
+@mixin ie-class($name,$pua) {
+  .#{$classPrefix}#{$name} { 
+    *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf#{$pua};"); 
+  }
+}
+
+@mixin face {
+  @font-face { 
+    font-family: $fontName;
+    src: url('#{$fontFileName}.eot');
+    src: url('#{$fontFileName}.eot?#iefix') format('embedded-opentype'),
+         url('#{$fontFileName}.woff') format('woff'),
+         url('#{$fontFileName}.ttf') format('truetype'),
+         url('#{$fontFileName}.svg##{$fontName}') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+}

data/sass/piecss/settings/form.scss

@@ -0,0 +1,664 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// ==========================================================================
+//
+// CONTENT
+//
+// ==========================================================================
+//
+// 1. Selector settings
+// 2. Field settings
+//    2a. Shared settings
+//        Default
+//        Focus
+//    2b. Color input
+//    2b. Range input
+//    2d. Search input
+//    2e. Checkbox/Radio settings
+//    2f. Textarea settings
+//    2g. Select settings
+// 3. Label settings
+// 4. Elements
+
+
+// ==========================================================================
+//
+// SELECTOR SETTINGS
+//
+// ==========================================================================
+
+
+/**
+ * Seletor for form elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-form-selector: "%form" !default;
+
+/**
+ * Selector for fieldset elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-fieldset-selector: "%fieldset" !default;
+
+/**
+ * Selector for legend elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-legend-selector: "%legend" !default;
+
+/**
+ * Selector for field base
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-field-base-selector: "%field-base" !default;
+
+/**
+ * Selector for focus state of form elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-field-base-selector--focus: "%field-base--focus" !default;
+
+/**
+ * Selector for most field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-field-selector: "%field" !default;
+
+/**
+ * Selector for color field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-field-color-selector: "%field--color" !default;
+
+/**
+ * Selector for range field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-field-range-selector: "%field--range" !default;
+
+/**
+ * Selector for search field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-field-search-selector: "%field--search" !default;
+
+/**
+ * Selector for checkbox field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-checkbox-selector: "%checkbox" !default;
+
+/**
+ * Selector for radio field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-radio-selector: "%radio" !default;
+
+/**
+ * Selector for textarea field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-textarea-selector: "%textarea" !default;
+
+/**
+ * Selector for select field base
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-select-selector: "%select" !default;
+
+/**
+ * Selector for select field elements that behave like dropdowns
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-select-dropdown-selector: "%select--dropdown" !default;
+
+/**
+ * Selector for scrollable select field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-select-box-selector: "%select--box" !default;
+
+/**
+ * Selector for scrollable select field elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-select-multiple-selector: "%select--multiple" !default;
+
+/**
+ * Selector for scrollable labe; elements
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$form-label-selector: "%label" !default;
+
+// Start collection of element-maps
+
+/**
+ * Collection of form selectors and property maps. For each selector, the corrresponding properties are rendered by the form behavior. 
+ * You can override form behavior by a) overriding any of the field settings, or by b) replacing the selector entry in this element collection map.
+ *
+ * @since 0.1
+ *
+ * @type {Map}
+ */
+
+$form-elements: ();
+
+// ==========================================================================
+//
+// FIELD SETTINGS
+//
+// ==========================================================================
+
+
+// --------------------------------------------------------------------------
+//
+// SHARED SETTINGS - DEFAULT
+//
+// --------------------------------------------------------------------------
+
+/**
+ * Field top-padding. Defaults to a quarter rhythm unit.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-padding-top: vrhythm(.25) !default;
+
+/**
+ * Field right-padding.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-padding-right: .5em !default;
+
+/**
+ * Field bottom-padding. Defaults to a quarter rhythm unit.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-padding-bottom: vrhythm(.25) !default;
+
+/**
+ * Field left-padding.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-padding-left: .5em !default;
+
+/**
+ * Field background-color, defaults to the default background color.
+ *
+ * @since 0.1
+ *
+ * @type {Color}
+ */
+
+$field-background-color: $color-background !default;
+
+/**
+ * Field background-image, false will not render an image.
+ *
+ * @since 0.1
+ *
+ * @type {Color}
+ */
+
+$field-background-image: false !default;
+
+/**
+ * Field border width.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-border-width: 1px !default;
+
+/**
+ * Field border style.
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$field-border-style: solid !default;
+
+/**
+ * Field border color.
+ *
+ * @since 0.1
+ *
+ * @type {Color}
+ */
+
+$field-border-color: darken($color-background, 30%) !default;
+
+/**
+ * Field border radius.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-border-radius: $corner-radius !default;
+
+/**
+ * Field box sizing, set to border-box if you want consistent heights and widths accross form elements.
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$field-box-sizing: border-box !default;
+
+/**
+ * Field width, set to 100%. Width will be set on the field's (parent) container.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-width: 100% !default;
+
+/**
+ * Field height computes to line-heigh plus border-width + plus padding and is used by select (dropdown) form elements.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-height: $default-line-height + 2*$field-border-width + $field-padding-top + $field-padding-bottom !default;
+
+/**
+ * Field line-height, relevant for text-area.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-line-height: $default-line-height !default;
+
+/**
+ * Field shadow, simple inset shadow by default.
+ *
+ * @since 0.1
+ *
+ * @type {List}
+ */
+
+$field-shadow: mix($black, $field-background-color, 10%) 1px 1px 1px 0 inset !default;
+
+$form-elements: add-properties(
+    (
+        box-sizing: $field-box-sizing, // The search box needs this, weirdly
+        height: $field-height,
+        width: $field-width,
+        padding: (top: $field-padding-top, right: $field-padding-right, bottom: $field-padding-bottom, left: $field-padding-left),
+        background: $field-background-color if($field-background-image, url(#{$field-background-image}), none),
+        border: $field-border-width $field-border-style $field-border-color,
+        border-radius: $field-border-radius,
+        line-height: $field-line-height,
+        box-shadow: $field-shadow, 
+    ),
+    $form-field-base-selector,
+    $form-elements
+);
+
+
+// --------------------------------------------------------------------------
+//
+// SHARED SETTINGS - FOCUS
+//
+// --------------------------------------------------------------------------
+
+
+/**
+ * Background color of a field with focus state.
+ *
+ * @since 0.1
+ *
+ * @type {Color}
+ */
+
+$field-focussed-background-color: $whitesmoke !default;
+
+/**
+ * Outline width of a field with focus state.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-focussed-outline-width: 1px !default;
+
+/**
+ * Outline style of a field with focus state.
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$field-focussed-outline-style: solid !default;
+
+/**
+ * Outline color of a field with focus state.
+ *
+ * @since 0.1
+ *
+ * @type {Color}
+ */
+
+$field-focussed-outline-color: mix($field-border-color, $field-focussed-background-color, 0) !default;
+
+/**
+ * Outline offset of a field with focus state. In this setting, the outline is rendered inside the field against the field background.
+ * Be aware that this property can have a negative impact on a form's accessibility. Alter with care.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-focussed-outline-offset: -1*( $field-focussed-outline-width + 3*$field-border-width) !default; 
+
+$form-elements: add-properties(
+    (
+        background-color: $field-focussed-background-color,
+        outline: $field-focussed-outline-width $field-focussed-outline-style $field-focussed-outline-color,
+        outline-offset: $field-focussed-outline-offset,
+    ),
+    $form-field-base-selector--focus,
+    $form-elements
+);
+
+
+// ==========================================================================
+//
+// 2b. Input Color properties
+//
+// ==========================================================================
+
+$form-elements: add-properties(
+    (
+        // border: $field-border-width $field-border-style $field-border-color,
+        border-radius: $field-border-radius,
+    ),
+    $form-field-color-selector,
+    $form-elements
+);
+
+
+// ==========================================================================
+//
+// 2b. Input Range properties
+//
+// ==========================================================================
+
+
+/**
+ * Width of range input field.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-range-width: $field-width !default;
+
+$form-elements: add-properties(
+    (
+        width: $field-range-width,
+    ),
+    $form-field-range-selector,
+    $form-elements
+);
+
+
+// --------------------------------------------------------------------------
+//
+// Input Search properties
+//
+// --------------------------------------------------------------------------
+
+
+/**
+ * Border radius for search fields.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-search-border-radius: $field-border-radius !default;
+
+/**
+ * Outline offset override for search fields.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$field-search-outline-offset: 0 !default;
+
+$form-elements: add-properties(
+    (
+        // border-radius: $field-search-border-radius,
+        // outline-offset: $field-search-outline-offset,
+    ),
+    $form-field-search-selector,
+    $form-elements
+);
+
+
+// --------------------------------------------------------------------------
+//
+// Select properties
+//
+// --------------------------------------------------------------------------
+
+/**
+ * Height of select element.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$select-height: $field-height !default; // This is used for select elements
+
+/**
+ * Experimental setting.
+ *
+ * @since 0.1
+ *
+ * @type {String}
+ */
+
+$select-appearance: menulist !default;
+
+/**
+ * Experimental setting. Allows overriding of default behavior. Will require JavaScript.
+ *
+ * @todo define behavior, does not do anything at the moment
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$select-webkit: false !default;
+
+$form-elements: add-properties(
+    (
+        height: $select-height,
+    ),
+    $form-select-selector,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        height: auto,
+    ),
+    $form-select-box-selector,
+    $form-elements
+);
+
+
+// --------------------------------------------------------------------------
+//
+// Textarea properties
+//
+// --------------------------------------------------------------------------
+
+
+/**
+ * Height of textarea element.
+ *
+ * @since 0.1
+ *
+ * @type {Number | String}
+ */
+
+$textarea-height: auto !default;
+
+/**
+ * Alternate height of textarea element, medium.
+ *
+ * @since 0.1
+ *
+ * @type {Number | String}
+ */
+
+$textarea-height-medium: vrhythm(5) - 2*$field-border-width !default;
+
+/**
+ * Alternate height of textarea element, large.
+ *
+ * @since 0.1
+ *
+ * @type {Number | String}
+ */
+
+$textarea-height-large: vrhythm(10) - 2*$field-border-width !default;
+
+$form-elements: add-properties(
+    (
+        height: $textarea-height,
+    ),
+    $form-textarea-selector,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        height: $textarea-height-medium,
+    ),
+    #{$form-textarea-selector}--medium,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        height: $textarea-height-large,
+    ),
+    #{$form-textarea-selector}--large,
+    $form-elements
+);
+
+// ==========================================================================
+//
+// LABEL SETTINGS
+//
+// ==========================================================================
+
+