skeletor_backbone 0.0.3

data/app/assets/stylesheets/skeletor/base/foundation.sass

@@ -0,0 +1,537 @@
+// Skeletor Base Styles
+// These are good starting 'default' styles for a base stylesheet.
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  IMPORTS.....................Import Sass Settings and Functions
+//  CLEARFIX....................Clearfix: contain floats
+//  VERTICAL RHYTHM.............Consistent vertical rhythm, via margin-bottom
+//  MAIN........................Main Elements
+//  HEADINGS....................Heading Elements and corresponding classes
+//  PARAGRAPHS..................Paragraph Elements
+//  HORIZONTAL RULES............Horizontal Rules and corresponding classes
+//  LINKS.......................Anchor/Link Elements
+//  IMAGES & OBJECTS............Image, Objects, and Embeds
+//  BLOCKQUOTE..................Blockquote style
+//  CODE........................Preformatted text and other code styles
+//  LISTS.......................List Elements
+//  TABLES......................Table Elements
+//  FORMS.......................Form Elements
+//
+
+
+// -----------------------------------------------------------------------------
+//  :: IMPORTS
+// -----------------------------------------------------------------------------
+@import "skeletor/globals/mixins/position"
+@import "skeletor/globals/mixins/rem"
+@import "skeletor/globals/mixins/rgba"
+@import "skeletor/globals/mixins/media_query"
+@import "skeletor/globals/css3/prefixer"
+@import "skeletor/globals/css3/transition"
+@import "skeletor/globals/css3/border_radius"
+@import "skeletor/globals/css3/box_shadow"
+@import "skeletor/globals/css3/tab_size"
+@import "skeletor/globals/css3/hyphens"
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: CLEARFIX
+// -----------------------------------------------------------------------------
+
+// Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
+// Extend the clearfix class with Sass to avoid the `.cf` class appearing over and over in your markup.
+%clearfix
+  &:after
+    content: ""
+    clear: both
+    display: table
+
+.cf
+  @extend %clearfix
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: VERTICAL RHYTHM
+// -----------------------------------------------------------------------------
+
+// Where `margin-bottom` is concerned, this value will be the same as the
+// base line-height. This allows us to keep a consistent vertical rhythm.
+// As per: csswizardry.com/2012/06/single-direction-margin-declarations
+
+%sass-margin-bottom
+  +skeletor-vertical-spacing($base-line-height)
+
+// Set 'vertical rhythm' on Base elements
+h1,h2,h3,h4,h5,h6,hgroup,
+ul,ol,dl,blockquote,p,address,
+table, fieldset,figure,pre, hr
+  @extend %sass-margin-bottom
+
+
+// -----------------------------------------------------------------------------
+//  :: MAIN
+// -----------------------------------------------------------------------------
+html
+  font: #{skeletor-calculate-em($base-font-size)}/#{$line-height-ratio} $base-font-family
+  overflow-y: scroll
+  text-size-adjust: 100%
+  // TODO: Does font-size need to adjust by media-query?
+
+html, body
+  height: 100%
+  min-height: 100%
+
+html, button, input,
+select, textarea
+  color: $base-font-color
+
+// Highlighting - Remove text-shadow in selection h5bp.com/i
+::-moz-selection
+  background: #b3d4fc
+  text-shadow: none
+
+::selection
+  background: #b3d4fc
+  text-shadow: none
+
+// change `background` for text selections when browser is unfocused
+::selection:window-inactive
+  background: #dedede
+
+// remove background on images when selected
+img::selection
+  background: transparent
+
+img::-moz-selection
+  background: transparent
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: HEADINGS
+// -----------------------------------------------------------------------------
+
+// As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
+// When we define a heading we also define a corresponding class to go with it.
+// This allows us to apply, say, `class=kilo` to a `h3`.
+
+// Use `text-rendering` with caution - http://cbrac.co/SJt8p1
+h1, h2, h3, h4, h5, h6
+  color: $header-font-color
+  font-family: $header-font-family
+  font-weight: 700
+  text-rendering: optimizeLegibility
+
+h1, .kilo
+  +skeletor-font-size($h1-size)
+h2, .hecto
+  +skeletor-font-size($h2-size)
+h3, .deca
+  +skeletor-font-size($h3-size)
+h4, .deci
+  +skeletor-font-size($h4-size)
+h5, .centi
+  +skeletor-font-size($h5-size)
+h6, .milli
+  +skeletor-font-size($h6-size)
+
+// Larger font-sizes
+.tera
+  +skeletor-font-size($tera-size)
+.giga
+  +skeletor-font-size($giga-size)
+.mega
+  +skeletor-font-size($mega-size)
+
+//Smaller font-sizes
+.micro
+  +skeletor-font-size($micro-size)
+.nano
+  +skeletor-font-size($nano-size)
+.pico
+  +skeletor-font-size($pico-size)
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: PARAGRAPHS
+// -----------------------------------------------------------------------------
+p
+  color: $base-font-color
+  font-family: inherit
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: HORIZONTAL RULES
+// -----------------------------------------------------------------------------
+// A better looking horizontal rule
+hr, .rule
+  +skeletor-vertical-spacing($base-line-height - 2px)
+  border: none
+  border-bottom-width: 1px
+  border-bottom-style: solid
+  color: $gray
+  //display: block
+
+// Extends `hr` element/class
+.rule--dotted
+  border-bottom-style: dotted
+.rule--dashed
+  border-bottom-style: dashed
+
+// Extend `hr` element/class and adds section sign
+.rule--ornament
+  position: relative
+
+  &:after
+    +skeletor-position(absolute, 0px 0px 0 0px)
+    content: "\00A7"
+    line-height: 0
+    text-align: center
+
+  // Pass in arbitrary ornament through a data attribute.
+  // hr.rule--ornament{data-ornament="!"}
+  &[data-ornament]
+    content: attr(data-ornament)
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: LINKS
+// -----------------------------------------------------------------------------
+// remove gray background color from active links in ie 10
+a
+  +skeletor-transition(all .3s ease-in-out)
+  background: transparent
+  color: $base-link-color
+  font-family: inherit
+  line-height: inherit
+  text-decoration: none
+
+  &:hover, &:focus
+    color: $hover-link-color
+
+  &:focus, &:hover, &:active
+    outline: none
+
+  img
+    border: none
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: IMAGES & OBJECTS
+// -----------------------------------------------------------------------------
+// Fluid width audio and video elements
+audio, video
+  width: 100%
+
+// Fluid width media that mantains their aspect ratios
+img, video
+  height: auto
+  max-width: 100%
+  width: auto\9
+
+img
+  vertical-align: middle
+  -ms-interpolation-mode: bicubic
+
+// Fluid Objects & Embeds
+object, embed
+  height: 100%
+  max-width: 100%
+
+// Non-fluid images/Objects/Embeds if `width` and/or `height` specified.
+img[width], img[height],
+object[width], object[height],
+embed[width], object[height]
+  max-width: none
+
+// Images in `figure` elements.
+figure > img
+  display: block
+
+figcaption
+  font-size: 75%
+  font-style: italic
+  margin-top: 0.563rem
+
+// Fix SVG Height issue in Webkit browsers
+svg
+  display: block
+  max-height: 100%
+  max-width: 100%
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: BLOCKQUOTE
+// -----------------------------------------------------------------------------
+blockquote
+  padding-left: 1rem
+  border-left: 5px solid #e5e5e5
+  font-style: italic
+  font-family: $garamond
+
+  p
+    margin: 0
+    + p
+      margin-top: 1rem
+
+  // Use footer tag over cite inside blockquotes - http://cbrac.co/TCVK4P
+  footer, cite
+    color: $darker-gray
+    font-style: italic
+    font-size: 0.8125rem
+
+    // Add an m-dash character before the footer or cit tags
+    &:before
+      content: "\2014 \2009"
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: CODE
+// -----------------------------------------------------------------------------
+// Correct `font-family` set oddly in Safari 5 and Chrome
+code, kbd, pre, samp
+  color: $darkest-gray
+  font-family: $monospace
+
+code, kbd
+  font-size: 75%
+
+code
+  +skeletor-border-radius(3px)
+  background: $lightest-gray
+  border: 1px solid $light-gray
+  padding: 0 0.3rem
+  white-space: nowrap
+
+// Increase `padding` at larger viewport widths
+@if $responsive
+  +skeletor-media-query(palm)
+    code
+      padding: 0.1rem 0.3rem
+
+kbd
+  +skeletor-border-radius(4px)
+  +skeletor-box-shadow(0 1px 0 $light-gray, inset 0 0 0 1px $white)
+  background: $lightest-gray
+  border: 1px solid $light-gray
+  margin-bottom: 1px
+  padding: 0 0.3rem
+  position: relative
+  top: -1px
+  white-space: nowrap
+
+// Increase `padding` at larger viewport widths
+@if $responsive
+  +skeletor-media-query(palm)
+    kbd
+      padding: 0.1rem 0.3rem
+
+pre
+  +skeletor-box-shadow(inset 0 0 5px hsla(0, 0%, 0%, 0.6))
+  +skeletor-tab-size(4)
+  +skeletor-hyphens(none)
+  background: $black
+  color: $gray
+  overflow: auto
+  padding: 1rem
+  position: relative
+  white-space: pre
+  word-wrap: normal
+  word-break: normal
+
+// Reset above <code> styles when nested inside <pre> tags
+pre code
+  +skeletor-border-radius(0)
+  background: transparent
+  border: none
+  color: inherit
+  display: block
+  height: 100%
+  margin: 0
+  overflow: auto
+  padding: 0
+  white-space: pre
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: LISTS
+// -----------------------------------------------------------------------------
+// Where `margin-left` is concerned try and indent elements by a consistent amount.
+ul, ol, dd
+  +skeletor-rem(margin-left, (2 * $base-line-height))
+
+// Remove Vertical spacing from nested lists.
+li
+  > ul, ol
+    margin-bottom: 0
+
+dl dt
+  color: $black
+  font-weight: 700
+
+// Nested list-style types for ordered lists
+ol
+  list-style: decimal
+  ol
+    list-style: upper-alpha
+    ol
+      list-style: lower-roman
+      ol
+        list-style: lower-alpha
+
+nav ul, nav ol
+  list-style: none
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: TABLES
+// -----------------------------------------------------------------------------
+table
+  empty-cells: show
+  max-width: 100%
+  width: 100%
+
+table th, table td
+  overflow: visible
+  +skeletor-rem(padding, ($base-line-height / 3))
+  text-align: left
+  vertical-align: top
+  @if $responsive
+    +skeletor-media-query(palm)
+      +skeletor-rem(padding, ($base-line-height / 2))
+
+table th, table tfoot td
+  color: $black
+  font-weight: 700
+
+table thead th, table tfoot td
+  background-color: $lighter-gray
+
+caption
+  font-style: italic
+  font-weight: 700
+  +skeletor-rem(padding-bottom, ($base-line-height / 5))
+
+// Cell Alignments
+[colspan]
+  text-align: center
+
+[colspan="1"]
+  text-align: left
+
+[rowspan]
+  vertical-align: middle
+
+[rowspan="1"]
+  vertical-align: top
+
+// Basic table styling
+
+// Outer border only
+.table-stripes tbody > tr:nth-child(odd) > td
+  background-color: $lightest-gray
+
+.table-border
+  border: 1px solid $light-gray
+
+// Border for rows
+.table-border__rows
+  th, td
+    border-top: 1px solid $light-gray
+
+// Border for rows and columns
+.table-border__cells
+  th, td
+    border-left: 1px solid $light-gray
+    border-top: 1px solid $light-gray
+
+// Remove top border to avoid 'double' border on tables
+.table-border .table-border_cells, .table-border .table-border__rows
+  thead:first-child tr:first-child th, thead:first-child tr:first-child td
+    border-top: 0
+
+// Cleanup outside borders
+.table-border__cells
+  tr th:first-child, tr td:first-child
+    border-left: 0
+
+  tr:first-child th, thead:first-child tr:first-child th
+    border-top: 0
+
+.table-border__rows tr:last-child td
+  border-bottom: 1px solid $light-gray
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: FORMS
+// -----------------------------------------------------------------------------
+fieldset
+  +skeletor-rem(padding, $base-line-height)
+  //border: 0
+  //margin: 0
+
+label
+  display: block
+
+textarea
+  height: auto
+  resize: vertical
+
+select
+  //width: 100%
+
+#{$all-text-inputs}, textarea
+  +skeletor-rem(padding, $base-line-height)
+  +skeletor-vertical-spacing($base-line-height / 2)
+  +skeletor-transition(all 0.15s linear)
+  +skeletor-rgba(color, 0, 0, 0, 0.75)
+  background-color: #fff
+  border: 1px solid darken(#fff, 20%)
+  border-radius: 4px
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
+  width: 100%
+
+  &:focus
+    background-color: darken(#fff, 2%)
+    border-color: darken(#fff, 40%)
+    outline: none
+
+  &[disabled]
+    background-color: darken(#fff, 10%)