rhodecode-toast: css improvements.

rhodecode/public/css/alerts.less

@@ -1,58 +1,57 b''
 .alert1 { .border ( @border-thickness-tags, @alert1 ); color:@alert1; }
 .alert2 { .border ( @border-thickness-tags, @alert2 ); color:@alert2; }
 .alert3 { .border ( @border-thickness-tags, @alert3 ); color:@alert3; }
 .alert4 { .border ( @border-thickness-tags, @alert4 ); color:@alert4; }
 
 .alert {
     clear: both;
-    margin: @space auto 0 auto;
     padding: @padding;
     border: @border-thickness solid;
     border-radius: @border-radius;
 
     // overwritter css from specific alerts
     color: @grey3;
     border-color: @alert4;
     background-color: @alert4-inner;
 
     a {
         text-decoration: underline;
     }
     .close {
         color: @grey3;
     }
 }
 
 .infoform .alert {
     width: 100%;
     margin-top: 0;
 }
 
 .alert-success {
     border-color: @alert1;
     background-color: @alert1-inner;
 }
 
 .alert-error {
     border-color: @alert2;
     background-color: @alert2-inner;
 }
 
 .alert-warning {
     border-color: @alert3;
     background-color: @alert3-inner;
 }
 
 .alert-dismissable {
     padding-right: 10px;
 
     .close {
         margin-top: -5px;
     }
 }
 
 .loginbox {
     .alert {
         margin: 0 auto 35px auto;
     }
 }

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html

@@ -1,24 +1,24 b''
 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../../../../bower_components/paper-toast/paper-toast.html">
 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
         <style include="shared-styles"></style>
         <link rel="stylesheet" href="rhodecode-toast.css">
         <template is="dom-if" if="[[hasToasts]]">
-            <div class$="container toast-message-holder [[conditionalClass(isFixed)]]" >
+            <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
                 <template is="dom-repeat" items="[[toasts]]">
                     <div class$="alert alert-[[item.level]]">
                         <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
                     </div>
                 </template>
 
                 <div class="toast-close">
                     <button on-tap="dismissNotifications" class="btn btn-default">[[_gettext('Close')]]</button>
                 </div>
             </div>
         </template>
     </template>
 
     <script src="rhodecode-toast.js"></script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less

@@ -1,22 +1,28 b''
 @import '../../../../css/variables';
 @import '../../../../css/mixins';
 
 .alert{
     margin: 10px 0;
 }
 
 .toast-close{
     text-align: right;
+    .btn {
+        margin: 0;
+    }
 }
 
 .toast-message-holder{
-    background-color: #ffffff;
+    background: fade(#fff, 25%);
 
     &.fixed{
         position: fixed;
-        padding: 10px;
+        padding: 10px 0;
+        margin-left: 10px;
+        margin-right: 10px;
         top: 0;
-        width: 1200px;
-        z-index: 1;
+        left: 0;
+        right:0;
+        z-index: 100;
     }
 }