Fractal Starter
Project version : 0.1.2

Cookie: Default

<div class="wordpress-gdpr-privacy-settings-popup-container">
    <div class="wordpress-gdpr-privacy-settings-popup" style="background-color: #FFFFFF; color: #333333;">
        <a href="#" id="wordpress-gdpr-privacy-settings-popup-close" class="wordpress-gdpr-privacy-settings-popup-close" style="background-color: #000000;">
			<i style="color: #FFFFFF;" class="fa fa-times"></i>
		</a>

        <div class="wordpress-gdpr-privacy-settings-popup-message">
            Paramètres sauvegardés
        </div>

        <div class="wordpress-gdpr-privacy-settings-popup-header">
            <div class="wordpress-gdpr-privacy-settings-popup-logo">
                <img src="https://xxl.local/wp-content/uploads/2019/11/brand-black.svg" />
            </div>
            <div class="wordpress-gdpr-privacy-settings-popup-info">
                <div class="wordpress-gdpr-privacy-settings-popup-title">Paramètres de confidentialité</div>
                <p class="wordpress-gdpr-privacy-settings-popup-description">Lorsque vous visitez un site Web, il peut stocker ou récupérer des informations sur votre navigateur, principalement sous la forme de cookies. Contrôlez vos services de cookies personnels ici.</p>
            </div>
            <div class="gdpr-clear"></div>
        </div>

        <div class="wordpress-gdpr-privacy-settings-popup-services-container">
            <div class="wordpress-gdpr-privacy-settings-popup-service-categories">
                <a href="#" data-id="72" class="wordpress-gdpr-popup-privacy-settings-service-category wordpress-gdpr-popup-privacy-settings-open-service-category">
					Cookies indispensables et fonctionnels
				</a><a href="#" data-id="73" class="wordpress-gdpr-popup-privacy-settings-service-category wordpress-gdpr-popup-privacy-settings-open-service-category">
					Cookies de performance
				</a>
            </div>
            <div class="wordpress-gdpr-privacy-settings-popup-services">
                <div id="wordpress-gdpr-popup-privacy-settings-services-content-72" class="wordpress-gdpr-popup-privacy-settings-services-content">
                    <div class="wordpress-gdpr-popup-privacy-settings-service-category-description"></div>
                    <hr />
                    <div class="wordpress-gdpr-popup-privacy-settings-services-content-title-box"><a href="#" data-id="131477" class="wordpress-gdpr-popup-privacy-settings-services-content-title"><i class="fa fa-caret-right"></i> WordPress</a><input name="131477" data-id="131477" disabled="disabled" checked="checked" class="gdpr-service-switch"
                            type="checkbox" />
                        <div class="gdpr-clear"></div>
                    </div>
                    <div id="wordpress-gdpr-popup-privacy-settings-services-content-description-131477" class="wordpress-gdpr-popup-privacy-settings-services-content-description">
                        <div class="wordpress-gdpr-popup-privacy-settings-services-content-reason"></div>
                        <ul class="wordpress-gdpr-popup-privacy-settings-services-content-cookies">
                            <li>wordpress_test_cookie</li>
                            <li>wordpress_logged_in_</li>
                            <li>wordpress_sec</li>
                        </ul>
                    </div>
                    <hr />
                </div>
                <div id="wordpress-gdpr-popup-privacy-settings-services-content-73" style="display: none;" class="wordpress-gdpr-popup-privacy-settings-services-content">
                    <div class="wordpress-gdpr-popup-privacy-settings-service-category-description"></div>
                    <hr />
                    <div class="wordpress-gdpr-popup-privacy-settings-services-content-title-box"><a href="#" data-id="131481" class="wordpress-gdpr-popup-privacy-settings-services-content-title"><i class="fa fa-caret-right"></i> Google Analytics</a><input name="131481" data-id="131481" class="gdpr-service-switch" type="checkbox"
                        />
                        <div class="gdpr-clear"></div>
                    </div>
                    <div id="wordpress-gdpr-popup-privacy-settings-services-content-description-131481" class="wordpress-gdpr-popup-privacy-settings-services-content-description">
                        <div class="wordpress-gdpr-popup-privacy-settings-services-content-reason"></div>
                        <ul class="wordpress-gdpr-popup-privacy-settings-services-content-cookies">
                            <li>_ga</li>
                            <li>_gid</li>
                            <li>_gat</li>
                        </ul>
                    </div>
                    <hr />
                </div>
            </div>
            <div class="gdpr-clear"></div>
        </div>

        <div class="wordpress-gdpr-privacy-settings-popup-services-buttons">
            <div class="wordpress-gdpr-popup-decline wordpress-gdpr-privacy-settings-popup-services-decline-all button btn button-secondary theme-btn" style="background-color: #F44336; color: #FFFFFF;">
                Refuser tous les services
            </div>
            <div class="wordpress-gdpr-popup-agree wordpress-gdpr-privacy-settings-popup-services-accept-all button btn button-secondary theme-btn" style="background-color: #4CAF50;color: #FFFFFF;">
                Accepter tous les services
            </div>

            <div class="gdpr-clear"></div>
        </div>
    </div>
    <div class="wordpress-gdpr-privacy-settings-popup-backdrop"></div>
</div>
<div class="wordpress-gdpr-privacy-settings-popup-container">
	<div
		class="wordpress-gdpr-privacy-settings-popup"
		style="background-color: #FFFFFF; color: #333333;"
	>
		<a
			href="#"
			id="wordpress-gdpr-privacy-settings-popup-close"
			class="wordpress-gdpr-privacy-settings-popup-close"
			style="background-color: #000000;"
		>
			<i style="color: #FFFFFF;" class="fa fa-times"></i>
		</a>

		<div class="wordpress-gdpr-privacy-settings-popup-message">
			Paramètres sauvegardés
		</div>

		<div class="wordpress-gdpr-privacy-settings-popup-header">
			<div class="wordpress-gdpr-privacy-settings-popup-logo">
				<img
					src="https://xxl.local/wp-content/uploads/2019/11/brand-black.svg"
				/>
			</div>
			<div class="wordpress-gdpr-privacy-settings-popup-info">
				<div class="wordpress-gdpr-privacy-settings-popup-title">Paramètres
					de confidentialité</div>
				<p class="wordpress-gdpr-privacy-settings-popup-description">Lorsque
					vous visitez un site Web, il peut stocker ou récupérer des
					informations sur votre navigateur, principalement sous la forme
					de cookies. Contrôlez vos services de cookies personnels ici.</p>
			</div>
			<div class="gdpr-clear"></div>
		</div>

		<div class="wordpress-gdpr-privacy-settings-popup-services-container">
			<div class="wordpress-gdpr-privacy-settings-popup-service-categories">
				<a
					href="#"
					data-id="72"
					class="wordpress-gdpr-popup-privacy-settings-service-category wordpress-gdpr-popup-privacy-settings-open-service-category"
				>
					Cookies indispensables et fonctionnels
				</a><a
					href="#"
					data-id="73"
					class="wordpress-gdpr-popup-privacy-settings-service-category wordpress-gdpr-popup-privacy-settings-open-service-category"
				>
					Cookies de performance
				</a>
			</div>
			<div class="wordpress-gdpr-privacy-settings-popup-services">
				<div
					id="wordpress-gdpr-popup-privacy-settings-services-content-72"
					class="wordpress-gdpr-popup-privacy-settings-services-content"
				><div
						class="wordpress-gdpr-popup-privacy-settings-service-category-description"
					></div><hr /><div
						class="wordpress-gdpr-popup-privacy-settings-services-content-title-box"
					><a
							href="#"
							data-id="131477"
							class="wordpress-gdpr-popup-privacy-settings-services-content-title"
						><i class="fa fa-caret-right"></i> WordPress</a><input
							name="131477"
							data-id="131477"
							disabled="disabled"
							checked="checked"
							class="gdpr-service-switch"
							type="checkbox"
						/><div class="gdpr-clear"></div></div><div
						id="wordpress-gdpr-popup-privacy-settings-services-content-description-131477"
						class="wordpress-gdpr-popup-privacy-settings-services-content-description"
					><div
							class="wordpress-gdpr-popup-privacy-settings-services-content-reason"
						></div><ul
							class="wordpress-gdpr-popup-privacy-settings-services-content-cookies"
						><li>wordpress_test_cookie</li><li
							>wordpress_logged_in_</li><li
							>wordpress_sec</li></ul></div><hr /></div><div
					id="wordpress-gdpr-popup-privacy-settings-services-content-73"
					style="display: none;"
					class="wordpress-gdpr-popup-privacy-settings-services-content"
				><div
						class="wordpress-gdpr-popup-privacy-settings-service-category-description"
					></div><hr /><div
						class="wordpress-gdpr-popup-privacy-settings-services-content-title-box"
					><a
							href="#"
							data-id="131481"
							class="wordpress-gdpr-popup-privacy-settings-services-content-title"
						><i class="fa fa-caret-right"></i> Google Analytics</a><input
							name="131481"
							data-id="131481"
							class="gdpr-service-switch"
							type="checkbox"
						/><div class="gdpr-clear"></div></div><div
						id="wordpress-gdpr-popup-privacy-settings-services-content-description-131481"
						class="wordpress-gdpr-popup-privacy-settings-services-content-description"
					><div
							class="wordpress-gdpr-popup-privacy-settings-services-content-reason"
						></div><ul
							class="wordpress-gdpr-popup-privacy-settings-services-content-cookies"
						><li>_ga</li><li>_gid</li><li>_gat</li></ul></div><hr /></div>
			</div>
			<div class="gdpr-clear"></div>
		</div>

		<div class="wordpress-gdpr-privacy-settings-popup-services-buttons">
			<div
				class="wordpress-gdpr-popup-decline wordpress-gdpr-privacy-settings-popup-services-decline-all button btn button-secondary theme-btn"
				style="background-color: #F44336; color: #FFFFFF;"
			>
				Refuser tous les services
			</div>
			<div
				class="wordpress-gdpr-popup-agree wordpress-gdpr-privacy-settings-popup-services-accept-all button btn button-secondary theme-btn"
				style="background-color: #4CAF50;color: #FFFFFF;"
			>
				Accepter tous les services
			</div>

			<div class="gdpr-clear"></div>
		</div>
	</div>
	<div class="wordpress-gdpr-privacy-settings-popup-backdrop"></div>
</div>
/* No context defined for this component. */
  • Content:
    // button
    .wordpress-gdpr-privacy-settings-trigger-container {
    	position: fixed;
    	bottom: 1rem !important;
    	right: 1rem !important;
    	width: auto !important;
    	height: auto !important;
    	padding: 0.5rem !important;
    	border-radius: 12px 12px 0 12px !important;
    	background: #252322 !important;
    	color: #e3cb78 !important;
    	text-decoration: none !important;
    	text-align: left !important;
    	transition: 0.2s ease !important;
    	z-index: 99;
    
    	> div {
    		display: flex;
    		align-items: center;
    		background: transparent !important;
    		color: $c-white !important;
    	}
    
    	> div::after {
    		content: "Des infos \A sur nos cookies ?";
    		display: none;
    		white-space: pre;
    		font-family: $font-primary;
    		font-size: rem(14);
    		line-height: 1.1;
    		color: #e3cb78;
    		margin-left: 0.5rem;
    
    		@include mediaWQuery($media-query-m) {
    			display: block;
    		}
    	}
    
    	> div > i {
    		display: block;
    		width: 34px;
    		height: 34px;
    		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='cookie-bite' class='svg-inline--fa fa-cookie-bite fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23E3CB78' d='M352 328a24 24 0 100 48 24 24 0 000-48zM184 192a24 24 0 10-48 0 24 24 0 0048 0zm8 136a24 24 0 100 48 24 24 0 000-48zm96-96a24 24 0 100 48 24 24 0 000-48zm222.5 23.8A128 128 0 01384 128 128 128 0 01256.2 1.5a132.2 132.2 0 00-79.7 12.8l-69.2 35.3a132.2 132.2 0 00-57.7 57.8l-35.1 68.8a132.6 132.6 0 00-12.9 81l12.1 76.3a132.6 132.6 0 0037.2 73l54.7 54.7a132 132 0 0072.8 37l76.7 12.2a131.5 131.5 0 0080.5-12.8l69.1-35.2a132.2 132.2 0 0057.8-57.8l35.1-68.9c12.6-24.6 17-52.6 13-79.9zm-41.4 65.4L434 390a99.6 99.6 0 01-43.8 43.8L321 469a100.4 100.4 0 01-61 9.7l-76.7-12.2c-21-3.3-40-13-55.1-28l-54.8-54.8a99.8 99.8 0 01-28.2-55.3l-12-76.3a100 100 0 019.7-61.4l35-68.9A99.6 99.6 0 01122 78.1L191 42.9c11.3-5.8 23.8-9.4 36.5-10.5a161 161 0 00127.3 124.8 161 161 0 00124.8 127.3 99.3 99.3 0 01-10.5 36.7z'/%3E%3C/svg%3E");
    		background-position: center;
    		background-size: contain;
    		background-repeat: no-repeat;
    		&::before {
    			display: none !important;
    		}
    	}
    
    	&:hover,
    	&:focus {
    		background: lighten(#252322, 10%) !important;
    	}
    }
    
    // Update cookie modal
    .wordpress-gdpr-privacy-settings-popup-backdrop {
    	background: rgba(255, 255, 255, 0.5) !important;
    }
    
    .wordpress-gdpr-privacy-settings-popup-container {
    	.wordpress-gdpr-privacy-settings-popup {
    		padding-top: 3rem !important;
    		box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
    	}
    
    	.wordpress-gdpr-privacy-settings-popup-close {
    		right: 2rem !important;
    		top: 0 !important;
    		border-radius: 0 !important;
    		line-height: 1 !important;
    		padding: 1rem 2rem !important;
    		height: auto !important;
    		width: auto !important;
    		text-decoration: none !important;
    
    		&::after {
    			content: "FERMER";
    			font-size: rem(16);
    			font-family: $font-primary;
    			color: $c-white;
    		}
    
    		i {
    			display: none !important;
    		}
    	}
    
    	.wordpress-gdpr-privacy-settings-popup-info {
    		.wordpress-gdpr-privacy-settings-popup-title {
    			font-family: $font-primary !important;
    			font-weight: 700 !important;
    		}
    
    		.wordpress-gdpr-privacy-settings-popup-description {
    			font-family: $font-secondary !important;
    			font-size: rem(16) !important;
    		}
    	}
    
    	.wordpress-gdpr-privacy-settings-popup-service-categories {
    		.wordpress-gdpr-popup-privacy-settings-service-category {
    			padding: 1rem !important;
    		}
    	}
    
    	.wordpress-gdpr-privacy-settings-popup-services-buttons {
    		display: flex !important;
    		flex-direction: column;
    
    		@include mediaWQuery($media-query-m) {
    			flex-direction: row;
    			justify-content: space-between;
    			align-items: center;
    		}
    
    		> div {
    			float: none !important;
    			margin: 0 !important;
    			font-size: rem(16) !important;
    
    			&.wordpress-gdpr-popup-decline {
    				background: $c-gray-80 !important;
    			}
    			&.wordpress-gdpr-popup-agree {
    				background: $c-gold-medium !important;
    			}
    
    			& + div {
    				margin-top: 0.5rem !important;
    
    				@include mediaWQuery($media-query-m) {
    					margin-top: 0 !important;
    					margin-left: 1rem !important;
    				}
    			}
    		}
    
    		.gdpr-clear {
    			display: none !important;
    		}
    	}
    }
    
    // Agree modal
    .wordpress-gdpr-popup {
    	// Overlay
    	.wordpress-gdpr-popup-overlay-backdrop {
    		background: rgba(255, 255, 255, 0.5) !important;
    	}
    
    	// Button close
    	.wordpress-gdpr-popup-close {
    		right: 2rem !important;
    		top: 0 !important;
    		width: auto !important;
    		height: auto !important;
    		border-radius: 0 !important;
    		font-family: $font-primary !important;
    		font-size: 18px !important;
    		text-decoration: none !important;
    		color: white !important;
    		background: #252322 !important;
    		padding: 1rem 2rem !important;
    		line-height: 1 !important;
    
    		i {
    			display: none !important;
    		}
    
    		&:hover,
    		&:focus {
    			color: $c-white !important;
    			background: lighten(#252322, 10%) !important;
    		}
    
    		&::after {
    			content: "FERMER";
    		}
    	}
    
    	// Container
    	.wordpress-gdpr-popup-container {
    		padding-top: 4rem !important;
    		background: $c-white !important;
    		box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
    	}
    
    	.wordpress-gdpr-popup-text {
    		font-size: rem(16) !important;
    		@include mediaWQuery($media-query-m) {
    			font-size: rem(18) !important;
    		}
    		line-height: 1.3 !important;
    	}
    
    	.wordpress-gdpr-popup-actions-buttons {
    		display: flex !important;
    		align-items: center;
    		flex-direction: column;
    		justify-content: space-between;
    		margin: 2rem 0 1rem !important;
    
    		@include mediaWQuery($media-query-m) {
    			flex-direction: row;
    			justify-content: space-between;
    		}
    
    		> a {
    			float: none !important;
    			width: 100% !important;
    			margin: 0 !important;
    			font-family: $font-primary;
    			padding: 0.75rem 2rem;
    			margin-bottom: 1rem !important;
    			font-weight: 400 !important;
    			text-align: center !important;
    			font-size: 16px !important;
    			@include mediaWQuery($media-query-m) {
    				width: auto !important;
    				margin-bottom: 0 !important;
    
    				& + a {
    					margin-left: 1rem !important;
    				}
    			}
    		}
    
    		.gdpr-clear {
    			display: none !important;
    		}
    	}
    }
    
  • URL: /components/raw/cookie/cookie.scss
  • Filesystem Path: components/05-objects/08-cookie/cookie.scss
  • Size: 6 KB

There are no notes for this item.