codeclimate-styles 0.1.0

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 (74) hide show
  1. checksums.yaml +7 -0
  2. data/Gemfile +4 -0
  3. data/Rakefile +1 -0
  4. data/assets/images/cc/styles/icons/add_collaborator_linear.svg +1 -0
  5. data/assets/images/cc/styles/icons/add_collaborator_solid.svg +1 -0
  6. data/assets/images/cc/styles/icons/add_linear.svg +1 -0
  7. data/assets/images/cc/styles/icons/add_solid.svg +1 -0
  8. data/assets/images/cc/styles/icons/alert_solid.svg +1 -0
  9. data/assets/images/cc/styles/icons/arrow_linear.svg +1 -0
  10. data/assets/images/cc/styles/icons/arrow_solid.svg +1 -0
  11. data/assets/images/cc/styles/icons/badge_linear.svg +1 -0
  12. data/assets/images/cc/styles/icons/badge_solid.svg +1 -0
  13. data/assets/images/cc/styles/icons/branch_solid.svg +1 -0
  14. data/assets/images/cc/styles/icons/checkmark.svg +1 -0
  15. data/assets/images/cc/styles/icons/code_badge.svg +1 -0
  16. data/assets/images/cc/styles/icons/docs_linear.svg +1 -0
  17. data/assets/images/cc/styles/icons/docs_solid.svg +1 -0
  18. data/assets/images/cc/styles/icons/error.svg +1 -0
  19. data/assets/images/cc/styles/icons/eye_disabled.svg +1 -0
  20. data/assets/images/cc/styles/icons/eye_enabled.svg +1 -0
  21. data/assets/images/cc/styles/icons/file_linear.svg +1 -0
  22. data/assets/images/cc/styles/icons/files_linear.svg +1 -0
  23. data/assets/images/cc/styles/icons/files_solid.svg +1 -0
  24. data/assets/images/cc/styles/icons/folder_linear.svg +1 -0
  25. data/assets/images/cc/styles/icons/folder_solid.svg +1 -0
  26. data/assets/images/cc/styles/icons/hourglass_badge.svg +1 -0
  27. data/assets/images/cc/styles/icons/info_linear.svg +1 -0
  28. data/assets/images/cc/styles/icons/info_solid.svg +1 -0
  29. data/assets/images/cc/styles/icons/link_arrow.svg +1 -0
  30. data/assets/images/cc/styles/icons/lock_linear.svg +1 -0
  31. data/assets/images/cc/styles/icons/lock_solid.svg +1 -0
  32. data/assets/images/cc/styles/icons/logout_linear.svg +1 -0
  33. data/assets/images/cc/styles/icons/new_alert.svg +1 -0
  34. data/assets/images/cc/styles/icons/nubbin_arrow.svg +1 -0
  35. data/assets/images/cc/styles/icons/post_entry.svg +1 -0
  36. data/assets/images/cc/styles/icons/post_entry_unread.svg +1 -0
  37. data/assets/images/cc/styles/icons/search_linear.svg +1 -0
  38. data/assets/images/cc/styles/icons/search_solid.svg +1 -0
  39. data/assets/images/cc/styles/icons/settings_linear.svg +1 -0
  40. data/assets/images/cc/styles/icons/settings_solid.svg +1 -0
  41. data/assets/images/cc/styles/icons/small_dismiss_x.svg +1 -0
  42. data/assets/images/cc/styles/icons/star_linear.svg +1 -0
  43. data/assets/images/cc/styles/icons/star_solid.svg +1 -0
  44. data/assets/images/cc/styles/icons/sucess.svg +1 -0
  45. data/assets/images/cc/styles/icons/sync.svg +1 -0
  46. data/assets/images/cc/styles/icons/ticket_linear.svg +1 -0
  47. data/assets/images/cc/styles/icons/trial_icon.svg +1 -0
  48. data/assets/images/cc/styles/icons/user_settings_linear.svg +1 -0
  49. data/assets/images/cc/styles/logo/ff_logo_white.svg +1 -0
  50. data/assets/images/cc/styles/logo/logo.svg +1 -0
  51. data/assets/images/cc/styles/logo/logo_with_wordmark.svg +1 -0
  52. data/assets/javascripts/cc/styles/grid_overlay.js +151 -0
  53. data/assets/stylesheets/cc/_styles.scss +5 -0
  54. data/assets/stylesheets/cc/styles/_colors.scss +75 -0
  55. data/assets/stylesheets/cc/styles/_mixins.scss +2 -0
  56. data/assets/stylesheets/cc/styles/_modules.scss +9 -0
  57. data/assets/stylesheets/cc/styles/mixins/_ff_mask_image.scss +9 -0
  58. data/assets/stylesheets/cc/styles/mixins/_transitions.scss +7 -0
  59. data/assets/stylesheets/cc/styles/modules/_buttons.scss +186 -0
  60. data/assets/stylesheets/cc/styles/modules/_code.scss +221 -0
  61. data/assets/stylesheets/cc/styles/modules/_forms.scss +246 -0
  62. data/assets/stylesheets/cc/styles/modules/_layout.scss +237 -0
  63. data/assets/stylesheets/cc/styles/modules/_lists.scss +178 -0
  64. data/assets/stylesheets/cc/styles/modules/_misc.scss +820 -0
  65. data/assets/stylesheets/cc/styles/modules/_tabs.scss +80 -0
  66. data/assets/stylesheets/cc/styles/modules/_typography.scss +220 -0
  67. data/assets/stylesheets/cc/styles/modules/_util.scss +27 -0
  68. data/assets/stylesheets/vendor/reset.scss +2 -0
  69. data/codeclimate-styles.gemspec +18 -0
  70. data/lib/cc/styles/engine.rb +18 -0
  71. data/lib/cc/styles/version.rb +5 -0
  72. data/lib/cc/styles.rb +13 -0
  73. data/lib/codeclimate-styles.rb +3 -0
  74. metadata +116 -0
@@ -0,0 +1,820 @@
1
+ /*doc
2
+ ---
3
+ title: Avatar
4
+ name: avatar
5
+ category: misc
6
+ ---
7
+
8
+ - `.small` - A small (25x25) avatar
9
+
10
+ ```slim_example
11
+ img.avatar src="https://avatars.githubusercontent.com/u/1634280?v=3&u=f4d261ab0738ab0f0fdc86aa9546f0cfbb3d23f0&s=75"
12
+ img.avatar.small src="https://avatars.githubusercontent.com/u/1634280?v=3&u=f4d261ab0738ab0f0fdc86aa9546f0cfbb3d23f0&s=75"
13
+ ```
14
+ */
15
+
16
+ .avatar {
17
+ border-radius: 38px;
18
+ height: 75px;
19
+ width: 75px;
20
+
21
+ &.small {
22
+ border-radius: 13px;
23
+ height: 25px;
24
+ width: 25px;
25
+ }
26
+ }
27
+
28
+ /*doc
29
+ ---
30
+ title: Badge
31
+ name: badge
32
+ category: misc
33
+ ---
34
+
35
+ ```slim_example
36
+ span.badge 10
37
+ ```
38
+ */
39
+
40
+ .badge {
41
+ background-color: $velvet;
42
+ border-radius: 15px;
43
+ box-sizing: border-box;
44
+ color: $white;
45
+ display: inline-block;
46
+ font-size: 14px;
47
+ height: 30px;
48
+ line-height: 1;
49
+ padding: 8px 0;
50
+ text-align: center;
51
+ white-space: nowrap;
52
+ width: 30px;
53
+ }
54
+
55
+ /*doc
56
+ ---
57
+ title: Score
58
+ name: score
59
+ category: misc
60
+ ---
61
+
62
+ - .green - A green score indicates a positive movement.
63
+
64
+ ```slim_example
65
+ div.score
66
+ span Coverage
67
+ span +2%
68
+ div.score.green
69
+ span Coverage
70
+ span +2%
71
+ ```
72
+ */
73
+
74
+ .score {
75
+ > span {
76
+ background-color: $white;
77
+ color: $grayscale-slate;
78
+ display: inline-block;
79
+ font-size: 11px;
80
+ letter-spacing: .8px;
81
+ line-height: 1;
82
+ margin-left: 3px;
83
+ padding: 9px 12px;
84
+ text-transform: uppercase;
85
+ vertical-align: top;
86
+
87
+ &:first-child {
88
+ border-bottom-left-radius: 4px;
89
+ border-top-left-radius: 4px;
90
+ margin-left: 0;
91
+ }
92
+
93
+ &:last-child {
94
+ border-bottom-right-radius: 4px;
95
+ border-top-right-radius: 4px;
96
+ font-size: 14px;
97
+ padding-bottom: 8px;
98
+ padding-top: 7px;
99
+ }
100
+ }
101
+
102
+ &.green {
103
+ span:last-child {
104
+ color: $green;
105
+ }
106
+ }
107
+
108
+ }
109
+
110
+ /*doc
111
+ ---
112
+ title: Grade
113
+ name: grade
114
+ category: misc
115
+ ---
116
+
117
+ ```slim_example
118
+ label.grade.grade--d D
119
+ ```
120
+ */
121
+
122
+ .grade {
123
+ background-color: rgba($grayscale-pearl, .45);
124
+ border: 2px dashed rgba($box-border-color, .45);
125
+ border-radius: 3px;
126
+ box-sizing: border-box;
127
+ color: $white;
128
+ content: "";
129
+ display: inline-block;
130
+ font-size: 16px;
131
+ font-weight: 700;
132
+ height: 27px;
133
+ line-height: 1;
134
+ position: relative;
135
+ text-align: center;
136
+ vertical-align: middle;
137
+ width: 27px;
138
+
139
+ .tooltip {
140
+ bottom: 100%;
141
+ left: 50%;
142
+ margin-left: -100px;
143
+ width: 200px;
144
+ }
145
+ }
146
+
147
+ @each $grade, $color-map in $grade-colors {
148
+ .grade--#{$grade} {
149
+ background-color: #{map-get($color-map, color)};
150
+ border: 0;
151
+ padding-top: 7px;
152
+ }
153
+ }
154
+
155
+ .grade--empty {
156
+ @include ff-mask-image(none);
157
+ background: transparent;
158
+ border: 2px dashed $box-border-color;
159
+ }
160
+
161
+ /*doc
162
+ ---
163
+ title: Hotspot
164
+ name: hotspot
165
+ category: misc
166
+ ---
167
+
168
+ ```slim_example
169
+ div.hotspot
170
+ .grade.grade--d D
171
+ .grade.grade--f F
172
+ a href="#" source/stylesheeets/syntax/_vim.scss
173
+ ```
174
+ */
175
+
176
+ $hotspot-arrow-color: #231f20;
177
+
178
+ .hotspot {
179
+ font-size: 15px;
180
+ line-height: 1;
181
+ white-space: nowrap;
182
+
183
+ > .grade {
184
+ vertical-align: top;
185
+
186
+ &:first-child::after {
187
+ color: $hotspot-arrow-color;
188
+ content: "\2192";
189
+ left: 30px;
190
+ position: absolute;
191
+ text-align: center;
192
+ width: 27px;
193
+ }
194
+
195
+ + .grade {
196
+ margin-left: 27px;
197
+ margin-right: 12px;
198
+ }
199
+ }
200
+
201
+ > a {
202
+ display: inline-block;
203
+ padding: 11px 0;
204
+ text-decoration: none;
205
+ vertical-align: top;
206
+ }
207
+ }
208
+
209
+ /*doc
210
+ ---
211
+ title: Tooltip
212
+ name: tooltip
213
+ category: misc
214
+ ---
215
+
216
+ ```slim_example
217
+ div
218
+ .tooltip I am a tooltip with content
219
+ | hover here to see a tooltip
220
+ ```
221
+ */
222
+
223
+ $tooltip-background-color: rgba(4, 4, 4, .8);
224
+
225
+ .tooltip {
226
+ background-color: $tooltip-background-color;
227
+ border-radius: 4px;
228
+ color: $white;
229
+ font-size: 12px;
230
+ line-height: 18px;
231
+ max-width: 200px;
232
+ opacity: 0;
233
+ padding: 4px 16px;
234
+ position: absolute;
235
+ text-align: center;
236
+
237
+ a {
238
+ color: $green;
239
+ }
240
+
241
+ a:hover {
242
+ color: $white;
243
+ }
244
+
245
+ &::before {
246
+ border: 6px solid transparent;
247
+ border-top-color: $tooltip-background-color;
248
+ bottom: -12px;
249
+ content: "";
250
+ height: 0;
251
+ left: 50%;
252
+ margin-left: -6px;
253
+ position: absolute;
254
+ width: 0;
255
+ }
256
+ }
257
+
258
+ *:hover > .tooltip,
259
+ *:hover + .tooltip {
260
+ opacity: 1;
261
+ }
262
+
263
+ /*doc
264
+ ---
265
+ title: Loading spinner
266
+ name: loading-spinner
267
+ category: misc
268
+ ---
269
+
270
+ - `.loading-spinner--inline` - a variant to display the spinner inline with
271
+ other content.
272
+
273
+ ```slim_example
274
+ div.loading-spinner
275
+ ```
276
+ */
277
+
278
+ $loading-spinner-border-color: #d9d9d9;
279
+
280
+ .loading-spinner {
281
+ animation: loading-spinner 450ms infinite linear;
282
+ border: 2px solid $loading-spinner-border-color;
283
+ border-left: 2px solid $green;
284
+ border-radius: 50%;
285
+ font-size: 0;
286
+ height: 30px;
287
+ text-indent: -9999em;
288
+ width: 30px;
289
+
290
+ &::after {
291
+ border-radius: 50%;
292
+ height: 30px;
293
+ width: 30px;
294
+ }
295
+ }
296
+
297
+ .loading-spinner--inline {
298
+ display: inline-block;
299
+ vertical-align: middle;
300
+ }
301
+
302
+ @keyframes loading-spinner {
303
+ 0% {
304
+ -webkit-transform: rotate(0deg);
305
+ transform: rotate(0deg);
306
+ }
307
+
308
+ 100% {
309
+ -webkit-transform: rotate(360deg);
310
+ transform: rotate(360deg);
311
+ }
312
+ }
313
+
314
+ /*doc
315
+ ---
316
+ title: Dropdown
317
+ name: dropdown
318
+ category: misc
319
+ ---
320
+
321
+ ```slim_example
322
+ div.dropdown
323
+ label Latest Activity
324
+ ```
325
+ */
326
+
327
+ .dropdown {
328
+ position: relative;
329
+
330
+ &:hover {
331
+ .dropdown__menu {
332
+ opacity: 1;
333
+ visibility: visible;
334
+ }
335
+ }
336
+
337
+ }
338
+
339
+ .dropdown__menu {
340
+ background: $white;
341
+ border-radius: 4px;
342
+ box-shadow: 0 3px 5px $box-shadow-color;
343
+ left: 0;
344
+ opacity: 0;
345
+ overflow: hidden;
346
+ position: absolute;
347
+ top: 100%;
348
+ visibility: hidden;
349
+ width: 100%;
350
+
351
+ a {
352
+ color: $grayscale-smoke;
353
+ display: block;
354
+ font-size: 14px;
355
+ font-weight: normal;
356
+ padding: 12px 22px 12px 42px;
357
+ position: relative;
358
+
359
+ &:hover {
360
+ background-color: $green;
361
+ color: $white;
362
+ }
363
+ }
364
+
365
+ li {
366
+ &.active a {
367
+ color: $green;
368
+ }
369
+
370
+ &.active a:hover {
371
+ color: $white;
372
+ }
373
+
374
+ &.active a::before {
375
+ @include ff-mask-image(image-url("cc/styles/icons/checkmark.svg"));
376
+ background-color: $green;
377
+ content: "";
378
+ height: 10px;
379
+ left: 22px;
380
+ margin-top: -5px;
381
+ mask-position: bottom right;
382
+ mask-repeat: no-repeat;
383
+ mask-size: 100% auto;
384
+ position: absolute;
385
+ top: 50%;
386
+ width: 12px;
387
+ }
388
+
389
+ &.active a:hover::before {
390
+ background-color: $white;
391
+ }
392
+ }
393
+
394
+ }
395
+
396
+ .dropdown__menu--no-icons {
397
+ a {
398
+ padding-left: 22px;
399
+ }
400
+ }
401
+
402
+ /*doc
403
+ ---
404
+ title: Well
405
+ name: well
406
+ category: misc
407
+ ---
408
+
409
+ ```slim_example
410
+ .well Hello!
411
+ .well.well--info A well that is slightly more prominent with a background.
412
+ ```
413
+ */
414
+
415
+ .well {
416
+ border: 1px solid $box-border-color;
417
+ border-radius: 7px;
418
+ margin-bottom: 20px;
419
+ padding: 24px;
420
+ position: relative;
421
+ }
422
+
423
+ .well--info {
424
+ background: $grayscale-pearl;
425
+ }
426
+
427
+ /*doc
428
+ ---
429
+ title: Pagination
430
+ name: pagination
431
+ category: misc
432
+ ---
433
+
434
+ ```slim_example
435
+ ul.pagination
436
+ li: a.pagination__arrow href="#" ‹
437
+ li: a href="#" 1
438
+ li: span.pagination__page--gap …
439
+ li: a href="#" 4
440
+ li: a href="#" 5
441
+ li.active: a href="#" 6
442
+ li: a href="#" 7
443
+ li: a href="#" 8
444
+ li: span.pagination__page--gap …
445
+ li: a href="#" 42
446
+ li: a.pagination__arrow href="#" ›
447
+
448
+ ul.pagination
449
+ li: span.pagination__arrow.pagination__page--disabled ‹
450
+ li.active: a href="#" 1
451
+ li: a href="#" 2
452
+ li: a href="#" 3
453
+ li: a.pagination__arrow href="#" ›
454
+ ```
455
+ */
456
+
457
+ .pagination {
458
+ margin-bottom: 48px;
459
+ text-align: center;
460
+ white-space: nowrap;
461
+
462
+ li {
463
+ display: inline-block;
464
+ font-size: 14px;
465
+ line-height: 1;
466
+ margin-left: 6px;
467
+
468
+ &:first-child {
469
+ margin-left: 0;
470
+ }
471
+
472
+ &.active a {
473
+ border-color: $green;
474
+ }
475
+ }
476
+
477
+ a,
478
+ .pagination__page--disabled,
479
+ .pagination__page--gap {
480
+ border: 1px solid $box-border-color;
481
+ border-radius: 4px;
482
+ box-shadow: 0 1px 3px $box-shadow-color;
483
+ color: $grayscale-console;
484
+ display: block;
485
+ padding: 8px 14px;
486
+ transition: border-color .25s ease, color .25s ease;
487
+ }
488
+
489
+ .pagination__page--disabled {
490
+ background-color: $grayscale-pearl;
491
+ color: $grayscale-slate;
492
+ }
493
+
494
+ a:hover {
495
+ border-color: $green;
496
+ color: $green-dark;
497
+ }
498
+
499
+ .pagination__arrow {
500
+ padding: 8px 20px;
501
+ }
502
+ }
503
+
504
+ /*doc
505
+ ---
506
+ title: Breakdown
507
+ name: breakdown
508
+ category: misc
509
+ ---
510
+
511
+ Breakdowns are bars used to show how parts compose a whole, e.g. the ratings of u
512
+ files within a repository, or test coverage.
513
+
514
+ ```slim_example
515
+ .breakdown
516
+ .breakdown__rect.breakdown__rect--grade-a style="width: 20%"
517
+ .breakdown__rect.breakdown__rect--grade-b style="width: 20%"
518
+ .breakdown__rect.breakdown__rect--grade-c style="width: 20%"
519
+ .breakdown__rect.breakdown__rect--grade-d style="width: 20%"
520
+ .breakdown__rect.breakdown__rect--grade-f style="width: 20%"
521
+ .breakdown
522
+ .breakdown__rect.breakdown__rect--grade-a style="width: 20%"
523
+ a href="#"
524
+ .breakdown__rect.breakdown__rect--grade-b style="width: 20%"
525
+ a href="#"
526
+ .breakdown__rect.breakdown__rect--grade-c style="width: 20%"
527
+ a href="#"
528
+ .breakdown__rect.breakdown__rect--grade-d style="width: 20%"
529
+ a href="#"
530
+ .breakdown__rect.breakdown__rect--grade-f style="width: 20%"
531
+ a href="#"
532
+ .breakdown.breakdown--small
533
+ .breakdown__rect.breakdown__rect--coverage style="width: 77%;"
534
+ .breakdown.breakdown--small
535
+ .breakdown__rect.breakdown__rect--issues style="width: 100%;"
536
+ .breakdown.breakdown--small
537
+ .breakdown__rect.breakdown__rect--critical-issues style="width: 100%;"
538
+ ```
539
+ */
540
+
541
+ .breakdown {
542
+ background-color: $grayscale-pearl;
543
+ display: inline-block;
544
+ height: 10px;
545
+ width: 100%;
546
+
547
+ &.breakdown--small {
548
+ height: 2px;
549
+ }
550
+ }
551
+
552
+ .breakdown__rect {
553
+ float: left;
554
+ height: 100%;
555
+ position: relative;
556
+
557
+ a {
558
+ bottom: 0;
559
+ display: block;
560
+ left: 0;
561
+ position: absolute;
562
+ right: 0;
563
+ text-indent: -9999px;
564
+ top: 0;
565
+ white-space: nowrap;
566
+ }
567
+
568
+ }
569
+
570
+ @each $grade, $color-map in $grade-colors {
571
+ .breakdown__rect--grade-#{$grade} {
572
+ background-color: #{map-get($color-map, color)};
573
+
574
+ a:hover {
575
+ background-color: #{map-get($color-map, hover-color)};
576
+ }
577
+
578
+ }
579
+
580
+ }
581
+
582
+ .breakdown__rect--coverage {
583
+ background-color: $sky;
584
+
585
+ a:hover {
586
+ background-color: $sky-light;
587
+ }
588
+
589
+ }
590
+
591
+ .breakdown__rect--critical-issues {
592
+ background-color: $magenta;
593
+ }
594
+
595
+ .breakdown__rect--issues {
596
+ background-color: $nectar-dark;
597
+ }
598
+
599
+ /*doc
600
+ ---
601
+ title: Arrowed Link
602
+ name: arrowed
603
+ category: misc
604
+ ---
605
+
606
+ ```slim_example
607
+ a.link--arrowed(href="#") link text
608
+ ```
609
+ */
610
+
611
+ .link--arrowed {
612
+ position: relative;
613
+
614
+ &::after {
615
+ @include ff-mask-image(image-url("cc/styles/icons/link_arrow.svg"));
616
+ background-color: $grayscale-aluminium;
617
+ bottom: 0;
618
+ content: "";
619
+ margin-top: -7px;
620
+ mask-position: center left;
621
+ mask-repeat: no-repeat;
622
+ mask-size: 11px 11px;
623
+ position: absolute;
624
+ right: -15px;
625
+ top: 50%;
626
+ width: 11px;
627
+ }
628
+
629
+ &:hover::after {
630
+ background-color: $green;
631
+ }
632
+ }
633
+
634
+ /*doc
635
+ ---
636
+ title: Sticker
637
+ name: sticker
638
+ category: misc
639
+ ---
640
+
641
+ ```slim_example
642
+ .sticker.sticker Better
643
+
644
+ .sticker.sticker--fixed Fixed
645
+
646
+ .sticker.sticker--new New
647
+
648
+ .sticker.sticker--worse Worse
649
+ ```
650
+ */
651
+
652
+ .sticker {
653
+ border: 1px solid $box-border-color;
654
+ border-radius: 5px;
655
+ color: $grayscale-aluminium;
656
+ display: inline-block;
657
+ font-size: 10px;
658
+ line-height: 1;
659
+ padding: 7px 10px;
660
+ text-transform: uppercase;
661
+ vertical-align: middle;
662
+
663
+ &.sticker--fixed {
664
+ border: 1px solid $green-light;
665
+ color: $green;
666
+ }
667
+
668
+ &.sticker--new {
669
+ border: 1px solid $velvet-light;
670
+ color: $velvet;
671
+ }
672
+
673
+ &.sticker--worse {
674
+ border: 1px solid $nectar;
675
+ color: $nectar-dark;
676
+ }
677
+ }
678
+
679
+ /*doc
680
+ ---
681
+ title: Message
682
+ name: message
683
+ category: misc
684
+ ---
685
+
686
+ A message indicating a current state.
687
+
688
+ ```slim_example
689
+ .message
690
+ h3 No analysis results present
691
+ ```
692
+ */
693
+
694
+ .message {
695
+ border: 1px solid $box-border-color;
696
+ border-radius: 4px;
697
+ color: $grayscale-slate;
698
+ padding: 150px 50px;
699
+ text-align: center;
700
+ }
701
+
702
+ .message__align-l {
703
+ text-align: left;
704
+ }
705
+
706
+ /*doc
707
+ ---
708
+ title: Bullet Lists
709
+ name: bullet-lists
710
+ category: misc
711
+
712
+ ```slim_example
713
+ ul
714
+ li Item 1
715
+ li Item 2
716
+ ```
717
+ */
718
+ .ul__bullets {
719
+ list-style: disc;
720
+ margin: 16px;
721
+ }
722
+
723
+ /*doc
724
+ ---
725
+ title: Dialog
726
+ name: dialog
727
+ category: misc
728
+ ---
729
+
730
+ A notice of an event, with a call to action.
731
+
732
+ ```slim_example
733
+ .dialog
734
+ .dialog__header An engine timed out
735
+ .dialog__content
736
+ p Please consult our documentation
737
+ ```
738
+ */
739
+
740
+ $dialog-border-radius: 4px;
741
+
742
+ .dialog {
743
+ border: 1px solid $box-border-color;
744
+ border-radius: $dialog-border-radius;
745
+ }
746
+
747
+ .dialog__header {
748
+ background: $grayscale-pearl;
749
+ border-bottom: 1px solid $box-border-color;
750
+ border-top-left-radius: $dialog-border-radius;
751
+ border-top-right-radius: $dialog-border-radius;
752
+ font-family: $sans-serif-semibold;
753
+ font-size: 15px;
754
+ padding: 18px 24px;
755
+ position: relative;
756
+ }
757
+
758
+ .dialog__content {
759
+ padding: 24px;
760
+ }
761
+
762
+ .dialog__footer {
763
+ padding: 0 24px 24px;
764
+ }
765
+
766
+ /*doc
767
+ ---
768
+ title: Severity indicator
769
+ name: severity-indicator
770
+ category: misc
771
+ ---
772
+
773
+ Dots to indicate the severity of an issue.
774
+
775
+ ```slim_example
776
+ .severity-indicator
777
+ .severity-indicator__dot.severity-indicator__dot--active
778
+ .severity-indicator__dot.severity-indicator__dot--active
779
+ .severity-indicator__dot
780
+ ```
781
+ */
782
+
783
+ $severity-indicator-dot-size: 5px;
784
+ $severity-indicator-dot-margin: 3px;
785
+
786
+ .severity-indicator {
787
+ display: inline-block;
788
+ font-size: 0;
789
+ height: $severity-indicator-dot-size;
790
+ line-height: 0;
791
+ margin-right: 9px;
792
+ position: relative;
793
+ vertical-align: middle;
794
+
795
+ .tooltip {
796
+ bottom: 100%;
797
+ left: 50%;
798
+ margin-bottom: $severity-indicator-dot-size;
799
+ margin-left: -75px;
800
+ width: 150px;
801
+ }
802
+
803
+ }
804
+
805
+ .severity-indicator__dot {
806
+ background: $grayscale-aluminium;
807
+ border-radius: $severity-indicator-dot-size / 2;
808
+ display: inline-block;
809
+ height: $severity-indicator-dot-size;
810
+ margin-left: $severity-indicator-dot-margin;
811
+ width: $severity-indicator-dot-size;
812
+
813
+ &:first-child {
814
+ margin-left: 0;
815
+ }
816
+ }
817
+
818
+ .severity-indicator__dot--active {
819
+ background: $velvet;
820
+ }