source: main/waeup-hugo/public/sass/components/_image.scss @ 17397

Last change on this file since 17397 was 14926, checked in by Henrik Bettermann, 7 years ago
File size: 1.3 KB
RevLine 
[14926]1///
2/// Dimension by HTML5 UP
3/// html5up.net | @ajlkn
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5///
6
7/* Image */
8
9        .image {
10                border-radius: _size(border-radius);
11                border: 0;
12                display: inline-block;
13                position: relative;
14
15                &:before {
16                        @include vendor('pointer-events', 'none');
17                        background-image: url('/images/overlay.png');
18                        background-color: _palette(bg-overlay);
19                        border-radius: _size(border-radius);
20                        content: '';
21                        display: block;
22                        height: 100%;
23                        left: 0;
24                        opacity: 0.5;
25                        position: absolute;
26                        top: 0;
27                        width: 100%;
28                }
29
30                img {
31                        border-radius: _size(border-radius);
32                        display: block;
33                }
34
35                &.left,
36                &.right {
37                        max-width: 40%;
38
39                        img {
40                                width: 100%;
41                        }
42                }
43
44                &.left {
45                        float: left;
46                        padding: 0 1.5em 1em 0;
47                        top: 0.25em;
48                }
49
50                &.right {
51                        float: right;
52                        padding: 0 0 1em 1.5em;
53                        top: 0.25em;
54                }
55
56                &.fit {
57                        display: block;
58                        margin: 0 0 _size(element-margin) 0;
59                        width: 100%;
60
61                        img {
62                                width: 100%;
63                        }
64                }
65
66                &.main {
67                        display: block;
68                        margin: (_size(element-margin) * 1.25) 0;
69                        width: 100%;
70
71                        img {
72                                width: 100%;
73                        }
74                }
75
76                @include breakpoint(small) {
77                        &.main {
78                                margin: (_size(element-margin) * 1) 0;
79                        }
80                }
81
82                @include breakpoint(xsmall) {
83                        &.main {
84                                margin: (_size(element-margin) * 0.75) 0;
85                        }
86                }
87        }
Note: See TracBrowser for help on using the repository browser.