Improve banner CSS

 * On standalone pages the banner will sit in page and be hidden.
 * On package page (and landing page) the banner will float over
   content with position absolute, as these pages have sufficient
   margin to allow for this.

In both cases content will not jump when the banner is dismissed,
or when the banner is loaded.

Author: jonasfj

pkg/web_app/lib/src/widget/widget.dart

@@ -10,7 +10,7 @@ import 'package:web/web.dart';
 
 import '../web_util.dart';
 import 'completion/widget.dart' deferred as completion;
-import 'switch/widget.dart' deferred as switch_;
+import 'switch/widget.dart' as switch_;
 
 /// Function to create an instance of the widget given an element and options.
 ///
@@ -32,7 +32,7 @@ typedef _WidgetLoaderFn = FutureOr<_WidgetFn> Function();
 /// Map from widget name to widget loader
 final _widgets = <String, _WidgetLoaderFn>{
   'completion': () => completion.loadLibrary().then((_) => completion.create),
-  'switch': () => switch_.loadLibrary().then((_) => switch_.create),
+  'switch': () => switch_.create,
 };
 
 Future<_WidgetFn> _noSuchWidget() async =>

pkg/web_css/lib/src/_base.scss

@@ -393,30 +393,32 @@ pre {
   text-align: center;
 
   .dismisser {
-    float: right;
+    position: absolute;
+    display: inline-block;
+    right: 0px;
     padding: 5px 15px;
     margin-top: -5px;
     cursor: pointer;
     user-select: none;
   }
 
   &.dismissed {
-    visibility: hidden;
+    display: none;
   }
 
-  z-index: 0;
-  animation-duration: 200ms;
-  animation-name: slide-down;
-  animation-timing-function: ease;
+  z-index: 1000;
+
+  position: absolute;
+  left: 0px;
+  right: 0px;
 }
 
-@keyframes slide-down {
-  from {
-    translate: 0 -100%;
-  }
+.page-standalone .announcement-banner {
+  position: initial;
 
-  to {
-    translate: 0 0;
+  &.dismissed {
+    display: block;
+    visibility: hidden;
   }
 }