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