New home for Icarus Imeji Uploader Service code repository.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
IcarusImeji/assets/sass/layout/_main.scss

74 lines
1.4 KiB

@import '../libs/vars';
@import '../libs/functions';
@import '../libs/mixins';
///
/// Identity by HTML5 UP
/// html5up.net | @ajlkn
/// 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)');
}
}