jekyll-theme-primer 0.3.1 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. checksums.yaml +4 -4
  2. data/_layouts/default.html +2 -1
  3. data/_sass/primer-base/README.md +2 -2
  4. data/_sass/primer-base/build/build.css +1 -1
  5. data/_sass/primer-base/build/index.js +1 -1
  6. data/_sass/primer-base/lib/base.scss +4 -4
  7. data/_sass/primer-base/lib/typography-base.scss +4 -3
  8. data/_sass/primer-base/package.json +24 -68
  9. data/_sass/primer-layout/README.md +2 -2
  10. data/_sass/primer-layout/build/build.css +1 -1
  11. data/_sass/primer-layout/build/index.js +1 -1
  12. data/_sass/primer-layout/lib/columns.scss +0 -15
  13. data/_sass/primer-layout/lib/container.scss +0 -3
  14. data/_sass/primer-layout/lib/grid.scss +22 -5
  15. data/_sass/primer-layout/package.json +24 -68
  16. data/_sass/primer-markdown/README.md +2 -2
  17. data/_sass/primer-markdown/lib/blob-csv.scss +4 -4
  18. data/_sass/primer-markdown/lib/code.scss +3 -3
  19. data/_sass/primer-markdown/lib/headings.scss +3 -3
  20. data/_sass/primer-markdown/lib/images.scss +1 -1
  21. data/_sass/primer-markdown/lib/lists.scss +5 -5
  22. data/_sass/primer-markdown/lib/markdown-body.scss +6 -7
  23. data/_sass/primer-markdown/lib/tables.scss +1 -1
  24. data/_sass/primer-markdown/package.json +24 -88
  25. data/_sass/primer-support/README.md +2 -2
  26. data/_sass/primer-support/lib/mixins/buttons.scss +2 -2
  27. data/_sass/primer-support/lib/variables/color-system.scss +11 -11
  28. data/_sass/primer-support/lib/variables/layout.scss +1 -1
  29. data/_sass/primer-support/lib/variables/misc.scss +7 -12
  30. data/_sass/primer-support/package.json +22 -90
  31. data/_sass/primer-utilities/README.md +2 -2
  32. data/_sass/primer-utilities/build/build.css +1 -1
  33. data/_sass/primer-utilities/build/index.js +1 -1
  34. data/_sass/primer-utilities/lib/colors.scss +1 -1
  35. data/_sass/primer-utilities/lib/padding.scss +17 -0
  36. data/_sass/primer-utilities/lib/typography.scss +4 -4
  37. data/_sass/primer-utilities/lib/visibility-display.scss +17 -1
  38. data/_sass/primer-utilities/package.json +24 -92
  39. data/assets/javascript/anchor-js/anchor.js +8 -12
  40. data/assets/javascript/anchor-js/anchor.min.js +3 -3
  41. data/assets/javascript/anchor-js/banner.js +17 -0
  42. data/assets/javascript/anchor-js/docs/anchor.js +334 -0
  43. data/assets/javascript/anchor-js/docs/favicon.ico +0 -0
  44. data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.eot +0 -0
  45. data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.svg +11 -0
  46. data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.ttf +0 -0
  47. data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.woff +0 -0
  48. data/assets/javascript/anchor-js/docs/fonts/fonts.css +24 -0
  49. data/assets/javascript/anchor-js/docs/grunticon/grunticon.loader.js +3 -0
  50. data/assets/javascript/anchor-js/docs/grunticon/icons.data.png.css +5 -0
  51. data/assets/javascript/anchor-js/docs/grunticon/icons.data.svg.css +5 -0
  52. data/assets/javascript/anchor-js/docs/grunticon/icons.fallback.css +5 -0
  53. data/assets/javascript/anchor-js/docs/grunticon/png/grunticon-link.png +0 -0
  54. data/assets/javascript/anchor-js/docs/grunticon/preview.html +33 -0
  55. data/assets/javascript/anchor-js/docs/img/anchoring-links.png +0 -0
  56. data/assets/javascript/anchor-js/docs/img/anchorjs_logo.png +0 -0
  57. data/assets/javascript/anchor-js/docs/img/anchorlinks2.png +0 -0
  58. data/assets/javascript/anchor-js/docs/img/gh-link.svg +9 -0
  59. data/assets/javascript/anchor-js/docs/img/gh_link.svg +9 -0
  60. data/assets/javascript/anchor-js/docs/img/hyperlink.svg +9 -0
  61. data/assets/javascript/anchor-js/docs/img/link.svg +6 -0
  62. data/assets/javascript/anchor-js/docs/img/mini-logo.png +0 -0
  63. data/assets/javascript/anchor-js/docs/img/primer-md.png +0 -0
  64. data/assets/javascript/anchor-js/docs/index.html +807 -0
  65. data/assets/javascript/anchor-js/docs/scripts.js +12 -0
  66. data/assets/javascript/anchor-js/docs/styles.css +493 -0
  67. metadata +44 -9
  68. data/_sass/primer-base/CHANGELOG.md +0 -68
  69. data/_sass/primer-layout/CHANGELOG.md +0 -63
  70. data/_sass/primer-markdown/CHANGELOG.md +0 -202
  71. data/_sass/primer-support/CHANGELOG.md +0 -164
  72. data/_sass/primer-utilities/CHANGELOG.md +0 -245
@@ -0,0 +1,12 @@
1
+ $(document).ready(function() {
2
+ var preEls = $('pre');
3
+
4
+ $('.example-code-link').click(function(e) {
5
+ e.preventDefault();
6
+ $(this).parent().next().slideToggle();
7
+ });
8
+
9
+ // Dynamically add PrismJS class for syntax highlight
10
+ preEls.filter('[class*="js"]').find('code').addClass('language-javascript');
11
+ preEls.filter('.css').find('code').addClass('language-css');
12
+ });
@@ -0,0 +1,493 @@
1
+ /*//// Base Styles ////*/
2
+
3
+ div,
4
+ article,
5
+ section,
6
+ main,
7
+ footer,
8
+ header,
9
+ form,
10
+ fieldset,
11
+ pre,
12
+ code,
13
+ p,
14
+ input[type="text"],
15
+ input[type="tel"],
16
+ input[type="email"],
17
+ input[type="url"],
18
+ input[type="password"] {
19
+ box-sizing: border-box;
20
+ }
21
+
22
+ body {
23
+ font-family: 'Source Sans Pro', sans-serif;
24
+ background-color: rgb(162, 255, 224);
25
+ color: #262626;
26
+ margin: 0 1.5em;
27
+ }
28
+
29
+ h1 {
30
+ font-size: 2.2em;
31
+ }
32
+ h2 {
33
+ font-size: 2.0em;
34
+ margin-top: 1.5em;
35
+ }
36
+ h3 {
37
+ font-size: 1.8em;
38
+ }
39
+
40
+ table {
41
+ border-collapse: collapse;
42
+ background: white;
43
+ box-shadow: 0px 0px 10px -4px #666;
44
+ border: 1px solid white;
45
+ }
46
+
47
+ table td,
48
+ table th {
49
+ padding: 0.5em;
50
+ border: 1px solid #ddd;
51
+ }
52
+
53
+ img {
54
+ max-width: 100%;
55
+ }
56
+
57
+ a {
58
+ color: black;
59
+ text-decoration: underline;
60
+ }
61
+
62
+ /*//// Code Snippet Styles ////*/
63
+
64
+ code,
65
+ samp,
66
+ kbd {
67
+ background-color: #141414;
68
+ color: #f7f7f7;
69
+ font-family: "Inconsolata", "Menlo", "Consolas", monospace;
70
+ font-size: 0.9em;
71
+ padding: 2px 6px;
72
+ text-align: left;
73
+ border-radius: 3px;
74
+ }
75
+
76
+ pre {
77
+ background-color: #141414;
78
+ color: #f7f7f7;
79
+ font-family: "Inconsolata", "Menlo", "Consolas", monospace;
80
+ font-size: 0.9em;
81
+ line-height: 1.2em;
82
+ margin: 0;
83
+ overflow: auto;
84
+ padding: 1em;
85
+ border-radius: 3px;
86
+ }
87
+
88
+ .examples pre,
89
+ .hover-examples pre,
90
+ .preview-examples pre {
91
+ padding-left: 2.75em;
92
+ border-radius: 0;
93
+ }
94
+
95
+ /* Override 'code' css rules if using 'pre > code' markup. */
96
+ pre > code {
97
+ font-size: 1em;
98
+ padding: 0px;
99
+ }
100
+
101
+ /* for IE7 and IE6 */
102
+ *:first-child+html pre {
103
+ overflow: visible;
104
+ overflow-x: auto;
105
+ overflow-y: hidden;
106
+ padding-bottom: 2em;
107
+ }
108
+
109
+ * html pre {
110
+ overflow: visible;
111
+ overflow-x: auto;
112
+ padding-bottom: 2em;
113
+ }
114
+
115
+ /* Reset PrismJS' border styles */
116
+ .main pre[class*="language-"],
117
+ .example pre[class*="language-"] {
118
+ border: 0;
119
+ border-radius: 3px;
120
+ }
121
+
122
+ /*//// Page Styles ////*/
123
+ .header {
124
+ max-width: 720px;
125
+ margin: 0 auto;
126
+ padding-top: 1.5em;
127
+ }
128
+
129
+ .page-title {
130
+ text-align: center;
131
+ }
132
+
133
+ .logo {
134
+ display: block;
135
+ margin: 0 auto;
136
+ }
137
+
138
+ .desc {
139
+ padding: 1em 0;
140
+ text-align: center;
141
+ }
142
+ .maindesc {
143
+ font-size: 30px;
144
+ margin-bottom: 1em;
145
+ }
146
+ .subdesc {
147
+ font-size: 15px;
148
+ }
149
+
150
+ .more-examples {
151
+ text-align: right;
152
+ font-size: 12px;
153
+ margin: 0 5px 0 0;
154
+ }
155
+
156
+ .main {
157
+ line-height: 1.4;
158
+ margin: 0 auto;
159
+ max-width: 720px;
160
+ }
161
+ .used-by {
162
+ text-align: center;
163
+ position: relative;
164
+ padding: 1em 0;
165
+ }
166
+ .used-by-label {
167
+ font-size: 20px;
168
+ text-align: center;
169
+ font-weight: normal;
170
+ }
171
+ .used-by img {
172
+ border-radius: 8px;
173
+ opacity: 1;
174
+ margin: 0px 10px;
175
+ }
176
+
177
+ .anchorlink-examples {
178
+ float: right;
179
+ margin: 0 0 1em 1em;
180
+ box-shadow: 0px 0px 10px -3px #666;
181
+ }
182
+
183
+ .options-table {
184
+ width: 100%;
185
+ margin: 1em 0;
186
+ }
187
+
188
+ .minicol {
189
+ width: 62px;
190
+ }
191
+
192
+ .footer {
193
+ text-align: center;
194
+ color: #777;
195
+ }
196
+ .footer a {
197
+ color: #777;
198
+ }
199
+
200
+ /*///////////// Examples /////////////*/
201
+
202
+ .examples,
203
+ .hover-examples,
204
+ .preview-examples {
205
+ max-width: 720px;
206
+ margin: 0 auto;
207
+ display: -webkit-flex;
208
+ display: flex;
209
+ -webkit-flex-direction: row;
210
+ flex-direction: row;
211
+ -webkit-justify-content: center;
212
+ justify-content: center;
213
+ -webkit-flex-wrap: wrap;
214
+ flex-wrap: wrap;
215
+ -webkit-align-content: flex-end;
216
+ align-content: flex-end;
217
+ }
218
+
219
+ .example {
220
+ max-width: 350px;
221
+ min-height: 160px;
222
+ margin: 5px;
223
+ }
224
+ .example-label {
225
+ font-size: 12px;
226
+ color: #777;
227
+ display: none;
228
+ }
229
+ .example-content {
230
+ padding: 0 0 0 3.5em;
231
+ overflow: hidden;
232
+ position: relative;
233
+ background: #fff;
234
+ box-shadow: 0px 0px 10px -3px #666;
235
+ }
236
+
237
+ .example-code-link {
238
+ width: 16px;
239
+ position: absolute;
240
+ top: 8px;
241
+ right: 8px;
242
+ font-family: Courier monospace;
243
+ color: #aaa;
244
+ text-decoration: none;
245
+ }
246
+
247
+ .example-code-link:hover:after,
248
+ .example-code-link:focus:after {
249
+ left: -50px;
250
+ opacity: 1;
251
+ -webkit-transition: all 0.25s ease-in;
252
+ transition: all 0.25s ease-in;
253
+ }
254
+
255
+ .example-code-link:after {
256
+ content: "SOURCE";
257
+ font-family: Helvetica, Arial, sans-serif;
258
+ font-size: 10px;
259
+ line-height: 1;
260
+ display: block;
261
+ position: absolute;
262
+ text-transform: uppercase;
263
+ top: 7px;
264
+ left: -45px;
265
+ opacity: 0;
266
+ -webkit-transition: all 0.25s ease-in;
267
+ transition: all 0.25s ease-in;
268
+ }
269
+
270
+ .example-code {
271
+ display: none;
272
+ }
273
+
274
+ .css {
275
+ border-top: 1px solid #666;
276
+ }
277
+
278
+ .css,
279
+ .js {
280
+ position: relative;
281
+ }
282
+
283
+ .css::before,
284
+ .js::before {
285
+ left: 0;
286
+ top: 0;
287
+ padding: 1px 4px;
288
+ color: white;
289
+ background: #FF5231;
290
+ position: absolute;
291
+ font-size: 11px;
292
+ text-transform: uppercase;
293
+ }
294
+
295
+ .css::before {
296
+ content: 'css';
297
+ }
298
+ .js::before {
299
+ content: 'js';
300
+ }
301
+
302
+ .example-content > p {
303
+ width: 310px;
304
+ }
305
+
306
+ .anchorjs-link {
307
+ color: #FF5231;
308
+ }
309
+
310
+ /*///// Styles within Examples /////*/
311
+ .examples .example:nth-child(3) .anchorjs-link,
312
+ .preview-examples .example:nth-child(2) .anchorjs-link {
313
+ font-family: Helvetica, Arial, sans-serif;
314
+ }
315
+
316
+ .examples .example:nth-child(7) .anchorjs-link {
317
+ font-weight: 200;
318
+ margin-left: 1em;
319
+ padding-right: 0.375em;
320
+ font-size: 0.5em;
321
+ border: 1px dashed #FFBAAC;
322
+ vertical-align: middle;
323
+ }
324
+
325
+ .examples .example:nth-child(8) .anchorjs-link {
326
+ width: 14px;
327
+ height: 32px;
328
+ margin-top: 6px;
329
+ background: url('img/mini-logo.png') no-repeat;
330
+ margin-left: -1.25em !important;
331
+ }
332
+
333
+ .examples .example:nth-child(9) .anchorjs-link:after {
334
+ margin-left: 7px;
335
+ margin-top: -4px;
336
+ display: block;
337
+ }
338
+
339
+ .examples .example:nth-child(9) .anchorjs-link {
340
+ background-color: #FF5231;
341
+ height: 32px;
342
+ width: 18px;
343
+ border-radius: 50%;
344
+ display: inline-block;
345
+ color: white;
346
+ margin-top: 4px;
347
+ margin-left: -1.4em !important;
348
+ }
349
+
350
+ .examples .example:nth-child(11) .anchorjs-link {
351
+ display: inline-block;
352
+ background: url('img/hyperlink.svg') no-repeat;
353
+ margin-left: 8px;
354
+ width: 14px;
355
+ height: 24px;
356
+ }
357
+
358
+ .examples .example:nth-child(12) .anchorjs-link {
359
+ background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDIwIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImxpbmsiIGZpbGw9IiNGRjUyMzEiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMCBMMTIuMzA0Njg3NSwwIEMxMy4yNDIxODc1LDAuNjI1IDE0LjEyMTA5MzgsMS43MzgyODEyNSAxNC4zOTQ1MzEyLDIuNSBMMTQuOTgwNDY4OCwyLjUgQzE2LjI1LDIuNSAxNy40ODA0Njg4LDMuNzUgMTcuNDgwNDY4OCw1IEMxNy40ODA0Njg4LDYuMjUgMTYuMjEwOTM3NSw3LjUgMTQuOTgwNDY4OCw3LjUgTDExLjIzMDQ2ODgsNy41IEMxMCw3LjUgOC43MzA0Njg3NSw2LjI1IDguNzMwNDY4NzUsNSBDOC43MzA0Njg3NSw0LjU1MDc4MTI1IDguODY3MTg3NSw0LjEyMTA5Mzc1IDkuMDgyMDMxMjUsMy43NSBMNi40MDYyNSwzLjc1IEM2LjMwODU5Mzc1LDQuMTYwMTU2MjUgNi4yNSw0LjU3MDMxMjUgNi4yNSw1IEM2LjI1LDcuNSA4LjczMDQ2ODc1LDEwIDExLjIzMDQ2ODgsMTAgTDE1LDEwIEMxNy41LDEwIDIwLDcuNSAyMCw1IEMyMCwyLjUgMTcuNSwwIDE1LDAgTDE1LDAgWiBNNS42MDU0Njg3NSw3LjUgTDUuMDE5NTMxMjUsNy41IEMzLjc1LDcuNSAyLjUxOTUzMTI1LDYuMjUgMi41MTk1MzEyNSw1IEMyLjUxOTUzMTI1LDMuNzUgMy43ODkwNjI1LDIuNSA1LjAxOTUzMTI1LDIuNSBMOC43Njk1MzEyNSwyLjUgQzEwLDIuNSAxMS4yNjk1MzEyLDMuNzUgMTEuMjY5NTMxMiw1IEMxMS4yNjk1MzEyLDUuNDQ5MjE4NzUgMTEuMTMyODEyNSw1Ljg3ODkwNjI1IDEwLjkxNzk2ODgsNi4yNSBMMTMuNTkzNzUsNi4yNSBDMTMuNjkxNDA2Miw1LjgzOTg0Mzc1IDEzLjc1LDUuNDI5Njg3NSAxMy43NSw1IEMxMy43NSwyLjUgMTEuMjY5NTMxMiwwIDguNzY5NTMxMjUsMCBMNSwwIEMyLjUsMCAwLDIuNSAwLDUgQzAsNy41IDIuNSwxMCA1LDEwIEw3LjY5NTMxMjUsMTAgQzYuNzU3ODEyNSw5LjM3NSA1Ljg3ODkwNjI1LDguMjYxNzE4NzUgNS42MDU0Njg3NSw3LjUgTDUuNjA1NDY4NzUsNy41IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat;
360
+ margin-top: 15px;
361
+ height: 16px;
362
+ width: 20px;
363
+ }
364
+
365
+ .examples .example:nth-child(13) .anchorjs-link {
366
+ border-color: #FF5231 #FF5231 transparent;
367
+ border-width: 15px 7px 6px;
368
+ border-style: solid;
369
+ margin-top: 10px;
370
+ font-size: 22px;
371
+ padding-right: 0 !important;
372
+ }
373
+
374
+ .examples .example:nth-child(14) .anchorjs-link {
375
+ margin-left: -1.8em !important;
376
+ }
377
+
378
+ .examples .example:nth-child(15) .anchorjs-link {
379
+ display: inline-block;
380
+ width: 0.375em;
381
+ height: 20px;
382
+ margin-left: 0.375em;
383
+ }
384
+
385
+ /* Hover Examples */
386
+
387
+ .hover-examples .example:nth-child(2) *:hover > .anchorjs-link,
388
+ .hover-examples .example:nth-child(2) .anchorjs-link:focus {
389
+ transition: color .25s linear;
390
+ }
391
+ .hover-examples .example:nth-child(2) .anchorjs-link:hover {
392
+ color: #2500AD;
393
+ }
394
+
395
+ .hover-examples .example:nth-child(3) .anchorjs-link {
396
+ transition: all .25s linear;
397
+ }
398
+ .hover-examples .example:nth-child(3) *:hover > .anchorjs-link,
399
+ .hover-examples .example:nth-child(3) .anchorjs-link:focus {
400
+ margin-left: -1.125em !important;
401
+ }
402
+
403
+
404
+ .hover-examples .example:nth-child(4) h3 {
405
+ display: -webkit-box;
406
+ display: -webkit-flex;
407
+ display: -ms-flexbox;
408
+ display: flex;
409
+ }
410
+ .hover-examples .example:nth-child(4) .anchorjs-link {
411
+ background: #FF5231;
412
+ color: white;
413
+ font-family: Helvetica, Arial, sans-serif;
414
+ font-weight: 200;
415
+ font-size: 1rem;
416
+ position: relative;
417
+ top: 2px;
418
+ -webkit-box-flex: 1;
419
+ -webkit-flex: 1;
420
+ -ms-flex: 1;
421
+ flex: 1;
422
+ margin-right: -6%;
423
+ padding-right: 6%;
424
+ padding-left: 42px !important;
425
+ height: 36px;
426
+ line-height: 38px;
427
+ -webkit-transition: all 0.5s ease;
428
+ transition: all 0.5s ease;
429
+ -webkit-transform: translateX(100%);
430
+ -ms-transform: translateX(100%);
431
+ transform: translateX(100%);
432
+ }
433
+ .hover-examples .example:nth-child(4) .anchorjs-link::before {
434
+ position: absolute;
435
+ left: 0;
436
+ display: block;
437
+ width: 0;
438
+ height: 0;
439
+ border: 18px solid #fff;
440
+ border-right-color: #FF5231;
441
+ content: '';
442
+ transition: all 0.5s ease;
443
+ }
444
+ .hover-examples .example:nth-child(4) *:hover > .anchorjs-link,
445
+ .hover-examples .example:nth-child(4) .anchorjs-link:focus {
446
+ -webkit-transform: translateX(0);
447
+ -ms-transform: translateX(0);
448
+
449
+ transform: translateX(0);
450
+ }
451
+ .hover-examples .example:nth-child(4) *:hover > .anchorjs-link:hover,
452
+ .hover-examples .example:nth-child(4) .anchorjs-link:focus {
453
+ background: #FF806A;
454
+ }
455
+ .hover-examples .example:nth-child(4) *:hover > .anchorjs-link:hover::before,
456
+ .hover-examples .example:nth-child(4) .anchorjs-link:focus {
457
+ border-right-color: #FF806A;
458
+ }
459
+
460
+ .hover-examples .example:nth-child(5) .anchorjs-link:after {
461
+ display: inline-block;
462
+ transition: opacity .25s linear;
463
+ font-family: Verdana, sans-serif;
464
+ font-size: 0.75ex;
465
+ font-weight: 100;
466
+ padding: 0.5ex 1.5ex;
467
+ background: #444;
468
+ color: #fff;
469
+ border-radius: 0.6ex;
470
+ vertical-align: 0.8ex;
471
+ }
472
+ .hover-examples .example:nth-child(5) .anchorjs-link:before {
473
+ content: '';
474
+ display: inline-block;
475
+ border-top: 0.3ex solid transparent;
476
+ border-right: 0.5ex solid #444;
477
+ border-bottom: 0.3ex solid transparent;
478
+ vertical-align: 0.35ex;
479
+ }
480
+ .hover-examples .example:nth-child(5) .anchorjs-link:hover:after {
481
+ background-color: #666;
482
+ }
483
+ .hover-examples .example:nth-child(5) .anchorjs-link:hover:before {
484
+ border-right-color: #666;
485
+ }
486
+
487
+ /*////// Utilities ////////*/
488
+ /* Clearfix */
489
+ .group:after {
490
+ content: "";
491
+ display: table;
492
+ clear: both;
493
+ }