shipyard-framework 0.5.76 → 0.5.77

data/styleguide/utilities/border-radius.md

@@ -40,12 +40,41 @@ directions:
 
 ---
 
-## Responsive Options `.rounded-{ breakpoint }-{ direction }`
-<p class="text-light margin-bottom-md">The examples below demonstrate the utility classes on each breakpoint.</p>
+## Sizes `.rounded-{ x1..x4 }-{ size }`
+The examples below demonstrate the utility classes at each size.
+{: .section-description }
+
+<div class="col-container">
+  <div class="{{ page.col_classes }}">
+    <div class="{{ page.box_classes }} rounded">default</div>
+  </div>
+  <div class="{{ page.col_classes }}">
+    <div class="{{ page.box_classes }} rounded-sm">sm</div>
+  </div>
+  <div class="{{ page.col_classes }}">
+    <div class="{{ page.box_classes }} rounded-xs">xs</div>
+  </div>
+  <div class="{{ page.col_classes }}">
+    <div class="{{ page.box_classes }} rounded-0">0</div>
+  </div>
+</div>
+
+```css
+.rounded { border-radius: 5px }
+.rounded-sm { border-radius: 3px }
+.rounded-xs { border-radius: 2px }
+.rounded-0 { border-radius: 0 }
+```
+
+---
+
+## Responsive Options `.rounded-{ x1..x4 }-{ direction }`
+The examples below demonstrate the utility classes on each breakpoint.
+{: .section-description }
 
 ```html
 {% for direction in page.directions -%}
-  <div class="{{ 'rounded' | component_css_class: direction.modifier }}"><!-- {{ direction.label }} --></div>
+  <div class="{% if direction.modifier != 0 and direction.modifier != none %}rounded {% endif %}{{ 'rounded' | component_css_class: direction.modifier }}"><!-- {{ direction.label }} --></div>
 {% endfor -%}
 ```
 
@@ -54,7 +83,7 @@ directions:
   <div class="col-container">
     {% for direction in page.directions %}
       <div class="{{ page.col_classes }}">
-        <div class="{{ page.box_classes }} {{ 'rounded' | component_css_class: breakpoint.modifier, direction.modifier }}" tooltip="{{ '.rounded' | component_css_class: breakpoint.modifier, direction.modifier }}">
+        <div class="{{ page.box_classes }} rounded {{ 'rounded' | component_css_class: breakpoint.modifier, direction.modifier }}" tooltip="{{ '.rounded' | component_css_class: breakpoint.modifier, direction.modifier }}">
           {{ direction.label }}
         </div>
       </div>

data/styleguide/utilities/grid.md

@@ -2,7 +2,7 @@
 title: Shipyard Grid
 description: The Shipyard grid is a percentage-based, flexbox grid and is entirely responsive. Each class needs the foundational `.col` class in order to function properly, and also should be contained inside the `.col-container` as well.
 container_classes: col-container margin-top-xs margin-top-x1-sm margin-top-x2-md margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-md
-box_classes: utilities-grid-box col-center box-secondary text-light text-sm strong align-center
+box_classes: utilities-grid-box col-center box-secondary text-lighter text-sm strong align-center
 example_flex_columns: [10,20,25,33,50]
 example_sizes: [5,10,15,20,25,30,33,35,40,45,50,55,60,65,66,70,75,80,85,90,95,100]
 example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
@@ -13,7 +13,8 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 ---
 
 ### Flexible Columns `.col`
-<p class="text-light margin-bottom-md">By default, the flexbox-based grid will automatically size each column inside the container.</p>
+By default, the flexbox-based grid will automatically size each column inside the container.
+{: .section-description }
 
 {% for example in page.example_flex_columns %}
   <div class="{{ page.container_classes }}">
@@ -45,7 +46,8 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 ---
 
 ### Column Sizes `.col-{ n }`
-<p class="text-light margin-bottom-md" markdown="1">The column sizes are percentage-based and available in any size from `5-100` in increments of 5.</p>
+The column sizes are percentage-based and available in any size from `5-100` in increments of 5.
+{: .section-description }
 
 {% for example in page.example_sizes %}
   <div class="{{ page.container_classes }}">
@@ -76,7 +78,8 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 ---
 
 ### Offset Columns `.col-offset-{ n }`
-<p class="text-light margin-bottom-md">Useful when you need to push columns to the right to fill some empty space.</p>
+Useful when you need to push columns to the right to fill some empty space.
+{: .section-description }
 
 {% assign example_offsets = page.example_offsets | reverse %}
 {% for i in example_offsets %}
@@ -101,7 +104,8 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 ---
 
 ### Responsive Columns `.col-{ x1..x4 }-{ n }`
-<p class="text-light margin-bottom-md" markdown="1">Useful when you want to build a grid that works for any size of screen.</p>
+Useful when you want to build a grid that works for any size of screen.
+{: .section-description }
 
 <div class="{{ page.container_classes }}">
   {% for i in (1..7) %}
@@ -131,7 +135,8 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 ---
 
 ### Take-Up-The-Rest Columns `.col-container-nowrap`
-<p class="text-light margin-bottom-md" markdown="1">This type of layout is useful in all kinds of scenarios, especially when you have the auto-sized column contains some kind of call-to-action.</p>
+This type of layout is useful in all kinds of scenarios, especially when you have the auto-sized column contains some kind of call-to-action.
+{: .section-description }
 
 <div class="{{ page.container_classes | replace: 'col-container', 'col-container-nowrap' }}">
   <div class="col col-100">
@@ -156,7 +161,8 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 ---
 
 ### Nested Columns
-<p class="text-light margin-bottom-md" markdown="1">Nested grids can be tricky to build and somewhat fragile by nature. For the best results, pay special attention to how you want each column to respond at various screen sizes and test each breakpoint thoroughly.</p>
+Nested grids can be tricky to build and somewhat fragile by nature. For the best results, pay special attention to how you want each column to respond at various screen sizes and test each breakpoint thoroughly.
+{: .section-description }
 
 <div class="{{ page.container_classes }}">
   <div class="col col-40 display-flex">
@@ -191,7 +197,8 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 ---
 
 ### Reversible Columns `.flex-{ x1..x4 }-{ col | col-reverse | row | row-reverse }`
-<p class="text-light margin-bottom-md" markdown="1">Useful when the flow of the content should be different at a certain breakpoint.</p>
+Useful when the flow of the content should be different at a certain breakpoint.
+{: .section-description }
 
 <div class="{{ page.container_classes }}">
   <div class="col flex-col flex-x2-col-reverse">

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, Margin & Padding, Colors, Border Radius]
+utilities: [Responsive, Grid, Typography, Margin & Padding, Colors, Border Radius, Position]
 ---
 
 {% include page-heading.html page=page %}

data/styleguide/utilities/margin-padding.md

@@ -11,7 +11,8 @@ directions: [left,right]
 ---
 
 ### Margin All Sides `.margin-{ 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>
+The examples below demonstrate how much margin will be added to the top and bottom of any element the classes is applied to.
+{: .section-description }
 
 <div class="col-container">
   <div class="col">
@@ -27,7 +28,8 @@ directions: [left,right]
 ---
 
 ### 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>
+The examples below demonstrate how much margin will be added to the top and bottom of any element the classes is applied to.
+{: .section-description }
 
 <div class="col-container">
   {% for option in page.options %}
@@ -41,7 +43,8 @@ directions: [left,right]
 ---
 
 ### 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>
+The examples below demonstrate how much margin will be added to the left and right sides of any element the classes is applied to.
+{: .section-description }
 
 <div class="col-container">
   {% for direction in page.directions %}
@@ -58,7 +61,8 @@ directions: [left,right]
 ---
 
 ### Padding All Sides `.padding-{ 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>
+The examples below demonstrate how much padding will be added to the top and bottom of any element the classes is applied to.
+{: .section-description }
 
 <div class="col-container">
   {% for option in page.options %}
@@ -71,7 +75,8 @@ directions: [left,right]
 ---
 
 ### 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>
+The examples below demonstrate how much padding will be added to the top and bottom of any element the classes is applied to.
+{: .section-description }
 
 <div class="col-container">
   {% for option in page.options %}
@@ -85,7 +90,8 @@ directions: [left,right]
 ---
 
 ### 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>
+The examples below demonstrate how much padding will be added to the left and right sides of any element the classes is applied to
+{: .section-description }
 
 <div class="col-container">
   {% for direction in page.directions %}

data/styleguide/utilities/position.md

@@ -0,0 +1,19 @@
+---
+title: Position Utilities
+description: Shipyard's position utilities are helpful to override the default styles of component.
+position_utilities: [static, relative, absolute, fixed]
+---
+
+{% include page-heading.html page=page %}
+
+---
+
+## Position Utilities `.{ position }-{ x1..x4 }`
+Useful when you need to overwrite the default styles of an element or component.
+{: .section-description }
+
+```css
+{% for utility in page.position_utilities -%}
+.{{ utility }} { position: {{ utility }} }
+{% endfor -%}
+```

data/styleguide/utilities/typography.md

@@ -1,12 +1,12 @@
 ---
 title: Shipyard Typography
 text_sizes: [xxs, xs, sm, md, lg, xl, xxl, xxxl]
-text_shades: [normal, light, lighter, lightest]
+text_shades: [darkest, darker, dark, normal, light, lighter, lightest]
 ---
 
 {% include page-heading.html page=page %}
 
-<hr />
+---
 
 <div class="col-container">
   <div class="col">
@@ -47,7 +47,7 @@ text_shades: [normal, light, lighter, lightest]
   <div class="col">
     <h3>Text Shades</h3>
     <div class="box box-padding margin-top-xs">
-      <ul class="list strong">
+      <ul class="list medium">
         {% for shade in page.text_shades %}
           <li class="text-{{ shade }}">.text-{{ shade }}</li>
         {% endfor %}
@@ -57,7 +57,7 @@ text_shades: [normal, light, lighter, lightest]
   <div class="col">
     <h3>Inverse Text Shades</h3>
     <div class="box-secondary box-padding bg-gray-dark margin-top-xs">
-      <ul class="list strong">
+      <ul class="list medium">
         {% for shade in page.text_shades %}
           <li class="text-inverse{{ '-' | append: shade | replace: '-normal', '' }}">
             .text-inverse{{ '-' | append: shade | replace: '-normal', '' }}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.76
+  version: 0.5.77
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-28 00:00:00.000000000 Z
+date: 2017-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -173,6 +173,7 @@ files:
 - app/views/shipyard/_alerts.slim
 - assets/icons/arrows/arrow-down.svg
 - assets/icons/card.svg
+- assets/icons/check.svg
 - assets/icons/gear.svg
 - assets/icons/lock.svg
 - assets/icons/logos/bitbucket-color.svg
@@ -227,7 +228,13 @@ files:
 - assets/stylesheets/shipyard/components/_horizontal-rules.sass
 - assets/stylesheets/shipyard/components/_icons.sass
 - assets/stylesheets/shipyard/components/_input-radio-checkbox.sass
+- assets/stylesheets/shipyard/components/_input-readonly.sass
+- assets/stylesheets/shipyard/components/_input-required.sass
+- assets/stylesheets/shipyard/components/_input-select.sass
+- assets/stylesheets/shipyard/components/_input-sizes.sass
 - assets/stylesheets/shipyard/components/_input-switch.sass
+- assets/stylesheets/shipyard/components/_input-text.sass
+- assets/stylesheets/shipyard/components/_input.sass
 - assets/stylesheets/shipyard/components/_modals.sass
 - assets/stylesheets/shipyard/components/_notes.sass
 - assets/stylesheets/shipyard/components/_tables.sass
@@ -237,6 +244,7 @@ files:
 - assets/stylesheets/shipyard/core/_typography.sass
 - assets/stylesheets/shipyard/functions/_color.sass
 - assets/stylesheets/shipyard/functions/_map-merge-options.sass
+- assets/stylesheets/shipyard/functions/_text-color.sass
 - assets/stylesheets/shipyard/mixins/_box-model.sass
 - assets/stylesheets/shipyard/mixins/_components.sass
 - assets/stylesheets/shipyard/mixins/_icons.sass
@@ -262,6 +270,7 @@ files:
 - ci/deploy
 - ci/jekyll
 - ci/percy
+- ci/sass_lint
 - ci/setup
 - lib/shipyard-framework.rb
 - lib/shipyard-framework/helpers/alert_helper.rb
@@ -342,6 +351,7 @@ files:
 - styleguide/utilities/grid.md
 - styleguide/utilities/index.md
 - styleguide/utilities/margin-padding.md
+- styleguide/utilities/position.md
 - styleguide/utilities/responsive.md
 - styleguide/utilities/typography.md
 homepage: https://github.com/codeship/shipyard