beyond-components/src/Notification/mixin.less

react prototype components

@import "../mixins.less";
.beyond_notification(@prefix) {
    @nprefix : ~"@{prefix}notification";
    .@{nprefix} {
        position: fixed;
        top: 20px;
        left: 50%;
        & &-content {
            border-radius: 3px;
            background: rgb(255, 255, 255);
            background: rgba(255, 255, 255, 0.95);
            position: relative;
            right: 50%;
            vertical-align: middle;
            padding: 7px 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            border: 1px solid #d9d9d9; // border: 0px solid rgba(0, 0, 0, 0);
            line-height: 1.5;
            margin-bottom: 10px;
        }
        & &-content&-content-reverse {
            color: white;
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.8);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
            border-color: black;
        }
    }
    .@{nprefix}-left {
        left: 20px;
        right: auto;
        & .@{nprefix}-content {
            right: 0;
        }
    }
    .@{nprefix}-right {
        left: auto;
        right: 20px;
        & .@{nprefix}-content {
            right: 0;
        }
    }
    .@{nprefix}-middle {
        top: 33.3%;
        bottom: auto;
    }
    .@{nprefix}-bottom {
        top: auto;
        bottom: 20px;
    }
    .@{nprefix}-animation-entering {
        opacity: 0.01;
        transform: translate(0, -20px);
    }
    .@{nprefix}-animation-entering.@{nprefix}-animation-entered {
        opacity: 1;
        transform: translate(0, 0);
        transition: opacity 300ms ease-in, transform 300ms ease-in;
    }
    .@{nprefix}-animation-leaving {
        transform: translate(0, 0);
        opacity: 1;
    }
    .@{nprefix}-animation-leaving.@{nprefix}-animation-leaved {
        opacity: 0.01;
        transform: translate(0, -20px);
        transition: opacity 300ms ease-in, transform 300ms ease-in;
    }
}