src/scss/components/_figure.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

.figure {
    &.clear {
        clear: both;
    }
    &.center {
        width:  calc(100% - 4px);
        margin: 2px auto;

        .fig-img {
            margin: 2px auto;
        }
    }
    &.left {
        float:  left;
        margin: 2px;
    }
    &.right {
        float:  right;
        margin: 2px;
    }
    &.fig-20 {
        @extend .left;
        width: calc(20% - 4px);
    }
    &.fig-25 {
        @extend .left;
        width: calc(25% - 4px);
    }
    &.fig-33 {
        @extend .left;
        width: calc(33.3% - 4px);
    }
    &.fig-50 {
        @extend .left;
        width: calc(50% - 4px);
    }
    &.fig-75 {
        @extend .left;
        width: calc(75% - 4px);
    }
    &.fig-100 {
        width:  calc(100% - 4px);
        margin: 2px;
    }
    &.figure--fullWidth {
        width: 100%;
        .figure-img {
            margin: 0 auto;
        }
    }
}

// Hide caption of small pictures on small screen
@media #{$small-and-down} {
    .fig-33, .fig-25, .fig-20 {
        .caption {
            display: none;
        }
    }
}