fuse-angular/src/@fuse/components/widget/widget.component.scss
2018-10-04 12:14:54 +03:00

89 lines
2.0 KiB
SCSS

fuse-widget {
display: block;
position: relative;
perspective: 3000px;
padding: 12px;
> div {
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
> .fuse-widget-front {
display: flex;
flex-direction: column;
flex: 1 1 auto;
position: relative;
overflow: hidden;
visibility: visible;
width: 100%;
opacity: 1;
z-index: 10;
border-radius: 8px;
transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
transform: rotateY(0deg);
backface-visibility: hidden;
border: 1px solid;
}
> .fuse-widget-back {
display: block;
position: absolute;
top: 12px;
right: 12px;
bottom: 12px;
left: 12px;
overflow: hidden;
visibility: hidden;
opacity: 0;
z-index: 10;
border-radius: 8px;
transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
transform: rotateY(180deg);
backface-visibility: hidden;
border: 1px solid;
[fuseWidgetToggle] {
position: absolute;
top: 0;
right: 0;
}
}
&.flipped {
> .fuse-widget-front {
visibility: hidden;
opacity: 0;
transform: rotateY(180deg);
}
> .fuse-widget-back {
display: block;
visibility: visible;
opacity: 1;
transform: rotateY(360deg);
}
}
.mat-form-field {
&.mat-form-field-type-mat-select {
.mat-form-field-wrapper {
padding: 16px 0;
.mat-form-field-infix {
border: none;
padding: 0;
}
}
.mat-form-field-underline {
display: none;
}
}
}
}