152 lines
2.9 KiB
SCSS
152 lines
2.9 KiB
SCSS
@import '../../../../../styles';
|
|
|
|
:host {
|
|
cursor: pointer;
|
|
|
|
&.cdk-drag-animating {
|
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
&.cdk-drag-placeholder {
|
|
opacity: 0;
|
|
}
|
|
|
|
&:hover {
|
|
@media (min-width: $mobile-width) {
|
|
div.container {
|
|
box-shadow: $shadow;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cdk-drag-preview {
|
|
div.container {
|
|
@media (max-width: $mobile-width) {
|
|
@keyframes shadow {
|
|
from {
|
|
box-shadow: none;
|
|
}
|
|
to {
|
|
box-shadow: $shadow;
|
|
}
|
|
}
|
|
|
|
animation: shadow $long-animation-time forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.trash-highlight {
|
|
.container {
|
|
transform: scale(0.75);
|
|
position: relative;
|
|
|
|
:before {
|
|
opacity: 0.5 !important;
|
|
}
|
|
}
|
|
|
|
input {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tower {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
|
|
@include inner-spacing(var(--small-padding));
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
flex: 1 1 auto;
|
|
position: relative;
|
|
|
|
@include card();
|
|
overflow: hidden;
|
|
transition: transform $short-animation-time, box-shadow $long-animation-time;
|
|
|
|
@include inner-spacing(var(--medium-padding));
|
|
|
|
width: 100%;
|
|
|
|
:before {
|
|
content: '';
|
|
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
z-index: 2;
|
|
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: red;
|
|
|
|
opacity: 0;
|
|
border-radius: var(--border-radius);
|
|
transition: opacity $short-animation-time;
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
height: 48px;
|
|
@media (max-width: $mobile-width) {
|
|
height: 32px;
|
|
}
|
|
|
|
opacity: 0.33;
|
|
transition: opacity $long-animation-time;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.block-container-container {
|
|
position: relative;
|
|
flex: 1;
|
|
.block-container {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: flex-start;
|
|
align-content: flex-start;
|
|
align-items: flex-end;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
transform: scaleY(-1);
|
|
|
|
* {
|
|
transform: translateY(500%);
|
|
}
|
|
|
|
.descend {
|
|
transition: transform 1.5s cubic-bezier(0.5, 0, 1, 0), opacity 500ms cubic-bezier(0.5, 0, 1, 0);
|
|
}
|
|
|
|
.ascend {
|
|
transition: transform 1.5s cubic-bezier(0.5, 0, 1, 0), opacity 500ms cubic-bezier(0.5, 0, 1, 0) 1s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type='text'] {
|
|
font-size: var(--small-font-size);
|
|
text-align: center;
|
|
@media (min-width: $mobile-width) {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|