shipyard-framework 0.5.86 → 0.5.87
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/.ruby-version +1 -1
- data/Brewfile +4 -0
- data/assets/icons/status/error.svg +4 -0
- data/assets/icons/status/fail.svg +4 -0
- data/assets/icons/status/idle.svg +4 -0
- data/assets/icons/status/running.svg +3 -0
- data/assets/icons/status/skipped.svg +3 -0
- data/assets/icons/status/success.svg +3 -0
- data/assets/icons/status/waiting.svg +5 -0
- data/assets/stylesheets/shipyard/_components.sass +1 -0
- data/assets/stylesheets/shipyard/components/_code.sass +1 -5
- data/assets/stylesheets/shipyard/components/_icons.sass +19 -10
- data/assets/stylesheets/shipyard/components/_statuses.sass +196 -0
- data/assets/stylesheets/shipyard/core/_animations.sass +12 -0
- data/assets/stylesheets/shipyard/utilities/_border-radius.sass +2 -0
- data/assets/stylesheets/shipyard/utilities/_margin-padding.sass +35 -17
- data/assets/stylesheets/shipyard/utilities/_typography.sass +3 -0
- data/assets/stylesheets/shipyard/variables/_components.scss +7 -0
- data/lib/shipyard-framework/jekyll/tags/icon_tag.rb +8 -3
- data/lib/shipyard-framework/version.rb +1 -1
- data/styleguide/.ruby-version +1 -1
- data/styleguide/Gemfile.lock +9 -9
- data/styleguide/_assets/css/views.sass +1 -1
- data/styleguide/_includes/page-heading.html +1 -1
- data/styleguide/_plugins/icon_item.rb +1 -1
- data/styleguide/_plugins/sass_output.rb +4 -1
- data/styleguide/components/alerts.md +2 -2
- data/styleguide/components/boxes.md +2 -2
- data/styleguide/components/buttons.md +26 -26
- data/styleguide/components/checkboxes.md +30 -30
- data/styleguide/components/code.html +4 -4
- data/styleguide/components/forms.md +7 -7
- data/styleguide/components/horizontal-rules.md +1 -1
- data/styleguide/components/icons.md +18 -2
- data/styleguide/components/index.md +2 -2
- data/styleguide/components/modals/_modal.html +15 -15
- data/styleguide/components/modals/example-billing.html +12 -12
- data/styleguide/components/modals/example-downgrade.html +2 -2
- data/styleguide/components/modals/example-survey.html +5 -5
- data/styleguide/components/modals/index.md +1 -1
- data/styleguide/components/radio-buttons.md +18 -18
- data/styleguide/components/statuses.md +324 -0
- data/styleguide/utilities/accordion.md +2 -2
- data/styleguide/utilities/border-radius.md +10 -3
- data/styleguide/utilities/colors.md +4 -4
- data/styleguide/utilities/grid.md +3 -3
- data/styleguide/utilities/index.md +1 -1
- data/styleguide/utilities/margin-padding.md +32 -19
- data/styleguide/utilities/opacity.md +2 -2
- data/styleguide/utilities/typography.md +2 -2
- metadata +13 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 946a7df5969ebc5c97c3008700b6f929567e3631c7a4cd61a6f6db97f2b6550f
|
4
|
+
data.tar.gz: cbf856851da8609e050ca0c3cdd0fecac37e65d58d2fc40f89bed69da049f61f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: dd5faea8d39e4a90129bc3fb13d81a55bdc9cdd9be81a93b2239425dd4e503d6852c5454bc3f4f5d8db255eac4a0b395144995c3f2c82596ea705eefd740473e
|
7
|
+
data.tar.gz: 21aa24467b0afdd928bb80df53bae15d3bec9c1d4a08d633851b425f721ed2b5f36d75a38a70100177c47ea6f28193af816af06af52cefa976cade3baa2351b4
|
data/.gitignore
CHANGED
data/.ruby-version
CHANGED
@@ -1 +1 @@
|
|
1
|
-
2.
|
1
|
+
2.5.0
|
data/Brewfile
ADDED
@@ -0,0 +1,5 @@
|
|
1
|
+
<svg viewBox="0 0 12 2" class="icon-waiting icon-outline">
|
2
|
+
<circle class="icon-waiting-dot-1" vector-effect="non-scaling-stroke" r="1" cx="0" cy="1" />
|
3
|
+
<circle class="icon-waiting-dot-2" vector-effect="non-scaling-stroke" r="1" cx="6" cy="1" />
|
4
|
+
<circle class="icon-waiting-dot-3" vector-effect="non-scaling-stroke" r="1" cx="12" cy="1" />
|
5
|
+
</svg>
|
@@ -1,9 +1,5 @@
|
|
1
1
|
+component('code')
|
2
|
-
|
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
|
2
|
+
// Default styles defined in shipyard/variables/_components.scss
|
7
3
|
|
8
4
|
&-block
|
9
5
|
+extend
|
@@ -10,16 +10,6 @@ svg, path, circle, polyline
|
|
10
10
|
transform-origin: center center
|
11
11
|
+width-height(1em)
|
12
12
|
|
13
|
-
// Icons w/ Margins
|
14
|
-
&-margin-left
|
15
|
-
margin-left: 5px
|
16
|
-
&-margin-left-lg
|
17
|
-
margin-left: 8px
|
18
|
-
&-margin-right
|
19
|
-
margin-right: 5px
|
20
|
-
&-margin-right-lg
|
21
|
-
margin-right: 8px
|
22
|
-
|
23
13
|
// Icons w/ Strokes
|
24
14
|
&-outline
|
25
15
|
stroke: currentColor
|
@@ -31,6 +21,25 @@ svg, path, circle, polyline
|
|
31
21
|
&-inverse
|
32
22
|
stroke: #fff
|
33
23
|
|
24
|
+
// Status Icons
|
25
|
+
&-fail,
|
26
|
+
&-success
|
27
|
+
+width-height(8px)
|
28
|
+
&-error
|
29
|
+
+width-height(2px, 8px)
|
30
|
+
&-waiting
|
31
|
+
+width-height(12px, 2px)
|
32
|
+
&-running
|
33
|
+
+width-height(8px)
|
34
|
+
animation: rotate 1.5s linear 0s infinite
|
35
|
+
&-waiting
|
36
|
+
&-dot-1
|
37
|
+
animation: bounce 5s ease-in-out 0s infinite
|
38
|
+
&-dot-2
|
39
|
+
animation: bounce 5s ease-in-out 100ms infinite
|
40
|
+
&-dot-3
|
41
|
+
animation: bounce 5s ease-in-out 200ms infinite
|
42
|
+
|
34
43
|
&-slack,
|
35
44
|
&-github,
|
36
45
|
&-gitlab,
|
@@ -0,0 +1,196 @@
|
|
1
|
+
@mixin status-icon-center($width, $height: null)
|
2
|
+
$height: if($height, $height, $width)
|
3
|
+
+width-height($width, $height)
|
4
|
+
margin: ($height / -2) 0 0 ($width / -2)
|
5
|
+
|
6
|
+
+component('status')
|
7
|
+
top: -1px
|
8
|
+
position: relative
|
9
|
+
display: inline-block
|
10
|
+
color: $text-color-lightest
|
11
|
+
border: 2px solid $border-color-light
|
12
|
+
border-radius: 50%
|
13
|
+
vertical-align: middle
|
14
|
+
background-clip: border-box
|
15
|
+
|
16
|
+
&-skipped
|
17
|
+
&-bg
|
18
|
+
background-color: $gray
|
19
|
+
|
20
|
+
&-idle,
|
21
|
+
&-waiting,
|
22
|
+
&-running
|
23
|
+
&.status-xs,
|
24
|
+
&.status-sm
|
25
|
+
&::after
|
26
|
+
top: -2px
|
27
|
+
left: -2px
|
28
|
+
right: -2px
|
29
|
+
bottom: -2px
|
30
|
+
content: ''
|
31
|
+
display: block
|
32
|
+
position: absolute
|
33
|
+
border-radius: 50%
|
34
|
+
border: 2px solid transparent
|
35
|
+
animation: fade 1s linear 0s infinite alternate
|
36
|
+
|
37
|
+
&-waiting
|
38
|
+
color: $blue
|
39
|
+
border-color: $blue
|
40
|
+
&-bg
|
41
|
+
background-color: $blue
|
42
|
+
&.status-md:not(.status-inverse)
|
43
|
+
color: #fff
|
44
|
+
background-color: $blue
|
45
|
+
&.status-xs::after,
|
46
|
+
&.status-sm::after
|
47
|
+
border-color: $blue-light
|
48
|
+
|
49
|
+
&-running
|
50
|
+
color: $teal
|
51
|
+
&-bg
|
52
|
+
background-color: $teal
|
53
|
+
&.status-xs,
|
54
|
+
&.status-sm
|
55
|
+
border-color: $teal-light
|
56
|
+
&::after
|
57
|
+
background-color: $teal
|
58
|
+
&.status-inverse
|
59
|
+
color: #fff
|
60
|
+
border-color: rgba(#fff,.3)
|
61
|
+
background-color: transparent
|
62
|
+
|
63
|
+
&-idle
|
64
|
+
color: $yellow-dark
|
65
|
+
border-color: $yellow-dark
|
66
|
+
&-bg
|
67
|
+
background-color: $yellow-dark
|
68
|
+
&.status-md:not(.status-inverse)
|
69
|
+
color: #fff
|
70
|
+
background-color: $yellow-dark
|
71
|
+
&.status-xs::after,
|
72
|
+
&.status-sm::after
|
73
|
+
border-color: $yellow
|
74
|
+
|
75
|
+
&-success
|
76
|
+
color: $green
|
77
|
+
border-color: $green
|
78
|
+
&, &-bg
|
79
|
+
background-color: $green
|
80
|
+
|
81
|
+
&-fail
|
82
|
+
color: $red
|
83
|
+
border-color: $red
|
84
|
+
&, &-bg
|
85
|
+
background-color: $red
|
86
|
+
|
87
|
+
&-error
|
88
|
+
color: $orange-dark
|
89
|
+
border-color: $orange-dark
|
90
|
+
&, &-bg
|
91
|
+
background-color: $orange-dark
|
92
|
+
|
93
|
+
&-success,
|
94
|
+
&-fail,
|
95
|
+
&-error
|
96
|
+
&.status-md:not(.status-inverse)
|
97
|
+
color: #fff
|
98
|
+
|
99
|
+
&-inverse
|
100
|
+
border-color: #fff
|
101
|
+
&.status-md:not(.status-running)
|
102
|
+
background-color: #fff
|
103
|
+
&.status-lg,
|
104
|
+
&.status-xl
|
105
|
+
color: #fff
|
106
|
+
|
107
|
+
&-xs
|
108
|
+
+width-height(6px)
|
109
|
+
&-sm
|
110
|
+
+width-height(8px)
|
111
|
+
&-md
|
112
|
+
+width-height(18px)
|
113
|
+
&-lg
|
114
|
+
+width-height(22px)
|
115
|
+
background-color: transparent
|
116
|
+
&-xl
|
117
|
+
+width-height(32px)
|
118
|
+
background-color: transparent
|
119
|
+
|
120
|
+
// Status: Icons
|
121
|
+
&-icon
|
122
|
+
top: 50%
|
123
|
+
left: 50%
|
124
|
+
position: absolute
|
125
|
+
|
126
|
+
// Status: Icons (Medium)
|
127
|
+
&-md-icon
|
128
|
+
margin: -3px 0 0 -3px
|
129
|
+
+width-height(6px)
|
130
|
+
&-skipped
|
131
|
+
margin-left: 0
|
132
|
+
transform: translatex(-.8px)
|
133
|
+
&-waiting
|
134
|
+
stroke-width: 1.7
|
135
|
+
+width-height(8px, 2px)
|
136
|
+
margin: 0 0 0 -4px
|
137
|
+
transform: translatey(-.7px)
|
138
|
+
&-running
|
139
|
+
+width-height(16px)
|
140
|
+
margin: -8px 0 0 -8px
|
141
|
+
&-success
|
142
|
+
margin-top: -2px
|
143
|
+
&-error
|
144
|
+
+width-height(2px, 6px)
|
145
|
+
margin: -3px 0 0 -1px
|
146
|
+
|
147
|
+
// Status: Icons (Large)
|
148
|
+
&-lg-icon
|
149
|
+
margin: -3px 0 0 -3px
|
150
|
+
+width-height(6px)
|
151
|
+
&-skipped
|
152
|
+
width: 3px
|
153
|
+
margin-left: -1px
|
154
|
+
&-waiting
|
155
|
+
+width-height(10px, 2px)
|
156
|
+
margin: -1px 0 0 -5px
|
157
|
+
&-running
|
158
|
+
+width-height(20px)
|
159
|
+
margin: -10px 0 0 -10px
|
160
|
+
&-success
|
161
|
+
margin-top: -2px
|
162
|
+
&-error
|
163
|
+
+width-height(4px, 8px)
|
164
|
+
margin: -4px 0 0 -1px
|
165
|
+
|
166
|
+
// Status: Icons (X-Large)
|
167
|
+
&-xl-icon
|
168
|
+
+status-icon-center(8px)
|
169
|
+
&-skipped
|
170
|
+
width: 4px
|
171
|
+
margin-left: -1px
|
172
|
+
&-waiting
|
173
|
+
+status-icon-center(12px, 2px)
|
174
|
+
&-running
|
175
|
+
+status-icon-center(30px)
|
176
|
+
&-success
|
177
|
+
margin-top: -3px
|
178
|
+
&-error
|
179
|
+
+width-height(4px, 10px)
|
180
|
+
margin: -5px 0 0 -1px
|
181
|
+
|
182
|
+
+component('text')
|
183
|
+
&-skipped
|
184
|
+
color: $text-color-lightest
|
185
|
+
&-waiting
|
186
|
+
color: $blue
|
187
|
+
&-running
|
188
|
+
color: $teal
|
189
|
+
&-idle
|
190
|
+
color: $yellow-dark
|
191
|
+
&-success
|
192
|
+
color: $green
|
193
|
+
&-fail
|
194
|
+
color: $red
|
195
|
+
&-error
|
196
|
+
color: $orange-dark
|
@@ -1,22 +1,40 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
@function get-value($value)
|
2
|
+
@if $value == auto
|
3
|
+
@return $value
|
4
|
+
@else
|
5
|
+
@return #{$value}px
|
5
6
|
|
6
|
-
|
7
|
-
|
8
|
-
|
7
|
+
// Margin utilities for text
|
8
|
+
.ml-xs
|
9
|
+
margin-left: .2em
|
10
|
+
.ml-sm
|
11
|
+
margin-left: .4em
|
12
|
+
.ml-md
|
13
|
+
margin-left: .6em
|
14
|
+
.mr-xs
|
15
|
+
margin-right: .2em
|
16
|
+
.mr-sm
|
17
|
+
margin-right: .4em
|
18
|
+
.mr-md
|
19
|
+
margin-right: .6em
|
9
20
|
|
10
|
-
|
21
|
+
// Margin & padding utilities for building grids
|
22
|
+
@each $property-label, $property-name in (m: margin, p: padding)
|
23
|
+
.#{$property-label}
|
24
|
+
$values: (0,5,10,15,20,30,40)
|
25
|
+
@if $property-name == margin
|
26
|
+
$values: append($values, auto)
|
27
|
+
|
28
|
+
// Outputs: .p-10, .p-x1-10, etc...
|
11
29
|
+all-media-sizes
|
12
|
-
@each $
|
13
|
-
&-#{$
|
14
|
-
#{$property}: $value
|
30
|
+
@each $value in $values
|
31
|
+
&-#{$value}
|
32
|
+
#{$property-name}: get-value($value)
|
15
33
|
|
16
|
-
// Outputs: .
|
17
|
-
@each $direction in (top
|
18
|
-
|
34
|
+
// Outputs: .pt-0, .pt-x1-0, .pt-10, .pt-x1-10, etc...
|
35
|
+
@each $direction-name, $direction-label in (top: t, bottom: b, left: l, right: r)
|
36
|
+
&#{$direction-label}
|
19
37
|
+all-media-sizes
|
20
|
-
@each $
|
21
|
-
&-#{$
|
22
|
-
#{$property}-#{$direction}: $value
|
38
|
+
@each $value in $values
|
39
|
+
&-#{$value}
|
40
|
+
#{$property-name}-#{$direction-name}: get-value($value)
|
@@ -64,6 +64,13 @@ $component-defaults: (
|
|
64
64
|
color: $yellow-darkest,
|
65
65
|
background: $yellow-lighter
|
66
66
|
)
|
67
|
+
),
|
68
|
+
code: (
|
69
|
+
color: $purple-dark,
|
70
|
+
font-size: $font-size-sm,
|
71
|
+
font-family: $font-monospace,
|
72
|
+
background: darken($gray-lightest, 3%),
|
73
|
+
border: 1px solid darken($gray-lighter, 5%)
|
67
74
|
)
|
68
75
|
) !default;
|
69
76
|
|
@@ -7,9 +7,14 @@ module Shipyard
|
|
7
7
|
|
8
8
|
def initialize(tag_name, params, options)
|
9
9
|
super
|
10
|
-
@
|
11
|
-
|
12
|
-
|
10
|
+
@options = {}
|
11
|
+
params.strip.split(',').each_with_index do |arg, index|
|
12
|
+
if index == 0
|
13
|
+
@name = eval(arg)
|
14
|
+
else
|
15
|
+
@options.merge!(eval("{#{arg}}"))
|
16
|
+
end
|
17
|
+
end
|
13
18
|
end
|
14
19
|
|
15
20
|
def render(context)
|
data/styleguide/.ruby-version
CHANGED
@@ -1 +1 @@
|
|
1
|
-
2.
|
1
|
+
2.5.0
|
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.87)
|
5
5
|
actionview (~> 5.0)
|
6
6
|
sprockets-es6 (~> 0.9.2)
|
7
7
|
|
@@ -33,10 +33,10 @@ GEM
|
|
33
33
|
execjs (2.7.0)
|
34
34
|
extras (0.3.0)
|
35
35
|
forwardable-extended (~> 2.5)
|
36
|
-
fastimage (2.1.
|
37
|
-
ffi (1.9.
|
36
|
+
fastimage (2.1.1)
|
37
|
+
ffi (1.9.21)
|
38
38
|
forwardable-extended (2.6.0)
|
39
|
-
i18n (0.9.
|
39
|
+
i18n (0.9.4)
|
40
40
|
concurrent-ruby (~> 1.0)
|
41
41
|
jekyll (3.6.2)
|
42
42
|
addressable (~> 2.4)
|
@@ -57,7 +57,7 @@ GEM
|
|
57
57
|
pathutil (>= 0.8)
|
58
58
|
rack (~> 1.6)
|
59
59
|
sprockets (~> 3.3, < 3.8)
|
60
|
-
jekyll-sass-converter (1.5.
|
60
|
+
jekyll-sass-converter (1.5.2)
|
61
61
|
sass (~> 3.4)
|
62
62
|
jekyll-watch (1.5.1)
|
63
63
|
listen (~> 3.0)
|
@@ -67,7 +67,7 @@ GEM
|
|
67
67
|
rb-fsevent (~> 0.9, >= 0.9.4)
|
68
68
|
rb-inotify (~> 0.9, >= 0.9.7)
|
69
69
|
ruby_dep (~> 1.2)
|
70
|
-
loofah (2.
|
70
|
+
loofah (2.2.0)
|
71
71
|
crass (~> 1.0.2)
|
72
72
|
nokogiri (>= 1.5.9)
|
73
73
|
mercenary (0.3.6)
|
@@ -77,7 +77,7 @@ GEM
|
|
77
77
|
mini_portile2 (~> 2.3.0)
|
78
78
|
pathutil (0.16.1)
|
79
79
|
forwardable-extended (~> 2.6)
|
80
|
-
public_suffix (3.0.
|
80
|
+
public_suffix (3.0.2)
|
81
81
|
rack (1.6.8)
|
82
82
|
rails-dom-testing (2.0.3)
|
83
83
|
activesupport (>= 4.2.0)
|
@@ -91,7 +91,7 @@ GEM
|
|
91
91
|
rouge (2.2.1)
|
92
92
|
ruby_dep (1.5.0)
|
93
93
|
safe_yaml (1.0.4)
|
94
|
-
sass (3.5.
|
94
|
+
sass (3.5.5)
|
95
95
|
sass-listen (~> 4.0.0)
|
96
96
|
sass-listen (4.0.0)
|
97
97
|
rb-fsevent (~> 0.9, >= 0.9.4)
|
@@ -122,4 +122,4 @@ DEPENDENCIES
|
|
122
122
|
shipyard-framework!
|
123
123
|
|
124
124
|
BUNDLED WITH
|
125
|
-
1.16.
|
125
|
+
1.16.1
|
@@ -15,7 +15,7 @@ module Jekyll
|
|
15
15
|
|
16
16
|
def render(context)
|
17
17
|
%(
|
18
|
-
<li class="col col-50 col-x1-20
|
18
|
+
<li class="col col-50 col-x1-20 mb-10 mb-x1-20 mb-x2-30" tooltip="#{@tooltip}">
|
19
19
|
<div class="box box-md box-x1-xxl #{@css}">
|
20
20
|
#{icon @name, @options}
|
21
21
|
</div>
|
@@ -10,8 +10,11 @@ module Jekyll
|
|
10
10
|
}
|
11
11
|
output = sass['compressed_css']
|
12
12
|
output.gsub! /}/, " }\n"
|
13
|
+
output.gsub! /([a-z]),/, "\\1,\n\\2"
|
14
|
+
output.gsub! /\),./, "),\n." # Matches :not(...),.class
|
13
15
|
output.gsub! /{/, ' { '
|
14
|
-
output.gsub! /([a-z]
|
16
|
+
output.gsub! /([a-z]):([^:|not])/, '\1: \2'
|
17
|
+
output.gsub! /;/, '; '
|
15
18
|
output.gsub! /\n\z/, ''
|
16
19
|
output
|
17
20
|
end
|
@@ -27,8 +27,8 @@ Useful when you want to display an alert for a predetermined amount of time.
|
|
27
27
|
<div class="alert-timer alert-timer-on" data-duration="15"></div>
|
28
28
|
{% endalert %}
|
29
29
|
|
30
|
-
<button class="btn btn-primary
|
31
|
-
<button class="btn btn-primary
|
30
|
+
<button class="btn btn-primary mr-10" alert-trigger="#timed-alert-5s">5 Seconds</button>
|
31
|
+
<button class="btn btn-primary mr-10" alert-trigger="#timed-alert-10s">10 Seconds</button>
|
32
32
|
<button class="btn btn-primary" alert-trigger="#timed-alert-15s">15 Seconds</button>
|
33
33
|
|
34
34
|
---
|
@@ -75,7 +75,7 @@ Useful when you need to create boxes with fixed heights. Note: The <a href="{{ s
|
|
75
75
|
{: .section-description }
|
76
76
|
|
77
77
|
{% for size in page.box_sizes %}
|
78
|
-
<div class="box box-{{ size }}
|
78
|
+
<div class="box box-{{ size }} mt-20">
|
79
79
|
<strong class="center text-lighter text-sm">.box-{{ size }}</strong>
|
80
80
|
</div>
|
81
81
|
{% endfor %}
|
@@ -87,7 +87,7 @@ Useful when you need a box with rounded corners.
|
|
87
87
|
{: .section-description }
|
88
88
|
|
89
89
|
{% for size in page.box_sizes %}
|
90
|
-
<div class="box box-rounded box-{{ size }}
|
90
|
+
<div class="box box-rounded box-{{ size }} mt-20">
|
91
91
|
<strong class="center text-lighter text-sm">.box-{{ size }}</strong>
|
92
92
|
</div>
|
93
93
|
{% endfor %}
|