kickstart_rails 0.3.411737840873 → 3.0.6

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

@@ -1,55 +1,3 @@
-=tooltip_base
-  margin-bottom: 0
-  position: absolute
-  display: block
-  opacity: 0
-  bottom: 100%
-  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25)
-  pointer-events: none
-  max-width: 350px
-  min-width: 100px
-  text-align: center
-  transition: all 0.25s
-
-=tooltip_arrow
-  border-top-style: solid
-  border-top-width: 10px
-  border-left: 10px solid transparent
-  border-right: 10px solid transparent
-  width: 0px
-  height: 0px
-  content: ' '
-  display: block
-  background: transparent
-  position: absolute
-  left: 50%
-  margin-left: -8px
-  opacity: 0
-
-[data-ks-tooltip]
-  position: relative
-
-  &:after
-    content: attr(data-ks-tooltip)
-    +label($primary-color)
-    +tooltip_base
-    transform: translateY(0px)
-    z-index: 10
-
-  &:before
-    +tooltip_arrow
-    border-top-color: $primary-color
-    bottom: 100%
-    z-index: 100
-
-  &:hover
-    &:after, &:before
-      opacity: 1
-
-    &:after 
-      transform: translateY(-8px)
-      transition: transform 0.25s
-
 =tooltip_trigger-default($background-color: map-get($colors, blue))
   position: relative
   display: inline-block
@@ -57,54 +5,7 @@
 
   .tooltip
     +label($background-color)
-    +tooltip_base
-    left: -30px
-    right: -30px
-    margin: 10px auto
-    transform: translateY(8px)
-    z-index: 10
-
-    &:after
-      +tooltip_arrow
-      top: 100%
-
-    &.tooltip-bottom
-      top: 100%
-      bottom: auto
-
-      &:after
-        bottom: 100%
-        top: auto
-        transform: rotate(180deg)
-
-    &.tooltip-left
-      right: 100%
-      left: auto
-
-      &:after
-        transform: rotate(-90deg)
-        left: 100%
-
-    &.tooltip-right
-      left: 100%
-      right: auto
-
-      &:after
-        transform: rotate(90deg)
-        left: auto
-        right: 100%
-        margin:
-          left: 0
-          right: -8px
-
-    &.tooltip-right, &.tooltip-left
-      top: 0
-      bottom: auto
-      margin: 0
-
-      &:after
-        top: 8px
-
+  
   &:hover
     [data-ks-tooltip]
       &:after, &:before

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

@@ -85,49 +85,49 @@ a
     border-bottom: 1px solid map-get($white, darker)
     padding-bottom: $space/2
 
-=xxl-heading-default
+=heading-xxl-default
   font-size: 3rem
   margin:
     bottom: 1.65rem
   +heading-break
 
-=xl-heading-default
+=heading-xl-default
   font-size: 2.7rem
   margin:
     bottom: 1.5rem
   +heading-break
 
-=lg-heading-default
+=heading-lg-default
   font-size: 2.4rem
   margin:
     bottom: 1.25rem
   +heading-break
 
-=md-heading-default
+=heading-md-default
   font-size: 2.1rem
   margin:
     bottom: 1.15rem
   +heading-break
 
-=rg-heading-default
+=heading-rg-default
   font-size: 1.8rem
   margin:
     bottom: 1rem
   +heading-break
 
-=sm-heading-default
+=heading-sm-default
   font-size: 1.5rem
   margin:
     bottom: 0.85rem
   +heading-break
 
-=xs-heading-default
+=heading-xs-default
   font-size: 1.2rem
   margin:
     bottom: 0.7rem
   +heading-break
 
-=xxs-heading-default
+=xheading-xs-default
   font-size: 0.9rem
   margin:
     bottom: 0.5rem

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

@@ -14,3 +14,4 @@
 @import ../components/_nav
 @import ../components/_progress
 @import ../components/_tables
+@import ../components/_dropdown_menu

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

@@ -15,3 +15,123 @@ input[type="button"],
 
 input[type="file"]::-webkit-file-upload-button
   +button
+
++dropdown_menu
+
+// Tooltips
+// --------
+
+=tooltip_base
+  margin-bottom: 0
+  position: absolute
+  display: block
+  opacity: 0
+  bottom: 100%
+  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25)
+  pointer-events: none
+  max-width: 350px
+  min-width: 100px
+  text-align: center
+  transition: all 0.25s
+
+=tooltip_arrow
+  border-top-style: solid
+  border-top-width: 10px
+  border-left: 10px solid transparent
+  border-right: 10px solid transparent
+  width: 0px
+  height: 0px
+  content: ' '
+  display: block
+  background: transparent
+  position: absolute
+  left: 50%
+  margin-left: -8px
+  opacity: 0
+
+[data-ks-tooltip]
+  position: relative
+
+  &:after
+    content: attr(data-ks-tooltip)
+    +label($primary-color)
+    +tooltip_base
+    transform: translateY(0px)
+    z-index: 10
+
+  &:before
+    +tooltip_arrow
+    border-top-color: $primary-color
+    bottom: 100%
+    z-index: 100
+
+  &:hover
+    &:after, &:before
+      opacity: 1
+
+    &:after 
+      transform: translateY(-8px)
+      transition: transform 0.25s
+
+  // Positioning
+
+  &[data-ks-tooltip-position="bottom"]
+    &:after
+      top: 100%
+      bottom: auto
+      margin-top: 15px
+      transform: translateY(-16px)
+
+    &:before
+      transform: rotate(180deg)
+      top: 100%
+      bottom: auto
+
+.tooltip
+  +tooltip_base
+  left: -30px
+  right: -30px
+  margin: 10px auto
+  transform: translateY(8px)
+  z-index: 10
+
+  &:after
+    +tooltip_arrow
+    top: 100%
+
+  &.tooltip-bottom
+    top: 100%
+    bottom: auto
+
+    &:after
+      bottom: 100%
+      top: auto
+      transform: rotate(180deg)
+
+  &.tooltip-left
+    right: 100%
+    left: auto
+
+    &:after
+      transform: rotate(-90deg)
+      left: 100%
+
+  &.tooltip-right
+    left: 100%
+    right: auto
+
+    &:after
+      transform: rotate(90deg)
+      left: auto
+      right: 100%
+      margin:
+        left: 0
+        right: -8px
+
+  &.tooltip-right, &.tooltip-left
+    top: 0
+    bottom: auto
+    margin: 0
+
+    &:after
+      top: 8px

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

@@ -1,4 +1,18 @@
-// 1/2 The snippet
+// Still playing with this
+  $mobile: (
+    default: 360px,
+    large: 480px,
+    larger: 600px,
+    largest: 768px
+  )
+
+//
+  $display: (
+    smallest: 960px,
+    smaller: 1024px,
+    small: 1200px,
+    default: 1400px
+  )
 
 $phone: 360px
 $phablet: 480px
@@ -32,13 +46,41 @@ $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})
+
 =push($columns)
-  @media screen and (min-width: $desktop)
-    margin-right: percentage($columns/$grid-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)
 
 =pull($columns)
-  @media screen and (min-width: $desktop)
-    margin-left: percentage($columns/$grid-columns)
+  @if $columns == "half"
+    +set-offset(6, 'pull')
+  @else if $columns == "third"
+    @media screen and (min-width: $tablet)
+      +set-offset(6, 'pull')
+    +set-offset(4, 'pull')
+  @else if $columns == "twothirds"
+    @media screen and (min-width: $tablet)
+      +set-offset(6, 'pull')
+    +set-offset(4, 'pull')
+  @else
+    +set-offset($columns, 'pull')
 
 =set-column($columns, $pull, $push)
   width: 100%
@@ -49,27 +91,27 @@ $grid-gutter: 15px
     width: calc(#{percentage($columns/$grid-columns)} - #{$grid-gutter})
     clear: none
 
-  @if $pull > 0
+  @if $pull != 0
     +pull($pull)
 
-  @if $push > 0
+  @if $pull != 0
     +push($push)
 
 =column($columns: 12, $pull: 0, $push: 0)
   +set-column(12, 0, 0)
   @if $columns == "half"
     @media screen and (min-width: $tablet)
-      +set-column($grid-columns/2, 0, 0)
+      +set-column($grid-columns/2, $pull, $push)
   @else if $columns == "third"
     @media screen and (min-width: $phablet)
-      +set-column($grid-columns/2, 0, 0)
+      +set-column($grid-columns/2, $pull, $push)
     @media screen and (min-width: $tablet)
-      +set-column($grid-columns/3, 0, 0)
+      +set-column($grid-columns/3, $pull, $push)
   @else if $columns == "twothirds"
     @media screen and (min-width: $phablet)
-      +set-column($grid-columns/2, 0, 0)
+      +set-column($grid-columns/2, $pull, $push)
     @media screen and (min-width: $tablet)
-      +set-column(($grid-columns * 2/3), 0, 0)
+      +set-column(($grid-columns * 2/3), $pull, $push)
   @else
     @media screen and (min-width: $tablet)
       +set-column($columns, $pull, $push)

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

@@ -1,9 +1,9 @@
 =alternate-headings
   h1
-    +xs-heading
+    +heading-xs
 
   h2, h3, h4, h5
-    +xxs-heading
+    +xheading-xs
 
 =text-inputs
   input[type="date"],

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

@@ -7,7 +7,7 @@
 
 =root-element($size: 1)
   padding: ($size * $size * map-get($rootElement, paddingV)) ($size * $size * map-get($rootElement, paddingV))
-  border-radius: 3px
+  border-radius: map-get($rootElement, border-radius)
   border: 1px solid transparent
   outline: none
   margin-bottom: $space

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

@@ -52,7 +52,7 @@ a
   @if ($content-optimized)
     font-size: 1.25rem
     line-height: 1.85rem
-    margin-bottom: 2.5rem
+    margin-bottom: 1.25rem
 
 =hero-default
   padding:
@@ -79,17 +79,17 @@ a
     color: inherit
 
   h1
-    +xxl-heading
+    +heading-xxl
   h2
-    +xl-heading
+    +heading-xl
   h3
-    +lg-heading
+    +heading-lg
   h4
-    +md-heading
+    +heading-md
   h5
-    +rg-heading
+    +heading-rg
   h6
-    +sm-heading
+    +heading-sm
 
   > img
     margin: 0px auto
@@ -106,49 +106,49 @@ a
     border-bottom: 1px solid map-get($white, darker)
     padding-bottom: $space/2
 
-=xxl-heading-default
+=heading-xxl-default
   font-size: 3rem
   margin:
     bottom: 1.65rem
   +heading-break
 
-=xl-heading-default
+=heading-xl-default
   font-size: 2.7rem
   margin:
     bottom: 1.5rem
   +heading-break
 
-=lg-heading-default
+=heading-lg-default
   font-size: 2.4rem
   margin:
     bottom: 1.25rem
   +heading-break
 
-=md-heading-default
+=heading-md-default
   font-size: 2.1rem
   margin:
     bottom: 1.15rem
   +heading-break
 
-=rg-heading-default
+=heading-rg-default
   font-size: 1.8rem
   margin:
     bottom: 1rem
   +heading-break
 
-=sm-heading-default
+=heading-sm-default
   font-size: 1.5rem
   margin:
     bottom: 0.85rem
   +heading-break
 
-=xs-heading-default
+=heading-xs-default
   font-size: 1.2rem
   margin:
     bottom: 0.7rem
   +heading-break
 
-=xxs-heading-default
+=xheading-xs-default
   font-size: 0.9rem
   margin:
     bottom: 0.5rem