Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-10 14:58:34 +00:00
Code Issues Releases Wiki Activity

Publish web_embedding (#1777)

Browse Source 
## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md


Co-authored-by: Mark Thompson
<2554588+MarkTechson@users.noreply.github.com>
Co-authored-by: David Iglesias <ditman@gmail.com>

Co-authored-by: Mark Thompson <2554588+MarkTechson@users.noreply.github.com>
Co-authored-by: David Iglesias <ditman@gmail.com>
This commit is contained in:
Brett Morgan
2023-05-06 10:53:17 +10:00
committed by GitHub
parent b703f1f3f9
commit 91cb685d1f
61 changed files with 14950 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web_embedding/ng-flutter/src/styles.css Normal file
View File

@@ -0,0 +1,54 @@
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
/* FX */
.fx-resize {
width: 480px !important;
height: 320px !important;
}
.fx-spin { animation: spin 6400ms ease-in-out infinite; }
.fx-shadow { position: relative; overflow: visible !important; }
.fx-shadow::before {
content: "";
position: absolute;
display: block;
width: 100%;
top: calc(100% - 1px);
left: 0;
height: 1px;
background-color: black;
border-radius: 50%;
z-index: -1;
transform: rotateX(80deg);
box-shadow: 0px 0px 60px 38px rgb(0 0 0 / 25%);
}
.fx-mirror {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
@keyframes spin {
0% {
transform: perspective(1000px) rotateY(0deg);
animation-timing-function: ease-in-out;
}
10% {
transform: perspective(1000px) rotateY(0deg);
animation-timing-function: ease-in-out;
}
40% {
transform: perspective(1000px) rotateY(180deg);
animation-timing-function: ease-in-out;
}
60% {
transform: perspective(1000px) rotateY(180deg);
animation-timing-function: ease-in-out;
}
90% {
transform: perspective(1000px) rotateY(359deg);
animation-timing-function: ease-in-out;
}
100% {
transform: perspective(1000px) rotateY(360deg);
animation-timing-function: ease-in-out;
}
}