Fixed CSS issues and updated for Rails 6

README.md

@@ -9,9 +9,21 @@ This Ruby on Rails gem allows you to easily add Growl-like notifications to your
 
 Are you using Rails 3.0 or lower? Check out [the 'old' branch on Github](https://github.com/RobinBrouwer/gritter/tree/old). Want support for IE6? 
 Also check out that branch, because the newer version of gritter inside this gem dropped support for it.
+If you are Using Rails 6 you should add manually the JS and SCSS to your path
 
+## Installation For Rails 6
+**Add gritter.js and gritter.scss to your packs .
+  Do not forget to add images folder to your packs too. **
+  Add this line to your application.js :
+
+    import 'gritter';
+
+Add this to your application.scss :
+
+    @import 'gritter';
 
-## Installation
+
+## Installation For Rails 4
 
 You can use this gem by putting the following inside your Gemfile:
 
@@ -37,7 +49,8 @@ Version 1.2.0 changes (02/08/2015):
 
     - Added Rails 4 support.
     - Added on_click support.
-
+    - Added Rails 6 support .
+    - Fix style problems .
 Version 1.1.0 changes (31/01/2013):
 
     - All gflash messages can also be stored in the Rails flash messages (optional).

app/assets/stylesheets/gritter.scss

@@ -0,0 +1,119 @@
+#gritter-notice-wrapper {
+    position:fixed;
+    top:20px;
+    right:20px;
+    width:301px;
+    z-index:9999;
+
+    &.top-left {
+      left: 20px;
+      right: auto;
+    }
+
+    &.bottom-right {
+      top: auto;
+      left: auto;
+      bottom: 20px;
+      right: 20px;
+    }
+
+    &.bottom-left {
+      top: auto;
+      right: auto;
+      bottom: 20px;
+      left: 20px;
+    }
+  }
+
+  .gritter-item-wrapper {
+    position:relative;
+    margin:0 0 10px 0;
+    background:url('../images/ie-spacer.gif'); // ie7/8 fix
+  }
+
+  .gritter-top {
+    background:url('../images/gritter.png') no-repeat left -30px;
+    height:10px;
+  }
+  .hover .gritter-top {
+    background-position:right -30px;
+  }
+  .gritter-bottom {
+    background:url('../images/gritter.png') no-repeat left bottom;
+    height:8px;
+    margin:0;
+  }
+  .hover .gritter-bottom {
+    background-position: bottom right;
+  }
+
+  .gritter-item {
+    display:block;
+    color:#eee;
+    padding:2px 11px 8px 11px;
+    font-size: 11px;
+    font-family:verdana;
+    filter:inherit; // ie8 fix
+
+    &.gritter-css2 {
+      background:url('../images/gritter.png') no-repeat left -40px;
+    }
+    &.gritter-css3 {
+      background:rgba(0, 0, 0, 0.8);
+      -webkit-border-radius: 10px;
+      -moz-border-radius: 10px;
+      border-radius: 10px;
+      padding-top: 12px;
+      padding-bottom: 16px;
+    }
+
+    p {
+      padding:0;
+      margin:0;
+    }
+  }
+  .hover .gritter-item.gritter-css2 {
+    background-position:right -40px;
+  }
+  .hover .gritter-item.gritter-css3 {
+    padding:10px 9px 14px 9px;
+    border: solid 2px #fff;
+  }
+
+  .gritter-close {
+    display:none;
+    position:absolute;
+    top:5px;
+    left:3px;
+    cursor:pointer;
+    width:30px;
+    height:30px;
+    filter:inherit; // ie8 fix
+  }
+  .gritter-css2 .gritter-close {
+    background:url('../images/gritter.png') no-repeat left top;
+  }
+  .gritter-css3 .gritter-close {
+    background:url('../images/gritter-close.png') no-repeat;
+  }
+
+  .gritter-title {
+    font-size:14px;
+    font-weight:bold;
+    padding:0 0 7px 0;
+    display:block;
+    text-shadow:1px 1px #000; /* Not supported by IE :( */
+  }
+  .gritter-image {
+    width:48px;
+    height:48px;
+    float:left;
+  }
+  .gritter-with-image,
+  .gritter-without-image {
+    padding:0 0 5px 0;
+  }
+  .gritter-with-image {
+    width:220px;
+    float:right;
+  }