<commit_before>@import "mixins";

$notification-panel-bg-color: rgba(255,255,255,1);
$notification-text-color: rgb(50, 124, 169);
$notification-separator-color:  rgba(0,0,0,0.1);


div[data-focus='notification-center'] {
    // & > * {
    //     font-family: 'roboto';
    // }
    [data-focus='notification-center-icon'] {
        cursor: pointer;
        .mdl-badge::after {
            left:15px;
        }
    }
    [data-focus='notification-center-overlay'] {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.4);
        top:0;
        left:0;
        width: 100vw;
        height: 100vh;
    };
    [data-focus='notification-center-panel'] {
        @include shadow(10);
        width: 650px;
        height: 100vh;
        right: 0;
        top:0;
        bottom: 0;
        position: relative;
        background: $notification-panel-bg-color;
        text-align: left;
        overflow-y: auto;
        h1, h2, h3 {
            color: $notification-text-color;
            line-height: normal;
            margin: 0;
            padding: 10px;
        }
        h1 {
            font-size: 22px;
            text-align: center;
        }
        h2 {
            font-size: 18px;
        }
        header {
            position: relative;
            button[data-focus='notification-center-close'] {
                position: absolute;
                top: 10px;
                right: 10px;
                color: $notification-text-color;
            }
        }
        [data-focus='notification-group'] {
            [data-focus='notification-group--title'] {
                justify-content: space-between;
                align-items: center;
                display: flex;
                background-color: $notification-separator-color;
                button {
                    margin: 0 10px;
                    color: $notification-text-color;
                }
            }
        }
        &[data-fetching='true'] {
            div[data-focus='notification-group'] {
                &:after {
                    content: 'Loading...';
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    top: 0;
                    left: 0;
                    background-color: rgba(0, 0, 0, 0.19);
                    text-align: center;
                    color: #FFF;
                }
            }
        }
        // &.panel-appear {
        //     opacity: 0.01;
        // }
        //
        // &.panel-appear.panel-appear-active {
        //     opacity: 1;
        //     transition: opacity .5s ease-in;
        // }


        ul[data-focus='notification-list'] {
            list-style-type: none;
            padding: 0 10px;
            margin: 0 0 40px;
            li {
                margin: 10px 0;
            }
            [data-focus='notification'] {
                // @include BoxShadowHelper(2);
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                justify-content: center;
                background-color: rgba(0, 0, 0, 0.05);
                color: rgba(32,32,32, 255);
                padding: 3px;
                border-radius: 5px;
                &:hover {
                    background-color: rgba(224, 224, 224, 255);
                }
                [data-focus='notification-icon']{
                    width: 10%;
                    flex-grow: 1;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                        //-webkit-filter: grayscale(0.7);
                        width: 80%;
                    }
                }
                [data-focus='notification-body']{
                    width: 55%;
                    flex-grow: 4;
                    white-space: normal;
                    padding: 10px;
                    h4[data-focus='notification-title']{
                        color: rgb(32, 32, 32);
                        font-weight: 400;
                        line-height: normal;;
                        font-size: 16px;
                        margin: 0 0 5px 0;
                        padding: 0;
                    }
                    [data-focus='notification-content']{
                        line-height: normal;
                        font-size: 13px;
                        color: rgba(104,104,104, 255)
                    }
                }
                //On hover on the line, the date is hidden and the button is visible.
                &:hover {
                    div[data-focus='notification-date'] {
                        button {
                            display: inline-flex;
                        }
                        div {
                            display: none;
                        }
                    }
                }
                [data-focus='notification-date']{
                    color: $notification-text-color;
                    text-align: center;
                    width: 15%;
                    font-size: 13px;
                    button{
                        display: none;
                    }
                }
            }
        }
    }<commit_msg>fix code spacing<commit_after>@import "mixins";

$notification-bg-color: rgba(0, 0, 0, 0.05);
$notification-panel-bg-color: rgba(255,255,255,1);
$notification-text-color: rgb(50, 124, 169);
$notification-separator-color: rgba(0, 0, 0, 0.1);


div[data-focus='notification-center'] {
    // & > * {
    //     font-family: 'roboto';
    // }
    [data-focus='notification-center-icon'] {
        cursor: pointer;
        .mdl-badge::after {
            left:15px;
        }
    }
    [data-focus='notification-center-overlay'] {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.4);
        top:0;
        left:0;
        width: 100vw;
        height: 100vh;
    };
    [data-focus='notification-center-panel'] {
        @include shadow(10);
        width: 650px;
        height: 100vh;
        right: 0;
        top:0;
        bottom: 0;
        position: relative;
        background: $notification-panel-bg-color;
        text-align: left;
        overflow-y: auto;
        h1, h2, h3 {
            color: $notification-text-color;
            line-height: normal;
            margin: 0;
            padding: 10px;
        }
        h1 {
            font-size: 22px;
            text-align: center;
        }
        h2 {
            font-size: 18px;
        }
        header {
            position: relative;
            button[data-focus='notification-center-close'] {
                position: absolute;
                top: 10px;
                right: 10px;
                color: $notification-text-color;
            }
        }
        [data-focus='notification-group'] {
            [data-focus='notification-group--title'] {
                justify-content: space-between;
                align-items: center;
                display: flex;
                background-color: $notification-separator-color;
                button {
                    margin: 0 10px;
                    color: $notification-text-color;
                }
            }
        }
        &[data-fetching='true'] {
            div[data-focus='notification-group'] {
                &:after {
                    content: 'Loading...';
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    top: 0;
                    left: 0;
                    background-color: rgba(0, 0, 0, 0.19);
                    text-align: center;
                    color: #FFF;
                }
            }
        }
        // &.panel-appear {
        //     opacity: 0.01;
        // }
        //
        // &.panel-appear.panel-appear-active {
        //     opacity: 1;
        //     transition: opacity .5s ease-in;
        // }


        ul[data-focus='notification-list'] {
            list-style-type: none;
            padding: 0 10px;
            margin: 0 0 40px;
            li {
                margin: 10px 0;
            }
            [data-focus='notification'] {
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                justify-content: center;
                background-color: rgba(0, 0, 0, 0.05);
                color: rgba(32,32,32, 255);
                padding: 3px;
                border-radius: 5px;
                &:hover {
                    background-color: rgba(224, 224, 224, 255);
                }
                [data-focus='notification-icon']{
                    width: 10%;
                    flex-grow: 1;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                        width: 80%;
                    }
                }
                [data-focus='notification-body']{
                    width: 55%;
                    flex-grow: 4;
                    white-space: normal;
                    padding: 10px;
                    h4[data-focus='notification-title']{
                        color: rgb(32, 32, 32);
                        font-weight: 400;
                        line-height: normal;;
                        font-size: 16px;
                        margin: 0 0 5px 0;
                        padding: 0;
                    }
                    [data-focus='notification-content']{
                        line-height: normal;
                        font-size: 13px;
                        color: rgba(104, 104, 104, 255);
                    }
                }
                //On hover on the line, the date is hidden and the button is visible.
                &:hover {
                    div[data-focus='notification-date'] {
                        button {
                            display: inline-flex;
                        }
                        div {
                            display: none;
                        }
                    }
                }
                [data-focus='notification-date']{
                    color: $notification-text-color;
                    text-align: center;
                    width: 15%;
                    font-size: 13px;
                    button {
                        display: none;
                    }
                }
            }
        }
    }
{'fraction_non_alphanumeric': 0.10951576576576577, 'fraction_numerical': 0.03331456456456457, 'mean_word_length': 0.8861946902654867, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '910421', 'n_tokens_mistral': 3125, 'n_tokens_neox': 2624, 'n_words': 540}