forge/scss/_modules/_figure.scss at b8b6a87794351e15d2064ae0cc75ca0852ff4ca5 · DoSomethingArchive/forge · GitHub

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
// Figure
//
// A figure block usually contains an image with a title and a description.
//
// .-left    - Show figure's media to the left of the description.
// .-left.-center - Show a figure's media to the left of the description, with the text vertically centered.
// .-right   - Show figure's media to the right of the description.
// .-medium  - Set figure's media to a fixed "medium" size.
//
// Markup:
//   <article class="figure {{modifier_class}}">
//     <div class="figure__media">
//       <img alt="kitten overlords" src="/styleguide/assets/placeholder.jpg" />
//     </div>
//     <div class="figure__body">
//       <b>Teen Vogue</b> featured Comeback Clothes as one of the ways
//       fashion brands like H&amp;M are taking eco-chic to the next level.
//     </div>
//   </article>
//
// Styleguide Figure
.figure {
  @include clearfix;
  width: 100%;
  text-align: center;

  // Add extra bottom margin on tiny screens
  @include media($mobile) {
    margin-bottom: ($base-spacing * 2);
  }

  &.-left {
    text-align: left;

    > .figure__media {
      float: left;
      padding-right: gutter();
      margin: 0;
    }

    > .figure__body {
      overflow: hidden;
      padding-left: gutter();
    }
  }

  // @NOTE: This modifier only pairs with `.left`!
  &.-center {
    display: table;

    // We use `table-cell` display property to let us vertically
    // align the contents of the figure.
    .figure__body, .figure__media {
      display: table-cell;
      vertical-align: middle;
    }

    // Remove `max-width` rule from images, because otherwise
    // the media table-cell just collapses!
    .figure__media > img {
      max-width: none;
    }

    // Hack to force the body to take up all of the space
    // in the table that the `.figure__media` does not.
    .figure__body {
      width: 100%;
    }
  }

  &.-right {
    text-align: left;

    > .figure__media {
      float: right;
      padding-left: gutter();
      margin: 0;
    }

    > .figure__body {
      overflow: hidden;
      padding-right: gutter();
    }
  }

  &.-medium {
    > .figure__media {
      width: 75px;

      @include media($medium) {
        width: 150px;
      }

      img {
        width: 100%;
      }
    }
  }
}

.figure__media {
  text-align: center;
  margin: 0 auto $base-spacing;

  img {
    margin: 0 auto;
  }
}

.figure__body {
  // Paragraphs should have less spacing in figures
  p + p {
    margin-top: ($base-spacing / 2);
  }
}