_image.scss (1447B)
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 }