74 lines
1.4 KiB
SCSS
74 lines
1.4 KiB
SCSS
@import '../libs/vars';
|
|
@import '../libs/functions';
|
|
@import '../libs/mixins';
|
|
|
|
///
|
|
/// Identity by HTML5 UP
|
|
/// html5up.net | @n33co
|
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
///
|
|
|
|
/* Main */
|
|
|
|
#main {
|
|
position: relative;
|
|
max-width: 100%;
|
|
min-width: 27em;
|
|
@include padding(4.5em, 3em);
|
|
|
|
background: _palette(bg);
|
|
border-radius: _size(border-radius);
|
|
cursor: default;
|
|
opacity: 0.95;
|
|
text-align: center;
|
|
|
|
@include vendor('transform-origin', '50% 50%');
|
|
@include vendor('transform', 'rotateX(0deg)');
|
|
@include vendor('transition', (
|
|
'opacity #{_duration(main)} ease',
|
|
'transform #{_duration(main)} ease'
|
|
));
|
|
|
|
.avatar {
|
|
position: relative;
|
|
display: block;
|
|
margin-bottom: _size(element-margin);
|
|
|
|
img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
border-radius: 100%;
|
|
box-shadow: 0 0 0 1.5em _palette(bg);
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -3em;
|
|
width: calc(100% + 6em);
|
|
height: _size(border-width);
|
|
z-index: -1;
|
|
background: _palette(border);
|
|
}
|
|
}
|
|
|
|
@include breakpoint(xsmall) {
|
|
min-width: 0;
|
|
width: 100%;
|
|
@include padding(4em, 2em);
|
|
|
|
.avatar {
|
|
&:before {
|
|
left: -2em;
|
|
width: calc(100% + 4em);
|
|
}
|
|
}
|
|
}
|
|
|
|
body.is-loading & {
|
|
opacity: 0;
|
|
@include vendor('transform', 'rotateX(15deg)');
|
|
}
|
|
} |