shipyard-framework 0.5.86 → 0.5.87

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.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/.ruby-version +1 -1
  4. data/Brewfile +4 -0
  5. data/assets/icons/status/error.svg +4 -0
  6. data/assets/icons/status/fail.svg +4 -0
  7. data/assets/icons/status/idle.svg +4 -0
  8. data/assets/icons/status/running.svg +3 -0
  9. data/assets/icons/status/skipped.svg +3 -0
  10. data/assets/icons/status/success.svg +3 -0
  11. data/assets/icons/status/waiting.svg +5 -0
  12. data/assets/stylesheets/shipyard/_components.sass +1 -0
  13. data/assets/stylesheets/shipyard/components/_code.sass +1 -5
  14. data/assets/stylesheets/shipyard/components/_icons.sass +19 -10
  15. data/assets/stylesheets/shipyard/components/_statuses.sass +196 -0
  16. data/assets/stylesheets/shipyard/core/_animations.sass +12 -0
  17. data/assets/stylesheets/shipyard/utilities/_border-radius.sass +2 -0
  18. data/assets/stylesheets/shipyard/utilities/_margin-padding.sass +35 -17
  19. data/assets/stylesheets/shipyard/utilities/_typography.sass +3 -0
  20. data/assets/stylesheets/shipyard/variables/_components.scss +7 -0
  21. data/lib/shipyard-framework/jekyll/tags/icon_tag.rb +8 -3
  22. data/lib/shipyard-framework/version.rb +1 -1
  23. data/styleguide/.ruby-version +1 -1
  24. data/styleguide/Gemfile.lock +9 -9
  25. data/styleguide/_assets/css/views.sass +1 -1
  26. data/styleguide/_includes/page-heading.html +1 -1
  27. data/styleguide/_plugins/icon_item.rb +1 -1
  28. data/styleguide/_plugins/sass_output.rb +4 -1
  29. data/styleguide/components/alerts.md +2 -2
  30. data/styleguide/components/boxes.md +2 -2
  31. data/styleguide/components/buttons.md +26 -26
  32. data/styleguide/components/checkboxes.md +30 -30
  33. data/styleguide/components/code.html +4 -4
  34. data/styleguide/components/forms.md +7 -7
  35. data/styleguide/components/horizontal-rules.md +1 -1
  36. data/styleguide/components/icons.md +18 -2
  37. data/styleguide/components/index.md +2 -2
  38. data/styleguide/components/modals/_modal.html +15 -15
  39. data/styleguide/components/modals/example-billing.html +12 -12
  40. data/styleguide/components/modals/example-downgrade.html +2 -2
  41. data/styleguide/components/modals/example-survey.html +5 -5
  42. data/styleguide/components/modals/index.md +1 -1
  43. data/styleguide/components/radio-buttons.md +18 -18
  44. data/styleguide/components/statuses.md +324 -0
  45. data/styleguide/utilities/accordion.md +2 -2
  46. data/styleguide/utilities/border-radius.md +10 -3
  47. data/styleguide/utilities/colors.md +4 -4
  48. data/styleguide/utilities/grid.md +3 -3
  49. data/styleguide/utilities/index.md +1 -1
  50. data/styleguide/utilities/margin-padding.md +32 -19
  51. data/styleguide/utilities/opacity.md +2 -2
  52. data/styleguide/utilities/typography.md +2 -2
  53. metadata +13 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e6a117746076275509014c7f145acb8b239aa2beeb6a0687420618030db8c95f
4
- data.tar.gz: ef3c00e15b5f1acb767d42f0ccdb62e4dbc6cc4aeb3bd1fdadd260b71cc6ceb2
3
+ metadata.gz: 946a7df5969ebc5c97c3008700b6f929567e3631c7a4cd61a6f6db97f2b6550f
4
+ data.tar.gz: cbf856851da8609e050ca0c3cdd0fecac37e65d58d2fc40f89bed69da049f61f
5
5
  SHA512:
6
- metadata.gz: 58ad89442d81440b3d21f7746eda3d668ae8d79926ec1d6cd2b22751d4c5648ccf755459543d5943f8edb458bef78289fd9d687f549c93aaf9d283d4bc45065d
7
- data.tar.gz: 8222ee7dbd3f2eb48664c753c1cd177f06a7031b39780de4615cbdf13703c20e8439a8d3f82503f9e21f2eb34162ccda29decd8fb2fbdf4cbef679670b0566a6
6
+ metadata.gz: dd5faea8d39e4a90129bc3fb13d81a55bdc9cdd9be81a93b2239425dd4e503d6852c5454bc3f4f5d8db255eac4a0b395144995c3f2c82596ea705eefd740473e
7
+ data.tar.gz: 21aa24467b0afdd928bb80df53bae15d3bec9c1d4a08d633851b425f721ed2b5f36d75a38a70100177c47ea6f28193af816af06af52cefa976cade3baa2351b4
data/.gitignore CHANGED
@@ -10,3 +10,4 @@
10
10
  shipyard-*.gem
11
11
  .sass-cache
12
12
  .asset-cache
13
+ .jekyll-cache
data/.ruby-version CHANGED
@@ -1 +1 @@
1
- 2.4.1
1
+ 2.5.0
data/Brewfile ADDED
@@ -0,0 +1,4 @@
1
+ tap "caskroom/versions"
2
+ cask "java8" unless system "/usr/libexec/java_home --failfast"
3
+ brew "jenkins"
4
+ brew "libffi", link: true
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 6" class="icon-status-error icon-outline">
2
+ <line vector-effect="non-scaling-stroke" x1="1" x2="1" y2="3.1" />
3
+ <line vector-effect="non-scaling-stroke" x1="1" x2="1" y1="6" y2="6" />
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" class="icon-status-failed icon-outline">
2
+ <line vector-effect="non-scaling-stroke" x2="8" y2="8"/>
3
+ <line vector-effect="non-scaling-stroke" y1="8" x2="8"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg viewBox="0 0 4 4">
2
+ <line vector-effect="non-scaling-stroke" x1="4" x2="4" y2="4" />
3
+ <line vector-effect="non-scaling-stroke" x1="0" x2="0" y2="4" />
4
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" class="icon-status-running icon-outline">
2
+ <path vector-effect="non-scaling-stroke" d="M4,0A4,4,0,0,1,8,4"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 8" class="icon-status-skipped icon-outline">
2
+ <polyline vector-effect="non-scaling-stroke" points="0 8 4 4 0 0"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" class="icon-status-success icon-outline">
2
+ <polyline vector-effect="non-scaling-stroke" points="0 4 3 7 8 0" />
3
+ </svg>
@@ -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>
@@ -19,4 +19,5 @@
19
19
  @import "shipyard/components/tooltips"
20
20
  @import "shipyard/components/hamburger"
21
21
  @import "shipyard/components/tables"
22
+ @import "shipyard/components/statuses"
22
23
  @import "shipyard/components/horizontal-rules"
@@ -1,9 +1,5 @@
1
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
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
@@ -21,3 +21,15 @@
21
21
  transform: translatex(-100%)
22
22
  to
23
23
  transform: translatex(0%)
24
+
25
+ @keyframes fade
26
+ from
27
+ opacity: 1
28
+ to
29
+ opacity: 0
30
+
31
+ @keyframes bounce
32
+ 0%, 6%, 100%
33
+ transform: translatey(0)
34
+ 3%
35
+ transform: translatey(-200%)
@@ -7,6 +7,8 @@
7
7
  border-radius: 2px
8
8
  &-sm
9
9
  border-radius: 3px
10
+ &-md
11
+ border-radius: 5px
10
12
  &-top
11
13
  border-bottom-left-radius: 0
12
14
  border-bottom-right-radius: 0
@@ -1,22 +1,40 @@
1
- .margin
2
- +all-media-sizes
3
- &-auto
4
- margin: auto
1
+ @function get-value($value)
2
+ @if $value == auto
3
+ @return $value
4
+ @else
5
+ @return #{$value}px
5
6
 
6
- @each $property in (margin, padding)
7
- .#{$property}
8
- $sizes: (none: 0, xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px)
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
- // Outputs: .padding-none, .padding-x1-none, .padding-sm, .padding-x1-sm, etc...
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 $size, $value in $sizes
13
- &-#{$size}
14
- #{$property}: $value
30
+ @each $value in $values
31
+ &-#{$value}
32
+ #{$property-name}: get-value($value)
15
33
 
16
- // Outputs: .padding-top-sm, .padding-x1-none, .padding-sm, .padding-x1-sm, etc...
17
- @each $direction in (top, right, bottom, left)
18
- &-#{$direction}
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 $size, $value in $sizes
21
- &-#{$size}
22
- #{$property}-#{$direction}: $value
38
+ @each $value in $values
39
+ &-#{$value}
40
+ #{$property-name}-#{$direction-name}: get-value($value)
@@ -1,3 +1,6 @@
1
+ .monospace
2
+ font-family: $font-monospace
3
+
1
4
  .em
2
5
  color: $teal
3
6
 
@@ -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
- @args = params.strip.split(',')
11
- @name = eval(@args[0])
12
- @options = @args[1] ? eval("{#{@args[1]}}") : {}
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)
@@ -1,3 +1,3 @@
1
1
  module Shipyard
2
- VERSION = '0.5.86'
2
+ VERSION = '0.5.87'
3
3
  end
@@ -1 +1 @@
1
- 2.4.1
1
+ 2.5.0
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: ..
3
3
  specs:
4
- shipyard-framework (0.5.86)
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.0)
37
- ffi (1.9.18)
36
+ fastimage (2.1.1)
37
+ ffi (1.9.21)
38
38
  forwardable-extended (2.6.0)
39
- i18n (0.9.3)
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.1)
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.1.1)
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.1)
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.3)
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.0.pre.3
125
+ 1.16.1
@@ -14,7 +14,7 @@ hr
14
14
  // Shared
15
15
  .section-description
16
16
  @extend .text-light
17
- @extend .margin-bottom-md
17
+ @extend .mb-20
18
18
 
19
19
  // Utilities: Colors
20
20
  +component('shade')
@@ -1,4 +1,4 @@
1
1
  <h1>{{ page.title }}</h1>
2
2
  {% if page.description %}
3
- <p class="text-light text-lg margin-top-sm" markdown="1">{{ page.description }}</p>
3
+ <p class="text-light text-lg mt-15" markdown="1">{{ page.description }}</p>
4
4
  {% endif %}
@@ -15,7 +15,7 @@ module Jekyll
15
15
 
16
16
  def render(context)
17
17
  %(
18
- <li class="col col-50 col-x1-20 margin-bottom-xs margin-bottom-x1-md margin-bottom-x2-lg" tooltip="#{@tooltip}">
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]*):/, '\1: '
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 margin-right-xs" alert-trigger="#timed-alert-5s">5 Seconds</button>
31
- <button class="btn btn-primary margin-right-xs" alert-trigger="#timed-alert-10s">10 Seconds</button>
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 }} margin-top-md">
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 }} margin-top-md">
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 %}