shipyard-framework 0.5.67 → 0.5.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. checksums.yaml +4 -4
  2. data/assets/stylesheets/shipyard/utilities/_border-radius.sass +21 -29
  3. data/lib/shipyard-framework/version.rb +1 -1
  4. data/styleguide/Gemfile.lock +1 -1
  5. data/styleguide/_data/breakpoints.yml +15 -0
  6. data/styleguide/_plugins/component_css_class.rb +9 -0
  7. data/styleguide/utilities/border-radius.md +48 -33
  8. metadata +3 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ddcf3cadd7d4cedd8d14de425c312955faeabdaad056d94b7bcdc1df8bc70233
4
- data.tar.gz: 6cbe1aff0160ccc55eaf4b86c9d8ff3eccc6cf892f092bb23e5e639620db220b
3
+ metadata.gz: ed8887a7ff14ef5b08972ad61651ee6ab6fcdc16adb066d4adfcd18b08b77360
4
+ data.tar.gz: 6fe85b149c27e003ede7dc982c5fdee5055b8d42d567ad6c4b891e27238fe33c
5
5
  SHA512:
6
- metadata.gz: 82d4b472c9a5e2e542498bd12e290653ace3957035538de4739ccac37f6b7bd7fa67878ebfef6759748beb4acceae6c623b9def1b7a423637f8643a5f7a62bba
7
- data.tar.gz: 8958a0261a81b8c5fa27ca45fce99c7a99a05492c30e6ae171a5c62e5bdef5a84599716bc19316b51c9dc40889365cde762eac623b78cf0d990a839d707978b1
6
+ metadata.gz: 70aa8f79ff2598d65b6524b9d58aa3e1f233b0048c72748e8859ab81e1e8b2e70b7a15b9614645a29acb8e5983765b99414c5c62e89df804489e045aa6e82489
7
+ data.tar.gz: e41ffd1d9e8cfb890c019f1ca067c6240e1e7682c5436fcdf2f4fa414d2e554c1330b777f3f1a9eee37da105c23ee02158dd393b76d33d8776f3cee3939176d3
data/assets/stylesheets/shipyard/utilities/_border-radius.sass CHANGED
@@ -1,29 +1,21 @@
1
- +component('rds')
2
- +border-radius
3
-
4
- &-0
5
- border-radius: 0
6
-
7
- &-t
8
- border-radius: $border-radius $border-radius 0 0
9
-
10
- &-b
11
- border-radius: 0 0 $border-radius $border-radius
12
-
13
- &-l
14
- border-radius: $border-radius 0 0 $border-radius
15
-
16
- &-r
17
- border-radius: 0 $border-radius $border-radius 0
18
-
19
- &-tl
20
- border-radius: $border-radius 0 0 0
21
-
22
- &-tr
23
- border-radius: 0 $border-radius 0 0
24
-
25
- &-bl
26
- border-radius: 0 0 0 $border-radius
27
-
28
- &-br
29
- border-radius: 0 0 $border-radius 0
1
+ +component('rounded')
2
+ +all-media-sizes
3
+ +border-radius
4
+ &-0
5
+ border-radius: 0
6
+ &-top
7
+ border-radius: $border-radius $border-radius 0 0
8
+ &-bottom
9
+ border-radius: 0 0 $border-radius $border-radius
10
+ &-left
11
+ border-radius: $border-radius 0 0 $border-radius
12
+ &-right
13
+ border-radius: 0 $border-radius $border-radius 0
14
+ &-top-left
15
+ border-radius: $border-radius 0 0 0
16
+ &-top-right
17
+ border-radius: 0 $border-radius 0 0
18
+ &-bottom-left
19
+ border-radius: 0 0 0 $border-radius
20
+ &-bottom-right
21
+ border-radius: 0 0 $border-radius 0
data/lib/shipyard-framework/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Shipyard
2
- VERSION = '0.5.67'
2
+ VERSION = '0.5.68'
3
3
  end
data/styleguide/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: ..
3
3
  specs:
4
- shipyard-framework (0.5.67)
4
+ shipyard-framework (0.5.68)
5
5
  actionview (~> 5.0)
6
6
  sprockets-es6 (~> 0.9.2)
7
7
 
data/styleguide/_data/breakpoints.yml ADDED
@@ -0,0 +1,15 @@
1
+ -
2
+ modifier: null
3
+ label: All Screens
4
+ -
5
+ modifier: x1
6
+ label: Tablets
7
+ -
8
+ modifier: x2
9
+ label: Laptops
10
+ -
11
+ modifier: x3
12
+ label: Large Screens
13
+ -
14
+ modifier: x4
15
+ label: Giant Monitors
data/styleguide/_plugins/component_css_class.rb ADDED
@@ -0,0 +1,9 @@
1
+ module Jekyll
2
+ module ComponentCssClassFilter
3
+ def component_css_class(element, breakpoint, modifier=nil)
4
+ [element, breakpoint, modifier].reject(&:blank?).join('-')
5
+ end
6
+ end
7
+ end
8
+
9
+ Liquid::Template.register_filter(Jekyll::ComponentCssClassFilter)
data/styleguide/utilities/border-radius.md CHANGED
@@ -4,45 +4,60 @@ description: Shipyard's border-radius utilities are useful for connecting compon
4
4
  col_classes: col col-50 col-x1-20 margin-bottom-xs
5
5
  box_classes: padding-top-xs padding-bottom-xs text-sm strong align-center bg-gray-light gray-dark
6
6
  directions:
7
- none: 0
8
- top: t
9
- bottom: b
10
- left: l
11
- right: r
12
- top_left: tl
13
- top_right: tr
14
- bottom_left: bl
15
- bottom_right: br
7
+ -
8
+ label: all
9
+ modifier: null
10
+ -
11
+ label: none
12
+ modifier: 0
13
+ -
14
+ label: top
15
+ modifier: top
16
+ -
17
+ label: bottom
18
+ modifier: bottom
19
+ -
20
+ label: left
21
+ modifier: left
22
+ -
23
+ label: right
24
+ modifier: right
25
+ -
26
+ label: top left
27
+ modifier: top-left
28
+ -
29
+ label: top right
30
+ modifier: top-right
31
+ -
32
+ label: bottom left
33
+ modifier: bottom-left
34
+ -
35
+ label: bottom right
36
+ modifier: bottom-right
16
37
  ---
17
38
 
18
39
  {% include page-heading.html page=page %}
19
40
 
20
41
  ---
21
42
 
22
- <div class="col-container">
23
- <div class="{{ page.col_classes }}">
24
- <div class="{{ page.box_classes }} rds" tooltip=".rds">
25
- all
26
- </div>
27
- </div>
28
- {% for direction in page.directions %}
29
- <div class="{{ page.col_classes }}">
30
- <div class="{{ page.box_classes }} box-secondary rds-{{ direction[1] }}" tooltip=".rds-{{ direction[1] }}">
31
- {{ direction[0] | replace: '_', ' ' }}
32
- </div>
33
- </div>
34
- {% endfor %}
35
- </div>
43
+ ## Responsive Options `.rounded-{ breakpoint }-{ direction }`
44
+ <p class="text-light margin-bottom-md">The examples below demonstrate the utility classes on each breakpoint.</p>
36
45
 
37
46
  ```html
38
- <div class="rds"><!-- border-radius: all corners --></div>
39
- <div class="rds-0"><!-- border-radius: 0 --></div>
40
- <div class="rds-t"><!-- border-radius: top --></div>
41
- <div class="rds-b"><!-- border-radius: bottom --></div>
42
- <div class="rds-l"><!-- border-radius: left --></div>
43
- <div class="rds-r"><!-- border-radius: right --></div>
44
- <div class="rds-tl"><!-- border-radius: top left --></div>
45
- <div class="rds-tr"><!-- border-radius: top right --></div>
46
- <div class="rds-bl"><!-- border-radius: bottom left --></div>
47
- <div class="rds-br"><!-- border-radius: bottom right --></div>
47
+ {% for direction in page.directions -%}
48
+ <div class="{{ 'rounded' | component_css_class: direction.modifier }}"><!-- {{ direction.label }} --></div>
49
+ {% endfor -%}
48
50
  ```
51
+
52
+ {% for breakpoint in site.data.breakpoints %}
53
+ <h3 class="text-md text-light margin-top-lg margin-bottom-xs">{{ breakpoint.label }}</h3>
54
+ <div class="col-container">
55
+ {% for direction in page.directions %}
56
+ <div class="{{ page.col_classes }}">
57
+ <div class="{{ page.box_classes }} {{ 'rounded' | component_css_class: breakpoint.modifier, direction.modifier }}" tooltip="{{ '.rounded' | component_css_class: breakpoint.modifier, direction.modifier }}">
58
+ {{ direction.label }}
59
+ </div>
60
+ </div>
61
+ {% endfor %}
62
+ </div>
63
+ {% endfor %}
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: shipyard-framework
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.5.67
4
+ version: 0.5.68
5
5
  platform: ruby
6
6
  authors:
7
7
  - Codeship
@@ -303,9 +303,11 @@ files:
303
303
  - styleguide/_assets/js/application.es6
304
304
  - styleguide/_assets/js/views/utilities/colors.es6
305
305
  - styleguide/_config.yml
306
+ - styleguide/_data/breakpoints.yml
306
307
  - styleguide/_includes/page-heading.html
307
308
  - styleguide/_layouts/application.html
308
309
  - styleguide/_plugins/color_css_class.rb
310
+ - styleguide/_plugins/component_css_class.rb
309
311
  - styleguide/_plugins/icon_item.rb
310
312
  - styleguide/components/alerts.md
311
313
  - styleguide/components/boxes.md