Initial commit: Atomaste website

This commit is contained in:
2025-12-10 12:17:30 -05:00
commit 0b9e5d1605
19260 changed files with 5206382 additions and 0 deletions

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,93 @@
/**
*
* Prefix everything
* Name descriptively
* Structure radically
*
* CSS Structure
* css/
* ├─ admin/
* │ ├─ base.scss
* │ ├─ layout.scss
* │ ├─ modules/
* │ │ ├─ modal.scss
* │ │ ├─ button.scss
* │ │ ├─ modal.scss
* │ │ ├─ notices.scss
* │ │ ├─ tips-and-tricks.scss
* │ │ ├─ etc.....
* │ ├─ states.scss
* │ ├─ theme.scss
* ├─ admin.scss
* ├─ admin.min.css
* ├─ admin.css
* ├─ variables.scss
*
*/
@import 'variables.scss';
@import 'admin/base.scss';
@import 'admin/layout.scss';
@import 'admin/modules/modal.scss';
@import 'admin/modules/header.scss';
@import 'admin/modules/bullets.scss';
@import 'admin/modules/icons.scss';
@import 'admin/modules/onboarding.scss';
@import 'admin/modules/progress.scss';
@import "admin/modules/placeholder.scss";
@import 'admin/modules/other-plugins.scss';
@import 'admin/modules/tips-tricks.scss';
@import 'admin/modules/dashboard/dashboard.scss';
@import 'admin/modules/dashboard/documents.scss';
@import 'admin/modules/dashboard/tools.scss';
@import 'admin/modules/dashboard/statistics.scss';
@import 'admin/modules/wizard.scss';
@import 'admin/modules/errorboundary.scss';
@import 'admin/modules/wizard/notice.scss';
@import 'admin/modules/wizard/borderradius.scss';
@import 'admin/modules/wizard/menu.scss';
@import 'admin/modules/wizard/fields.scss';
@import 'admin/modules/wizard/documents.scss';
@import 'admin/modules/wizard/snackbar.scss';
@import 'admin/modules/wizard/panel.scss';
@import 'admin/modules/wizard/suggested-plugins.scss';
@import 'admin/modules/wizard/premium-fields.scss';
@import 'admin/modules/wizard/documents-menu.scss';
@import 'admin/modules/wizard/editor.scss';
@import 'admin/modules/wizard/processors-thirdparties.scss';
@import 'admin/modules/toast/main.scss';
// inputs
@import 'admin/modules/inputs/Input.scss';
@import 'admin/modules/inputs/BorderInput.scss';
@import 'admin/modules/inputs/CheckboxGroup.scss';
@import 'admin/modules/inputs/Buttons.scss';
@import 'admin/modules/inputs/RadioGroup.scss';
@import 'admin/modules/inputs/SelectInput.scss';
@import 'admin/modules/inputs/SwitchInput.scss';
@import 'admin/modules/inputs/TextSwitchInput.scss';
@import 'admin/modules/inputs/TextAreaInput.scss';
@import 'admin/modules/inputs/PasswordInput.scss';
@import 'admin/modules/CookieBannerPreview.scss';
@import 'admin/modules/cookiescan.scss';
@import 'admin/modules/notices.scss';
@import 'admin/modules/datatables.scss';
@import 'admin/modules/new-features.scss';
@import 'admin/modules/integrations/integrations.scss';
@import 'admin/modules/documents.scss';
@import 'admin/modules/shepherd.scss';
@import 'admin/modules/date-range.scss';
@import 'admin/modules/statistics.scss';
//@import 'admin/modules/dark-mode.scss';
@import 'admin/modules/animations.scss';
@import 'admin/modules/tooltip.scss';
//@import 'admin/modules/suggested-plugins.scss';
@import 'admin/states.scss';
@import 'admin/theme.scss';

View File

@@ -0,0 +1,105 @@
.cmplz {
font-variant-numeric: tabular-nums; // https://css-tricks.com/almanac/properties/f/font-variant-numeric/
margin: 0;
margin-left: -20px;
font-size: var(--rsp-fs-300);
box-sizing: border-box;
color: var(--rsp-text-color);
font-weight: 400;
line-height: 1.5;
@media only screen and ( max-width: $rsp-break-xs) {
margin-left: -9px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
color: var(--rsp-text-color);
line-height: 1.5;
}
.cmplz-h0 {
font-size: var(--rsp-fs-900);
font-weight: 700;
letter-spacing: 0.025rem;
}
h1, .cmplz-h1 {
font-size: var(--rsp-fs-800);
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.025rem;
}
h2, .cmplz-h2 {
font-size: var(--rsp-fs-700);
font-weight: 700;
letter-spacing: 0.025rem;
}
h3, .cmplz-h3 {
font-size: var(--rsp-fs-600);
font-weight: 600;
letter-spacing: 0.0125rem;
}
h4, .cmplz-h4 {
font-size: var(--rsp-fs-500);
font-weight: 600;
letter-spacing: 0.0125rem;
}
h5, .cmplz-h5 {
font-size: var(--rsp-fs-400);
font-weight: 500;
letter-spacing: 0.1px;
}
h6, .cmplz-h6 {
font-size: var(--rsp-fs-300);
letter-spacing: 0.1px;
}
p {
color: var(--rsp-text-color);
font-weight: 400;
font-size: var(--rsp-fs-300);
line-height: 1.5;
}
.cmplz-small-text {
font-size: var(--rsp-fs-200);
line-height: 1.5;
color: var(--rsp-text-color-light);
}
a {
font-size: var(--rsp-fs-300);;
}
//wordpress inserts notices after the first h1 or h2. To prevent breaking layout we insert an empty h1 tag at the start of our page, where WP can insert the notice.
.cmplz-notice-hook-element {
display: none !important;
}
}
// Hide nags from other plugins
.error, .notice, .update-nag, .notice-info {
&:not(.really-simple-plugins) {
display: none !important;
}
&.really-simple-plugins{
margin: var(--rsp-grid-gap);
}
}

View File

@@ -0,0 +1,2 @@
<?php
// Silence is golden.

View File

@@ -0,0 +1,209 @@
.cmplz {
.cmplz-grid, .cmplz-settings-header {
max-width: clamp(300px, calc(100% - var(--rsp-grid-gap) * 2), 1600px);
margin: 0 auto;
}
.cmplz-header-container {
background: var(--rsp-background-block-color);
}
.cmplz-settings-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
min-height: 70px;
box-sizing: border-box;
img {
margin: auto 0;
height: 26px;
}
.cmplz-header-left {
display: flex;
font-size: var(--rsp-fs-400);
@media(max-width: $rsp-break-s) {
justify-content: center;
margin: var(--rsp-spacing-xs) 0;
order: 3;
width: 100%;
background-color: var(--rsp-background-block-color);
}
.cmplz-header-menu {
margin: auto 15px;
ul {
display: flex;
}
li {
margin-bottom: 0;
}
a {
padding: 23px 15px;
text-decoration: none;
color: var(--rsp-text-color);
height: 100%;
border-bottom: 4px solid transparent;
transition: border 0.3s ease-out;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@media(max-width: $rsp-break-s) {
padding: 10px 15px;
}
&:focus {
outline: none;
box-shadow: none;
}
&.active {
border-bottom: 4px solid var(--rsp-brand-primary);
}
&:hover {
color: var(--rsp-brand-primary);
}
}
}
}
.cmplz-header-right {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: auto;
gap: var(--rsp-spacing-s);
min-height: 52px;
}
}
.cmplz-grid.cmplz-dashboard {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.cmplz-grid {
display: grid;
gap: var(--rsp-grid-gap);
grid-template-columns: 28ch 1fr 1fr 1fr;
margin-top: var(--rsp-grid-gap);
}
.cmplz-grid-item {
@include cmplz-block;
transition: all 1s ease;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: column;
flex-basis: 100%;
grid-column: span 1;
grid-row: span 1;
overflow: hidden;
&.cmplz-column-2 {
grid-column: span 2;
}
&.cmplz-row-2 {
grid-row: span 2;
}
&.cmplz-disabled {
min-height: 200px; //add min height on disabled so the settings is visible behind the locked div.
}
&.no-background {
background: none;
border: none;
box-shadow: none;
}
&.cmplz-column-2 {
grid-column: span 2;
}
&.cmplz-row-2 {
grid-row: span 2;
min-height: 400px;
}
&-header {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
min-height: calc(30px + var(--rsp-spacing-s) * 2);
@include cmplz-inline-block-padding;
&:empty {
display: none;
}
}
&-title {
margin: 4px 0 4px 0;
}
&-controls {
font-size: var(--rsp-fs-200);
display: flex;
gap: var(--rsp-spacing-s);
}
&-content {
width: 100%;
box-sizing: border-box;
@include cmplz-inline-block-padding;
flex-grow: 100;
&:empty {
display: none;
}
}
&-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-self: flex-end;
gap: var(--rsp-grid-margin);
width: 100%;
min-height: calc(30px + var(--rsp-spacing-s) * 2);
box-sizing: border-box;
@include cmplz-inline-block-padding;
.cmplz-legend {
display: flex;
line-height: var(--rsp-fs-100);
font-size: var(--rsp-fs-100);
width: max-content;
color: var(--rsp-text-color-light);
align-items: center;
min-width: 0;
gap: var(--rsp-spacing-xxs);
text-decoration: none;
}
&:empty {
display: none;
}
}
.cmplz-flex-push-right {
margin-left: auto;
}
.cmplz-flex-push-left {
margin-right: auto;
}
}
}

View File

@@ -0,0 +1,161 @@
#complianz {
.cmplz-grid.cmplz-banner {
margin-bottom:200px;//ensure that there's some space for the bottom banner, so the save button is visible above it.
}
.cmplz-cookiebanner-preview-controls {
.cmplz-hidden {
display: none;
}
.cmplz-logo-container {
display: flex;
gap: 40px;
}
.cmplz-select-group {
//min 250px or 100%
min-width: max(250px, 100%);
}
margin-left: 10px;
ul {
margin-bottom: 15px;
li {
display: flex;
cursor: pointer;
margin: 5px;
.cmplz-icon {
margin-right: 10px;
}
&.inactive {
text-decoration: underline;
}
&.loading {
color: var(--rsp-grey-400);
}
}
}
}
.cmplz-banner-reset-button {
button.button.button-default {
display: flex;
.cmplz-icon {
margin: auto auto auto 10px;
}
}
}
.cmplz-logo-preview {
&.cmplz-clickable {
cursor: pointer;
max-width: 90px;
height: inherit;
}
&.cmplz-complianz-logo {
padding: 5px;
svg {
height: 90px;
width: 90px;
}
}
margin-top: 10px;
border: 1px black dashed;
display: flex;
align-items: center;
justify-content: center;
float: right;
&.cmplz-clickable {
cursor: pointer;
max-width: 90px;
height: inherit;
}
&.cmplz-complianz-logo {
padding: 5px;
svg {
height: 90px;
width: 90px;
}
}
}
/**
Preview to the right
*/
#cmplz-cookiebanner-container {
.cmplz-cookiebanner.reloading {
//opacity: 0.7;
}
.cmplz-cookiebanner.cmplz-bottom {
margin-right: 20px;
width: calc(100% - 50px);
left:20px;
}
.cmplz-cookiebanner.cmplz-bottom-left, .cmplz-cookiebanner.cmplz-bottom-right {
left: initial;
right: 0;
@media (max-width: 1800px) {
transform: translateX(calc(0.3 * var(--cmplz_banner_width)));
&:hover {
animation: slideBannerIn 1s forwards;
animation-delay: 0s;
}
}
}
.cmplz-cookiebanner.cmplz-center {
right: 0;
left: initial;
transform: initial;
//this causes issues with the fade in center variant
top: initial;
bottom: 50px;
@media (max-width: 1800px) {
transform: translateX(calc(0.3 * var(--cmplz_banner_width)));
&:hover {
animation: slideBannerIn 1s forwards;
animation-delay: 0s;
}
}
}
@-webkit-keyframes slideBannerIn {
100% {
transform: inherit;
}
}
@keyframes slideBannerIn {
100% {
transform: inherit;
}
}
}
}

View File

@@ -0,0 +1,49 @@
#complianz{
// rsssl bullets
.cmplz-bullet {
height: 13px;
width: 13px;
flex: 0 0 13px;
border-radius: 50%;
display: inline-block;
background-color: var(--rsp-grey-300);
&.rsp-yellow {
background-color: var(--rsp-yellow);
}
&.rsp-blue {
background-color: var(--rsp-blue);
}
&.rsp-pink {
background-color: var(--rsp-pink);
}
&.rsp-red, &.cmplz-bullet-error {
background-color: var(--rsp-red);
}
&.rsp-green, &.cmplz-bullet-success {
background-color: var(--rsp-green);
}
&.rsp-blue-yellow {
background: var(--rsp-blue);
background: linear-gradient(77deg, rgba(41, 182, 246, 1) 0%, rgba(41, 182, 246, 1) 30%, rgba(244, 191, 62, 1) 70%, rgba(244, 191, 62, 1) 100%);
animation: gradient 2s ease infinite;
background-size: 200% 200%;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
}

View File

@@ -0,0 +1,48 @@
#complianz {
/* progress bar */
#cmplz-scan-progress, #cmplz-sync-progress {
background-color: #F1F1F1;
border-radius: 5px;
.cmplz-progress-bar, .cmplz-sync-progress-bar {
height: 20px;
background-color: var(--rsp-wp-blue);
transition: width 0.5s;
-webkit-transition: width 0.5s;
font-weight: bold;
border-radius: 5px;
}
}
.cmplz-cookie-scan {
button.button, select {
margin-bottom: 10px;
margin-right: 10px;
}
details summary {
grid-template-columns: 1fr auto auto;
}
}
button.button {
&.cmplz-reset-button {
background-color: var(--rsp-color-error);
border-color: var(--rsp-color-error);
color: white;
}
}
.cmplz-cookiedatabase-controls {
display: flex;
gap: 10px;
margin-bottom: 10px;
.cmplz-checkbox-group {
margin-top:4px;
}
details summary {
grid-template-columns: 1fr auto auto;
}
}
}

View File

@@ -0,0 +1,23 @@
.border-to-border {
.cmplz-grid-item-content {
padding: 0;
& > * {
padding-inline: var(--rsp-spacing-l);
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
}
}
//hide our preloaded settings fields
.cmplz-hidden {
display:none;
}
.cmplz-dashboard{
.cmplz-statistics {
padding: 0 !important;
}
}

View File

@@ -0,0 +1,55 @@
.cmplz-grid-item.cmplz-documents {
h3.cmplz-h4{
margin-top: var(--rsp-spacing-xs);
}
.cmplz-document-header{
margin-top: var(--rsp-spacing-l);
margin-bottom: var(--rsp-spacing-s);
display: flex;
justify-content: space-between;
&> a{
color: var(--rsp-text-color-light);
font-size: var(--rsp-fs-300);
}
}
.cmplz-single-document{
display: grid;
grid-template-columns: 2fr auto auto auto;
grid-gap: var(--rsp-spacing-xs);
margin: 0;
padding: 8px var(--rsp-spacing-l);
align-items: center;
&-title {
flex:1;
}
.cmplz-tooltip-icon {
flex:0;
}
&-generated {
margin-left:auto;
}
}
.cmplz-single-document-other-regions{
display: grid;
grid-template-columns: 2fr auto auto auto auto auto auto auto;
margin: var(--rsp-spacing-xs) 0;
align-items: center;
.cmplz-region-indicator {
margin-left:5px;
}
}
.cmplz-single-document-other-documents {
display: grid;
grid-template-columns: 2fr auto auto;
margin: var(--rsp-spacing-xs) 0;
align-items: center;
.cmplz-tooltip-icon {
margin-left:15px;
}
.cmplz-icon-file-download{
cursor:pointer;
}
}
}

View File

@@ -0,0 +1,186 @@
//.cmplz-tools {
// .cmplz-placeholder {
// @include cmplz-block-padding;
// }
// .cmplz-tools-statistics {
// padding:0;
// display:block;
// }
//
// .cmplz-inactive {
// .cmplz-score-snippet {
// color: var(--rsp-color-disabled)
// }
// .cmplz-main-consent > div {
// background: var(--rsp-grey-300);
// }
// .cmplz-details {
// &:last-of-type {
// opacity: 0.2;
// }
// }
// }
//
// .cmplz-statistics-container {
// background: var(--rsp-green-faded);
// padding: 20px 25px;
//
// @media only screen and (max-width: $rsp-break-xxl) and (min-width: $rsp-break-m) {
// padding: 5px;
// }
// }
//
// .cmplz-main-consent {
// display: flex;
// gap: 15px;
//
// > div {
// flex: 1;
// background-color: #fff;
// @media only screen and (max-width: $rsp-break-xxl) and (min-width: $rsp-break-m) {
// background-color:transparent
// }
// }
//
// &-count {
// text-align: center;
// align-items: center;
// justify-content: center;
// font-size: var(--rsp-fs-700);
// font-weight: 700;
// border-radius: 8px;
// padding:30px;
//
// div {
// font-size: var(--rsp-fs-90);
// font-weight: normal;
// }
// }
// }
//
//
// .cmplz-details {
// padding: var(--rsp-spacing-s) 0;
// display: flex;
// &:nth-child(even) {
// background-color: #fff; /* grey */
// }
//
// &:nth-child(odd) {
// background-color: var(--rsp-grey-200); /* white */
// }
//
// .cmplz-detail {
// display:flex;
// width:100%;
// margin-right: var(--rsp-spacing-l);
// &-name {
//
// }
// &-data {
// margin-left:auto;
// }
// }
// .cmplz-detail-icon {
// width: 30px;
// margin: 0 var(--rsp-spacing-l);
// .cmplz-icon {
// margin-top: 2px;
// }
// }
// }
//}
.cmplz-tools .cmplz-statistics{
padding-inline: var(--rsp-spacing-l);
}
.cmplz-statistics {
&-select {
padding-inline: var(--rsp-spacing-l);
padding-block: var(--rsp-spacing-m);
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
gap: var(--rsp-spacing-s);
background: var(--rsp-green-faded);
&-item {
border-radius: var(--rsp-border-radius-input);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding-block: var(--rsp-spacing-s);
justify-items: center;
flex-wrap: wrap;
background: var(--rsp-white);
&.active {
box-shadow: inset 0 0 3px 2px var(--rsp-green-faded);
border: 2px solid var(--rsp-green);
}
h2 {
margin-top: var(--rsp-spacing-xxs);
font-weight: 800;
}
span {
display: flex;
gap: 3px;
justify-content: center;
font-size: var(--rsp-fs-100);
.burst-icon-live {
animation-name: pulse;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.2;
}
100% {
transform: scale(1.0);
opacity: 1;
}
}
}
}
}
}
&-list {
width: 100%;
&-item {
width: 100%;
display: grid;
justify-items: flex-start;
grid-template-columns: auto 1fr auto;
gap: var(--rsp-spacing-s);
padding-block: var(--rsp-spacing-xs);
padding-inline: var(--rsp-spacing-l);
&:nth-of-type(even) {
background: var(--rsp-grey-200);
}
&-text {
width: 100%;
margin-right: auto;
}
&-number {
font-weight: 600;
}
}
}
}

View File

@@ -0,0 +1,28 @@
.cmplz-tools {
.cmplz-grid-item-content {
.cmplz-tool {
display: flex;
padding: 8px var(--rsp-spacing-l);
&:nth-child(odd) {
background-color: var(--rsp-grey-200)
}
.cmplz-plusone {
margin-left: 10px;
}
&-link {
margin-left: auto;
a {
display: flex;
.cmplz-icon {
margin-left: 10px;
}
}
}
}
}
}

View File

@@ -0,0 +1,122 @@
.cmplz-datatable-search {
margin-top: 10px;
}
.cmplz-no-documents {
padding: 20px;
}
.cmplz-processing-agreements, .cmplz-data-breach-reports, .cmplz-records-of-consent, .cmplz-proof-of-consent, .cmplz-datarequests {
.rdt_TableHeadRow, .rdt_TableRow {
.rdt_TableCell {
line-height:unset;
}
input[type="checkbox"] {
margin-left: 10px;
//prevent cutoff of checkbox because of overflow hidden
height: 14px;
width: 14px;
min-width: initial;
&:checked::before {
margin: -0.25rem 0 0 -0.33rem;
}
}
}
.rdt_TableCol, .rdt_TableCell {
&:first-child {
width: 35px;
min-width: 35px !important;
}
}
}
.cmplz-field-wrap {
.rdt_TableRow {
&:nth-child(odd) {
background-color: var(--rsp-grey-200)
}
padding: var(--rsp-spacing-xs) 0;
}
.cmplz-csp-revoked > div:nth-child(-n+3) {
opacity: 0.3;
}
}
.cmplz-field-wrap {
.rdt_TableCol, .rdt_TableCell {
min-width: 50px;
}
.rdt_TableHeadRow {
//.rdt_TableCol:last-child {
// flex-grow: 1;
// flex-direction: row-reverse;
// //margin-right: 20px;
//}
}
.rdt_TableRow {
&:nth-child(odd) {
background-color: var(--rsp-grey-200)
}
padding: var(--rsp-spacing-xs) 0;
.cmplz-status-allowed, .cmplz-status-revoked {
min-width: 110px;
margin-right: 20px;
}
}
.cmplz-csp-revoked > div:nth-child(-n+3) {
opacity: 0.3;
}
}
//wp-core also adds an svg for the select dropdown, so we hide the one from the react datatables component
nav.rdt_Pagination > div > svg {
display: none !important;
}
.cmplz-field-wrap {
&.cmplz-integrations-services,
&.cmplz-integrations-plugins,
&.cmplz-datarequests,
&.cmplz-processing-agreements,
&.cmplz-data-breach-reports,
&.cmplz-records-of-consent,
&.cmplz-proof-of-consent {
gap: 0 !important;
margin-left: CALC(-1 * var(--rsp-spacing-l));
margin-right: CALC(-1 * var(--rsp-spacing-l));
@media(max-width: $rsp-break-m) { // 1280px
margin-left: CALC(-1 * var(--rsp-spacing-m));
margin-right: CALC(-1 * var(--rsp-spacing-m));
}
@media(max-width: $rsp-break-s) { // 1280px
margin-left: CALC(-1 * var(--rsp-spacing-s));
margin-right: CALC(-1 * var(--rsp-spacing-s));
}
//should be s on <1280px
> p,
> div.cmplz-table-header {
margin: var(--rsp-spacing-xs) var(--rsp-spacing-l);
}
}
.rdt_TableCell, .rdt_TableCol {
&:first-child {
padding-left: var(--rsp-spacing-l);
}
&:last-child {
padding-right: var(--rsp-spacing-l);
}
}
}

View File

@@ -0,0 +1,615 @@
//ensure the datepicker hovers over the wp menu.
#wpwrap .MuiPopover-root {
z-index:999999;
}
#cmplz-date-range-picker-container {
flex: 1 1 auto;
flex-wrap: wrap;
gap: var(--rsp-spacing-xs);
background-color: var(--rsp-background-block-color);
box-shadow: var(--rsp-box-shadow);
z-index: 1;
border-radius: var(--rsp-border-radius-input);
&.cmplz-date-range-picker-open {
display: flex;
}
}
#cmplz-date-range-picker-open-button{
display: flex;
align-items: center;
padding: var(--rsp-filter-padding);
box-shadow: var(--rsp-box-shadow);
cursor: pointer;
gap: var(--rsp-spacing-xs);
color: var(--rsp-text-color);
background-color: var(--rsp-input-background-color);
background: var(--rsp-grey-200);
border: 1px solid var(--rsp-input-border-color);
border-radius: var(--rsp-border-radius-input);
.cmplz-icon{
height: max-content;
}
}
.rdrCalendarWrapper{
color: #000000;
font-size: var(--rsp-fs-400);
}
.rdrDateDisplayWrapper{
background-color: var(--rsp-green-faded);
}
.rdrDateDisplay{
margin: 0.833em;
}
.rdrDateDisplayItem{
border-radius: 4px;
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
border: 1px solid transparent;
input{
cursor: pointer;
height: 2.5em;
line-height: 2.5em;
border: 0;
background: transparent;
width: 100%;
color: #849095;
}
}
.rdrDateDisplayItemActive{
border-color: currentColor;
}
.rdrDateDisplayItemActive{
input{
color: #7d888d
}
}
.rdrMonthAndYearWrapper {
align-items: center;
height: 60px;
padding-top: var(--rsp-spacing-xxs);
}
.rdrMonthAndYearPickers{
font-weight: 600;
select{
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
border-radius: 4px;
outline: 0;
color: #3e484f;
background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
background-position: right 8px center;
cursor: pointer;
text-align: center;
&:hover{
background-color: rgba(0,0,0,0.07);
}
}
}
.rdrMonthPicker, .rdrYearPicker{
margin: 0 5px
}
.rdrNextPrevButton {
display: block;
width: 24px;
height: 24px;
margin: 0 0.833em;
padding: 0;
border: 0;
border-radius: 5px;
background: #EFF2F7;
&:hover{
background: #E1E7F0;
}
i {
display: block;
width: 0;
height: 0;
padding: 0;
text-align: center;
border-style: solid;
margin: auto;
transform: translate(-3px, 0);
}
}
.rdrPprevButton {
i {
border-width: 4px 6px 4px 4px;
border-color: transparent rgb(52, 73, 94) transparent transparent;
transform: translate(-3px, 0);
}
}
.rdrNextButton {
i {
margin: 0 0 0 7px;
border-width: 4px 4px 4px 6px;
border-color: transparent transparent transparent rgb(52, 73, 94);
transform: translate(3px, 0);
}
}
.rdrWeekDays {
padding: 0 0.833em;
}
.rdrMonth{
padding: 0 0.833em 1.666em 0.833em;
.rdrWeekDays {
padding: 0;
}
}
.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
display: none;
}
.rdrWeekDay {
font-weight: 400;
line-height: 2.667em;
color: rgb(132, 144, 149);
}
.rdrDay {
background: transparent;
user-select: none;
border: 0;
padding: 0;
aspect-ratio: 1.2 / 1;
//line-height: 3.000em;
//height: 3.000em;
text-align: center;
color: var(--rsp-text-color);
&:focus {
outline: 0;
}
}
.rdrDayNumber {
outline: 0;
font-weight: 300;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.rdrDayToday .rdrDayNumber span{
font-weight: 500;
&:after{
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translate(-50%, 0);
width: 4px;
height: 4px;
border-radius: 100%;
background: var(--rsp-green);
}
}
.rdrDayToday:not(.rdrDayPassive) {
.rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
& ~ .rdrDayNumber span:after{
background: #fff;
}
}
}
.rdrDay:not(.rdrDayPassive){
.rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
& ~ .rdrDayNumber{
span{
color: rgba(255, 255, 255, 0.85);
}
}
}
}
.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
background: currentColor;
position: absolute;
top: 5px;
left: 0;
right: 0;
bottom: 5px;
}
.rdrSelected{
left: 2px;
right: 2px;
}
.rdrInRange{}
.rdrStartEdge{
border-top-left-radius: var(--rsp-border-radius-input);
border-bottom-left-radius: var(--rsp-border-radius-input);
left: 2px;
}
.rdrEndEdge{
border-top-right-radius: var(--rsp-border-radius-input);
border-bottom-right-radius: var(--rsp-border-radius-input);
right: 2px;
}
.rdrSelected{
border-radius: var(--rsp-border-radius-input);
}
.rdrDayStartOfMonth, .rdrDayStartOfWeek{
.rdrInRange, .rdrEndEdge{
border-top-left-radius: var(--rsp-border-radius-input);
border-bottom-left-radius: var(--rsp-border-radius-input);
left: 2px;
}
}
.rdrDayEndOfMonth, .rdrDayEndOfWeek{
.rdrInRange, .rdrStartEdge{
border-top-right-radius: var(--rsp-border-radius-input);
border-bottom-right-radius: var(--rsp-border-radius-input);
right: 2px;
}
}
.rdrDayStartOfMonth, .rdrDayStartOfWeek{
.rdrDayInPreview, .rdrDayEndPreview{
border-top-left-radius: var(--rsp-border-radius-input);
border-bottom-left-radius: var(--rsp-border-radius-input);
border-left-width: 2px;
left: 0;
}
}
.rdrDayEndOfMonth, .rdrDayEndOfWeek{
.rdrDayInPreview, .rdrDayStartPreview{
border-top-right-radius: var(--rsp-border-radius-input);
border-bottom-right-radius: var(--rsp-border-radius-input);
border-right-width: 2px;
right: 0;
}
}
.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
background: rgba(255, 255, 255, 0.09);
position: absolute;
top: 3px;
left: 0;
right: 0;
bottom: 3px;
pointer-events: none;
border: 0 solid currentColor;
z-index: 1;
}
.rdrDayStartPreview{
border-top-width: 2px;
border-left-width: 2px;
border-bottom-width: 2px;
border-top-left-radius: var(--rsp-border-radius-input);
border-bottom-left-radius: var(--rsp-border-radius-input);
left: 0;
}
.rdrDayInPreview{
border-top-width: 2px;
border-bottom-width: 2px;
}
.rdrDayEndPreview{
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-top-right-radius: var(--rsp-border-radius-input);
border-bottom-right-radius: var(--rsp-border-radius-input);
right: 0;
}
.rdrDefinedRangesWrapper{
font-size: 12px;
min-width: 160px;
width: max-content;
border-right: solid 1px #eff2f7;
background: #fff;
.rdrStaticRangeSelected{
color: currentColor;
font-weight: 600;
}
}
.rdrStaticRange{
border: 0;
cursor: pointer;
display: block;
outline: 0;
border-bottom: 1px solid #eff2f7;
padding: 0;
background: #fff;
&:hover, &:focus{
.rdrStaticRangeLabel{
background: #eff2f7;
}
}
}
.rdrStaticRangeLabel{
overflow: hidden;
display: block;
outline: 0;
line-height: 18px;
padding: 10px 20px;
text-align: left;
font-weight: 300;
}
.rdrInputRanges{
padding: 10px 0;
}
.rdrInputRange{
align-items: center;
padding: 5px 20px;
}
.rdrInputRangeInput{
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 4px;
text-align: center;
border: solid 1px rgb(222, 231, 235);
margin-right: 10px;
color: rgb(108, 118, 122);
&:focus, &:hover{
border-color: rgb(180, 191, 196);
outline: 0;
color: #333;
}
}
.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
content: '';
border: 1px solid currentColor;
border-radius: 1.333em;
position: absolute;
top: -2px;
bottom: -2px;
left: 0;
right: 0;
background: transparent;
}
.rdrDayPassive{
pointer-events: none;
.rdrDayNumber span{
color: #d5dce0;
}
.rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
display: none;
}
}
.rdrDayDisabled {
background-color: rgb(248, 248, 248);
.rdrDayNumber span{
color: #aeb9bf;
}
.rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
filter: grayscale(100%) opacity(60%);
}
}
.rdrMonthName{
text-align: left;
font-weight: 600;
color: #849095;
padding: var(--rsp-spacing-xxs);
}
// Calendar
.rdrCalendarWrapper {
box-sizing: border-box;
background: #ffffff;
display: inline-flex;
flex-direction: column;
user-select: none;
}
.rdrDateDisplay{
display: flex;
justify-content: space-between;
}
.rdrDateDisplayItem{
flex: 1 1;
width: 0;
text-align: center;
color: inherit;
& + &{
margin-left: 0.833em;
}
input{
color: var(--rsp-text-color);
text-align: inherit;
&:disabled{
cursor: default;
}
}
}
.rdrDateDisplayItemActive{}
.rdrMonthAndYearWrapper {
box-sizing: inherit;
display: flex;
justify-content: space-between;
}
.rdrMonthAndYearPickers{
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
}
.rdrMonthPicker{}
.rdrYearPicker{}
.rdrNextPrevButton {
box-sizing: inherit;
cursor: pointer;
outline: none;
}
.rdrPprevButton {}
.rdrNextButton {}
.rdrMonths{
display: flex;
}
.rdrMonthsVertical{
flex-direction: column;
}
.rdrMonthsHorizontal > div > div > div{
display: flex;
flex-direction: row;
}
.rdrMonth{
width: 300px;
}
.rdrWeekDays{
display: flex;
}
.rdrWeekDay {
flex-basis: calc(100% / 7);
box-sizing: inherit;
text-align: center;
}
.rdrDays{
display: flex;
flex-wrap: wrap;
}
.rdrDateDisplayWrapper{}
.rdrMonthName{}
.rdrInfiniteMonths{
overflow: auto;
}
// DateRangePicker
.rdrDateRangeWrapper{
user-select: none;
}
// DateInput
.rdrDateInput {
position: relative;
input {
outline: none;
}
.rdrWarning {
position: absolute;
font-size: 1.6em;
line-height: 1.6em;
top: 0;
right: .25em;
color: #FF0000;
}
}
// DayCell
.rdrDay {
box-sizing: inherit;
width: calc(100% / 7);
position: relative;
font: inherit;
cursor: pointer;
}
.rdrDayNumber {
display: block;
position: relative;
span{
color: #1d2429;
}
}
.rdrDayDisabled {
cursor: not-allowed;
}
@supports (-ms-ime-align: auto) {
.rdrDay {
flex-basis: 14.285% !important;
}
}
.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
pointer-events: none;
}
.rdrInRange{}
.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
pointer-events: none;
}
.rdrDayHovered{}
.rdrDayActive{}
// DateRangePicker
.rdrDateRangePickerWrapper{
display: inline-flex;
user-select: none;
}
// DefinedRange
.rdrDefinedRangesWrapper{}
.rdrStaticRanges{
display: flex;
flex-direction: column;
}
.rdrStaticRange{
font-size: inherit;
}
.rdrStaticRangeLabel{}
.rdrInputRanges{}
.rdrInputRange{
display: flex;
}

View File

@@ -0,0 +1,35 @@
.cmplz-selected-document{
margin-top:10px;
margin-bottom:10px;
display:flex;
background-color:var(--rsp-blue-faded);
padding:10px;
align-items: center;
&-controls{
margin-left:auto;
display:flex;
}
button.button + button.button {
margin-left:20px;
}
}
.cmplz-create-processing-agreements, .cmplz-create-data-breach-reports {
.cmplz-table-header {
align-items:baseline;
}
.components-select-control {
flex-direction:row;
}
scroll-margin-top: 150px;
}
.cmplz-conclusion {
&__check {
display:flex;
.cmplz-icon{
margin-right:10px;
}
}
}

View File

@@ -0,0 +1,3 @@
.cmplz-error-boundary{
padding: var(--rsp-spacing-l);
}

View File

@@ -0,0 +1,53 @@
//#complianz {
// .cmplz-header-container .cmplz-settings-header {
// display: flex;
// justify-content: space-between;
// height: 70px;
// box-sizing: border-box;
//
// img {
// margin: auto 0;
// height: 26px;
// }
//
// .cmplz-header-menu {
// display: flex;
// align-items: center;
// height: 100%;
// padding: 0 20px;
// box-sizing: border-box;
//
// .cmplz-header-menu-item {
// display: flex;
// align-items: center;
// height: 100%;
// padding: 0 20px;
// box-sizing: border-box;
//
// &:first-child {
// margin-left: 0;
// }
//
// &:last-child {
// margin-right: 0;
// }
//
// &.cmplz-header-menu-item-active {
// background-color: #f5f5f5;
// }
// }
// }
//
// .cmplz-header-actions {
// display: flex;
// align-items: center;
// margin-left: auto;
// gap: var(--rsp-spacing-s);
//
// select {
// max-width: 60ch;
// }
// }
//
// }
//}

View File

@@ -0,0 +1,33 @@
.cmplz-icon{
display: flex;
align-items: center;
justify-content: center;
svg{
fill: currentColor;
}
&-loading svg{
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
&.cmplz-click-animation{
animation: beat 0.4s ease-out;
}
}
.cmplz-icon-shortcode{
cursor:pointer;
}
//loaders in buttons
button.button .cmplz-icon.cmplz-icon-loading {
padding-top: 6px;
>div {line-height: inherit;}
}

View File

@@ -0,0 +1,114 @@
.cmplz{
.cmplz {
&-border-input {
display: grid;
grid-template-columns: repeat(4, min-content) 3rem;
grid-template-rows: auto auto;
grid-template-areas:
"input1 input2 input3 input4 button" /* first row */
"label1 label2 label3 label4 ."; /* second row */
row-gap: var(--rsp-spacing-xxs);
}
&-border-input {
input {
width: 8ch;
border: 1px solid var(--rsp-input-border-color);
margin-right: -1px;
border-radius: 0;
}
&-side {
&:nth-child(1) {
grid-area: input1;
border-radius: var(--rsp-border-radius-xs) 0 0 var(--rsp-border-radius-xs);
}
&:nth-child(3) {
grid-area: input2;
}
&:nth-child(5) {
grid-area: input3;
}
&:nth-child(7) {
grid-area: input4;
}
}
&-link {
background-color: var(--rsp-white);
grid-area: button;
border: 1px solid var(--rsp-input-border-color);
border-radius: 0 var(--rsp-border-radius-xs) var(--rsp-border-radius-xs) 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
svg path {
fill: var(--rsp-text-color-light);
}
&.linked {
background-color: var(--rsp-blue-faded);
}
}
&-side-label {
color: var(--rsp-text-color-light);
font-size: var(--rsp-fs-100);
text-align: center;
&:nth-child(2) {
grid-area: label1;
}
&:nth-child(4) {
grid-area: label2;
}
&:nth-child(6) {
grid-area: label3;
}
&:nth-child(8) {
grid-area: label4;
}
}
&-unit{
font-size: var(--rsp-fs-100);
color: var(--rsp-text-color-light);
text-align: center;
display: flex;
justify-content: center;
align-content: center;
select{
// unset all except for background
background:
#fff
url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E)
no-repeat
right 0px
top 55%;
font-size: var(--rsp-fs-100);
line-height: 1.5;
color: var(--rsp-text-color-light);
border-color: unset;
border: unset;
box-shadow: none;
border-radius: unset;
padding: 0 16px 0 0;
min-height: var(--rsp-fs-100);
max-width: 25rem;
-webkit-appearance: none;
background-size: 16px 16px;
cursor: pointer;
vertical-align: middle;
}
}
}
}
}

View File

@@ -0,0 +1,119 @@
/* reset */
button {
all: unset;
}
/* Global Variables */
:root {
--button-font-size: var(--rsp-fs-300);
--button-font-weight: 300;
--button-line-height: 2;
--button-letter-spacing: 0.5px;
--button-transition: all 0.3s ease;
--button-min-height: 30px;
--button-padding: 0 10px;
--button-border-radius: 4px;
--button-accent-color: #2271b1;
--button-contrast-color: #000;
--button-secondary-bg: #fff;
}
/* Button Base Styles */
a.button, button.button, input.button {
transition: var(--button-transition);
margin: 0;
padding: var(--button-padding);
border-radius: var(--button-border-radius);
text-align: center;
cursor: pointer;
text-decoration: none;
&--primary {
background: var(--button-accent-color);
color: var(--button-secondary-bg);
border: 1px solid var(--button-accent-color);
&:hover {
background: var(--button-accent-color);
color: var(--button-secondary-bg);
border-color: var(--button-accent-color);
box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.3);
}
}
&--secondary {
background: var(--button-secondary-bg);
color: var(--button-accent-color);
border: 1px solid var(--button-accent-color);
&:hover {
background: var(--rsp-grey-200);
color: var(--button-accent-color);
border-color: var(--button-accent-color);
}
}
&--tertiary {
background: var(--rsp-grey-200);
color: var(--button-accent-color);
border: 1px solid var(--rsp-grey-300);
&:hover {
background: var(--rsp-grey-100);
color: var(--button-accent-color);
border-color: var(--rsp-grey-400);
}
}
&--error {
// red button
background: var(--rsp-red);
color: var(--rsp-text-color-white);
border: 1px solid var(--rsp-red);
&:hover {
background: var(--rsp-red-faded);
color: var(--rsp-red);
border-color: var(--rsp-red);
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3);
}
}
}
.cmplz-field-wrap {
.cmplz-button{
margin-left: auto;
}
}
.cmplz-button-icon {
background: transparent;
background: var(--rsp-grey-300);
color: #2271b1;
border: 1px solid transparent;
border-radius: 50%;
width: 1em;
height: 1em;
padding: 10px;
margin: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
.cmplz-tooltip-icon {
padding-top:3px;
}
&:hover {
padding: 15px;
margin: 0;
}
&--delete{
&:hover{
background: var(--rsp-red-faded);
svg path{
fill: var(--rsp-red);
}
}
}
}

View File

@@ -0,0 +1,64 @@
.cmplz {
.cmplz-checkbox-group {
display: flex;
flex-direction: column;
gap: var(--rsp-spacing-xs);
&__item {
display: flex;
gap: var(--rsp-spacing-xs);
background-color: transparent;
align-items: flex-start;
.cmplz-icon-check {
margin-top:5px;
}
&.cmplz-hidden {
display: none;
}
}
&__checkbox {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 3px;
width: 16px;
height: 16px;
aspect-ratio: 1 / 1;
outline: 1px solid var(--rsp-input-border-color);
transition: background-color 0.2s ease-in-out;
margin-top: 2px;
&:hover {
background-color: var(--rsp-blue-faded);
}
&:focus {
box-shadow: 0 0 0 3px var(--rsp-background-color), 0 0 0 5px var(--rsp-dark-blue);
}
&:disabled {
background-color: var(--rsp-grey-300);
cursor: not-allowed;
& + label {
cursor: not-allowed;
}
}
}
&__label {
font-size: var(--rsp-fs-300);
color: var(--rsp-text-color-light);
margin: 0 !important;
}
.cmplz-button{
margin-right: auto;
margin-left: 0;
}
}
.rdt_Table .cmplz-checkbox-group__item{
padding: 5px;
}
}

View File

@@ -0,0 +1,31 @@
.cmplz {
&-input-group {
display: flex;
flex-direction: column;
gap: var(--rsp-spacing-xs);
}
//we don't want the border radius of radio buttons to change.
input:not([type="radio"]) {
border-radius: var(--rsp-border-radius-xs);
}
input {
//all: unset;
border: 1px solid var(--rsp-input-border-color);
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
font-size: var(--rsp-fs-300);
line-height: 1.5;
color: var(--rsp-text-color-light);
background-color: var(--rsp-white);
outline: none;
&:focus {
border-color: var(--rsp-dark-blue);
box-shadow: 0 0 0 2px var(--rsp-dark-blue);
}
&:disabled {
background-color: var(--rsp-grey-200);
color: var(--rsp-grey-400);
}
}
}

View File

@@ -0,0 +1,9 @@
.cmplz-password-input-group {
position:relative;
.cmplz-icon {
position: absolute;
right: 15px;
top: 8px;
cursor: pointer;
}
}

View File

@@ -0,0 +1,55 @@
.cmplz {
.cmplz {
&-radio-group {
&__item {
display: flex;
gap: var(--rsp-spacing-xs);
background-color: transparent;
align-items: center;
button {
all: unset;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 16px;
height: 16px;
aspect-ratio: 1 / 1;
border: 1px solid var(--rsp-input-border-color);
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: var(--rsp-blue-faded);
}
&:focus {
box-shadow: 0 0 0 3px var(--rsp-background-color), 0 0 0 5px var(--rsp-dark-blue);
}
&:disabled {
background-color: var(--rsp-grey-300);
cursor: not-allowed;
& + label {
cursor: not-allowed;
}
}
}
}
&__indicator {
background: var(--rsp-dark-blue);
width: 10px;
height: 10px;
aspect-ratio: 1 / 1;
border-radius: 50%;
}
}
&-radio-label {
font-size: var(--rsp-fs-300);
color: var(--rsp-text-color-light);
}
}
}

View File

@@ -0,0 +1,89 @@
.cmplz {
.cmplz {
&-select-group {
.cmplz-icon > div {
margin-top: 2px;
margin-bottom: -2px;
}
&__trigger {
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
font-size: var(--rsp-fs-300);
color: var(--rsp-text-color-light);
line-height: 1.5;
background-color: var(--rsp-white);
border-radius: var(--rsp-border-radius-xs);
border: 1px solid var(--rsp-input-border-color);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--rsp-spacing-xxs);
&:hover:not([disabled]) {
background-color: var(--rsp-blue-faded);
}
&:focus {
box-shadow: 0 0 0 2px var(--rsp-dark-blue);
}
&[data-placeholder] {
color: var(--rsp-grey-400);
}
&[disabled] {
background-color: var(--rsp-grey-200);
color: var(--rsp-grey-400);
}
}
&__content {
width: var(--radix-select-trigger-width);
max-height: calc(var(--radix-select-content-available-height) - 32px - var(--rsp-spacing-s));
overflow: hidden;
background-color: var(--rsp-white);
border-radius: 0 0 var(--rsp-border-radius-xs) var(--rsp-border-radius-xs);
border: 1px solid var(--rsp-input-border-color);
border-top: none;
box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
z-index: 14; //should be above 12, which is the footer, and above 10, which is the text editor.
}
&__viewport {
}
&__item {
line-height: 1;
padding: var(--rsp-spacing-xs) var(--rsp-spacing-xs);
font-size: var(--rsp-fs-300);
color: var(--rsp-text-color-light);
display: flex;
align-items: center;
position: relative;
user-select: none;
&[data-disabled] {
background: var(--rsp-grey-300);
color: var(--rsp-grey-500);
pointer-events: none;
cursor: not-allowed;
}
&[data-highlighted] {
outline: none;
background-color: var(--rsp-blue-faded);
color: var(--rsp-text-color);
}
}
&__scroll-button {
display: flex;
align-items: center;
justify-content: center;
height: 25px;
background-color: white;
cursor: default;
}
}
}
}

View File

@@ -0,0 +1,68 @@
/* reset */
button {
all: unset;
}
.cmplz-field-wrap.cmplz-checkbox .cmplz-comment{
width: 100%;
}
.cmplz-input-group.cmplz-switch-group{
display: flex;
align-items: center;
flex-direction: row;
}
.cmplz-switch-root {
width: 42px;
height: 25px;
background-color: var(--rsp-blue-faded);
border-radius: 9999px;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
margin: 5px;
border: 1px solid #a4b1d2;
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.cmplz-switch-root:focus {
box-shadow: 0 0 0 3px var(--rsp-white), 0 0 0 5px var(--rsp-dark-blue);
}
.cmplz-switch-root[data-state='checked'] {
background-color: var(--rsp-dark-blue);
}
.cmplz-switch-thumb {
display: block;
width: 21px;
height: 21px;
background-color: var(--rsp-white);
border-radius: 9999px;
box-shadow: 0 2px 2px var(--rsp-dark-blue);
transition: transform 100ms;
transform: translateX(2px);
will-change: transform;
}
.cmplz-switch-thumb[data-state='checked'] {
transform: translateX(19px);
}
// tiny switch
.cmplz-switch-root.cmplz-switch-input-tiny{
width: 35px;
height: 20px;
margin: 3px;
.cmplz-switch-thumb {
width: 15px;
height: 15px;
box-shadow: 0 1px 1px var(--rsp-dark-blue);
transform: translateX(2px) translateY(-1px);
&[data-state='checked'] {
transform: translateX(16px) translateY(-1px)
}
}
&:focus{
box-shadow: 0 0 0 1px var(--rsp-white), 0 0 0 2px var(--rsp-dark-blue);
}
}

View File

@@ -0,0 +1,27 @@
.cmplz-text-area-input-group {
position: relative;
&__input {
width: 100%;
min-height: 50px;
resize: none;
padding: 8px;
font-size: var(--rsp-fs-300);
color: var(--rsp-text-color-light);
border: 1px solid var(--rsp-input-border-color);
border-radius: 4px;
outline: none;
transition: border-color 0.2s ease-in-out;
overflow: hidden;
&:focus {
border-color: var(--rsp-dark-blue);
box-shadow: 0 0 0 2px var(--rsp-dark-blue);
}
&:disabled {
background-color: var(--rsp-grey-200);
color: var(--rsp-grey-400);
}
}
}

View File

@@ -0,0 +1,6 @@
.cmplz-text-checkbox-input{
display: grid;
grid-template-columns: 1fr auto;
gap: var(--rsp-spacing-xs);
align-content: center;
}

View File

@@ -0,0 +1,47 @@
.cmplz-integrations-placeholder {
height:150px;
div {
background-color:var(--rsp-grey-200);
margin:10px 0;
height:30px;
}
}
.cmplz-table-header {
display:flex;
}
//needs to be outside table header, so we can use the table-header controls class without the parent
.cmplz-table-header-controls {
display:flex;
margin-left:auto;
gap:20px;
select {
height: 20px;
margin-top: 10px;
}
}
.cmplz-settings-overlay {
z-index:99;
display: grid;
grid-template-columns: 680px auto;
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
.cmplz-settings-overlay-message{
position:absolute;
width: calc(100% - 70px);
bottom: 0;
background-color: #fff;
padding: 15px;
margin:20px;
box-shadow: var(--rsp-box-shadow);
}
}
@media screen and (max-width: 960px) {
.cmplz-settings-overlay {
right: 0;
}
}

View File

@@ -0,0 +1,89 @@
.cmplz-modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: grey;
opacity: 0.45;
width: 100%;
height: 100%;
z-index: 15;
}
.cmplz-modal {
max-width: 526px;
min-width:526px;
position: fixed;
z-index: 20;
border-radius: 12px;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 25px;
.cmplz-modal-header {
background-color: white;
padding: 20px 20px 10px 20px;
justify-content: space-between;
align-items: center;
border-radius: 12px;
.cmplz-modal-header-branding {
display:flex;
.cmplz-header-logo {
width:100%;
}
}
.modal-title {
font-size: 20px;
margin: 0;
background-color: white;
}
.cmplz-modal-close {
cursor: pointer;
background: none;
border: none;
font-size: 1.5em;
font-weight: 700;
}
button {
img {
height: 16px;
width: 16px;
}
}
}
.cmplz-modal-content {
position: relative;
padding: 10px 20px 10px 20px;
font-size: 12px;
.cmplz-modal-subtitle {
font-weight: 600;
font-size: 15px;
margin-bottom: 10px;
}
.cmplz-modal-description {
overflow-wrap: anywhere;
margin-top: 0;
font-weight: 500;
}
}
.cmplz-modal-footer {
background: var(--rsp-grey-100);
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
bottom: 0;
box-shadow: var(--rsp-box-shadow);
border-radius: 0 0 var(--rsp-border-radius) var(--rsp-border-radius);
border-top: 1px solid var(--rsp-grey-300);
box-sizing: border-box;
display: grid;
grid-template-columns: auto auto auto 1fr;
align-items: center;
gap: var(--rsp-grid-margin);
width: 100%;
min-height: 20px;
}
}

View File

@@ -0,0 +1,35 @@
#complianz{
.cmplz-new-features-block{
.cmplz-grid-item-content{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.cmplz-new-features{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--rsp-spacing-xs);
@media only screen and (max-width: $rsp-break-xxl) and (min-width: $rsp-break-m) {
gap: var(--rsp-spacing-xxs);
}
}
.cmplz-new-feature{
width: 100%;
color: var(--rsp-text-color-light);
display: flex;
align-items: flex-start;
min-width: 0;
gap: var(--rsp-spacing-xs);
text-decoration: none;
.cmplz-icon{
margin-top: 2px;
}
.cmplz-new-feature-desc {
p {
font-size:var(--rsp-fs-300);
}
}
}
}

View File

@@ -0,0 +1,34 @@
#complianz .cmplz-modal.cmplz-onboarding {
.cmplz-header-logo {
height: 26px;
}
.cmplz-modal-content{
padding-top: var(--rsp-spacing-xs);
line-height: 2.2;
&.cmplz-processing {
opacity:0.5;
}
.cmplz-onboarding-item {
display:flex;
align-items:flex-start;
.cmplz-icon{
margin-top:3px;
margin-right:7px;
}
a {
margin-top:-2px;
}
}
input[type="email"]{
width: 100%;
margin-bottom: var(--rsp-spacing-m);
border: 2px solid;
height: 50px;
border-color: var(--rsp-grey-300);
&.cmplz-invalid {
background-color:var(--rsp-red-faded);
}
}
}
}

View File

@@ -0,0 +1,93 @@
#complianz {
.cmplz-other-plugins {
.cmplz-placeholder {
background-color:transparent;
}
.rsp-logo img {
height: 20px;
}
}
.cmplz-other-plugins-container {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 10px;
font-size: var(--rsp-fs-300);
line-height: 1.7;
gap: var(--rsp-spacing-xxs);
@media screen and (max-width: 992px) {
flex-direction: row;
overflow: hidden;
}
.cmplz-other-plugins-element {
width: 100%;
display: flex;
align-content: space-between;
justify-content: space-between;
gap: 10px;
--rsp-other-plugins-color: var(---rsp-brand-primary);
&.cmplz-zip-recipes {
--rsp-other-plugins-color: var(--rsp-pink);
}
&.cmplz-burst-statistics {
--rsp-other-plugins-color: var(--rsp-green);
}
&.cmplz-complianz-gdpr {
--rsp-other-plugins-color: var(--rsp-blue);
}
&.cmplz-complianz-terms-conditions {
--rsp-other-plugins-color: var(--rsp-black);
}
&.cmplz-really-simple-ssl {
--rsp-other-plugins-color: var(--rsp-yellow);
}
a {
width: max-content;
color: var(--rsp-text-color-light);
transition: color 0.3s ease;
display: flex;
align-items: center;
min-width: 0;
gap: var(--rsp-spacing-xs);
text-decoration: none;
&:hover {
color: var(--rsp-other-plugins-color);
text-decoration: underline;
.cmplz-bullet {
background-color: var(--rsp-other-plugins-color);
}
.cmplz-other-plugins-content {
text-decoration: underline;
}
}
}
.cmplz-bullet {
transition: background-color 0.3s ease;
background-color: var(--rsp-other-plugins-color);
}
.cmplz-other-plugins-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmplz-other-plugin-status {
min-width: fit-content;
}
}
}
}

View File

@@ -0,0 +1,115 @@
@function randomNum($min, $max) {
$rand: random();
$randomNum: $min + floor($rand * (($max - $min) + 1));
@return $randomNum;
}
$base-color: #ddd;
$shine-color: #e8e8e8;
$animation-duration: 1.6s;
@mixin background-gradient {
background-image: linear-gradient(90deg, $base-color 0, $shine-color 40px, $base-color 80px);
background-size: 600px;
}
.cmplz-placeholder {
box-sizing: border-box;
width: 100%;
text-align: left;
margin: 0;
padding-bottom: 24px;
color: #1e1e1e;
-webkit-font-smoothing: subpixel-antialiased;
border-radius: 2px;
background-color: #fff;
flex-grow: 100;
.cmplz-placeholder-line {
float: left;
width: 100%;
height: 16px;
margin-top: 12px;
border-radius: 7px;
&:last-of-type {
margin-bottom: 24px;
}
@include background-gradient;
animation: shine-lines $animation-duration infinite linear;
@for $i from 1 through 20 {
&:nth-of-type( #{$i} ) {
width: ( random(40) + 60 ) * 1%;
}
}
}
.cmplz-placeholder-line ~ .cmplz-placeholder-line {
background-color: #ddd;
}
//placeholder css for field component loading placeholder.
&-count-1 {
padding-bottom:0;
.cmplz-placeholder-line {
margin:0;
background-image: linear-gradient(90deg, #f9f9f9 0, #f9f9f9 40px, #f9f9f9 80px);
&:last-of-type{
margin-bottom:0;
}
}
}
}
@keyframes shine-lines {
0% {
background-position: - 400px;
}
100% {
background-position: 220px;
}
}
.cmplz-page-placeholder .cmplz-grid-item, .cmplz-grid-item-placeholder {
overflow: hidden;
position: relative;
z-index: 1;
&:after {
content: '';
top: 0;
overflow: hidden;
transform: translateX(100%);
width: 100%;
height: 100%;
position: absolute;
display: inline-block;
z-index: 1;
animation: slide 1s infinite;
background: linear-gradient(103deg, rgba(228, 229, 232, 0) 25%, rgba(228, 229, 232, 0.35) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 75%); /* W3C */
}
}
.cmplz-grid-item-placeholder{
min-height: 300px;
}
/* animation */
@keyframes slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.cmplz-loading-container {
transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
&.cmplz-loading {
opacity: 0.3;
//filter: blur(1px);
}
}

View File

@@ -0,0 +1,238 @@
.cmplz-grid-item.cmplz-progress {
.cmplz-grid-item-content {
padding: 0;
}
.cmplz-placeholder {
@include cmplz-block-padding;
}
}
.cmplz-progress-block, .cmplz-grid-item-footer {
.cmplz-progress {
overflow: hidden;
height: 20px;
border-radius: 5px;
background-color: #f7f7f7;
.cmplz-bar {
height: 100%;
background-color: var(--rsp-color-success);
&.cmplz-orange {
background-color: var(--rsp-color-warning);
}
}
}
.cmplz-progress-bar {
@include cmplz-block-padding;
padding-block: 0;
border-radius:5px;
}
.cmplz-progress-text {
display: flex;
align-items: center;
@include cmplz-block-padding;
padding-block: var(--rsp-spacing-s);
justify-content: flex-start;
gap: var(--rsp-spacing-m);
.cmplz-progress-percentage {
font-size: var(--rsp-fs-800);
font-weight: 700;
}
.cmplz-progress-text-span {
font-weight: 500;
font-size: var(--rsp-fs-600);
a {
margin-left: 3px;
}
@media only screen and (max-width: $rsp-break-l) and (min-width: $rsp-break-m) {
font-size: var(--rsp-fs-500);
}
}
}
}
.cmplz-header-html {
display: flex;
color: var(--rsp-text-color-light);
.cmplz-toggle-active {
text-decoration: underline;
}
}
.cmplz-task-switcher-container {
display: flex;
border-radius: var(--rsp-border-radius);
.cmplz-task-switcher {
&:first-of-type {
border-right: 1px solid var(--rsp-grey-400);
padding-right: 10px;
}
&:last-of-type {
padding-left: 10px;
}
}
}
.cmplz-task-switcher {
font-size: var(--rsp-fs-200);
cursor: pointer;
transition: 0.3s;
&:hover {
text-decoration: underline;
}
}
.cmplz-active-filter-remaining .cmplz-remaining-tasks, .cmplz-active-filter-all .cmplz-all-tasks {
text-decoration: none;
}
.cmplz-active-filter-all .cmplz-remaining-tasks, .cmplz-active-filter-remaining .cmplz-all-tasks {
color: var(--rsp-grey-500);
}
/**
* Task element, list of tasks
*/
.cmplz-task-element {
display: flex;
align-items: flex-start;
justify-content: center;
gap: var(--rsp-spacing-m);
padding-bottom: var(--rsp-spacing-s);
@media(max-width: $rsp-break-m) {
gap: var(--rsp-spacing-xs);
}
.cmplz-task-message {
flex: 1;
font-size: var(--rsp-fs-300);
}
.cmplz-task-form {
margin-top: var(--rsp-spacing-xxs);
display: flex;
gap: var(--rsp-spacing-xs);
}
.cmplz-task-dismiss {
&:hover {
transform: scale(1.1);
}
button {
all: initial; //remove default button styles
cursor: pointer;
padding: 4px;
}
svg {
height: 12px;
width: 12px;
}
}
}
.cmplz-scroll-container {
@include cmplz-block-padding;
//--rsp-scroll-bg-clr: var(--rsp-white);
height: 230px;
overflow-y: auto;
padding-block: 0;
padding-top: var(--rsp-spacing-xxs);
border-radius: 0;
&::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
background-color: transparent;
}
&::-webkit-scrollbar {
width: 8px;
border-radius: 10px;
background-color: var(--rsp-grey-300);
}
&::-webkit-scrollbar-thumb {
background-color: var(--rsp-grey-400);
border-radius: 10px;
}
}
.cmplz-progress-status-container {
margin-right: 40px;
}
.cmplz-task-status {
display: block;
min-width: 100px;
text-align: center;
border-radius: 15px;
padding: 4px 8px;
font-size: var(--rsp-fs-100);
font-weight: 500;
@media(max-width: $rsp-break-m) {
min-width: 80px;
}
@media(max-width: $rsp-break-s) {
aspect-ratio: 1 / 1;
min-width: 10px;
height: 16px;
border-radius: 100%;
text-indent: -9999px; /* sends the text off-screen */
white-space: nowrap;
}
&.cmplz-completed, &.cmplz-success {
background-color: var(--rsp-color-success);
color: var(--rsp-text-color-white);
}
&.cmplz-open {
background-color: var(--rsp-color-open);
}
&.cmplz-urgent {
background-color: var(--rsp-color-error);
color: var(--rsp-text-color-white);
}
&.cmplz-premium {
background-color: var(--rsp-blue);
color: var(--rsp-text-color-white);
}
}
.cmplz-plusone {
min-width: 15px;
height: 18px;
font-size: var(--rsp-fs-100);
line-height:initial;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
margin: 1px 0 0 0;
padding: 2px 5px;
border-radius: 50%;
background-color: #d63638;
color: #fff;
text-align: center;
}
@media only screen and (max-width: $rsp-break-l) {
.cmplz-footer-left {
display:none;
}
}

View File

@@ -0,0 +1,102 @@
.cmplz-shepherd {
--rsp-black: #333;
background: var(--rsp-black);
color: var(--rsp-white);
box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
width: min(45ch, 100%);
border-radius: var(--rsp-border-radius-input);
z-index: 999;
margin: var(--rsp-spacing-s) !important; // this is only used to overwrite an inline style
.shepherd-arrow, .shepherd-arrow:before {
position: absolute;
width: 16px;
height: 16px;
z-index: -1
}
.shepherd-arrow:before {
content: "";
transform: rotate(45deg);
background: var(--rsp-black);
}
&[data-popper-placement^=top] > .shepherd-arrow {
bottom: -8px
}
&[data-popper-placement^=bottom] > .shepherd-arrow {
top: -8px
}
&[data-popper-placement^=left] > .shepherd-arrow {
right: -8px
}
&[data-popper-placement^=right] > .shepherd-arrow {
left: -8px
}
&.shepherd-centered > .shepherd-arrow {
opacity: 0
}
.shepherd-header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 30px;
padding-inline: var(--rsp-spacing-s);
padding-block: var(--rsp-spacing-xs);
.shepherd-title {
margin: 0;
color: var(--rsp-white);
}
button.shepherd-cancel-icon {
background: transparent;
border: none;
outline: none;
cursor: pointer;
color: var(--rsp-grey-500);
font-size: 20px;
position: relative;
top: -2px;
&:hover {
color: var(--rsp-text-color-hover);
}
}
}
.shepherd-text {
padding-inline: var(--rsp-spacing-s);
padding-block: var(--rsp-spacing-xxs);
p {
margin: 0;
margin-top: var(--rsp-spacing-xxs);
color: var(--rsp-white);
&:first-of-type {
margin-top: 0;
}
}
}
.shepherd-footer {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 30px;
gap: var(--rsp-spacing-xs);
padding-inline: var(--rsp-spacing-s);
padding-block: var(--rsp-spacing-xs);
}
}
.dashboard_page_burst .shepherd-modal-overlay-container{
display: none;
}
.shepherd-modal-overlay-container{
display: none;
}

View File

@@ -0,0 +1,6 @@
.cmplz-statistics-status{
display: flex;
.cmplz-icon {
margin-right: 10px;
}
}

View File

@@ -0,0 +1,60 @@
.cmplz-tips_tricks{
.cmplz-grid-item-header{
.cmplz-grid-item-controls{
height: 28px;
}
}
}
.cmplz-tips-tricks-container {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 10px;
font-size: var(--rsp-fs-300);
line-height: 1.7;
gap: var(--rsp-spacing-xxs);
@media screen and (max-width: 992px) {
flex-direction: row;
overflow: hidden;
}
.cmplz-tips-tricks-element {
width: calc(50% - var(--rsp-spacing-xxs));
@media( max-width: $rsp-break-xs ){
width: 100%;
}
a {
color: var(--rsp-text-color-light);
transition: color 0.3s ease;
display: flex;
align-items: center;
gap: var(--rsp-spacing-xs);
min-width: 0; /* or some value */
text-decoration: none;
&:hover {
color: var(--rsp-brand-primary);
text-decoration: underline;
svg path{
fill: var(--rsp-brand-primary);
}
.cmplz-tips-tricks-content {
text-decoration: underline;
}
}
}
.cmplz-bullet {
transition: background-color 0.3s ease;
background-color: var(--rsp-grey-300);
}
.cmplz-tips-tricks-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}

View File

@@ -0,0 +1,27 @@
.#{$rt-namespace}__close-button {
color: #fff;
background: transparent;
outline: none;
border: none;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: 0.3s ease;
align-self: flex-start;
&--light {
color: #000;
opacity: 0.3;
}
& > svg {
fill: currentColor;
height: 16px;
width: 14px;
}
&:hover,
&:focus {
opacity: 1;
}
}

View File

@@ -0,0 +1,10 @@
.#{$rt-namespace}__spinner {
width: 20px;
height: 20px;
box-sizing: border-box;
border: 2px solid;
border-radius: 100%;
border-color: var(--toastify-spinner-color-empty-area);
border-right-color: var(--toastify-spinner-color);
animation: #{$rt-namespace}__spin 0.65s linear infinite;
}

View File

@@ -0,0 +1,33 @@
@keyframes #{$rt-namespace}__trackProgress {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
.#{$rt-namespace}__progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
z-index: var(--toastify-z-index);
opacity: 0.7;
transform-origin: left;
&--animated {
animation: #{$rt-namespace}__trackProgress linear 1 forwards;
}
&--controlled {
transition: transform 0.2s;
}
&--rtl {
right: 0;
left: initial;
transform-origin: right;
}
}

View File

@@ -0,0 +1,57 @@
.#{$rt-namespace}__toast {
&-theme--dark {
background: var(--toastify-color-dark);
color: var(--toastify-text-color-dark);
}
&-theme--light {
background: var(--toastify-color-light);
color: var(--toastify-text-color-light);
}
&-theme--colored#{&}--default {
background: var(--toastify-color-light);
color: var(--toastify-text-color-light);
}
&-theme--colored#{&}--info {
color: var(--toastify-text-color-info);
background: var(--toastify-color-info);
}
&-theme--colored#{&}--success {
color: var(--toastify-text-color-success);
background: var(--toastify-color-success);
}
&-theme--colored#{&}--warning {
color: var(--toastify-text-color-warning);
background: var(--toastify-color-warning);
}
&-theme--colored#{&}--error {
color: var(--toastify-text-color-error);
background: var(--toastify-color-error);
}
}
.#{$rt-namespace}__progress-bar {
&-theme--light {
background: var(--toastify-color-progress-light);
}
&-theme--dark {
background: var(--toastify-color-progress-dark);
}
&--info {
background: var(--toastify-color-progress-info);
}
&--success {
background: var(--toastify-color-progress-success);
}
&--warning {
background: var(--toastify-color-progress-warning);
}
&--error {
background: var(--toastify-color-progress-error);
}
&-theme--colored#{&}--info,
&-theme--colored#{&}--success,
&-theme--colored#{&}--warning,
&-theme--colored#{&}--error {
background: var(--toastify-color-transparent);
}
}

View File

@@ -0,0 +1,60 @@
.#{$rt-namespace}__toast {
position: relative;
min-height: var(--toastify-toast-min-height);
box-sizing: border-box;
margin-bottom: 1rem;
padding: 8px;
border-radius: var(--rsp-border-radius);
border: 1px solid #eeeeee;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--rsp-box-shadow);
display: flex;
justify-content: space-between;
max-height: var(--toastify-toast-max-height);
overflow: hidden;
font-family: var(--toastify-font-family);
cursor: default;
direction: ltr;
/* webkit only issue #791 */
z-index: 0;
&--rtl {
direction: rtl;
}
&--close-on-click {
cursor: pointer;
}
&-body {
margin: auto 0;
flex: 1 1 auto;
padding: 6px;
display: flex;
align-items: center;
& > div:last-child {
word-break: break-word;
flex: 1;
}
}
&-icon {
margin-inline-end: 10px;
width: 20px;
flex-shrink: 0;
display: flex;
}
}
.#{$rt-namespace}--animate {
animation-fill-mode: both;
animation-duration: 0.7s;
}
.#{$rt-namespace}--animate-icon {
animation-fill-mode: both;
animation-duration: 0.3s;
}
@media #{$rt-mobile} {
.#{$rt-namespace}__toast {
margin-bottom: 0;
border-radius: 0;
}
}

View File

@@ -0,0 +1,60 @@
.#{$rt-namespace}__toast-container {
z-index: var(--toastify-z-index);
-webkit-transform: translate3d(0, 0, var(--toastify-z-index) px);
position: fixed;
padding: 4px;
width: var(--toastify-toast-width);
box-sizing: border-box;
color: #fff;
&--top-left {
top: 1em;
left: 1em;
}
&--top-center {
top: calc( 2em + 32px);
left: 50%;
transform: translateX(-50%);
}
&--top-right {
top: 1em;
right: 1em;
}
&--bottom-left {
bottom: 1em;
left: 1em;
}
&--bottom-center {
bottom: 1em;
left: 50%;
transform: translateX(-50%);
}
&--bottom-right {
bottom: 1em;
right: 1em;
}
}
@media #{$rt-mobile} {
.#{$rt-namespace}__toast-container {
width: 100vw;
padding: 0;
left: 0;
margin: 0;
&--top-left,
&--top-center,
&--top-right {
top: 0;
transform: translateX(0);
}
&--bottom-left,
&--bottom-center,
&--bottom-right {
bottom: 0;
transform: translateX(0);
}
&--rtl {
right: 0;
left: initial;
}
}
}

View File

@@ -0,0 +1,53 @@
$rt-namespace: 'Toastify';
$rt-mobile: 'only screen and (max-width : 480px)' !default;
:root {
--toastify-color-light: var(--rsp-white);
--toastify-color-dark: var(--rsp-black);
--toastify-color-info: var(--rsp-yellow);
--toastify-color-success: var(--rsp-green);
--toastify-color-warning: var(--rsp-orange);
--toastify-color-error: var(--rsp-red);
--toastify-color-transparent: rgba(255, 255, 255, 0.7);
--toastify-icon-color-info: var(--toastify-color-info);
--toastify-icon-color-success: var(--toastify-color-success);
--toastify-icon-color-warning: var(--toastify-color-warning);
--toastify-icon-color-error: var(--toastify-color-error);
--toastify-toast-width: 320px;
--toastify-toast-background: #fff;
--toastify-toast-min-height: 42px;
--toastify-toast-max-height: 800px;
--toastify-font-family: sans-serif;
--toastify-z-index: 999999;
--toastify-text-color-light: var(--rsp-text-color);
--toastify-text-color-dark: var(--rsp-text-color-white);
//Used only for colored theme
--toastify-text-color-info: #fff;
--toastify-text-color-success: #fff;
--toastify-text-color-warning: #fff;
--toastify-text-color-error: #fff;
--toastify-spinner-color: #616161;
--toastify-spinner-color-empty-area: #e0e0e0;
// Used when no type is provided
--toastify-color-progress-light: linear-gradient(
to right,
#4cd964,
#5ac8fa,
#007aff,
#34aadc,
#5856d6,
#ff2d55
);
// Used when no type is provided
--toastify-color-progress-dark: #bb86fc;
--toastify-color-progress-info: var(--toastify-color-info);
--toastify-color-progress-success: var(--toastify-color-success);
--toastify-color-progress-warning: var(--toastify-color-warning);
--toastify-color-progress-error: var(--toastify-color-error);
}

View File

@@ -0,0 +1,197 @@
@mixin timing-function {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes #{$rt-namespace}__bounceInRight {
from,
60%,
75%,
90%,
to {
@include timing-function;
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes #{$rt-namespace}__bounceOutRight {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
@keyframes #{$rt-namespace}__bounceInLeft {
from,
60%,
75%,
90%,
to {
@include timing-function;
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes #{$rt-namespace}__bounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes #{$rt-namespace}__bounceInUp {
from,
60%,
75%,
90%,
to {
@include timing-function;
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes #{$rt-namespace}__bounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
@keyframes #{$rt-namespace}__bounceInDown {
from,
60%,
75%,
90%,
to {
@include timing-function;
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
@keyframes #{$rt-namespace}__bounceOutDown {
20% {
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.#{$rt-namespace}__bounce-enter {
&--top-left,
&--bottom-left {
animation-name: #{$rt-namespace}__bounceInLeft;
}
&--top-right,
&--bottom-right {
animation-name: #{$rt-namespace}__bounceInRight;
}
&--top-center {
animation-name: #{$rt-namespace}__bounceInDown;
}
&--bottom-center {
animation-name: #{$rt-namespace}__bounceInUp;
}
}
.#{$rt-namespace}__bounce-exit {
&--top-left,
&--bottom-left {
animation-name: #{$rt-namespace}__bounceOutLeft;
}
&--top-right,
&--bottom-right {
animation-name: #{$rt-namespace}__bounceOutRight;
}
&--top-center {
animation-name: #{$rt-namespace}__bounceOutUp;
}
&--bottom-center {
animation-name: #{$rt-namespace}__bounceOutDown;
}
}

View File

@@ -0,0 +1,43 @@
@keyframes #{$rt-namespace}__flipIn {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
@keyframes #{$rt-namespace}__flipOut {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.#{$rt-namespace}__flip-enter {
animation-name: #{$rt-namespace}__flipIn;
}
.#{$rt-namespace}__flip-exit {
animation-name: #{$rt-namespace}__flipOut;
}

View File

@@ -0,0 +1,117 @@
@mixin transform {
transform: translate3d(0, 0, 0);
}
@keyframes #{$rt-namespace}__slideInRight {
from {
transform: translate3d(110%, 0, 0);
visibility: visible;
}
to {
@include transform;
}
}
@keyframes #{$rt-namespace}__slideInLeft {
from {
transform: translate3d(-110%, 0, 0);
visibility: visible;
}
to {
@include transform;
}
}
@keyframes #{$rt-namespace}__slideInUp {
from {
transform: translate3d(0, 110%, 0);
visibility: visible;
}
to {
@include transform;
}
}
@keyframes #{$rt-namespace}__slideInDown {
from {
transform: translate3d(0, -110%, 0);
visibility: visible;
}
to {
@include transform;
}
}
@keyframes #{$rt-namespace}__slideOutRight {
from {
@include transform;
}
to {
visibility: hidden;
transform: translate3d(110%, 0, 0);
}
}
@keyframes #{$rt-namespace}__slideOutLeft {
from {
@include transform;
}
to {
visibility: hidden;
transform: translate3d(-110%, 0, 0);
}
}
@keyframes #{$rt-namespace}__slideOutDown {
from {
@include transform;
}
to {
visibility: hidden;
transform: translate3d(0, 500px, 0);
}
}
@keyframes #{$rt-namespace}__slideOutUp {
from {
@include transform;
}
to {
visibility: hidden;
transform: translate3d(0, -500px, 0);
}
}
.#{$rt-namespace}__slide-enter {
&--top-left,
&--bottom-left {
animation-name: #{$rt-namespace}__slideInLeft;
}
&--top-right,
&--bottom-right {
animation-name: #{$rt-namespace}__slideInRight;
}
&--top-center {
animation-name: #{$rt-namespace}__slideInDown;
}
&--bottom-center {
animation-name: #{$rt-namespace}__slideInUp;
}
}
.#{$rt-namespace}__slide-exit {
&--top-left,
&--bottom-left {
animation-name: #{$rt-namespace}__slideOutLeft;
}
&--top-right,
&--bottom-right {
animation-name: #{$rt-namespace}__slideOutRight;
}
&--top-center {
animation-name: #{$rt-namespace}__slideOutUp;
}
&--bottom-center {
animation-name: #{$rt-namespace}__slideOutDown;
}
}

View File

@@ -0,0 +1,8 @@
@keyframes #{$rt-namespace}__spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

View File

@@ -0,0 +1,30 @@
@keyframes #{$rt-namespace}__zoomIn {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes #{$rt-namespace}__zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.#{$rt-namespace}__zoom-enter {
animation-name: #{$rt-namespace}__zoomIn;
}
.#{$rt-namespace}__zoom-exit {
animation-name: #{$rt-namespace}__zoomOut;
}

View File

@@ -0,0 +1,16 @@
@charset "UTF-8";
@import 'variables';
@import 'toastContainer';
@import 'toast';
@import 'theme';
@import 'closeButton';
@import 'progressBar';
@import 'icons';
// entrance and exit animations
@import 'animations/bounce.scss';
@import 'animations/zoom.scss';
@import 'animations/flip.scss';
@import 'animations/slide.scss';
@import 'animations/spin.scss';

View File

@@ -0,0 +1,16 @@
@charset "UTF-8";
@import 'variables';
@keyframes #{$rt-namespace}__trackProgress {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
.#{$rt-namespace}__progress-bar {
animation: #{$rt-namespace}__trackProgress linear 1 forwards;
}

View File

@@ -0,0 +1,4 @@
.cmplz-tooltip-icon .react-tooltip {
max-width:300px;
z-index: 999999;
}

View File

@@ -0,0 +1,190 @@
.cmplz-confetti {
position:absolute;
left:50%;
}
.cmplz {
.cmplz-wizard-settings { // starts with selector
.cmplz-helplink {
color: var(--rsp-text-color);
}
.cmplz-settings-region {
width:25px;
}
.cmplz-grid-item {
position: relative; //to ensure the cmplz-lock stays within the div
margin-bottom: var(--rsp-grid-gap);
// on display animate in
@media(max-width: $rsp-break-s) {
grid-column: span 4;
}
&-content{
animation: cmplz-fade-in 0.2s ease-in;
@keyframes cmplz-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
}
& > div:nth-last-of-type(2) {
margin-bottom: 0;
border-radius: var(--rsp-border-radius) var(--rsp-border-radius) 0 0;
}
&.cmplz-column-2{
grid-column: span 2;
@media(max-width: $rsp-break-s) {
grid-column: span 4;
}
}
.cmplz-locked {
position: absolute;
z-index: 10;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
border-radius: var(--rsp-border-radius);
.cmplz-locked-overlay {
z-index: 1;
top: calc(100% - 95px);
position: relative;
display: flex;
align-items: center;
gap: var(--rsp-spacing-s);
background-color: var(--rsp-white);
@include cmplz-block-padding;
border-radius: var(--rsp-border-radius-input);
margin: var(--rsp-spacing-s);
box-shadow: var(--rsp-box-shadow);
.cmplz-open {
float: left;
margin-right: 12px;
}
.cmplz-progress-status {
float: left;
margin-right: 20px;
}
}
}
.cmplz-grid-item-footer-container {
position: sticky;
bottom: 0;
display: flex;
flex-direction: column;
z-index: 12; //should be above 10, for the text editor, which has 10.
}
.cmplz-grid-item-footer-scroll-progress-container {
display: flex;
flex-direction: column;
width: 100%;
height: 3px;
background-color: var(--rsp-grey-300);
overflow: hidden;
}
.cmplz-grid-item-footer-scroll-progress {
height: 100%;
background-color: var(--rsp-blue);
}
.cmplz-grid-item-footer {
background: var(--rsp-grey-100);
@include cmplz-block-padding();
box-shadow: var(--rsp-box-shadow);
border-radius: 0 0 var(--rsp-border-radius) var(--rsp-border-radius);
border-top: 1px solid var(--rsp-grey-300);
box-sizing: border-box;
align-items: center;
gap: var(--rsp-grid-margin);
width: 100%;
min-height: 20px;
justify-content: space-around;
// last item within the footer
& > div:last-of-type {
margin-left: auto;
}
//&-progress-bar{
// display: flex;
// align-items: center;
// gap: var(--rsp-spacing-s);
// width: 100%;
// background: var(--rsp-grey-400);
// border-radius: var(--rsp-border-radius-xs);
// .cmplz-bar{
// border-radius: var(--rsp-border-radius-xs);
// height: 1rem;
// background-color: var(--rsp-dark-blue);
// }
//}
&-buttons{
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--rsp-spacing-s);
}
&-upsell-bar {
.button {
display:inline-block !important;
}
}
&:empty {
display: none;
}
}
}
}
.cmplz-cookiebanner-preview-controls{
display: flex;
justify-content: stretch;
flex-wrap: wrap;
margin-top: var(--rsp-spacing-l);
h6{
margin-top: var(--rsp-spacing-s);
margin-bottom: var(--rsp-spacing-xxs);
width: 100%;
}
button{
background: var(--rsp-grey-200);
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
border-radius: var(--rsp-border-radius-input);
border: 1px solid var(--rsp-grey-300);
&:hover{
background: var(--rsp-grey-300);
}
&.active{
background: var(--rsp-blue);
color: var(--rsp-white);
border: 1px solid var(--rsp-blue);
&:hover{
background: var(--rsp-blue);
}
}
&.inactive{
cursor:pointer;
}
}
&-buttons{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: var(--rsp-spacing-xxs);
}
}

View File

@@ -0,0 +1,26 @@
.cmplz-borderradius-control {
display:flex;
}
.cmplz-borderradius, .cmplz-borderwidth {
&-element-label {
color: var(--rsp-grey-400);
font-size: 13px;
}
input {
width:60px;
}
&-inputtype {
&-pixel {
margin-top:13px;
}
&-percent, &-pixel {
cursor: pointer;
&.cmplz-inactive{
color: var(--rsp-grey-400);
}
}
}
}

View File

@@ -0,0 +1,5 @@
.cmplz-single-document-menu{
display: grid;
grid-template-columns: 1fr 1fr;
margin:10px 0;
}

View File

@@ -0,0 +1,5 @@
//loader icon on the left
.cmplz-documents-loader {
display:flex;
padding: 0 var(--rsp-spacing-xs);
}

View File

@@ -0,0 +1,3 @@
.cmplz-block-editor {
min-height:300px;
}

View File

@@ -0,0 +1,256 @@
#complianz {
.components-form-file-upload {
button {
color: var(--rsp-text-color-light);
border: 1px solid var(--rsp-input-border-color);
background: var(--rsp-grey-200);
padding: 0 var(--rsp-spacing-xs);
min-height: 30px;
height: min-content;
}
}
input[type="checkbox"].indeterminate {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="45" width="80" height="10" fill="currentColor"/></svg>') no-repeat center center;
}
div[class^="cmplz-wizard-"] { // starts with selector
.cmplz-parent-label {
padding-bottom: var(--rsp-spacing-m);
label {
font-size: var(--rsp-fs-500);
}
}
.cmplz-required {
font-size: var(--rsp-fs-100);
color: var(--rsp-text-color-light);
font-weight: 400;
}
//to align tooltips and premium label
.cmplz-label-container {
display: flex;
gap: 10px;
font-weight: 600;
font-size: var(--rsp-fs-300);
color: var(--rsp-text-color);
&.cmplz-parent {
font-size: var(--rsp-fs-500);
}
}
.cmplz-create-document {
padding: 10px 0;
display: flex;
flex-direction: row;
align-items: center;
.cmplz-icon {
margin-right: 10px;
}
input {
width: 50%;
min-width: 200px;
margin-right: 10px;
}
}
.components-flex {
.components-flex-item label {
margin: 0;
}
.components-input-control__container {
max-width: max-content;
}
}
.components-base-control__field {
margin-bottom: 0;
display: flex;
flex-flow: column;
}
.cmplz_multicheckbox {
.components-base-control__field {
display: block;
}
}
.cmplz-text-control {
-webkit-box-pack: justify;
justify-content: space-between;
&__field {
display: flex;
}
}
.components-toggle-control {
.components-base-control__field, .components-flex {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
width: 100%;
.components-form-toggle {
margin-right: 0;
}
}
}
.components-form-toggle.is-checked .components-form-toggle__track {
background-color: var(--rsp-green);
}
.cmplz-grid-item {
.cmplz-grid-item-content {
margin-block: var(--rsp-spacing-l);
display: flex;
flex-direction: column;
gap: var(--rsp-spacing-l);
padding-inline: 0;
//overflow: hidden; => causes cut off for last element.
}
}
.cmplz-field-wrap {
display: flex;
}
.cmplz-field-wrap, .cmplz-settings-block-intro {
//adding display flex here causes settings-block-intro with html to break.
//becuse of this the cmplz-field-wrap has this property separately (see above)
flex-direction: column;
gap: var(--rsp-spacing-xs);
padding-inline: var(--rsp-spacing-l);
//double wrapped fields, like processing agreements create
& > .cmplz-field-wrap {
padding-left: 0;
}
}
// inputs in row with label
.cmplz-field-wrap {
&.cmplz-checkbox,
&.cmplz-banner-reset-button,
&.cmplz-copy-multisite,
&.cmplz-export,
&.cmplz-button {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
gap: var(--rsp-spacing-s);
flex-wrap: wrap;
.cmplz-label-container {
width: fit-content;
}
}
}
.button {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
gap: var(--rsp-spacing-s);
flex-wrap: wrap;
}
.cmplz-field-button, .cmplz-export, .cmplz-import {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.cmplz-export-container {
}
&-form {
display: flex;
}
}
}
.cmplz-field-wrap.cmplz-error {
input,
textarea,
select {
box-shadow: 0 0 0 2px var(--rsp-red-faded);
}
}
.cmplz-error-text {
display: flex;
gap: var(--rsp-spacing-xxs);
p {
color: var(--rsp-red);
font-size: var(--rsp-fs-200);
font-weight: 400;
font-style: italic;
}
}
.cmplz-highlight {
background-color: transparent;
border-left: 4px solid var(--rsp-green);
-o-animation: fadeIt 3s ease-in-out;
animation: fadeIt 3s ease-in-out;
}
.cmplz-comment {
font-style: italic;
}
@-o-keyframes fadeIt {
0% {
background-color: transparent;
}
30% {
background-color: var(--rsp-green-faded);
}
100% {
border-right: 0;
background-color: inherit;
}
}
@keyframes fadeIt {
0% {
background-color: transparent;
border-right: 0;
}
30% {
background-color: var(--rsp-green-faded);
}
100% {
background-color: inherit;
}
}
}
//switch padding to top, to prevent tasks from getting stuck to text field
.cmplz-license {
.cmplz-processing {
//give the container an opacity
opacity: 0.3;
}
.cmplz-task-element {
padding-top: var(--rsp-spacing-s);
padding-bottom: 0;
}
.cmplz-license-field {
display: flex;
}
}

View File

@@ -0,0 +1,147 @@
.cmplz {
.cmplz-wizard-menu {
&-header{
min-height: calc(30px + var(--rsp-spacing-s) * 2);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s) 0 var(--rsp-spacing-s);
}
&-item {
text-decoration: none;
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
color: var(--rsp-text-color);
display: flex;
align-items: center;
border-radius: var(--rsp-border-radius-s);
&.cmplz-main{
font-size: var(--rsp-fs-400);
font-weight: 700;
color: var(--rsp-text-color);
&.cmplz-active{
color: rgb(46 134 199); // @todo deze kleuren bespreken met Aert
background-color: var(--rsp-blue-faded);
box-shadow: var(--rsp-box-shadow);
}
}
&[href]:hover{
text-decoration: underline;
}
}
.cmplz-submenu-items{
margin: var(--rsp-spacing-xs) 0;
.cmplz-wizard-menu-item{
gap: var(--rsp-spacing-xs);
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-s);
color: var(--rsp-text-color-light);
font-size: var(--rsp-fs-300);
line-height: var(--rsp-fs-500);
&.cmplz-active{
color: rgb(46 134 199);
}
}
}
}
}
// .cmplz-wizard-menu{
// height: fit-content;
// background-color: transparent;
// box-shadow: inherit;
// .cmplz-grid-item-content{
// padding: 0;
// padding-bottom: var(--rsp-spacing-l);
// }
// }
// .cmplz-wizard-menu-items {
// .cmplz-menu-item{
// a{
// display: flex;
// align-items: center;
// gap: var(--rsp-spacing-xs);
// text-decoration: none;
// color: var(--rsp-text-color);
// font-size: var(--rsp-fs-400);
// padding-block: var(--rsp-spacing-xs);
// transition: all 0.2s ease-in-out;
// padding-left: var(--rsp-spacing-l);
// &:hover{
// text-decoration:underline;
// }
// .cmplz-submenu-item{
// a{
// font-size: var(--rsp-fs-300);
// }
// }
// }
// &.cmplz-active {
// > a {
// color: var(--rsp-blue);
// text-decoration: none;
//
// }
// }
// &.cmplz-main.cmplz-active {
// > a {
// background-color: var(--rsp-blue-faded);
// }
// }
// &.cmplz-active{
// > a{
// font-weight: 600;
// }
// }
// &.cmplz-featured{
// a{
// //padding-block: var(--rsp-spacing-m);
// //background: var(--rsp-blue-faded);
// font-weight: 600;
// flex-wrap: wrap;
// .cmplz-menu-item-featured-pill{
// background: var(--rsp-green);
// color: var(--rsp-text-color-white);
// padding: 2px 9px;
// border-radius: var(--rsp-border-radius);
// font-size: var(--rsp-fs-100);
// }
// }
// }
//
//
// &.cmplz-premium{
// a{
// background: var(--rsp-blue-faded);
// flex-wrap: wrap;
// .cmplz-menu-item-featured-pill{
// background: var(--rsp-dark-blue);
// color: var(--rsp-text-color-white);
// padding: 2px 9px;
// border-radius: var(--rsp-border-radius);
// font-size: var(--rsp-fs-100);
// }
// }
// }
// }
//
// .cmplz-premium-menu-item {
// background: var(--rsp-blue-faded);
// div {
// display: flex;
// align-items: center;
// gap: var(--rsp-spacing-xs);
// text-decoration: none;
// color: var(--rsp-text-color);
// font-size: var(--rsp-fs-400);
// padding-block: var(--rsp-spacing-xs);
// @include cmplz-inline-block-padding;
// transition: all 0.2s ease-in-out;
// border-left: 4px solid transparent;
// }
// }
//
//
// }
//}

View File

@@ -0,0 +1,77 @@
.cmplz-wizard-help {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: var(--rsp-spacing-xs);
details{
font-size: var(--rsp-fs-200);
.cmplz-help-more-info {
display: flex;
flex-direction: row;
margin-top: 12px;
}
summary {
display: grid;
grid-template-columns: 1fr auto;
justify-content: space-between;
font-size: var(--rsp-fs-300);
font-weight: 600;
cursor:pointer;
&::-webkit-details-marker {
display:none;
}
&:first-of-type {
list-style-type: none;
}
.cmplz-icon{
transition: all .3s ease-in-out;
transform: rotate(0deg);
}
}
}
summary, p {
font-size: var(--rsp-fs-200);
}
details[open]{
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
summary{
padding: 0;
padding-bottom: var(--rsp-spacing-xs);
.cmplz-icon{
transform: rotate(180deg);
}
}
}
}
.cmplz-wizard-help {
.cmplz-help-header {
width:100%;
display:flex;
padding:10px;
.cmplz-help-title{
font-size:18px;
}
.cmplz-help-control {
margin-left:auto;
cursor:pointer;
}
}
}
.cmplz-wizard-help-notice {
width: 100%;
@include cmplz-block;
border-radius: var(--rsp-border-radius-s);
height: fit-content;
background-color: var(--rsp-blue-faded);
&.cmplz-warning {
background-color: var(--rsp-yellow-faded);
}
summary, p{
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
}
}

View File

@@ -0,0 +1,161 @@
#complianz {
.cmplz-details-row {
display:flex;
flex-direction: column;
padding:5px 0;
&__buttons {
flex-direction: row;
button {
margin: 10px 10px 10px 0;
}
}
& > label {
margin-top: var(--rsp-spacing-s);
margin-bottom: var(--rsp-spacing-xs);
font-weight: 500;
}
input[type=text] {
flex: 1;
}
}
.cmplz-panel {
&__cookie_list {
.cmplz-panel__list__item {
background-color: #fff;
margin: 10px 0;
}
}
&__buttons {
margin:10px 0;
}
&__list {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: var(--rsp-spacing-s);
margin-top: var(--rsp-spacing-s);
&__item {
width: 100%;
background-color: var(--rsp-grey-200);
border-radius: var(--rsp-border-radius);
&__details{
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-s);
}
details {
border-radius: var(--rsp-border-radius);
border: 1px solid var(--rsp-grey-300);
summary {
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-s);
display: grid;
grid-template-columns: auto 1fr auto auto auto;
align-items: center;
gap: var(--rsp-spacing-s);
list-style: none;
min-height: 40px;
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
>.cmplz-icon {
padding-top: 5px;
}
h5 {
font-weight: 500;
font-size: var(--rsp-fs-200);
display: inline-block;
}
.components-toggle-control {
display: flex;
align-items: center;
margin: 0;
.components-flex{ gap: 0 }
}
.cmplz-icon-chevron-down {
transition: all .25s ease-in-out;
transform: rotate(0deg);
// last in grid
grid-column: -1;
}
.cmplz-panel__list__item__icons{
position: relative;
grid-column: -2;
display: flex;
gap: var(--rsp-spacing-xxs);
.cmplz-button-icon .cmplz-tooltip-icon {
padding-top: 5px;
padding-left: 2px;
}
}
}
&[open] {
&>summary {
//padding-bottom: var(--rsp-spacing-s);
border-bottom: 1px solid var(--rsp-grey-300);
&>.cmplz-icon-chevron-down {
transform: rotate(180deg);
}
}
}
.cmplz-field-wrap {
padding-inline: 0;
padding: 0;
padding-top: var(--rsp-spacing-m);
}
.cmplz-label {
color: var(--rsp-text-color);
font-size: var(--rsp-fs-400);
font-weight: 600;
margin-bottom: var(--rsp-spacing-xs);
}
}
}
}
}
.cmplz-radio-buttons__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rsp-spacing-s);
input {
display: none;
&[type="radio"]:checked + label {
background: var(--rsp-green-faded);
border: 2px solid var(--rsp-green);
}
}
&__item {
background: var(--rsp-white);
border: 2px solid transparent;
padding: var(--rsp-spacing-xs);
border-radius: var(--rsp-border-radius-input);
display: grid;
grid-template-columns: auto auto auto 1fr;
gap: var(--rsp-spacing-s);
align-items: center;
h5{
font-weight: 600;
letter-spacing: 0.3px;
}
p{
font-size: var(--rsp-fs-200);
color: var(--rsp-text-color-light);
}
}
}
}

View File

@@ -0,0 +1,11 @@
.cmplz-label-container{
.cmplz-premium a{
margin-left:10px;
font-size: 11px;
font-weight: 500;
text-decoration: none;
padding: 5px;
background-color: #ecf4ed;
color: #333;
}
}

View File

@@ -0,0 +1,5 @@
.cmplz-thirdparties, .cmplz-processors{
.components-base-control .cmplz-label-container {
margin-bottom:10px;
}
}

View File

@@ -0,0 +1,24 @@
#complianz.cmplz {
.components-snackbar-list.edit-site-notices{
z-index:99999;
width: max-content;
position: fixed;
bottom: var(--rsp-spacing-m);
right: var(--rsp-spacing-l);
& > div{
margin-left: auto;
}
.components-snackbar{
@include cmplz-block;
color: var(--rsp-color-success);
background-color: #fff;
font-weight:700;
font-size:14px;
&__content {
padding:10px;
}
}
}
}

View File

@@ -0,0 +1,41 @@
.cmplz-suggested-plugin,
.cmplz-wscscan-alert {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
background-color: #f9f9f9;
padding: 20px;
&-group {
&-title {
font-size: 14px;
font-weight: 600;
}
&-desc {
font-size: 12px;
white-space: nowrap;
margin: 4px 0;
}
}
&-desc-long {
flex: 1;
font-size: 12px;
line-height: 1.6;
font-weight: 400;
min-width: 25ch;
margin-right: auto;
}
&-img {
width: 70px;
height: 70px;
border-radius: 5px;
}
button.cmplz-install-plugin {
display: flex;
align-items: center;
.cmplz-icon {
margin-left:10px;
margin-top:5px;
}
}
}

View File

@@ -0,0 +1,114 @@
#complianz{
/*skeleton*/
$panelheight : 38px;
$panelborder : 1px;
$paneloffset : 3*($panelborder+$panelheight);
$rows : 6;
.cmplz-skeleton:empty {
margin: auto;
margin-bottom: 25px;
width: 100%;
height: ($rows*$panelheight)+($rows+1)*$panelborder; /* change height to see repeat-y behavior */
background-image:
linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.5) 15% ),
linear-gradient( #f2f2f2 $panelheight, transparent 0 ),
linear-gradient( #f2f2f2 $panelheight, transparent 0 ),
linear-gradient( #f2f2f2 $panelheight, transparent 0 ),
linear-gradient( #f2f2f2 $panelheight, transparent 0 );
background-repeat: repeat-y;
background-size:
50px 200px, /* highlight */
100% $paneloffset,
100% $paneloffset,
100% $paneloffset,
100% $paneloffset;
background-position:
0 0, /* highlight */
$panelborder $panelborder,
$panelborder $panelheight+(2*$panelborder),
$panelborder (2*$panelheight)+(3*$panelborder),
$panelborder (3*$panelheight)+(4*$panelborder);
background-color:#d6d8db;
border-right: $panelborder solid #d6d8db;
animation: shine 2.5s infinite;
}
@keyframes shine {
to {
background-position:
100% 0, /* move highlight to right */
$panelborder $panelborder,
$panelborder $panelheight+(2*$panelborder),
$panelborder (2*$panelheight)+(3*$panelborder),
$panelborder (3*$panelheight)+(4*$panelborder);
}
}
/*loader*/
.cmplz-loader {
margin: 0;
width: 50px;
height: 15px;
text-align: center;
font-size: 10px;
> div {
margin:1px;
background-color: #333;
height: 100%;
width: 3px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
&.cmplz-loader-white >div {
background-color: #fff;
}
.rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
}
.button-primary .cmplz-loader div {
background-color: #fff;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
}

View File

@@ -0,0 +1,5 @@
#complianz {
--rsp-brand-primary: var(--rsp-dark-blue);
--rsp-brand-secondary: var(--rsp-blue);
--rsp-brand-primary-faded: var(--rsp-dark-blue-faded);
}

View File

@@ -0,0 +1,62 @@
#complianz{
// Plugin specific variables down here please
--rsp-brand-primary: var(--rsp-dark-blue);
--rsp-brand-secondary: var(--rsp-blue);
--rsp-brand-primary-faded: var(--rsp-blue-faded);
}
//@media (prefers-color-scheme: dark) {
// :root {
// // Borders and stuff;
// --rsp-border: 1px solid var(--rsp-border-color);
// --rsp-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
// --rsp-box-shadow-dark: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 1px 0px 4px 1px;
// --rsp-border-color: #dfdfdf;
//
// // RSP Brand Colors
// --rsp-black: #333;
// --rsp-white: #fff;
// --rsp-yellow: #f4bf3e;
// --rsp-blue: #009fff;
// --rsp-dark-blue: #1E73BE;
// --rsp-green: #2e8a37;
// --rsp-red: #D7263D;
// --rsp-pink: #E35899;
// --rsp-wp-blue: #007cba;
//
// --rsp-yellow-faded: #f2e6c9;
// --rsp-blue-faded: #ebf2f9;
// --rsp-green-faded: #ecf4ed;
// --rsp-red-faded: #fbebed;
// --rsp-pink-faded: #fceff5;
// --rsp-wp-blue-faded: #c6e0ef;
//
// --rsp-background-block-color: var(--rsp-black);
// --rsp-background-color: var(--rsp-grey-600);
//
// //Input colors
// --rsp-input-background-color: #fff;
// --rsp-input-text-color: var(--rsp-text-color);
// --rsp-input-border-color: var(--rsp-grey-400);
//
// --rsp-text-color: rgba(255, 255, 255, 0.95);
// --rsp-text-color-invert: rgba(26, 26, 26, 0.95);
// --rsp-text-color-white: rgba(255, 255, 255, 0.95);
// --rsp-text-color-light: rgba(69, 69, 82, 0.95);
//
// --rsp-grey-100: #fafafa;
// --rsp-grey-200: #f9f9f9;
// --rsp-grey-300: #ededed;
// --rsp-grey-400: #c6c6c6;
// --rsp-grey-500: #737373;
// --rsp-grey-600: #696969;
//
// // Notification colors
// --rsp-color-success: var(--rsp-green);
// --rsp-color-error: var(--rsp-red);
// --rsp-color-open: var(--rsp-yellow);
// --rsp-color-disabled: var(--rsp-grey-300);
// }
// .cmplz-settings-header .cmplz-header-logo{
// filter: brightness(0) invert(1);
// }
//}

View File

@@ -0,0 +1,132 @@
/**
* Cookie blocker css
*/
.cmplz-video.cmplz-iframe-styles {
background-color: transparent;
}
.cmplz-video.cmplz-hidden {
visibility: hidden !important;
}
.cmplz-blocked-content-notice {
display: none;
}
.cmplz-placeholder-parent {
height: inherit;
}
.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice, .cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice, .cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice, .cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice {
display: block;
}
.cmplz-blocked-content-container, .cmplz-wp-video {
animation-name: cmplz-fadein;
animation-duration: 600ms;
background: #FFF;
border: 0;
border-radius: 3px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);
display: flex;
justify-content: center;
align-items: center;
background-repeat: no-repeat !important;
background-size: cover !important;
height: inherit;
position: relative;
}
.cmplz-blocked-content-container.gmw-map-cover, .cmplz-wp-video.gmw-map-cover {
max-height: 100%;
position: absolute;
}
.cmplz-blocked-content-container.cmplz-video-placeholder, .cmplz-wp-video.cmplz-video-placeholder {
padding-bottom: initial;
}
.cmplz-blocked-content-container iframe, .cmplz-wp-video iframe {
visibility: hidden;
max-height: 100%;
border: 0 !important;
}
.cmplz-blocked-content-container .cmplz-custom-accept-btn, .cmplz-wp-video .cmplz-custom-accept-btn {
white-space: normal;
text-transform: initial;
cursor: pointer;
position: absolute !important;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 200px;
font-size: 14px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
/* Black background with opacity */
color: #fff;
text-align: center;
/*make sure the container is on top of the iframe, but below our cookie notice */
z-index: 98;
/*We need some lineheight, for example Elementor will force a lineheight of 0*/
line-height: 23px;
}
.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus, .cmplz-wp-video .cmplz-custom-accept-btn:focus {
border: 1px dotted #cecece;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice, .cmplz-wp-video .cmplz-blocked-content-notice {
white-space: normal;
text-transform: initial;
position: absolute !important;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 300px;
font-size: 14px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
/* Black background with opacity */
color: #fff;
text-align: center;
/*make sure the container is on top of the iframe, but below our cookie notice */
z-index: 98;
/*We need some lineheight, for example Elementor will force a lineheight of 0*/
line-height: 23px;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links, .cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links {
display: block;
margin-bottom: 10px;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a, .cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a {
color: #fff;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body, .cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body {
display: block;
}
.cmplz-blocked-content-container div div {
display: none;
}
.cmplz-wp-video .cmplz-placeholder-element {
width: 100%;
height: inherit;
}
@keyframes cmplz-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["cookieblocker.less"],"names":[],"mappings":";;;AASE,YAAC;EACF,6BAAA;;AAGC,YAAC;EACF,6BAAA;;AAID;EACE,aAAA;;AAGF;EACE,eAAA;;AAIF,YACE,iCACD;AAFa,aACZ,iCACD;AAFD,YACoC,gBACnC;AAFa,aACsB,gBACnC;EACE,cAAA;;AAKH;AAAkC;EAChC,4BAAA;EACA,yBAAA;EACA,gBAAA;EACA,SAAA;EACA,kBAAA;EACA,0EAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,4BAAA;EACA,iCAAA;EACA,eAAA;EACA,kBAAA;;AAEA,gCAAC;AAAD,eAAC;EACF,gBAAA;EACA,kBAAA;;AAEC,gCAAC;AAAD,eAAC;EACF,uBAAA;;AApBD,gCAuBE;AAvBgC,eAuBhC;EACD,kBAAA;EACA,gBAAA;EACA,oBAAA;;AA1BD,gCA6BE;AA7BgC,eA6BhC;EAKD,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,6BAAA;EACA,WAAA;EACA,QAAA;EACA,SAAA;EACA,WAAW,qBAAX;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,oCAAA;;EACA,WAAA;EACA,kBAAA;;EAEA,WAAA;;EAEA,iBAAA;;AArBA,gCADC,yBACA;AAAD,eADC,yBACA;EACC,0BAAA;;AA/BH,gCAsDE;AAtDgC,eAsDhC;EACD,mBAAA;EACA,uBAAA;EACA,6BAAA;EACA,WAAA;EACA,QAAA;EACA,SAAA;EACA,WAAW,qBAAX;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,oCAAA;;EACA,WAAA;EACA,kBAAA;;EAEA,WAAA;;EAEA,iBAAA;;AAvED,gCAsDE,8BAkBD;AAxEiC,eAsDhC,8BAkBD;EACE,cAAA;EACA,mBAAA;;AA1EH,gCAsDE,8BAkBD,aAGE;AA3E+B,eAsDhC,8BAkBD,aAGE;EACC,WAAA;;AA5EJ,gCAsDE,8BAyBD;AA/EiC,eAsDhC,8BAyBD;EACE,cAAA;;AAMH,gCACE,IAAI;EACL,aAAA;;AAKD,eACE;EACD,WAAA;EACA,eAAA;;AAID;EACE;IACD,UAAA;;EAEC;IACD,UAAA","file":"cookieblocker.css"}

View File

@@ -0,0 +1 @@
.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}

View File

@@ -0,0 +1,143 @@
/**
* Cookie blocker css
*/
//this class should not be contained in blocked content container class, to ensure it applies also before the complianz script has added the blocked content class
.cmplz-video {
//prevent theme's from hiding the placeholder image with a background color
&.cmplz-iframe-styles {
background-color:transparent;
}
//hide placeholder video
&.cmplz-hidden {
visibility: hidden !important;
}
}
.cmplz-blocked-content-notice {
display: none;
}
//set height to inherit, so for example kadence wp or other gutenberg blocks can inherit the height from the parent element
.cmplz-placeholder-parent {
height:inherit;
}
//show the notice when the banner is loaded completely
//it's hidden by default, with an inline css snippet to make sure it's loaded instantly
.cmplz-optin, .cmplz-optout {
.cmplz-blocked-content-container, .cmplz-wp-video {
.cmplz-blocked-content-notice {
display: block;
}
}
}
.cmplz-blocked-content-container, .cmplz-wp-video {
animation-name: cmplz-fadein;
animation-duration: 600ms;
background: #FFF;
border: 0;
border-radius: 3px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);
display: flex;
justify-content: center;
align-items: center;
background-repeat: no-repeat !important;
background-size: cover !important;
height: inherit;
position: relative;
//Geo My WP integration
&.gmw-map-cover {
max-height: 100%;
position: absolute;
}
&.cmplz-video-placeholder {
padding-bottom: initial;
}
iframe {
visibility:hidden;
max-height: 100%;
border: 0 !important;
}
.cmplz-custom-accept-btn {
&:focus {
border: 1px dotted #cecece;
}
white-space: normal;
text-transform: initial;
cursor: pointer;
position: absolute !important;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 200px;
font-size: 14px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
color: #fff;
text-align: center;
/*make sure the container is on top of the iframe, but below our cookie notice */
z-index: 98;
/*We need some lineheight, for example Elementor will force a lineheight of 0*/
line-height: 23px;
}
.cmplz-blocked-content-notice {
white-space: normal;
text-transform: initial;
position: absolute !important;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 300px;
font-size: 14px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
color: #fff;
text-align: center;
/*make sure the container is on top of the iframe, but below our cookie notice */
z-index: 98;
/*We need some lineheight, for example Elementor will force a lineheight of 0*/
line-height: 23px;
.cmplz-links {
display:block;
margin-bottom:10px;
a {
color:#fff;
}
}
.cmplz-blocked-content-notice-body {
display:block;
}
}
}
//cannot apply to wp-video as well.
.cmplz-blocked-content-container {
div div {
display: none
}
}
//should only apply to wp-video
.cmplz-wp-video {
.cmplz-placeholder-element{
width: 100%;
height: inherit;
}
}
@keyframes cmplz-fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}

View File

@@ -0,0 +1,251 @@
/*
To ensure this file is minified, comment the import in document.scss, then save this file.
*/
/* Used in documents to prevent the email from being visible to spambots */
.cmplz-obfuscate span {
display: none;
}
#cmplz-manage-consent-container {
display: none;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary {
display: block;
cursor: pointer;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary::-webkit-details-marker, #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary::marker {
display: none;
content: "";
}
.cmplz-alert {
display: none;
padding: 7px;
color: white;
margin: 10px 0;
}
.cmplz-alert.cmplz-error {
background-color: #f44336;
}
.cmplz-alert.cmplz-success {
background-color: green;
}
.cmplz-close {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.cmplz-close:hover {
color: black;
}
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description, #cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data, #cmplz-document .cmplz-dropdown .cmplz-service-description, #cmplz-document .cmplz-dropdown .cmplz-sharing-data, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-service-description, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-sharing-data {
display: inline-block;
width: calc(50% - 35px);
vertical-align: top;
}
@media only screen and (max-width: 600px) {
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description, #cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data, #cmplz-document .cmplz-dropdown .cmplz-service-description, #cmplz-document .cmplz-dropdown .cmplz-sharing-data, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-service-description, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-sharing-data {
width: 100%;
}
}
#cmplz-cookies-overview .cmplz-dropdown summary, #cmplz-document .cmplz-dropdown summary, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary {
display: block;
cursor: pointer;
}
#cmplz-cookies-overview .cmplz-dropdown summary::-webkit-details-marker, #cmplz-cookies-overview .cmplz-dropdown summary::marker, #cmplz-document .cmplz-dropdown summary::-webkit-details-marker, #cmplz-document .cmplz-dropdown summary::marker, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary::-webkit-details-marker, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary::marker {
display: none;
content: "";
}
#cmplz-cookies-overview .cmplz-dropdown summary div, #cmplz-document .cmplz-dropdown summary div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div {
display: grid;
grid-template: "heading chevron";
grid-template-columns: 2fr 25px;
grid-gap: 15px;
align-items: center;
}
#cmplz-cookies-overview .cmplz-dropdown summary div h3, #cmplz-document .cmplz-dropdown summary div h3, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div h3 {
grid-area: heading;
margin: 0;
}
#cmplz-cookies-overview .cmplz-dropdown summary div:after, #cmplz-document .cmplz-dropdown summary div:after, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div:after {
grid-area: chevron;
}
#cmplz-cookies-overview .cmplz-dropdown summary div input[data-category=functional], #cmplz-document .cmplz-dropdown summary div input[data-category=functional], .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div input[data-category=functional] {
visibility: hidden;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary {
display: block;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
grid-template: "heading paragraph label checkbox chevron";
grid-template-columns: 2fr auto 0 auto 25px;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p {
grid-area: paragraph;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
display: grid;
}
@media only screen and (min-width: 600px) {
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
grid-column: span 2;
grid-template-columns: 1fr 1fr 1fr;
grid-template: "purpose purpose purpose" "header1 header2 header3" auto;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose {
grid-area: purpose;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header {
grid-area: header1;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header {
grid-area: header2;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header {
grid-area: header3;
}
}
@media only screen and (max-width: 600px) {
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
grid-template-columns: 100px 1fr;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose {
grid-column: span 2;
}
}
/**
* Categories on the cookie policy
* Do not wrap in cmplz-document, to ensure it works with the separate shortcode
*/
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories {
margin-top: 10px;
display: block;
width: 100%;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
background-color: rgba(239, 239, 239, 0.25);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category summary::marker {
display: none;
content: "";
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category summary::-webkit-details-marker {
display: none;
content: "";
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
padding: 10px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category:not(:last-child) {
margin-bottom: 5px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
display: grid;
grid-template-columns: 1fr auto 25px;
grid-template-rows: auto;
align-items: center;
grid-gap: 10px;
padding: 5px 10px;
background-color: rgba(239, 239, 239, 0.5);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header section {
padding: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2 {
grid-column-start: 1;
width: 100%;
justify-self: start;
font-size: 18px;
text-align: left;
margin-top: 8px;
text-transform: initial;
padding-bottom: 10px;
border-bottom: 0;
margin-bottom: 0px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2:before {
height: 0;
margin: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
font-size: var(--cmplz_category_header_active_font_size);
color: var(--cmplz_category_header_always_active_color);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label, #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active input {
display: none;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox {
display: flex;
align-items: center;
margin: 0;
padding: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open {
display: flex;
align-items: center;
justify-content: center;
grid-column-start: 3;
cursor: pointer;
content: "";
background: var(--cmplz_category_open_icon_url) no-repeat;
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-size: cover;
height: 25px;
width: 25px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category[open] {
padding-bottom: 1px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category[open] summary .cmplz-category-header:after, #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category[open] summary .cmplz-icon.cmplz-open {
transform: rotate(180deg);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["document-grid.less"],"names":[],"mappings":";;;AAGA;EACE,aAAA;;AAEF;EACE,cAAA;EACA,2BAAA;EACA,mBAAA;;AAGF,+BAA+B,+BAC7B,kBACD;EACE,cAAA;EACA,eAAA;;AACA,+BAL4B,+BAC7B,kBACD,QAGG;AAA0B,+BALC,+BAC7B,kBACD,QAG8B;EAC7B,aAAA;EACA,SAAQ,EAAR;;AAMF;EACE,aAAA;EACA,YAAA;EACA,YAAA;EACA,cAAA;;AACA,YAAC;EACF,yBAAA;;AAEC,YAAC;EACF,uBAAA;;AAID;EACE,iBAAA;EACA,YAAA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,gBAAA;;AACA,YAAC;EACF,YAAA;;AAKD,uBACC,gBACA;AAFyB,eACzB,gBACA;AAF0C,sBAAuB,qBACjE,gBACA;AAFD,uBACC,gBAC4B;AAFH,eACzB,gBAC4B;AAFc,sBAAuB,qBACjE,gBAC4B;EAC3B,qBAAA;EACA,OAAO,gBAAP;EACA,mBAAA;;AAGD,wBAA0C;EAA1C,uBAPA,gBAQC;EADD,eAPA,gBAQC;EADD,sBARiE,qBACjE,gBAQC;EADD,uBAPA,gBAQ6B;EAD7B,eAPA,gBAQ6B;EAD7B,sBARiE,qBACjE,gBAQ6B;IAC3B,WAAA;;;AAVH,uBACC,gBAYA;AAbyB,eACzB,gBAYA;AAb0C,sBAAuB,qBACjE,gBAYA;EACG,cAAA;EACA,eAAA;;AACF,uBAfD,gBAYA,QAGE;AAAD,eAfD,gBAYA,QAGE;AAAD,sBAhBgE,qBACjE,gBAYA,QAGE;AAA0B,uBAf5B,gBAYA,QAG6B;AAAD,eAf5B,gBAYA,QAG6B;AAAD,sBAhBqC,qBACjE,gBAYA,QAG6B;EAC1B,aAAA;EACA,SAAQ,EAAR;;AAlBJ,uBACC,gBAYA,QAOE;AApBuB,eACzB,gBAYA,QAOE;AApBwC,sBAAuB,qBACjE,gBAYA,QAOE;EACD,aAAA;EACA,eAAe,iBAAf;EACA,+BAAA;EACA,cAAA;EACA,mBAAA;;AAzBF,uBACC,gBAYA,QAOE,IAMD;AA1BwB,eACzB,gBAYA,QAOE,IAMD;AA1ByC,sBAAuB,qBACjE,gBAYA,QAOE,IAMD;EACE,kBAAA;EACA,SAAA;;AAEF,uBA7BD,gBAYA,QAOE,IAUA;AAAD,eA7BD,gBAYA,QAOE,IAUA;AAAD,sBA9BgE,qBACjE,gBAYA,QAOE,IAUA;EACC,kBAAA;;AA/BJ,uBACC,gBAYA,QAOE,IAaD,MAAK;AAjCmB,eACzB,gBAYA,QAOE,IAaD,MAAK;AAjCoC,sBAAuB,qBACjE,gBAYA,QAOE,IAaD,MAAK;EACH,kBAAA;;AAIH,uBArCA,gBAqCC,4BACA;AADD,eArCA,gBAqCC,4BACA;AADD,sBAtCiE,qBACjE,gBAqCC,4BACA;EACE,cAAA;;AAFH,uBArCA,gBAqCC,4BACA,QAEE;AAHH,eArCA,gBAqCC,4BACA,QAEE;AAHH,sBAtCiE,qBACjE,gBAqCC,4BACA,QAEE;EACD,eAAe,0CAAf;EACA,2CAAA;;AALF,uBArCA,gBAqCC,4BACA,QAEE,IAGD;AANF,eArCA,gBAqCC,4BACA,QAEE,IAGD;AANF,sBAtCiE,qBACjE,gBAqCC,4BACA,QAEE,IAGD;EACC,oBAAA;;AAPH,uBArCA,gBAqCC,4BAWA;AAXD,eArCA,gBAqCC,4BAWA;AAXD,sBAtCiE,qBACjE,gBAqCC,4BAWA;EACC,aAAA;;AAEA,wBAA0C;EAA1C,uBAnDF,gBAqCC,4BAWA;EAGC,eAnDF,gBAqCC,4BAWA;EAGC,sBApD+D,qBACjE,gBAqCC,4BAWA;IAII,mBAAA;IACA,kCAAA;IACA,eAAe,0BAA0B,8BAAzC;;EAHH,uBAnDF,gBAqCC,4BAWA,qBAOE;EAJD,eAnDF,gBAqCC,4BAWA,qBAOE;EAJD,sBApD+D,qBACjE,gBAqCC,4BAWA,qBAOE;IACC,kBAAA;;EALF,uBAnDF,gBAqCC,4BAWA,qBAWE;EARD,eAnDF,gBAqCC,4BAWA,qBAWE;EARD,sBApD+D,qBACjE,gBAqCC,4BAWA,qBAWE;IACC,kBAAA;;EATF,uBAnDF,gBAqCC,4BAWA,qBAeE;EAZD,eAnDF,gBAqCC,4BAWA,qBAeE;EAZD,sBApD+D,qBACjE,gBAqCC,4BAWA,qBAeE;IACC,kBAAA;;EAbF,uBAnDF,gBAqCC,4BAWA,qBAmBE;EAhBD,eAnDF,gBAqCC,4BAWA,qBAmBE;EAhBD,sBApD+D,qBACjE,gBAqCC,4BAWA,qBAmBE;IACC,kBAAA;;;AAIF,wBAA0C;EAA1C,uBAxEF,gBAqCC,4BAWA;EAwBC,eAxEF,gBAqCC,4BAWA;EAwBC,sBAzE+D,qBACjE,gBAqCC,4BAWA;IAyBE,gCAAA;;EADD,uBAxEF,gBAqCC,4BAWA,qBA0BE;EAFD,eAxEF,gBAqCC,4BAWA,qBA0BE;EAFD,sBAzE+D,qBACjE,gBAqCC,4BAWA,qBA0BE;IACC,mBAAA;;;;;;;AAYL,+BAA+B,+BAC7B;EACD,gBAAA;EACA,cAAA;EACA,WAAA;;AAJD,+BAA+B,+BAC7B,kBAID;EAkBE,2CAAA;;AAvBH,+BAA+B,+BAC7B,kBAID,gBAEE,QAAO;EACR,aAAA;EACA,SAAS,EAAT;;AATF,+BAA+B,+BAC7B,kBAID,gBAME,QAAO;EACR,aAAA;EACA,SAAS,EAAT;;AAbF,+BAA+B,+BAC7B,kBAID,gBAUE;EACD,aAAA;;AAGC,+BAnB4B,+BAC7B,kBAID,gBAcG,IAAI;EACN,kBAAA;;AApBF,+BAA+B,+BAC7B,kBAID,gBAmBE;EACD,aAAA;EACA,oCAAA;EACA,wBAAA;EACA,mBAAA;EACA,cAAA;EACA,iBAAA;EACA,0CAAA;;AA/BF,+BAA+B,+BAC7B,kBAID,gBAmBE,uBAQD;EACE,gBAAA;;AAjCJ,+BAA+B,+BAC7B,kBAID,gBAmBE,uBAWD;EACE,oBAAA;EACA,WAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,uBAAA;EACA,oBAAA;EACA,gBAAA;EACA,kBAAA;;AAEA,+BA/C2B,+BAC7B,kBAID,gBAmBE,uBAWD,GAYG;EACF,SAAA;EACA,eAAA;;AAjDH,+BAA+B,+BAC7B,kBAID,gBAmBE,uBA8BD;EACE,WAAW,6CAAX;EACA,OAAO,gDAAP;;AAxDJ,+BAA+B,+BAC7B,kBAID,gBAmBE,uBA8BD,qBAGE;AAzDJ,+BAA+B,+BAC7B,kBAID,gBAmBE,uBA8BD,qBAGS;EACR,aAAA;;AA1DH,+BAA+B,+BAC7B,kBAID,gBAmBE,uBAuCD;EACE,aAAA;EACA,mBAAA;EACA,SAAA;EACA,gBAAA;;AAnEJ,+BAA+B,+BAC7B,kBAID,gBAmBE,uBA+CD,YAAW;EACT,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,oBAAA;EACA,eAAA;EACA,SAAS,EAAT;EACA,YAAY,6CAAZ;EACA,WAAW,YAAX;EACA,iCAAA;EACA,8BAAA;EACA,4BAAA;EACA,yBAAA;EACA,sBAAA;EACA,YAAA;EACA,WAAA;;AAID,+BA1F4B,+BAC7B,kBAID,gBAqFG;EACF,mBAAA;;AADC,+BA1F4B,+BAC7B,kBAID,gBAqFG,MAEF,QAAQ,uBAAsB;AAF7B,+BA1F4B,+BAC7B,kBAID,gBAqFG,MAEoC,QAAQ,YAAW;EACvD,WAAW,cAAX","file":"document-grid.css"}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,243 @@
/*
To ensure this file is minified, comment the import in document.scss, then save this file.
*/
/* Used in documents to prevent the email from being visible to spambots */
.cmplz-obfuscate span {
display: none;
}
#cmplz-manage-consent-container {
display:none;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container {
.cmplz-categories {
summary{
display:block;
cursor:pointer;
&::-webkit-details-marker, &::marker {
display:none;
content:'';
}
}
}
}
.cmplz-alert {
display:none;
padding: 7px;
color: white;
margin: 10px 0;
&.cmplz-error {
background-color: #f44336;
}
&.cmplz-success {
background-color: green;
}
}
.cmplz-close {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
&:hover {
color: black;
}
}
//needs to apply both to separate cookie shortcode, cookie policy and privacy policy
#cmplz-cookies-overview , #cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode{
.cmplz-dropdown {
.cmplz-service-description, .cmplz-sharing-data{
display:inline-block;
width: calc(50% - 35px);
vertical-align: top;
}
@media only screen and (max-width: 600px) {
.cmplz-service-description, .cmplz-sharing-data{
width: 100%;
}
}
summary{
display:block;
cursor:pointer;
&::-webkit-details-marker, &::marker {
display:none;
content:'';
}
div {
display: grid;
grid-template: "heading chevron";
grid-template-columns: 2fr 25px;
grid-gap: 15px;
align-items: center;
h3{
grid-area: heading;
margin: 0;
}
&:after{
grid-area: chevron;
}
input[data-category="functional"] {
visibility:hidden;
}
}
}
&.cmplz-dropdown-cookiepolicy{
summary{
display:block;
div {
grid-template: "heading paragraph label checkbox chevron";
grid-template-columns: 2fr auto 0 auto 25px;
p {
grid-area: paragraph;
}
}
}
.cookies-per-purpose {
display: grid;
@media only screen and (min-width: 600px) {
grid-column: span 2;
grid-template-columns: 1fr 1fr 1fr;
grid-template: "purpose purpose purpose" "header1 header2 header3" auto;
.purpose {
grid-area: purpose;
}
.name-header {
grid-area: header1;
}
.retention-header {
grid-area: header2;
}
.function-header {
grid-area: header3;
}
}
@media only screen and (max-width: 600px) {
grid-template-columns: 100px 1fr;
.purpose {
grid-column: span 2;
}
}
}
}
}
}
/**
* Categories on the cookie policy
* Do not wrap in cmplz-document, to ensure it works with the separate shortcode
*/
#cmplz-manage-consent-container.cmplz-manage-consent-container {
.cmplz-categories {
margin-top:10px;
display: block;
width:100%;
.cmplz-category {
summary::marker {
display: none;
content: '';
}
summary::-webkit-details-marker {
display: none;
content: '';
}
.cmplz-description {
padding:10px;
}
&:not(:last-child) {
margin-bottom: 5px;
}
background-color: rgba(239, 239, 239, .25);
.cmplz-category-header {
display: grid;
grid-template-columns: 1fr auto 25px;
grid-template-rows: auto;
align-items: center;
grid-gap: 10px;
padding: 5px 10px;
background-color: rgba(239, 239, 239, .5);
section {
padding:initial;
}
h2 {
grid-column-start: 1;
width:100%;
justify-self: start;
font-size: 18px;
text-align: left;
margin-top: 8px;
text-transform: initial;
padding-bottom: 10px;
border-bottom: 0;
margin-bottom: 0px;
//twenty nineteen fix
&:before {
height: 0;
margin: initial;
}
}
// Always active
.cmplz-always-active {
font-size: var(--cmplz_category_header_active_font_size);
color: var(--cmplz_category_header_always_active_color);
label, input {
display:none;
}
}
// Center checkbox
.cmplz-banner-checkbox {
display: flex;
align-items: center;
margin: 0;
padding: initial;
}
// Complianz marker
.cmplz-icon.cmplz-open {
display: flex;
align-items: center;
justify-content: center;
grid-column-start: 3;
cursor: pointer;
content: '';
background: var(--cmplz_category_open_icon_url) no-repeat;
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-size: cover;
height: 25px;
width: 25px;
}
}
&[open]{
padding-bottom: 1px;
summary .cmplz-category-header:after, summary .cmplz-icon.cmplz-open {
transform: rotate(180deg);
}
}
}
}
}

View File

@@ -0,0 +1,524 @@
/*
To ensure this file is minified, comment the import in document.scss, then save this file.
*/
/* Used in documents to prevent the email from being visible to spambots */
.cmplz-obfuscate span {
display: none;
}
#cmplz-manage-consent-container {
display: none;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary {
display: block;
cursor: pointer;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary::-webkit-details-marker, #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary::marker {
display: none;
content: "";
}
.cmplz-alert {
display: none;
padding: 7px;
color: white;
margin: 10px 0;
}
.cmplz-alert.cmplz-error {
background-color: #f44336;
}
.cmplz-alert.cmplz-success {
background-color: green;
}
.cmplz-close {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.cmplz-close:hover {
color: black;
}
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description, #cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data, #cmplz-document .cmplz-dropdown .cmplz-service-description, #cmplz-document .cmplz-dropdown .cmplz-sharing-data, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-service-description, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-sharing-data {
display: inline-block;
width: calc(50% - 35px);
vertical-align: top;
}
@media only screen and (max-width: 600px) {
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description, #cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data, #cmplz-document .cmplz-dropdown .cmplz-service-description, #cmplz-document .cmplz-dropdown .cmplz-sharing-data, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-service-description, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-sharing-data {
width: 100%;
}
}
#cmplz-cookies-overview .cmplz-dropdown summary, #cmplz-document .cmplz-dropdown summary, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary {
display: block;
cursor: pointer;
}
#cmplz-cookies-overview .cmplz-dropdown summary::-webkit-details-marker, #cmplz-cookies-overview .cmplz-dropdown summary::marker, #cmplz-document .cmplz-dropdown summary::-webkit-details-marker, #cmplz-document .cmplz-dropdown summary::marker, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary::-webkit-details-marker, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary::marker {
display: none;
content: "";
}
#cmplz-cookies-overview .cmplz-dropdown summary div, #cmplz-document .cmplz-dropdown summary div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div {
display: grid;
grid-template: "heading chevron";
grid-template-columns: 2fr 25px;
grid-gap: 15px;
align-items: center;
}
#cmplz-cookies-overview .cmplz-dropdown summary div h3, #cmplz-document .cmplz-dropdown summary div h3, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div h3 {
grid-area: heading;
margin: 0;
}
#cmplz-cookies-overview .cmplz-dropdown summary div:after, #cmplz-document .cmplz-dropdown summary div:after, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div:after {
grid-area: chevron;
}
#cmplz-cookies-overview .cmplz-dropdown summary div input[data-category=functional], #cmplz-document .cmplz-dropdown summary div input[data-category=functional], .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div input[data-category=functional] {
visibility: hidden;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary {
display: block;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
grid-template: "heading paragraph label checkbox chevron";
grid-template-columns: 2fr auto 0 auto 25px;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p {
grid-area: paragraph;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
display: grid;
}
@media only screen and (min-width: 600px) {
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
grid-column: span 2;
grid-template-columns: 1fr 1fr 1fr;
grid-template: "purpose purpose purpose" "header1 header2 header3" auto;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose {
grid-area: purpose;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header {
grid-area: header1;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header {
grid-area: header2;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header {
grid-area: header3;
}
}
@media only screen and (max-width: 600px) {
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
grid-template-columns: 100px 1fr;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose {
grid-column: span 2;
}
}
/**
* Categories on the cookie policy
* Do not wrap in cmplz-document, to ensure it works with the separate shortcode
*/
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories {
margin-top: 10px;
display: block;
width: 100%;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
background-color: rgba(239, 239, 239, 0.25);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category summary::marker {
display: none;
content: "";
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category summary::-webkit-details-marker {
display: none;
content: "";
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
padding: 10px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category:not(:last-child) {
margin-bottom: 5px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
display: grid;
grid-template-columns: 1fr auto 25px;
grid-template-rows: auto;
align-items: center;
grid-gap: 10px;
padding: 5px 10px;
background-color: rgba(239, 239, 239, 0.5);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header section {
padding: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2 {
grid-column-start: 1;
width: 100%;
justify-self: start;
font-size: 18px;
text-align: left;
margin-top: 8px;
text-transform: initial;
padding-bottom: 10px;
border-bottom: 0;
margin-bottom: 0px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2:before {
height: 0;
margin: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
font-size: var(--cmplz_category_header_active_font_size);
color: var(--cmplz_category_header_always_active_color);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label, #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active input {
display: none;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox {
display: flex;
align-items: center;
margin: 0;
padding: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open {
display: flex;
align-items: center;
justify-content: center;
grid-column-start: 3;
cursor: pointer;
content: "";
background: var(--cmplz_category_open_icon_url) no-repeat;
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-size: cover;
height: 25px;
width: 25px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category[open] {
padding-bottom: 1px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category[open] summary .cmplz-category-header:after, #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category[open] summary .cmplz-icon.cmplz-open {
transform: rotate(180deg);
}
.postbox #cmplz-document {
margin: auto auto;
}
#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
font-size: 14px;
margin-top: 0;
max-width: 800px;
text-justify: inter-word;
/* Buttons styles */
/*WCAG2.0 */
}
#cmplz-document input::-moz-focus-inner,
#cmplz-document button::-moz-focus-inner, .editor-styles-wrapper .cmplz-unlinked-mode input::-moz-focus-inner,
.editor-styles-wrapper .cmplz-unlinked-mode button::-moz-focus-inner {
border: 0;
padding: 0;
}
#cmplz-document a, .editor-styles-wrapper .cmplz-unlinked-mode a {
text-decoration: underline;
}
#cmplz-document a[target=_blank]::after, .editor-styles-wrapper .cmplz-unlinked-mode a[target=_blank]::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0 3px 0 5px;
}
#cmplz-document a:focus, .editor-styles-wrapper .cmplz-unlinked-mode a:focus {
border: 1px solid black;
padding: 2px;
}
#cmplz-document #cmplz-dnsmpd-form label, .editor-styles-wrapper .cmplz-unlinked-mode #cmplz-dnsmpd-form label {
margin-right: 20px;
min-width: 100px;
display: inline-block;
}
#cmplz-document h2, #cmplz-document h3, .editor-styles-wrapper .cmplz-unlinked-mode h2, .editor-styles-wrapper .cmplz-unlinked-mode h3 {
font-size: 22px;
text-align: left;
margin-top: 15px;
text-transform: initial;
padding-bottom: 10px;
margin-bottom: 10px;
}
#cmplz-document.impressum h2, #cmplz-document.impressum h3, .editor-styles-wrapper .cmplz-unlinked-mode.impressum h2, .editor-styles-wrapper .cmplz-unlinked-mode.impressum h3 {
border-bottom: none;
font-size: 1em;
padding-bottom: 5px;
margin-bottom: 5px;
}
#cmplz-document.impressum p, .editor-styles-wrapper .cmplz-unlinked-mode.impressum p {
margin-bottom: 7px;
}
#cmplz-document h4, .editor-styles-wrapper .cmplz-unlinked-mode h4 {
font-size: 18px;
text-align: left;
margin-top: 15px;
margin-bottom: 5px;
text-transform: initial;
}
#cmplz-document h5, .editor-styles-wrapper .cmplz-unlinked-mode h5 {
font-size: 14px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
text-transform: initial;
}
#cmplz-document h3.annex, #cmplz-document h4.annex, .editor-styles-wrapper .cmplz-unlinked-mode h3.annex, .editor-styles-wrapper .cmplz-unlinked-mode h4.annex {
font-weight: bold;
}
#cmplz-document span h3, .editor-styles-wrapper .cmplz-unlinked-mode span h3 {
font-size: 14px;
border-bottom: 0;
}
#cmplz-document p, #cmplz-document li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode p, .editor-styles-wrapper .cmplz-unlinked-mode li, .editor-styles-wrapper .cmplz-unlinked-mode td {
font-size: 14px;
margin-top: 0;
}
#cmplz-document ol.alphabetic, .editor-styles-wrapper .cmplz-unlinked-mode ol.alphabetic {
counter-reset: list;
list-style-type: none;
}
#cmplz-document ol.alphabetic li:before, .editor-styles-wrapper .cmplz-unlinked-mode ol.alphabetic li:before {
font-weight: bold;
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}
#cmplz-document ul, .editor-styles-wrapper .cmplz-unlinked-mode ul {
list-style: disc;
margin-left: 15px;
margin-bottom: 15px;
}
#cmplz-document ol.alphabetic ol, .editor-styles-wrapper .cmplz-unlinked-mode ol.alphabetic ol {
counter-reset: list;
list-style-type: none;
}
#cmplz-document ol.alphabetic ol li:before, .editor-styles-wrapper .cmplz-unlinked-mode ol.alphabetic ol li:before {
font-weight: bold;
content: counter(list, decimal) ") ";
counter-increment: list;
}
#cmplz-document .cmplz-subtitle, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-subtitle {
font-weight: bold;
margin-top: 25px;
}
#cmplz-document .cmplz-indent, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-indent {
margin-left: 36px;
}
#cmplz-cookies-overview .cmplz-dropdown, #cmplz-document .cmplz-dropdown, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown {
background-color: rgba(239, 239, 239, 0.25);
}
#cmplz-cookies-overview .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown h4, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h4 {
font-size: 18px;
text-align: left;
margin-top: 15px;
margin-bottom: 5px;
text-transform: initial;
}
#cmplz-cookies-overview .cmplz-dropdown p, #cmplz-cookies-overview .cmplz-dropdown a, #cmplz-document .cmplz-dropdown p, #cmplz-document .cmplz-dropdown a, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown a {
font-size: 14px;
margin-top: 0;
}
#cmplz-cookies-overview .cmplz-dropdown p, #cmplz-cookies-overview .cmplz-dropdown h4, #cmplz-cookies-overview .cmplz-dropdown ul, #cmplz-document .cmplz-dropdown p, #cmplz-document .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown ul, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h4, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown ul {
padding: 0 15px;
}
#cmplz-cookies-overview .cmplz-dropdown p.legal-obligations-description, #cmplz-document .cmplz-dropdown p.legal-obligations-description, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown p.legal-obligations-description {
padding-bottom: 15px;
}
#cmplz-cookies-overview .cmplz-dropdown summary::marker, #cmplz-document .cmplz-dropdown summary::marker, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary::marker {
display: none;
content: "";
}
#cmplz-cookies-overview .cmplz-dropdown summary::-webkit-details-marker, #cmplz-document .cmplz-dropdown summary::-webkit-details-marker, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary::-webkit-details-marker {
display: none;
content: "";
}
#cmplz-cookies-overview .cmplz-dropdown summary, #cmplz-document .cmplz-dropdown summary, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary {
display: block;
background-color: rgba(239, 239, 239, 0.5);
margin: 5px 0;
padding: 5px 10px;
align-items: center;
justify-items: stretch;
}
#cmplz-cookies-overview .cmplz-dropdown summary h3, #cmplz-document .cmplz-dropdown summary h3, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary h3 {
padding: 0 5px;
border-bottom: 0;
font-size: 18px;
border-bottom: 0;
}
#cmplz-cookies-overview .cmplz-dropdown summary p, #cmplz-document .cmplz-dropdown summary p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary p {
text-align: right;
padding: 0;
margin: 0;
font-size: 14px;
border-bottom: 0;
}
#cmplz-cookies-overview .cmplz-dropdown summary div:after, #cmplz-document .cmplz-dropdown summary div:after, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div:after {
cursor: pointer;
content: "";
background: url(../images/chevron-down.svg) no-repeat;
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-size: cover;
height: 18px;
width: 18px;
margin: 3px;
}
#cmplz-cookies-overview .cmplz-dropdown[open], #cmplz-document .cmplz-dropdown[open], .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown[open] {
padding-bottom: 1px;
}
#cmplz-cookies-overview .cmplz-dropdown[open] summary div:after, #cmplz-document .cmplz-dropdown[open] summary div:after, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown[open] summary div:after {
transform: rotate(180deg);
}
#cmplz-cookies-overview .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown h4, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h4 {
font-size: 15px;
margin: 5px 0;
}
#cmplz-cookies-overview .cmplz-dropdown h5, #cmplz-document .cmplz-dropdown h5, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h5 {
margin: 0;
}
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description, #cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data, #cmplz-document .cmplz-dropdown .cmplz-service-description, #cmplz-document .cmplz-dropdown .cmplz-sharing-data, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-service-description, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-sharing-data {
padding: 0 15px 15px;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose, #cmplz-document .cmplz-dropdown .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose {
border: 1px solid #dadada;
grid-gap: 1px;
background-color: #dadada;
margin-bottom: 10px;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div, #cmplz-document .cmplz-dropdown .cookies-per-purpose div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div {
background-color: white;
padding: 15px;
}
@media only screen and (min-width: 600px) {
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name-header, #cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose .name-header {
background-color: #f7f7f7;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .retention-header, #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose .retention-header {
background-color: #f7f7f7;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .function-header, #cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose .function-header {
background-color: #f7f7f7;
}
}
@media only screen and (max-width: 600px) {
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose h5, #cmplz-document .cmplz-dropdown .cookies-per-purpose h5, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose h5 {
line-height: 1.8;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7), #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
#cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
#cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
#cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
#cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
#cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7), .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
.editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
.editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
.editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
.editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
.editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7) {
background-color: #f7f7f7;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,260 @@
@use 'document-grid';
.postbox #cmplz-document {
margin: auto auto;
}
#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
font-size: 14px;
margin-top: 0;
max-width: 800px;
// text-align: justify;
text-justify: inter-word;
/* Buttons styles */
input::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
padding: 0;
}
/*WCAG2.0 */
a {
text-decoration: underline;
}
a[target="_blank"]::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0 3px 0 5px;
}
a:focus {
border: 1px solid black;
padding:2px;
}
#cmplz-dnsmpd-form label{
margin-right:20px;
min-width:100px;
display:inline-block
}
h2, h3 {
font-size: 22px;
text-align: left;
margin-top: 15px;
text-transform: initial;
padding-bottom: 10px;
margin-bottom: 10px;
}
&.impressum {
h2, h3 {
border-bottom: none;
font-size: 1em;
padding-bottom:5px;
margin-bottom:5px;
}
p {
margin-bottom:7px;
}
}
h4 {
font-size: 18px;
text-align: left;
margin-top: 15px;
margin-bottom: 5px;
text-transform: initial;
}
h5 {
font-size: 14px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
text-transform: initial;
}
h3.annex, h4.annex {
font-weight: bold;
}
span h3 {
font-size: 14px;
border-bottom: 0;
}
p, li, td {
font-size: 14px;
margin-top: 0;
}
ol.alphabetic {
counter-reset: list;
list-style-type: none;
}
ol.alphabetic li:before {
font-weight: bold;
content: counter(list, lower-alpha) ") ";
counter-increment: list
}
ul {
list-style: disc;
margin-left: 15px;
margin-bottom: 15px;
}
ol.alphabetic ol {
counter-reset: list;
list-style-type: none;
}
ol.alphabetic ol li:before {
font-weight: bold;
content: counter(list, decimal) ") ";
counter-increment: list
}
.cmplz-subtitle {
font-weight: bold;
margin-top: 25px;
}
.cmplz-indent{
margin-left:36px;
}
}
//needs to apply both to separate cookie shortcode, cookie policy and privacy policy
#cmplz-cookies-overview, #cmplz-document,.editor-styles-wrapper .cmplz-unlinked-mode{
.cmplz-dropdown {
background-color: rgba(239, 239, 239, 0.25);
h4 {
font-size: 18px;
text-align: left;
margin-top: 15px;
margin-bottom: 5px;
text-transform: initial;
}
p, a {
font-size: 14px;
margin-top: 0;
}
p, h4, ul{
padding: 0 15px ;
}
p{
&.legal-obligations-description{
padding-bottom: 15px;
}
}
// Remove default marker
summary::marker {
display: none;
content: '';
}
summary::-webkit-details-marker {
display: none;
content: '';
}
summary{
display:block;
background-color: rgba(239, 239, 239, 0.5);
margin: 5px 0;
padding: 5px 10px;
align-items: center;
justify-items: stretch;
h3 {
padding: 0 5px;
border-bottom: 0;
font-size: 18px;
border-bottom: 0;
}
p{
text-align: right;
padding: 0;
margin: 0;
font-size: 14px;
border-bottom: 0;
}
div {
&:after {
cursor: pointer;
content: '';
background: url(../images/chevron-down.svg) no-repeat;
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-size: cover;
height: 18px;
width: 18px;
margin: 3px;
}
}
}
&[open]{
padding-bottom: 1px;
summary div:after {
transform: rotate(180deg);
}
}
h4 {
font-size: 15px;
margin: 5px 0;
}
h5 {
margin: 0;
}
.cmplz-service-description, .cmplz-sharing-data {
padding: 0 15px 15px;
}
.cookies-per-purpose {
border: 1px solid #dadada;
grid-gap: 1px;
background-color: #dadada;
margin-bottom: 10px;
div {
background-color: white;
padding: 15px;
}
@media only screen and (min-width: 600px) {
.name-header {
background-color: #f7f7f7;
}
.retention-header {
background-color: #f7f7f7;
}
.function-header {
background-color: #f7f7f7;
}
}
@media only screen and (max-width: 600px) {
h5 {
line-height: 1.8;
}
div:nth-child(12n+2),
div:nth-child(12n+3),
div:nth-child(12n+4),
div:nth-child(12n+5),
div:nth-child(12n+6),
div:nth-child(12n+7) {
background-color: #f7f7f7;
}
}
}
}
}

View File

@@ -0,0 +1 @@
<?php //You don't belong here. ?>

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,81 @@
:root {
--rsp-spacing-xxs: 5px;
--rsp-spacing-xs: 10px;
--rsp-spacing-s: 15px;
--rsp-spacing-m: 20px;
--rsp-spacing-l: 25px;
--rsp-spacing-xl: 30px;
--rsp-grid-margin: var(--rsp-spacing-s);
--rsp-grid-gap: var(--rsp-spacing-m);
--rsp-border-radius: 12px;
--rsp-border-radius-s: 8px;
--rsp-border-radius-xs: 4px;
--rsp-border: 1px solid var(--rsp-border-color);
--rsp-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--rsp-box-shadow-dark: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 1px 0px 4px 1px;
--rsp-border-color: #dfdfdf;
--rsp-black: #333;
--rsp-white: #fff;
--rsp-yellow: #f4bf3e;
--rsp-blue: #009fff;
--rsp-dark-blue: rgb(46, 134, 199);
--rsp-green: #2e8a37;
--rsp-red: #D7263D;
--rsp-pink: #E35899;
--rsp-wp-blue: #007cba;
--rsp-yellow-faded: #f2e6c9;
--rsp-blue-faded: #ebf2f9;
--rsp-dark-blue-faded: #ebf2f9;
--rsp-green-faded: #ecf4ed;
--rsp-red-faded: #fbebed;
--rsp-pink-faded: #fceff5;
--rsp-wp-blue-faded: #c6e0ef;
--rsp-background-block-color: var(--rsp-white);
--rsp-background-color: #f0f0f1;
--rsp-input-background-color: #fff;
--rsp-input-text-color: var(--rsp-text-color);
--rsp-input-border-color: var(--rsp-grey-400);
--rsp-text-color: rgba(15, 23, 42, 0.95);
--rsp-text-color-invert: rgba(255, 255, 255, 0.95);
--rsp-text-color-white: rgba(255, 255, 255, 0.95);
--rsp-text-color-light: rgba(15, 23, 42, 0.85);
--rsp-grey-100: #fafafa;
--rsp-grey-200: #f9f9f9;
--rsp-grey-300: #ededed;
--rsp-grey-400: #c6c6c6;
--rsp-grey-500: #737373;
--rsp-grey-600: #696969;
--rsp-color-success: var(--rsp-green);
--rsp-color-error: var(--rsp-red);
--rsp-color-warning: var(--rsp-yellow);
--rsp-color-open: var(--rsp-yellow);
--rsp-color-disabled: var(--rsp-grey-300);
--rsp-fs-90: 0.5625rem;
--rsp-fs-100: 0.6875rem;
--rsp-fs-200: 0.8rem;
--rsp-fs-300: 0.8125rem;
--rsp-fs-400: 0.875rem;
--rsp-fs-500: 1rem;
--rsp-fs-600: 1.125rem;
--rsp-fs-700: 1.25rem;
--rsp-fs-800: 1.5rem;
--rsp-fs-900: 3.5rem;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View File

@@ -0,0 +1,148 @@
// Break points
$rsp-break-xxs: 576px;
$rsp-break-xs: 768px;
$rsp-break-s: 1080px;
$rsp-break-m: 1280px;
$rsp-break-l: 1366px;
$rsp-break-xl: 1440px; // common 13 inch macbook pro width is 1425px
$rsp-break-xxl: 1599px;
:root {
// Margins, Paddings and Border Radius
--rsp-spacing-xxs: 5px;
--rsp-spacing-xs: 10px;
--rsp-spacing-s: 15px;
--rsp-spacing-m: 20px;
--rsp-spacing-l: 25px;
--rsp-spacing-xl: 30px;
// Grid settings
--rsp-grid-margin: var(--rsp-spacing-s);
--rsp-grid-gap: var(--rsp-spacing-m);
// Borders and stuff
--rsp-border-radius: 12px;
--rsp-border-radius-s: 8px;
--rsp-border-radius-xs: 5px;
--rsp-border-radius-input: var(--rsp-border-radius-xs);
--rsp-border: 1px solid var(--rsp-border-color);
--rsp-box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px;
--rsp-border-color: #dfdfdf;
// RSP Brand Colors
--rsp-black: #333;
--rsp-white: #fff;
--rsp-yellow: #f4bf3e;
--rsp-blue: #009fff;
--rsp-dark-blue: #1E73BE;
--rsp-green: #2e8a37;
--rsp-red: #D7263D;
--rsp-pink: #E35899;
--rsp-orange: #f39c12;
--rsp-wp-blue: #007cba;
--rsp-yellow-faded: #fdf4df;
--rsp-blue-faded: #E7F1F9;
--rsp-green-faded: #ecf4ed;
--rsp-red-faded: #fbebed;
--rsp-pink-faded: #fceff5;
--rsp-orange-faded: #fef5ea;
--rsp-wp-blue-faded: #c6e0ef;
--rsp-background-block-color: var(--rsp-white);
--rsp-background-color: #f0f0f1; //#f0f0f1 is the default wordpress bg color
//Input colors
--rsp-input-background-color: #fff;
--rsp-input-text-color: var(--rsp-text-color);
--rsp-input-border-color: var(--rsp-grey-400);
--rsp-text-color: rgba(15, 23, 42, 0.95);
--rsp-text-color-invert: rgba(255, 255, 255, 0.95);
--rsp-text-color-white: rgba(255, 255, 255, 0.95);
--rsp-text-color-light: rgba(15, 23, 42, 0.85);
--rsp-grey-100: #fafafa;
--rsp-grey-200: #f7f7f7;
--rsp-grey-300: #ededed;
--rsp-grey-400: #c6c6c6;
--rsp-grey-500: #737373;
--rsp-grey-600: #696969;
// Notification colors
--rsp-color-success: var(--rsp-green);
--rsp-color-error: var(--rsp-red);
--rsp-color-warning: var(--rsp-yellow);
--rsp-color-open: var(--rsp-yellow);
--rsp-color-disabled: var(--rsp-grey-300);
// Font sizes
// If browser font-size is 16px:
--rsp-fs-90: 0.5625rem; // 9px
--rsp-fs-100: 0.6875rem; // 11px
--rsp-fs-200: 0.75rem; // 12px
--rsp-fs-300: 0.8125rem; // 13px
--rsp-fs-400: 0.875rem; // 14px
--rsp-fs-500: 1rem; // 16px
--rsp-fs-600: 1.125rem; // 18px
--rsp-fs-700: 1.25rem; // 20px
--rsp-fs-800: 1.5rem; // 24px
--rsp-fs-900: 3.5rem; // 40px
--rsp-filter-padding: 6px;
}
@mixin cmplz-block {
background: var(--rsp-background-block-color);
box-shadow: var(--rsp-box-shadow);
border-radius: var(--rsp-border-radius);
}
@mixin cmplz-block-padding {
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
@media screen and (max-width: $rsp-break-m) {
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
}
@media screen and (max-width: $rsp-break-s) {
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
}
//@media screen and (max-width: $rsp-break-xs) {
// padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
//}
}
@mixin cmplz-block-block-padding {
padding-block: var(--rsp-spacing-m);
@media screen and (max-width: $rsp-break-m) {
padding-block: var(--rsp-spacing-xs);
}
@media screen and (max-width: $rsp-break-s) {
padding-block: var(--rsp-spacing-xxs);
}
}
@mixin cmplz-inline-block-padding {
padding-inline: var(--rsp-spacing-l);
@media screen and (max-width: $rsp-break-m) {
padding-inline: var(--rsp-spacing-m);
}
@media screen and (max-width: $rsp-break-s) {
padding-inline: var(--rsp-spacing-s);
}
}
@mixin cmplz-fade-in {
animation-name: fade-in;
animation-duration: 0.4s;
animation-timing-function: ease-in;
}
@keyframes fade-in{
0% { opacity: 0 }
100% { opacity: 1; }
}