PietroSkeleton/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;
                }
            }
        }
    }
}