shipyard-framework 0.2.2

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

@@ -0,0 +1,54 @@
+svg, path, circle, polyline
+  transition: fill 300ms ease, stroke 300ms ease, opacity 300ms ease
+
++component('icon')
+  fill: $gray
+  display: inline-block
+  transition: fill 300ms ease, stroke 300ms ease, opacity 300ms ease
+  overflow: visible
+  transform-origin: center center
+
+  // Icons w/ Strokes
+  &-outline
+    stroke: $gray
+    &, &-inverse
+      fill: transparent
+      stroke-width: 2px
+      stroke-linecap: round
+      stroke-linejoin: round
+    &-inverse
+      stroke: #fff !important
+
+  &-arrow-down
+    @extend .icon-outline
+    +width-height(10px, 6px)
+
+  &-plus
+    @extend .icon-outline
+    +width-height(6px, 6px)
+
+  // Icon: Sizes
+  $sizes: (xs: 8px, sm: 16px, md: 24px, lg: 32px, xl: 44px)
+  +all-media-sizes
+    @each $size, $value in $sizes
+      &-#{$size}
+        +width-height($value, $value)
+
+  &-btn
+    position: relative
+    display: inline-block
+    border: 2px solid $gray
+    border-radius: 50%
+    text-align: center
+    transition: border-color 300ms ease
+    @each $size, $value in (xs: 16px, sm: 24px, md: 32px, lg: 40px, xl: 48px)
+      &-#{$size}
+        +width-height($value, $value)
+    a:hover &
+      border-color: darken($gray, 12%)
+
+    &-inverse
+      border-color: #fff !important
+
+  &-inverse
+    fill: #fff

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

@@ -0,0 +1,29 @@
++component('modal')
+  width: 100%
+  max-width: 800px
+  padding: 10px
+
+  &-container
+    position: fixed
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    background: rgba($gray-darkest,.9)
+    z-index: 200
+
+  &-content
+    background: #fff
+    border-radius: 5px 5px 0 0
+    +respond-to(padding, (x0: 20px, x2: 30px))
+
+  &-title
+    margin: 0 0 10px
+
+  &-description
+    margin: 0
+
+  &-ctas
+    background: $gray-lightest
+    border-radius: 0 0 5px 5px
+    +respond-to(padding, (x0: 10px 15px, x1: 15px, x2: 15px 25px))

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

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

data/assets/stylesheets/shipyard/mixins/_box-model.sass

@@ -0,0 +1,6 @@
+@mixin width-height($width, $height: null)
+  width: $width
+  height: if($height, $height, $width)
+
+@mixin border-radius($radius: $border-radius)
+  border-radius: $radius

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

@@ -0,0 +1,82 @@
+// Used to define the base component class (e.g. "alert") and save it for use later.
+@mixin component($name)
+  $component: $name !global
+  .#{$name}
+    @content
+
+@mixin sub-component($name)
+  $sub-component: "#{$component}-#{$name}" !global
+  &-#{$name}
+    @content
+
+@mixin extend($modifier: null)
+  @if $modifier
+    @extend .#{$component}-#{$modifier}
+  @else
+    @extend .#{$component}
+
+@mixin z-index($value: null)
+  @if $value
+    z-index: $value
+  @else if $component && map-get($z-index, $component)
+    z-index: map-get($z-index, $component)
+
+// Uses the base component class defined earlier (e.g. "alert").
+//
+// Notes:
+//   - This mixin only works in tandem with the +component mixin, which must be used first.
+//   - Makes defining styles for states more readable (see example below):
+//
+//   Example Usage:
+//
+//     +component('alert')
+//       &-title
+//         +when('success')
+//           color: green
+//         +when('error')
+//           color: red
+//         +when('warning')
+//           color: yellow
+//         +when('info, default')
+//           color: gray
+//         +when('celebrate', $not: 'success')
+//           color: purple
+//
+//   The above code outputs to:
+//
+//     .alert-success .alert-title { color: green }
+//     .alert-error .alert-title { color: red }
+//     .alert-warning .alert-title { color: yellow }
+//     .alert-info .alert-title,
+//     .alert-default .alert-title { color: gray }
+//     .alert-celebrate:not(.alert-success) .alert-title { color: purple }
+//
+@mixin when($classes: null, $state: null, $not: null, $and: null)
+  +handle-states($component, $classes, $state, $not, $and)
+    @content
+
+@mixin when-sub-state($class)
+  +prepend-to-root(".#{$component}-#{$class}")
+    @content
+
+@mixin sub-state($classes: null, $state: null, $not: null, $and: null)
+  +handle-states($sub-component, $classes, $state, $not, $and)
+    @content
+
+@mixin handle-states($component-name, $classes: null, $state: null, $not: null, $and: null)
+  @if $classes
+    $classes: selector-append(".#{$component-name}-", $classes)
+  @if $state
+    $classes: selector-append(".#{$component-name}", ":#{$state}")
+  @if $not
+    $not: selector-append(".#{$component-name}-", $not)
+    $classes: selector-append($classes, ":not(#{$not})")
+  @if $and
+    $and: selector-append(".#{$component-name}-", $and)
+    $classes: selector-append($classes, $and)
+  @at-root #{selector-nest($classes, &)}
+    @content
+
+@mixin and($class)
+  @at-root #{selector-append(".#{$component}-#{$class}", &)}
+    @content

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

@@ -0,0 +1,12 @@
+@mixin center($vertical: false, $horizontal: false)
+  position: absolute
+  @if $vertical
+    top: 50%
+    transform: translatey(-50%)
+  @else if $horizontal
+    left: 50%
+    transform: translatex(-50%)
+  @else
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)

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

@@ -0,0 +1,19 @@
+@mixin rotate($deg)
+  -ms-transform: rotate($deg)
+  -moz-transform: rotate($deg)
+  -webkit-transform: rotate($deg)
+  transform: rotate($deg)
+
+@mixin backdrop-filter($content)
+  backdrop-filter: $content
+  -webkit-backdrop-filter: $content
+
+@mixin placeholder
+  &:-moz-placeholder
+    @content
+  &:-ms-input-placeholder
+    @content
+  &::-moz-placeholder
+    @content
+  &::-webkit-input-placeholder
+    @content

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

@@ -0,0 +1,112 @@
+// --------------------------------------------------
+// Responsive Mixins (Utilities)
+// --------------------------------------------------
+// Usage:
+// +media(max-width $mobile-max)                          -> styles any screens *smaller* then $mobile-max
+// +media(min-width $tablet-min)                          -> styles any screens *larger* then $tablet-min
+// +media(max-width $tablet-max)                          -> styles any screens *smaller* then $tablet-max
+// +media(min-width $desktop-min)                         -> styles any screens *larger* then $desktop-min
+// +media(min-width 500px)                                -> styles any screens *larger* then 500px
+// +media(max-width 500px)                                -> styles any screens *smaller* then 500px
+// +media(min-height 500px)                               -> styles any screens *taller* then 500px
+// +media(max-height 500px)                               -> styles any screens *shorter* then 500px
+// +media(min-width $tablet-min max-width $tablet-max)    -> styles any screens *between* $tablet-min and $tablet-max
+// +media(min-width 500px max-width 1000px)               -> styles any screens *between* 500px and 1000px wide
+// +media(min-height 500px max-height 1000px)             -> styles any screens *between* 500px and 1000px tall
+@mixin media($args)
+  @if length($args) > 6
+    @media screen and (#{nth($args, 1)}: nth($args, 2)) and (#{nth($args, 3)}: nth($args, 4)), screen and (#{nth($args, 5)}: nth($args, 6)) and (#{nth($args, 7)}: nth($args, 8))
+      @content
+  @else if length($args) > 4
+    @media screen and (#{nth($args, 1)}: nth($args, 2)), screen and (#{nth($args, 3)}: nth($args, 4)) and (#{nth($args, 5)}: nth($args, 6))
+      @content
+  @else if length($args) > 2
+    @media screen and (#{nth($args, 1)}: nth($args, 2)) and (#{nth($args, 3)}: nth($args, 4))
+      @content
+  @else
+    @media screen and (#{nth($args, 1)}: nth($args, 2))
+      @content
+
+@mixin all-media-sizes
+  @content
+  +media-sizes
+    @content
+
+@mixin media-sizes
+  @each $breakpoint, $min-width in $breakpoints
+    &-#{$breakpoint}
+      +media(min-width $min-width)
+        @content
+
+@mixin breakpoint-x0
+  +media(max-width map-get($breakpoints, x1) - 1)
+    @content
+
+@mixin breakpoint-x1
+  +media(min-width map-get($breakpoints, x1))
+    @content
+
+@mixin breakpoint-x2
+  +media(min-width map-get($breakpoints, x2))
+    @content
+
+@mixin breakpoint-x3
+  +media(min-width map-get($breakpoints, x3))
+    @content
+
+@mixin breakpoint-x4
+  +media(min-width map-get($breakpoints, x4))
+    @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
+      @each $property in $properties
+        padding-#{$property}: map-get($margins, x1) / $divisor
+    +breakpoint-x2
+      @each $property in $properties
+        padding-#{$property}: map-get($margins, x2) / $divisor
+  @else
+    +respond-to(padding, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+
+@mixin responsive-margin($properties, $divisor: 2)
+  transition: margin 500ms ease
+  @each $property in $properties
+    margin-#{$property}: map-get($margins, x0) / $divisor
+  +breakpoint-x1
+    @each $property in $properties
+      margin-#{$property}: map-get($margins, x1) / $divisor
+  +breakpoint-x2
+    @each $property in $properties
+      margin-#{$property}: map-get($margins, x2) / $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)
+
+@mixin responsive-left
+  +respond-to(left, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+
+@mixin responsive-right
+  +respond-to(right, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+
+@mixin responsive-padding-left
+  +respond-to(padding-left, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+
+@mixin responsive-padding-right
+  +respond-to(padding-right, (x0: map-get($margins, x0), x1: map-get($margins, x1), x2: map-get($margins, x2)))
+
+@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))

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

@@ -0,0 +1,11 @@
+@mixin root($selector)
+  @at-root #{selector-nest($selector, &)}
+    @content
+
+@mixin prepend-to-root($selector)
+  @at-root #{selector-append($selector, &)}
+    @content
+
+@mixin append-to-root($selector)
+  @at-root #{selector-append(&, $selector)}
+    @content

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

@@ -0,0 +1,11 @@
+@keyframes shake
+  0%, 100%
+    transform: translateX(0) translateY(0)
+  12.5%
+    transform: translateX(-12px) translateY(0)
+  37.5%
+    transform: translateX(10px) translateY(0)
+  62.5%
+    transform: translateX(-7px) translateY(0)
+  87.5%
+    transform: translateX(3px) translateY(0)

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

@@ -0,0 +1,75 @@
+$widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100)
+
+@mixin clearfix
+  &::after
+    clear: both
+    content: ""
+    display: table
+
+@mixin column-style($property, $width)
+  @if $width == auto
+    #{$property}: auto
+  @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(width, $width)
+    &-offset-#{$width}
+      +column-style(margin-left, $width)
+
+.container
+  +clearfix
+  margin: 0 auto
+  max-width: 1440px
+  position: relative
+  +responsive-padding(left right, $divisor: 1)
+
+.content
+  @extend .container
+  +responsive-padding(top bottom, $divisor: 1)
+
+.col
+  display: block
+  float: left
+  position: relative
+  +responsive-padding(left right)
+
+  &-container
+    +clearfix
+    +responsive-margin(left right, $divisor: -2)
+
+  &-center
+    float: none
+    margin: 0 auto
+
+  +all-media-sizes
+    +column-sizes
+
++component('flex')
+  display: flex
+  +all-media-sizes
+    &-col
+      flex-direction: column
+    &-col-reverse
+      flex-direction: column-reverse
+
+.float
+  +all-media-sizes
+    @each $value in (none, left, right)
+      &-#{$value}
+        float: $value
+
+.display
+  +all-media-sizes
+    @each $value in (block, inline, inline-block, none)
+      &-#{$value}
+        display: $value
+
+.clearfix
+  +clearfix

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

@@ -0,0 +1,17 @@
+.align
+  +all-media-sizes
+    @each $value in (center, left, right)
+      &-#{$value}
+        text-align: $value
+
+.center
+  +all-media-sizes
+    +center
+
+.v-center
+  +all-media-sizes
+    +center($vertical: true)
+
+.h-center
+  +all-media-sizes
+    +center($horizontal: true)

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

@@ -0,0 +1,11 @@
+*,
+*::before,
+*::after
+  margin: 0
+  padding: 0
+  box-sizing: border-box
+  .env-test &
+    animation-delay: 0s !important
+    animation-duration: 0s !important
+    transition-duration: 0s !important
+    transition-delay: 0s !important

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

@@ -0,0 +1,161 @@
+body
+  background: $gray-lightest
+  color: $gray-dark
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+a, .link
+  cursor: pointer
+  text-decoration: none
+  color: $blue
+  transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease
+  &:hover
+    color: darken($blue, 10%)
+    text-decoration: underline
+    .legacy-content &
+      text-decoration: none
+
+hr
+  height: 0
+  border: 0 solid $border-color-light
+  border-width: 2px 0 0
+  +respond-to(margin, (x0: 20px 0, x1: 30px 0))
+  &.dark
+    border-color: $border-color
+  &.lightest
+    border-color: $border-color-lightest
+  &.thin
+    border-width: 1px 0 0
+
+.medium
+  font-weight: $medium
+
+strong, .strong, .bold
+  font-weight: $bold
+
+ul, ol
+  list-style: none
+
+.list
+  list-style: circle
+  &, &-disc
+    color: $gray-light
+    margin: 20px 0 0 18px
+  &-disc
+    list-style: disc
+  .legacy-content &
+    list-style: none
+  li
+    margin: 10px 0
+    .legacy-content &
+      color: $text-color
+
+img
+  display: block
+
+button
+  background: none
+  border: none
+  cursor: pointer
+
+.code
+  color: desaturate(darken($purple, 15%), 25%)
+  background: darken($gray-lightest, 3%)
+  border: 1px solid darken($gray-lighter, 5%)
+  border-radius: 3px
+  padding: 2px 4px
+  margin: 0 2px
+
+.em
+  color: $teal
+
+.p
+  margin: 15px 0
+
++component('bullet')
+  margin: 0 5px
+  color: lighten($text-color-lightest, 20%)
+  &-inverse
+    +extend
+    color: rgba(#fff,.4)
+
+h1, .h1
+  +respond-to(font-size, (x0: 20px, x1: 24px))
+h2, .h2
+  font-size: 18px
+
+h1, h2, h3, h4, h5, h6
+  @extend .strong
+
+.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
+
+.white-space-nowrap
+  white-space: nowrap
+
+.italic
+  font-style: italic
+
+.align
+  +all-media-sizes
+    @each $value in (center, left, right)
+      &-#{$value}
+        text-align: $value
+
+.margin
+  @each $direction in (top, right, bottom, left)
+    &-#{$direction}
+      +all-media-sizes
+        @each $size, $value in (xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px)
+          &-#{$size}
+            margin-#{$direction}: $value
+
+.text
+  &-shadow
+    text-shadow: 0 1px 0 rgba(#000,.08)
+
+  &-overflow
+    +all-media-sizes
+      &-ellipsis
+        white-space: nowrap
+        text-overflow: ellipsis
+        overflow: hidden
+
+    +all-media-sizes
+      &-clip
+        white-space: normal
+        text-overflow: clip
+        overflow: visible
+
+  // Font Colors
+  &-light
+    color: $text-color-light
+  &-lighter
+    color: $text-color-lighter
+  &-lightest
+    color: $text-color-lightest
+  &-inverse
+    &-light
+      color: rgba(#fff,.8)
+    &-lighter
+      color: rgba(#fff,.7)
+    &-lightest
+      color: rgba(#fff,.6)
+
+  // Font Sizes
+  @each $size, $value in $font-sizes
+    &-#{$size}
+      font-size: $value
+
+.rotate-45
+  transform: rotate(45deg)
+.rotate-90
+  transform: rotate(90deg)

data/assets/stylesheets/shipyard/variables/_color_utilities.sass

@@ -0,0 +1,68 @@
+// Gray
+$gray: color(gray)
+$gray-light: color(gray, light)
+$gray-lighter: color(gray, lighter)
+$gray-lightest: color(gray, lightest)
+$gray-dark: color(gray, dark)
+$gray-darkest: color(gray, darkest)
+
+// Green
+$green: color(green)
+$green-light: color(green, light)
+$green-lightest: color(green, lightest)
+$green-dark: color(green, dark)
+$green-darkest: color(green, darkest)
+
+// Blue
+$blue: color(blue)
+$blue-light: color(blue, light)
+$blue-lightest: color(blue, lightest)
+$blue-dark: color(blue, dark)
+$blue-darkest: color(blue, darkest)
+
+// Teal
+$teal: color(teal)
+$teal-light: color(teal, light)
+$teal-lightest: color(teal, lightest)
+$teal-dark: color(teal, dark)
+$teal-darkest: color(teal, darkest)
+
+// Red
+$red: color(red)
+$red-light: color(red, light)
+$red-lightest: color(red, lightest)
+$red-dark: color(red, dark)
+$red-darkest: color(red, darkest)
+
+// Yellow
+$yellow: color(yellow)
+$yellow-light: color(yellow, light)
+$yellow-lightest: color(yellow, lightest)
+$yellow-dark: color(yellow, dark)
+$yellow-darker: color(yellow, darker)
+$yellow-darkest: color(yellow, darkest)
+
+// Orange
+$orange: color(orange)
+$orange-light: color(orange, light)
+$orange-lightest: color(orange, lightest)
+$orange-dark: color(orange, dark)
+$orange-darkest: color(orange, darkest)
+
+// Coral
+$coral: color(coral)
+$coral-light: color(coral, light)
+$coral-lighter: color(coral, lighter)
+$coral-lightest: color(coral, lightest)
+$coral-dark: color(coral, dark)
+$coral-darker: color(coral, darker)
+$coral-darkest: color(coral, darkest)
+
+// Purple
+$purple: color(purple)
+$purple-light: color(purple, light)
+$purple-lighter: color(purple, lighter)
+$purple-lightest: color(purple, lightest)
+$purple-dark: color(purple, dark)
+$purple-darker: color(purple, darker)
+$purple-darkest: color(purple, darkest)