kickstart_rails 3.0.6 → 3.0.7

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

@@ -9,7 +9,8 @@
   > *:last-child
     margin-bottom: 0
 
-  +alternate-headings
+  h1
+    +heading-xs
 
   a:not([role=button])
     color: inherit

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

@@ -0,0 +1 @@
+=growl-default

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

@@ -12,7 +12,8 @@
     + img, + figure
       margin-left: $space/2
 
-    +alternate-headings
+  h1
+    +heading-xs
 
   > img, > figure
     + :not(img)

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

@@ -14,12 +14,8 @@
     margin: 5px auto
     max-width: 300px
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15)
-    animation-duration: 0.25s
-    animation-delay: 0.2s
-    animation-timing-function: ease
-    animation-fill-mode: both
+    +fadeInDown
     z-index: 1000
-    animation-name: fadeInDown
 
     &[data-type="success"]
       background-color: map-get($colors, green)

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

@@ -1,4 +1,4 @@
-@keyframes fadeInDown
+@keyframes fadeInDown 
   0%
     opacity: 0
     transform: translateY(-20px)

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

@@ -10,4 +10,3 @@
 @import ../components/_tiles
 @import ../components/_tooltips
 @import ../components/_forms
-@import ../core/_direct-apply.sass

data/app/assets/stylesheets/kickstart_rails/core/_direct-apply.sass

@@ -2,7 +2,7 @@
 // ===================
 // Regardless of semantic or non-semantic usage, some styles
 // Should be applied directly to classes or elements no matter
-// what. This include should be included near the end of the 
+// what. This include should be included near the end of the
 // import chain but before kickstart.sass to accomplish this.
 
 // Buttons
@@ -18,6 +18,31 @@ input[type="file"]::-webkit-file-upload-button
 
 +dropdown_menu
 
+// Growls
+// ------
+
+.growl_container
+  position: fixed
+  top: 0
+  right: 0
+  padding: $space/2
+  z-index: 1000
+  width: 300px
+  overflow: auto
+  max-height: 100vh
+
+  .growl
+    box-shadow: 0px 0px $space/2 rgba(0, 0, 0, 0.5)
+    transition: all 0.5s
+
+    &.show, &.hide
+      +fadeInDown
+
+    &.hide
+      animation-direction: reverse
+
+    +growl
+
 // Tooltips
 // --------
 
@@ -69,7 +94,7 @@ input[type="file"]::-webkit-file-upload-button
     &:after, &:before
       opacity: 1
 
-    &:after 
+    &:after
       transform: translateY(-8px)
       transition: transform 0.25s
 

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

@@ -21,10 +21,21 @@ $tablet-landscape: 960px
 $desktop: 1024px
 $large-monitor: 1200px
 $xl-monitor: 1400px
+$xxl-monitor: 1800px
 
 $grid-columns: 12
 $grid-gutter: 15px
 
+// Grid breakpoints
+// ----------------
+// Critical breakpoints where offsets and alternative grid styles will
+// be displayed
+
+$showOffsets:        $tablet-landscape // Offsets render at this breakpoint
+$showColumns:        $phablet          // Allow < 12 columns
+$showPartialColumns: $tablet           // Simpler alternative to actual columns
+$showFullColumns:    $desktop          // Actual user-defined column measurement
+
 =container
   margin: 0px auto
   display: block
@@ -33,10 +44,10 @@ $grid-gutter: 15px
     left: 25px
     right: 25px
 
-  @media screen and (min-width: $tablet-landscape)
+  @media screen and (min-width: $showOffsets)
     max-width: $desktop
 
-  @media screen and (min-width: $large-monitor)
+  @media screen and (min-width: $xxl-monitor)
     max-width: $large-monitor
 
 =row
@@ -46,72 +57,84 @@ $grid-gutter: 15px
   align-items: stretch
   flex-wrap: wrap
 
-=set-offset($columns, $type: 'push')
-  @if $type == 'push'
-    @media screen and (min-width: $desktop)
-      margin-right: calc(#{percentage($columns/$grid-columns)} + #{$grid-gutter})
-  @else if $type == 'pull'
-    @media screen and (min-width: $desktop)
-      margin-left: calc(#{percentage($columns/$grid-columns)} + #{$grid-gutter})
+=measure-columns($columns, $prop)
+  // TODO: DRY this somehow?
+  @if $prop == "width"
+    width: calc(#{percentage($columns/$grid-columns)} - #{(($grid-columns/$columns - 1) * $grid-gutter)/($grid-columns/$columns)})
 
-=push($columns)
-  @if $columns == "half"
-    +set-offset(6)
-  @else if $columns == "third"
-    @media screen and (min-width: $tablet)
-      +set-offset(6)
-    +set-offset(4)
-  @else if $columns == "twothirds"
-    @media screen and (min-width: $tablet)
-      +set-offset(6)
-    +set-offset(4)
-  @else
-    +set-offset($columns)
+  @else if $prop == "margin-left"
+    margin-left: calc(#{percentage($columns/$grid-columns)} - #{(($grid-columns/$columns - 1) * $grid-gutter)/($grid-columns/$columns) - $grid-gutter})
+
+  @else if $prop == "margin-right"
+    margin-right: calc(#{percentage($columns/$grid-columns)} - #{(($grid-columns/$columns - 1) * $grid-gutter)/($grid-columns/$columns) - $grid-gutter})
+
+=set-offset($columns, $side: "margin-right")
+  // Never show leftes and rights on mobile
+  // +measure-columns(0, $side)
 
-=pull($columns)
+  // Look for keywords
   @if $columns == "half"
-    +set-offset(6, 'pull')
+    @media screen and (min-width: $showPartialColumns)
+      +measure-columns(6, $side)
+
   @else if $columns == "third"
-    @media screen and (min-width: $tablet)
-      +set-offset(6, 'pull')
-    +set-offset(4, 'pull')
+    @media screen and (min-width: $showPartialColumns)
+      +measure-columns(6, $side)
+
+    @media screen and (min-width: $showFullColumns)
+      +measure-columns(4, $side)
+
   @else if $columns == "twothirds"
-    @media screen and (min-width: $tablet)
-      +set-offset(6, 'pull')
-    +set-offset(4, 'pull')
+    @media screen and (min-width: $showPartialColumns)
+      +measure-columns(6, $side)
+
+    @media screen and (min-width: $showFullColumns)
+      +measure-columns(8, $side)
+
   @else
-    +set-offset($columns, 'pull')
+    @media screen and (min-width: $showPartialColumns)
+      +measure-columns($columns, $side)
 
-=set-column($columns, $pull, $push)
-  width: 100%
+// Convenience mixins
+=right($columns)
+  +set-offset($columns, "margin-right")
+=left($columns)
+  +set-offset($columns, "margin-left")
+
+=set-column($columns, $right, $left)
+  +measure-columns($columns, "width")
+  clear: none
   display: block
   margin-left: 0
 
-  @media screen and (min-width: $phablet)
-    width: calc(#{percentage($columns/$grid-columns)} - #{$grid-gutter})
-    clear: none
+  @if $right != 0
+    +set-offset($right, "margin-right")
 
-  @if $pull != 0
-    +pull($pull)
+  @if $left != 0
+    +set-offset($left, "margin-left")
 
-  @if $pull != 0
-    +push($push)
-
-=column($columns: 12, $pull: 0, $push: 0)
+=column($columns: 12, $right: 0, $left: 0)
+  // Everything is a full width column on mobile by default
   +set-column(12, 0, 0)
+
+  // Look for keywords
   @if $columns == "half"
-    @media screen and (min-width: $tablet)
-      +set-column($grid-columns/2, $pull, $push)
+    @media screen and (min-width: $showPartialColumns)
+      +set-column($grid-columns/2, $right, $left)
+
   @else if $columns == "third"
-    @media screen and (min-width: $phablet)
-      +set-column($grid-columns/2, $pull, $push)
-    @media screen and (min-width: $tablet)
-      +set-column($grid-columns/3, $pull, $push)
+    @media screen and (min-width: $showPartialColumns)
+      +set-column($grid-columns/2, $right, $left)
+    @media screen and (min-width: $showFullColumns)
+      +set-column($grid-columns/3, $right, $left)
+
   @else if $columns == "twothirds"
-    @media screen and (min-width: $phablet)
-      +set-column($grid-columns/2, $pull, $push)
-    @media screen and (min-width: $tablet)
-      +set-column(($grid-columns * 2/3), $pull, $push)
+    @media screen and (min-width: $showPartialColumns)
+      +set-column($grid-columns/2, $right, $left)
+    @media screen and (min-width: $showFullColumns)
+      +set-column(($grid-columns * 2/3), $right, $left)
+
   @else
-    @media screen and (min-width: $tablet)
-      +set-column($columns, $pull, $push)
+    // No keywords found, pass in values.
+    @media screen and (min-width: $showColumns)
+      +set-column($columns, $right, $left)

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

@@ -1,10 +1,3 @@
-=alternate-headings
-  h1
-    +heading-xs
-
-  h2, h3, h4, h5
-    +xheading-xs
-
 =text-inputs
   input[type="date"],
   input[type="datetime"],
@@ -20,3 +13,11 @@
   input[type="url"],
   input[type="week"]
     @content
+
+=fadeInDown
+  animation-duration: 0.25s
+  animation-delay: 0.2s
+  animation-timing-function: ease
+  animation-fill-mode: both
+  animation-name: fadeInDown
+

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

@@ -148,7 +148,7 @@ a
     bottom: 0.7rem
   +heading-break
 
-=xheading-xs-default
+=heading-xxs-default
   font-size: 0.9rem
   margin:
     bottom: 0.5rem

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

@@ -19,13 +19,13 @@
     +heading-xs
 
   h2
-    +xheading-xs
+    +heading-xxs
 
 .fullpane
   +column(12)
 
   @media screen and (min-width: $tablet-landscape)
-    +column(8, 2)
+    +column(8, 2, 2)
 
 .main-navigation
   +navbar($bleed-container: true)
@@ -105,7 +105,7 @@ h1.example-
   &xs
     +heading-xs
   &xxs
-    +xheading-xs
+    +heading-xs
 
 .if-jquery, .ifnot-jquery, .if-semantic, .ifnot-semantic
   display: none

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

@@ -35,6 +35,14 @@
 .alert
   +alert
 
+  &.alert-red
+    background: map-get($colors, red)
+  &.alert-green
+    background: map-get($colors, green)
+  &.alert-yellow
+    background: map-get($colors, yellow)
+    color: $default-font-color
+
 // BUTTONS
 // -------
 .button
@@ -161,35 +169,35 @@
   +column('twothirds')
 
 [class^="col"]
-  // Pulls
+  // Left offsets
   @each $screen in '', 'xs-', 'sm-', 'rg-', 'md-', 'lg-', 'xl-'
-    &.col-pull-#{$screen}third
-      +pull('third')
+    &.col-left-#{$screen}third
+      +left('third')
 
-    &.col-push-#{$screen}twothirds
-      +pull('twothirds')
+    &.col-left-#{$screen}twothirds
+      +left('twothirds')
 
-    &.col-push-#{$screen}half
-      +pull('half')
+    &.col-left-#{$screen}half
+      +left('half')
 
     @for $i from 1 through 12
-      &.col-pull-#{$screen}#{$i}
-        +pull($i)
+      &.col-left-#{$screen}#{$i}
+        +left($i)
 
-  // Pushes
+  // Right offsets
   @each $screen in '', 'xs-', 'sm-', 'rg-', 'md-', 'lg-', 'xl-'
-    &.col-push-#{$screen}third
-      +push('third')
+    &.col-right-#{$screen}third
+      +right('third')
 
-    &.col-push-#{$screen}twothirds
-      +push('twothirds')
+    &.col-right-#{$screen}twothirds
+      +right('twothirds')
 
-    &.col-push-#{$screen}half
-      +push('half')
+    &.col-right-#{$screen}half
+      +right('half')
 
     @for $i from 1 through 12
-      &.col-push-#{$screen}#{$i}
-        +push($i)
+      &.col-right-#{$screen}#{$i}
+        +right($i)
 
 // IMAGES
 // ------
@@ -311,7 +319,7 @@ table
   +heading-xs
 
 .xxs
-  +xheading-xs
+  +heading-xxs
 
 .readable
   +p(true)

data/app/assets/stylesheets/kickstart_rails/themes/_default.sass

@@ -101,8 +101,8 @@ pre
 =heading-xs
   +heading-xs-default
 
-=xheading-xs
-  +xheading-xs-default
+=heading-xxs
+  +heading-xxs-default
 
 h1, h2, h3, h4, h5, h6
   font-family: $heading-font-family
@@ -123,7 +123,7 @@ h5
   +heading-xs
 
 h6
-  +xheading-xs
+  +heading-xxs
 
 =type
   +type-default
@@ -227,6 +227,11 @@ hr
 =form_group($orientation: 'vertical')
   +form_group-default($orientation)
 
+// Growls
+// ------
+
+=growl
+  +growl-default
 
 // Modals
 // ------
@@ -252,4 +257,5 @@ hr
 .status-bar
   +statusBar()
 
+@import ../core/_direct-apply.sass
 @import ../vendor/_index

data/lib/kickstart_rails/version.rb

@@ -1,3 +1,3 @@
 module Kickstart_rails
-  VERSION = "3.0.6"
+  VERSION = "3.0.7"
 end