Integration with Applications is hard with an existing set of CSS

[raybooysen]

Thanks for a very useful component.

We are wanting to integrate this into a large application that already has a large amount of CSS using LESS. Our LESS files will have variables that define common colours for backgrounds and such.

This makes it hard to use react-notification-system, as from a JSX component I'd have to code in the same colours that are in our LESS files and override what I can in the JSX component.

The only alternative I see is to turn of the component's styles completely but the caveat is that since I want to change minor pieces of the styling I need to rebuild the styles in JS into a LESS or plain CSS file.

Are there any other suggestions on this? Would it be possible to have a built CSS file that is included in the dist?

[raybooysen]

I've reverse-engineered the JS CSS into a single LESS file. More than happy to integrate this as a PR where as part of the build, we output plain CSS. This gives the user the option to use either the styles as per the original intent or an external CSS they can copy and completely modify

This does mean you have to keep the two in sync, but in my opinion warrants the effort.

[igorprado]

Sure. At the beginning the idea was provide a plug-and-play plugin with a handcrafted style and set of colors for each type of notification. That was my main goal and I think that I achieved it. Later on it crossed my mind that would be useful a SASS (and/or a LESS) version (and a plain CSS). As you said, it's an extra effort to keep on sync, but it will be a small set of styles and minor changes in the future.

I think it would be nice if we provide SASS/LESS/Stylus. What do you think?

And in the future, provide themes, as plugins. Just thoughts :smiley:

[michaelworm]

+1 facing the same problem as the author of this issue.

@raybooysen could you provide a download link for the less/sass/css file maybe?

[raybooysen]

I haven't had time yet unfortunately. It is on the TODO list.

On 4 March 2016 at 16:36, Michael Worm [email protected] wrote:

+1 facing the same problem as the author of this issue.

@raybooysen https://github.com/raybooysen could you provide a download link for the less/sass/css file maybe?

— Reply to this email directly or view it on GitHub https://github.com/igorprado/react-notification-system/issues/34#issuecomment-192345823 .

[michaelworm]

@raybooysen @igorprado I am currently working on porting the styles into a Sass file. I will open a new pull request as far as I am finished but having a LESS version would be nice too :)

[thomasdavis]

For anyone looking for the less version...

@defaultWidth: 320px; // Used for calculations
@defaultShadowOpacity: 0.9;
@successColor: #5ea400;
@warningColor: #ebad1a;
@errorColor: #ec3d3d;
@infoColor: #369cc7;

.box-sizing() {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.default-styles() {
    .box-sizing();
    font-family: inherit;
    position: fixed;
    width: @defaultWidth;
    padding: 0 10px 10px 10px;
    z-index: 9998;
    height: auto;
}

.notifications-tl {
    .default-styles();
    top: 0px;
    bottom: auto;
    left: 0px;
    right: auto;
}

.notifications-tr {
    .default-styles();
    top: 0px;
    bottom: auto;
    left: auto;
    right: 0px;
}

.notifications-tc {
    .default-styles();
    top: 0px;
    bottom: auto;
    margin: 0 auto;
    left: 50%;
    margin-left: -(@defaultWidth / 2);
}

.notifications-bl {
    .default-styles();
    top: auto;
    bottom: 0px;
    left: 0px;
    right: auto;
}

.notifications-br {
    .default-styles();
    top: auto;
    bottom: 0px;
    left: auto;
    right: 0px;
}

.notifications-bc {
    .default-styles();
    top: auto;
    bottom: 0px;
    margin: 0 auto;
    left: 50%;
    margin-left: -(@defaultWidth / 2);
}

.notification {
    .box-sizing();
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: 2px;
    font-size: 13px;
    margin: 10px 0 0;
    padding: 10px;
    display: block;
    opacity: 0;
    transition: 0.3s ease-in-out;
    &.notification-hidden {
        opacity: 0;
    }
    &.notification-visible {
        opacity: 1;
    }
    &.notification-success {
        border-top: 2px solid @successColor;
        background-color: #f0f5ea;
        color: #4b583a;
        -webkit-box-shadow: 0 0 1px lighten(@successColor, @defaultShadowOpacity);
        -moz-box-shadow: 0 0 1px lighten(@successColor, @defaultShadowOpacity);
        box-shadow: 0 0 1px lighten(@successColor, @defaultShadowOpacity);
    }
    &.notification-error {
        border-top: 2px solid @errorColor;
        background-color: #f4e9e9;
        color: #412f2f;
        -webkit-box-shadow: 0 0 1px lighten(@errorColor, @defaultShadowOpacity);
        -moz-box-shadow: 0 0 1px lighten(@errorColor, @defaultShadowOpacity);
        box-shadow: 0 0 1px lighten(@errorColor, @defaultShadowOpacity);
    }
    &.notification-warning {
        border-top: 2px solid @warningColor;
        background-color: #f9f6f0;
        color: #5a5343;
        -webkit-box-shadow: 0 0 1px lighten(@warningColor, @defaultShadowOpacity);
        -moz-box-shadow: 0 0 1px lighten(@warningColor, @defaultShadowOpacity);
        box-shadow: 0 0 1px lighten(@warningColor, @defaultShadowOpacity);
    }
    &.notification-info {
        border-top: 2px solid  @infoColor;
        background-color: #e8f0f4;
        color: #41555d;
        -webkit-box-shadow: 0 0 1px lighten(@infoColor, @defaultShadowOpacity);
        -moz-box-shadow: 0 0 1px lighten(@infoColor, @defaultShadowOpacity);
        box-shadow: 0 0 1px lighten(@infoColor, @defaultShadowOpacity);
    }
}

.notification-title {
    font-size: 14px;
    margin: 0 0 5px 0;
    padding: 0;
    font-weight: bold;
    .notification-success & {
        color: @successColor;
    }
    .notification-error & {
        color: @errorColor;
    }
    .notification-warning & {
        color: @warningColor;
    }
    .notification-info & {
        color: @infoColor;
    }
}

.notification-message {
    margin: 0;
    padding: 0;
}

.notification-dismiss {
    font-family: Arial;
    font-size: 17px;
    position: absolute;
    top: 4px;
    right: 5px;
    line-height: 15px;
    background-color: #dededf;
    color: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-weight: bold;
    text-align: center;
    .notification-success & {
        color: #f0f5ea;
        background-color: #b0ca92;
    }
    .notification-error & {
        color: #f4e9e9;
        background-color: #e4bebe;
    }
    .notification-warning & {
        color: #f9f6f0;
        background-color: #e1cfac;
    }
    .notification-info & {
        color: #e8f0f4;
        background-color: #a4becb;
    }
}

.notification-action-button {
    background: #fff;
    border-radius: 2px;
    padding: 6px 20px;
    font-weight: bold;
    margin: 10px 0 0 0;
    border: 0;
    .notification-success & {
        background-color: @successColor;
        color: #fff;
    }
    .notification-error & {
        background-color: @errorColor;
        color: #fff;
    }
    .notification-warning & {
        background-color: @warningColor;
        color: #fff;
    }
    .notification-info & {
        background-color: @infoColor;
        color: #fff;
    }
}

.notification-action-wrapper {
    margin: 0;
    padding: 0;
}

.notification-not-dismissible {
    cursor: default;
}

[rickerd]

Why isn't the pullrequest merged? It's been 2 years.

[syndbg]

@rickerd Cause it's not a pull request to begin with. :) If it was, perhaps review and discussion could start.

Edit: unless you refer to #39, now idk why it's not reviewed. Will get to it soon-ish.