webseite/assets/sass/parts/_spotlight.scss
2019-02-12 17:45:44 +01:00

229 lines
4.6 KiB
SCSS

/* Spotlight */
.spotlight {
background-attachment: fixed;
background-position: center center;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
background-image: none;
min-height: 42em;
height: 100vh;
overflow: hidden;
position: relative;
@include breakpoint(tablet) {
background-attachment: scroll;
height: auto;
min-height: auto;
}
@include breakpoint(phablet) {
box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
}
// Force spotlights to stack in reverse order (needed for our box
// shadows to overlap stuff in the right direction).
@for $i from 1 through _misc(max-spotlight) {
&:nth-last-of-type(#{$i}) {
z-index: #{$i};
}
}
&::before {
content: '';
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
.image.main {
display: block;
@include breakpoint(tablet) {
display: block;
margin: 0;
max-height: 40vh;
overflow: hidden;
}
@include breakpoint(phablet) {
max-height: 60vh;
}
@include breakpoint(mobileonly) {
max-height: 50vh;
}
img {
position: relative;
}
}
.content {
@include vendor('transform', 'translate(0,0)');
@include vendor('transition', 'transform 1s ease, opacity 1s ease');
background: _palette(bg-very-transparent);
border-style: solid;
opacity: 1;
position: absolute;
@include breakpoint(tablet) {
background-color: _palette(bg-very-transparent);
border-width: 0 !important;
border-top-width: 0.35em !important;
bottom: auto !important;
left: auto !important;
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
position: relative;
right: auto !important;
text-align: center;
top: auto !important;
width: 100% !important;
}
@include breakpoint(phablet) {
border-top-width: 0.2em !important;
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
}
@include breakpoint(mobileonly) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
}
}
.goto-next {
@include vendor('transform', 'translate(0,0)');
@include vendor('transition', 'transform 0.75s ease, opacity 1s ease-in');
@include vendor('transition-delay', '0.5s');
opacity: 1;
@include breakpoint(tablet) {
display: none;
}
}
&.top,
&.bottom {
.content {
left: 0;
padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0;
width: 100%;
}
}
&.top {
.content {
border-bottom-width: 0.35em;
top: 0;
@include breakpoint(laptop) {
padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0;
}
}
}
&.bottom {
.content {
border-top-width: 0.35em;
bottom: 0;
@include breakpoint(laptop) {
padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 1.1) - _size(element-margin)) 0;
}
}
}
&.left,
&.right {
.content {
height: 101%;
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
top: 0;
width: 28em;
min-width: 25%;
@include breakpoint(laptop) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
width: 25em;
}
}
}
&.left {
.content {
border-right-width: 0.35em;
left: 0;
}
}
&.right {
.content {
border-left-width: 0.35em;
right: 0;
}
}
&.style1 {
.content {
border-color: _palette(accent1-transparent);
}
}
&.style2 {
.content {
border-color: _palette(accent1);
}
}
&.style3 {
.content {
border-color: _palette(accent4);
}
}
&.inactive {
.content {
opacity: 0;
}
.goto-next {
@include vendor('transform', 'translate(0,1.5em)');
opacity: 0;
}
&.top {
.content {
@include vendor('transform', 'translate(0,-5em)');
}
}
&.bottom {
.content {
@include vendor('transform', 'translate(0,5em)');
}
}
&.left {
.content {
@include vendor('transform', 'translate(-5em,0)');
}
}
&.right {
.content {
@include vendor('transform', 'translate(5em,0)');
}
}
}
}
body.is-touch {
.spotlight {
background-attachment: scroll;
}
}