kickstart_rails 0.2.410970240580 → 0.3.411400890669

data/app/assets/stylesheets/kickstart_rails/components/_typography.sass

@@ -1,17 +1,19 @@
-=html-default
+=type-default
   font-family: $default-font
   font-size: $default-font-size
   font-size: calc(#{$default-font-size - 2} + #{$scalingFactor})
   line-height: $default-line-height
   line-height: calc(#{$default-line-height} + #{$scalingFactor})
 
+html 
+  color: map-get($black, lighter)
+
 ul
   margin-bottom: $space
 
 h1, h2, h3, h4, h5, h6, p
   margin: 0
   line-height: normal
-  color: $lighter-black
 
 p
   margin: 0
@@ -80,7 +82,7 @@ a
 
 =page-heading-default
   h1, h2, h3, h4, h5, h6
-    border-bottom: 1px solid $darker-white
+    border-bottom: 1px solid map-get($white, darker)
     padding-bottom: $space/2
 
 =xxl-heading-default
@@ -130,3 +132,10 @@ a
   margin:
     bottom: 0.5rem
   +heading-break
+
+// Lists
+
+=list-unstyled-default
+  padding: 0
+  margin: 0
+  list-style: none

data/app/assets/stylesheets/kickstart_rails/core/_base_components.sass

@@ -0,0 +1,17 @@
+// 
+// Base Components
+// ===============
+// These are the base components from which dependent components can extend.
+//
+
+// Components
+@import ../components/_alerts
+@import ../components/_buttons
+@import ../components/_forms
+@import ../components/_images
+@import ../components/_labels
+@import ../components/_modals
+@import ../components/_nav
+@import ../components/_progress
+@import ../components/_tables
+@import ../components/_tiles

data/app/assets/stylesheets/kickstart_rails/core/_components.sass

@@ -16,4 +16,5 @@
 @import ../components/_notifications
 @import ../components/_tables
 @import ../components/_tiles
+@import ../components/_tooltips
 @import ../components/_typography

data/app/assets/stylesheets/kickstart_rails/core/_dependent_components.sass

@@ -0,0 +1,12 @@
+//
+// Dependent Components
+// ====================
+// These components extend the core and base components.
+//
+
+// Components
+@import ../components/_growls
+@import ../components/_modals
+@import ../components/_notifications
+@import ../components/_tabs
+@import ../components/_tooltips

data/app/assets/stylesheets/kickstart_rails/core/_index.sass

@@ -2,5 +2,6 @@
 @import _icons
 @import _mixins
 @import _animations
-@import _components
 @import _grid
+@import _typography
+@import _root-element

data/app/assets/stylesheets/kickstart_rails/core/_mixins.sass

@@ -1,79 +1,6 @@
-=animation-delay($time)
-  animation-delay: $time
-  -webkit-animation-delay: $time
-  -moz-animation-delay: $time
+=alternate-headings
+  h1
+    +xs-heading
 
-=animation-duration($time)
-  animation-duration: $time
-  -webkit-animation-duration: $time
-  -moz-animation-duration: $time
-
-=animation-fill-mode($mode)
-  animation-fill-mode: $mode
-  -webkit-animation-fill-mode: $mode
-  -moz-animation-fill-mode: $mode
-
-=animation-name($name)
-  animation-name: $name
-  -webkit-animation-name: $name
-  -moz-animation-name: $name
-
-=animation-timing-function($fn)
-  animation-timing-function: $fn
-  -webkit-animation-timing-function: $fn
-  -moz-animation-timing-function: $fn
-
-=border-radius($radius)
-  border-radius: $radius
-  -webkit-border-radius: $radius
-  -moz-border-radius: $radius
-
-=box-shadow($prop1, $prop2: '')
-  @if $prop2 != ''
-    $prop2: ',' + $prop2
-  $propTotal: unquote($prop1 + $prop2)
-  box-shadow: $propTotal
-  -webkit-box-shadow: $propTotal
-  -moz-box-shadow: $propTotal
-
-=box-sizing($prop: border-box)
-  box-sizing: $prop
-  -webkit-box-sizing: $prop
-  -moz-box-sizing: $prop
-
-=transform($prop)
-  transform: $prop
-  -moz-transform: $prop
-  -webkit-transform: $prop
-
-=flex($type: flex)
-  display: -moz-box
-  display: -webkit-box
-  display: -webkit-flex
-  display: -ms-flexbox
-  display: $type
-
-=align-items
-  -webkit-align-items: flex-start
-  -moz-align-items: flex-start
-  align-items: flex-start
-
-=flex-wrap($kind: wrap)
-  -webkit-flex-wrap: $kind
-  -moz-flex-wrap: $kind
-  flex-wrap: $kind
-
-=justify-content($justification)
-  -webkit-justify-content: $justification
-  -moz-justify-content: $justification
-  justify-content: $justification
-
-=align-content($justification)
-  -webkit-align-content: $justification
-  -moz-align-content: $justification
-  align-content: $justification
-
-=align-items($justification)
-  -webkit-align-items: $justification
-  -moz-align-items: $justification
-  align-items: $justification 
+  h2, h3, h4, h5
+    +xxs-heading

data/app/assets/stylesheets/kickstart_rails/core/_root-element.sass

@@ -0,0 +1,16 @@
+/*
+ *  Root Element
+ *  =========
+ *  The root element is a base for several many elements in the library
+ *  To ensure consistent spacing when mixed into blocks.
+ */
+
+=root-element($size: 1)
+  padding: ($size * $size * map-get($rootElement, paddingV)) ($size * $size * map-get($rootElement, paddingV))
+  border-radius: 3px
+  border: 1px solid transparent
+  outline: none
+  margin-bottom: $space
+  @if $size != 1
+    font-size: #{$size}rem
+  line-height: $size * $default-line-height

data/app/assets/stylesheets/kickstart_rails/core/_typography.sass

@@ -0,0 +1,162 @@
+=type-default
+  font-family: $default-font
+  font-size: $default-font-size
+  font-size: calc(#{$default-font-size - 2} + #{$scalingFactor})
+  line-height: $default-line-height
+  line-height: calc(#{$default-line-height} + #{$scalingFactor})
+
+html 
+  color: map-get($black, lightest)
+
+ul
+  margin-bottom: $space
+
+h1, h2, h3, h4, h5, h6, p
+  margin: 0
+  line-height: normal
+
+p
+  margin: 0
+    bottom: $space
+
+a
+  text-decoration: none
+  color: $blue
+
+  &:hover
+    text-decoration: underline
+
+=pre-default
+  color: darken($blue, 25%)
+  border-radius: $space/5
+  padding: ($space/5)
+  font-family: monospace
+  word-break: break-all
+  word-wrap: break-word
+  border: 0px !important
+  margin: 0
+    bottom: $space
+
+=code-default
+  margin-bottom: 0px
+  padding: 0 (($space/5)/3)
+
+=p-default($content-optimized)
+  font-size: 1rem
+  margin-bottom: $space
+  line-height: $default-line-height
+
+  @if ($content-optimized)
+    font-size: 1.25rem
+    line-height: 1.85rem
+    margin-bottom: 2.5rem
+
+=hero-default
+  padding:
+    top: $space
+    top: 2vw
+    bottom: $space
+    bottom: 2vw
+  min-height: 450px
+  min-height: 35vw
+  background: $primary-color
+  margin-bottom: $space
+  box-shadow: inset 0px -30px 100px -20px hsla(0, 0%, 0%, 0.15), inset 0px 40px 90px -20px rgba(255, 255, 255, 0.15)
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+
+  > h1, > h2, > h3, > h4, > h5, > h6, > p
+    text-align: center
+    font-weight: 300
+
+  h1, h2, h3, h4, h5, h6, p
+    color: white
+
+  h1
+    +xxl-heading
+  h2
+    +xl-heading
+  h3
+    +lg-heading
+  h4
+    +md-heading
+  h5
+    +rg-heading
+  h6
+    +sm-heading 
+
+  > img
+    margin: 0px auto
+    display: block
+
+=heading-break
+  margin:
+    top: 2rem
+  &:first-child
+    margin-top: 0
+
+=page-heading-default
+  h1, h2, h3, h4, h5, h6
+    border-bottom: 1px solid map-get($white, darker)
+    padding-bottom: $space/2
+
+=xxl-heading-default
+  font-size: 3rem
+  margin:
+    bottom: 1.65rem
+  +heading-break
+
+=xl-heading-default
+  font-size: 2.7rem
+  margin:
+    bottom: 1.5rem
+  +heading-break
+
+=lg-heading-default
+  font-size: 2.4rem
+  margin:
+    bottom: 1.25rem
+  +heading-break
+
+=md-heading-default
+  font-size: 2.1rem
+  margin:
+    bottom: 1.15rem
+  +heading-break
+
+=rg-heading-default
+  font-size: 1.8rem
+  margin:
+    bottom: 1rem
+  +heading-break
+
+=sm-heading-default
+  font-size: 1.5rem
+  margin:
+    bottom: 0.85rem
+  +heading-break
+
+=xs-heading-default
+  font-size: 1.2rem
+  margin:
+    bottom: 0.7rem
+  +heading-break
+
+=xxs-heading-default
+  font-size: 0.9rem
+  margin:
+    bottom: 0.5rem
+  +heading-break
+
+=list-unstyled-default
+  padding: 0
+  margin: 0
+    bottom: $space
+  list-style: none
+
+=list-horizontal-default
+  > li
+    display: inline-block
+    margin-right: 5px

data/app/assets/stylesheets/kickstart_rails/docs.sass

@@ -38,7 +38,7 @@
     opacity: 0.8
 
 .docs-nav
-  +navbar($bleed-container: true, $background: $lightest-black)
+  +navbar($bleed-container: true, $background: map-get($black, lightest))
 
 // Colors
 // Kind of shitty, but there is a colors page that directly relies on this.
@@ -48,22 +48,22 @@
 
 .color-
   &black
-    background-color: $black
+    background-color: black
 
   &light-black
-    background-color: $light-black
+    background-color: map-get($black, light)
 
   &lighter-black
-    background-color: $lighter-black
+    background-color: map-get($black, lighter)
 
   &lightest-black
-    background-color: $lightest-black
+    background-color: map-get($black, lightest)
 
   &gray
-    background-color: $gray
+    background-color: gray
 
   &white
-    background-color: $white
+    background-color: white
 
   &yellow
     background-color: $yellow
@@ -75,12 +75,12 @@
   text-align: center
 
   .gray
-    background: $dark-white
+    background: map-get($white, dark)
 
 .example
   padding: $space
   margin-bottom: $space
-  background: $dark-white
+  background: map-get($white, dark)
 
   > *:last-child
     margin-bottom: 0
@@ -116,15 +116,18 @@ h1.example-
     width: 600px
     max-width: 95%
 
+  a
+    color: white
+
   form, table, .tile
     text-align: left
     max-width: 360px
     margin: 0px auto
-    color: $light-black
+    color: map-get($black, light)
 
   .tile
     h1
-      color: $light-black
+      color: map-get($black, light)
       font-weight: 400
       font-size: 1.1rem
 
@@ -134,14 +137,19 @@ h1.example-
   max-width: 600px
 
 // Iframes
-iframe
+iframe.animation
   max-width: 500px
   height: 200px
+  display: block
+  margin:
+    left: auto
+    right: auto
+    bottom: $space
 
 // Grid
 
 .example-column
-  background-color: $darkest-white
+  background-color: map-get($white, darkest)
   color: white
 
 // Modal