src/containers/main/main.scss
.main {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
box-shadow: 0 0 50vh 0 black inset;
animation: fadeIn 2500ms;
animation-fill-mode: forwards;
&__intro {
position: fixed;
top:0;
height: 100%;
left:0;
right:0;
z-index: 2000;
overflow: auto;
background: darken($brand-inverse, 10);
@include transition(1500ms);
&.ng-leave.ng-leave-active,
&.ng-enter {
opacity: 0;
transform: scale(1.1);
}
&.ng-leave, &.ng-enter-active {
opacity: 1;
transform: scale(1);
}
&__content {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:100%;
max-width: 600px;
padding:$spacer * 2 $spacer * 2 0;
color: white;
@include transition(1500ms);
&:before {
content:"";
position: absolute;
left: -15px;
top:0;
bottom:0;
width: 5px;
background: white;
border-radius: 2.5px;
}
&__heading {
font-weight:bolder;
padding:$spacer;
position: relative;
white-space: normal;
&:before {
content:url('./images/temptation.svg');
position: absolute;
right:100%;
top:50%;
height:100px;
width:90px;
padding:5px 0;
transform: translateY(-50%);
background: darken($brand-inverse, 10);
@include media-breakpoint-down(sm) {
display: none;
}
}
}
&__meta {
font-weight: bolder;
font-size:1rem;
}
&__meta, &__description {
padding:0 $spacer;
}
&__start {
background:transparent;
color: white;
border:4px solid white;
cursor: pointer;
}
&__languages {
opacity:0.5;
padding-left:$spacer;
margin-top: $spacer * 3;
margin-bottom:0;
.list-inline-item:not(:last-child):after {
content:" | ";
}
}
}
}
&__back {
position: sticky;
z-index:1000;
top:0;
left:0;
right:0;
margin-bottom:$spacer;
background: $brand-primary;
@include media-breakpoint-down(sm) {
position: relative;
}
a {
padding:$spacer;
color:white;
display: block;
position: relative;
padding-left:calc(#{$line-height-base * 1em} + #{$spacer * 3});
&:before {
content:"";
background:mix($brand-primary, white);
position: absolute;
left:0;
top:0;
bottom:0;
width:calc(#{$line-height-base * 1rem} + #{$spacer * 2});
}
&:after {
font-size: 3rem;
content:"\f104";
position: absolute;
top:50%;
left:0;
width: calc(#{$line-height-base * 1rem} + #{$spacer * 2});
text-align: center;
transform: translate(0, -50%);
color: $brand-primary;
font-family:FontAwesome;
}
}
}
&__steps {
background: white;
overflow: auto;
border:0.5rem solid $brand-inverse;
border-left-width:0;
z-index:500;
width:calc(100% - #{$toolbar-width-md});
max-width: $panel-width;
position: fixed;
left:$toolbar-width-md;
top:0;
bottom:0;
.main--is-over &__year,
.main--is-over &__item {
filter:grayscale(100);
opacity:0.4;
}
&--has-footer {
bottom:4.5rem;
}
@include media-breakpoint-down(sm) {
font-size:0.9rem;
border:0;
left:$toolbar-width-xs;
width:calc(100% - #{$toolbar-width-xs});
&--has-footer {
bottom:4rem;
}
}
&__year {
position: relative;
padding: $spacer;
overflow: hidden;
margin:0.5rem;
padding:$spacer;
padding-top: $spacer * 3;
font-size: 2.5rem;
background:black;
color:white;
font-family: $headings-font-family;
font-weight: bold;
animation: fadeIn 1500ms;
animation-fill-mode: forwards;
@include media-breakpoint-down(sm) {
font-size:1.2rem;
padding-top: $spacer;
}
&__banner {
z-index: -1;
position: absolute;
top:50%;
left:50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
opacity: 0.7;
}
}
&__item {
margin:0.5rem;
overflow: hidden;
&:last-child {
margin-bottom:0;
}
@include media-breakpoint-down(sm) {
font-size:0.9rem;
padding:0.4rem;
}
&:nth-last-child(2) &__slice--feedback {
opacity: 1;
}
&__choices {
padding-bottom: $spacer;
&__btn {
opacity: 0;
transform: translate(3rem, 0);
animation: slideLeft 600ms;
animation-fill-mode: forwards;
@include animation-delay-loop();
.btn {
font-size:0.9em;
padding:0.5em;
font-family: inherit;
line-height: inherit;
margin: auto;
cursor: pointer;
white-space: normal;
}
}
&__btn:first-child:last-child .btn {
border-radius:0.5rem;
}
&__btn:first-child .btn {
border-radius:0.5rem 0.5rem 0 0;
}
&__btn:last-child .btn {
border-radius:0 0 0.5rem 0.5rem;
}
}
}
&__over {
background: darken($brand-inverse, 10);
color: white;
padding:$spacer;
position: relative;
margin-top:$spacer * 2;
z-index:100;
.btn.btn-link {
color:inherit;
}
&__share {
padding:$spacer;
padding-top: $spacer;
margin:0 -$spacer;
margin-top: $spacer;
border-top:dashed 1px $brand-inverse;
}
&__undo, &__undo:hover {
position: absolute;
bottom:100%;
left:$spacer;
background: darken($brand-inverse, 10);
}
}
}
.main__picture {
position: absolute;
right:0;
bottom:0;
top:0;
width: calc(100% - #{$panel-width} - #{$toolbar-width-md});
overflow: hidden;
z-index:-1;
@include transition(1600ms);
&.ng-leave.ng-leave-active,
&.ng-enter,
&.ng-hide {
opacity: 0;
}
&.ng-leave, &.ng-enter-active {
opacity: 1;
}
&:after {
content:"";
position: absolute;
width:1rem;
height:100%;
left:0;
top:0;
@include gradient-x(rgba(black, 0.2), rgba(black, 0));
}
&__img {
opacity: 0.9;
min-width:100%;
min-height:100%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
}
&__footer {
position: absolute;
bottom:0;
left: $toolbar-width-md;
width:calc(100% - #{$toolbar-width-md});
max-width: $panel-width;
overflow: hidden;
border:0.5rem $brand-inverse solid;
border-left:0;
border-top:0;
background: white;
justify-content: space-around;
display: flex;
flex-flow: row wrap;
align-items: stretch;
@include transition(background 0.6s);
@include media-breakpoint-down(sm) {
left:$toolbar-width-xs;
border:0;
width:calc(100% - #{$toolbar-width-xs});
}
&__undo {
cursor: pointer;
}
&__timeline {
padding:$spacer * 2 $spacer;
pointer-events: auto;
background: inherit;
height:4rem;
flex: 1;
position: relative;
&:before {
content:"";
width:1px;
height:80%;
position: absolute;
right:100%;
top:10%;
bottom:0;
background: #eee;
}
&__year {
height:.5rem;
position: relative;
filter:grayscale(100%);
white-space: nowrap;
padding:0;
background:white;
border:1px solid #ddd;
@include transition(600ms);
&:not(:last-child) {
border-right:0;
}
&--active {
border-color:transparent;
background: #aaa;
opacity: 1;
}
&--active:nth-child(even) {
background: #bbb;
}
&__label {
font-size: .7rem;
padding-bottom:$spacer / 4;
position: absolute;
bottom:100%;
left:50%;
transform: translateX(-50%);
font-family: $headings-font-family;
}
&:nth-child(even) &__label {
display: none;
}
@include media-breakpoint-down(sm) {
&__label {
display: none;
}
&:nth-child(4n+1) &__label {
display: block;
}
}
}
}
}
&__modal {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow: auto;
z-index:2000;
@include transition(600ms);
&.ng-leave.ng-leave-active,
&.ng-enter {
opacity: 0;
}
&.ng-leave, &.ng-enter-active {
opacity: 1;
}
&__overlay {
background: rgba(black, .5);
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
&__card {
max-width:660px;
margin:$spacer * 4 auto;
}
}
}