addons/website/static/src/snippets/s_showcase/001.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

.s_showcase[data-vcss='001'] {
    @include media-breakpoint-up(lg) {
        // Left-right separator
        .container, .container-fluid {
            position: relative;

            &:before {
                content: " ";
                display: block;
                @include o-position-absolute($left: 50%);
                height: 100%;
                border-right: 1px solid gray('200');
            }
        }
        // Features
        .row > div {
            // Items on left
            &:nth-child(odd) {
                text-align: right;

                .s_showcase_icon, p {
                    float: right;
                }

                .s_showcase_icon {
                    margin-right: 0;
                    margin-left: 15px;
                }
            }
            // Items on right
            &:nth-child(even) {
                text-align: left;

                .s_showcase_icon, p {
                    float: left;
                }
            }
        }
    }

    .s_showcase_icon {
        // Make the default margin the one for the left aligned icon, as it's what we want on mobile
        margin-right: 15px;
        font-size: 36px;
    }
}