@import '../libs/vars'; @import '../libs/functions'; @import '../libs/mixins';
/// /// Fractal by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///
/* Image */
.image { border-radius: _size(border-radius); border: 0; display: inline-block; position: relative; overflow: hidden; img { border-radius: _size(border-radius); display: block; } &.left, &.right { max-width: 40%; img { width: 100%; } } &.left { float: left; margin: 0 1.5em 1em 0; top: 0.25em; } &.right { float: right; margin: 0 0 1em 1.5em; top: 0.25em; } &.fit { display: block; margin: 0 0 _size(element-margin) 0; width: 100%; img { width: 100%; } } &.main { display: block; margin: 0 0 (_size(element-margin) * 1.5) 0; width: 100%; img { width: 100%; } } &.phone { box-shadow: none; border-radius: 0; margin: 0 0 (_size(element-margin) * 1.5) 0; width: 13em; img { border-radius: 0; display: block; position: relative; width: 100%; } .inner, &:before, &:after { display: block; border: solid (_size(border-width) * 2) _palette(accent1, border); } .inner { position: relative; &:before, &:after { content: ''; position: absolute; left: 50%; } &:before { top: -1.375em; margin-left: -1em; width: 2em; height: 0.25em; border-radius: 0.5em; background: _palette(accent1, border); } &:after { bottom: -2.75em; margin-left: -1em; width: 2em; height: 2em; border-radius: 100%; border: solid (_size(border-width) * 2) _palette(accent1, border); } } &:before, &:after { content: ''; } &:before { height: 2.5em; border-radius: 1em 1em 0 0; border-bottom: 0; } &:after { height: 3.5em; border-radius: 0 0 1em 1em; border-top: 0; } } } @mixin color-image($p: null) { .image { box-shadow: 0 0 0 4px _palette($p, bg), 0 0 0 5px _palette($p, border); &.phone { box-shadow: none; .inner, &:before, &:after { border-color: _palette($p, border); } .inner { &:before { background: _palette($p, border); } &:after { border-color: _palette($p, border); } } } } } @include color-image;