shipyard-framework 0.6.1 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc87e3db7742c825fe1c4b811f94e28ede7ad52e9fdb81466af935da395fd568
-  data.tar.gz: 0c4cfaa39dc369b15b0e8d96c550a108e4e4ed09b8f9f809db0f173172a8c9ff
+  metadata.gz: 327ccadbf284c48439153c77a21a869e547dcc7c652030b54cbc93a30e143f24
+  data.tar.gz: be43d5a69c118f8251a8587a7a8123c0e10d7dbc4817297957eff43e0fe8ff9b
 SHA512:
-  metadata.gz: 91d8b90eb0ee22e149d78be4fe7d91776eda9325063233c96f679fd4f7311d548b8ac15036de9c37eb7500d1031027373126cb007b37d0780ac2d14fb9516229
-  data.tar.gz: 881b21fd3dcfd8e864b298fd8f84e00b44b816496f01a12790c9f9f6913df02baf50c7233ed63393c9c72cad484b3e795a8a02cef2e0e3c293c04a3b7038fd9a
+  metadata.gz: 9efb830d33141a1dbbb1037cbcfaf44ba7f14c6bc7e00faa2ca9c58670d14eb2afca6bd4c424316077ef8b7f59f994fa38217501c22d934427c7db114c8178b8
+  data.tar.gz: dda83882ab12be9ce76e9539aa4e0a93b3eb4f8fb768186a61d811e1665c4961338fc906366f9bc6ac9513344908c1641a5c70a2bb6cd41d27da1b8d89c03054

data/assets/javascripts/shipyard/modal.js

@@ -6,12 +6,12 @@ class Modal extends Shipyard {
   }
 
   open () {
-    this.removeClass('display-none')
+    this.removeClass('hidden')
     shipyard.addClass('modal-open')
   }
 
   close () {
-    this.addClass('display-none')
+    this.addClass('hidden')
     shipyard.removeClass('modal-open')
   }
 }

data/assets/stylesheets/shipyard/_components.sass

@@ -1,3 +1,6 @@
+@import "shipyard/components/accordion"
+@import "shipyard/components/container"
+@import "shipyard/components/bullet"
 @import "shipyard/components/code"
 @import "shipyard/components/buttons"
 @import "shipyard/components/icons"
@@ -21,3 +24,4 @@
 @import "shipyard/components/tables"
 @import "shipyard/components/statuses"
 @import "shipyard/components/horizontal-rules"
+@import "shipyard/components/grid"

data/assets/stylesheets/shipyard/_mixins.sass

@@ -4,5 +4,7 @@
 @import "shipyard/mixins/responsive"
 @import "shipyard/mixins/components"
 @import "shipyard/mixins/positioning"
+@import "shipyard/mixins/grid"
 @import "shipyard/mixins/icons"
 @import "shipyard/mixins/buttons"
+@import "shipyard/mixins/utility"

data/assets/stylesheets/shipyard/_utilities.sass

@@ -1,11 +1,25 @@
-@import "shipyard/utilities/grid"
+@import "shipyard/utilities/border-radius"
+@import "shipyard/utilities/box-shadow"
+@import "shipyard/utilities/center"
 @import "shipyard/utilities/colors"
-@import "shipyard/utilities/opacity"
+@import "shipyard/utilities/cursor"
 @import "shipyard/utilities/display"
-@import "shipyard/utilities/center"
-@import "shipyard/utilities/position"
-@import "shipyard/utilities/typography"
-@import "shipyard/utilities/margin-padding"
-@import "shipyard/utilities/border-radius"
-@import "shipyard/utilities/accordion"
+@import "shipyard/utilities/float"
+@import "shipyard/utilities/font-size"
+@import "shipyard/utilities/font-family"
+@import "shipyard/utilities/font-weight"
+@import "shipyard/utilities/height"
+@import "shipyard/utilities/margin"
+@import "shipyard/utilities/opacity"
 @import "shipyard/utilities/overflow"
+@import "shipyard/utilities/position"
+@import "shipyard/utilities/padding"
+@import "shipyard/utilities/text-align"
+@import "shipyard/utilities/text-decoration"
+@import "shipyard/utilities/text-overflow"
+@import "shipyard/utilities/text-shadow"
+@import "shipyard/utilities/text-transform"
+@import "shipyard/utilities/transition"
+@import "shipyard/utilities/transform"
+@import "shipyard/utilities/white-space"
+@import "shipyard/utilities/z-index"

data/assets/stylesheets/shipyard/_variables.sass

@@ -1,8 +1,6 @@
 @import "shipyard/variables/colors"
 @import "shipyard/variables/color_utilities"
 @import "shipyard/variables/typography"
-@import "shipyard/variables/grid"
 @import "shipyard/variables/misc"
 @import "shipyard/variables/components"
-@import "shipyard/variables/opacities"
-@import "shipyard/variables/z-index"
+@import "shipyard/variables/options"

data/assets/stylesheets/shipyard/{utilities → components}/_accordion.sass

@@ -11,7 +11,7 @@
     opacity: 0
     max-height: 0
     overflow: hidden
-    padding-top: 0
-    padding-bottom: 0
-    margin-top: 0
-    margin-bottom: 0
+    padding-top: 0 !important
+    padding-bottom: 0 !important
+    margin-top: 0 !important
+    margin-bottom: 0 !important

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

@@ -5,14 +5,12 @@
   position: relative
   text-shadow: 0 1px 0 rgba(#000,.08)
   +border-radius
-  +respond-to(min-height, (x0: 50px, x1: 60px))
-  +respond-to(margin-bottom, (x0: 10px, x1: 15px))
-  +respond-to(padding, (x0: 12px 10px, x1: 17px 20px, x2: 17px 30px))
-  &:last-child
-    +respond-to(margin-bottom, (x0: 10px, x1: 15px, x2: 30px))
+  +respond-to(min-height, (all: 50px, sm: 60px))
+  +respond-to(margin-bottom, (all: 10px, sm: 15px))
+  +respond-to(padding, (all: 12px 10px, sm: 17px 20px, md: 17px 30px))
   &-closeable
-    +respond-to(padding-right, (x0: 60px, x1: 70px, x2: 80px))
-  a, strong, .strong
+    +respond-to(padding-right, (all: 60px, sm: 70px, md: 80px))
+  a, strong, .bold
     color: #fff
     &:not(.btn)
       font-weight: $bold
@@ -50,11 +48,11 @@
     margin: 0
     font-weight: $medium
   &-cta
-    +breakpoint-x0
+    +breakpoint-all
       display: block
       text-align: center
       margin-top: 10px
-    +breakpoint-x1
+    +breakpoint-sm
       top: 50%
       right: 10px
       position: absolute
@@ -65,7 +63,7 @@
     display: inline-block
     transition: opacity 300ms ease
     +width-height(30px)
-    +respond-to(right, (x0: 10px, x2: 20px))
+    +respond-to(right, (all: 10px, md: 20px))
     &:not(:hover)
       opacity: 0.75
     &:focus

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

@@ -5,10 +5,8 @@
 
   &, &-link, &-secondary
     display: block
-    position: relative
-    border-radius: 4px
+    border-radius: 5px
     transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease
-    +clearfix
 
   &-secondary
     background: $gray-lighter
@@ -26,15 +24,3 @@
       outline: none
       cursor: default
       box-shadow: 0 0 4px 1px rgba(darken($green, 5%),.75)
-
-  &-padding
-    +respond-to(padding, $margins)
-
-  &-rounded
-    border-radius: 1000px
-
-  // Box Sizes
-  +all-media-sizes
-    @each $size, $height in (xxs: 50px, xs: 60px, sm: 70px, md: 80px, lg: 90px, xl: 100px, xxl: 110px)
-      &-#{$size}
-        height: $height

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

@@ -0,0 +1,6 @@
++component('bullet')
+  margin: 0 5px
+  color: text-color(.2)
+  &-inverse
+    +extend
+    color: rgba(#fff,.4)

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

@@ -7,9 +7,6 @@
       &-#{$size}
         +btn-size($size)
 
-  &-rounded
-    border-radius: 100px
-
   // Button: Types
   &-full
     display: block

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

@@ -0,0 +1,6 @@
+.container
+  +clearfix
+  margin: 0 auto
+  max-width: 1440px
+  position: relative
+  +responsive-padding(left right, $divisor: 1)

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

@@ -26,5 +26,5 @@
   &-box
     background: $border-color-light
     border-radius: 4px
-    +respond-to(padding, (x0: 10px 15px, x1: 15px 20px))
+    +respond-to(padding, (all: 10px 15px, sm: 15px 20px))
     margin: 0

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

@@ -0,0 +1,62 @@
+$name: grid
+$utility: map-get($shipyard-options, $name)
+
+@if $utility != false
+  $prefix: map-get($utility, prefix)
+  $utility-values: map-get($utility, values)
+  $utility-is-responsive: map-get($utility, responsive)
+
+  .#{$prefix}
+    display: block
+    position: relative
+    flex-basis: 0
+    flex-grow: 1
+    flex-shrink: 1
+    flex-direction: column
+    padding-left: 15px
+    padding-right: 15px
+
+    &-container
+      display: flex
+      flex-wrap: wrap
+      margin-left: -15px
+      margin-right: -15px
+      &-nowrap
+        display: flex
+        flex-wrap: nowrap
+        margin-left: -15px
+        margin-right: -15px
+
+    &-center,
+    &-v-center
+      display: flex
+      justify-content: center
+    &-center
+      align-items: center
+
+    // Print out styles for all screens
+    @each $width in $utility-values
+      &-#{$width}
+        +column-style(max-width, $width)
+        +column-style(flex-basis, $width)
+      &-offset-#{$width}
+        +column-style(margin-left, $width)
+
+  // Print out styles for all breakpoints
+  @if $utility-is-responsive
+    @each $breakpoint, $min-width in $breakpoints
+      @media screen and (min-width:#{$min-width})
+        .#{$breakpoint + '\\:' + $prefix}
+          &-center,
+          &-v-center
+            display: flex
+            justify-content: center
+          &-center
+            align-items: center
+
+          @each $width in $utility-values
+            &-#{$width}
+              +column-style(max-width, $width)
+              +column-style(flex-basis, $width)
+            &-offset-#{$width}
+              +column-style(margin-left, $width)

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

@@ -5,7 +5,7 @@
   top: 25px
   left: 10px
   outline: none
-  +respond-to(display, (x1: none))
+  +respond-to(display, (sm: none))
   .hamburger-button-clicked &
     background: transparent
 
@@ -22,12 +22,12 @@
     left: 0
     content: " "
   &:before
-    +respond-to(top, (x0: -7px, x1: -8px))
+    +respond-to(top, (all: -7px, sm: -8px))
     .hamburger-button-clicked &
       top: 0
       transform: rotate(45deg)
   &:after
-    +respond-to(bottom, (x0: -8px, x1: -9px))
+    +respond-to(bottom, (all: -8px, sm: -9px))
     .hamburger-button-clicked &
       bottom: 0
       transform: rotate(-45deg)
@@ -49,4 +49,4 @@
   // Page: Prevent Scrolling When Clicked
   // --------------------------------------------------
   &-button-clicked
-    +respond-to(overflow, (x0: hidden, x1: auto))
+    +respond-to(overflow, (all: hidden, sm: auto))

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

@@ -5,32 +5,32 @@
   right: 0
   position: fixed
   transition: height 250ms ease, background-color 250ms ease
-  +respond-to(overflow, (x0: hidden, x1: visible))
-  +respond-to(height, (x0: 50px, x1: 60px, x2: 70px))
-  +respond-to(text-align, (x0: center, x1: left))
-  +respond-to(line-height, (x0: 50px, x1: 60px, x2: 70px))
+  +respond-to(overflow, (all: hidden, sm: visible))
+  +respond-to(height, (all: 50px, sm: 60px, md: 70px))
+  +respond-to(text-align, (all: center, sm: left))
+  +respond-to(line-height, (all: 50px, sm: 60px, md: 70px))
   .hamburger-button-clicked &
     height: 100%
 
   +sub-component('logo')
     display: inline-block
-    +respond-to(margin, (x0: 0 auto, x1: 0))
-    +respond-to(font-size, (x0: 20px, x1: 24px))
-    +respond-to(float, (x1: left))
+    +respond-to(margin, (all: 0 auto, sm: 0))
+    +respond-to(font-size, (all: 20px, sm: 24px))
+    +respond-to(float, (sm: left))
     a
       color: $blue-darkest
 
   +sub-component('list')
-    +respond-to(float, (x1: right))
-    +respond-to(margin-right, (x1: -15px))
+    +respond-to(float, (sm: right))
+    +respond-to(margin-right, (sm: -15px))
 
   &-item
-    +respond-to(margin, (x1: 0 15px))
-    +respond-to(display, (x0: block, x1: inline))
+    +respond-to(margin, (sm: 0 15px))
+    +respond-to(display, (all: block, sm: inline))
     &-cta
-      +respond-to(top, (x0: 0, x1: auto))
-      +respond-to(right, (x0: 10px, x1: auto))
-      +respond-to(position, (x0: fixed, x1: static))
+      +respond-to(top, (all: 0, sm: auto))
+      +respond-to(right, (all: 10px, sm: auto))
+      +respond-to(position, (all: fixed, sm: static))
 
   &-link
     color: inherit

data/assets/stylesheets/shipyard/components/_horizontal-rules.sass

@@ -4,7 +4,7 @@
   overflow: visible
   position: relative
   border-width: 2px 0 0
-  +respond-to(margin, (x0: 20px 0, x1: 30px 0))
+  +respond-to(margin, (all: 20px 0, sm: 30px 0))
   &-dark
     border-color: $border-color
   &-light

data/assets/stylesheets/shipyard/components/_input-radio-checkbox.sass

@@ -1,7 +1,7 @@
 +component('input')
   &-item
     position: relative
-    +respond-to(margin, (x0: 10px 0, x1: 15px 0))
+    +respond-to(margin, (all: 10px 0, sm: 15px 0))
     &-inline
       display: inline-block
       margin-right: 25px

data/assets/stylesheets/shipyard/components/_input-select.sass

@@ -12,7 +12,7 @@
     cursor: pointer
     +border-radius
     +appearance(none)
-    +respond-to(padding, (x0: 0 15px, x1: 0 20px))
+    +respond-to(padding, (all: 0 15px, sm: 0 20px))
     +when('error')
       border-color: $red
     &:hover, &:focus

data/assets/stylesheets/shipyard/components/_input-text.sass

@@ -10,7 +10,7 @@
     width: 100%
     +width-height(100%, 50px)
     +border-radius
-    +respond-to(padding, (x0: 10px 15px, x1: 10px 20px))
+    +respond-to(padding, (all: 10px 15px, sm: 10px 20px))
     +placeholder
       color: $text-color-lightest
       font-weight: $normal

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

@@ -10,7 +10,6 @@
 
   &-container
     @extend .col-center !optional
-    +z-index
     top: 0
     left: 0
     right: 0
@@ -25,7 +24,7 @@
   &-content
     background: #fff
     border-radius: 5px 5px 0 0
-    +respond-to(padding, (x0: 15px, x1: 20px, x2: 30px))
+    +respond-to(padding, (all: 15px, sm: 20px, md: 30px))
 
   &-title
     line-height: 1
@@ -38,4 +37,4 @@
   &-ctas
     background: $gray-lightest
     border-radius: 0 0 5px 5px
-    +respond-to(padding, (x0: 10px 15px, x1: 15px 20px, x2: 15px 30px))
+    +respond-to(padding, (all: 10px 15px, sm: 15px 20px, md: 15px 30px))

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

@@ -1,10 +1,10 @@
 +component('note')
   display: block
   position: relative
-  +respond-to(min-height, (x0: 50px, x1: 60px))
-  +respond-to(margin, (x0: 10px 0, x1: 15px 0))
-  +respond-to(padding, (x0: 12px 10px, x1: 17px 20px, x2: 17px 30px))
-  a, strong, .strong
+  +respond-to(min-height, (all: 50px, sm: 60px))
+  +respond-to(margin, (all: 10px 0, sm: 15px 0))
+  +respond-to(padding, (all: 12px 10px, sm: 17px 20px, md: 17px 30px))
+  a, strong, .bold
     &:not(.btn)
       font-weight: $bold
 
@@ -19,11 +19,11 @@
 
   // Note: CTAs
   &-cta
-    +breakpoint-x0
+    +breakpoint-all
       display: block
       text-align: center
       margin-top: 10px
-    +breakpoint-x1
+    +breakpoint-sm
       top: 50%
       right: 10px
       position: absolute