shipyard-framework 0.6.1 → 0.7.0

data/assets/stylesheets/shipyard/components/_tables.sass

@@ -8,7 +8,7 @@
       background: rgba($gray-lighter, .5)
 
   th, td
-    +respond-to(padding, (x0: 5px, x1: 10px, x2: 15px))
+    +respond-to(padding, (all: 5px, sm: 10px, md: 15px))
 
   th
     border-bottom: 2px solid $gray-lighter

data/assets/stylesheets/shipyard/components/_tooltips.sass

@@ -1,5 +1,4 @@
 +component('tooltip')
-  +z-index
   +border-radius
   width: auto
   opacity: 0
@@ -55,7 +54,6 @@
     transform: rotate(45deg)
     transform-origin: center center
     border: 4px solid transparent
-    z-index: map-get($z-index, 'tooltip-arrow')
     &-top
       left: 50%
       margin-left: -4px
@@ -126,15 +124,21 @@
     background-color: #fff
     +box-shadow
 
-  // Data Tooltip
+  // Data-Tooltip
   &-data
     +extend('parent')
+
+    // Data-Tooltip: Arrow
     &::before
+      @extend .z-60 !optional
       opacity: 0
       visibility: hidden
       transition: opacity 300ms ease 300ms, transform 300ms ease 300ms, visibility 0ms ease 300ms
+
+    // Data-Tooltip: Content
     &::after
       +extend
+      @extend .z-50 !optional
       width: auto
       min-width: 0
       max-width: none
@@ -153,7 +157,7 @@
       &::before
         +extend('light')
 
-    // Data Tooltip: Directions
+    // Data-Tooltip: Directions
     @each $direction in (top, bottom, left, right)
       &-#{$direction}
         &::before

data/assets/stylesheets/shipyard/core/_typography.sass

@@ -15,9 +15,6 @@
     color: darken($blue, 10%)
     text-decoration: underline
 
-strong
-  font-weight: $bold
-
 .list
   list-style: circle
   &, &-disc
@@ -36,19 +33,3 @@ button
   background: none
   border: none
   cursor: pointer
-
-h1, .h1
-  +respond-to(font-size, (x0: 20px, x1: 24px))
-h2, .h2
-  font-size: 18px
-
-.h-primary
-  margin-bottom: 0
-  +respond-to(font-size, (x0: 24px, x1: 28px))
-.h-secondary
-  color: $text-color-lighter
-  font-weight: $normal
-  margin: 5px 0 30px
-  +respond-to(font-size, (x0: 16px, x1: 18px))
-.h-margin
-  margin: 0 0 30px

data/assets/stylesheets/shipyard/functions/_color.sass

@@ -1,10 +1,7 @@
 @function color($name, $shade: null)
-  $colors: $colors !global
-  $color: map-get($colors, $name)
+  $shipyard-colors: $shipyard-colors !global
+  $color: map-get($shipyard-colors, $name)
   @if $color
-    @if $shade
-      @return map-get($color, $shade)
-    @else
-      @return map-get($color, base)
+    @return $color
   @else
-    @error "Sorry, but the color `#{$name}` hasn't been defined in the $colors variable."
+    @error "Sorry, but the color `#{$name}` hasn't been defined in the $shipyard-colors variable."

data/assets/stylesheets/shipyard/mixins/_components.sass

@@ -17,12 +17,6 @@
   @else
     @extend .#{$component} !optional
 
-@mixin z-index($value: null)
-  @if $value
-    z-index: $value
-  @else if $component and map-get($z-index, $component)
-    z-index: map-get($z-index, $component)
-
 @mixin component-styles($modifier)
   $component-styles: map-get($components, $component)
   @if $component-styles

data/assets/stylesheets/shipyard/mixins/_grid.sass

@@ -0,0 +1,17 @@
+@mixin column-style($property, $width)
+  @if $width == 0 and $property == max-width
+    max-width: none
+  @else if $width == 66
+    #{$property}: 66.6666666666%
+  @else if $width == 33
+    #{$property}: 33.3333333333%
+  @else
+    #{$property}: percentage($width / 100)
+
+@mixin column-sizes
+  @each $width in $widths
+    &-#{$width}
+      +column-style(max-width, $width)
+      +column-style(flex-basis, $width)
+    &-offset-#{$width}
+      +column-style(margin-left, $width)

data/assets/stylesheets/shipyard/mixins/_responsive.sass

@@ -29,84 +29,80 @@
 
 @mixin all-media-sizes
   @content
-  +media-sizes
-    @content
-
-@mixin media-sizes
   @each $breakpoint, $min-width in $breakpoints
-    &-#{$breakpoint}
+    @at-root #{".#{$breakpoint}\\:" + str-slice("#{&}", 2)}
       +media(min-width $min-width)
         @content
 
-@mixin breakpoint-x0
-  +media(max-width map-get($breakpoints, x1) - 1)
+@mixin breakpoint-all
+  +media(max-width map-get($breakpoints, sm) - 1)
     @content
 
-@mixin breakpoint-x1
-  +media(min-width map-get($breakpoints, x1))
+@mixin breakpoint-sm
+  +media(min-width map-get($breakpoints, sm))
     @content
 
-@mixin breakpoint-x2
-  +media(min-width map-get($breakpoints, x2))
+@mixin breakpoint-md
+  +media(min-width map-get($breakpoints, md))
     @content
 
-@mixin breakpoint-x3
-  +media(min-width map-get($breakpoints, x3))
+@mixin breakpoint-lg
+  +media(min-width map-get($breakpoints, lg))
     @content
 
-@mixin breakpoint-x4
-  +media(min-width map-get($breakpoints, x4))
+@mixin breakpoint-xl
+  +media(min-width map-get($breakpoints, xl))
     @content
 
 @mixin responsive-padding($properties: null, $divisor: 2)
   transition: padding 500ms ease
   @if $properties
     @each $property in $properties
-      padding-#{$property}: map-get($margins, x0) / $divisor
-    +breakpoint-x1
+      padding-#{$property}: map-get($margins, all) / $divisor
+    +breakpoint-sm
       @each $property in $properties
-        padding-#{$property}: map-get($margins, x1) / $divisor
-    +breakpoint-x2
+        padding-#{$property}: map-get($margins, sm) / $divisor
+    +breakpoint-md
       @each $property in $properties
-        padding-#{$property}: map-get($margins, x2) / $divisor
+        padding-#{$property}: map-get($margins, md) / $divisor
   @else
-    +respond-to(padding, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+    +respond-to(padding, (all: map-get($margins, all), sm: map-get($margins, sm), md: map-get($margins, md)))
 
 @mixin responsive-margin($properties, $divisor: 2)
   transition: margin 500ms ease
   @each $property in $properties
-    margin-#{$property}: map-get($margins, x0) / $divisor
-  +breakpoint-x1
+    margin-#{$property}: map-get($margins, all) / $divisor
+  +breakpoint-sm
     @each $property in $properties
-      margin-#{$property}: map-get($margins, x1) / $divisor
-  +breakpoint-x2
+      margin-#{$property}: map-get($margins, sm) / $divisor
+  +breakpoint-md
     @each $property in $properties
-      margin-#{$property}: map-get($margins, x2) / $divisor
+      margin-#{$property}: map-get($margins, md) / $divisor
 
 @mixin respond-to($property, $breakpoints)
-  @if map-has-key($breakpoints, x0)
-    #{$property}: map-get($breakpoints, x0)
-  @if map-has-key($breakpoints, x1)
-    +breakpoint-x1
-      #{$property}: map-get($breakpoints, x1)
-  @if map-has-key($breakpoints, x2)
-    +breakpoint-x2
-      #{$property}: map-get($breakpoints, x2)
-  @if map-has-key($breakpoints, x3)
-    +breakpoint-x3
-      #{$property}: map-get($breakpoints, x3)
+  @if map-has-key($breakpoints, all)
+    #{$property}: map-get($breakpoints, all)
+  @if map-has-key($breakpoints, sm)
+    +breakpoint-sm
+      #{$property}: map-get($breakpoints, sm)
+  @if map-has-key($breakpoints, md)
+    +breakpoint-md
+      #{$property}: map-get($breakpoints, md)
+  @if map-has-key($breakpoints, lg)
+    +breakpoint-lg
+      #{$property}: map-get($breakpoints, lg)
 
 @mixin responsive-left
-  +respond-to(left, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+  +respond-to(left, (all: map-get($margins, all), sm: map-get($margins, sm), md: map-get($margins, md)))
 
 @mixin responsive-right
-  +respond-to(right, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+  +respond-to(right, (all: map-get($margins, all), sm: map-get($margins, sm), md: map-get($margins, md)))
 
 @mixin responsive-padding-left
-  +respond-to(padding-left, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+  +respond-to(padding-left, (all: map-get($margins, all), sm: map-get($margins, sm), md: map-get($margins, md)))
 
 @mixin responsive-padding-right
-  +respond-to(padding-right, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+  +respond-to(padding-right, (all: map-get($margins, all), sm: map-get($margins, sm), md: map-get($margins, md)))
 
 @function merge-and-add($map1, $map2)
-  @return (x0: map-get($map1, x0) + map-get($map2, x0), x1: map-get($map1, x1) + map-get($map2, x1), x2: map-get($map1, x2) + map-get($map2, x2))
+  @return (all: map-get($map1, all) + map-get($map2, all), sm: map-get($map1, sm) + map-get($map2, sm), md: map-get($map1, md) + map-get($map2, md))

data/assets/stylesheets/shipyard/mixins/_utility.sass

@@ -0,0 +1,50 @@
+@function utility-class($prefix, $class)
+  @if $prefix
+    $class: if($class == '', $prefix, "#{$prefix}-#{$class}")
+  @return $class
+
+@mixin utility($name)
+  $utility: map-get($shipyard-options, $name)
+
+  @if $utility != false
+    $prefix: map-get($utility, prefix)
+    $utility-values: map-get($utility, values)
+    $utility-variants: map-get($utility, variants)
+    $utility-is-responsive: map-get($utility, responsive)
+
+    // Print out styles for all screens
+    @each $class, $value in $utility-values
+      $value: if($value, $value, $class)
+      .#{utility-class($prefix, $class)}
+        #{$name}: $value
+
+      // Print out variants like: left, right, top, bottom
+      @if $utility-variants
+        @each $v-class, $v-prop in $utility-variants
+          .#{utility-class($prefix + $v-class, $class)}
+            #{$name}-#{$v-prop}: $value
+
+    // Print out other utility content
+    @if $prefix
+      .#{$prefix}
+        @content
+
+    // Print out styles for all breakpoints
+    @if $utility-is-responsive
+      @each $breakpoint, $min-width in $breakpoints
+        @media screen and (min-width:#{$min-width})
+          @each $class, $value in $utility-values
+            $value: if($value, $value, $class)
+            .#{$breakpoint + '\\:' + utility-class($prefix, $class)}
+              #{$name}: $value
+
+            // Print out variants like: left, right, top, bottom
+            @if $utility-variants
+              @each $v-class, $v-prop in $utility-variants
+                .#{$breakpoint + '\\:' + utility-class($prefix + $v-class, $class)}
+                  #{$name}-#{$v-prop}: $value
+
+          // Print out other utility content
+          @if $prefix
+            .#{$breakpoint + '\\:' + $prefix}
+              @content

data/assets/stylesheets/shipyard/utilities/_border-radius.sass

@@ -1,39 +1,29 @@
-+component('rounded')
-  +all-media-sizes
-    +border-radius
-    &-0
-      border-radius: 0
-    &-xs
-      border-radius: 2px
-    &-sm
-      border-radius: 3px
-    &-md
-      border-radius: 5px
-    &-top
-      border-bottom-left-radius: 0
-      border-bottom-right-radius: 0
-    &-bottom
-      border-top-left-radius: 0
-      border-top-right-radius: 0
-    &-left
-      border-top-right-radius: 0
-      border-bottom-right-radius: 0
-    &-right
-      border-top-left-radius: 0
-      border-bottom-left-radius: 0
-    &-top-left
-      border-top-right-radius: 0
-      border-bottom-left-radius: 0
-      border-bottom-right-radius: 0
-    &-top-right
-      border-top-left-radius: 0
-      border-bottom-left-radius: 0
-      border-bottom-right-radius: 0
-    &-bottom-left
-      border-top-left-radius: 0
-      border-top-right-radius: 0
-      border-bottom-right-radius: 0
-    &-bottom-right
-      border-top-left-radius: 0
-      border-top-right-radius: 0
-      border-bottom-left-radius: 0
++utility(border-radius)
+  &-top
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+  &-bottom
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+  &-left
+    border-top-right-radius: 0
+    border-bottom-right-radius: 0
+  &-right
+    border-top-left-radius: 0
+    border-bottom-left-radius: 0
+  &-top-left
+    border-top-right-radius: 0
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+  &-top-right
+    border-top-left-radius: 0
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+  &-bottom-left
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+    border-bottom-right-radius: 0
+  &-bottom-right
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+    border-bottom-left-radius: 0

data/assets/stylesheets/shipyard/utilities/_box-shadow.sass

@@ -0,0 +1 @@
++utility(box-shadow)

data/assets/stylesheets/shipyard/utilities/_center.sass

@@ -1,16 +1,10 @@
-.center
-  +all-media-sizes
-    +center
-
-.v-center
-  +all-media-sizes
++utility(center)
+  +center
+  &-v
     +center($vertical: true)
-
-.h-center
-  +all-media-sizes
+  &-h
     +center($horizontal: true)
-
-.align-middle
-  top: -1px
-  position: relative
-  vertical-align: middle
+  &-obj
+    top: -1px
+    position: relative
+    vertical-align: middle

data/assets/stylesheets/shipyard/utilities/_colors.sass

@@ -1,12 +1,2 @@
-@each $color, $shades in $colors
-  @each $shade, $value in $shades
-    @if $shade == base
-      .#{$color}
-        color: $value
-      .bg-#{$color}
-        background-color: $value
-    @else
-      .#{$color}-#{$shade}
-        color: $value
-      .bg-#{$color}-#{$shade}
-        background-color: $value
++utility(color)
++utility(background-color)

data/assets/stylesheets/shipyard/utilities/_cursor.sass

@@ -0,0 +1 @@
++utility(cursor)

data/assets/stylesheets/shipyard/utilities/_display.sass

@@ -1,14 +1 @@
-.float
-  +all-media-sizes
-    @each $value in (none, left, right)
-      &-#{$value}
-        float: $value
-
-.display
-  +all-media-sizes
-    @each $value in (flex, block, table, inline, inline-block, none)
-      &-#{$value}
-        display: $value
-
-.clearfix
-  +clearfix
++utility(display)

data/assets/stylesheets/shipyard/utilities/_flex-direction.sass

@@ -0,0 +1 @@
++utility(flex-direction)