shipyard-framework 0.5.70 → 0.5.71
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/icons/logos/bitbucket-color.svg +10 -0
- data/assets/icons/logos/bitbucket.svg +9 -2
- data/assets/icons/logos/gitlab-color.svg +5 -0
- data/assets/icons/logos/google-app-engine.svg +5 -0
- data/assets/stylesheets/shipyard/_utilities.sass +1 -0
- data/assets/stylesheets/shipyard/components/_buttons.sass +28 -1
- data/assets/stylesheets/shipyard/components/_forms.sass +7 -3
- data/assets/stylesheets/shipyard/components/_input-switch.sass +8 -5
- data/assets/stylesheets/shipyard/mixins/_positioning.sass +8 -0
- data/assets/stylesheets/shipyard/mixins/_prefixed.sass +0 -5
- data/assets/stylesheets/shipyard/utilities/_opacity.sass +4 -0
- data/lib/shipyard-framework/icons.rb +1 -7
- data/lib/shipyard-framework/version.rb +1 -1
- data/styleguide/Gemfile.lock +1 -1
- data/styleguide/_assets/css/views.sass +5 -0
- data/styleguide/_plugins/icon_item.rb +3 -3
- data/styleguide/components/alerts.md +12 -6
- data/styleguide/components/boxes.md +16 -8
- data/styleguide/components/buttons.md +97 -17
- data/styleguide/components/checkboxes.md +32 -10
- data/styleguide/components/forms.html +26 -9
- data/styleguide/components/icons.md +17 -14
- metadata +6 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 05a0ca040f6e527fe4b3d645eaad79e4b48a3bef7f94ae2477a170b3f469a810
|
4
|
+
data.tar.gz: 6e83299c91e5fb216e088f0b89af0ffc66cd2e330616d639d58247c9f6f62e3e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b6f67b6f83cae6830accd30bd1e125073c76e235faf2f1142c8131f0b68101c5dcf21aa3f2cb977c079cba73b5d91576bb8faf5e264592626b9f71a0032dac41
|
7
|
+
data.tar.gz: ab63db49e5ca2b6a8d7adf87787b8f2ebf2ba1ddb0c0c89c49a0e3eec651aee376a97bfc94bd4d95a0fdc73496f0e41ff2ec0290fef9ae666e4f5106957f6da5
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
2
|
+
<defs>
|
3
|
+
<linearGradient id="bitbucket-color-gradient" x1="16.42" y1="9.04" x2="8.46" y2="2.83" gradientTransform="matrix(1, 0, 0, -1, 0, 16)" gradientUnits="userSpaceOnUse">
|
4
|
+
<stop offset="0.18" stop-color="#0052cc" />
|
5
|
+
<stop offset="1" stop-color="#2684ff" />
|
6
|
+
</linearGradient>
|
7
|
+
</defs>
|
8
|
+
<path class="icon-bitbucket" fill="#2684ff" d="M.52.81a.51.51,0,0,0-.52.5A.28.28,0,0,0,0,1.4L2.18,14.61a.69.69,0,0,0,.68.58H13.3a.51.51,0,0,0,.52-.43L16,1.4a.5.5,0,0,0-.42-.58H.52Zm9.16,9.54H6.35l-.9-4.71h5Z" />
|
9
|
+
<path class="icon-bitbucket-gradient" fill="url(#bitbucket-color-gradient)" d="M15.3,5.64H10.49l-.81,4.71H6.35L2.42,15a.66.66,0,0,0,.44.17H13.31a.51.51,0,0,0,.51-.43Z"/>
|
10
|
+
</svg>
|
@@ -1,3 +1,10 @@
|
|
1
|
-
<svg
|
2
|
-
<
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
2
|
+
<defs>
|
3
|
+
<linearGradient id="bitbucket-gradient" x1="16.42" y1="9.04" x2="8.46" y2="2.83" gradientTransform="matrix(1, 0, 0, -1, 0, 16)" gradientUnits="userSpaceOnUse">
|
4
|
+
<stop offset="0.18" stop-color="rgba(0,0,0,.35)" />
|
5
|
+
<stop offset="1" stop-color="rgba(0,0,0,0)" />
|
6
|
+
</linearGradient>
|
7
|
+
</defs>
|
8
|
+
<path class="icon-bitbucket" d="M.52.81a.51.51,0,0,0-.52.5A.28.28,0,0,0,0,1.4L2.18,14.61a.69.69,0,0,0,.68.58H13.3a.51.51,0,0,0,.52-.43L16,1.4a.5.5,0,0,0-.42-.58H.52Zm9.16,9.54H6.35l-.9-4.71h5Z" />
|
9
|
+
<path class="icon-bitbucket-gradient" fill="url(#bitbucket-gradient)" d="M15.3,5.64H10.49l-.81,4.71H6.35L2.42,15a.66.66,0,0,0,.44.17H13.31a.51.51,0,0,0,.51-.43Z"/>
|
3
10
|
</svg>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
2
|
+
<path class="icon-gitlab-head" fill="#fc6d26" d="M16,9.06l-.9-2.76L13.3.84a.31.31,0,0,0-.58,0L11,6.3H5.05L3.28.84a.31.31,0,0,0-.58,0L.93,6.3,0,9.06a.62.62,0,0,0,.22.68L8,15.37l7.75-5.63A.62.62,0,0,0,16,9.06"/>
|
3
|
+
<path class="icon-gitlab-scruff" fill="#fca326" d="M.93,6.3h0L0,9.06a.62.62,0,0,0,.22.68L8,15.37.93,6.3Zm14.14,0h0L16,9.06a.62.62,0,0,1-.22.68L8,15.37,15.07,6.3Z"/>
|
4
|
+
<path class="icon-gitlab-ears-nose" fill="#e24329" d="M8,15.37H8L11,6.3H5.05l3,9.07ZM.93,6.3H5.05L3.28.84a.31.31,0,0,0-.58,0L.93,6.3Zm14.14,0H11L12.72.84a.31.31,0,0,1,.58,0L15.07,6.3Z"/>
|
5
|
+
</svg>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
2
|
+
<path id="icon-app-engine-hexagon" fill="#4285f4" d="M15.81,7.26,12.52,1.55A1.44,1.44,0,0,0,11.29.81H4.71a1.44,1.44,0,0,0-1.23.74L.19,7.25a1.46,1.46,0,0,0,0,1.43l3.29,5.75a1.47,1.47,0,0,0,1.23.76h6.58a1.48,1.48,0,0,0,1.23-.76l3.29-5.72A1.5,1.5,0,0,0,15.81,7.26Z"/>
|
3
|
+
<path id="icon-app-engine-shadow" fill="#4c7adc" d="M12.66,7.75l-.09,0L8.21,3.36l-.9,1.31.75.75-1.9.69L5.41,8l-.74-.73L3.36,8.44l6.75,6.75h1.18a1.48,1.48,0,0,0,1.23-.76L15,10.1Z"/>
|
4
|
+
<path id="icon-app-engine-rocket" fill="#fff" d="M8,5.12A2.88,2.88,0,1,0,10.87,8h0A2.87,2.87,0,0,0,8,5.12m0,5.07A2.19,2.19,0,1,1,10.18,8,2.19,2.19,0,0,1,8,10.19H8m4.52-2.52-1.2-.38a3.51,3.51,0,0,1,.07.72,4.07,4.07,0,0,1,0,.5h1.16a.2.2,0,0,0,.18-.19V7.85a.21.21,0,0,0-.18-.19M8,4.6a3.27,3.27,0,0,1,.7.08l-.43-1.2a.21.21,0,0,0-.2-.18H7.89a.2.2,0,0,0-.19.18L7.32,4.67A3.82,3.82,0,0,1,8,4.61M4.61,8a3.51,3.51,0,0,1,.07-.72l-1.2.37a.22.22,0,0,0-.18.2v.46a.21.21,0,0,0,.18.19H4.64a4.19,4.19,0,0,1,0-.5M9,7.06l-.28.27h0A1,1,0,0,0,7.29,8.8L7,9.07a1.41,1.41,0,0,0,2,0,1.43,1.43,0,0,0,0-2m-.56,1.4a.67.67,0,0,1-.94,0,.66.66,0,0,1,0-.94.65.65,0,0,1,.93,0h0a.66.66,0,0,1,0,.93h0"/>
|
5
|
+
</svg>
|
@@ -26,7 +26,7 @@
|
|
26
26
|
color: $text-color
|
27
27
|
|
28
28
|
@mixin btn-hover($color, $text-color: null, $border-color: null, $text-decoration: none)
|
29
|
-
&:hover, &:focus, &:active
|
29
|
+
&:hover, &:focus, &:active, &.btn-loading
|
30
30
|
text-decoration: $text-decoration
|
31
31
|
+btn-color($color, $text-color, $border-color)
|
32
32
|
|
@@ -120,12 +120,27 @@
|
|
120
120
|
&-secondary
|
121
121
|
+btn-color(transparent, $text-color-light, darken($gray-lightest, 7%))
|
122
122
|
+btn-hover(transparent, darken($text-color-light, 15%), darken($gray-lightest, 17%))
|
123
|
+
&.btn-loading
|
124
|
+
&, &:hover, &:active
|
125
|
+
&::after
|
126
|
+
border-color: $border-color
|
127
|
+
border-left-color: $teal-dark
|
123
128
|
&-link
|
124
129
|
+btn-color(transparent, $blue, darken($gray-lightest, 7%))
|
125
130
|
+btn-hover(transparent, $blue-dark, darken($gray-lightest, 17%))
|
131
|
+
&.btn-loading
|
132
|
+
&, &:hover, &:active
|
133
|
+
&::after
|
134
|
+
border-color: $border-color
|
135
|
+
border-left-color: $teal-dark
|
126
136
|
&-dark
|
127
137
|
+btn-color(transparent, darken($text-color-light, 5%), lighten($gray-light, 5%))
|
128
138
|
+btn-hover(transparent, darken($text-color-light, 20%), darken($gray-light, 5%))
|
139
|
+
&.btn-loading
|
140
|
+
&, &:hover, &:active
|
141
|
+
&::after
|
142
|
+
border-color: $border-color-lighter
|
143
|
+
border-left-color: $blue
|
129
144
|
|
130
145
|
&-caution
|
131
146
|
+btn-color($red-dark)
|
@@ -156,3 +171,15 @@
|
|
156
171
|
&-secondary
|
157
172
|
+btn-color(transparent, #fff, rgba(#fff,.2))
|
158
173
|
+btn-hover(transparent, #fff, rgba(#fff,.5))
|
174
|
+
|
175
|
+
&-loading
|
176
|
+
&, &:active, &:hover
|
177
|
+
cursor: default
|
178
|
+
color: transparent !important
|
179
|
+
&::after
|
180
|
+
content: ''
|
181
|
+
border-radius: 20px
|
182
|
+
border: 2px solid rgba(#fff,.2)
|
183
|
+
border-left-color: #fff
|
184
|
+
animation: rotate 1s linear infinite
|
185
|
+
+absolute-center(20px)
|
@@ -12,10 +12,14 @@
|
|
12
12
|
outline: none
|
13
13
|
border: 2px solid $border-color
|
14
14
|
transition: background-color 300ms ease, border-color 300ms ease, opacity 300ms ease
|
15
|
+
background-clip: padding-box
|
15
16
|
+appearance(none)
|
16
|
-
|
17
|
+
&:disabled
|
18
|
+
opacity: .5
|
19
|
+
color: $text-color-light
|
17
20
|
&:hover, &:focus, .btn:hover &
|
18
|
-
|
21
|
+
&:not(:disabled)
|
22
|
+
border-color: $border-color-dark
|
19
23
|
|
20
24
|
&-group
|
21
25
|
+clearfix
|
@@ -94,8 +98,8 @@
|
|
94
98
|
&-top,
|
95
99
|
&-middle,
|
96
100
|
&-bottom
|
101
|
+
background-clip: initial
|
97
102
|
border-color: rgba($bg-to-border, .37)
|
98
|
-
+background-clip(initial)
|
99
103
|
&:hover, &:focus
|
100
104
|
z-index: 1
|
101
105
|
border-color: rgba($bg-to-border, .50)
|
@@ -1,4 +1,4 @@
|
|
1
|
-
$sizes: (sm: 18px)
|
1
|
+
$sizes: (sm: 18px, lg: 22px, xl: 24px)
|
2
2
|
|
3
3
|
+component('input-switch')
|
4
4
|
outline: none
|
@@ -6,18 +6,21 @@ $sizes: (sm: 18px)
|
|
6
6
|
position: relative
|
7
7
|
display: inline-block
|
8
8
|
border-radius: 50px
|
9
|
+
background-clip: initial
|
9
10
|
+width-height(36px, 20px)
|
10
|
-
+background-clip(initial)
|
11
11
|
&, &:hover, &:focus
|
12
12
|
+btn-color($red, $border-color: transparent)
|
13
13
|
&:checked
|
14
14
|
&, &:hover, &:focus
|
15
|
-
|
15
|
+
&:not(:disabled)
|
16
|
+
+btn-color($green, $border-color: transparent)
|
16
17
|
|
17
18
|
&-secondary
|
18
19
|
+extend
|
19
|
-
|
20
|
-
|
20
|
+
+btn-color($border-color, $border-color: transparent)
|
21
|
+
&:hover, &:focus
|
22
|
+
&:not(:disabled)
|
23
|
+
+btn-color($border-color-dark, $border-color: transparent)
|
21
24
|
|
22
25
|
// Checkbox Switch: White Dot
|
23
26
|
&::after
|
@@ -10,3 +10,11 @@
|
|
10
10
|
top: 50%
|
11
11
|
left: 50%
|
12
12
|
transform: translate(-50%, -50%)
|
13
|
+
|
14
|
+
@mixin absolute-center($width, $height: null)
|
15
|
+
$height: if($height, $height, $width)
|
16
|
+
+width-height($width, $height)
|
17
|
+
top: 50%
|
18
|
+
left: 50%
|
19
|
+
position: absolute
|
20
|
+
margin: ($height / -2) 0 0 ($width / -2)
|
@@ -48,18 +48,12 @@ module Shipyard
|
|
48
48
|
symbol: File.basename(file).gsub(/.svg/, '').underscore.to_sym,
|
49
49
|
view_box: html[/viewBox="(.*?)"/, 1],
|
50
50
|
outer_html: html.gsub(/\n|\s+\s+/, ''),
|
51
|
-
inner_html:
|
51
|
+
inner_html: html[/<svg.*?>([\s\S]*?)<\/svg>/, 1].gsub(/\n|\s+\s+/, ''),
|
52
52
|
is_outlined: html.include?('non-scaling-stroke')
|
53
53
|
}
|
54
54
|
end
|
55
55
|
end
|
56
56
|
|
57
|
-
def sanitize_svg(html)
|
58
|
-
sanitize(html,
|
59
|
-
tags: %w(g circle rect path line polyline polygon ellipse),
|
60
|
-
attributes: %w(x x1 x2 y y1 y2 d cx cy r rx ry vector-effect points class fill stroke opacity))
|
61
|
-
end
|
62
|
-
|
63
57
|
def svg_symbol(icon)
|
64
58
|
%(<g id="#{icon[:id]}" viewBox="#{icon[:view_box]}">#{icon[:inner_html]}</g>)
|
65
59
|
end
|
data/styleguide/Gemfile.lock
CHANGED
@@ -7,15 +7,15 @@ module Jekyll
|
|
7
7
|
def initialize(tag_name, args, options)
|
8
8
|
super
|
9
9
|
args = args.strip.split(',')
|
10
|
-
@name =
|
10
|
+
@name = args[0]
|
11
11
|
@options = args[1] ? eval("{#{args[1]}}") : {}
|
12
12
|
end
|
13
13
|
|
14
14
|
def render(context)
|
15
15
|
%(
|
16
|
-
<li class="col col-50 col-x1-20 margin-bottom-xs margin-bottom-x1-md margin-bottom-x2-lg" tooltip="
|
16
|
+
<li class="col col-50 col-x1-20 margin-bottom-xs margin-bottom-x1-md margin-bottom-x2-lg" tooltip="#{@name}">
|
17
17
|
<div class="box box-md box-x1-xxl">
|
18
|
-
#{icon @name, @options}
|
18
|
+
#{icon eval(@name), @options}
|
19
19
|
</div>
|
20
20
|
</li>
|
21
21
|
)
|
@@ -8,7 +8,8 @@ description: Alerts should be used to grab a user's attention before proceeding
|
|
8
8
|
---
|
9
9
|
|
10
10
|
### Dismissible
|
11
|
-
|
11
|
+
Used to display notes, tips, and other non-critical information.
|
12
|
+
{: .section-description }
|
12
13
|
|
13
14
|
{% alert :dismissible %}
|
14
15
|
Ten other people are also viewing tickets for <a href="#">this flight</a>.
|
@@ -18,7 +19,8 @@ description: Alerts should be used to grab a user's attention before proceeding
|
|
18
19
|
---
|
19
20
|
|
20
21
|
### Default `.alert`
|
21
|
-
|
22
|
+
Used to display notes, tips, and other non-critical information.
|
23
|
+
{: .section-description }
|
22
24
|
|
23
25
|
{% alert %}
|
24
26
|
Ten other people are also viewing tickets for <a href="#">this flight</a>.
|
@@ -29,7 +31,8 @@ description: Alerts should be used to grab a user's attention before proceeding
|
|
29
31
|
---
|
30
32
|
|
31
33
|
### Info `.alert-info`
|
32
|
-
|
34
|
+
Useful when drawing attention to non-critical information or actions we want the user to take.
|
35
|
+
{: .section-description }
|
33
36
|
|
34
37
|
{% alert :info %}
|
35
38
|
Ten other people are also viewing tickets for <a href="#">this flight</a>.
|
@@ -40,7 +43,8 @@ description: Alerts should be used to grab a user's attention before proceeding
|
|
40
43
|
---
|
41
44
|
|
42
45
|
### Success `.alert-success`
|
43
|
-
|
46
|
+
Useful when drawing attention to interactions that have produced successful results.
|
47
|
+
{: .section-description }
|
44
48
|
|
45
49
|
{% alert :success %}
|
46
50
|
Pack your bags! You'll be on the next flight to Hawaii.
|
@@ -51,7 +55,8 @@ description: Alerts should be used to grab a user's attention before proceeding
|
|
51
55
|
---
|
52
56
|
|
53
57
|
### Warning `.alert-warning`
|
54
|
-
|
58
|
+
Useful when drawing attention to critical, time-sensitive information — even if nothing has gone wrong.
|
59
|
+
{: .section-description }
|
55
60
|
|
56
61
|
{% alert :warning %}
|
57
62
|
There are only 2 seats left on this flight! We recommend to <a href="#">book your tickets</a> as soon as possible.
|
@@ -62,7 +67,8 @@ description: Alerts should be used to grab a user's attention before proceeding
|
|
62
67
|
---
|
63
68
|
|
64
69
|
### Error `.alert-error`
|
65
|
-
|
70
|
+
Useful when drawing attention to something that has gone critically wrong.
|
71
|
+
{: .section-description }
|
66
72
|
|
67
73
|
{% alert :error %}
|
68
74
|
This flight is now sold out. Let's get you on the <a href="#">next flight to Kauai</a>.
|
@@ -9,7 +9,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
|
|
9
9
|
---
|
10
10
|
|
11
11
|
### Default `.box`
|
12
|
-
|
12
|
+
Useful when needing to draw extra attention to a particular group of content.
|
13
|
+
{: .section-description }
|
13
14
|
|
14
15
|
{% box %}
|
15
16
|
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
@@ -18,7 +19,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
|
|
18
19
|
---
|
19
20
|
|
20
21
|
### Padded `.box-padding`
|
21
|
-
|
22
|
+
Useful when needing to draw extra attention to a particular group of content.
|
23
|
+
{: .section-description }
|
22
24
|
|
23
25
|
{% box :padding %}
|
24
26
|
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
@@ -27,7 +29,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
|
|
27
29
|
---
|
28
30
|
|
29
31
|
### Linked `.box-link`
|
30
|
-
|
32
|
+
Useful when linking important components to another page or another group of content.
|
33
|
+
{: .section-description }
|
31
34
|
|
32
35
|
{% box :link %}
|
33
36
|
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
@@ -36,7 +39,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
|
|
36
39
|
---
|
37
40
|
|
38
41
|
### Linked & Active `.box-link-active`
|
39
|
-
|
42
|
+
Useful when linking important components to another page or another group of content.
|
43
|
+
{: .section-description }
|
40
44
|
|
41
45
|
{% box :link, :link_active %}
|
42
46
|
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
@@ -45,7 +49,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
|
|
45
49
|
---
|
46
50
|
|
47
51
|
### Linked & Selected `.box-link-selected`
|
48
|
-
|
52
|
+
Useful when highlighting a linked box that's been selected by the user.
|
53
|
+
{: .section-description }
|
49
54
|
|
50
55
|
{% box :link, :link_selected %}
|
51
56
|
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
@@ -54,7 +59,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
|
|
54
59
|
---
|
55
60
|
|
56
61
|
### Secondary `.box-secondary`
|
57
|
-
|
62
|
+
Useful when connecting secondary information to the default box styles.
|
63
|
+
{: .section-description }
|
58
64
|
|
59
65
|
{% box :secondary %}
|
60
66
|
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
@@ -64,7 +70,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
|
|
64
70
|
---
|
65
71
|
|
66
72
|
### Box Sizes `.box-[{{ page.box_sizes | join: ', ' }}]`
|
67
|
-
|
73
|
+
Useful when you need to create boxes with fixed heights. Note: The <a href="{{ site.baseurl }}/utilities/responsive">responsive utility classes</a> can also be applied to each box size.
|
74
|
+
{: .section-description }
|
68
75
|
|
69
76
|
{% for size in page.box_sizes %}
|
70
77
|
<div class="box box-{{ size }} margin-top-md">
|
@@ -75,7 +82,8 @@ box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
|
|
75
82
|
---
|
76
83
|
|
77
84
|
### Rounded `.box-rounded`
|
78
|
-
|
85
|
+
Useful when you need a box with rounded corners.
|
86
|
+
{: .section-description }
|
79
87
|
|
80
88
|
{% for size in page.box_sizes %}
|
81
89
|
<div class="box box-rounded box-{{ size }} margin-top-md">
|
@@ -6,30 +6,108 @@ title: Shipyard Buttons
|
|
6
6
|
|
7
7
|
---
|
8
8
|
|
9
|
-
##
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
{% btn
|
15
|
-
{% btn
|
16
|
-
{% btn
|
17
|
-
{% btn
|
18
|
-
{% btn
|
19
|
-
{% btn
|
9
|
+
## Common Buttons
|
10
|
+
Shipyard gives you more buttons than you can shake a stick at.
|
11
|
+
{: .section-description }
|
12
|
+
|
13
|
+
<div class="margin-bottom-md">
|
14
|
+
{% btn Default, :default, class: 'margin-right-xs' %}
|
15
|
+
{% btn Primary, :primary, class: 'margin-right-xs' %}
|
16
|
+
{% btn Primary Dark, :primary_dark, class: 'margin-right-xs' %}
|
17
|
+
{% btn CTA, :cta, class: 'margin-right-xs' %}
|
18
|
+
{% btn Caution, :caution, class: 'margin-right-xs' %}
|
19
|
+
{% btn Disabled, :disabled, class: 'margin-right-xs' %}
|
20
20
|
{% btn Link, :link %}
|
21
|
-
{% btn Rounded, :rounded %}
|
22
21
|
</div>
|
23
|
-
|
24
|
-
|
25
|
-
|
22
|
+
|
23
|
+
```html
|
24
|
+
{% btn Default %}
|
25
|
+
{% btn Primary, :primary %}
|
26
|
+
{% btn Primary Dark, :primary_dark %}
|
27
|
+
{% btn CTA, :cta %}
|
28
|
+
{% btn Caution, :caution %}
|
29
|
+
{% btn Disabled, :disabled %}
|
30
|
+
{% btn Link, :link %}
|
31
|
+
```
|
32
|
+
|
33
|
+
---
|
34
|
+
|
35
|
+
## Secondary Buttons
|
36
|
+
Useful when you have a button on a darker background.
|
37
|
+
{: .section-description }
|
38
|
+
|
39
|
+
<div class="margin-bottom-md">
|
40
|
+
{% btn Secondary, :secondary, class: 'margin-right-xs' %}
|
41
|
+
{% btn Secondary Dark, :secondary_dark, class: 'margin-right-xs' %}
|
42
|
+
{% btn Secondary Link, :secondary_link %}
|
43
|
+
</div>
|
44
|
+
|
45
|
+
```html
|
46
|
+
{% btn Secondary, :secondary %}
|
47
|
+
{% btn Secondary Dark, :secondary_dark %}
|
48
|
+
{% btn Secondary Link, :secondary_link %}
|
49
|
+
```
|
50
|
+
|
51
|
+
---
|
52
|
+
|
53
|
+
## Inverse Buttons
|
54
|
+
Useful when you have a button on a darker background.
|
55
|
+
{: .section-description }
|
56
|
+
|
57
|
+
<div class="box-secondary box-padding bg-gray-dark margin-bottom-md">
|
58
|
+
{% btn Inverse, :inverse, class: 'margin-right-xs' %}
|
59
|
+
{% btn Inverse Secondary, :inverse_secondary %}
|
60
|
+
</div>
|
61
|
+
|
62
|
+
```html
|
63
|
+
{% btn Inverse, :inverse %}
|
64
|
+
{% btn Inverse Secondary, :inverse_secondary %}
|
65
|
+
```
|
66
|
+
|
67
|
+
---
|
68
|
+
|
69
|
+
## Rounded Buttons
|
70
|
+
Useful when you want a button with completely rounded corners.
|
71
|
+
{: .section-description }
|
72
|
+
|
73
|
+
<div class="margin-bottom-md">
|
74
|
+
{% btn Default, :rounded, class: 'margin-right-xs' %}
|
75
|
+
{% btn Primary, :primary :rounded, class: 'margin-right-xs' %}
|
76
|
+
{% btn CTA, :cta :rounded, class: 'margin-right-xs' %}
|
77
|
+
{% btn Caution, :caution :rounded, class: 'margin-right-xs' %}
|
78
|
+
{% btn Secondary, :secondary :rounded %}
|
26
79
|
</div>
|
27
80
|
|
81
|
+
```html
|
82
|
+
{% btn Rounded, :rounded %}
|
83
|
+
```
|
84
|
+
|
85
|
+
---
|
86
|
+
|
87
|
+
## Loading Buttons
|
88
|
+
Useful when you have a button that triggers an asynchronous action.
|
89
|
+
{: .section-description }
|
90
|
+
|
91
|
+
<div class="margin-bottom-md">
|
92
|
+
{% btn Default, :loading, class: 'margin-right-xs' %}
|
93
|
+
{% btn Primary, :primary :loading, class: 'margin-right-xs' %}
|
94
|
+
{% btn CTA, :cta :loading, class: 'margin-right-xs' %}
|
95
|
+
{% btn Caution, :caution :loading, class: 'margin-right-xs' %}
|
96
|
+
{% btn Secondary, :secondary :loading, class: 'margin-right-xs' %}
|
97
|
+
{% btn Secondary Link, :secondary_link :loading, class: 'margin-right-xs' %}
|
98
|
+
</div>
|
99
|
+
|
100
|
+
```html
|
101
|
+
{% btn Default, :loading %}
|
102
|
+
```
|
103
|
+
|
28
104
|
---
|
29
105
|
|
30
106
|
### Full-Screen Buttons
|
107
|
+
Often really useful on mobile screens or in combination with other grids.
|
108
|
+
{: .section-description }
|
31
109
|
|
32
|
-
<div class="
|
110
|
+
<div class="margin-bottom-md">
|
33
111
|
{% btn Save Changes, :full %}
|
34
112
|
</div>
|
35
113
|
|
@@ -40,7 +118,8 @@ title: Shipyard Buttons
|
|
40
118
|
---
|
41
119
|
|
42
120
|
### Common Buttons Tags
|
43
|
-
|
121
|
+
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.
|
122
|
+
{: .section-description }
|
44
123
|
|
45
124
|
<div class="margin-bottom-lg">
|
46
125
|
{% btn Button %}
|
@@ -57,6 +136,7 @@ title: Shipyard Buttons
|
|
57
136
|
---
|
58
137
|
|
59
138
|
## Button Sizes (default: md)
|
139
|
+
|
60
140
|
<div class="box-padding align-center">
|
61
141
|
{% btn XX-Small, :xxs %}
|
62
142
|
{% btn X-Small, :xs %}
|
@@ -136,7 +136,7 @@ labels:
|
|
136
136
|
|
137
137
|
---
|
138
138
|
|
139
|
-
## Checkbox
|
139
|
+
## Checkbox-Switches
|
140
140
|
<p class="text-light margin-bottom-md">Switches are useful when the user has a choice to toggle on and off. Note: For the best UX, please make sure that the switch saves immediately each time it changes state.</p>
|
141
141
|
|
142
142
|
<div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
|
@@ -161,7 +161,7 @@ labels:
|
|
161
161
|
|
162
162
|
---
|
163
163
|
|
164
|
-
## Secondary Checkbox
|
164
|
+
## Secondary Checkbox-Switches
|
165
165
|
<p class="text-light margin-bottom-md">Useful when you don't need to draw attention to the bright-red, off state.</p>
|
166
166
|
|
167
167
|
<div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
|
@@ -181,20 +181,42 @@ labels:
|
|
181
181
|
</div>
|
182
182
|
</div>
|
183
183
|
```html
|
184
|
-
<input type="checkbox" class="input input-switch" />
|
184
|
+
<input type="checkbox" class="input input-switch-secondary" />
|
185
185
|
```
|
186
186
|
|
187
187
|
---
|
188
188
|
|
189
|
-
##
|
189
|
+
## Checkbox-Switch Sizes
|
190
190
|
<p class="text-light margin-bottom-md">Useful when you want to show checkboxes inline next to a text label.</p>
|
191
|
-
<
|
192
|
-
<
|
193
|
-
|
191
|
+
<ul class="input-list">
|
192
|
+
<li class="input-item">
|
193
|
+
<input id="small-switch-on" type="checkbox" class="input input-switch input-switch-sm align-middle" checked />
|
194
|
+
<label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Small</label>
|
195
|
+
</li>
|
196
|
+
<li class="input-item">
|
197
|
+
<input id="small-switch-on" type="checkbox" class="input input-switch align-middle" checked />
|
198
|
+
<label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Medium (Default)</label>
|
199
|
+
</li>
|
200
|
+
<li class="input-item">
|
201
|
+
<input id="small-switch-on" type="checkbox" class="input input-switch input-switch-lg align-middle" checked />
|
202
|
+
<label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Large</label>
|
203
|
+
</li>
|
204
|
+
<li class="input-item">
|
205
|
+
<input id="small-switch-on" type="checkbox" class="input input-switch input-switch-xl align-middle" checked />
|
206
|
+
<label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">X-Large</label>
|
207
|
+
</li>
|
208
|
+
</ul>
|
194
209
|
|
195
|
-
<input id="small-switch-on" type="checkbox" class="input input-switch input-switch-sm align-middle" checked />
|
196
|
-
<label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Checkbox Switch On</label>
|
197
|
-
</div>
|
198
210
|
```html
|
211
|
+
<!-- Input-Switch: Small -->
|
199
212
|
<input type="checkbox" class="input input-switch input-switch-sm" />
|
213
|
+
|
214
|
+
<!-- Input-Switch: Medium (Default) -->
|
215
|
+
<input type="checkbox" class="input input-switch" />
|
216
|
+
|
217
|
+
<!-- Input-Switch: Large -->
|
218
|
+
<input type="checkbox" class="input input-switch input-switch-lg" />
|
219
|
+
|
220
|
+
<!-- Input-Switch: X-Large -->
|
221
|
+
<input type="checkbox" class="input input-switch input-switch-xl" />
|
200
222
|
```
|
@@ -10,6 +10,10 @@ title: Shipyard Forms
|
|
10
10
|
<label class="label">Textbox</label>
|
11
11
|
<input type="text" class="input input-text" placeholder=".input-text" />
|
12
12
|
</div>
|
13
|
+
<div class="input-group">
|
14
|
+
<label class="label">Textbox Disabled</label>
|
15
|
+
<input type="text" class="input input-text" placeholder=".input-text" disabled />
|
16
|
+
</div>
|
13
17
|
<div class="input-group">
|
14
18
|
<label class="label">Textbox</label>
|
15
19
|
<input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
|
@@ -20,15 +24,28 @@ title: Shipyard Forms
|
|
20
24
|
<input type="text" class="input input-text input-full input-text-connect-middle" placeholder=".input-text-connect-middle" />
|
21
25
|
<input type="text" class="input input-text input-full input-text-connect-bottom" placeholder=".input-text-connect-bottom" />
|
22
26
|
</div>
|
23
|
-
<div class="input-group">
|
24
|
-
<
|
25
|
-
|
26
|
-
<
|
27
|
-
<
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
27
|
+
<div class="col-container input-group">
|
28
|
+
<div class="col">
|
29
|
+
<label class="label">Select Boxes</label>
|
30
|
+
<div class="input-select-container">
|
31
|
+
<select class="input input-select">
|
32
|
+
<option class="input-option-placeholder">.input-select</option>
|
33
|
+
{% for i in (1..10) %}
|
34
|
+
<option>{{ i }}</option>
|
35
|
+
{% endfor %}
|
36
|
+
</select>
|
37
|
+
</div>
|
38
|
+
</div>
|
39
|
+
<div class="col">
|
40
|
+
<label class="label">Select Box Disabled</label>
|
41
|
+
<div class="input-select-container">
|
42
|
+
<select class="input input-select" disabled>
|
43
|
+
<option class="input-option-placeholder">.input-select</option>
|
44
|
+
{% for i in (1..10) %}
|
45
|
+
<option>{{ i }}</option>
|
46
|
+
{% endfor %}
|
47
|
+
</select>
|
48
|
+
</div>
|
32
49
|
</div>
|
33
50
|
</div>
|
34
51
|
|
@@ -27,20 +27,23 @@ description: Shipyard comes with several default icons that you're welcome to us
|
|
27
27
|
<p class="text-light margin-bottom-md" markdown="1">If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.</p>
|
28
28
|
|
29
29
|
<ul class="icon-list col-container">
|
30
|
-
{% iconitem
|
31
|
-
{% iconitem
|
32
|
-
{% iconitem :
|
33
|
-
{% iconitem :
|
34
|
-
{% iconitem :
|
35
|
-
{% iconitem :
|
36
|
-
{% iconitem :
|
37
|
-
{% iconitem :
|
38
|
-
{% iconitem :
|
39
|
-
{% iconitem :
|
40
|
-
{% iconitem :
|
41
|
-
{% iconitem :
|
42
|
-
{% iconitem :
|
43
|
-
{% iconitem :
|
30
|
+
{% iconitem 'bitbucket', class: 'center gray icon-xl' %}
|
31
|
+
{% iconitem 'bitbucket-color', class: 'center icon-xl' %}
|
32
|
+
{% iconitem :campfire_color, class: 'center icon-xl' %}
|
33
|
+
{% iconitem :codeship, class: 'center icon-xl' %}
|
34
|
+
{% iconitem :email_color, class: 'center icon-xl' %}
|
35
|
+
{% iconitem :flowdock_color, class: 'center icon-xl' %}
|
36
|
+
{% iconitem :github, class: 'center icon-xl' %}
|
37
|
+
{% iconitem :gitlab, class: 'center icon-xl' %}
|
38
|
+
{% iconitem :gitlab_color, class: 'center icon-xl' %}
|
39
|
+
{% iconitem :google_app_engine, class: 'center icon-xl' %}
|
40
|
+
{% iconitem :grove_color, class: 'center icon-xl' %}
|
41
|
+
{% iconitem :hipchat, class: 'center icon-xl' %}
|
42
|
+
{% iconitem :hipchat_color, class: 'center icon-xl' %}
|
43
|
+
{% iconitem :slack, class: 'center icon-xl' %}
|
44
|
+
{% iconitem :slack_color, class: 'center icon-xl' %}
|
45
|
+
{% iconitem :webhook, class: 'center icon-xl' %}
|
46
|
+
{% iconitem :webhook_color, class: 'center icon-xl' %}
|
44
47
|
</ul>
|
45
48
|
|
46
49
|
---
|
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.71
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Codeship
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-11-
|
11
|
+
date: 2017-11-21 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -175,13 +175,16 @@ files:
|
|
175
175
|
- assets/icons/card.svg
|
176
176
|
- assets/icons/gear.svg
|
177
177
|
- assets/icons/lock.svg
|
178
|
+
- assets/icons/logos/bitbucket-color.svg
|
178
179
|
- assets/icons/logos/bitbucket.svg
|
179
180
|
- assets/icons/logos/campfire-color.svg
|
180
181
|
- assets/icons/logos/codeship.svg
|
181
182
|
- assets/icons/logos/email-color.svg
|
182
183
|
- assets/icons/logos/flowdock-color.svg
|
183
184
|
- assets/icons/logos/github.svg
|
185
|
+
- assets/icons/logos/gitlab-color.svg
|
184
186
|
- assets/icons/logos/gitlab.svg
|
187
|
+
- assets/icons/logos/google-app-engine.svg
|
185
188
|
- assets/icons/logos/grove-color.svg
|
186
189
|
- assets/icons/logos/hipchat-color.svg
|
187
190
|
- assets/icons/logos/hipchat.svg
|
@@ -245,6 +248,7 @@ files:
|
|
245
248
|
- assets/stylesheets/shipyard/utilities/_display.sass
|
246
249
|
- assets/stylesheets/shipyard/utilities/_grid.sass
|
247
250
|
- assets/stylesheets/shipyard/utilities/_margin-padding.sass
|
251
|
+
- assets/stylesheets/shipyard/utilities/_opacity.sass
|
248
252
|
- assets/stylesheets/shipyard/utilities/_positioning.sass
|
249
253
|
- assets/stylesheets/shipyard/utilities/_typography.sass
|
250
254
|
- assets/stylesheets/shipyard/variables/_color_utilities.sass
|