shipyard-framework 0.5.70 → 0.5.71

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9ffe0c591ade0072321117debf737834f8b996c1c241c201c1b5a235e4c835c9
-  data.tar.gz: 5ea90413b10bd35bb92e5dfe80ab621af420f2385a2ab48f464b0ae0d17ace30
+  metadata.gz: 05a0ca040f6e527fe4b3d645eaad79e4b48a3bef7f94ae2477a170b3f469a810
+  data.tar.gz: 6e83299c91e5fb216e088f0b89af0ffc66cd2e330616d639d58247c9f6f62e3e
 SHA512:
-  metadata.gz: 435f65ebc2cbe2dbe8f08e51278b6a4a7771e6488e1de82e807f5aa225f3e8c01cf2c6310e06385a8d67ede150f4cc7be0ae17b90340ebf48d869ee9e1aa2ea1
-  data.tar.gz: 469eaf26a4e08013c2b2233ad5524fdb1ef4a86a77a8d53d1a8bcff0ee3b376149e1bf01fd37d9ec306b856c570c4a43bbe7749ea574374e91e7808b7e577def
+  metadata.gz: b6f67b6f83cae6830accd30bd1e125073c76e235faf2f1142c8131f0b68101c5dcf21aa3f2cb977c079cba73b5d91576bb8faf5e264592626b9f71a0032dac41
+  data.tar.gz: ab63db49e5ca2b6a8d7adf87787b8f2ebf2ba1ddb0c0c89c49a0e3eec651aee376a97bfc94bd4d95a0fdc73496f0e41ff2ec0290fef9ae666e4f5106957f6da5

data/assets/icons/logos/bitbucket-color.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <linearGradient id="bitbucket-color-gradient" x1="16.42" y1="9.04" x2="8.46" y2="2.83" gradientTransform="matrix(1, 0, 0, -1, 0, 16)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.18" stop-color="#0052cc" />
+      <stop offset="1" stop-color="#2684ff" />
+    </linearGradient>
+  </defs>
+  <path class="icon-bitbucket" fill="#2684ff" d="M.52.81a.51.51,0,0,0-.52.5A.28.28,0,0,0,0,1.4L2.18,14.61a.69.69,0,0,0,.68.58H13.3a.51.51,0,0,0,.52-.43L16,1.4a.5.5,0,0,0-.42-.58H.52Zm9.16,9.54H6.35l-.9-4.71h5Z" />
+  <path class="icon-bitbucket-gradient" fill="url(#bitbucket-color-gradient)" d="M15.3,5.64H10.49l-.81,4.71H6.35L2.42,15a.66.66,0,0,0,.44.17H13.31a.51.51,0,0,0,.51-.43Z"/>
+</svg>

data/assets/icons/logos/bitbucket.svg

@@ -1,3 +1,10 @@
-<svg icon="icon-bitbucket" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M8,0H8C4.18,0,1.07,1,1.07,2.3c0,.34.83,5.15,1.16,7.05.15.86,2.36,2.11,5.77,2.11H8c3.41,0,5.62-1.25,5.77-2.11.33-1.91,1.16-6.72,1.16-7.05C14.93,1,11.82,0,8,0ZM8,9.92a2.2,2.2,0,1,1,2.2-2.2A2.2,2.2,0,0,1,8,9.92ZM8,3c-2.45,0-4.44-.43-4.44-1s2-.94,4.44-.94,4.44.43,4.44,1S10.45,3,8,3Zm5,8.25a.32.32,0,0,0-.19.07A8.13,8.13,0,0,1,8,12.69a8.13,8.13,0,0,1-4.79-1.35A.32.32,0,0,0,3,11.26a.24.24,0,0,0-.25.27.32.32,0,0,0,0,.06C3,13,3.24,14,3.27,14.17,3.5,15.21,5.54,16,8,16H8c2.46,0,4.5-.79,4.73-1.83,0-.15.23-1.16.49-2.58a.32.32,0,0,0,0-.06A.24.24,0,0,0,13,11.26ZM8,6.61a1.1,1.1,0,1,1-1.1,1.1A1.1,1.1,0,0,1,8,6.61Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <linearGradient id="bitbucket-gradient" x1="16.42" y1="9.04" x2="8.46" y2="2.83" gradientTransform="matrix(1, 0, 0, -1, 0, 16)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.18" stop-color="rgba(0,0,0,.35)" />
+      <stop offset="1" stop-color="rgba(0,0,0,0)" />
+    </linearGradient>
+  </defs>
+  <path class="icon-bitbucket" d="M.52.81a.51.51,0,0,0-.52.5A.28.28,0,0,0,0,1.4L2.18,14.61a.69.69,0,0,0,.68.58H13.3a.51.51,0,0,0,.52-.43L16,1.4a.5.5,0,0,0-.42-.58H.52Zm9.16,9.54H6.35l-.9-4.71h5Z" />
+  <path class="icon-bitbucket-gradient" fill="url(#bitbucket-gradient)" d="M15.3,5.64H10.49l-.81,4.71H6.35L2.42,15a.66.66,0,0,0,.44.17H13.31a.51.51,0,0,0,.51-.43Z"/>
 </svg>

data/assets/icons/logos/gitlab-color.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path class="icon-gitlab-head" fill="#fc6d26" d="M16,9.06l-.9-2.76L13.3.84a.31.31,0,0,0-.58,0L11,6.3H5.05L3.28.84a.31.31,0,0,0-.58,0L.93,6.3,0,9.06a.62.62,0,0,0,.22.68L8,15.37l7.75-5.63A.62.62,0,0,0,16,9.06"/>
+  <path class="icon-gitlab-scruff" fill="#fca326" d="M.93,6.3h0L0,9.06a.62.62,0,0,0,.22.68L8,15.37.93,6.3Zm14.14,0h0L16,9.06a.62.62,0,0,1-.22.68L8,15.37,15.07,6.3Z"/>
+  <path class="icon-gitlab-ears-nose" fill="#e24329" d="M8,15.37H8L11,6.3H5.05l3,9.07ZM.93,6.3H5.05L3.28.84a.31.31,0,0,0-.58,0L.93,6.3Zm14.14,0H11L12.72.84a.31.31,0,0,1,.58,0L15.07,6.3Z"/>
+</svg>

data/assets/icons/logos/google-app-engine.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path id="icon-app-engine-hexagon" fill="#4285f4" d="M15.81,7.26,12.52,1.55A1.44,1.44,0,0,0,11.29.81H4.71a1.44,1.44,0,0,0-1.23.74L.19,7.25a1.46,1.46,0,0,0,0,1.43l3.29,5.75a1.47,1.47,0,0,0,1.23.76h6.58a1.48,1.48,0,0,0,1.23-.76l3.29-5.72A1.5,1.5,0,0,0,15.81,7.26Z"/>
+  <path id="icon-app-engine-shadow" fill="#4c7adc" d="M12.66,7.75l-.09,0L8.21,3.36l-.9,1.31.75.75-1.9.69L5.41,8l-.74-.73L3.36,8.44l6.75,6.75h1.18a1.48,1.48,0,0,0,1.23-.76L15,10.1Z"/>
+  <path id="icon-app-engine-rocket" fill="#fff" d="M8,5.12A2.88,2.88,0,1,0,10.87,8h0A2.87,2.87,0,0,0,8,5.12m0,5.07A2.19,2.19,0,1,1,10.18,8,2.19,2.19,0,0,1,8,10.19H8m4.52-2.52-1.2-.38a3.51,3.51,0,0,1,.07.72,4.07,4.07,0,0,1,0,.5h1.16a.2.2,0,0,0,.18-.19V7.85a.21.21,0,0,0-.18-.19M8,4.6a3.27,3.27,0,0,1,.7.08l-.43-1.2a.21.21,0,0,0-.2-.18H7.89a.2.2,0,0,0-.19.18L7.32,4.67A3.82,3.82,0,0,1,8,4.61M4.61,8a3.51,3.51,0,0,1,.07-.72l-1.2.37a.22.22,0,0,0-.18.2v.46a.21.21,0,0,0,.18.19H4.64a4.19,4.19,0,0,1,0-.5M9,7.06l-.28.27h0A1,1,0,0,0,7.29,8.8L7,9.07a1.41,1.41,0,0,0,2,0,1.43,1.43,0,0,0,0-2m-.56,1.4a.67.67,0,0,1-.94,0,.66.66,0,0,1,0-.94.65.65,0,0,1,.93,0h0a.66.66,0,0,1,0,.93h0"/>
+</svg>

data/assets/stylesheets/shipyard/_utilities.sass

@@ -1,5 +1,6 @@
 @import shipyard/utilities/grid
 @import shipyard/utilities/colors
+@import shipyard/utilities/opacity
 @import shipyard/utilities/display
 @import shipyard/utilities/positioning
 @import shipyard/utilities/typography

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

@@ -26,7 +26,7 @@
     color: $text-color
 
 @mixin btn-hover($color, $text-color: null, $border-color: null, $text-decoration: none)
-  &:hover, &:focus, &:active
+  &:hover, &:focus, &:active, &.btn-loading
     text-decoration: $text-decoration
     +btn-color($color, $text-color, $border-color)
 
@@ -120,12 +120,27 @@
   &-secondary
     +btn-color(transparent, $text-color-light, darken($gray-lightest, 7%))
     +btn-hover(transparent, darken($text-color-light, 15%), darken($gray-lightest, 17%))
+    &.btn-loading
+      &, &:hover, &:active
+        &::after
+          border-color: $border-color
+          border-left-color: $teal-dark
     &-link
       +btn-color(transparent, $blue, darken($gray-lightest, 7%))
       +btn-hover(transparent, $blue-dark, darken($gray-lightest, 17%))
+      &.btn-loading
+        &, &:hover, &:active
+          &::after
+            border-color: $border-color
+            border-left-color: $teal-dark
     &-dark
       +btn-color(transparent, darken($text-color-light, 5%), lighten($gray-light, 5%))
       +btn-hover(transparent, darken($text-color-light, 20%), darken($gray-light, 5%))
+      &.btn-loading
+        &, &:hover, &:active
+          &::after
+            border-color: $border-color-lighter
+            border-left-color: $blue
 
   &-caution
     +btn-color($red-dark)
@@ -156,3 +171,15 @@
     &-secondary
       +btn-color(transparent, #fff, rgba(#fff,.2))
       +btn-hover(transparent, #fff, rgba(#fff,.5))
+
+  &-loading
+    &, &:active, &:hover
+      cursor: default
+      color: transparent !important
+      &::after
+        content: ''
+        border-radius: 20px
+        border: 2px solid rgba(#fff,.2)
+        border-left-color: #fff
+        animation: rotate 1s linear infinite
+        +absolute-center(20px)

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

@@ -12,10 +12,14 @@
   outline: none
   border: 2px solid $border-color
   transition: background-color 300ms ease, border-color 300ms ease, opacity 300ms ease
+  background-clip: padding-box
   +appearance(none)
-  +background-clip(padding-box)
+  &:disabled
+    opacity: .5
+    color: $text-color-light
   &:hover, &:focus, .btn:hover &
-    border-color: $border-color-dark
+    &:not(:disabled)
+      border-color: $border-color-dark
 
   &-group
     +clearfix
@@ -94,8 +98,8 @@
       &-top,
       &-middle,
       &-bottom
+        background-clip: initial
         border-color: rgba($bg-to-border, .37)
-        +background-clip(initial)
         &:hover, &:focus
           z-index: 1
           border-color: rgba($bg-to-border, .50)

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

@@ -1,4 +1,4 @@
-$sizes: (sm: 18px)
+$sizes: (sm: 18px, lg: 22px, xl: 24px)
 
 +component('input-switch')
   outline: none
@@ -6,18 +6,21 @@ $sizes: (sm: 18px)
   position: relative
   display: inline-block
   border-radius: 50px
+  background-clip: initial
   +width-height(36px, 20px)
-  +background-clip(initial)
   &, &:hover, &:focus
     +btn-color($red, $border-color: transparent)
   &:checked
     &, &:hover, &:focus
-      +btn-color($green, $border-color: transparent)
+      &:not(:disabled)
+        +btn-color($green, $border-color: transparent)
 
   &-secondary
     +extend
-    &, &:hover, &:focus
-      +btn-color($border-color, $border-color: transparent)
+    +btn-color($border-color, $border-color: transparent)
+    &:hover, &:focus
+      &:not(:disabled)
+        +btn-color($border-color-dark, $border-color: transparent)
 
   // Checkbox Switch: White Dot
   &::after

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

@@ -10,3 +10,11 @@
     top: 50%
     left: 50%
     transform: translate(-50%, -50%)
+
+@mixin absolute-center($width, $height: null)
+  $height: if($height, $height, $width)
+  +width-height($width, $height)
+  top: 50%
+  left: 50%
+  position: absolute
+  margin: ($height / -2) 0 0 ($width / -2)

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

@@ -7,11 +7,6 @@
   -webkit-backdrop-filter: $value
   backdrop-filter: $value
 
-@mixin background-clip($value)
-  -webkit-background-clip: $value
-  -moz-background-clip: $value
-  background-clip: $value
-
 @mixin mask($value)
   -webkit-mask: $value
   mask: $value

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

@@ -0,0 +1,4 @@
+.o
+  @each $value in (95, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30, 25, 20, 15, 10, 05)
+    &-#{$value}
+      opacity: $value / 100

data/lib/shipyard-framework/icons.rb

@@ -48,18 +48,12 @@ module Shipyard
           symbol: File.basename(file).gsub(/.svg/, '').underscore.to_sym,
           view_box: html[/viewBox="(.*?)"/, 1],
           outer_html: html.gsub(/\n|\s+\s+/, ''),
-          inner_html: sanitize_svg(html).gsub(/\n|\s+\s+/, ''),
+          inner_html: html[/<svg.*?>([\s\S]*?)<\/svg>/, 1].gsub(/\n|\s+\s+/, ''),
           is_outlined: html.include?('non-scaling-stroke')
         }
       end
     end
 
-    def sanitize_svg(html)
-      sanitize(html,
-               tags: %w(g circle rect path line polyline polygon ellipse),
-               attributes: %w(x x1 x2 y y1 y2 d cx cy r rx ry vector-effect points class fill stroke opacity))
-    end
-
     def svg_symbol(icon)
       %(<g id="#{icon[:id]}" viewBox="#{icon[:view_box]}">#{icon[:inner_html]}</g>)
     end

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.70'
+  VERSION = '0.5.71'
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.70)
+    shipyard-framework (0.5.71)
       actionview (~> 5.0)
       sprockets-es6 (~> 0.9.2)
 

data/styleguide/_assets/css/views.sass

@@ -11,6 +11,11 @@ hr
   @extend .hr
   +respond-to(margin, (x0: 30px 0, x1: 40px 0, x2: 50px 0))
 
+// Shared
+.section-description
+  @extend .text-light
+  @extend .margin-bottom-md
+
 // Utilities: Colors
 +component('shade')
   &-list

data/styleguide/_plugins/icon_item.rb

@@ -7,15 +7,15 @@ module Jekyll
     def initialize(tag_name, args, options)
       super
       args = args.strip.split(',')
-      @name = eval(args[0])
+      @name = args[0]
       @options = args[1] ? eval("{#{args[1]}}") : {}
     end
 
     def render(context)
       %(
-        <li class="col col-50 col-x1-20 margin-bottom-xs margin-bottom-x1-md margin-bottom-x2-lg" tooltip=":#{@name}">
+        <li class="col col-50 col-x1-20 margin-bottom-xs margin-bottom-x1-md margin-bottom-x2-lg" tooltip="#{@name}">
           <div class="box box-md box-x1-xxl">
-            #{icon @name, @options}
+            #{icon eval(@name), @options}
           </div>
         </li>
       )

data/styleguide/components/alerts.md

@@ -8,7 +8,8 @@ description: Alerts should be used to grab a user's attention before proceeding
 ---
 
 ### Dismissible
-<p class="text-light margin-bottom-sm">Used to display notes, tips, and other non-critical information.</p>
+Used to display notes, tips, and other non-critical information.
+{: .section-description }
 
 {% alert :dismissible %}
   Ten other people are also viewing tickets for <a href="#">this flight</a>.
@@ -18,7 +19,8 @@ description: Alerts should be used to grab a user's attention before proceeding
 ---
 
 ### Default `.alert`
-<p class="text-light margin-bottom-sm">Used to display notes, tips, and other non-critical information.</p>
+Used to display notes, tips, and other non-critical information.
+{: .section-description }
 
 {% alert %}
   Ten other people are also viewing tickets for <a href="#">this flight</a>.
@@ -29,7 +31,8 @@ description: Alerts should be used to grab a user's attention before proceeding
 ---
 
 ### Info `.alert-info`
-<p class="text-light margin-bottom-sm">Useful when drawing attention to non-critical information or actions we want the user to take.</p>
+Useful when drawing attention to non-critical information or actions we want the user to take.
+{: .section-description }
 
 {% alert :info %}
   Ten other people are also viewing tickets for <a href="#">this flight</a>.
@@ -40,7 +43,8 @@ description: Alerts should be used to grab a user's attention before proceeding
 ---
 
 ### Success `.alert-success`
-<p class="text-light margin-bottom-sm">Useful when drawing attention to interactions that have produced successful results.</p>
+Useful when drawing attention to interactions that have produced successful results.
+{: .section-description }
 
 {% alert :success %}
   Pack your bags! You'll be on the next flight to Hawaii.
@@ -51,7 +55,8 @@ description: Alerts should be used to grab a user's attention before proceeding
 ---
 
 ### Warning `.alert-warning`
-<p class="text-light margin-bottom-sm">Useful when drawing attention to critical, time-sensitive information &mdash; even if nothing has gone wrong.</p>
+Useful when drawing attention to critical, time-sensitive information &mdash; even if nothing has gone wrong.
+{: .section-description }
 
 {% alert :warning %}
   There are only 2 seats left on this flight! We recommend to <a href="#">book your tickets</a> as soon as possible.
@@ -62,7 +67,8 @@ description: Alerts should be used to grab a user's attention before proceeding
 ---
 
 ### Error `.alert-error`
-<p class="text-light margin-bottom-sm">Useful when drawing attention to something that has gone critically wrong.</p>
+Useful when drawing attention to something that has gone critically wrong.
+{: .section-description }
 
 {% alert :error %}
   This flight is now sold out. Let's get you on the <a href="#">next flight to Kauai</a>.

data/styleguide/components/boxes.md

@@ -9,7 +9,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
 ### Default `.box`
-<p class="text-light margin-bottom-sm">Useful when needing to draw extra attention to a particular group of content.</p>
+Useful when needing to draw extra attention to a particular group of content.
+{: .section-description }
 
 {% box %}
   <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
@@ -18,7 +19,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
 ### Padded `.box-padding`
-<p class="text-light margin-bottom-sm">Useful when needing to draw extra attention to a particular group of content.</p>
+Useful when needing to draw extra attention to a particular group of content.
+{: .section-description }
 
 {% box :padding %}
   <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
@@ -27,7 +29,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
 ### Linked `.box-link`
-<p class="text-light margin-bottom-sm">Useful when linking important components to another page or another group of content.</p>
+Useful when linking important components to another page or another group of content.
+{: .section-description }
 
 {% box :link %}
   <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
@@ -36,7 +39,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
 ### Linked & Active `.box-link-active`
-<p class="text-light margin-bottom-sm">Useful when linking important components to another page or another group of content.</p>
+Useful when linking important components to another page or another group of content.
+{: .section-description }
 
 {% box :link, :link_active %}
   <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
@@ -45,7 +49,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
 ### Linked & Selected `.box-link-selected`
-<p class="text-light margin-bottom-sm">Useful when highlighting a linked box that's been selected by the user.</p>
+Useful when highlighting a linked box that's been selected by the user.
+{: .section-description }
 
 {% box :link, :link_selected %}
   <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
@@ -54,7 +59,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
 ### Secondary `.box-secondary`
-<p class="text-light margin-bottom-sm">Useful when connecting secondary information to the default box styles.</p>
+Useful when connecting secondary information to the default box styles.
+{: .section-description }
 
 {% box :secondary %}
   <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
@@ -64,7 +70,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
 ### Box Sizes `.box-[{{ page.box_sizes | join: ', ' }}]`
-<p class="text-light margin-bottom-sm">Useful when you need to create boxes with fixed heights. Note: The <a href="{{ site.baseurl }}/utilities/responsive">responsive utility classes</a> can also be applied to each box size.</p>
+Useful when you need to create boxes with fixed heights. Note: The <a href="{{ site.baseurl }}/utilities/responsive">responsive utility classes</a> can also be applied to each box size.
+{: .section-description }
 
 {% for size in page.box_sizes %}
   <div class="box box-{{ size }} margin-top-md">
@@ -75,7 +82,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
 ### Rounded `.box-rounded`
-<p class="text-light margin-bottom-sm">Useful when you need a box with rounded corners.</p>
+Useful when you need a box with rounded corners.
+{: .section-description }
 
 {% for size in page.box_sizes %}
   <div class="box box-rounded box-{{ size }} margin-top-md">

data/styleguide/components/buttons.md

@@ -6,30 +6,108 @@ title: Shipyard Buttons
 
 ---
 
-## Button Types
-<div class="box-padding align-center">
-  {% btn Default %}
-  {% btn Primary, :primary %}
-  {% btn Primary Dark, :primary_dark %}
-  {% btn Secondary, :secondary %}
-  {% btn Secondary Link, :secondary_link %}
-  {% btn Secondary Dark, :secondary_dark %}
-  {% btn Disabled, :disabled %}
-  {% btn CTA, :cta %}
-  {% btn Caution, :caution %}
+## Common Buttons
+Shipyard gives you more buttons than you can shake a stick at.
+{: .section-description }
+
+<div class="margin-bottom-md">
+  {% btn Default, :default, class: 'margin-right-xs' %}
+  {% btn Primary, :primary, class: 'margin-right-xs' %}
+  {% btn Primary Dark, :primary_dark, class: 'margin-right-xs' %}
+  {% btn CTA, :cta, class: 'margin-right-xs' %}
+  {% btn Caution, :caution, class: 'margin-right-xs' %}
+  {% btn Disabled, :disabled, class: 'margin-right-xs' %}
   {% btn Link, :link %}
-  {% btn Rounded, :rounded %}
 </div>
-<div class="box-secondary box-padding align-center bg-gray-dark">
-  {% btn Inverse, :inverse %}
-  {% btn Inverse, :inverse_secondary, class: 'margin-left-xs' %}
+
+```html
+{% btn Default %}
+{% btn Primary, :primary %}
+{% btn Primary Dark, :primary_dark %}
+{% btn CTA, :cta %}
+{% btn Caution, :caution %}
+{% btn Disabled, :disabled %}
+{% btn Link, :link %}
+```
+
+---
+
+## Secondary Buttons
+Useful when you have a button on a darker background.
+{: .section-description }
+
+<div class="margin-bottom-md">
+  {% btn Secondary, :secondary, class: 'margin-right-xs' %}
+  {% btn Secondary Dark, :secondary_dark, class: 'margin-right-xs' %}
+  {% btn Secondary Link, :secondary_link %}
+</div>
+
+```html
+{% btn Secondary, :secondary %}
+{% btn Secondary Dark, :secondary_dark %}
+{% btn Secondary Link, :secondary_link %}
+```
+
+---
+
+## Inverse Buttons
+Useful when you have a button on a darker background.
+{: .section-description }
+
+<div class="box-secondary box-padding bg-gray-dark margin-bottom-md">
+  {% btn Inverse, :inverse, class: 'margin-right-xs' %}
+  {% btn Inverse Secondary, :inverse_secondary %}
+</div>
+
+```html
+{% btn Inverse, :inverse %}
+{% btn Inverse Secondary, :inverse_secondary %}
+```
+
+---
+
+## Rounded Buttons
+Useful when you want a button with completely rounded corners.
+{: .section-description }
+
+<div class="margin-bottom-md">
+  {% btn Default, :rounded, class: 'margin-right-xs' %}
+  {% btn Primary, :primary :rounded, class: 'margin-right-xs' %}
+  {% btn CTA, :cta :rounded, class: 'margin-right-xs' %}
+  {% btn Caution, :caution :rounded, class: 'margin-right-xs' %}
+  {% btn Secondary, :secondary :rounded %}
 </div>
 
+```html
+{% btn Rounded, :rounded %}
+```
+
+---
+
+## Loading Buttons
+Useful when you have a button that triggers an asynchronous action.
+{: .section-description }
+
+<div class="margin-bottom-md">
+  {% btn Default, :loading, class: 'margin-right-xs' %}
+  {% btn Primary, :primary :loading, class: 'margin-right-xs' %}
+  {% btn CTA, :cta :loading, class: 'margin-right-xs' %}
+  {% btn Caution, :caution :loading, class: 'margin-right-xs' %}
+  {% btn Secondary, :secondary :loading, class: 'margin-right-xs' %}
+  {% btn Secondary Link, :secondary_link :loading, class: 'margin-right-xs' %}
+</div>
+
+```html
+{% btn Default, :loading %}
+```
+
 ---
 
 ### Full-Screen Buttons
+Often really useful on mobile screens or in combination with other grids.
+{: .section-description }
 
-<div class="box-padding align-center">
+<div class="margin-bottom-md">
   {% btn Save Changes, :full %}
 </div>
 
@@ -40,7 +118,8 @@ title: Shipyard Buttons
 ---
 
 ### Common Buttons Tags
-<p class="text-light margin-bottom-md" markdown="1">The button classes can be applied to any type of html tag to achieve the desired result. The most common examples being the `button`, `a`, and `input` tags as seen in the example below.</p>
+The button classes can be applied to any type of html tag to achieve the desired result. The most common examples being the `button`, `a`, and `input` tags as seen in the example below.
+{: .section-description }
 
 <div class="margin-bottom-lg">
   {% btn Button %}
@@ -57,6 +136,7 @@ title: Shipyard Buttons
 ---
 
 ## Button Sizes (default: md)
+
 <div class="box-padding align-center">
   {% btn XX-Small, :xxs %}
   {% btn X-Small, :xs %}

data/styleguide/components/checkboxes.md

@@ -136,7 +136,7 @@ labels:
 
 ---
 
-## Checkbox Switches
+## Checkbox-Switches
 <p class="text-light margin-bottom-md">Switches are useful when the user has a choice to toggle on and off. Note: For the best UX, please make sure that the switch saves immediately each time it changes state.</p>
 
 <div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
@@ -161,7 +161,7 @@ labels:
 
 ---
 
-## Secondary Checkbox Switches
+## Secondary Checkbox-Switches
 <p class="text-light margin-bottom-md">Useful when you don't need to draw attention to the bright-red, off state.</p>
 
 <div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
@@ -181,20 +181,42 @@ labels:
   </div>
 </div>
 ```html
-<input type="checkbox" class="input input-switch" />
+<input type="checkbox" class="input input-switch-secondary" />
 ```
 
 ---
 
-## Small Checkbox Switches
+## Checkbox-Switch Sizes
 <p class="text-light margin-bottom-md">Useful when you want to show checkboxes inline next to a text label.</p>
-<div>
-  <input id="small-switch-off" type="checkbox" class="input input-switch input-switch-sm align-middle" />
-  <label for="small-switch-off" class="text-sm text-light margin-left-xxs medium margin-right-md">Checkbox Switch Off</label>
+<ul class="input-list">
+  <li class="input-item">
+    <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-sm align-middle" checked />
+    <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Small</label>
+  </li>
+  <li class="input-item">
+    <input id="small-switch-on" type="checkbox" class="input input-switch align-middle" checked />
+    <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Medium (Default)</label>
+  </li>
+  <li class="input-item">
+    <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-lg align-middle" checked />
+    <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Large</label>
+  </li>
+  <li class="input-item">
+    <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-xl align-middle" checked />
+    <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">X-Large</label>
+  </li>
+</ul>
 
-  <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-sm align-middle" checked />
-  <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Checkbox Switch On</label>
-</div>
 ```html
+<!-- Input-Switch: Small -->
 <input type="checkbox" class="input input-switch input-switch-sm" />
+
+<!-- Input-Switch: Medium (Default) -->
+<input type="checkbox" class="input input-switch" />
+
+<!-- Input-Switch: Large -->
+<input type="checkbox" class="input input-switch input-switch-lg" />
+
+<!-- Input-Switch: X-Large -->
+<input type="checkbox" class="input input-switch input-switch-xl" />
 ```

data/styleguide/components/forms.html

@@ -10,6 +10,10 @@ title: Shipyard Forms
   <label class="label">Textbox</label>
   <input type="text" class="input input-text" placeholder=".input-text" />
 </div>
+<div class="input-group">
+  <label class="label">Textbox Disabled</label>
+  <input type="text" class="input input-text" placeholder=".input-text" disabled />
+</div>
 <div class="input-group">
   <label class="label">Textbox</label>
   <input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
@@ -20,15 +24,28 @@ title: Shipyard Forms
   <input type="text" class="input input-text input-full input-text-connect-middle" placeholder=".input-text-connect-middle" />
   <input type="text" class="input input-text input-full input-text-connect-bottom" placeholder=".input-text-connect-bottom" />
 </div>
-<div class="input-group">
-  <label class="label">Select Boxes</label>
-  <div class="input-select-container">
-    <select class="input input-select">
-      <option class="input-option-placeholder">.input-select</option>
-      {% for i in (1..10) %}
-        <option>{{ i }}</option>
-      {% endfor %}
-    </select>
+<div class="col-container input-group">
+  <div class="col">
+    <label class="label">Select Boxes</label>
+    <div class="input-select-container">
+      <select class="input input-select">
+        <option class="input-option-placeholder">.input-select</option>
+        {% for i in (1..10) %}
+          <option>{{ i }}</option>
+        {% endfor %}
+      </select>
+    </div>
+  </div>
+  <div class="col">
+    <label class="label">Select Box Disabled</label>
+    <div class="input-select-container">
+      <select class="input input-select" disabled>
+        <option class="input-option-placeholder">.input-select</option>
+        {% for i in (1..10) %}
+          <option>{{ i }}</option>
+        {% endfor %}
+      </select>
+    </div>
   </div>
 </div>
 

data/styleguide/components/icons.md

@@ -27,20 +27,23 @@ description: Shipyard comes with several default icons that you're welcome to us
 <p class="text-light margin-bottom-md" markdown="1">If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.</p>
 
 <ul class="icon-list col-container">
-  {% iconitem :bitbucket, class: 'center' %}
-  {% iconitem :campfire_color, class: 'center' %}
-  {% iconitem :codeship, class: 'center' %}
-  {% iconitem :email_color, class: 'center' %}
-  {% iconitem :flowdock_color, class: 'center' %}
-  {% iconitem :github, class: 'center' %}
-  {% iconitem :gitlab, class: 'center' %}
-  {% iconitem :grove_color, class: 'center' %}
-  {% iconitem :hipchat, class: 'center' %}
-  {% iconitem :hipchat_color, class: 'center' %}
-  {% iconitem :slack, class: 'center' %}
-  {% iconitem :slack_color, class: 'center' %}
-  {% iconitem :webhook, class: 'center' %}
-  {% iconitem :webhook_color, class: 'center' %}
+  {% iconitem 'bitbucket', class: 'center gray icon-xl' %}
+  {% iconitem 'bitbucket-color', class: 'center icon-xl' %}
+  {% iconitem :campfire_color, class: 'center icon-xl' %}
+  {% iconitem :codeship, class: 'center icon-xl' %}
+  {% iconitem :email_color, class: 'center icon-xl' %}
+  {% iconitem :flowdock_color, class: 'center icon-xl' %}
+  {% iconitem :github, class: 'center icon-xl' %}
+  {% iconitem :gitlab, class: 'center icon-xl' %}
+  {% iconitem :gitlab_color, class: 'center icon-xl' %}
+  {% iconitem :google_app_engine, class: 'center icon-xl' %}
+  {% iconitem :grove_color, class: 'center icon-xl' %}
+  {% iconitem :hipchat, class: 'center icon-xl' %}
+  {% iconitem :hipchat_color, class: 'center icon-xl' %}
+  {% iconitem :slack, class: 'center icon-xl' %}
+  {% iconitem :slack_color, class: 'center icon-xl' %}
+  {% iconitem :webhook, class: 'center icon-xl' %}
+  {% iconitem :webhook_color, class: 'center icon-xl' %}
 </ul>
 
 ---

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.70
+  version: 0.5.71
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-15 00:00:00.000000000 Z
+date: 2017-11-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -175,13 +175,16 @@ files:
 - assets/icons/card.svg
 - assets/icons/gear.svg
 - assets/icons/lock.svg
+- assets/icons/logos/bitbucket-color.svg
 - assets/icons/logos/bitbucket.svg
 - assets/icons/logos/campfire-color.svg
 - assets/icons/logos/codeship.svg
 - assets/icons/logos/email-color.svg
 - assets/icons/logos/flowdock-color.svg
 - assets/icons/logos/github.svg
+- assets/icons/logos/gitlab-color.svg
 - assets/icons/logos/gitlab.svg
+- assets/icons/logos/google-app-engine.svg
 - assets/icons/logos/grove-color.svg
 - assets/icons/logos/hipchat-color.svg
 - assets/icons/logos/hipchat.svg
@@ -245,6 +248,7 @@ files:
 - assets/stylesheets/shipyard/utilities/_display.sass
 - assets/stylesheets/shipyard/utilities/_grid.sass
 - assets/stylesheets/shipyard/utilities/_margin-padding.sass
+- assets/stylesheets/shipyard/utilities/_opacity.sass
 - assets/stylesheets/shipyard/utilities/_positioning.sass
 - assets/stylesheets/shipyard/utilities/_typography.sass
 - assets/stylesheets/shipyard/variables/_color_utilities.sass