shipyard-framework 0.5.52 → 0.5.53
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.
- checksums.yaml +4 -4
- data/assets/stylesheets/shipyard/_utilities.sass +1 -0
- data/assets/stylesheets/shipyard/components/_boxes.sass +5 -2
- data/assets/stylesheets/shipyard/components/_forms.sass +2 -2
- data/assets/stylesheets/shipyard/components/_icons.sass +8 -0
- data/assets/stylesheets/shipyard/utilities/_padding.sass +7 -0
- data/assets/stylesheets/shipyard/utilities/_typography.sass +4 -0
- data/lib/shipyard-framework/jekyll/tags/button_tag.rb +1 -1
- data/lib/shipyard-framework/version.rb +1 -1
- data/styleguide/Gemfile.lock +7 -6
- data/styleguide/_assets/css/views.sass +4 -0
- data/styleguide/components/buttons.md +24 -0
- data/styleguide/components/icons.md +16 -0
- data/styleguide/utilities/index.md +2 -2
- data/styleguide/utilities/margin-padding.md +71 -0
- data/styleguide/utilities/typography.html +25 -12
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ef8c9319757ab1713fe365d227b956abdd90920a
|
|
4
|
+
data.tar.gz: 77cf41e1c48bd7f9bcf4b7486a2b651afb5799e2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 44b221200f52d73332f4a36eb03ebc3e83a9131b42c98024dca56f0b0f16a8e429927d4e8a7dc818305b2adf5e647168965382d231583d2363e97a31461c1675
|
|
7
|
+
data.tar.gz: c6492dd8990084f109ec0274aafc6aaa2591e2de7b293c10b0caf4ec0382b828e72a9f8ca22aab1688f97cb5f7031e63288b4906e08dd30272b93cec6204750b
|
|
@@ -19,11 +19,14 @@
|
|
|
19
19
|
&-link
|
|
20
20
|
color: $blue
|
|
21
21
|
cursor: pointer
|
|
22
|
-
&:hover, &-selected, &-active
|
|
22
|
+
&:hover, &:active, &-selected, &-active
|
|
23
23
|
color: $blue-dark
|
|
24
|
+
outline: none
|
|
24
25
|
box-shadow: 0 0 4px 1px rgba($blue,.5)
|
|
25
26
|
&-active-green,
|
|
26
|
-
&-active-green:hover
|
|
27
|
+
&-active-green:hover,
|
|
28
|
+
&-active-green:active
|
|
29
|
+
outline: none
|
|
27
30
|
cursor: default
|
|
28
31
|
box-shadow: 0 0 4px 1px rgba(darken($green, 5%),.75)
|
|
29
32
|
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
+respond-to(padding, (x0: 0 15px, x1: 0 20px))
|
|
41
41
|
+when('error')
|
|
42
42
|
border-color: $red
|
|
43
|
-
&:focus
|
|
43
|
+
&:hover, &:focus
|
|
44
44
|
border-color: $border-color-dark
|
|
45
45
|
+when('error')
|
|
46
46
|
border-color: darken($red, 15%)
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
+respond-to(padding, (x0: 10px 15px, x1: 10px 20px))
|
|
78
78
|
+when('error')
|
|
79
79
|
border-color: $red
|
|
80
|
-
&:focus
|
|
80
|
+
&:hover, &:focus
|
|
81
81
|
border-color: $border-color-dark
|
|
82
82
|
+when('error')
|
|
83
83
|
border-color: darken($red, 15%)
|
|
@@ -10,6 +10,11 @@ svg, path, circle, polyline
|
|
|
10
10
|
transform-origin: center center
|
|
11
11
|
+width-height(1em)
|
|
12
12
|
|
|
13
|
+
&-center
|
|
14
|
+
position: relative
|
|
15
|
+
vertical-align: middle
|
|
16
|
+
top: -1px
|
|
17
|
+
|
|
13
18
|
// Icons w/ Margins
|
|
14
19
|
&-margin-left
|
|
15
20
|
margin-left: 5px
|
|
@@ -40,6 +45,9 @@ svg, path, circle, polyline
|
|
|
40
45
|
&-bitbucket
|
|
41
46
|
+width-height(16px)
|
|
42
47
|
|
|
48
|
+
&-lock
|
|
49
|
+
+width-height(12px, 14px)
|
|
50
|
+
|
|
43
51
|
&-arrow-down
|
|
44
52
|
@extend .icon-outline
|
|
45
53
|
+width-height(10px, 6px)
|
|
@@ -8,7 +8,7 @@ module Shipyard
|
|
|
8
8
|
def initialize(tag_name, params, options)
|
|
9
9
|
super
|
|
10
10
|
@params = params.split(',')
|
|
11
|
-
@text = @params[0]
|
|
11
|
+
@text = @params[0].strip
|
|
12
12
|
@args = @params[1].to_s.tr(':','').split(' ').map(&:to_sym)
|
|
13
13
|
@args << eval("{#{@params[2]}}") if @params[2]
|
|
14
14
|
end
|
data/styleguide/Gemfile.lock
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
PATH
|
|
2
2
|
remote: ..
|
|
3
3
|
specs:
|
|
4
|
-
shipyard-framework (0.5.
|
|
4
|
+
shipyard-framework (0.5.53)
|
|
5
5
|
actionview (~> 5.0)
|
|
6
6
|
sprockets-es6 (~> 0.9.2)
|
|
7
7
|
|
|
@@ -29,15 +29,16 @@ GEM
|
|
|
29
29
|
colorator (1.1.0)
|
|
30
30
|
concurrent-ruby (1.0.5)
|
|
31
31
|
crass (1.0.2)
|
|
32
|
-
erubi (1.
|
|
32
|
+
erubi (1.7.0)
|
|
33
33
|
execjs (2.7.0)
|
|
34
34
|
extras (0.3.0)
|
|
35
35
|
forwardable-extended (~> 2.5)
|
|
36
36
|
fastimage (2.1.0)
|
|
37
37
|
ffi (1.9.18)
|
|
38
38
|
forwardable-extended (2.6.0)
|
|
39
|
-
i18n (0.
|
|
40
|
-
|
|
39
|
+
i18n (0.9.0)
|
|
40
|
+
concurrent-ruby (~> 1.0)
|
|
41
|
+
jekyll (3.6.2)
|
|
41
42
|
addressable (~> 2.4)
|
|
42
43
|
colorator (~> 1.0)
|
|
43
44
|
jekyll-sass-converter (~> 1.0)
|
|
@@ -73,7 +74,7 @@ GEM
|
|
|
73
74
|
minitest (5.10.3)
|
|
74
75
|
nokogiri (1.8.1)
|
|
75
76
|
mini_portile2 (~> 2.3.0)
|
|
76
|
-
pathutil (0.
|
|
77
|
+
pathutil (0.16.0)
|
|
77
78
|
forwardable-extended (~> 2.6)
|
|
78
79
|
public_suffix (3.0.0)
|
|
79
80
|
rack (1.6.8)
|
|
@@ -87,7 +88,7 @@ GEM
|
|
|
87
88
|
ffi (>= 0.5.0, < 2)
|
|
88
89
|
rouge (2.2.1)
|
|
89
90
|
safe_yaml (1.0.4)
|
|
90
|
-
sass (3.5.
|
|
91
|
+
sass (3.5.2)
|
|
91
92
|
sass-listen (~> 4.0.0)
|
|
92
93
|
sass-listen (4.0.0)
|
|
93
94
|
rb-fsevent (~> 0.9, >= 0.9.4)
|
|
@@ -10,11 +10,14 @@ title: Shipyard Buttons
|
|
|
10
10
|
<div class="box-padding align-center">
|
|
11
11
|
{% btn Default %}
|
|
12
12
|
{% btn Primary, :primary %}
|
|
13
|
+
{% btn Primary Dark, :primary_dark %}
|
|
13
14
|
{% btn Secondary, :secondary %}
|
|
15
|
+
{% btn Secondary Dark, :secondary_dark %}
|
|
14
16
|
{% btn Disabled, :disabled %}
|
|
15
17
|
{% btn CTA, :cta %}
|
|
16
18
|
{% btn Caution, :caution %}
|
|
17
19
|
{% btn Link, :link %}
|
|
20
|
+
{% btn Rounded, :rounded %}
|
|
18
21
|
</div>
|
|
19
22
|
<div class="box-secondary box-padding align-center bg-gray-dark">
|
|
20
23
|
{% btn Inverse, :inverse %}
|
|
@@ -23,12 +26,33 @@ title: Shipyard Buttons
|
|
|
23
26
|
|
|
24
27
|
---
|
|
25
28
|
|
|
29
|
+
### Full-Screen Buttons
|
|
30
|
+
|
|
26
31
|
<div class="box-padding align-center">
|
|
32
|
+
{% btn Save Changes, :full %}
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
{% btn Save Changes, :full %}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
### Common Buttons Tags
|
|
42
|
+
<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>
|
|
43
|
+
|
|
44
|
+
<div class="margin-bottom-lg">
|
|
27
45
|
{% btn Button %}
|
|
28
46
|
<a href="#" class="btn">Link</a>
|
|
29
47
|
<input type="button" class="btn" value="Input" />
|
|
30
48
|
</div>
|
|
31
49
|
|
|
50
|
+
```html
|
|
51
|
+
{% btn Button %}
|
|
52
|
+
<a href="#" class="btn">Link</a>
|
|
53
|
+
<input type="button" class="btn" value="Input" />
|
|
54
|
+
```
|
|
55
|
+
|
|
32
56
|
---
|
|
33
57
|
|
|
34
58
|
## Button Sizes (default: md)
|
|
@@ -156,3 +156,19 @@ description: Shipyard comes with several default icons that you're welcome to us
|
|
|
156
156
|
<%= icon :gear, class: 'icon-lg' %>
|
|
157
157
|
<%= icon :gear, class: 'icon-xl' %>
|
|
158
158
|
```
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
### Centered Icons
|
|
163
|
+
<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>
|
|
164
|
+
|
|
165
|
+
<div class="margin-bottom-lg">
|
|
166
|
+
<button class="btn btn-secondary">{% icon :plus, class: 'icon-center icon-sm margin-right-xxs' %} Create</button>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
```html
|
|
170
|
+
<button class="btn btn-secondary">
|
|
171
|
+
<%= icon :plus, class: 'icon-center icon-sm' %>
|
|
172
|
+
Create
|
|
173
|
+
</button>
|
|
174
|
+
```
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Utilities
|
|
3
3
|
description: The utility classes below can be applied to any component to override or extend the base styles of the component.
|
|
4
|
-
utilities: [Responsive, Grid, Typography, Colors]
|
|
4
|
+
utilities: [Responsive, Grid, Typography, Margin & Padding, Colors]
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
{% include page-heading.html page=page %}
|
|
@@ -11,7 +11,7 @@ utilities: [Responsive, Grid, Typography, Colors]
|
|
|
11
11
|
<ul class="col-container">
|
|
12
12
|
{% for utility in page.utilities %}
|
|
13
13
|
<li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-33 col-x2-25">
|
|
14
|
-
<a href="{{ site.baseurl }}/utilities/{{ utility | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-md text-x1-lg text-x2-xl">
|
|
14
|
+
<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">
|
|
15
15
|
{{ utility }}
|
|
16
16
|
</a>
|
|
17
17
|
</li>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Margin & Padding Utilities
|
|
3
|
+
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.
|
|
4
|
+
box_classes: utilities-margin-padding-box box-secondary btn-sm medium text-light
|
|
5
|
+
options: [none,xxs,xs,sm,md,lg,xl,xxl]
|
|
6
|
+
directions: [left,right]
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
{% include page-heading.html page=page %}
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
### Margin Top & Bottom `.margin-{ top, bottom }-{ x1..x4 }-{ xxs..xxl }`
|
|
14
|
+
<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>
|
|
15
|
+
|
|
16
|
+
<div class="col-container">
|
|
17
|
+
{% for option in page.options %}
|
|
18
|
+
<div class="col align-center">
|
|
19
|
+
<div class="{{ page.box_classes }} margin-bottom-{{ option }}">{{ option }}</div>
|
|
20
|
+
<div class="{{ page.box_classes }} margin-top-{{ option }}">{{ option }}</div>
|
|
21
|
+
</div>
|
|
22
|
+
{% endfor %}
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
### Margin Left & Right `.margin-{ left, right }-{ x1..x4 }-{ xxs..xxl }`
|
|
28
|
+
<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>
|
|
29
|
+
|
|
30
|
+
<div class="col-container">
|
|
31
|
+
{% for direction in page.directions %}
|
|
32
|
+
<div class="col">
|
|
33
|
+
<div class="align-{{ direction }}">
|
|
34
|
+
{% for option in page.options %}
|
|
35
|
+
<div class="{{ page.box_classes }} margin-{{ direction }}-{{ option }} margin-bottom-md">.margin-{{ direction }}-{{ option }}</div>
|
|
36
|
+
{% endfor %}
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
{% endfor %}
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
### Padding Top & Bottom `.padding-{ top, bottom }-{ x1..x4 }-{ xxs..xxl }`
|
|
45
|
+
<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>
|
|
46
|
+
|
|
47
|
+
<div class="col-container">
|
|
48
|
+
{% for option in page.options %}
|
|
49
|
+
<div class="col align-center">
|
|
50
|
+
<div class="box-secondary medium text-light text-sm padding-bottom-{{ option }} margin-bottom-xs">{{ option }}</div>
|
|
51
|
+
<div class="box-secondary medium text-light text-sm padding-top-{{ option }}">{{ option }}</div>
|
|
52
|
+
</div>
|
|
53
|
+
{% endfor %}
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
### Padding Left & Right `.padding-{ left, right }-{ x1..x4 }-{ xxs..xxl }`
|
|
59
|
+
<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>
|
|
60
|
+
|
|
61
|
+
<div class="col-container">
|
|
62
|
+
{% for direction in page.directions %}
|
|
63
|
+
<div class="col">
|
|
64
|
+
<div class="align-{{ direction }}">
|
|
65
|
+
{% for option in page.options %}
|
|
66
|
+
<div class="{{ page.box_classes }} padding-{{ direction }}-{{ option }} margin-bottom-md">.padding-{{ direction }}-{{ option }}</div>
|
|
67
|
+
{% endfor %}
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
{% endfor %}
|
|
71
|
+
</div>
|
|
@@ -9,7 +9,7 @@ text_shades: [normal, light, lighter, lightest]
|
|
|
9
9
|
<hr />
|
|
10
10
|
|
|
11
11
|
<div class="col-container">
|
|
12
|
-
<div class="col
|
|
12
|
+
<div class="col">
|
|
13
13
|
<h1>h1. Heading</h1>
|
|
14
14
|
<h2>h2. Heading</h2>
|
|
15
15
|
<h3>h3. Heading</h3>
|
|
@@ -17,13 +17,34 @@ text_shades: [normal, light, lighter, lightest]
|
|
|
17
17
|
<h5>h5. Heading</h5>
|
|
18
18
|
<h6>h6. Heading</h6>
|
|
19
19
|
</div>
|
|
20
|
-
<div class="col
|
|
20
|
+
<div class="col">
|
|
21
21
|
<h3>Text Sizes</h3>
|
|
22
22
|
{% for size in page.text_sizes %}
|
|
23
23
|
<p class="text-{{ size }}">.text-{{ size }}</p>
|
|
24
24
|
{% endfor %}
|
|
25
25
|
</div>
|
|
26
|
-
<div class="col
|
|
26
|
+
<div class="col">
|
|
27
|
+
<h3>Font Weights</h3>
|
|
28
|
+
<ul>
|
|
29
|
+
<li class="normal">.normal</li>
|
|
30
|
+
<li class="medium">.medium</li>
|
|
31
|
+
<li class="strong">.strong</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="col">
|
|
35
|
+
<h3>Text Alignment</h3>
|
|
36
|
+
<ul>
|
|
37
|
+
<li class="align-left">.align-left</li>
|
|
38
|
+
<li class="align-center">.align-center</li>
|
|
39
|
+
<li class="align-right">.align-right</li>
|
|
40
|
+
</ul>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<hr />
|
|
45
|
+
|
|
46
|
+
<div class="col-container">
|
|
47
|
+
<div class="col">
|
|
27
48
|
<h3>Text Shades</h3>
|
|
28
49
|
<div class="box box-padding margin-top-xs">
|
|
29
50
|
<ul class="list strong">
|
|
@@ -33,7 +54,7 @@ text_shades: [normal, light, lighter, lightest]
|
|
|
33
54
|
</ul>
|
|
34
55
|
</div>
|
|
35
56
|
</div>
|
|
36
|
-
<div class="col
|
|
57
|
+
<div class="col">
|
|
37
58
|
<h3>Inverse Text Shades</h3>
|
|
38
59
|
<div class="box-secondary box-padding bg-gray-dark margin-top-xs">
|
|
39
60
|
<ul class="list strong">
|
|
@@ -45,12 +66,4 @@ text_shades: [normal, light, lighter, lightest]
|
|
|
45
66
|
</ul>
|
|
46
67
|
</div>
|
|
47
68
|
</div>
|
|
48
|
-
<div class="col col-20">
|
|
49
|
-
<h3>Text Alignment</h3>
|
|
50
|
-
<ul>
|
|
51
|
-
<li class="align-left">.align-left</li>
|
|
52
|
-
<li class="align-center">.align-center</li>
|
|
53
|
-
<li class="align-right">.align-right</li>
|
|
54
|
-
</ul>
|
|
55
|
-
</div>
|
|
56
69
|
</div>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: shipyard-framework
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.5.
|
|
4
|
+
version: 0.5.53
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Codeship
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-10-
|
|
11
|
+
date: 2017-10-23 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -240,6 +240,7 @@ files:
|
|
|
240
240
|
- assets/stylesheets/shipyard/utilities/_display.sass
|
|
241
241
|
- assets/stylesheets/shipyard/utilities/_grid.sass
|
|
242
242
|
- assets/stylesheets/shipyard/utilities/_margin.sass
|
|
243
|
+
- assets/stylesheets/shipyard/utilities/_padding.sass
|
|
243
244
|
- assets/stylesheets/shipyard/utilities/_positioning.sass
|
|
244
245
|
- assets/stylesheets/shipyard/utilities/_typography.sass
|
|
245
246
|
- assets/stylesheets/shipyard/variables/_color_utilities.sass
|
|
@@ -306,6 +307,7 @@ files:
|
|
|
306
307
|
- styleguide/utilities/colors.md
|
|
307
308
|
- styleguide/utilities/grid.md
|
|
308
309
|
- styleguide/utilities/index.md
|
|
310
|
+
- styleguide/utilities/margin-padding.md
|
|
309
311
|
- styleguide/utilities/responsive.md
|
|
310
312
|
- styleguide/utilities/typography.html
|
|
311
313
|
homepage: https://github.com/codeship/shipyard
|