shipyard-framework 0.5.67 → 0.5.68

Sign up to get free protection for your applications and to get access to all the features.
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