assets/scss/_primer/markdown/images.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

// Need to target base styles
// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type
// stylelint-disable selector-max-type
.markdown-body {
  // Images & Stuff
  img {
    max-width: 100%;
    // because we put padding on the images to hide header lines, and some people
    // specify the width of their images in their markdown.
    box-sizing: content-box;
    background-color: var(--color-bg-primary);

    &[align=right] {
      // stylelint-disable-next-line primer/spacing
      padding-left: 20px;
    }

    &[align=left] {
      // stylelint-disable-next-line primer/spacing
      padding-right: 20px;
    }
  }

  .emoji {
    max-width: none;
    vertical-align: text-top;
    // Override `<img>` styles so Emjois don't clash with zebra striping in our tables
    background-color: transparent;
  }

  // Gollum Image Tags

  // Framed
  span.frame {
    display: block;
    overflow: hidden;

    > span {
      display: block;
      float: left;
      width: auto;
      // stylelint-disable-next-line primer/spacing
      padding: 7px;
      // stylelint-disable-next-line primer/spacing
      margin: 13px 0 0;
      overflow: hidden;
      border: $border-width $border-style var(--color-markdown-frame-border);
    }

    span img {
      display: block;
      float: left;
    }

    span span {
      display: block;
      // stylelint-disable-next-line primer/spacing
      padding: 5px 0 0;
      clear: both;
      color: var(--color-text-primary);
    }
  }

  span.align-center {
    display: block;
    overflow: hidden;
    clear: both;

    > span {
      display: block;
      // stylelint-disable-next-line primer/spacing
      margin: 13px auto 0;
      overflow: hidden;
      text-align: center;
    }

    span img {
      margin: 0 auto;
      text-align: center;
    }
  }

  span.align-right {
    display: block;
    overflow: hidden;
    clear: both;

    > span {
      display: block;
      // stylelint-disable-next-line primer/spacing
      margin: 13px 0 0;
      overflow: hidden;
      text-align: right;
    }

    span img {
      margin: 0;
      text-align: right;
    }
  }

  span.float-left {
    display: block;
    float: left;
    // stylelint-disable-next-line primer/spacing
    margin-right: 13px;
    overflow: hidden;

    span {
      // stylelint-disable-next-line primer/spacing
      margin: 13px 0 0;
    }
  }

  span.float-right {
    display: block;
    float: right;
    // stylelint-disable-next-line primer/spacing
    margin-left: 13px;
    overflow: hidden;

    > span {
      display: block;
      // stylelint-disable-next-line primer/spacing
      margin: 13px auto 0;
      overflow: hidden;
      text-align: right;
    }
  }
}