ActesCitoyens/assets/app/frontend/scss/cookies.scss

/* Cookies */

$color-primary-cookies: $orange ;
$font-family-cookies-title: 'FranklinGothic';
$font-family-cookies-text: 'dinbold';

.ch-cookie-consent {
    position: fixed;
    width: 500px ;
    bottom: 20px !important ;
    left: 20px !important ;
    z-index: 100 ;
    padding: 30px ;
    background-color: white ;
    border: solid 1px #e0e0e0 ;

    &.ch-cookie-consent--bottom {
        //display: none ;
    }

    .ch-cookie-consent__title {
        font-family: $font-family-cookies-title ;
        color: $color-primary-cookies ;
        font-size: 25px ;
        font-weight: normal ;
        margin-bottom: 7px ;
    }
    .ch-cookie-consent__intro {
        margin-bottom: 5px ;
        line-height: 20px ;
        font-size: 20px;
    }
    .ch-cookie-consent__read-more {
        color: $color-primary-cookies ;
        display: none ;
    }
    form.ch-cookie-consent__form {
        margin-top: 20px ;

        .ch-cookie-consent__category-group {
            .ch-cookie-consent__category {
                display: -ms-flexbox;
                display: flex;
                padding-top: 7px ;
                padding-bottom: 7px ;
                border: 0px none ;

                .ch-cookie-consent__category-toggle {
                    input {
                        display: none ;
                    }
                    label {
                        cursor: pointer ;
                        text-align: center ;
                        padding: 3px 10px 3px 10px ;
                        text-transform: uppercase ;
                        border: solid 1px $color-primary-cookies ;
                        color: $color-primary-cookies ;
                        font-size: 13px ;
                        font-family: $font-family-cookies-text ;
                    }
                    input:checked + label,
                    label:hover {
                        background: none ;
                        background-color: $color-primary-cookies;
                        color: white ;
                    }
                }
                .ch-cookie-consent__category-information {
                    position: relative ;
                    top: -2px ;
                    margin-left: 20px ;
                    .ch-cookie-consent__category-title {
                        color: $color-primary-cookies ;
                        font-family: $font-family-cookies-text ;
                        margin-bottom: 5px ;
                    }
                    .ch-cookie-consent__category-description {
                        color: gray ;
                        margin-top: 0px ;
                        font-weight: normal;
                        font-family: $font-family-cookies-text ;
                        font-size: 15px;
                    }
                }
            }
        }
        .ch-cookie-consent__btn-group {
            margin-top: 15px ;
            text-align: left ;

            button {
                display: block ;
                margin: 0px ;
                padding: 10px 0px 10px 0px;
                cursor: pointer ;
                background: none ;
                background-color: $color-primary-cookies ;
                color: white ;
                text-transform: uppercase ;
                font-family: $font-family-cookies-title ;
                font-weight: normal ;
                font-size: 15px ;
                border: solid 1px #e0e0e0 ;
                width: 100% ;

                &:hover {
                    background-color: white ;
                    color: $color-primary-cookies !important ;
                }
            }
        }
    }
}