ZURB-foundation 2.1.3b

data/stylesheets/ZURB/_reveal.sass

@@ -0,0 +1,88 @@
+@import includes/settings
+@import includes/mixins
+@import includes/colors
+/* Reveal Modals */
+.reveal-modal-bg
+  position: fixed
+  height: 100%
+  width: 100%
+  background: #000
+  background: rgba(0,0,0,0.8)
+  z-index: 100
+  display: none
+  top: 0
+  left: 0
+
+.reveal-modal
+  visibility: hidden
+  top: 100px
+  left: 50%
+  margin-left: -300px
+  width: 520px
+  background: #eee image-url('misc/modal-gloss.png') no-repeat -200 -80
+  position: absolute
+  z-index: 101
+  padding: 30 40 34px
+  +border-radius(5px)
+  +box-shadow(0 0 10 rgba(0,0,0,0.4))
+  &.small
+    width: 200px
+    margin-left: -140px
+  &.medium
+    width: 400px
+    margin-left: -240px
+  &.large
+    width: 600px
+    margin-left: -340px
+  &.xlarge
+    width: 800px
+    margin-left: -440px
+  .close-reveal-modal
+    +font-size(22)
+    line-height: .5
+    position: absolute
+    top: 8px
+    right: 11px
+    color: #aaa
+    text-shadow: 0 -1px 1px rgba(0,0,0,0.6)
+    font-weight: bold
+    cursor: pointer
+  .row
+    min-width: 0
+
+/* Mobile */
+@media only screen and (device-width: 768px), (device-width: 800)
+  .reveal-modal-bg
+    position: absolute
+  .reveal-modal
+    &.small, &.medium, &.large, &.xlarge
+      width: 60%
+      top: 30%
+      left: 15%
+      margin-left: 0
+      padding: 5%
+      height: auto
+@media only screen and (max-width: 767px)
+  .reveal-modal-bg
+    position: absolute
+  .reveal-modal
+    &.small, &.medium, &.large, &.xlarge
+      width: 80%
+      top: 15%
+      left: 5%
+      margin-left: 0
+      padding: 5%
+      height: auto
+
+
+/* NOTES */
+/* Close button entity is × */
+	
+/* Example markup */
+/* <div id="myModal" class="reveal-modal"> */
+/* 	<h2>Awesome. I have it.</h2> */
+/* 	<p class="lead">Your couch.  I it's mine.</p> */
+/* 	<p>Lorem ipsum dolor sit amet...</p> */
+/* 	<a class="close-reveal-modal">&#215;</a> */
+/* </div> */
+

data/stylesheets/ZURB/_typography.sass

@@ -0,0 +1,129 @@
+@import includes
+
+/* Typography */
+h1,h2,h3,h4,h5,h6
+  color: #181818
+  font-weight: bold
+  line-height: 1.25
+  small
+    color: #777
+  a
+    font-weight: inherit
+h1
+  +font-size(46)
+  margin-bottom: 12px
+h2
+  +font-size(35)
+  margin-bottom: 9px
+h3
+  +font-size(28)
+  margin-bottom: 9px
+h4
+  +font-size(21)
+  margin-bottom: 3px
+h5
+  +font-size(18)
+  margin-bottom: 3px
+  font-weight: normal
+h6
+  +font-size(15)
+  font-weight: normal
+
+.subhead
+  color: #777
+  font-weight: 300
+  margin-bottom: 24px
+
+p
+  line-height: 17px
+  margin: 0 0 18px
+  img
+    margin: 0
+  &.lead
+    +font-size(18)
+    line-height: 24px
+
+em, i
+  font-style: italic
+  line-height: inherit
+strong, b
+  font-weight: bold
+  line-height: inherit
+small
+  font-size: 60%
+  line-height: inherit
+
+/* Blockquotes */
+blockquote
+  line-height: 20px
+  color: #777
+  margin: 0 0 18px
+  padding: 9px 20px 0 19px
+  border-left: 1px solid #ddd
+  p
+    line-height: 20px
+    color: #777
+  cite
+    display: block
+    +font-size(12)
+    color: #555
+    &:before
+      content: "/2014 /0020"
+    a, a:visited
+      color: #555
+
+hr
+  border: solid #ddd
+  border-width: 1px 0 0
+  clear: both
+  margin: 12px 0 18px
+  height: 0
+
+abbr, acronym
+  text-transform: uppercase
+  font-size: 90%
+  color: #222
+  border-bottom: 1px solid #ddd
+  cursor: help
+abbr
+  text-transform: none
+  
+/* Print styles. Inlined to avoid required HTTP connection: */ /* www.phpied.com/delay-loading-your-print-css/ */
+/* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */
+.print-only
+  display: block !important
+@media print
+  *
+    background: transparent !important
+    color: $black !important 
+    text-shadow: none !important
+    filter: none !important
+    -ms-filter: none !important
+  p
+    a, a:visited
+      color: #444 !important
+      text-decoration: underline
+    a[href]:after
+      content: " (" attr(href) ")"
+  abbr[title]:after
+    content: " (" attr(href) ")"
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after
+    content: ""
+  pre, blockquote
+    border: solid 1px #999
+    page-break-inside: avoid
+  thead
+    display: table-header-group
+  tr, img
+    page-break-inside: avoid
+  @page
+    margin: 0.5cm
+  p, h2, h3
+    orphans: 3
+    widows: 3
+  h2, h3
+    page-break-after: avoid
+  .hide-on-print
+    display: none !important
+  .print-only
+    display: block !important

data/stylesheets/ZURB/_ui.sass

@@ -0,0 +1,447 @@
+@import includes/settings
+@import includes/mixins
+@import includes/colors
+/* Table of Content */
+/* :: Buttons */
+/* :: Notices/Alerts */
+/* :: tabs */
+/* :: Pagination */
+/* :: Lists */
+/* :: Panels */
+/* :: Nav */
+/* :: Video */
+/* :: Microformats */
+
+/* Buttons */
+.button
+  background: $blue
+  display: inline-block
+  text-align: center
+  padding: 9px 34px 11px
+  color: $white
+  text-decoration: none
+  font-weight: bold
+  +HelveticaFontStack
+  line-height: 1
+  position: relative
+  cursor: pointer
+  border: none
+  &.nice
+    background-color: $blue
+    +background-image(linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 100%))
+    +box-shadow(0 1px 0 rgba(255,255,255,0.5) inset)
+    text-shadow: 0 -1px 1px rgba(0,0,0,0.28)
+    border: solid 1px darken($blue, 7%)
+    +transition-property(background-color)
+    +transition-duration(.15s)
+    +transition-timing-function(ease-in-out)
+  &.radius
+    +border-radius(3px)
+  &.round
+    +border-radius(1000)
+  &.full-width
+    width: 100%
+    padding-left: 0 !important
+    padding-right: 0 !important
+    text-align: center
+  &.left-align
+    text-align: left
+    text-indent: 12px
+
+input[type=submit].button
+  -webkit-appearance: none
+
+/* Sizes */
+.button
+  &.small
+    +font-size(11)
+    padding: 8px 20px 10px
+    width: auto
+  &.medium
+    +font-size(13)
+    width: auto
+  &.large
+    +font-size(18)
+    padding: 11px 48px 13px
+    width: auto
+/* Colors */
+.button
+  &.blue
+    background-color: $blue
+  &.red
+    background-color: $red
+  &.white
+    background-color: #e9e9e9
+    color: #333
+  &.black
+    background-color: $black
+/* Nice Colors */
+.nice
+  &.button
+    &.blue
+      border: solid 1px darken($blue, 7%)
+    &.red
+      border: solid 1px darken($red, 7%)
+    &.white
+      border: solid 1px darken($white, 14%)
+      text-shadow: none !important
+    &.black
+      border: solid 1px darken($black, 7%)
+/* Hovers */
+.button
+  &:hover, &:focus
+    background-color: darken($blue, 5%)
+    color: #fff
+  &.blue
+    &:hover, &:focus
+      background-color: darken($blue, 5%)
+  &.red
+    &:hover, &:focus
+      background-color: darken($red, 5%)
+  &.white
+    &:hover, &:focus
+      background-color: darken($white, 12%)
+      color: #333
+  &.black
+    &:hover, &:focus
+      background-color: darken($black, 5%)
+
+/* Disabled */
+.button.disabled, .button[disabled]
+  +opacity(0.6)
+  cursor: default
+
+/* Alerts */
+div.alert-box
+  display: block
+  padding: 6px 7px
+  font-weight: bold
+  +font-size(13)
+  background: #eee
+  border: 1px solid rgba(0,0,0,0.1)
+  margin-bottom: 12px
+  +border-radius(3px)
+  text-shadow: 0 1px rgba(255,255,255,0.9)
+  position: relative
+  &.success
+    background-color: #7fae00
+    color: $white
+    text-shadow: 0 -1px rgba(0,0,0,0.3)
+  &.warning
+    background-color: #c08c00
+    color: $white
+    text-shadow: 0 -1px rgba(0,0,0,0.3)
+  &.error
+    background-color: #c00000
+    color: $white
+    text-shadow: 0 -1px rgba(0,0,0,0.3)
+  a.close
+    color: $black
+    position: absolute
+    right: 4px
+    top: 0
+    +font-size(18)
+    +opacity(0.2)
+    padding: 4px
+    &:hover, &:focus
+      +opacity(0.4)
+
+/* Tabs */
+dl.tabs
+  display: block
+  margin: 0 0 20px
+  padding: 0
+  height: 30px
+  border-bottom: solid 1px #ddd
+  dt
+    display: block
+    width: auto
+    height: 30px
+    padding: 0 9px 0 20px
+    line-height: 30px
+    float: left
+    color: #999
+    +font-size(11)
+    text-transform: uppercase
+    cursor: default
+    &:first-child
+      padding: 0 9px 0 0
+  dd
+    display: block
+    width: auto
+    height: 30px
+    padding: 0
+    float: left
+    a
+      display: block
+      width: auto
+      height: 29px
+      padding: 0 9px
+      line-height: 30
+      border: solid 1px #ddd
+      margin: 0 -1px 0 0
+      color: #555
+      background: #eee
+      &.active
+        background: #fff
+        border-width: 1px 1px 0 1px
+        height: 30px
+.nice
+  &.tabs
+    border-bottom: solid 1px #eee
+    margin: 0 0 30px
+    height: 43px
+    dd
+      a
+        padding: 7px 18px 9px
+        +font-size(15)
+        color: #555
+        background: none
+        border: none
+        &.active
+          font-weight: bold
+          color: #333
+          background: #fff
+          border-left: 1px solid #eee
+          border-right: 1px solid #eee
+          border-top: 1px solid #00a6fc
+          margin: 0 10px
+          position: relative
+          top: -5px
+      &:first-child
+        a.active
+          margin-left: 0
+dl.tabs.vertical
+  height: auto
+dl.tabs.vertical dt, dl.tabs.vertical dd, dl.nice.tabs.vertical dt, dl.nice.tabs.vertical dd
+  float: none
+  height: auto
+dl.tabs.vertical dd a
+  display: block
+  width: auto
+  height: auto
+  padding: 15px 20px
+  line-height: 1
+  border: solid 0 #ccc
+  border-width: 1px 1px 0
+  margin: 0
+  color: #555
+  background: #eee
+  +font-size(15)
+  &.active
+    height: auto
+    margin: 0
+    border-width: 1px 0 0
+    background: $white
+.nice.tabs.vertical
+  border-bottom: solid 1px #eee
+  height: auto
+  dd
+    a
+      padding: 15px 20px
+      background: $white
+      border: none
+      border-left: 1px solid #eee
+      border-right: 1px solid #eee
+      border-top: 1px solid #eee
+      &.active
+        border: none
+        background: $blue
+        color: $white
+        margin: 0
+        position: static
+        top: 0
+        height: auto
+    &:first-child
+      margin-left: 0
+dl.tabs.vertical
+  height: auto
+  dt,
+
+ul.tabs-content
+  margin: 0
+  display: block
+  &>li
+    display: none
+    &.active
+      display: block
+      
+dl.contained, dl.nice.contained
+  margin-bottom: 0
+dl.contained.tabs dd a
+  padding: 0 14px
+dl.nice.contained.tabs dd a
+  padding: 7px 18px 9px
+  
+ul.contained.tabs-content
+  padding: 0
+  &>li
+    padding: 20px
+    border: solid 0 #ddd
+    border-width: 0 1px 1px 1px
+ul.nice.contained.tabs-content
+  &>li
+    border-color: #eee
+  
+/* Pagination */
+ul.pagination
+  display: block
+  height: 24px
+  margin-left: -5px
+  li
+    float: left
+    display: block
+    height: 24px
+    color: #999
+    +font-size(15)
+    margin-left: 5px
+    a
+      display: block
+      padding: 6px 7px 4px
+      color: #555
+    &.current, &:hover, &:focus
+      a
+        border-bottom: solid 2px #00a6fc
+        color: #141414
+    &.unavailable
+      a
+        cursor: default
+        color: #999
+      &:hover, &:focus
+        a
+          border-bottom: none
+
+/* Lists */
+ul.nice, ol.nice
+  list-style: none
+  margin: 0
+  li
+    padding-left: 13px
+    position: relative
+ul.nice li span.bullet, ol.nice li span.number
+  position: absolute
+  left: 0
+  top: 0
+  color: #ccc
+
+/* Panels */
+div.panel 
+  padding: 20px 20px 2px 20px
+  background-color: #efefef
+  +background-image(linear-gradient(#ffffff 0%, #f4f4f4 100%))
+  +box-shadow(0 2px 5px rgba(0,0,0,0.15))
+  margin: 0 0 20px 0
+  
+/* Nav Bar with Dropdowns */
+.nav-bar
+  height: 45px
+  background: #fff
+  margin-top: 20px
+  border: 1px solid #ddd
+  &>li
+    float: left
+    display: block
+    position: relative
+    padding: 0
+    margin: 0
+    border-right: 1px solid #ddd
+    line-height: 45px
+    .flyout
+      display: none
+    &>a
+      position: relative
+      +font-size(15)
+      padding: 0 20px
+      display: block
+      text-decoration: none
+      border-right: 1px solid #ddd
+    &>input
+      margin: 0 16px
+    ul
+      margin-bottom: 0
+    li
+      line-height: 1.3
+    &:hover
+      .flyout
+        display: block
+      &>a
+        color: #141414
+        z-index: 2
+        &:after
+          border-top-color: #141414
+    &.has-flyout
+      &>a
+        padding-right: 36px
+        &:after
+          content: ""
+        width: 0
+        height: 0 
+        border-left: 4px solid transparent
+        border-right: 4px solid transparent
+        border-top: 4px solid #2a85e8
+        display: block
+        position: absolute
+        right: 18px
+        bottom: 20px
+          
+.flyout
+  background: #fff
+  margin: 0
+  padding: 20px
+  border: 1px solid #ddd
+  position: absolute
+  top: 45px
+  left: -1px
+  width: 400px
+  z-index: 10
+  &.small
+    width: 200px
+  &.large
+    width: 600px
+  &.right
+    left: auto
+    right: 0
+  p:last-child
+    margin-bottom: 0
+
+/* Video */
+/* Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ */
+.video
+  position: relative
+  padding-top: 25px
+  padding-bottom: 67.5%
+  height: 0
+  margin-bottom: 16px
+  overflow: hidden
+  &.widescreen
+    padding-bottom: 57.25%
+  &.vimeo
+    padding-top: 0
+  iframe, object, embed
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+
+/* Microformats */
+/* hcard */
+ul.vcard
+  display: inline-block
+  margin: 0 0 12px 0
+  border: 1px solid #ddd
+  padding: 10px
+  li
+    margin: 0
+    display: block
+    &.fn
+      font-weight: bold
+      +font-size(15)
+p.vevent span.summary
+  font-weight: bold
+p.vevent abbr 
+  cursor: default
+  text-decoration: none
+  font-weight: bold
+  border: none
+  padding: 0 1px