lobibox/less/notifications.less

jQuery Responsive notification plugin

/*
    Created on : Sep 19, 2014, 2:01:43 PM
    Author     : @arboshiki
*/

.lobibox-notify-wrapper{
    z-index: 5000;
    position: fixed;
    &.top{
        top: @lobibox-notify-wrapper-offset-top;
    }
    &.bottom{
        bottom: @lobibox-notify-wrapper-offset-bottom;
    }
    &.left{
        left: @lobibox-notify-wrapper-offset-left;
        margin-right: @lobibox-notify-wrapper-offset-left;
    }
    &.right{
        right: @lobibox-notify-wrapper-offset-right;
        margin-left: @lobibox-notify-wrapper-offset-right;
        .lobibox-notify{
            margin-left: auto;
        }
    }
    &.center{
        left: 50%;
    }
}
.lobibox-notify-wrapper-large{
    z-index: 5000;
    position: fixed;
    &.top{
        top: @lobibox-notify-wrapper-offset-top;
    }
    &.bottom{
        bottom: @lobibox-notify-wrapper-offset-bottom;
    }
    &.left{
        left: @lobibox-notify-wrapper-offset-left;
        .lb-notify-tabs{
            >li{
                float: left;
                margin-left: 0;
                margin-right: 2px;
            }
        }
    }
    &.right{
        right: @lobibox-notify-wrapper-offset-right;
    }
    
    
    .lb-notify-tabs{
        list-style: none;
        padding: 0;
        margin: 0 0 -5px 0;
        >li{
            float: right;
            margin-left: 2px;
            >a{
                text-align: center;
                display: table;
                text-decoration: none;
                font-size: 18px;
                height: 32px;
                color: #FFF;
                width: 28px;
                opacity: 0.6;
                &:hover,
                &:active,
                &:focus,
                &:hover:active{
                    color: #FFF;
                }
                .tab-control-icon{
                    display: table-cell;
                    vertical-align: middle;
                }
            }
            &.lobibox-notify-default{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-default-bg);
                }
            }
            &.lobibox-notify-error{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-danger-bg);
                }
            }
            &.lobibox-notify-success{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-success-bg);
                }
            }
            &.lobibox-notify-warning{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-warning-bg);
                }
            }
            &.lobibox-notify-info{
                >a{
                    .lobibox-tab-control-variant(@lobibox-notify-info-bg);
                }
            }
            &.active{
                >a{
                    opacity: 1;
                }
            }
        }
        &:after{
            content: "";
            display: block;
            clear: both;
        }
    }
    .lb-notify-wrapper{
        background-color: transparent;
        padding: 0;
        border: none;
        .lb-tab-pane{
            display: none;
            &.active{
                display: block;
            }
        }
        .lobibox-notify{
            min-height: @lobibox-notify-large-height;
            .lobibox-notify-icon-wrapper{
                width: @lobibox-notify-large-icon-width;
            }
            .lobibox-notify-icon{
                >div{
                    .icon-el{
                        font-size: @lobibox-notify-large-icon-font-size;
                    }
                }
            }
            .lobibox-notify-body{
                margin: @lobibox-notify-large-body-margin-vertical @lobibox-notify-large-body-margin-horizontal;
                margin-left: 2 * @lobibox-notify-icon-left + @lobibox-notify-large-icon-width;
            }
        }
    }
}

.lobibox-notify{
    position: relative;
    min-height: @lobibox-notify-min-height;
    font-family: @lobibox-notify-font-family;
    font-size: @lobibox-notify-font-size;
    margin: @lobibox-notify-margin-vertical 0;
    border-radius: @lobibox-notify-border-radius;
    border: @lobibox-notify-border-width solid @lobibox-notify-border-color;
    .box-shadow(@lobibox-notify-box-shadow);
    .transition(all @lobibox-notify-transition-duration);
    .lobibox-notify-icon-wrapper{
        position: absolute;
        left: @lobibox-notify-icon-left;
        width: @lobibox-notify-icon-width;
        height: 100%;
    }
    .lobibox-notify-icon{
        display: table;
        width: 100%;
        height: 100%;
        >div{
            display: table-cell;
            vertical-align: middle;
            >img{
                width: 100%;
                max-width: 100%;
                margin-top: 3px;
                border-radius: @lobibox-notify-img-border-radius;
            }
            .icon-el{
                text-align: center;
                font-size: @lobibox-notify-icon-font-size;
            }
        }
    }
    .lobibox-notify-body{
        margin: @lobibox-notify-body-margin-vertical @lobibox-notify-body-margin-horizontal;
        margin-left: @lobibox-notify-icon-left * 2 + @lobibox-notify-icon-width;
    }
    .lobibox-notify-title{
        font-size: @lobibox-notify-title-font-size;
    }
    .lobibox-notify-msg{
        overflow: hidden;
    }
    .lobibox-close{
        position: absolute;
        text-align: center;
        border-radius: 50%;
        right: @lobibox-notify-close-offset-right;
        top: @lobibox-notify-close-offset-top;
        font-size: @lobibox-notify-close-font-size;
        line-height: @lobibox-notify-close-size;
        .square(@lobibox-notify-close-size);
        .transition(all @lobibox-notify-transition-duration);
        &:hover{
            background-color: @lobibox-notify-close-hover-bg;
            font-weight: bold;
        }
    }
    .lobibox-delay-indicator{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: @lobibox-notify-delay-indicator-height;
        >div{
            position: relative;
            height: 100%;
            width: 0;
            background-color: @lobibox-notify-delay-indicator-bg;
        }
    }

    &.lobibox-notify-default{
        .lobibox-notify-variant(@lobibox-notify-default-bg; @lobibox-notify-default-color);
        .lobibox-close{
            &:hover{
                background-color: lighten(@lobibox-notify-default-bg, 20%);
            }
        }
    }
    &.lobibox-notify-error{
        .lobibox-notify-variant(@lobibox-notify-danger-bg; @lobibox-notify-danger-color);
    }
    &.lobibox-notify-success{
        .lobibox-notify-variant(@lobibox-notify-success-bg; @lobibox-notify-success-color);
    }
    &.lobibox-notify-warning{
        .lobibox-notify-variant(@lobibox-notify-warning-bg; @lobibox-notify-warning-color);
    }
    &.lobibox-notify-info{
        .lobibox-notify-variant(@lobibox-notify-info-bg; @lobibox-notify-info-color);
    }
    &.rounded{
        border-radius: 30px;
    }
    &:hover{
        cursor: pointer;
        .box-shadow(@lobibox-notify-hover-box-shadow);
    }
    &.notify-mini{
        min-height: @lobibox-notify-mini-min-height;
        .lobibox-notify-title{
            margin-top: -5px;
            font-size: @lobibox-notify-mini-title-font-size;
            line-height: @lobibox-notify-mini-title-line-height;
        }
        .lobibox-notify-msg{
            line-height: @lobibox-notify-mini-msg-line-height;
        }
        .lobibox-notify-icon-wrapper{
            left: @lobibox-notify-mini-icon-left;
            width: @lobibox-notify-mini-icon-width;
        }
        .lobibox-notify-icon{
            >div{
                .icon-el{
                    font-size: @lobibox-notify-mini-icon-font-size;
                }
            }
        }
        .lobibox-notify-body{
            margin: @lobibox-notify-mini-body-margin-vertical
                    30px
                    @lobibox-notify-mini-body-margin-vertical
                2 * @lobibox-notify-mini-icon-left + @lobibox-notify-mini-icon-width;
        }
    }
    &.without-icon{
        .lobibox-notify-body{
            margin-left: @lobibox-notify-body-margin-horizontal;
        }
    }
}