Index: third_party/pkg/angular/example/web/css/animation.css |
diff --git a/third_party/pkg/angular/example/web/css/animation.css b/third_party/pkg/angular/example/web/css/animation.css |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8f54df4fcece7c6aec4703c53016d91e2b93e76a |
--- /dev/null |
+++ b/third_party/pkg/angular/example/web/css/animation.css |
@@ -0,0 +1,292 @@ |
+[ng-cloak], .ng-cloak, .ng-hide { |
+ display: none !important; |
+} |
+ |
+html, body { |
+ font-family: "Open Sans" sans-serif; |
+ font-size: 14px; |
+ color: #fafafa; |
+ background-color: #303030; |
+ margin: 0px; |
+ padding: 0px; |
+ box-shadow: inset 0 10px 10px rgba(0, 0, 0, .1); |
+ width: 100%; |
+ height: 100%; |
+} |
+ |
+p { |
+ max-width: 540px; |
+} |
+ |
+button { |
+ color: #303030; |
+ background-color: #fafafa; |
+ border: none; |
+ border-radius: 2px; |
+ margin: 5px 5px 5px 0; |
+ height: 30px; |
+ line-height: 30px; |
+ padding: 0 20px; |
+} |
+ |
+nav { |
+ padding-left: 20px; |
+} |
+ |
+nav button { |
+ margin: 0 5px 5px; |
+} |
+ |
+nav .current { |
+ border-top: 5px solid #fafafa; |
+ border-radius: 0 0 2px 2px; |
+ height: 35px; |
+} |
+ |
+.content { |
+ margin: 0 30px; |
+} |
+ |
+.demo { |
+ position: absolute; |
+ width: 100%; |
+} |
+ |
+.demo.ng-enter { |
+ transform: scale(.8, .8); |
+ -webkit-transform: scale(.8, .8); |
+ /* Chrome bug prevents putting opacity at 0 right now */ |
+ opacity: 0.000001; |
+ transition: all 218ms; |
+} |
+ |
+.demo.ng-enter.ng-enter-active { |
+ transform: scale(1.0, 1.0); |
+ -webkit-transform: scale(1.0, 1.0); |
+ /* Chrome bug prevents putting opacity at 0 right now */ |
+ opacity: 1.0; |
+ transition: all 218ms; |
+} |
+ |
+.demo.ng-leave { |
+ transform: scale(1.0, 1.0); |
+ -webkit-transform: scale(1.0, 1.0); |
+ /* Chrome bug prevents putting opacity at 0 right now */ |
+ opacity: 1; |
+ transition: all 218ms; |
+} |
+ |
+.demo.ng-leave.ng-leave-active { |
+ transform: scale(1.3, 1.3); |
+ -webkit-transform: scale(1.3, 1.3); |
+ /* Chrome bug prevents putting opacity at 0 right now */ |
+ opacity: 0.0; |
+ transition: all 218ms; |
+} |
+ |
+.repeat-demo ul, .repeat-demo li { |
+ list-style-type: none; |
+ margin: 0; |
+ padding: 0; |
+} |
+ |
+.repeat-demo li li { |
+ display: inline-block; |
+ min-width: 30px; |
+ margin: 0 5px 0 0; |
+ padding: 0 5px; |
+ font-size: 10px; |
+ line-height: 15px; |
+ border-radius: 2px; |
+ background: #fafafa; |
+ color: #303030; |
+} |
+ |
+.repeat-demo li.ng-enter { |
+ transform: scale(1.1, 1.1); |
+ -webkit-transform: scale(1.1,1.1); |
+ |
+ opacity: 0; |
+ transition: opacity 100ms linear, -webkit-transform 432ms linear; |
+} |
+ |
+.repeat-demo li.ng-enter.ng-enter-active { |
+ transform: scale(1.0, 1.0); |
+ -webkit-transform: scale(1.0,1.0); |
+ |
+ opacity: 1; |
+} |
+ |
+/* This will show you if one of the sub elements is |
+ animating */ |
+.repeat-demo li li.ng-enter.ng-enter-active, |
+.repeat-demo li li.ng-leave.ng-leave-active { |
+ background-color: #1080F0; |
+} |
+ |
+ |
+.repeat-demo li.ng-leave { |
+ transform: scale(1.0, 1.0); |
+ -webkit-transform: scale(1.0,1.0); |
+ |
+ opacity: 1; |
+ transition: all 900ms; |
+} |
+ |
+.repeat-demo li.ng-leave.ng-leave-active { |
+ transform: scale(1.1, 1.1); |
+ -webkit-transform: scale(1.1,1.1); |
+ |
+ opacity: 0; |
+} |
+ |
+.visibility-demo div, |
+.visibility-demo p { |
+ height: 50px; |
+ margin: 0; |
+ padding: 0; |
+} |
+ |
+.visibility-demo div { |
+ border-left: 5px solid #fbfbfb; |
+ padding-left: 10px; |
+} |
+ |
+.visibility-demo .ng-enter, |
+.visibility-demo .ng-hide-remove { |
+ opacity: 0.0001; |
+ height: 0; |
+ transition: all 900ms ease; |
+} |
+ |
+.visibility-demo .ng-enter.ng-enter-active, |
+.visibility-demo .ng-hide-remove.ng-hide-remove-active { |
+ opacity: 1; |
+ height: 50px; |
+} |
+ |
+.visibility-demo .ng-leave, |
+.visibility-demo .ng-hide-add { |
+ opacity: 1; |
+ height: 50px; |
+ transition: all 900ms ease; |
+} |
+ |
+.visibility-demo .ng-leave.ng-leave-active, |
+.visibility-demo .ng-hide-add.ng-hide-add-active { |
+ opacity: 0; |
+ height: 0; |
+} |
+ |
+.css-demo .active { |
+ background-color: #1080F0; |
+} |
+ |
+.css-demo .css-box { |
+ width: 100px; |
+ height: 100px; |
+ background-color: #fbfbfb; |
+ color: #303030; |
+ margin: 100px auto; |
+ text-align: center; |
+ line-height: 100px; |
+ font-weight: bold; |
+} |
+ |
+ |
+.css-demo .css-box.a { |
+ width: 200px; |
+} |
+.css-demo .css-box.a-add { |
+ transition: width 1200ms; |
+} |
+.css-demo .css-box.a-add.a-add-active { |
+ width: 200px; |
+} |
+.css-demo .css-box.a-remove { |
+ transition: width 1200ms; |
+} |
+.css-demo .css-box.a-remove.a-remove-active { |
+ width: 100px; |
+} |
+ |
+.css-demo .css-box.b { |
+ background-color: #1080F0; |
+} |
+.css-demo .css-box.b-add { |
+ background-color: #fbfbfb; |
+ transition: all 500ms; |
+} |
+.css-demo .css-box.b-add.b-add-active { |
+ background-color: #1080F0; |
+} |
+.css-demo .css-box.b-remove { |
+ background-color: #1080F0; |
+ transition: all 500ms; |
+} |
+.css-demo .css-box.b-remove.b-remove-active { |
+ background-color: #fbfbfb; |
+} |
+ |
+.css-demo .css-box.c { |
+ transform: rotate(45deg); |
+ -webkit-transform: rotate(45deg); |
+} |
+.css-demo .css-box.c-add { |
+ transform: rotate(0deg); |
+ -webkit-transform: rotate(0deg); |
+ |
+ transition: all 200ms; |
+} |
+.css-demo .css-box.c-add.c-add-active { |
+ transform: rotate(45deg); |
+ -webkit-transform: rotate(45deg); |
+} |
+.css-demo .css-box.c-remove { |
+ transform: rotate(45deg); |
+ -webkit-transform: rotate(45deg); |
+ |
+ transition: all 200ms; |
+} |
+.css-demo .css-box.c-remove.c-remove-active { |
+ transform: rotate(0deg); |
+ -webkit-transform: rotate(0deg); |
+} |
+ |
+.stress-box { |
+ display: inline-block; |
+ width: 20px; |
+ height: 20px; |
+ margin: 5px 5px 0 0; |
+ padding: 0; |
+ background-color: #fbfbfb; |
+ border-radius: 2px; |
+} |
+ |
+.stress-box.ng-enter { |
+ transform: scale(0, 0); |
+ -webkit-transform: scale(0,0); |
+ opacity: 0.000001; |
+ |
+ transition: all 500ms; |
+} |
+ |
+.stress-box.ng-enter.ng-enter-active { |
+ transform: scale(1, 1); |
+ -webkit-transform: scale(1,1); |
+ opacity: 1.0; |
+} |
+ |
+.stress-box.ng-leave { |
+ transform: scale(1, 1); |
+ -webkit-transform: scale(1,1); |
+ opacity: 1.0; |
+ |
+ transition: all 500ms; |
+} |
+ |
+.stress-box.ng-leave.ng-leave-active { |
+ transform: scale(0, 0); |
+ -webkit-transform: scale(0,0); |
+ opacity: 0.000001; |
+} |