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.
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 %}