shipyard-framework 0.4.4 → 0.4.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/icons/lock.svg +3 -0
- data/assets/stylesheets/shipyard/_components.sass +1 -0
- data/assets/stylesheets/shipyard/_core.sass +1 -1
- data/assets/stylesheets/shipyard/_utilities.sass +1 -0
- data/assets/stylesheets/shipyard/components/_code.sass +17 -0
- data/assets/stylesheets/shipyard/core/_typography.sass +70 -0
- data/assets/stylesheets/shipyard/{core/_type.sass → utilities/_typography.sass} +4 -83
- data/assets/stylesheets/shipyard/variables/_typography.sass +1 -0
- data/lib/shipyard-framework/version.rb +1 -1
- data/styleguide/Gemfile.lock +1 -1
- data/styleguide/assets/css/application.sass +2 -0
- data/styleguide/components/code.html +21 -0
- data/styleguide/components/index.html +1 -1
- data/styleguide/components/modals.html +1 -1
- data/styleguide/components/tooltips.html +1 -1
- metadata +7 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: cf177c5a1565eba97757c12bbd705b24f31cc8a4
|
|
4
|
+
data.tar.gz: 94fbb2e6a7e03cd21cd9684d24f48ca324136f7c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9db4bc456dd331cb0e69c63f2e872bdeea59f29f995c7d815ce9ca4bc2f5ea41ec0b4ac021b130732fe5db5e62f726abe66aea162d450d1dde1b763e3e3253ae
|
|
7
|
+
data.tar.gz: ab3ccda38277bbf22682a40a5f02ba70107cc13f5224330a2ec12c0e4b0f1b7c43387bd05875957d5d44be0c2de2444f3b5abb7c3d335f2987efd533ef4d6b55
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14">
|
|
2
|
+
<path d="M10,5V4A4,4,0,0,0,2,4V5A2,2,0,0,0,0,7v5a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V7A2,2,0,0,0,10,5ZM7,10.05a1,1,0,0,1-.95.95h-.1A1,1,0,0,1,5,10.05V8.95A1,1,0,0,1,5.95,8h.1A1,1,0,0,1,7,8.95ZM8,5H4V4A2,2,0,0,1,8,4Z"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
+component('code')
|
|
2
|
+
color: $purple-dark
|
|
3
|
+
background: darken($gray-lightest, 3%)
|
|
4
|
+
border: 1px solid darken($gray-lighter, 5%)
|
|
5
|
+
font-family: $font-monospace
|
|
6
|
+
font-size: $font-size-sm
|
|
7
|
+
&-inline
|
|
8
|
+
+extend
|
|
9
|
+
padding: 2px 4px
|
|
10
|
+
border-radius: 4px
|
|
11
|
+
font-weight: $normal
|
|
12
|
+
white-space: nowrap
|
|
13
|
+
&-block
|
|
14
|
+
+extend
|
|
15
|
+
padding: 20px 30px
|
|
16
|
+
line-height: 1.6
|
|
17
|
+
+border-radius
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
body
|
|
2
|
+
background: $gray-lightest
|
|
3
|
+
color: $gray-dark
|
|
4
|
+
font-family: $font-family
|
|
5
|
+
-webkit-font-smoothing: antialiased
|
|
6
|
+
-moz-osx-font-smoothing: grayscale
|
|
7
|
+
|
|
8
|
+
a, .link
|
|
9
|
+
cursor: pointer
|
|
10
|
+
text-decoration: none
|
|
11
|
+
color: $blue
|
|
12
|
+
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease
|
|
13
|
+
&:hover
|
|
14
|
+
color: darken($blue, 10%)
|
|
15
|
+
text-decoration: underline
|
|
16
|
+
|
|
17
|
+
hr
|
|
18
|
+
height: 0
|
|
19
|
+
border: 0 solid $border-color-light
|
|
20
|
+
border-width: 2px 0 0
|
|
21
|
+
+respond-to(margin, (x0: 20px 0, x1: 30px 0))
|
|
22
|
+
&.dark
|
|
23
|
+
border-color: $border-color
|
|
24
|
+
&.lightest
|
|
25
|
+
border-color: $border-color-lightest
|
|
26
|
+
&.thin
|
|
27
|
+
border-width: 1px 0 0
|
|
28
|
+
|
|
29
|
+
strong
|
|
30
|
+
font-weight: $bold
|
|
31
|
+
|
|
32
|
+
ul, ol
|
|
33
|
+
list-style: none
|
|
34
|
+
|
|
35
|
+
.list
|
|
36
|
+
list-style: circle
|
|
37
|
+
&, &-disc
|
|
38
|
+
color: $gray-light
|
|
39
|
+
margin: 20px 0 0 18px
|
|
40
|
+
&-disc
|
|
41
|
+
list-style: disc
|
|
42
|
+
li
|
|
43
|
+
margin: 10px 0
|
|
44
|
+
|
|
45
|
+
img
|
|
46
|
+
display: block
|
|
47
|
+
|
|
48
|
+
button
|
|
49
|
+
background: none
|
|
50
|
+
border: none
|
|
51
|
+
cursor: pointer
|
|
52
|
+
|
|
53
|
+
h1, .h1
|
|
54
|
+
+respond-to(font-size, (x0: 20px, x1: 24px))
|
|
55
|
+
h2, .h2
|
|
56
|
+
font-size: 18px
|
|
57
|
+
|
|
58
|
+
h1, h2, h3, h4, h5, h6
|
|
59
|
+
@extend .strong
|
|
60
|
+
|
|
61
|
+
.h-primary
|
|
62
|
+
margin-bottom: 0
|
|
63
|
+
+respond-to(font-size, (x0: 24px, x1: 28px))
|
|
64
|
+
.h-secondary
|
|
65
|
+
color: $text-color-lighter
|
|
66
|
+
font-weight: $normal
|
|
67
|
+
margin: 5px 0 30px
|
|
68
|
+
+respond-to(font-size, (x0: 16px, x1: 18px))
|
|
69
|
+
.h-margin
|
|
70
|
+
margin: 0 0 30px
|
|
@@ -1,30 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
color: $gray-dark
|
|
4
|
-
font-family: $font-family
|
|
5
|
-
-webkit-font-smoothing: antialiased
|
|
6
|
-
-moz-osx-font-smoothing: grayscale
|
|
7
|
-
|
|
8
|
-
a, .link
|
|
9
|
-
cursor: pointer
|
|
10
|
-
text-decoration: none
|
|
11
|
-
color: $blue
|
|
12
|
-
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease
|
|
13
|
-
&:hover
|
|
14
|
-
color: darken($blue, 10%)
|
|
15
|
-
text-decoration: underline
|
|
1
|
+
.em
|
|
2
|
+
color: $teal
|
|
16
3
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
border: 0 solid $border-color-light
|
|
20
|
-
border-width: 2px 0 0
|
|
21
|
-
+respond-to(margin, (x0: 20px 0, x1: 30px 0))
|
|
22
|
-
&.dark
|
|
23
|
-
border-color: $border-color
|
|
24
|
-
&.lightest
|
|
25
|
-
border-color: $border-color-lightest
|
|
26
|
-
&.thin
|
|
27
|
-
border-width: 1px 0 0
|
|
4
|
+
.p
|
|
5
|
+
margin: 15px 0
|
|
28
6
|
|
|
29
7
|
.medium
|
|
30
8
|
+all-media-sizes
|
|
@@ -34,44 +12,6 @@ hr
|
|
|
34
12
|
+all-media-sizes
|
|
35
13
|
font-weight: $bold
|
|
36
14
|
|
|
37
|
-
strong
|
|
38
|
-
font-weight: $bold
|
|
39
|
-
|
|
40
|
-
ul, ol
|
|
41
|
-
list-style: none
|
|
42
|
-
|
|
43
|
-
.list
|
|
44
|
-
list-style: circle
|
|
45
|
-
&, &-disc
|
|
46
|
-
color: $gray-light
|
|
47
|
-
margin: 20px 0 0 18px
|
|
48
|
-
&-disc
|
|
49
|
-
list-style: disc
|
|
50
|
-
li
|
|
51
|
-
margin: 10px 0
|
|
52
|
-
|
|
53
|
-
img
|
|
54
|
-
display: block
|
|
55
|
-
|
|
56
|
-
button
|
|
57
|
-
background: none
|
|
58
|
-
border: none
|
|
59
|
-
cursor: pointer
|
|
60
|
-
|
|
61
|
-
.code
|
|
62
|
-
color: desaturate(darken($purple, 15%), 25%)
|
|
63
|
-
background: darken($gray-lightest, 3%)
|
|
64
|
-
border: 1px solid darken($gray-lighter, 5%)
|
|
65
|
-
border-radius: 4px
|
|
66
|
-
padding: 2px 4px
|
|
67
|
-
margin: 0 2px
|
|
68
|
-
|
|
69
|
-
.em
|
|
70
|
-
color: $teal
|
|
71
|
-
|
|
72
|
-
.p
|
|
73
|
-
margin: 15px 0
|
|
74
|
-
|
|
75
15
|
+component('bullet')
|
|
76
16
|
margin: 0 5px
|
|
77
17
|
color: lighten($text-color-lightest, 20%)
|
|
@@ -79,25 +19,6 @@ button
|
|
|
79
19
|
+extend
|
|
80
20
|
color: rgba(#fff,.4)
|
|
81
21
|
|
|
82
|
-
h1, .h1
|
|
83
|
-
+respond-to(font-size, (x0: 20px, x1: 24px))
|
|
84
|
-
h2, .h2
|
|
85
|
-
font-size: 18px
|
|
86
|
-
|
|
87
|
-
h1, h2, h3, h4, h5, h6
|
|
88
|
-
@extend .strong
|
|
89
|
-
|
|
90
|
-
.h-primary
|
|
91
|
-
margin-bottom: 0
|
|
92
|
-
+respond-to(font-size, (x0: 24px, x1: 28px))
|
|
93
|
-
.h-secondary
|
|
94
|
-
color: $text-color-lighter
|
|
95
|
-
font-weight: $normal
|
|
96
|
-
margin: 5px 0 30px
|
|
97
|
-
+respond-to(font-size, (x0: 16px, x1: 18px))
|
|
98
|
-
.h-margin
|
|
99
|
-
margin: 0 0 30px
|
|
100
|
-
|
|
101
22
|
.white-space-nowrap
|
|
102
23
|
white-space: nowrap
|
|
103
24
|
|
data/styleguide/Gemfile.lock
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
---
|
|
2
2
|
---
|
|
3
3
|
$font-family: Catamaran, sans-serif
|
|
4
|
+
$font-monospace: 'Roboto Mono', monospace
|
|
4
5
|
@import shipyard
|
|
5
6
|
@import url('https://fonts.googleapis.com/css?family=Catamaran')
|
|
7
|
+
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono')
|
|
6
8
|
|
|
7
9
|
@import layout
|
|
8
10
|
@import views
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Code Component
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<h1>{{ page.title }}</h1>
|
|
6
|
+
|
|
7
|
+
<hr />
|
|
8
|
+
|
|
9
|
+
<h2>Inline Code Example <code class="code-inline margin-left-xxs">.code-inline</code></h2>
|
|
10
|
+
<p class="p">Vestibulum id ligula porta felis <code class="code-inline">euismod semper</code>. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia <code class="code-inline">bibendum nulla sed</code> consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <code class="code-inline">Nullam id</code> dolor id nibh ultricies vehicula ut id elit. <code class="code-inline">Cras mattis consectetur</code> purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
|
11
|
+
|
|
12
|
+
<hr />
|
|
13
|
+
|
|
14
|
+
<h2>Code Block Example <code class="code-inline margin-left-xxs">.code-block</code></h2>
|
|
15
|
+
<pre class="code-block margin-top-sm"><code>class Shipyard
|
|
16
|
+
def foo
|
|
17
|
+
end
|
|
18
|
+
|
|
19
|
+
def bar
|
|
20
|
+
end
|
|
21
|
+
end</code></pre>
|
|
@@ -5,7 +5,7 @@ title: Shipyard Modals
|
|
|
5
5
|
<h1>{{ page.title }}</h1>
|
|
6
6
|
<p class="text-light text-lg">
|
|
7
7
|
Modals are triggered by applying the following attribute to any button or link
|
|
8
|
-
(e.g. <code class="code">modal="login"</code>).
|
|
8
|
+
(e.g. <code class="code-inline">modal="login"</code>).
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
11
|
<hr />
|
|
@@ -5,7 +5,7 @@ title: Shipyard Tooltips
|
|
|
5
5
|
<h1>{{ page.title }}</h1>
|
|
6
6
|
<p class="text-light text-lg">
|
|
7
7
|
Tooltips are used primarily by setting the tooltip attribute on any element
|
|
8
|
-
(e.g. <code class="code">tooltip="..."</code>).
|
|
8
|
+
(e.g. <code class="code-inline">tooltip="..."</code>).
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
11
|
<hr />
|
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.4.
|
|
4
|
+
version: 0.4.5
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Shipyard
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-08-
|
|
11
|
+
date: 2017-08-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -66,6 +66,7 @@ files:
|
|
|
66
66
|
- app/views/shipyard/_alerts.slim
|
|
67
67
|
- assets/icons/arrows/arrow-down.svg
|
|
68
68
|
- assets/icons/gear.svg
|
|
69
|
+
- assets/icons/lock.svg
|
|
69
70
|
- assets/icons/logos/bitbucket.svg
|
|
70
71
|
- assets/icons/logos/campfire-color.svg
|
|
71
72
|
- assets/icons/logos/codeship.svg
|
|
@@ -95,6 +96,7 @@ files:
|
|
|
95
96
|
- assets/stylesheets/shipyard/components/_alerts.sass
|
|
96
97
|
- assets/stylesheets/shipyard/components/_boxes.sass
|
|
97
98
|
- assets/stylesheets/shipyard/components/_buttons.sass
|
|
99
|
+
- assets/stylesheets/shipyard/components/_code.sass
|
|
98
100
|
- assets/stylesheets/shipyard/components/_empty.sass
|
|
99
101
|
- assets/stylesheets/shipyard/components/_form-errors.sass
|
|
100
102
|
- assets/stylesheets/shipyard/components/_forms.sass
|
|
@@ -107,7 +109,7 @@ files:
|
|
|
107
109
|
- assets/stylesheets/shipyard/core/_animations.sass
|
|
108
110
|
- assets/stylesheets/shipyard/core/_grid.sass
|
|
109
111
|
- assets/stylesheets/shipyard/core/_reset.sass
|
|
110
|
-
- assets/stylesheets/shipyard/core/
|
|
112
|
+
- assets/stylesheets/shipyard/core/_typography.sass
|
|
111
113
|
- assets/stylesheets/shipyard/functions/_color.sass
|
|
112
114
|
- assets/stylesheets/shipyard/functions/_map-merge-options.sass
|
|
113
115
|
- assets/stylesheets/shipyard/mixins/_box-model.sass
|
|
@@ -119,6 +121,7 @@ files:
|
|
|
119
121
|
- assets/stylesheets/shipyard/utilities/_colors.sass
|
|
120
122
|
- assets/stylesheets/shipyard/utilities/_display.sass
|
|
121
123
|
- assets/stylesheets/shipyard/utilities/_positioning.sass
|
|
124
|
+
- assets/stylesheets/shipyard/utilities/_typography.sass
|
|
122
125
|
- assets/stylesheets/shipyard/variables/_color_utilities.sass
|
|
123
126
|
- assets/stylesheets/shipyard/variables/_colors.scss
|
|
124
127
|
- assets/stylesheets/shipyard/variables/_components.scss
|
|
@@ -149,6 +152,7 @@ files:
|
|
|
149
152
|
- styleguide/components/alerts.html
|
|
150
153
|
- styleguide/components/boxes.html
|
|
151
154
|
- styleguide/components/buttons.html
|
|
155
|
+
- styleguide/components/code.html
|
|
152
156
|
- styleguide/components/empty-states.html
|
|
153
157
|
- styleguide/components/forms.html
|
|
154
158
|
- styleguide/components/grid.html
|