From 1527dd32eebd0699140398e6c02924512c58676d Mon Sep 17 00:00:00 2001 From: sebousan Date: Fri, 7 Mar 2025 17:18:17 +0100 Subject: [PATCH 1/2] Add a specific color to arrow button in preferences modal --- src/scss/abstracts/_dark-color-scheme.scss | 3 + src/scss/abstracts/_light-color-scheme.scss | 3 + .../core/components/_preferences-modal.scss | 1692 ++++++++--------- 3 files changed, 848 insertions(+), 850 deletions(-) diff --git a/src/scss/abstracts/_dark-color-scheme.scss b/src/scss/abstracts/_dark-color-scheme.scss index a5e86a24..68265f1c 100644 --- a/src/scss/abstracts/_dark-color-scheme.scss +++ b/src/scss/abstracts/_dark-color-scheme.scss @@ -26,6 +26,9 @@ --cc-toggle-on-knob-bg: var(--cc-btn-primary-color); --cc-toggle-off-knob-bg: var(--cc-btn-primary-color); + --cc-toggle-arrow-bg: var(--cc-btn-secondary-bg); + --cc-toggle-arrow-color: var(--cc-btn-secondary-color); + --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color); // yes (v tick) --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color); // no (x tick) diff --git a/src/scss/abstracts/_light-color-scheme.scss b/src/scss/abstracts/_light-color-scheme.scss index 5fba93ca..7abf8a08 100644 --- a/src/scss/abstracts/_light-color-scheme.scss +++ b/src/scss/abstracts/_light-color-scheme.scss @@ -25,6 +25,9 @@ --cc-toggle-on-knob-bg: #ffffff; --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg); + --cc-toggle-arrow-bg: var(--cc-btn-secondary-bg); + --cc-toggle-arrow-color: var(--cc-btn-secondary-color); + --cc-toggle-enabled-icon-color: var(--cc-bg); // yes (v tick) --cc-toggle-disabled-icon-color: var(--cc-bg); // no (x tick) diff --git a/src/scss/core/components/_preferences-modal.scss b/src/scss/core/components/_preferences-modal.scss index a0983776..4519523f 100644 --- a/src/scss/core/components/_preferences-modal.scss +++ b/src/scss/core/components/_preferences-modal.scss @@ -11,998 +11,990 @@ $service-toggle-knob-height: 19px; $service-toggle-knob-width: 42px; $service-toggle-knob-icon-width: 1.7px; -:root{ - --cc-pm-toggle-border-radius: 4em; +:root { + --cc-pm-toggle-border-radius: 4em; } -#cc-main{ - - /* Make sure the preferences modal is always on top of the consent modal */ - .pm-wrapper{ - position: relative; - z-index: 2; - } - - .pm{ - position: fixed; - display: flex; - width: 100%; - width: unset; - background: var(--cc-bg); - flex-direction: column; - border-radius: var(--cc-modal-border-radius); - opacity: 0; - visibility: hidden; - overflow: hidden; - z-index: 1; - box-shadow: $modal-box-shadow; +#cc-main { + /* Make sure the preferences modal is always on top of the consent modal */ + .pm-wrapper { + position: relative; + z-index: 2; + } + + .pm { + position: fixed; + display: flex; + width: 100%; + width: unset; + background: var(--cc-bg); + flex-direction: column; + border-radius: var(--cc-modal-border-radius); + opacity: 0; + visibility: hidden; + overflow: hidden; + z-index: 1; + box-shadow: $modal-box-shadow; + } + + svg { + fill: none; + width: 100%; + } + + .pm__header, + .pm__body, + .pm__footer { + padding: $padding-y $padding-x; + } + + .pm__header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--cc-separator-border-color); + } + + .pm__title { + display: flex; + align-items: center; + flex: 1; + font-weight: $font-weight-bold; + margin-right: 2em; + } + + .pm__close-btn { + width: calc(#{$btn-height} - 2px); + height: calc(#{$btn-height} - 2px); + position: relative; + background: var(--cc-btn-secondary-bg); + border-radius: var(--cc-btn-border-radius); + border: 1px solid var(--cc-btn-secondary-border-color); + transition: all 0.15s ease; + + span { + display: flex; + height: 100%; + width: 100%; } svg { - fill: none; - width: 100%; + stroke: var(--cc-btn-secondary-color); + transform: scale(0.5); + transition: stroke 0.15s ease; } - .pm__header, - .pm__body, - .pm__footer{ - padding: $padding-y $padding-x; - } + &:hover { + border-color: var(--cc-btn-secondary-hover-border-color); + background: var(--cc-btn-secondary-hover-bg); - .pm__header{ - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid var(--cc-separator-border-color); + svg { + stroke: var(--cc-btn-secondary-hover-color); + } } + } - .pm__title{ - display: flex; - align-items: center; - flex: 1; - font-weight: $font-weight-bold; - margin-right: 2em; - } + .pm__body { + flex: 1; + overflow-y: auto; + overflow-y: overlay; + } - .pm__close-btn{ - width: calc(#{$btn-height} - 2px); - height: calc(#{$btn-height} - 2px); - position: relative; - background: var(--cc-btn-secondary-bg); - border-radius: var(--cc-btn-border-radius); - border: 1px solid var(--cc-btn-secondary-border-color); - transition: all .15s ease; - - span { - display: flex; - height: 100%; - width: 100%; - } - - svg{ - stroke: var(--cc-btn-secondary-color); - transform: scale(.5); - transition: stroke .15s ease; - } + .pm__section, + .pm__section--toggle { + display: flex; + flex-direction: column; + margin-bottom: 0.5em; + border-radius: var(--cc-btn-border-radius); + } - &:hover{ - border-color: var(--cc-btn-secondary-hover-border-color); - background: var(--cc-btn-secondary-hover-bg); - - svg{ - stroke: var(--cc-btn-secondary-hover-color); - } - } + .pm__section--toggle { + .pm__section-desc-wrapper { + overflow: hidden; + margin-top: 0 !important; } + } - .pm__body{ - flex: 1; - overflow-y: auto; - overflow-y: overlay; - } + .pm__section { + padding: 1em; + border: 1px solid var(--cc-separator-border-color); + transition: background-color 0.25s ease, border-color 0.25s ease; - .pm__section, - .pm__section--toggle{ - display: flex; - flex-direction: column; - margin-bottom: 0.5em; - border-radius: var(--cc-btn-border-radius); + &:first-child { + margin-bottom: 2em; + transition: none; + padding: 0; + margin-top: 0; + border: none; + margin-bottom: 2em; } + &:not(:first-child) { + // transition: background-color .25s ease; - .pm__section--toggle{ - .pm__section-desc-wrapper{ - overflow: hidden; - margin-top: 0!important; - } + &:hover { + background: var(--cc-cookie-category-block-bg); + border-color: var(--cc-cookie-category-block-border); + } } - .pm__section{ - padding: 1em; - border: 1px solid var(--cc-separator-border-color); - transition: background-color .25s ease, border-color .25s ease; - - &:first-child{ - margin-bottom: 2em; - transition: none; - padding: 0; - margin-top: 0; - border: none; - margin-bottom: 2em; - } - - &:not(:first-child){ - // transition: background-color .25s ease; - - &:hover{ - background: var(--cc-cookie-category-block-bg); - border-color: var(--cc-cookie-category-block-border); - } - } - - &-toggles{ - - /* If after this section, there is a normal + &-toggles { + /* If after this section, there is a normal * "non-expandable" section => add more margin */ - & + .pm__section{ - margin-top: 2em; - } - } - - &--toggle{ - background: var(--cc-cookie-category-block-bg); - border-top: none; - margin-bottom: $cc-btn-gap; - - .pm__section-title{ - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: var(--cc-cookie-category-block-bg); - position: relative; - padding: 1.1em 5.4em 1.1em 1.2em; - border: 1px solid var(--cc-cookie-category-block-border); - transition: background-color .25s ease, border-color .25s ease; - min-height: 58px; - - &:hover{ - background: var(--cc-cookie-category-block-hover-bg); - border-color: var(--cc-cookie-category-block-hover-border); - } - } - - /* Hide description by default */ - .pm__section-desc-wrapper{ - display: none; - border: 1px solid var(--cc-cookie-category-block-border); - border-top: none; - border-radius: var(--cc-btn-border-radius); - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - .pm__section-desc{ - padding: 1em; - margin-top: 0; - } - - &.is-expanded{ - --cc-cookie-category-block-bg: var(--cc-cookie-category-expanded-block-bg); - --cc-cookie-category-block-border: var(--cc-cookie-category-expanded-block-hover-bg); - - .pm__section-title{ - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - .pm__section-arrow svg{ - transform: scale(.5) rotate(180deg); - } - - .pm__section-desc-wrapper{ - display: flex; - } - } - } - - &--expandable{ - - .pm__section-title{ - padding-left: 3.4em; - cursor: pointer; - } - - .pm__section-arrow{ - width: 20px; - height: 20px; - position: absolute; - left: 18px; - background: var(--cc-toggle-readonly-bg); - display: flex; - justify-content: center; - border-radius: 100%; - pointer-events: none; - - svg { - stroke: var(--cc-btn-secondary-color); - transform: scale(.5); - } - } - } + & + .pm__section { + margin-top: 2em; + } } - .pm__section-title-wrapper{ - position: relative; - display: flex; - align-items: center; - - & + .pm__section-desc-wrapper{ - margin-top: 0.85em; - } - } + &--toggle { + background: var(--cc-cookie-category-block-bg); + border-top: none; + margin-bottom: $cc-btn-gap; - .pm__section-title{ - font-weight: $font-weight-bold; - border-radius: var(--cc-btn-border-radius); - font-size: .95em; - } - - /* START: Services counter badge */ - .pm__badge{ + .pm__section-title { + width: 100%; display: flex; - flex: none; - margin-left: 1em; - border-radius: 5em; - font-weight: $font-weight-bold; - font-size: .8em; - background: var(--cc-btn-secondary-bg); - color: var(--cc-secondary-color); - position: relative; - height: 23px; - width: auto; - min-width: 23px; + justify-content: space-between; align-items: center; - text-align: center; - justify-content: center; - padding: 0 0.6em 1px 0.6em; - white-space: nowrap; - overflow: hidden; - } - - .pm__service-counter{ - padding: 0; - width: 23px; - background: var(--cc-btn-primary-bg); - color: var(--cc-btn-primary-color); - - &[data-counterlabel]{ - padding: 0 .6em 1px .6em; - width: auto; - } - } - /* END: Services counter badge */ - - /* START: Section Toggle */ - .section__toggle-wrapper, - .section__toggle, - .toggle__label, - .toggle__icon{ - width: $toggle-knob-width; - height: $toggle-knob-height; - border-radius: var(--cc-pm-toggle-border-radius); - transform: translateZ(0); /* Fix safari weird glitch */ - } - - .section__toggle-wrapper{ - position: absolute; - right: 18px; - cursor: pointer; - z-index: 1; - } - - .toggle-service{ + background: var(--cc-cookie-category-block-bg); position: relative; - right: 0; - - width: $service-toggle-knob-width; - height: $service-toggle-knob-height; + padding: 1.1em 5.4em 1.1em 1.2em; + border: 1px solid var(--cc-cookie-category-block-border); + transition: background-color 0.25s ease, border-color 0.25s ease; + min-height: 58px; + + &:hover { + background: var(--cc-cookie-category-block-hover-bg); + border-color: var(--cc-cookie-category-block-hover-border); + } + } + + /* Hide description by default */ + .pm__section-desc-wrapper { + display: none; + border: 1px solid var(--cc-cookie-category-block-border); + border-top: none; + border-radius: var(--cc-btn-border-radius); + border-top-left-radius: 0; + border-top-right-radius: 0; + } - .section__toggle, - .toggle__icon, - .toggle__label { - width: $service-toggle-knob-width; - height: $service-toggle-knob-height; - } + .pm__section-desc { + padding: 1em; + margin-top: 0; + } - .toggle__icon{ - position: relative; + &.is-expanded { + --cc-cookie-category-block-bg: var( + --cc-cookie-category-expanded-block-bg + ); + --cc-cookie-category-block-border: var( + --cc-cookie-category-expanded-block-hover-bg + ); + .pm__section-title { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } - .toggle__icon-circle { - height: $service-toggle-knob-height; - width: $service-toggle-knob-height; + .pm__section-arrow svg { + transform: scale(0.5) rotate(180deg); } - .section__toggle:checked ~ .toggle__icon{ - .toggle__icon-circle { - transform: translateX(23px); - } + .pm__section-desc-wrapper { + display: flex; } + } } - .pm__section--toggle:nth-child(2) .section__toggle-wrapper::after{ - display: none!important; - } + &--expandable { + .pm__section-title { + padding-left: 3.4em; + cursor: pointer; + } - .section__toggle{ + .pm__section-arrow { + width: 20px; + height: 20px; position: absolute; - cursor: pointer; - display: block; - top: 0; - left: 0; - margin: 0; - border: 0; + left: 18px; + background: var(--cc-toggle-arrow-bg); + display: flex; + justify-content: center; + border-radius: 100%; + pointer-events: none; - &:disabled { - cursor: not-allowed; - } + svg { + stroke: var(--cc-toggle-arrow-color); + transform: scale(0.5); + } + } + } + } + + .pm__section-title-wrapper { + position: relative; + display: flex; + align-items: center; + + & + .pm__section-desc-wrapper { + margin-top: 0.85em; + } + } + + .pm__section-title { + font-weight: $font-weight-bold; + border-radius: var(--cc-btn-border-radius); + font-size: 0.95em; + } + + /* START: Services counter badge */ + .pm__badge { + display: flex; + flex: none; + margin-left: 1em; + border-radius: 5em; + font-weight: $font-weight-bold; + font-size: 0.8em; + background: var(--cc-btn-secondary-bg); + color: var(--cc-secondary-color); + position: relative; + height: 23px; + width: auto; + min-width: 23px; + align-items: center; + text-align: center; + justify-content: center; + padding: 0 0.6em 1px 0.6em; + white-space: nowrap; + overflow: hidden; + } + + .pm__service-counter { + padding: 0; + width: 23px; + background: var(--cc-btn-primary-bg); + color: var(--cc-btn-primary-color); + + &[data-counterlabel] { + padding: 0 0.6em 1px 0.6em; + width: auto; + } + } + /* END: Services counter badge */ + + /* START: Section Toggle */ + .section__toggle-wrapper, + .section__toggle, + .toggle__label, + .toggle__icon { + width: $toggle-knob-width; + height: $toggle-knob-height; + border-radius: var(--cc-pm-toggle-border-radius); + transform: translateZ(0); /* Fix safari weird glitch */ + } + + .section__toggle-wrapper { + position: absolute; + right: 18px; + cursor: pointer; + z-index: 1; + } + + .toggle-service { + position: relative; + right: 0; + + width: $service-toggle-knob-width; + height: $service-toggle-knob-height; + + .section__toggle, + .toggle__icon, + .toggle__label { + width: $service-toggle-knob-width; + height: $service-toggle-knob-height; } - .toggle__icon{ - position: absolute; - background: var(--cc-toggle-off-bg); - box-shadow: 0 0 0 1px var(--cc-toggle-off-bg); - transition: all .25s ease; - pointer-events: none; - display: flex; - flex-direction: row; + .toggle__icon { + position: relative; } .toggle__icon-circle { - position: absolute; - display: block; - left: 0; - top: 0; - width: $toggle-knob-height; - height: $toggle-knob-height; - border: none; - background: var(--cc-toggle-off-knob-bg); - box-shadow: 0 1px 2px rgba(24, 32, 3, .36); - transition: transform .25s ease, background-color .25s ease; - border-radius: var(--cc-pm-toggle-border-radius); - } - - .toggle__icon-on, - .toggle__icon-off{ - height: 100%; - position: absolute; - width: 100%; - transition: opacity .15s ease; + height: $service-toggle-knob-height; + width: $service-toggle-knob-height; } - .toggle__icon-on{ - opacity: 0; - transform: rotate(45deg); + .section__toggle:checked ~ .toggle__icon { + .toggle__icon-circle { + transform: translateX(23px); + } + } + } + + .pm__section--toggle:nth-child(2) .section__toggle-wrapper::after { + display: none !important; + } + + .section__toggle { + position: absolute; + cursor: pointer; + display: block; + top: 0; + left: 0; + margin: 0; + border: 0; + + &:disabled { + cursor: not-allowed; + } + } + + .toggle__icon { + position: absolute; + background: var(--cc-toggle-off-bg); + box-shadow: 0 0 0 1px var(--cc-toggle-off-bg); + transition: all 0.25s ease; + pointer-events: none; + display: flex; + flex-direction: row; + } + + .toggle__icon-circle { + position: absolute; + display: block; + left: 0; + top: 0; + width: $toggle-knob-height; + height: $toggle-knob-height; + border: none; + background: var(--cc-toggle-off-knob-bg); + box-shadow: 0 1px 2px rgba(24, 32, 3, 0.36); + transition: transform 0.25s ease, background-color 0.25s ease; + border-radius: var(--cc-pm-toggle-border-radius); + } + + .toggle__icon-on, + .toggle__icon-off { + height: 100%; + position: absolute; + width: 100%; + transition: opacity 0.15s ease; + } + + .toggle__icon-on { + opacity: 0; + transform: rotate(45deg); - svg { - stroke: var(--cc-toggle-on-bg); - transform: scale(.55) rotate(-45deg); - } + svg { + stroke: var(--cc-toggle-on-bg); + transform: scale(0.55) rotate(-45deg); } + } - .toggle__icon-off{ - opacity: 1; + .toggle__icon-off { + opacity: 1; - svg { - stroke: var(--cc-toggle-off-bg); - transform: scale(.55) - } + svg { + stroke: var(--cc-toggle-off-bg); + transform: scale(0.55); } + } - .section__toggle:checked{ - - &~.toggle__icon{ - background: var(--cc-toggle-on-bg); - box-shadow: 0 0 0 1px var(--cc-toggle-on-bg); - - .toggle__icon-circle { - transform: translateX(calc($toggle-knob-width - $toggle-knob-height)); - background-color: var(--cc-toggle-on-knob-bg); - } - - .toggle__icon-on{ - opacity: 1; - } - - .toggle__icon-off{ - opacity: 0; - } - } + .section__toggle:checked { + & ~ .toggle__icon { + background: var(--cc-toggle-on-bg); + box-shadow: 0 0 0 1px var(--cc-toggle-on-bg); - &:disabled{ - &~.toggle__icon{ - background: var(--cc-toggle-readonly-bg); - box-shadow: 0 0 0 1px var(--cc-toggle-readonly-bg); + .toggle__icon-circle { + transform: translateX(calc($toggle-knob-width - $toggle-knob-height)); + background-color: var(--cc-toggle-on-knob-bg); + } - .toggle__icon-circle { - background: var(--cc-toggle-readonly-knob-bg); - box-shadow: none; - } - - svg { - stroke: var(--cc-toggle-readonly-knob-icon-color); - } - } - } - } + .toggle__icon-on { + opacity: 1; + } - .toggle__label{ - position: absolute; - top: 0; - z-index: -1; + .toggle__icon-off { opacity: 0; - pointer-events: none; - overflow: hidden; - } - /* END: Section Toggle */ - - .pm__section-desc-wrapper{ - display: flex; - flex-direction: column; - font-size: .9em; - color: var(--cc-secondary-color); - - & > *:not(:last-child) { - border-bottom: 1px solid var(--cc-cookie-category-block-border); - } + } } - .pm__section-services{ - display: flex; - flex-direction: column; - } + &:disabled { + & ~ .toggle__icon { + background: var(--cc-toggle-readonly-bg); + box-shadow: 0 0 0 1px var(--cc-toggle-readonly-bg); - .pm__service{ - padding: .4em 1.2em; - position: relative; - display: flex; - justify-content: space-between; - transition: background-color .15s ease; - align-items: center; - - &:hover{ - background-color: var(--cc-cookie-category-block-hover-bg); + .toggle__icon-circle { + background: var(--cc-toggle-readonly-knob-bg); + box-shadow: none; } - } - .pm__service-header{ - display: flex; - align-items: center; - width: 100%; - margin-right: 1em; - } - - .pm__service-icon { - min-width: 8px; - height: 8px; - border: 2px solid currentColor; - border-radius: 100%; - margin-left: 6px; - margin-right: 20px; - margin-top: 1px; + svg { + stroke: var(--cc-toggle-readonly-knob-icon-color); + } + } + } + } + + .toggle__label { + position: absolute; + top: 0; + z-index: -1; + opacity: 0; + pointer-events: none; + overflow: hidden; + } + /* END: Section Toggle */ + + .pm__section-desc-wrapper { + display: flex; + flex-direction: column; + font-size: 0.9em; + color: var(--cc-secondary-color); + + & > *:not(:last-child) { + border-bottom: 1px solid var(--cc-cookie-category-block-border); + } + } + + .pm__section-services { + display: flex; + flex-direction: column; + } + + .pm__service { + padding: 0.4em 1.2em; + position: relative; + display: flex; + justify-content: space-between; + transition: background-color 0.15s ease; + align-items: center; + + &:hover { + background-color: var(--cc-cookie-category-block-hover-bg); + } + } + + .pm__service-header { + display: flex; + align-items: center; + width: 100%; + margin-right: 1em; + } + + .pm__service-icon { + min-width: 8px; + height: 8px; + border: 2px solid currentColor; + border-radius: 100%; + margin-left: 6px; + margin-right: 20px; + margin-top: 1px; + } + + .pm__service-title { + font-size: 0.95em; + word-break: break-word; + width: 100%; + } + + .pm__section-desc { + line-height: 1.5em; + } + + /* START: Table style */ + .pm__section-table { + text-align: left; + border-collapse: collapse; + width: 100%; + padding: 0; + margin: 0; + overflow: hidden; + font-size: 0.9em; + } + + .pm__table-caption { + text-align: left; + } + + .pm__table-caption, + .pm__table-head > tr { + font-weight: 600; + color: var(--cc-primary-color); + border-bottom: 1px dashed var(--cc-separator-border-color); + } + + .pm__table-tr { + transition: background-color 0.15s ease; + + &:hover { + background: var(--cc-cookie-category-block-hover-bg); + } + } + + .pm__table-caption, + .pm__table-th, + .pm__table-td { + padding: 0.625em; + vertical-align: top; + padding-left: 1.2em; + } + /* END: Table style */ + + .pm__footer { + display: flex; + justify-content: space-between; + border-top: 1px solid var(--cc-separator-border-color); + } + + .pm__btn-group { + display: flex; + } + + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: $cc-btn-gap; + } + + .pm--flip { + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: 0; + margin-right: $cc-btn-gap; + } + } + + .pm__btn { + color: var(--cc-btn-primary-color); + background: var(--cc-btn-primary-bg); + border: 1px solid var(--cc-btn-primary-border-color); + text-align: center; + flex: auto; + min-width: 110px; + font-weight: $font-weight-bold; + font-size: 0.82em; + padding: $btn-vertical-padding 1.5em; + min-height: $btn-height; + border-radius: var(--cc-btn-border-radius); + transition: background-color 0.15s ease, border-color 0.15s ease, + color 0.15s ease; + + &:hover { + background: var(--cc-btn-primary-hover-bg); + border-color: var(--cc-btn-primary-hover-border-color); + color: var(--cc-btn-primary-hover-color); + } + + /* Secondary btn colors */ + &--secondary { + color: var(--cc-btn-secondary-color); + background: var(--cc-btn-secondary-bg); + border-color: var(--cc-btn-secondary-border-color); + + &:hover { + background: var(--cc-btn-secondary-hover-bg); + border-color: var(--cc-btn-secondary-hover-border-color); + color: var(--cc-btn-secondary-hover-color); + } + } + } + + /* START: Box layout */ + + .pm--box { + left: var(--cc-modal-margin); + right: var(--cc-modal-margin); + margin: 0 auto; + top: 50%; + max-width: 43em; + max-height: 37.5em; + height: calc(100% - 2em); + + &.pm--flip { + .pm__footer, + .pm__btn-group { + flex-direction: row-reverse; + } + } + } + /* END: Box layout */ + + /* START: Bar layout */ + .pm--bar { + top: 0; + bottom: 0; + border-radius: 0; + height: 100%; + max-height: none; + max-width: 29em; + width: 100%; + margin: 0; + opacity: 1; + + --cc-modal-transition-duration: 0.35s; + + /* Start: Table -> vertical table */ + .pm__section-table, + .pm__table-body, + .pm__table-tr, + .pm__table-th, + .pm__table-td { + display: block; } - .pm__service-title{ - font-size: .95em; - word-break: break-word; - width: 100%; + .pm__table-head { + display: none; } - .pm__section-desc{ - line-height: 1.5em; + .pm__table-caption { + display: block; } - /* START: Table style */ - .pm__section-table{ - text-align: left; - border-collapse: collapse; - width: 100%; - padding: 0; - margin: 0; - overflow: hidden; - font-size: .9em; + .pm__table-tr:not(:last-child) { + border-bottom: 1px solid var(--cc-separator-border-color); } - .pm__table-caption { - text-align: left; - } + .pm__table-td { + display: flex; + justify-content: space-between; - .pm__table-caption, - .pm__table-head > tr{ - font-weight: 600; + &::before { + content: attr(data-column); + padding-right: 2em; + font-weight: $font-weight-bold; color: var(--cc-primary-color); - border-bottom: 1px dashed var(--cc-separator-border-color); - } - - .pm__table-tr{ - transition: background-color .15s ease; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + min-width: 100px; + } - &:hover{ - background: var(--cc-cookie-category-block-hover-bg); - } + & > div { + flex: 3; + } } + /* End: Table */ - .pm__table-caption, - .pm__table-th, - .pm__table-td{ - padding: 0.625em; - vertical-align: top; - padding-left: 1.2em; - } - /* END: Table style */ + &:not(.pm--wide) { + .pm__header, + .pm__body, + .pm__footer { + padding: 1em 1.3em; + } - .pm__footer{ - display: flex; - justify-content: space-between; - border-top: 1px solid var(--cc-separator-border-color); - } + .pm__footer, + .pm__btn-group { + flex-direction: column; + } - .pm__btn-group{ - display: flex; - } + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin: 0; + margin-top: $cc-btn-gap; + } - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-left: $cc-btn-gap; - } + &.pm--flip { + .pm__footer, + .pm__btn-group { + flex-direction: column-reverse; + } - .pm--flip { .pm__btn + .pm__btn, .pm__btn-group + .pm__btn-group { - margin-left: 0; - margin-right: $cc-btn-gap; + margin-bottom: $cc-btn-gap; + margin-top: 0; } - } + } - .pm__btn{ - color: var(--cc-btn-primary-color); - background: var(--cc-btn-primary-bg); - border: 1px solid var(--cc-btn-primary-border-color); - text-align: center; - flex: auto; - min-width: 110px; - font-weight: $font-weight-bold; - font-size: 0.82em; - padding: $btn-vertical-padding 1.5em; - min-height: $btn-height; - border-radius: var(--cc-btn-border-radius); - transition: background-color .15s ease, - border-color .15s ease, - color .15s ease; - - &:hover{ - background: var(--cc-btn-primary-hover-bg); - border-color: var(--cc-btn-primary-hover-border-color); - color: var(--cc-btn-primary-hover-color); - } - - /* Secondary btn colors */ - &--secondary{ - color: var(--cc-btn-secondary-color); - background: var(--cc-btn-secondary-bg); - border-color: var(--cc-btn-secondary-border-color); - - &:hover{ - background: var(--cc-btn-secondary-hover-bg); - border-color: var(--cc-btn-secondary-hover-border-color); - color: var(--cc-btn-secondary-hover-color); - } - } + .pm__badge { + /* Hide Service status/counter badge if not wide layout */ + display: none; + } } - /* START: Box layout */ - - .pm--box{ - left: var(--cc-modal-margin); - right: var(--cc-modal-margin); - margin: 0 auto; - top: 50%; - max-width: 43em; - max-height: 37.5em; - height: calc(100% - 2em); - - &.pm--flip{ - .pm__footer, - .pm__btn-group{ - flex-direction: row-reverse; - } - } + &.pm--left { + left: 0; } - /* END: Box layout */ - - /* START: Bar layout */ - .pm--bar{ - top: 0; - bottom: 0; - border-radius: 0; - height: 100%; - max-height: none; - max-width: 29em; - width: 100%; - margin: 0; - opacity: 1; - --cc-modal-transition-duration: .35s; - - /* Start: Table -> vertical table */ - .pm__section-table, - .pm__table-body, - .pm__table-tr, - .pm__table-th, - .pm__table-td{ - display: block; - } + &.pm--right { + right: 0; + } - .pm__table-head{ - display: none; - } + &.pm--wide { + max-width: 35em; - .pm__table-caption{ - display: block; - } + .pm__header, + .pm__body, + .pm__footer { + padding: 1em 1.4em; + } - .pm__table-tr:not(:last-child){ - border-bottom: 1px solid var(--cc-separator-border-color) + &.pm--flip { + .pm__footer, + .pm__btn-group { + flex-direction: row-reverse; } + } + } + } + /* END: Bar layout */ - .pm__table-td{ - display: flex; - justify-content: space-between; - - &::before{ - content: attr(data-column); - padding-right: 2em; - font-weight: $font-weight-bold; - color: var(--cc-primary-color); - overflow: hidden; - text-overflow: ellipsis; - flex: 1; - min-width: 100px; - } - - &>div{ - flex: 3; - } - } - /* End: Table */ - - &:not(.pm--wide){ - - .pm__header, - .pm__body, - .pm__footer{ - padding: 1em 1.3em; - } - - .pm__footer, - .pm__btn-group{ - flex-direction: column; - } - - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin: 0; - margin-top: $cc-btn-gap; - } - - &.pm--flip{ - .pm__footer, - .pm__btn-group{ - flex-direction: column-reverse; - } - - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-bottom: $cc-btn-gap; - margin-top: 0; - } - } - - .pm__badge{ - /* Hide Service status/counter badge if not wide layout */ - display: none; - } - } + /* Dark overlay */ + .pm-overlay { + content: ""; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 1; + background: var(--cc-overlay-bg); + opacity: 0; + visibility: hidden; + } - &.pm--left{ - left: 0; - } + .cc--anim { + .pm, + .pm-overlay { + transition: opacity var(--cc-modal-transition-duration) ease, + visibility var(--cc-modal-transition-duration) ease, + transform var(--cc-modal-transition-duration) ease; + } + } +} - &.pm--right{ - right: 0; - } +#cc-main { + .pm--box { + transform: translateY(calc(-50% + $translate-y)); + } - &.pm--wide{ - max-width: 35em; - - .pm__header, - .pm__body, - .pm__footer{ - padding: 1em 1.4em; - } - - &.pm--flip{ - .pm__footer, - .pm__btn-group{ - flex-direction: row-reverse; - } - } - } - } - /* END: Bar layout */ - - /* Dark overlay */ - .pm-overlay{ - content: ''; - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 1; - background: var(--cc-overlay-bg); - opacity: 0; - visibility: hidden; + .pm--bar { + &.pm--left { + transform: translateX(-100%); } - .cc--anim{ - .pm, - .pm-overlay{ - transition: opacity var(--cc-modal-transition-duration) ease, - visibility var(--cc-modal-transition-duration) ease, - transform var(--cc-modal-transition-duration) ease; - } + &.pm--right { + transform: translateX(100%); } + } } -#cc-main{ - .pm--box{ - transform: translateY(calc(-50% + $translate-y)); - } +.show--preferences { + #cc-main { + .cc--anim { + .pm { + opacity: 1; + visibility: visible !important; + } - .pm--bar{ - &.pm--left{ - transform: translateX(-100%); - } + .pm--box { + transform: translateY(-50%); + } - &.pm--right{ - transform: translateX(100%); - } - } -} + .pm--bar { + transform: translateX(0); + } -.show--preferences{ - #cc-main { - .cc--anim{ - .pm{ - opacity: 1; - visibility: visible!important; - } - - .pm--box{ - transform: translateY(-50%); - } - - .pm--bar{ - transform: translateX(0); - } - - .pm-overlay{ - opacity: 1; - visibility: visible; - } - } + .pm-overlay { + opacity: 1; + visibility: visible; + } } + } } /* Start: fix RTL layout */ #cc-main.cc--rtl { - - .pm__service-header { - margin-right: 0; - margin-left: 1em; + .pm__service-header { + margin-right: 0; + margin-left: 1em; + } + + .pm__section-arrow { + left: unset; + right: 18px; + } + + .section__toggle-wrapper { + right: unset; + left: 18px; + transform-origin: left; + } + + .toggle-service { + left: 0; + } + + .pm__service-icon { + margin-right: 5px; + margin-left: 20px; + } + + .pm__section--toggle .pm__section-title { + padding-left: 5.4em; + padding-right: 1.2em; + } + + .pm__section--expandable .pm__section-title { + padding-right: 3.4em; + } + + .pm__badge { + margin-left: unset; + margin-right: 1em; + } + + .toggle__icon-circle { + transform: translateX(27px); + } + + .toggle-service .toggle__icon-circle { + transform: translateX(23px); + } + + .section__toggle:checked ~ .toggle__icon { + .toggle__icon-circle { + transform: translateX(0); } + } - .pm__section-arrow{ - left: unset; - right: 18px; - } + .pm__table-th, + .pm__table-td { + text-align: right; + padding-left: unset; + padding-right: 1.2em; + } - .section__toggle-wrapper{ - right: unset; - left: 18px; - transform-origin: left; - } + .pm__table-td { + padding-left: unset; + padding-right: 1.2em; - .toggle-service{ - left: 0; + &::before { + padding-right: unset; + padding-left: 2em; } + } + + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: 0; + margin-right: $cc-btn-gap; + } - .pm__service-icon{ - margin-right: 5px; - margin-left: 20px; + .pm--flip { + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: $cc-btn-gap; + margin-right: 0; } - .pm__section--toggle .pm__section-title{ - padding-left: 5.4em; - padding-right: 1.2em; + &.pm--bar:not(.pm--wide) { + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: 0; + } } + } +} +/* End: Fix RTL alyout */ - .pm__section--expandable .pm__section-title{ - padding-right: 3.4em; +@media screen and (max-width: 640px) { + #cc-main { + .pm { + left: 0; + right: 0; + top: 0; + bottom: 0; + max-height: 100%; + height: auto; + transform: translateY($translate-y); + border-radius: 0; + max-width: none !important; } - .pm__badge{ - margin-left: unset; - margin-right: 1em; + .pm__header, + .pm__body, + .pm__footer { + padding: 0.9em !important; } - .toggle__icon-circle{ - transform: translateX(27px); + .pm__badge { + display: none; } - .toggle-service .toggle__icon-circle { - transform: translateX(23px); + /* Start: Table -> vertical table */ + .pm__section-table, + .pm__table-caption, + .pm__table-body, + .pm__table-tr, + .pm__table-th, + .pm__table-td { + display: block; } + .pm__table-head { + display: none; + } - .section__toggle:checked ~ .toggle__icon{ - .toggle__icon-circle { - transform: translateX(0); - } + .pm__table-tr:not(:last-child) { + border-bottom: 1px solid var(--cc-separator-border-color); } + .pm__table-td { + display: flex; + justify-content: space-between; - .pm__table-th, - .pm__table-td{ - text-align: right; - padding-left: unset; - padding-right: 1.2em; + &::before { + content: attr(data-column); + padding-right: 2em; + font-weight: $font-weight-bold; + color: var(--cc-primary-color); + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + min-width: 100px; + } + + & > div { + flex: 3; + } } + /* End: Table */ - .pm__table-td{ - padding-left: unset; - padding-right: 1.2em; + .pm__footer { + flex-direction: column !important; + } - &::before{ - padding-right: unset; - padding-left: 2em; - } + /* Fill width */ + .pm__btn-group { + display: flex !important; + flex-direction: column !important; } .pm__btn + .pm__btn, .pm__btn-group + .pm__btn-group { - margin-left: 0; - margin-right: $cc-btn-gap; + margin: 0 !important; + margin-top: $cc-btn-gap !important; } .pm--flip { - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-left: $cc-btn-gap; - margin-right: 0; - } - - &.pm--bar:not(.pm--wide) { - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-left: 0; - } - } + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-top: 0 !important; + margin-bottom: $cc-btn-gap !important; + } } -} -/* End: Fix RTL alyout */ - - -@media screen and (max-width: 640px){ - #cc-main{ - .pm{ - left: 0; - right: 0; - top: 0; - bottom: 0; - max-height: 100%; - height: auto; - transform: translateY($translate-y); - border-radius: 0; - max-width: none!important; - } - - .pm__header, - .pm__body, - .pm__footer{ - padding: .9em!important; - } - - .pm__badge{ - display: none; - } - - /* Start: Table -> vertical table */ - .pm__section-table, - .pm__table-caption, - .pm__table-body, - .pm__table-tr, - .pm__table-th, - .pm__table-td{ - display: block; - } - - .pm__table-head{ - display: none; - } - - .pm__table-tr:not(:last-child){ - border-bottom: 1px solid var(--cc-separator-border-color) - } - - .pm__table-td{ - display: flex; - justify-content: space-between; - - &::before{ - content: attr(data-column); - padding-right: 2em; - font-weight: $font-weight-bold; - color: var(--cc-primary-color); - overflow: hidden; - text-overflow: ellipsis; - flex: 1; - min-width: 100px; - } - - &>div{ - flex: 3; - } - } - /* End: Table */ - - .pm__footer{ - flex-direction: column!important; - } - /* Fill width */ - .pm__btn-group{ - display: flex!important; - flex-direction: column!important; - } - - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin: 0!important; - margin-top: $cc-btn-gap!important; - } - - .pm--flip { - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-top: 0!important; - margin-bottom: $cc-btn-gap!important; - } - } - - .pm--flip{ - .pm__footer, - .pm__btn-group{ - flex-direction: column-reverse!important; - } - } + .pm--flip { + .pm__footer, + .pm__btn-group { + flex-direction: column-reverse !important; + } } + } - .show--preferences #cc-main .cc--anim .pm{ - transform: translateY(0)!important; - } -} \ No newline at end of file + .show--preferences #cc-main .cc--anim .pm { + transform: translateY(0) !important; + } +} From d49f66e0337faaa47c2e3fc61ae6b470d157d3f7 Mon Sep 17 00:00:00 2001 From: sebousan Date: Fri, 7 Mar 2025 17:20:11 +0100 Subject: [PATCH 2/2] indent fix --- .../core/components/_preferences-modal.scss | 1692 +++++++++-------- 1 file changed, 850 insertions(+), 842 deletions(-) diff --git a/src/scss/core/components/_preferences-modal.scss b/src/scss/core/components/_preferences-modal.scss index 4519523f..89e652c7 100644 --- a/src/scss/core/components/_preferences-modal.scss +++ b/src/scss/core/components/_preferences-modal.scss @@ -11,990 +11,998 @@ $service-toggle-knob-height: 19px; $service-toggle-knob-width: 42px; $service-toggle-knob-icon-width: 1.7px; -:root { - --cc-pm-toggle-border-radius: 4em; +:root{ + --cc-pm-toggle-border-radius: 4em; } -#cc-main { - /* Make sure the preferences modal is always on top of the consent modal */ - .pm-wrapper { - position: relative; - z-index: 2; - } - - .pm { - position: fixed; - display: flex; - width: 100%; - width: unset; - background: var(--cc-bg); - flex-direction: column; - border-radius: var(--cc-modal-border-radius); - opacity: 0; - visibility: hidden; - overflow: hidden; - z-index: 1; - box-shadow: $modal-box-shadow; - } - - svg { - fill: none; - width: 100%; - } - - .pm__header, - .pm__body, - .pm__footer { - padding: $padding-y $padding-x; - } - - .pm__header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid var(--cc-separator-border-color); - } - - .pm__title { - display: flex; - align-items: center; - flex: 1; - font-weight: $font-weight-bold; - margin-right: 2em; - } - - .pm__close-btn { - width: calc(#{$btn-height} - 2px); - height: calc(#{$btn-height} - 2px); - position: relative; - background: var(--cc-btn-secondary-bg); - border-radius: var(--cc-btn-border-radius); - border: 1px solid var(--cc-btn-secondary-border-color); - transition: all 0.15s ease; - - span { - display: flex; - height: 100%; - width: 100%; +#cc-main{ + + /* Make sure the preferences modal is always on top of the consent modal */ + .pm-wrapper{ + position: relative; + z-index: 2; + } + + .pm{ + position: fixed; + display: flex; + width: 100%; + width: unset; + background: var(--cc-bg); + flex-direction: column; + border-radius: var(--cc-modal-border-radius); + opacity: 0; + visibility: hidden; + overflow: hidden; + z-index: 1; + box-shadow: $modal-box-shadow; } svg { - stroke: var(--cc-btn-secondary-color); - transform: scale(0.5); - transition: stroke 0.15s ease; + fill: none; + width: 100%; } - &:hover { - border-color: var(--cc-btn-secondary-hover-border-color); - background: var(--cc-btn-secondary-hover-bg); + .pm__header, + .pm__body, + .pm__footer{ + padding: $padding-y $padding-x; + } - svg { - stroke: var(--cc-btn-secondary-hover-color); - } + .pm__header{ + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--cc-separator-border-color); } - } - .pm__body { - flex: 1; - overflow-y: auto; - overflow-y: overlay; - } + .pm__title{ + display: flex; + align-items: center; + flex: 1; + font-weight: $font-weight-bold; + margin-right: 2em; + } - .pm__section, - .pm__section--toggle { - display: flex; - flex-direction: column; - margin-bottom: 0.5em; - border-radius: var(--cc-btn-border-radius); - } + .pm__close-btn{ + width: calc(#{$btn-height} - 2px); + height: calc(#{$btn-height} - 2px); + position: relative; + background: var(--cc-btn-secondary-bg); + border-radius: var(--cc-btn-border-radius); + border: 1px solid var(--cc-btn-secondary-border-color); + transition: all .15s ease; + + span { + display: flex; + height: 100%; + width: 100%; + } + + svg{ + stroke: var(--cc-btn-secondary-color); + transform: scale(.5); + transition: stroke .15s ease; + } - .pm__section--toggle { - .pm__section-desc-wrapper { - overflow: hidden; - margin-top: 0 !important; + &:hover{ + border-color: var(--cc-btn-secondary-hover-border-color); + background: var(--cc-btn-secondary-hover-bg); + + svg{ + stroke: var(--cc-btn-secondary-hover-color); + } + } } - } - .pm__section { - padding: 1em; - border: 1px solid var(--cc-separator-border-color); - transition: background-color 0.25s ease, border-color 0.25s ease; + .pm__body{ + flex: 1; + overflow-y: auto; + overflow-y: overlay; + } - &:first-child { - margin-bottom: 2em; - transition: none; - padding: 0; - margin-top: 0; - border: none; - margin-bottom: 2em; + .pm__section, + .pm__section--toggle{ + display: flex; + flex-direction: column; + margin-bottom: 0.5em; + border-radius: var(--cc-btn-border-radius); } - &:not(:first-child) { - // transition: background-color .25s ease; - &:hover { - background: var(--cc-cookie-category-block-bg); - border-color: var(--cc-cookie-category-block-border); - } + .pm__section--toggle{ + .pm__section-desc-wrapper{ + overflow: hidden; + margin-top: 0!important; + } } - &-toggles { - /* If after this section, there is a normal + .pm__section{ + padding: 1em; + border: 1px solid var(--cc-separator-border-color); + transition: background-color .25s ease, border-color .25s ease; + + &:first-child{ + margin-bottom: 2em; + transition: none; + padding: 0; + margin-top: 0; + border: none; + margin-bottom: 2em; + } + + &:not(:first-child){ + // transition: background-color .25s ease; + + &:hover{ + background: var(--cc-cookie-category-block-bg); + border-color: var(--cc-cookie-category-block-border); + } + } + + &-toggles{ + + /* If after this section, there is a normal * "non-expandable" section => add more margin */ - & + .pm__section { - margin-top: 2em; - } + & + .pm__section{ + margin-top: 2em; + } + } + + &--toggle{ + background: var(--cc-cookie-category-block-bg); + border-top: none; + margin-bottom: $cc-btn-gap; + + .pm__section-title{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background: var(--cc-cookie-category-block-bg); + position: relative; + padding: 1.1em 5.4em 1.1em 1.2em; + border: 1px solid var(--cc-cookie-category-block-border); + transition: background-color .25s ease, border-color .25s ease; + min-height: 58px; + + &:hover{ + background: var(--cc-cookie-category-block-hover-bg); + border-color: var(--cc-cookie-category-block-hover-border); + } + } + + /* Hide description by default */ + .pm__section-desc-wrapper{ + display: none; + border: 1px solid var(--cc-cookie-category-block-border); + border-top: none; + border-radius: var(--cc-btn-border-radius); + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + .pm__section-desc{ + padding: 1em; + margin-top: 0; + } + + &.is-expanded{ + --cc-cookie-category-block-bg: var(--cc-cookie-category-expanded-block-bg); + --cc-cookie-category-block-border: var(--cc-cookie-category-expanded-block-hover-bg); + + .pm__section-title{ + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + .pm__section-arrow svg{ + transform: scale(.5) rotate(180deg); + } + + .pm__section-desc-wrapper{ + display: flex; + } + } + } + + &--expandable{ + + .pm__section-title{ + padding-left: 3.4em; + cursor: pointer; + } + + .pm__section-arrow{ + width: 20px; + height: 20px; + position: absolute; + left: 18px; + background: var(--cc-toggle-arrow-bg); + display: flex; + justify-content: center; + border-radius: 100%; + pointer-events: none; + + svg { + stroke: var(--cc-toggle-arrow-color); + transform: scale(.5); + } + } + } } - &--toggle { - background: var(--cc-cookie-category-block-bg); - border-top: none; - margin-bottom: $cc-btn-gap; + .pm__section-title-wrapper{ + position: relative; + display: flex; + align-items: center; - .pm__section-title { - width: 100%; + & + .pm__section-desc-wrapper{ + margin-top: 0.85em; + } + } + + .pm__section-title{ + font-weight: $font-weight-bold; + border-radius: var(--cc-btn-border-radius); + font-size: .95em; + } + + /* START: Services counter badge */ + .pm__badge{ display: flex; - justify-content: space-between; + flex: none; + margin-left: 1em; + border-radius: 5em; + font-weight: $font-weight-bold; + font-size: .8em; + background: var(--cc-btn-secondary-bg); + color: var(--cc-secondary-color); + position: relative; + height: 23px; + width: auto; + min-width: 23px; align-items: center; - background: var(--cc-cookie-category-block-bg); + text-align: center; + justify-content: center; + padding: 0 0.6em 1px 0.6em; + white-space: nowrap; + overflow: hidden; + } + + .pm__service-counter{ + padding: 0; + width: 23px; + background: var(--cc-btn-primary-bg); + color: var(--cc-btn-primary-color); + + &[data-counterlabel]{ + padding: 0 .6em 1px .6em; + width: auto; + } + } + /* END: Services counter badge */ + + /* START: Section Toggle */ + .section__toggle-wrapper, + .section__toggle, + .toggle__label, + .toggle__icon{ + width: $toggle-knob-width; + height: $toggle-knob-height; + border-radius: var(--cc-pm-toggle-border-radius); + transform: translateZ(0); /* Fix safari weird glitch */ + } + + .section__toggle-wrapper{ + position: absolute; + right: 18px; + cursor: pointer; + z-index: 1; + } + + .toggle-service{ position: relative; - padding: 1.1em 5.4em 1.1em 1.2em; - border: 1px solid var(--cc-cookie-category-block-border); - transition: background-color 0.25s ease, border-color 0.25s ease; - min-height: 58px; - - &:hover { - background: var(--cc-cookie-category-block-hover-bg); - border-color: var(--cc-cookie-category-block-hover-border); - } - } - - /* Hide description by default */ - .pm__section-desc-wrapper { - display: none; - border: 1px solid var(--cc-cookie-category-block-border); - border-top: none; - border-radius: var(--cc-btn-border-radius); - border-top-left-radius: 0; - border-top-right-radius: 0; - } + right: 0; - .pm__section-desc { - padding: 1em; - margin-top: 0; - } + width: $service-toggle-knob-width; + height: $service-toggle-knob-height; + + .section__toggle, + .toggle__icon, + .toggle__label { + width: $service-toggle-knob-width; + height: $service-toggle-knob-height; + } - &.is-expanded { - --cc-cookie-category-block-bg: var( - --cc-cookie-category-expanded-block-bg - ); - --cc-cookie-category-block-border: var( - --cc-cookie-category-expanded-block-hover-bg - ); + .toggle__icon{ + position: relative; - .pm__section-title { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } - .pm__section-arrow svg { - transform: scale(0.5) rotate(180deg); + .toggle__icon-circle { + height: $service-toggle-knob-height; + width: $service-toggle-knob-height; } - .pm__section-desc-wrapper { - display: flex; + .section__toggle:checked ~ .toggle__icon{ + .toggle__icon-circle { + transform: translateX(23px); + } } - } } - &--expandable { - .pm__section-title { - padding-left: 3.4em; - cursor: pointer; - } + .pm__section--toggle:nth-child(2) .section__toggle-wrapper::after{ + display: none!important; + } - .pm__section-arrow { - width: 20px; - height: 20px; + .section__toggle{ position: absolute; - left: 18px; - background: var(--cc-toggle-arrow-bg); - display: flex; - justify-content: center; - border-radius: 100%; - pointer-events: none; - - svg { - stroke: var(--cc-toggle-arrow-color); - transform: scale(0.5); - } - } - } - } - - .pm__section-title-wrapper { - position: relative; - display: flex; - align-items: center; - - & + .pm__section-desc-wrapper { - margin-top: 0.85em; - } - } - - .pm__section-title { - font-weight: $font-weight-bold; - border-radius: var(--cc-btn-border-radius); - font-size: 0.95em; - } - - /* START: Services counter badge */ - .pm__badge { - display: flex; - flex: none; - margin-left: 1em; - border-radius: 5em; - font-weight: $font-weight-bold; - font-size: 0.8em; - background: var(--cc-btn-secondary-bg); - color: var(--cc-secondary-color); - position: relative; - height: 23px; - width: auto; - min-width: 23px; - align-items: center; - text-align: center; - justify-content: center; - padding: 0 0.6em 1px 0.6em; - white-space: nowrap; - overflow: hidden; - } - - .pm__service-counter { - padding: 0; - width: 23px; - background: var(--cc-btn-primary-bg); - color: var(--cc-btn-primary-color); - - &[data-counterlabel] { - padding: 0 0.6em 1px 0.6em; - width: auto; - } - } - /* END: Services counter badge */ - - /* START: Section Toggle */ - .section__toggle-wrapper, - .section__toggle, - .toggle__label, - .toggle__icon { - width: $toggle-knob-width; - height: $toggle-knob-height; - border-radius: var(--cc-pm-toggle-border-radius); - transform: translateZ(0); /* Fix safari weird glitch */ - } - - .section__toggle-wrapper { - position: absolute; - right: 18px; - cursor: pointer; - z-index: 1; - } - - .toggle-service { - position: relative; - right: 0; - - width: $service-toggle-knob-width; - height: $service-toggle-knob-height; + cursor: pointer; + display: block; + top: 0; + left: 0; + margin: 0; + border: 0; - .section__toggle, - .toggle__icon, - .toggle__label { - width: $service-toggle-knob-width; - height: $service-toggle-knob-height; + &:disabled { + cursor: not-allowed; + } } - .toggle__icon { - position: relative; + .toggle__icon{ + position: absolute; + background: var(--cc-toggle-off-bg); + box-shadow: 0 0 0 1px var(--cc-toggle-off-bg); + transition: all .25s ease; + pointer-events: none; + display: flex; + flex-direction: row; } .toggle__icon-circle { - height: $service-toggle-knob-height; - width: $service-toggle-knob-height; + position: absolute; + display: block; + left: 0; + top: 0; + width: $toggle-knob-height; + height: $toggle-knob-height; + border: none; + background: var(--cc-toggle-off-knob-bg); + box-shadow: 0 1px 2px rgba(24, 32, 3, .36); + transition: transform .25s ease, background-color .25s ease; + border-radius: var(--cc-pm-toggle-border-radius); + } + + .toggle__icon-on, + .toggle__icon-off{ + height: 100%; + position: absolute; + width: 100%; + transition: opacity .15s ease; } - .section__toggle:checked ~ .toggle__icon { - .toggle__icon-circle { - transform: translateX(23px); - } - } - } - - .pm__section--toggle:nth-child(2) .section__toggle-wrapper::after { - display: none !important; - } - - .section__toggle { - position: absolute; - cursor: pointer; - display: block; - top: 0; - left: 0; - margin: 0; - border: 0; - - &:disabled { - cursor: not-allowed; - } - } - - .toggle__icon { - position: absolute; - background: var(--cc-toggle-off-bg); - box-shadow: 0 0 0 1px var(--cc-toggle-off-bg); - transition: all 0.25s ease; - pointer-events: none; - display: flex; - flex-direction: row; - } - - .toggle__icon-circle { - position: absolute; - display: block; - left: 0; - top: 0; - width: $toggle-knob-height; - height: $toggle-knob-height; - border: none; - background: var(--cc-toggle-off-knob-bg); - box-shadow: 0 1px 2px rgba(24, 32, 3, 0.36); - transition: transform 0.25s ease, background-color 0.25s ease; - border-radius: var(--cc-pm-toggle-border-radius); - } - - .toggle__icon-on, - .toggle__icon-off { - height: 100%; - position: absolute; - width: 100%; - transition: opacity 0.15s ease; - } - - .toggle__icon-on { - opacity: 0; - transform: rotate(45deg); + .toggle__icon-on{ + opacity: 0; + transform: rotate(45deg); - svg { - stroke: var(--cc-toggle-on-bg); - transform: scale(0.55) rotate(-45deg); + svg { + stroke: var(--cc-toggle-on-bg); + transform: scale(.55) rotate(-45deg); + } } - } - .toggle__icon-off { - opacity: 1; + .toggle__icon-off{ + opacity: 1; - svg { - stroke: var(--cc-toggle-off-bg); - transform: scale(0.55); + svg { + stroke: var(--cc-toggle-off-bg); + transform: scale(.55) + } } - } - .section__toggle:checked { - & ~ .toggle__icon { - background: var(--cc-toggle-on-bg); - box-shadow: 0 0 0 1px var(--cc-toggle-on-bg); + .section__toggle:checked{ - .toggle__icon-circle { - transform: translateX(calc($toggle-knob-width - $toggle-knob-height)); - background-color: var(--cc-toggle-on-knob-bg); - } + &~.toggle__icon{ + background: var(--cc-toggle-on-bg); + box-shadow: 0 0 0 1px var(--cc-toggle-on-bg); - .toggle__icon-on { - opacity: 1; - } + .toggle__icon-circle { + transform: translateX(calc($toggle-knob-width - $toggle-knob-height)); + background-color: var(--cc-toggle-on-knob-bg); + } + + .toggle__icon-on{ + opacity: 1; + } + + .toggle__icon-off{ + opacity: 0; + } + } + + &:disabled{ + &~.toggle__icon{ + background: var(--cc-toggle-readonly-bg); + box-shadow: 0 0 0 1px var(--cc-toggle-readonly-bg); - .toggle__icon-off { + .toggle__icon-circle { + background: var(--cc-toggle-readonly-knob-bg); + box-shadow: none; + } + + svg { + stroke: var(--cc-toggle-readonly-knob-icon-color); + } + } + } + } + + .toggle__label{ + position: absolute; + top: 0; + z-index: -1; opacity: 0; - } + pointer-events: none; + overflow: hidden; } + /* END: Section Toggle */ - &:disabled { - & ~ .toggle__icon { - background: var(--cc-toggle-readonly-bg); - box-shadow: 0 0 0 1px var(--cc-toggle-readonly-bg); + .pm__section-desc-wrapper{ + display: flex; + flex-direction: column; + font-size: .9em; + color: var(--cc-secondary-color); - .toggle__icon-circle { - background: var(--cc-toggle-readonly-knob-bg); - box-shadow: none; + & > *:not(:last-child) { + border-bottom: 1px solid var(--cc-cookie-category-block-border); } + } - svg { - stroke: var(--cc-toggle-readonly-knob-icon-color); - } - } - } - } - - .toggle__label { - position: absolute; - top: 0; - z-index: -1; - opacity: 0; - pointer-events: none; - overflow: hidden; - } - /* END: Section Toggle */ - - .pm__section-desc-wrapper { - display: flex; - flex-direction: column; - font-size: 0.9em; - color: var(--cc-secondary-color); - - & > *:not(:last-child) { - border-bottom: 1px solid var(--cc-cookie-category-block-border); - } - } - - .pm__section-services { - display: flex; - flex-direction: column; - } - - .pm__service { - padding: 0.4em 1.2em; - position: relative; - display: flex; - justify-content: space-between; - transition: background-color 0.15s ease; - align-items: center; - - &:hover { - background-color: var(--cc-cookie-category-block-hover-bg); - } - } - - .pm__service-header { - display: flex; - align-items: center; - width: 100%; - margin-right: 1em; - } - - .pm__service-icon { - min-width: 8px; - height: 8px; - border: 2px solid currentColor; - border-radius: 100%; - margin-left: 6px; - margin-right: 20px; - margin-top: 1px; - } - - .pm__service-title { - font-size: 0.95em; - word-break: break-word; - width: 100%; - } - - .pm__section-desc { - line-height: 1.5em; - } - - /* START: Table style */ - .pm__section-table { - text-align: left; - border-collapse: collapse; - width: 100%; - padding: 0; - margin: 0; - overflow: hidden; - font-size: 0.9em; - } - - .pm__table-caption { - text-align: left; - } - - .pm__table-caption, - .pm__table-head > tr { - font-weight: 600; - color: var(--cc-primary-color); - border-bottom: 1px dashed var(--cc-separator-border-color); - } - - .pm__table-tr { - transition: background-color 0.15s ease; - - &:hover { - background: var(--cc-cookie-category-block-hover-bg); - } - } - - .pm__table-caption, - .pm__table-th, - .pm__table-td { - padding: 0.625em; - vertical-align: top; - padding-left: 1.2em; - } - /* END: Table style */ - - .pm__footer { - display: flex; - justify-content: space-between; - border-top: 1px solid var(--cc-separator-border-color); - } - - .pm__btn-group { - display: flex; - } - - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-left: $cc-btn-gap; - } - - .pm--flip { - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-left: 0; - margin-right: $cc-btn-gap; - } - } - - .pm__btn { - color: var(--cc-btn-primary-color); - background: var(--cc-btn-primary-bg); - border: 1px solid var(--cc-btn-primary-border-color); - text-align: center; - flex: auto; - min-width: 110px; - font-weight: $font-weight-bold; - font-size: 0.82em; - padding: $btn-vertical-padding 1.5em; - min-height: $btn-height; - border-radius: var(--cc-btn-border-radius); - transition: background-color 0.15s ease, border-color 0.15s ease, - color 0.15s ease; - - &:hover { - background: var(--cc-btn-primary-hover-bg); - border-color: var(--cc-btn-primary-hover-border-color); - color: var(--cc-btn-primary-hover-color); - } - - /* Secondary btn colors */ - &--secondary { - color: var(--cc-btn-secondary-color); - background: var(--cc-btn-secondary-bg); - border-color: var(--cc-btn-secondary-border-color); - - &:hover { - background: var(--cc-btn-secondary-hover-bg); - border-color: var(--cc-btn-secondary-hover-border-color); - color: var(--cc-btn-secondary-hover-color); - } - } - } - - /* START: Box layout */ - - .pm--box { - left: var(--cc-modal-margin); - right: var(--cc-modal-margin); - margin: 0 auto; - top: 50%; - max-width: 43em; - max-height: 37.5em; - height: calc(100% - 2em); - - &.pm--flip { - .pm__footer, - .pm__btn-group { - flex-direction: row-reverse; - } - } - } - /* END: Box layout */ - - /* START: Bar layout */ - .pm--bar { - top: 0; - bottom: 0; - border-radius: 0; - height: 100%; - max-height: none; - max-width: 29em; - width: 100%; - margin: 0; - opacity: 1; - - --cc-modal-transition-duration: 0.35s; - - /* Start: Table -> vertical table */ - .pm__section-table, - .pm__table-body, - .pm__table-tr, - .pm__table-th, - .pm__table-td { - display: block; + .pm__section-services{ + display: flex; + flex-direction: column; } - .pm__table-head { - display: none; + .pm__service{ + padding: .4em 1.2em; + position: relative; + display: flex; + justify-content: space-between; + transition: background-color .15s ease; + align-items: center; + + &:hover{ + background-color: var(--cc-cookie-category-block-hover-bg); + } } - .pm__table-caption { - display: block; + .pm__service-header{ + display: flex; + align-items: center; + width: 100%; + margin-right: 1em; } - .pm__table-tr:not(:last-child) { - border-bottom: 1px solid var(--cc-separator-border-color); + .pm__service-icon { + min-width: 8px; + height: 8px; + border: 2px solid currentColor; + border-radius: 100%; + margin-left: 6px; + margin-right: 20px; + margin-top: 1px; } - .pm__table-td { - display: flex; - justify-content: space-between; + .pm__service-title{ + font-size: .95em; + word-break: break-word; + width: 100%; + } - &::before { - content: attr(data-column); - padding-right: 2em; - font-weight: $font-weight-bold; - color: var(--cc-primary-color); - overflow: hidden; - text-overflow: ellipsis; - flex: 1; - min-width: 100px; - } + .pm__section-desc{ + line-height: 1.5em; + } - & > div { - flex: 3; - } + /* START: Table style */ + .pm__section-table{ + text-align: left; + border-collapse: collapse; + width: 100%; + padding: 0; + margin: 0; + overflow: hidden; + font-size: .9em; } - /* End: Table */ - &:not(.pm--wide) { - .pm__header, - .pm__body, - .pm__footer { - padding: 1em 1.3em; - } + .pm__table-caption { + text-align: left; + } - .pm__footer, - .pm__btn-group { - flex-direction: column; - } + .pm__table-caption, + .pm__table-head > tr{ + font-weight: 600; + color: var(--cc-primary-color); + border-bottom: 1px dashed var(--cc-separator-border-color); + } - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin: 0; - margin-top: $cc-btn-gap; - } + .pm__table-tr{ + transition: background-color .15s ease; - &.pm--flip { - .pm__footer, - .pm__btn-group { - flex-direction: column-reverse; + &:hover{ + background: var(--cc-cookie-category-block-hover-bg); } + } - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-bottom: $cc-btn-gap; - margin-top: 0; - } - } + .pm__table-caption, + .pm__table-th, + .pm__table-td{ + padding: 0.625em; + vertical-align: top; + padding-left: 1.2em; + } + /* END: Table style */ - .pm__badge { - /* Hide Service status/counter badge if not wide layout */ - display: none; - } + .pm__footer{ + display: flex; + justify-content: space-between; + border-top: 1px solid var(--cc-separator-border-color); } - &.pm--left { - left: 0; + .pm__btn-group{ + display: flex; } - &.pm--right { - right: 0; + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: $cc-btn-gap; } - &.pm--wide { - max-width: 35em; + .pm--flip { + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: 0; + margin-right: $cc-btn-gap; + } + } - .pm__header, - .pm__body, - .pm__footer { - padding: 1em 1.4em; - } + .pm__btn{ + color: var(--cc-btn-primary-color); + background: var(--cc-btn-primary-bg); + border: 1px solid var(--cc-btn-primary-border-color); + text-align: center; + flex: auto; + min-width: 110px; + font-weight: $font-weight-bold; + font-size: 0.82em; + padding: $btn-vertical-padding 1.5em; + min-height: $btn-height; + border-radius: var(--cc-btn-border-radius); + transition: background-color .15s ease, + border-color .15s ease, + color .15s ease; + + &:hover{ + background: var(--cc-btn-primary-hover-bg); + border-color: var(--cc-btn-primary-hover-border-color); + color: var(--cc-btn-primary-hover-color); + } - &.pm--flip { - .pm__footer, - .pm__btn-group { - flex-direction: row-reverse; + /* Secondary btn colors */ + &--secondary{ + color: var(--cc-btn-secondary-color); + background: var(--cc-btn-secondary-bg); + border-color: var(--cc-btn-secondary-border-color); + + &:hover{ + background: var(--cc-btn-secondary-hover-bg); + border-color: var(--cc-btn-secondary-hover-border-color); + color: var(--cc-btn-secondary-hover-color); + } } - } } - } - /* END: Bar layout */ - /* Dark overlay */ - .pm-overlay { - content: ""; - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 1; - background: var(--cc-overlay-bg); - opacity: 0; - visibility: hidden; - } + /* START: Box layout */ - .cc--anim { - .pm, - .pm-overlay { - transition: opacity var(--cc-modal-transition-duration) ease, - visibility var(--cc-modal-transition-duration) ease, - transform var(--cc-modal-transition-duration) ease; + .pm--box{ + left: var(--cc-modal-margin); + right: var(--cc-modal-margin); + margin: 0 auto; + top: 50%; + max-width: 43em; + max-height: 37.5em; + height: calc(100% - 2em); + + &.pm--flip{ + .pm__footer, + .pm__btn-group{ + flex-direction: row-reverse; + } + } } - } -} + /* END: Box layout */ + + /* START: Bar layout */ + .pm--bar{ + top: 0; + bottom: 0; + border-radius: 0; + height: 100%; + max-height: none; + max-width: 29em; + width: 100%; + margin: 0; + opacity: 1; + + --cc-modal-transition-duration: .35s; + + /* Start: Table -> vertical table */ + .pm__section-table, + .pm__table-body, + .pm__table-tr, + .pm__table-th, + .pm__table-td{ + display: block; + } + + .pm__table-head{ + display: none; + } -#cc-main { - .pm--box { - transform: translateY(calc(-50% + $translate-y)); - } + .pm__table-caption{ + display: block; + } + + .pm__table-tr:not(:last-child){ + border-bottom: 1px solid var(--cc-separator-border-color) + } - .pm--bar { - &.pm--left { - transform: translateX(-100%); + .pm__table-td{ + display: flex; + justify-content: space-between; + + &::before{ + content: attr(data-column); + padding-right: 2em; + font-weight: $font-weight-bold; + color: var(--cc-primary-color); + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + min-width: 100px; + } + + &>div{ + flex: 3; + } + } + /* End: Table */ + + &:not(.pm--wide){ + + .pm__header, + .pm__body, + .pm__footer{ + padding: 1em 1.3em; + } + + .pm__footer, + .pm__btn-group{ + flex-direction: column; + } + + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin: 0; + margin-top: $cc-btn-gap; + } + + &.pm--flip{ + .pm__footer, + .pm__btn-group{ + flex-direction: column-reverse; + } + + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-bottom: $cc-btn-gap; + margin-top: 0; + } + } + + .pm__badge{ + /* Hide Service status/counter badge if not wide layout */ + display: none; + } + } + + &.pm--left{ + left: 0; + } + + &.pm--right{ + right: 0; + } + + &.pm--wide{ + max-width: 35em; + + .pm__header, + .pm__body, + .pm__footer{ + padding: 1em 1.4em; + } + + &.pm--flip{ + .pm__footer, + .pm__btn-group{ + flex-direction: row-reverse; + } + } + } + } + /* END: Bar layout */ + + /* Dark overlay */ + .pm-overlay{ + content: ''; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 1; + background: var(--cc-overlay-bg); + opacity: 0; + visibility: hidden; } - &.pm--right { - transform: translateX(100%); + .cc--anim{ + .pm, + .pm-overlay{ + transition: opacity var(--cc-modal-transition-duration) ease, + visibility var(--cc-modal-transition-duration) ease, + transform var(--cc-modal-transition-duration) ease; + } } - } } -.show--preferences { - #cc-main { - .cc--anim { - .pm { - opacity: 1; - visibility: visible !important; - } +#cc-main{ + .pm--box{ + transform: translateY(calc(-50% + $translate-y)); + } - .pm--box { - transform: translateY(-50%); - } + .pm--bar{ + &.pm--left{ + transform: translateX(-100%); + } - .pm--bar { - transform: translateX(0); - } + &.pm--right{ + transform: translateX(100%); + } + } +} - .pm-overlay { - opacity: 1; - visibility: visible; - } +.show--preferences{ + #cc-main { + .cc--anim{ + .pm{ + opacity: 1; + visibility: visible!important; + } + + .pm--box{ + transform: translateY(-50%); + } + + .pm--bar{ + transform: translateX(0); + } + + .pm-overlay{ + opacity: 1; + visibility: visible; + } + } } - } } /* Start: fix RTL layout */ #cc-main.cc--rtl { - .pm__service-header { - margin-right: 0; - margin-left: 1em; - } - - .pm__section-arrow { - left: unset; - right: 18px; - } - - .section__toggle-wrapper { - right: unset; - left: 18px; - transform-origin: left; - } - - .toggle-service { - left: 0; - } - - .pm__service-icon { - margin-right: 5px; - margin-left: 20px; - } - - .pm__section--toggle .pm__section-title { - padding-left: 5.4em; - padding-right: 1.2em; - } - - .pm__section--expandable .pm__section-title { - padding-right: 3.4em; - } - - .pm__badge { - margin-left: unset; - margin-right: 1em; - } - - .toggle__icon-circle { - transform: translateX(27px); - } - - .toggle-service .toggle__icon-circle { - transform: translateX(23px); - } - - .section__toggle:checked ~ .toggle__icon { - .toggle__icon-circle { - transform: translateX(0); - } - } - - .pm__table-th, - .pm__table-td { - text-align: right; - padding-left: unset; - padding-right: 1.2em; - } - - .pm__table-td { - padding-left: unset; - padding-right: 1.2em; - &::before { - padding-right: unset; - padding-left: 2em; + .pm__service-header { + margin-right: 0; + margin-left: 1em; } - } - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-left: 0; - margin-right: $cc-btn-gap; - } - - .pm--flip { - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-left: $cc-btn-gap; - margin-right: 0; + .pm__section-arrow{ + left: unset; + right: 18px; } - &.pm--bar:not(.pm--wide) { - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-left: 0; - } + .section__toggle-wrapper{ + right: unset; + left: 18px; + transform-origin: left; } - } -} -/* End: Fix RTL alyout */ -@media screen and (max-width: 640px) { - #cc-main { - .pm { - left: 0; - right: 0; - top: 0; - bottom: 0; - max-height: 100%; - height: auto; - transform: translateY($translate-y); - border-radius: 0; - max-width: none !important; + .toggle-service{ + left: 0; } - .pm__header, - .pm__body, - .pm__footer { - padding: 0.9em !important; + .pm__service-icon{ + margin-right: 5px; + margin-left: 20px; } - .pm__badge { - display: none; + .pm__section--toggle .pm__section-title{ + padding-left: 5.4em; + padding-right: 1.2em; } - /* Start: Table -> vertical table */ - .pm__section-table, - .pm__table-caption, - .pm__table-body, - .pm__table-tr, - .pm__table-th, - .pm__table-td { - display: block; + .pm__section--expandable .pm__section-title{ + padding-right: 3.4em; } - .pm__table-head { - display: none; + .pm__badge{ + margin-left: unset; + margin-right: 1em; } - .pm__table-tr:not(:last-child) { - border-bottom: 1px solid var(--cc-separator-border-color); + .toggle__icon-circle{ + transform: translateX(27px); } - .pm__table-td { - display: flex; - justify-content: space-between; + .toggle-service .toggle__icon-circle { + transform: translateX(23px); + } - &::before { - content: attr(data-column); - padding-right: 2em; - font-weight: $font-weight-bold; - color: var(--cc-primary-color); - overflow: hidden; - text-overflow: ellipsis; - flex: 1; - min-width: 100px; - } - & > div { - flex: 3; - } + .section__toggle:checked ~ .toggle__icon{ + .toggle__icon-circle { + transform: translateX(0); + } } - /* End: Table */ - .pm__footer { - flex-direction: column !important; + + .pm__table-th, + .pm__table-td{ + text-align: right; + padding-left: unset; + padding-right: 1.2em; } - /* Fill width */ - .pm__btn-group { - display: flex !important; - flex-direction: column !important; + .pm__table-td{ + padding-left: unset; + padding-right: 1.2em; + + &::before{ + padding-right: unset; + padding-left: 2em; + } } .pm__btn + .pm__btn, .pm__btn-group + .pm__btn-group { - margin: 0 !important; - margin-top: $cc-btn-gap !important; + margin-left: 0; + margin-right: $cc-btn-gap; } .pm--flip { - .pm__btn + .pm__btn, - .pm__btn-group + .pm__btn-group { - margin-top: 0 !important; - margin-bottom: $cc-btn-gap !important; - } + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: $cc-btn-gap; + margin-right: 0; + } + + &.pm--bar:not(.pm--wide) { + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-left: 0; + } + } } +} +/* End: Fix RTL alyout */ - .pm--flip { - .pm__footer, - .pm__btn-group { - flex-direction: column-reverse !important; - } + +@media screen and (max-width: 640px){ + #cc-main{ + .pm{ + left: 0; + right: 0; + top: 0; + bottom: 0; + max-height: 100%; + height: auto; + transform: translateY($translate-y); + border-radius: 0; + max-width: none!important; + } + + .pm__header, + .pm__body, + .pm__footer{ + padding: .9em!important; + } + + .pm__badge{ + display: none; + } + + /* Start: Table -> vertical table */ + .pm__section-table, + .pm__table-caption, + .pm__table-body, + .pm__table-tr, + .pm__table-th, + .pm__table-td{ + display: block; + } + + .pm__table-head{ + display: none; + } + + .pm__table-tr:not(:last-child){ + border-bottom: 1px solid var(--cc-separator-border-color) + } + + .pm__table-td{ + display: flex; + justify-content: space-between; + + &::before{ + content: attr(data-column); + padding-right: 2em; + font-weight: $font-weight-bold; + color: var(--cc-primary-color); + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + min-width: 100px; + } + + &>div{ + flex: 3; + } + } + /* End: Table */ + + .pm__footer{ + flex-direction: column!important; + } + + /* Fill width */ + .pm__btn-group{ + display: flex!important; + flex-direction: column!important; + } + + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin: 0!important; + margin-top: $cc-btn-gap!important; + } + + .pm--flip { + .pm__btn + .pm__btn, + .pm__btn-group + .pm__btn-group { + margin-top: 0!important; + margin-bottom: $cc-btn-gap!important; + } + } + + .pm--flip{ + .pm__footer, + .pm__btn-group{ + flex-direction: column-reverse!important; + } + } } - } - .show--preferences #cc-main .cc--anim .pm { - transform: translateY(0) !important; - } -} + .show--preferences #cc-main .cc--anim .pm{ + transform: translateY(0)!important; + } +} \ No newline at end of file