shipyard-framework 0.5.52 → 0.5.53

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a184e3081ad928166cb7479171c26f3034e23164
-  data.tar.gz: ae0b4e7db59b13f034d8a525c429597995e03b66
+  metadata.gz: ef8c9319757ab1713fe365d227b956abdd90920a
+  data.tar.gz: 77cf41e1c48bd7f9bcf4b7486a2b651afb5799e2
 SHA512:
-  metadata.gz: d938e696d0819069532426962cb6111db3b841e08f99519da8d84f8aa73fcee4d2847d03ec8aff5e70112f68dd6e3f7d28dbbb780f0e67df2298d36eefe1a40b
-  data.tar.gz: 9dc25e348d7c5e310f810ac59f6891ac447c13cf62b741eb2de06c949a107f4091ace93d21b1fbe533c023fd2f6f1fe2379dab822ea7209bd4faa0340ae8bffa
+  metadata.gz: 44b221200f52d73332f4a36eb03ebc3e83a9131b42c98024dca56f0b0f16a8e429927d4e8a7dc818305b2adf5e647168965382d231583d2363e97a31461c1675
+  data.tar.gz: c6492dd8990084f109ec0274aafc6aaa2591e2de7b293c10b0caf4ec0382b828e72a9f8ca22aab1688f97cb5f7031e63288b4906e08dd30272b93cec6204750b

data/assets/stylesheets/shipyard/_utilities.sass

@@ -4,3 +4,4 @@
 @import shipyard/utilities/positioning
 @import shipyard/utilities/typography
 @import shipyard/utilities/margin
+@import shipyard/utilities/padding

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

@@ -19,11 +19,14 @@
   &-link
     color: $blue
     cursor: pointer
-    &:hover, &-selected, &-active
+    &:hover, &:active, &-selected, &-active
       color: $blue-dark
+      outline: none
       box-shadow: 0 0 4px 1px rgba($blue,.5)
     &-active-green,
-    &-active-green:hover
+    &-active-green:hover,
+    &-active-green:active
+      outline: none
       cursor: default
       box-shadow: 0 0 4px 1px rgba(darken($green, 5%),.75)
 

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

@@ -40,7 +40,7 @@
     +respond-to(padding, (x0: 0 15px, x1: 0 20px))
     +when('error')
       border-color: $red
-    &:focus
+    &:hover, &:focus
       border-color: $border-color-dark
       +when('error')
         border-color: darken($red, 15%)
@@ -77,7 +77,7 @@
     +respond-to(padding, (x0: 10px 15px, x1: 10px 20px))
     +when('error')
       border-color: $red
-    &:focus
+    &:hover, &:focus
       border-color: $border-color-dark
       +when('error')
         border-color: darken($red, 15%)

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

@@ -10,6 +10,11 @@ svg, path, circle, polyline
   transform-origin: center center
   +width-height(1em)
 
+  &-center
+    position: relative
+    vertical-align: middle
+    top: -1px
+
   // Icons w/ Margins
   &-margin-left
     margin-left: 5px
@@ -40,6 +45,9 @@ svg, path, circle, polyline
   &-bitbucket
     +width-height(16px)
 
+  &-lock
+    +width-height(12px, 14px)
+
   &-arrow-down
     @extend .icon-outline
     +width-height(10px, 6px)

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

@@ -0,0 +1,7 @@
+.padding
+  @each $direction in (top, right, bottom, left)
+    &-#{$direction}
+      +all-media-sizes
+        @each $size, $value in (none: 0, xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px)
+          &-#{$size}
+            padding-#{$direction}: $value

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

@@ -4,6 +4,10 @@
 .p
   margin: 15px 0
 
+.normal
+  +all-media-sizes
+    font-weight: $normal
+
 .medium
   +all-media-sizes
     font-weight: $medium

data/lib/shipyard-framework/jekyll/tags/button_tag.rb

@@ -8,7 +8,7 @@ module Shipyard
       def initialize(tag_name, params, options)
         super
         @params = params.split(',')
-        @text = @params[0]
+        @text = @params[0].strip
         @args = @params[1].to_s.tr(':','').split(' ').map(&:to_sym)
         @args << eval("{#{@params[2]}}") if @params[2]
       end

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.52'
+  VERSION = '0.5.53'
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.3)
+    shipyard-framework (0.5.53)
       actionview (~> 5.0)
       sprockets-es6 (~> 0.9.2)
 
@@ -29,15 +29,16 @@ GEM
     colorator (1.1.0)
     concurrent-ruby (1.0.5)
     crass (1.0.2)
-    erubi (1.6.1)
+    erubi (1.7.0)
     execjs (2.7.0)
     extras (0.3.0)
       forwardable-extended (~> 2.5)
     fastimage (2.1.0)
     ffi (1.9.18)
     forwardable-extended (2.6.0)
-    i18n (0.8.6)
-    jekyll (3.6.0)
+    i18n (0.9.0)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.6.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       jekyll-sass-converter (~> 1.0)
@@ -73,7 +74,7 @@ GEM
     minitest (5.10.3)
     nokogiri (1.8.1)
       mini_portile2 (~> 2.3.0)
-    pathutil (0.14.0)
+    pathutil (0.16.0)
       forwardable-extended (~> 2.6)
     public_suffix (3.0.0)
     rack (1.6.8)
@@ -87,7 +88,7 @@ GEM
       ffi (>= 0.5.0, < 2)
     rouge (2.2.1)
     safe_yaml (1.0.4)
-    sass (3.5.1)
+    sass (3.5.2)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)

data/styleguide/_assets/css/views.sass

@@ -50,3 +50,7 @@ hr
       color: rgba(#fff,.7)
     +when('light:hover')
       color: rgba($gray-darker,.6)
+
++component('utilities-margin-padding')
+  &-box
+    line-height: 40px

data/styleguide/components/buttons.md

@@ -10,11 +10,14 @@ title: Shipyard Buttons
 <div class="box-padding align-center">
   {% btn Default %}
   {% btn Primary, :primary %}
+  {% btn Primary Dark, :primary_dark %}
   {% btn Secondary, :secondary %}
+  {% btn Secondary Dark, :secondary_dark %}
   {% btn Disabled, :disabled %}
   {% btn CTA, :cta %}
   {% btn Caution, :caution %}
   {% btn Link, :link %}
+  {% btn Rounded, :rounded %}
 </div>
 <div class="box-secondary box-padding align-center bg-gray-dark">
   {% btn Inverse, :inverse %}
@@ -23,12 +26,33 @@ title: Shipyard Buttons
 
 ---
 
+### Full-Screen Buttons
+
 <div class="box-padding align-center">
+  {% btn Save Changes, :full %}
+</div>
+
+```html
+{% btn Save Changes, :full %}
+```
+
+---
+
+### 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>
+
+<div class="margin-bottom-lg">
   {% btn Button %}
   <a href="#" class="btn">Link</a>
   <input type="button" class="btn" value="Input" />
 </div>
 
+```html
+{% btn Button %}
+<a href="#" class="btn">Link</a>
+<input type="button" class="btn" value="Input" />
+```
+
 ---
 
 ## Button Sizes (default: md)

data/styleguide/components/icons.md

@@ -156,3 +156,19 @@ description: Shipyard comes with several default icons that you're welcome to us
 <%= icon :gear, class: 'icon-lg' %>
 <%= icon :gear, class: 'icon-xl' %>
 ```
+
+---
+
+### Centered Icons
+<p class="text-light margin-bottom-md" markdown="1">One of the most common problems when using an icon is that doesn't line up with the text content next to it. Don't worry though, we've got you covered — simply apply the `.icon-center` class to any icon to fix this issue.</p>
+
+<div class="margin-bottom-lg">
+  <button class="btn btn-secondary">{% icon :plus, class: 'icon-center icon-sm margin-right-xxs' %} Create</button>
+</div>
+
+```html
+<button class="btn btn-secondary">
+  <%= icon :plus, class: 'icon-center icon-sm' %>
+  Create
+</button>
+```

data/styleguide/utilities/index.md

@@ -1,7 +1,7 @@
 ---
 title: Shipyard Utilities
 description: The utility classes below can be applied to any component to override or extend the base styles of the component.
-utilities: [Responsive, Grid, Typography, Colors]
+utilities: [Responsive, Grid, Typography, Margin & Padding, Colors]
 ---
 
 {% include page-heading.html page=page %}
@@ -11,7 +11,7 @@ utilities: [Responsive, Grid, Typography, Colors]
 <ul class="col-container">
   {% for utility in page.utilities %}
     <li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-33 col-x2-25">
-      <a href="{{ site.baseurl }}/utilities/{{ utility | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-md text-x1-lg text-x2-xl">
+      <a href="{{ site.baseurl }}/utilities/{{ utility | replace: ' ', '-' | replace: '&', '' | replace: '--', '-' | downcase }}" class="box-link box-padding align-center text-md text-x1-lg text-x2-xl">
         {{ utility }}
       </a>
     </li>

data/styleguide/utilities/margin-padding.md

@@ -0,0 +1,71 @@
+---
+title: Margin & Padding Utilities
+description: Shipyard's margin & padding utilities are useful for overriding the default margin and padding in any component, and can be extremely useful in a wide array of situations.
+box_classes: utilities-margin-padding-box box-secondary btn-sm medium text-light
+options: [none,xxs,xs,sm,md,lg,xl,xxl]
+directions: [left,right]
+---
+
+{% include page-heading.html page=page %}
+
+---
+
+### Margin Top & Bottom `.margin-{ top, bottom }-{ x1..x4 }-{ xxs..xxl }`
+<p class="text-light margin-bottom-md">The examples below demonstrate how much margin will be added to the top and bottom of any element the classes is applied to.</p>
+
+<div class="col-container">
+  {% for option in page.options %}
+    <div class="col align-center">
+      <div class="{{ page.box_classes }} margin-bottom-{{ option }}">{{ option }}</div>
+      <div class="{{ page.box_classes }} margin-top-{{ option }}">{{ option }}</div>
+    </div>
+  {% endfor %}
+</div>
+
+---
+
+### Margin Left & Right `.margin-{ left, right }-{ x1..x4 }-{ xxs..xxl }`
+<p class="text-light margin-bottom-md">The examples below demonstrate how much margin will be added to the left and right sides of any element the classes is applied to.</p>
+
+<div class="col-container">
+  {% for direction in page.directions %}
+    <div class="col">
+      <div class="align-{{ direction }}">
+        {% for option in page.options %}
+          <div class="{{ page.box_classes }} margin-{{ direction }}-{{ option }} margin-bottom-md">.margin-{{ direction }}-{{ option }}</div>
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+</div>
+
+---
+
+### Padding Top & Bottom `.padding-{ top, bottom }-{ x1..x4 }-{ xxs..xxl }`
+<p class="text-light margin-bottom-md">The examples below demonstrate how much padding will be added to the top and bottom of any element the classes is applied to.</p>
+
+<div class="col-container">
+  {% for option in page.options %}
+    <div class="col align-center">
+      <div class="box-secondary medium text-light text-sm padding-bottom-{{ option }} margin-bottom-xs">{{ option }}</div>
+      <div class="box-secondary medium text-light text-sm padding-top-{{ option }}">{{ option }}</div>
+    </div>
+  {% endfor %}
+</div>
+
+---
+
+### Padding Left & Right `.padding-{ left, right }-{ x1..x4 }-{ xxs..xxl }`
+<p class="text-light margin-bottom-md">The examples below demonstrate how much padding will be added to the left and right sides of any element the classes is applied to</p>
+
+<div class="col-container">
+  {% for direction in page.directions %}
+    <div class="col">
+      <div class="align-{{ direction }}">
+        {% for option in page.options %}
+          <div class="{{ page.box_classes }} padding-{{ direction }}-{{ option }} margin-bottom-md">.padding-{{ direction }}-{{ option }}</div>
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+</div>

data/styleguide/utilities/typography.html

@@ -9,7 +9,7 @@ text_shades: [normal, light, lighter, lightest]
 <hr />
 
 <div class="col-container">
-  <div class="col col-20">
+  <div class="col">
     <h1>h1. Heading</h1>
     <h2>h2. Heading</h2>
     <h3>h3. Heading</h3>
@@ -17,13 +17,34 @@ text_shades: [normal, light, lighter, lightest]
     <h5>h5. Heading</h5>
     <h6>h6. Heading</h6>
   </div>
-  <div class="col col-20">
+  <div class="col">
     <h3>Text Sizes</h3>
     {% for size in page.text_sizes %}
       <p class="text-{{ size }}">.text-{{ size }}</p>
     {% endfor %}
   </div>
-  <div class="col col-20">
+  <div class="col">
+    <h3>Font Weights</h3>
+    <ul>
+      <li class="normal">.normal</li>
+      <li class="medium">.medium</li>
+      <li class="strong">.strong</li>
+    </ul>
+  </div>
+  <div class="col">
+    <h3>Text Alignment</h3>
+    <ul>
+      <li class="align-left">.align-left</li>
+      <li class="align-center">.align-center</li>
+      <li class="align-right">.align-right</li>
+    </ul>
+  </div>
+</div>
+
+<hr />
+
+<div class="col-container">
+  <div class="col">
     <h3>Text Shades</h3>
     <div class="box box-padding margin-top-xs">
       <ul class="list strong">
@@ -33,7 +54,7 @@ text_shades: [normal, light, lighter, lightest]
       </ul>
     </div>
   </div>
-  <div class="col col-20">
+  <div class="col">
     <h3>Inverse Text Shades</h3>
     <div class="box-secondary box-padding bg-gray-dark margin-top-xs">
       <ul class="list strong">
@@ -45,12 +66,4 @@ text_shades: [normal, light, lighter, lightest]
       </ul>
     </div>
   </div>
-  <div class="col col-20">
-    <h3>Text Alignment</h3>
-    <ul>
-      <li class="align-left">.align-left</li>
-      <li class="align-center">.align-center</li>
-      <li class="align-right">.align-right</li>
-    </ul>
-  </div>
 </div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.52
+  version: 0.5.53
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-19 00:00:00.000000000 Z
+date: 2017-10-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -240,6 +240,7 @@ files:
 - assets/stylesheets/shipyard/utilities/_display.sass
 - assets/stylesheets/shipyard/utilities/_grid.sass
 - assets/stylesheets/shipyard/utilities/_margin.sass
+- assets/stylesheets/shipyard/utilities/_padding.sass
 - assets/stylesheets/shipyard/utilities/_positioning.sass
 - assets/stylesheets/shipyard/utilities/_typography.sass
 - assets/stylesheets/shipyard/variables/_color_utilities.sass
@@ -306,6 +307,7 @@ files:
 - styleguide/utilities/colors.md
 - styleguide/utilities/grid.md
 - styleguide/utilities/index.md
+- styleguide/utilities/margin-padding.md
 - styleguide/utilities/responsive.md
 - styleguide/utilities/typography.html
 homepage: https://github.com/codeship/shipyard