Cookie Modal: Default

No notes defined.

<div class="bcee-cookies-manager-modal modal fade in" id="bcee-cookies-manager-modal-1" tabindex="-1" role="dialog" style="display: block;">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content bcee-cookies-manager-modal-content">
            <div class="bcee-cookies-manager-top-container">
                <div class="bcee-cookies-manager-more-infos">
                    <a class="bcee-link-arrow" href="https://www.spuerkeess.lu/fr/a-propos-de-nous/publications/cookie-policy/" data-page="https://www.spuerkeess.lu/fr/a-propos-de-nous/publications/cookie-policy/" data-modal="1" data-title="Plus d'infos"><span class="bcee-cookies-manager-more-infos-text link-label">Plus d'infos</span>
                        <span class="bcee-cookies-manager-more-infos-icon bcee-button-action light bcee-icon bcee-ab-info"></span>
                    </a>
                </div>
            </div>
            <div class="bcee-cookies-manager-middle-container">
                <div class="bcee-cookies-manager-image-container">
                    <img class="bcee-cookies-manager-image" src="https://www.spuerkeess.lu/typo3conf/ext/apartbcee/Resources/Public/Media/Animated/coffee.gif">
                </div>
                <div class="bcee-cookies-manager-title h2">Votre expérience client passe par les cookies.</div>
                <div class="bcee-cookies-manager-text">En acceptant les cookies, vous nous permettez d’améliorer votre
                    expérience client sur notre site tout en respectant votre vie privée. Et parce que chaque choix est
                    une question de goût, vous pouvez changer d’avis et modifier vos choix à tout moment.
                </div>
            </div>
            <div class="bcee-cookies-manager-bottom-container">
                <div class="bcee-cookies-manager-continue">
                    <a class="bcee-cookies-manager-deny-all btn btn-sm btn-grey" data-modal="1">Continuer sans
                        accepter</a>
                </div>
                <div class="bcee-cookies-manager-preferences-link">
                    <a class="btn btn-sm btn-grey">Paramètres des cookies</a>
                </div>
                <div class="bcee-cookies-manager-accept-container">
                    <a class="bcee-cookies-manager-accept-all btn btn-sm btn-green" data-modal="1">Accepter et
                        continuer</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bcee-cookies-manager-modal modal fade in" id="bcee-cookies-manager-modal-1" tabindex="-1" role="dialog"
	 style="display: block;">
	<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
		<div class="modal-content bcee-cookies-manager-modal-content">
			<div class="bcee-cookies-manager-top-container">
				<div class="bcee-cookies-manager-more-infos">
					<a class="bcee-link-arrow"
					   href="https://www.spuerkeess.lu/fr/a-propos-de-nous/publications/cookie-policy/"
					   data-page="https://www.spuerkeess.lu/fr/a-propos-de-nous/publications/cookie-policy/"
					   data-modal="1" data-title="Plus d'infos"><span
							class="bcee-cookies-manager-more-infos-text link-label">Plus d'infos</span>
						<span
							class="bcee-cookies-manager-more-infos-icon bcee-button-action light bcee-icon bcee-ab-info"></span>
					</a>
				</div>
			</div>
			<div class="bcee-cookies-manager-middle-container">
				<div class="bcee-cookies-manager-image-container">
					<img class="bcee-cookies-manager-image"
						 src="https://www.spuerkeess.lu/typo3conf/ext/apartbcee/Resources/Public/Media/Animated/coffee.gif">
				</div>
				<div class="bcee-cookies-manager-title h2">Votre expérience client passe par les cookies.</div>
				<div class="bcee-cookies-manager-text">En acceptant les cookies, vous nous permettez d’améliorer votre
					expérience client sur notre site tout en respectant votre vie privée. Et parce que chaque choix est
					une question de goût, vous pouvez changer d’avis et modifier vos choix à tout moment.
				</div>
			</div>
			<div class="bcee-cookies-manager-bottom-container">
				<div class="bcee-cookies-manager-continue">
					<a class="bcee-cookies-manager-deny-all btn btn-sm btn-grey" data-modal="1">Continuer sans
						accepter</a>
				</div>
				<div class="bcee-cookies-manager-preferences-link">
					<a class="btn btn-sm btn-grey">Paramètres des cookies</a>
				</div>
				<div class="bcee-cookies-manager-accept-container">
					<a class="bcee-cookies-manager-accept-all btn btn-sm btn-green" data-modal="1">Accepter et
						continuer</a>
				</div>
			</div>
		</div>
	</div>
</div>
  • Handle: @spk-cookie-modal--default
  • Preview:
  • Filesystem Path: components/spuerkeess-site/organisms/modal/cookie-modal/cookie-modal.njk
  • Content:
    .bcee-cookies-manager-modal .modal-dialog {
    	margin-top: 20px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .modal-dialog {
    		margin-top: 80px;
    	}
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .modal-dialog.modal-dialog-small-margin-top {
    		margin-top: 80px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-image-container {
    	text-align: center;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-image-container .bcee-cookies-manager-image {
    	max-height: 150px;
    	margin: auto;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-image-container .bcee-cookies-manager-image {
    		max-height: 300px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content {
    	border-radius: 20px;
    	overflow: hidden;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container {
    	padding: 20px 25px 5px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container .bcee-cookies-manager-more-infos {
    	text-align: center;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container .bcee-cookies-manager-more-infos a {
    	padding-right: 0;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container .bcee-cookies-manager-more-infos {
    		text-align: right;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container .bcee-cookies-manager-more-infos .bcee-cookies-manager-more-infos-text {
    	text-align: right;
    	margin-right: 5px;
    	cursor: pointer;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-middle-container {
    	padding: 0 15px 20px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-middle-container {
    		padding: 0 60px 40px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container {
    	background-color: #f7f7f7;
    	padding: 30px 30px;
    	width: 100%;
    	display: block;
    	text-align: center;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container {
    		display: table;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container > * {
    	display: block;
    	text-align: center;
    	margin-bottom: 25px;
    	padding: 0;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container > * {
    		display: table-cell;
    		margin-bottom: 0;
    		margin-left: 15px;
    		text-align: center;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container > *:last-child {
    	margin-bottom: 0;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-title {
    	color: #001f47;
    	font-size: 18px;
    	line-height: 18px;
    	font-weight: 600;
    	text-align: center;
    	margin-bottom: 12px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-title {
    		font-size: 22px;
    		line-height: 26px;
    		margin-bottom: 24px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text {
    	color: #001f47;
    	font-size: 14px;
    	line-height: 18px;
    	text-align: center;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text {
    		font-size: 16px;
    		line-height: 24px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-title-step-2 {
    	margin-top: 15px;
    	margin-bottom: 5px;
    	padding: 0 5px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-title-step-2 {
    		padding: 20px 125px 0;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text-step-2 {
    	font-size: 16px;
    	line-height: 18px;
    	padding: 0 5px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text-step-2 {
    		padding: 0 125px;
    		font-size: 22px;
    		line-height: 26px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block {
    	display: table;
    	width: 100%;
    	margin-top: 20px;
    	padding-bottom: 30px;
    	border-bottom: 1px solid #a5abac;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div {
    	display: table-cell;
    	vertical-align: top;
    	width: 50%;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div {
    		width: auto;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div.bcee-cookies-manager-option-right-block {
    	text-align: right;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div {
    	min-height: 40px;
    	margin-bottom: 5px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div.bcee-cookies-manager-option-title {
    	vertical-align: middle;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div.bcee-cookies-manager-option-text {
    	overflow: visible;
    	width: 200%;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div.bcee-cookies-manager-option-text {
    		overflow: auto;
    		width: auto;
    	}
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div {
    		vertical-align: middle;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-title {
    	color: #001f47;
    	font-size: 16px;
    	font-weight: 600;
    	line-height: 26px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-text {
    	color: #001f47;
    	font-size: 16px;
    	line-height: 26px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-seeAllCookies {
    	color: #738CBE;
    	font-size: 12px;
    	line-height: 18px;
    	margin-top: 3px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-preferences-link {
    	cursor: pointer;
    }
    
    .bcee-cookies-manager-more-infos {
    
    	.bcee-link-arrow {
    
    		display: inline-flex;
    		align-items: center;
    
    	}
    
    }
    
    .bcee-cookies-manager-more-infos-icon {
    
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	border: 0 !important;
    	background-image: none !important;
    	background-color: transparent !important;
    
    	&:hover {
    		color: #6683a0 !important;
    	}
    
    	&::before {
    
    		@include icon-base;
    		content: map-deep-get($token-icon-map, "infocircleborder");
    		font-size: 36px;
    		color: #6683a0;
    
    	}
    
    }
    
    .frame-space-before-extra-small {
    	margin-top: 0.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-extra-small {
    		margin-top: 1em;
    	}
    }
    .frame-space-before-small {
    	margin-top: 1em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-small {
    		margin-top: 2em;
    	}
    }
    .frame-space-before-medium {
    	margin-top: 1.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-medium {
    		margin-top: 3em;
    	}
    }
    .frame-space-before-large {
    	margin-top: 2em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-large {
    		margin-top: 4em;
    	}
    }
    .frame-space-before-extra-large {
    	margin-top: 2.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-extra-large {
    		margin-top: 5em;
    	}
    }
    .frame-space-after-extra-small {
    	margin-bottom: 0.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-extra-small {
    		margin-bottom: 1em;
    	}
    }
    .frame-space-after-small {
    	margin-bottom: 1em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-small {
    		margin-bottom: 2em;
    	}
    }
    .frame-space-after-medium {
    	margin-bottom: 1.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-medium {
    		margin-bottom: 3em;
    	}
    }
    .frame-space-after-large {
    	margin-bottom: 2em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-large {
    		margin-bottom: 4em;
    	}
    }
    .frame-space-after-extra-large {
    	margin-bottom: 2.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-extra-large {
    		margin-bottom: 5em;
    	}
    }
    
    .bcee-cookie-modal-info {
    	.h1,
    	H1 {
    		line-height:38px
    	}
    	.h1.light,
    	H1.light {
    		margin-bottom:4px
    	}
    	.h1 SPAN.light,
    	H1 SPAN.light {
    		font-size:.85em;
    	}
    	.h1.less-margin,
    	H1.less-margin {
    		margin-bottom:0
    	}
    	@media only screen and (min-width:768px) {
    		.h1,
    		H1 {
    			margin-bottom:3px
    		}
    	}
    	.h2,
    	H2 {
    		margin-bottom:20px
    	}
    	.h2.light,
    	H2.light {
    		margin-bottom:4px
    	}
    
    	.h2.less-margin,
    	H2.less-margin {
    		margin-bottom:5px
    	}
    	@media only screen and (min-width:768px) {
    		.h2,
    		H2 {
    			margin-bottom:30px
    		}
    	}
    	.h3,
    	H3 {
    		margin-bottom:16px
    	}
    
    	.h3.less-margin,
    	H3.less-margin {
    		margin-bottom:5px
    	}
    	@media only screen and (min-width:768px) {
    		.h3,
    		H3 {
    			margin-bottom:20px
    		}
    	}
    	.h4,
    	H4 {
    		margin-bottom:10px
    	}
    	@media only screen and (min-width:768px) {
    		.h4,
    		H4 {
    			margin-bottom:10px
    		}
    	}
    
    	P {
    		font-size:16px;
    		font-weight:400;
    		line-height:26px;
    		margin:20px 0
    	}
    	P.centered {
    		text-align:center
    	}
    	P.light {
    		color:#767b7c;
    		font-size:14px;
    		line-height:24px
    	}
    	@media only screen and (min-width:768px) {
    		P {
    			font-size:18px;
    			line-height:29px
    		}
    		P.light {
    			font-size:16px;
    			line-height:26px
    		}
    	}
    
    	.close {
    		&::before {
    
    			@include icon-base;
    			content: map-deep-get($token-icon-map, "close");
    
    		}
    	}
    
    	.table TH {
    		border: 0 !important;
    		color: #003060;
    		font-family: "futura-pt-bold";
    		font-size: 16px;
    		padding: 27px 10px 17px 10px !important;
    	}
    
    	.ce-table.ce-table-striped TBODY TR,
    	.ce-table.ce-table-striped TBODY TD {
    		border: 0 !important;
    	}
    
    	.ce-table.ce-table-striped TBODY TR:nth-child(2n) {
    		background-color: #f7f7f7;
    	}
    
    	.ce-table CAPTION, .ce-table TR TH {
    		color: #003060;
    		font-family: Open Sans,sans-serif;
    		font-weight: 600;
    	}
    
    	.ce-table CAPTION {
    		font-size: 22px;
    		line-height: 1.36;
    		padding: 0 0 12px;
    		caption-side: top !important;
    	}
    
    	.frame-type-text > UL LI {
    		line-height: 1.4;
    		margin: 10px 0;
    		padding-left: 20px;
    		position: relative;
    	}
    
    	.frame-type-text > UL LI::before {
    		-webkit-background-clip: padding-box;
    		-moz-background-clip: padding;
    		background-clip: padding-box;
    		background-color: #6683a0;
    		-webkit-border-radius: 4px;
    		-moz-border-radius: 4px;
    		border-radius: 4px;
    		content: "";
    		height: 8px;
    		left: 0;
    		position: absolute;
    		top: 7px;
    		width: 8px;
    	}
    
    	.ce-table {
    		margin: 40px 0;
    	}
    	.table {
    		width: 100%;
    		max-width: 100%;
    		margin-bottom: 20px;
    	}
    
    }
    
    .modal .modal-information {
    	width: 900px;
    	max-width: 100%;
    	margin: 80px auto 30px auto;
    
    	UL {
    		list-style: none;
    		padding-left: 0;
    	}
    
    }
    .modal .modal-information .modal-content {
    	-webkit-box-shadow: none !important;
    	-moz-box-shadow: none !important;
    	box-shadow: none !important;
    	border: 0 !important;
    	-webkit-border-radius: 20px;
    	-moz-border-radius: 20px;
    	border-radius: 20px;
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding;
    	background-clip: padding-box;
    }
    .modal .modal-information .modal-content .modal-header {
    	padding: 40px 60px 0 20px !important;
    	border: 0 !important;
    	position: relative;
    }
    @media only screen and (min-width:992px) {
    	.modal .modal-information .modal-content .modal-header {
    		padding: 40px 60px 0 60px !important;
    	}
    }
    .modal .modal-information .modal-content .modal-header .close {
    	position: absolute !important;
    	right: 15px;
    	top: 15px;
    	padding: 0 !important;
    	margin: 0 !important;
    	opacity: 1 !important;
    	filter: alpha(opacity=100) !important;
    	text-shadow: none !important;
    	-webkit-transition: 0.15s transform linear;
    	-moz-transition: 0.15s transform linear;
    	-o-transition: 0.15s transform linear;
    	transition: 0.15s transform linear !important;
    
    	&::before {
    		line-height: 1.35;
    		font-size: 27px;
    		display: block;
    	}
    
    	&:hover {
    
    		background-color: #de0000;
    		color: white !important;
    
    	}
    
    }
    @media only screen and (min-width:992px) {
    	.modal .modal-information .modal-content .modal-header .close {
    		right: -22px;
    		top: 40px;
    	}
    }
    .modal .modal-information .modal-content .modal-header .close:hover {
    	transform: rotate(90deg);
    }
    .modal .modal-information .modal-content .modal-body {
    	padding: 30px 20px 60px 20px !important;
    }
    @media only screen and (min-width:992px) {
    	.modal .modal-information .modal-content .modal-body {
    		padding: 30px 60px 60px 60px !important;
    	}
    }
    .modal .modal-information .modal-content .modal-footer {
    	padding: 0 30px 30px 30px !important;
    	border: 0 !important;
    }
    .modal .modal-information .modal-content .modal-loader {
    	display: none;
    	padding-bottom: 60px;
    }
    
    .btn {
    	display: inline-block;
    	margin-bottom: 0;
    	font-weight: 400;
    	text-align: center;
    	white-space: nowrap;
    	vertical-align: middle;
    	touch-action: manipulation;
    	cursor: pointer;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    	background-image: none;
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding;
    	background-clip: padding-box;
    	border: 0;
    	-webkit-border-radius: 30px;
    	-moz-border-radius: 30px;
    	border-radius: 30px;
    	font-size: 18px;
    	line-height: 1;
    	padding: 17px 40px;
    	position: relative;
    }
    
    .btn.btn-sm {
    	font-size: 14px;
    	padding: 10px 20px;
    }
    
    .btn-green {
    	background: #20af93;
    	background-image: none;
    	background-image: linear-gradient(45deg,#20af93,#20af93,#2a7);
    	color: #fff;
    	-webkit-transition: background-color .15s;
    	-moz-transition: background-color .15s;
    	-o-transition: background-color .15s;
    	transition: background-color .15s;
    }
    
    .btn-grey {
    	background-color: #6683a0;
    	color: #fff !important;
    	-webkit-transition: background-color .15s;
    	-moz-transition: background-color .15s;
    	-o-transition: background-color .15s;
    	transition: background-color .15s;
    }
    
    .bcee-button-action {
    	border: 2px solid #DE0000;
    	background-color: white;
    	flex-shrink: 0;
    	display: inline-block;
    	position: relative;
    	z-index: 1;
    	width: 40px;
    	height: 40px;
    	line-height: 36px;
    	text-align: center;
    	color: #DE0000 !important;
    	text-transform: uppercase;
    	text-decoration: none;
    	border-radius: 30px;
    	cursor: pointer;
    	-webkit-transition: all 100ms;
    	-moz-transition: all 100ms;
    	-o-transition: all 100ms;
    	transition: all 100ms;
    }
    
    .bcee-button-action {
    	color: #de0000 !important;
    	cursor: pointer;
    	line-height: 36px;
    	text-align: center;
    	text-transform: uppercase;
    }
    
    .bcee-form-toggle, .bcee-toggle {
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding;
    	background-clip: padding-box;
    	background-color: #d7d7d7;
    	-webkit-border-radius: 20px;
    	-moz-border-radius: 20px;
    	border-radius: 20px;
    	cursor: pointer;
    	display: inline-block;
    	height: 40px;
    	margin-left: 10px;
    	overflow: hidden;
    	position: relative;
    	-webkit-transition: all .25s;
    	-moz-transition: all .25s;
    	-o-transition: all .25s;
    	transition: all .25s;
    	width: 100px;
    }
    
    .bcee-form-toggle.disabled, .bcee-form-toggle[disabled], .bcee-toggle.disabled, .bcee-toggle[disabled] {
    	background-color: #ebebeb;
    	cursor: default;
    }
    
    .bcee-form-toggle.disabled.active, .bcee-form-toggle[disabled].active, .bcee-toggle.disabled.active, .bcee-toggle[disabled].active {
    	background-color: #bce5d6;
    }
    
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div {
    	margin-bottom: 5px;
    	min-height: 40px;
    }
    
    .bcee-form-toggle.active .toggle-on, .bcee-toggle.active .toggle-on {
    	filter: alpha(opacity=100);
    	left: 0;
    	opacity: 1;
    }
    
    .bcee-toggle .toggle-off, .bcee-form-toggle .toggle-off {
    	left: 40px;
    	opacity: 1;
    	filter: alpha(opacity=100);
    }
    
    .bcee-form-toggle.active .toggle-off, .bcee-form-toggle.active .toggle-on, .bcee-toggle.active .toggle-off, .bcee-toggle.active .toggle-on {
    	color: #fff;
    }
    .bcee-form-toggle .toggle-on, .bcee-toggle .toggle-on {
    	filter: alpha(opacity=0);
    	left: -60px;
    	opacity: 0;
    }
    .bcee-form-toggle .toggle-off, .bcee-form-toggle .toggle-on, .bcee-toggle .toggle-off, .bcee-toggle .toggle-on {
    	color: #000;
    	font-size: 16px;
    	height: 40px;
    	line-height: 40px;
    	text-align: center;
    	text-transform: uppercase;
    	width: 60px;
    }
    .bcee-form-toggle .toggle-off, .bcee-form-toggle .toggle-on, .bcee-form-toggle .toggle-switch, .bcee-toggle .toggle-off, .bcee-toggle .toggle-on, .bcee-toggle .toggle-switch {
    	position: absolute;
    	top: 0;
    	-webkit-transition: all .25s;
    	-moz-transition: all .25s;
    	-o-transition: all .25s;
    	transition: all .25s;
    }
    
    .bcee-form-toggle.active .toggle-switch, .bcee-toggle.active .toggle-switch {
    	left: 60px;
    }
    .bcee-form-toggle .toggle-switch, .bcee-toggle .toggle-switch {
    	height: 40px;
    	left: 0;
    	width: 40px;
    }
    .bcee-form-toggle .toggle-off, .bcee-form-toggle .toggle-on, .bcee-form-toggle .toggle-switch, .bcee-toggle .toggle-off, .bcee-toggle .toggle-on, .bcee-toggle .toggle-switch {
    	position: absolute;
    	top: 0;
    	-webkit-transition: all .25s;
    	-moz-transition: all .25s;
    	-o-transition: all .25s;
    	transition: all .25s;
    }
    
    .bcee-form-toggle.active .toggle-off, .bcee-toggle.active .toggle-off {
    	filter: alpha(opacity=0);
    	left: 100px;
    	opacity: 0;
    }
    
    
    
    .bcee-form-toggle .toggle-switch::after, .bcee-toggle .toggle-switch::after {
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding;
    	background-clip: padding-box;
    	background-color: #fff;
    	-webkit-border-radius: 50%;
    	-moz-border-radius: 50%;
    	border-radius: 50%;
    	content: "";
    	height: 34px;
    	position: absolute;
    	right: 3px;
    	top: 3px;
    	-webkit-transform: scale(.9);
    	-moz-transform: scale(.9);
    	-ms-transform: scale(.9);
    	-o-transform: scale(.9);
    	transform: scale(.9);
    	-webkit-transition: all .1s;
    	-moz-transition: all .1s;
    	-o-transition: all .1s;
    	transition: all .1s;
    	width: 34px;
    }
    
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text-step-2 {
    	font-size: 22px;
    	line-height: 26px;
    	padding: 0 125px;
    	margin-top: 20px;
    }
    
    .h1.light, .h2.light, .h3.light, .h4.light, H1.light, H2.light, H3.light, H4.light {
    	font-family: futura-pt;
    	font-weight: 400;
    }
    
    .bcee-link-arrow .link-label {
    	color: #6683a0;
    	display: inline-block;
    	font-weight: 700;
    	line-height: 1.4;
    	-webkit-transition: color .25s;
    	-moz-transition: color .25s;
    	-o-transition: color .25s;
    	transition: color .25s;
    }
    
    .bcee-form-toggle.active, .bcee-toggle.active {
    	background-color: #2a7;
    }
    
    .btn-grey:hover, .btn-grey:active, .btn-grey:focus {
    	background-color: #5b7692 !important;
    	-webkit-box-shadow: none !important;
    	-moz-box-shadow: none !important;
    	box-shadow: none !important;
    	outline: none !important;
    }
    
    .btn-green:hover, .btn-green:focus, .btn-green:active {
    	color: white;
    	background-color: #1e9568 !important;
    	border-color: #22AA77 !important;
    	-webkit-box-shadow: none !important;
    	-moz-box-shadow: none !important;
    	box-shadow: none !important;
    	outline: none !important;
    }
    
    .bcee-loader-panel {
    	position: relative;
    	margin: 50px auto 0 auto;
    	width: 62px;
    	height: 62px;
    }
    
    .bcee-loader-panel .ab-bcee {
    	position: absolute;
    	top: 5.2px;
    	bottom: 6.2px;
    	left: 6.2px;
    	right: 6.2px;
    	width: 52px;
    	height: 52px;
    }
    
    .modal.loading .modal-body {
    	display: none;
    }
    
    .modal .modal-information .modal-content .modal-loader {
    	display: none;
    	padding-bottom: 60px;
    }
    
    .modal.loading .modal-loader {
    	display: block !important;
    }
    
    .bcee-loader-panel::before {
    	content: '';
    	display: block;
    	padding-top: 100%;
    }
    
    .bcee-loader-panel .circular .path {
    	stroke-dasharray: 1, 200;
    	stroke-dashoffset: 0;
    	animation: dash 2s infinite ease-in-out;
    	stroke-linecap: round;
    	stroke: #DE0000;
    }
    
    .bcee-loader-panel .circular {
    	animation: rotate 2s linear infinite;
    	height: 100%;
    	transform-origin: center center;
    	width: 100%;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    }
    
    .bcee-loader-panel .pathbg {
    	height: 100%;
    	transform-origin: center center;
    	width: 100%;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    }
    
    @keyframes dash {
    	0% {
    		stroke-dasharray: 1, 200;
    		stroke-dashoffset: 0;
    	}
    	50% {
    		stroke-dasharray: 100, 200;
    		stroke-dashoffset: -35px;
    	}
    	100% {
    		stroke-dasharray: 100, 200;
    		stroke-dashoffset: -175px;
    	}
    }
    
    @keyframes rotate {
    	100% {
    		transform: rotate(360deg);
    	}
    }
    
    .modal .modal-information .close {
    	z-index: 100;
    }
    
    .modal-header .close {
    	margin-top: -2px;
    }
    
    
    @include media-breakpoint-up(md) {
    	.bcee-cookies-manager-modal .modal-dialog,
    	.bcee-cookies-manager-modal .modal-dialog.modal-dialog-small-margin-top {
    		margin-top: 80px !important;
    	}
    }
    
  • URL: /components/raw/spk-cookie-modal/_cookie-modal.scss
  • Filesystem Path: components/spuerkeess-site/organisms/modal/cookie-modal/_cookie-modal.scss
  • Size: 21.1 KB