mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-03 15:11:37 +00:00
89 lines
2.0 KiB
SCSS
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;
|
|
}
|
|
}
|
|
}
|
|
}
|