piecss 0.5.0 → 0.6.0

data/sass/piecss/behavior/base/_collection.scss

@@ -0,0 +1,861 @@
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "html",
+  (
+    font-family: get-font-family($default-font) /* 1 */,
+    line-height: to-unit($default-line-height, $line-height-unit), /* 2 */
+    -ms-text-size-adjust: 100%, /* 3 */
+    -webkit-text-size-adjust: 100% /* 3 */
+  )
+);
+@if get-font-style($default-font) != normal {
+  $base-collection: add-properties(
+    $base-collection,
+    "html",
+    (
+      font-style: get-font-style($default-font) /* 1 */
+    )
+  );
+}
+@if get-font-variant($default-font) != normal {
+  $base-collection: add-properties(
+    $base-collection,
+    "html",
+    (
+      font-variant: get-font-variant($default-font) /* 1 */
+    )
+  );
+}
+@if get-font-weight($default-font) != normal {
+  $base-collection: add-properties(
+    $base-collection,
+    "html",
+    (
+      font-weight: get-font-weight($default-font) /* 1 */
+    )
+  );
+}
+@if $default-font-size != $base-font-size {
+  $base-collection: add-properties(
+    $base-collection,
+    "html",
+    (
+      font-size: to-unit($default-font-size, $unit) /* 4 */
+    )
+  );
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "body",
+  (
+    margin: 0
+  )
+);
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "article, aside, footer, header, nav, section, figcaption, figure, main, details, /* 1 */ menu",
+  (
+    display: block
+  )
+);
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "h1",
+  (
+    font-size: 2em,
+    margin: .67em 0
+  )
+);
+
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "article, aside, footer, header, nav, section, figcaption, figure, main, details, /* 1 */ menu",
+  (
+    display: block
+  )
+);
+
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "figure",
+  (
+    margin: 1em 40px
+  )
+);
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "hr",
+  (
+    box-sizing: content-box, /* 1 */
+    height: 0, /* 1 */
+    overflow: visible /* 2 */
+  )
+);
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "code, kbd, samp, pre",
+  (
+    font-family: "#{$monospace-family}, monospace" /* 1 */,
+    font-size: 1em /* 2 */
+  )
+);
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "a",
+  (
+    background-color: transparent, /* 1 */
+    -webkit-text-decoration-skip: objects /* 2 */
+  )
+);
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "a:active, a:hover",
+  (
+    outline-width: 0
+  )
+);
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "abbr[title]",
+  (
+    border-bottom: none, /* 1 */
+    text-decoration: underline /* 2 */
+  )
+);
+$base-collection: add-properties(
+  $base-collection,
+  "abbr[title]",
+  (
+    text-decoration: dotted /* 2 */
+  ),
+  true
+);
+
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "b, strong",
+  (
+   font-weight: inherit
+  )
+);
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "b, strong",
+  (
+    font-weight: bolder
+  ),
+  true
+);
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "code, kbd, samp, pre",
+  (
+    font-family: "#{$monospace-family}, monospace" /* 1 */,
+    font-size: 1em /* 2 */
+  )
+);
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "dfn",
+  (
+    font-style: italic
+  )
+);
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "mark",
+  (
+    background: $yellow,
+    color: $color-body
+  )
+);
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "small",
+  (
+    font-size: 80%
+  )
+);
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "sub, sup",
+  (
+    font-size: 75%,
+    line-height: 0,
+    position: relative,
+    vertical-align: baseline
+  )
+);
+
+$base-collection: add-properties(
+  $base-collection,
+  "sub",
+  (
+    bottom: -.25em
+  )
+);
+
+$base-collection: add-properties(
+  $base-collection,
+  "sup",
+  (
+    top: -.5em
+  )
+);
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "audio, video",
+  (
+    display: inline-block
+  )
+);
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "audio:not([controls])",
+  (
+    display: none,
+    height: 0
+  )
+);
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "img",
+  (
+    border-style: none
+  )
+);
+
+/**
+ * Hide the overflow in IE.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "svg:not(:root)",
+  (
+    overflow: hidden
+  )
+);
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "button, input, optgroup, select, textarea",
+  (
+    font-family: get-font-family($default-font), /* 1 */
+    font-size: 100%, /* 1 */
+    line-height: to-unit($default-line-height, $line-height-unit), /* 1 */
+    margin: 0 /* 2 */
+  )
+);
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "button, input",
+  (
+    overflow: visible
+  )
+);
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform on select element in Firefox.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "button, select /* 1 */",
+  (
+    text-transform: none
+  )
+);
+
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "button, html [type=\"button\"], /* 1 */ [type=\"reset\"], [type=\"submit\"]",
+  (
+    -webkit-appearance: button /* 2 */
+  )
+);
+
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  'button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner',
+  (
+    border-style: none,
+    padding: 0
+  )
+);
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring',
+  (
+    outline: 1px dotted ButtonText
+  )
+);
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "fieldset",
+  (
+    border: 1px solid $silver,
+    margin: 0 2px,
+    padding: .35em .625em .75em
+  )
+);
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "legend",
+  (
+    box-sizing: border-box, /* 1 */
+    color: inherit, /* 2 */
+    display: table, /* 1 */
+    max-width: 100%, /* 1 */
+    padding: 0, /* 3 */
+    white-space: normal /* 1 */
+  )
+);
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "progress",
+  (
+    display: inline-block, /* 1 */
+    vertical-align: baseline, /* 2 */
+  )
+);
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "textarea",
+  (
+    overflow: auto
+  )
+);
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  '[type="checkbox"], [type="radio"]',
+  (
+    box-sizing: border-box, /* 1 */
+    padding: 0 /* 2 */
+  )
+);
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  '[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button',
+  (
+    height: auto
+  )
+);
+
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  '[type="search"]',
+  (
+    -webkit-appearance: textfield, /* 1 */
+    outline-offset: -2px /* 2 */
+  )
+);
+
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  '[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration',
+  (
+    -webkit-appearance: none
+  )
+);
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "::-webkit-file-upload-button",
+  (
+    -webkit-appearance: button, /* 1 */
+    font: inherit /* 2 */
+  )
+);
+
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "article, aside, footer, header, nav, section, figcaption, figure, main, details, /* 1 */ menu",
+  (
+    display: block
+  )
+);
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "summary",
+  (
+    display: list-item
+  )
+);
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "canvas",
+  (
+    display: inline-block
+  )
+);
+
+/**
+ * Add the correct display in IE.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "template",
+  (
+    display: none
+  )
+);
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "[hidden]",
+  (
+    display: none
+  )
+);
+
+/* Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "table",
+  (
+    border-collapse: collapse,
+    border-spacing: 0
+  )
+);
+
+$base-collection: add-properties(
+  $base-collection,
+  "td, th",
+  (
+    padding: 0
+  )
+);
+
+/* More Piecss base styles
+   ========================================================================== */
+
+/*
+  * Set consistent quote types.
+  */
+
+$base-collection: add-properties(
+  $base-collection,
+  "q",
+  (
+    quotes: "\201C" "\201D" "\2018" "\2019"
+  )
+);
+
+/*
+ * Apply a bottom margin of one line-height to any element in this comma
+ * separated list.
+ */
+
+@if length($single-direction-elements)>0 {
+  $base-collection: add-properties(
+    $base-collection,
+    "#{implode($single-direction-elements, ", ")}",
+    (
+      margin: 0 0 $default-line-height
+    )
+  );
+}
+
+/**
+ * Reset margin.
+ */
+
+@if length($reset-margin)>0 {
+  $base-collection: add-properties(
+    $base-collection,
+    "#{implode($reset-margin, ", ")}",
+    (
+      margin: 0
+    )
+  );
+}
+
+/**
+ * Reset box-model
+ */
+
+@if length($reset-box-model)>0 {
+  $base-collection: add-properties(
+    $base-collection,
+    "#{implode($reset-box-model, ", ")}",
+    (
+      box-sizing: border-box
+    )
+  );
+}
+
+/*
+ * Full typographic reset.
+ */
+
+@if length($reset-font)>0 {
+  $base-collection: add-properties(
+    $base-collection,
+    "#{implode($reset-font, ", ")}",
+    (
+      font-style: inherit,
+      font-variant: inherit,
+      font-weight: inherit,
+      font-size: 1em,
+      line-height: 100%,
+      font-family: get-font-family($default-font)
+    )
+  );
+}
+
+/*
+ * Reset font-weights.
+ */
+
+@if length($reset-font-weight-to-bold)>0 {
+  $base-collection: add-properties(
+    $base-collection,
+    "#{$reset-font-weight-to-bold}",
+    (
+      font-weight: bold
+    )
+  );
+}
+
+@if length($reset-font-weight-to-italic)>0 {
+  $base-collection: add-properties(
+    $base-collection,
+    "#{implode($reset-font-weight-to-italic, ", ")}",
+    (
+      font-weight: italic
+    )
+  );
+
+}
+
+@if length($reset-font-weight-to-regular)>0 {
+  $base-collection: add-properties(
+    $base-collection,
+    "#{implode($reset-font-weight-to-regular, ", ")}",
+    (
+      font-weight: regular
+    )
+  );
+}
+
+/*
+ * Set anchor colours.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "a",
+  (
+    color: $color-anchor
+  )
+);
+$base-collection: add-properties(
+  $base-collection,
+  "a:visited",
+  (
+    color: $color-anchor--visited
+  )
+);
+$base-collection: add-properties(
+  $base-collection,
+  "a:active",
+  (
+    color: $color-anchor--active
+  )
+);
+$base-collection: add-properties(
+  $base-collection,
+  "a:hover",
+  (
+    color: $color-anchor--hover
+  )
+);
+
+/**
+ * Override the fieldset settings above wit more 'Piecss' like behaviour.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "fieldset",
+  (
+    border: 1px solid $silver,
+    margin: 0 rhythm(.5),
+    padding: rhythm(.5) rhythm(1)
+  )
+);
+
+/**
+ * Override the fieldset settings above wit more 'Piecss' like behaviour.
+ */
+
+$base-collection: add-properties(
+  $base-collection,
+  "h1",
+  (
+    font-size: to-unit(32px),
+    margin: rhythm(1) 0,
+  )
+);
+@if to-unit(line-height(32px, 1.2), $line-height-unit, 32px) != to-unit($default-line-height, $line-height-unit) {
+  $base-collection: add-properties(
+    $base-collection,
+    "h1",
+    (
+      line-height: to-unit(line-height(32px, 1.2), $line-height-unit, 32px)
+    )
+  );
+}