:root { --borderRadiusBackgrounds: .8rem; --borderRadiusButtons: 10rem; }ParseError: Unexpected input in anonymous-file-46.less on line 36, column 97 34| } 35| 36| Warning: Attempt to read property "isInvertColors" on null in /home/dev/domains/dev.peggypay.com/deploys/current/www/app/style/dynamic/parts/content.php on line 675 37| // Copy AMP 38| .bgImage(@base, @ext) { 39| @media (max-width: 768px) {:root { --vh-banner-height:0px; }:root { --formBlockSpacing:var(--formPadding); --formBorderColor: #efefef; --formBorderSize: 2px; }:root { --colorAlpha: ~"hsl(145 41% 50%)";--colorAlpha0: ~"hsl(from var(--colorAlpha) h s 50)";--colorAlpha1: ~"hsl(from var(--colorAlpha) h s 54)";--colorAlpha2: ~"hsl(from var(--colorAlpha) h s 57)";--colorAlpha3: ~"hsl(from var(--colorAlpha) h s 61)";--colorAlpha4: ~"hsl(from var(--colorAlpha) h s 64)";--colorAlpha5: ~"hsl(from var(--colorAlpha) h s 68)";--colorAlpha6: ~"hsl(from var(--colorAlpha) h s 71)";--colorAlpha7: ~"hsl(from var(--colorAlpha) h s 75)";--colorAlpha8: ~"hsl(from var(--colorAlpha) h s 79)";--colorAlpha9: ~"hsl(from var(--colorAlpha) h s 82)";--colorAlpha10: ~"hsl(from var(--colorAlpha) h s 86)";--colorAlpha11: ~"hsl(from var(--colorAlpha) h s 89)";--colorAlpha12: ~"hsl(from var(--colorAlpha) h s 93)";--colorAlpha13: ~"hsl(from var(--colorAlpha) h s 96)";--colorAlpha14: ~"hsl(from var(--colorAlpha) h s 100)";--colorBeta: ~"hsl(350 63% 59%)";--colorBeta0: ~"hsl(from var(--colorBeta) h s 59)";--colorBeta1: ~"hsl(from var(--colorBeta) h s 64)";--colorBeta2: ~"hsl(from var(--colorBeta) h s 68)";--colorBeta3: ~"hsl(from var(--colorBeta) h s 73)";--colorBeta4: ~"hsl(from var(--colorBeta) h s 77)";--colorBeta5: ~"hsl(from var(--colorBeta) h s 82)";--colorBeta6: ~"hsl(from var(--colorBeta) h s 86)";--colorBeta7: ~"hsl(from var(--colorBeta) h s 91)";--colorBeta8: ~"hsl(from var(--colorBeta) h s 95)";--colorBeta9: ~"hsl(from var(--colorBeta) h s 100)";--colorCharlie: ~"hsl(287 98% 55%)";--colorCharlie0: ~"hsl(from var(--colorCharlie) h s 55)";--colorCharlie1: ~"hsl(from var(--colorCharlie) h s 60)";--colorCharlie2: ~"hsl(from var(--colorCharlie) h s 65)";--colorCharlie3: ~"hsl(from var(--colorCharlie) h s 70)";--colorCharlie4: ~"hsl(from var(--colorCharlie) h s 75)";--colorCharlie5: ~"hsl(from var(--colorCharlie) h s 80)";--colorCharlie6: ~"hsl(from var(--colorCharlie) h s 85)";--colorCharlie7: ~"hsl(from var(--colorCharlie) h s 90)";--colorCharlie8: ~"hsl(from var(--colorCharlie) h s 95)";--colorCharlie9: ~"hsl(from var(--colorCharlie) h s 100)";--colorDark: ~"hsl(188 60% 40%)";--colorDark4: ~"hsl(from var(--colorDark) h s 0)";--colorDark3: ~"hsl(from var(--colorDark) h s 10)";--colorDark2: ~"hsl(from var(--colorDark) h s 20)";--colorDark1: ~"hsl(from var(--colorDark) h s 30)";--colorDark0: ~"hsl(from var(--colorDark) h s 40)";--colorBlack: ~"hsl(0 0% 7%)";--colorBlack0: ~"hsl(from var(--colorBlack) h s 7)";--colorBlack1: ~"hsl(from var(--colorBlack) h s 15)";--colorBlack2: ~"hsl(from var(--colorBlack) h s 24)";--colorBlack3: ~"hsl(from var(--colorBlack) h s 32)";--colorBlack4: ~"hsl(from var(--colorBlack) h s 40)";--colorWhite: ~"hsl(0 0% 87%)";--colorWhite0: ~"hsl(from var(--colorWhite) h s 87)";--colorWhite1: ~"hsl(from var(--colorWhite) h s 90)";--colorWhite2: ~"hsl(from var(--colorWhite) h s 93)";--colorWhite3: ~"hsl(from var(--colorWhite) h s 97)";--colorWhite4: ~"hsl(from var(--colorWhite) h s 100)";--colorAlphaWhite: ~"hsl(145 41% 90%)";--colorAlphaWhite0: ~"hsl(from var(--colorAlphaWhite) h s 90)";--colorAlphaWhite1: ~"hsl(from var(--colorAlphaWhite) h s 92)";--colorAlphaWhite2: ~"hsl(from var(--colorAlphaWhite) h s 94)";--colorAlphaWhite3: ~"hsl(from var(--colorAlphaWhite) h s 96)";--colorAlphaWhite4: ~"hsl(from var(--colorAlphaWhite) h s 98)";--colorBetaWhite: ~"hsl(350 63% 90%)";--colorBetaWhite0: ~"hsl(from var(--colorBetaWhite) h s 90)";--colorBetaWhite1: ~"hsl(from var(--colorBetaWhite) h s 92)";--colorBetaWhite2: ~"hsl(from var(--colorBetaWhite) h s 94)";--colorBetaWhite3: ~"hsl(from var(--colorBetaWhite) h s 96)";--colorBetaWhite4: ~"hsl(from var(--colorBetaWhite) h s 98)";--colorCharlieWhite: ~"hsl(220 79% 90%)";--colorCharlieWhite0: ~"hsl(from var(--colorCharlieWhite) h s 90)";--colorCharlieWhite1: ~"hsl(from var(--colorCharlieWhite) h s 92)";--colorCharlieWhite2: ~"hsl(from var(--colorCharlieWhite) h s 94)";--colorCharlieWhite3: ~"hsl(from var(--colorCharlieWhite) h s 96)";--colorCharlieWhite4: ~"hsl(from var(--colorCharlieWhite) h s 98)";--colorGrayWhite: ~"hsl(0 0% 90%)";--colorGrayWhite0: ~"hsl(from var(--colorGrayWhite) h s 90)";--colorGrayWhite1: ~"hsl(from var(--colorGrayWhite) h s 93)";--colorGrayWhite2: ~"hsl(from var(--colorGrayWhite) h s 95)";--colorGrayWhite3: ~"hsl(from var(--colorGrayWhite) h s 98)";--colorGrayWhite4: ~"hsl(from var(--colorGrayWhite) h s 100)";--colorDarkAlpha: ~"hsl(145 41% 50%)";--colorDarkAlpha4: ~"hsl(from var(--colorDarkAlpha) h s 10)";--colorDarkAlpha3: ~"hsl(from var(--colorDarkAlpha) h s 20)";--colorDarkAlpha2: ~"hsl(from var(--colorDarkAlpha) h s 30)";--colorDarkAlpha1: ~"hsl(from var(--colorDarkAlpha) h s 40)";--colorDarkAlpha0: ~"hsl(from var(--colorDarkAlpha) h s 50)";--colorDarkBeta: ~"hsl(350 63% 59%)";--colorDarkBeta4: ~"hsl(from var(--colorDarkBeta) h s 0)";--colorDarkBeta3: ~"hsl(from var(--colorDarkBeta) h s 15)";--colorDarkBeta2: ~"hsl(from var(--colorDarkBeta) h s 30)";--colorDarkBeta1: ~"hsl(from var(--colorDarkBeta) h s 44)";--colorDarkBeta0: ~"hsl(from var(--colorDarkBeta) h s 59)";--colorYellow: ~"hsl(45 100% 50%)";--colorYellow0: ~"hsl(from var(--colorYellow) h s 50)";--colorYellow1: ~"hsl(from var(--colorYellow) h s 54)";--colorYellow2: ~"hsl(from var(--colorYellow) h s 57)";--colorYellow3: ~"hsl(from var(--colorYellow) h s 61)";--colorYellow4: ~"hsl(from var(--colorYellow) h s 64)";--colorYellow5: ~"hsl(from var(--colorYellow) h s 68)";--colorYellow6: ~"hsl(from var(--colorYellow) h s 71)";--colorYellow7: ~"hsl(from var(--colorYellow) h s 75)";--colorYellow8: ~"hsl(from var(--colorYellow) h s 79)";--colorYellow9: ~"hsl(from var(--colorYellow) h s 82)";--colorYellow10: ~"hsl(from var(--colorYellow) h s 86)";--colorYellow11: ~"hsl(from var(--colorYellow) h s 89)";--colorYellow12: ~"hsl(from var(--colorYellow) h s 93)";--colorYellow13: ~"hsl(from var(--colorYellow) h s 96)";--colorYellow14: ~"hsl(from var(--colorYellow) h s 100)";--colorPageBackground: ~"hsl(0 0% 100%)";--colorPageBackground0: ~"hsl(from var(--colorPageBackground) h s 100)";--colorPageBackground1: ~"hsl(from var(--colorPageBackground) h s 100)";--colorPageBackground2: ~"hsl(from var(--colorPageBackground) h s 100)";--colorPageBackground3: ~"hsl(from var(--colorPageBackground) h s 100)";--colorPageBackground4: ~"hsl(from var(--colorPageBackground) h s 100)";--colorFont: var(--fontColorGray);--colorFontAnchor: @paragraphAnchorColor;--colorInvert: #ffffff; }:root { --pageBackground:#ffffff; --colorPageBackground0:#ffffff; --fontColorGray:@fontColorGray; --white:#ffffff; } :root { --defaultFormWidth: ~"min(100%, clamp(1024px, 80vw, 1150px))"; --defaultFormWidthNoSide: ~"min(100%, clamp(800px, 45vw, 1000px))"; --calculatedFormWidth: auto; --calculatedFormWidthNoSide: var(--defaultFormWidthNoSide); --calculatedFormWidthActual: var(--defaultFormWidthNoSide); } @media @mediaMinBreak3 { :root { --arrowSvg:url('https://dev.peggypay.com/app/images/contentblock/arrows/arrow-1920.svg'); --arrowInvSvg:url('https://dev.peggypay.com/app/images/contentblock/arrows/arrow-inv-1920.svg'); } } @media @mediaBreak3 { :root { --arrowSvg:url('https://dev.peggypay.com/app/images/contentblock/arrows/arrow-1024.svg'); --arrowInvSvg:url('https://dev.peggypay.com/app/images/contentblock/arrows/arrow-inv-1024.svg'); } } Warning: Attempt to read property "isInvertColors" on null in /home/dev/domains/dev.peggypay.com/deploys/current/www/app/style/dynamic/parts/content.php on line 675 // Copy AMP .bgImage(@base, @ext) { @media @mediaBreak3 { position:relative; overflow:hidden; background-color:@primaryColor; &:before { content:""; display:block; position:absolute; top:0;left:0;width:100%;height:100%;//z-index:1; background:url("@{base}--mobile.@{ext}") no-repeat center center; background-size:cover; filter:blur(5px); transform:scale(1.03); } .content__inner { position:relative; } } @media @mediaMinBreak3 { background:url("@{base}.@{ext}") no-repeat center center; background-size:cover; } } .transition(@duration:0.2s, @ease:ease-out) { .transition-specific(all, @duration, @ease); } .transition-specific(@element, @duration:0.2s, @ease:ease-out) { transition: @element @duration @ease; } .hoverColor(@color) { color:fade(@color, 50%); } .activeColor(@color) { color:darken(@color, 10%); } .setBaseButtonColor(@fontColor, @bgColor, @hoverColor) { // 2-7-24 waarom nog nodig?. Dan werkt sec-button van contentblok niet inverting met donkere bg // &:not(.wm-btn--sec):not(.wm-btn--charlie):not(.wm-btn--black):not(.wm-btn--delete):not(.wm-btn--delete-invert):not(.wm-btn--invert):not(.wm-btn--gray):not([disabled]):not(.wm-btn--disabled) { background:@bgColor; /*&:not(.wm-btn--tiny) { */border:2px solid @bgColor;// } /*&:not(.wm-btn--tiny) { */border:2px solid transparent;// } // &.wm-btn--tiny { border:1px solid @bgColor; } color:@fontColor/* !important*/; * { color:inherit; } // Was geen important maar dan werkt 2e regel niet // &, * { color:@fontColor/* !important*/; } &:not([disabled]):not(.wm-btn--disabled):not(.wm-btn--invert):not(.wm-btn--sec) { &:hover { background:@hoverColor; border-color:@hoverColor; } } // } } .shadow(@size: 25px) { box-shadow:0 0 @size fade(@primaryColor, 30%); } .bigShadow(@size: 25px) { box-shadow:0 0 @size fade(@primaryColor, 60%); } .single-transition(@elements, @time) { transition: @elements @time ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ } .notransition() { transition: none !important; } .tableBodyBorder(@border) { > tr:first-child > td, > tr:first-child > th { border-top:@border; } > tr:last-child > td, > tr:last-child > th { border-bottom:@border; } > tr { > td:first-child, > th:first-child { border-left:@border; } > td:last-child, > th:last-child { border-right:@border; } } } .gradient(@color: #F5F5F5) { @start: lighten(@color, 2.5%); @stop: darken(@color, 2.5%); background: @color; background:-webkit-linear-gradient(top, @start, @stop); background:linear-gradient(top, @start, @stop); } .gradientShadowRight(@start, @stop) { background: @start; background:-webkit-linear-gradient(right, @start 80%, @stop 100%); background:linear-gradient(to right, @start 80%, @stop 100%); } .soft-gradient(@color: #F5F5F5) { @start: lighten(@color, 1.25%); @stop: darken(@color, 1.25%); background: @color; background:-webkit-linear-gradient(top, @start, @stop); background:linear-gradient(top, @start, @stop); } .gradientGlowBottom(@color: #F5F5F5, @start: #EEE, @stop: #FFF, @fixed: scroll) { background: @color; } .loop(@iterations ; @func ; @base : 0 ; @n : @iterations ; @idx : @base + 1) when (@n > @base) { #loop-mixin(@func, @idx); .loop(@iterations, @func, @base, (@n - 1), (@idx + 1)); } .validation-error() { // animation-name: validation-error; // animation-duration:4s; .html-input-element { border-color:@validationTextColor; // box-shadow:0 0 5px fadeout(@validationTextColor, 30%); } input[type="radio"], input[type="checkbox"] { &:not(:checked) + label:before { border-color:lighten(@validationTextColor,10%); background:lighten(@validationTextColor, 40%); } } .pf-form-row--validation-messages { // display:block; } } .validation-valid() { input[type=text] { // border:1px solid @green; } .pf-form-row__label--label:after { font-family:fontello; opacity:0; // content:"\e82d"; // font-size:1.1rem; // color:@labelFontColor; // animation:invalidToValid .4s ease; // animation-fill-mode:forwards; } } // .validation-required { // .validation-is-required(); // } .validation-is-required-astrix() { font-family:Material Symbols Rounded; content:"emergency"; // "✸"; font-size:.6rem !important; display:inline-block; margin-left:.3rem; } // .validation-is-required() { // position:relative; // &:after { // .validation-is-required-astrix(); // } // } .styled-table-func(@primColor, @bgColor, @txtColor, @bgColorHover, @onlyColors:false) { .last, .right { text-align:right; } input[type=checkbox], input[type=radio] { + label { // margin-top:.5rem; // margin-bottom:.5rem; height:1.4rem; // weer aangepast 23-7-19 want in account api keys.. } } :where(td, .wm-td, td *) { font-weight:400; } :where(td, .wm-td, td) { word-break:break-word; } &.styled-table--wide { margin-left:-0.8rem; width:~"calc(100% + 1.6rem)"; } &when (@onlyColors = false) { width:100%; border-spacing:0; // table-layout:fixed; &:not(&--small) > :where(.wm-tbody, .wm-thead, .wm-tfoot, tbody, thead, tfoot) > :where(.wm-tr, tr) > :where(.wm-td, td, .wm-th, th) { padding:.8rem; } &--small > :where(.wm-tbody, .wm-thead, .wm-tfoot, tbody, thead, tfoot) > :where(.wm-tr, tr) > :where(.wm-td, td, .wm-th, th) { padding:.4rem 0; } > :where(.wm-tbody, .wm-thead, .wm-tfoot, tbody, thead, tfoot) > :where(.wm-tr, tr) > :where(.wm-td, td, .wm-th, th) { min-width:4rem; // font-size:.8rem; } // .flex-buttons { // min-height:4rem; // } > :where(thead, .wm-thead, tfoot, .wm-tfoot) > :where(.wm-tr, tr) > :where(.wm-th, th) { font-size:1rem; font-weight:normal; text-align:left; } // 3-4-24 weg // &--blue > .wm-thead > .wm-tr > .wm-th, // &--blue > .wm-tfoot > .wm-tr > .wm-th, // &--blue > thead > tr > th, // &--blue > tfoot > tr > th { // background:@grayColor; // color:@fontColorGray; // } // 3-4-24 weg // &--white > .wm-thead > .wm-tr > .wm-th, // &--white > .wm-tfoot > .wm-tr > .wm-th, // &--white > thead > tr > th, // &--white > tfoot > tr > td, // &--white > tfoot > tr > th { // background:white; // } // &--white > .wm-tfoot > .wm-tr:first-child, // &--white > tfoot > tr:first-child { // > td, > th { // border-top:2px solid fade(@primColor, 50%); // } // } &--options { border-collapse:separate; border-spacing:0 1rem; > .wm-tbody { > .wm-tr { box-shadow:@boxShadowBorderStyle; // border:1px solid @borderColorGray; border-radius:@inputEditorRadius; &:not(:last-of-type) { margin-bottom:.5rem; } } > .wm-tr > .wm-td { color:@fieldsTextColor; } } > .wm-thead > .wm-tr > .wm-th { padding-bottom:0; color:@fontColorGray; // 10-5-21 want in sandd } } &--zebra { :where( .wm-tbody, tbody ) { // > .wm-tr > .wm-td, // > tr > td { // color:@txtColor; // } // > .wm-tr:nth-child(odd) > .wm-td, // > tr:nth-child(odd) > td { // background:@bgColor; // } > :where( .wm-tr, tr ):nth-child(even) > :where(.wm-td, td) { background:@grayBgLight; } } } } &:not(.styled-table--white):not(.styled-table--dark-labels):not(.styled-table--style2):not(.styled-table--options):not(.styled-table--zebra):not(.styled-table--nobg):not(.styled-table--new-style) { > :where(.wm-tbody, tbody) > :where(tr, .wm-tr) > :where(td, .wm-td) { border-bottom:1px solid @bgColorHover; background:desaturate(@bgColor, 20%); // color:@txtColor; color:@fieldsTextColor; } :where(thead, .wm-thead) > :where(tr, .wm-tr) > :where(.wm-th, th) { color:@fontColorGray; // 10-5-21 want in sandd } } &--nobg:not(&--valign-middle) :where(td, th) { vertical-align:top; } &--new-zebra { tbody tr:hover :where(td,th) { background:@grayBgLight; } } &--clickable-row { tr :where(td,th) { cursor:pointer; } } .status--error, .status--error * { color:@red; } // color:@fontColorGray; // .wm-tr:hover, tr:hover { // background:@primaryColorBackgroundLighterAlmostWhite; // } // tfoot > tr > td { // border-top:1px solid @primaryColorBorder !important; // } // thead > tr > *, // tfoot > tr > * { // font-weight:600 !important; // } // } &--no-header thead { display:none } &--small { hr { margin-block:.5rem 1rem !important; border-color:@borderColorGray } } &__wrap { nooverflow:auto; } // waarom? probleem bij laatste item hover} &--new-style { // thead { position:sticky; top:@editorTopMenuHeight + 1rem; z-index:1; background:white; } thead th { color:@fontColorGraySoft; * { font-weight:400; } } tbody td { color:@fontColorGray; } &.styled-table--valign-middle td { vertical-align:middle; } td { vertical-align:top; } th { vertical-align:middle; } // TODO 19 icons // .wm-btn--delete:not(.wm-btn--soft-disabled) [class*="mf-icon-"] { color:white !important; } tr.styled-table__separator td { padding:.4rem !important; } tr:not(.styled-table__separator) :where(td, th) { padding:1rem; // @media @mediaBreak3 { padding-inline:.5rem; } background:white; &:first-child { border-top-left-radius:1rem; border-bottom-left-radius:1rem; } &:last-child { border-top-right-radius:1rem; border-bottom-right-radius:1rem; } } tbody tr:not(.styled-table__separator) td { &:first-child { border:1px solid @borderColorGray; border-right:none; } &:last-child { border:1px solid @borderColorGray; border-left:none; } &:not(:first-child):not(:last-child) { border:1px solid @borderColorGray; border-left:none; border-right:none; } &:first-child:last-child { border:1px solid @borderColorGray; } } &-header { border-top-left-radius:1rem; border-top-right-radius:1rem; margin-bottom:0; background:white; padding:1rem; border:1px solid @borderColorGray; border-bottom:none; } thead tr:not(.styled-table__separator) th { &:first-child { border:1px solid @borderColorGray; border-right:none; } &:last-child { border:1px solid @borderColorGray; border-left:none; } &:not(:first-child):not(:last-child) { border:1px solid @borderColorGray; border-left:none; border-right:none; } } &-header + .styled-table__wrap & thead tr th:first-child { border-top-left-radius:0; } &-header + .styled-table__wrap & thead tr th:last-child { border-top-right-radius:0; } .styled-table__sorter { cursor:pointer; opacity:0; .transition-specific(opacity); font-size:1rem; position:relative; top:2px; } th:hover .styled-table__sorter, .styled-table__sorter.styled-table__sorter--active { opacity:1; } .styled-table__sorter.styled-table__sorter--active { color:@fontColorGraySoft; } tbody tr:not(.styled-table__separator):hover :where(td,th) { background:@grayBgLight; } :where(td, th) { width:100%; } } &--new-style, &--table-fixed { table-layout:fixed; } // weg 3-4-24 // &--white { // color:@fontColorGrayDark; // > .wm-tbody, // > tbody { // > .wm-tr, // > tr { // > td, > .wm-td { // // background:white; // // background:@grayBgLight; // // @color1: lighten(@primaryColor, 50%); // // @color2: lighten(@primaryColor, 47%); // @color1: @grayBg; // @color2: @grayBgLight; // border-bottom:1px solid @color1; // } // &:not(.grid__row--active):hover > td { // // background:shade(@grayBg, 5%); // } // // &:not(.grid__row--active) { // // > td, > .wm-td { // // &:first-child { border-left:2px solid white; } // // &:last-child { border-right:2px solid white; } // // } // // } // } // } // } // &--dark-labels { // > .wm-tbody, // > tbody { // > .wm-tr > .wm-th, // > tr > th { // border-bottom:2px solid white; // @color1: lighten(@primColor, 45%); // @color2: lighten(@primColor, 42%); // //background:lighten(@primColor, 30%); // .gradientGlowBottom(@color1, @color2, @color1); // } // } // } &__button-container { white-space:nowrap; display:flex; justify-content:space-between; } &__link { cursor:pointer; display:inline-block; // inline vanwege tooltip finan dash } a.styled-table__link { color:inherit; font-weight:inherit; white-space:nowrap; } .styled-table--filter { display:flex; align-items:center; input { margin-left:2rem; opacity:0; .transition(); } input.styled-table--filter--has-value, &:hover input, input:focus { opacity:1; } } &.styled-table--nowrap td { white-space:nowrap; } .styled-table__total td { font-weight:600; } a, a * { font-weight:400; text-decoration:none; } } td[data-column="PostStatussenHtml"] { position:relative; .apps__container { position:absolute; border:1px solid transparent; border-radius:.75rem; padding:.5rem; margin:-.5rem; .transition(); &--open { // &:has(.apps__show-more:hover) { z-index:10; border-color:@borderColorGray; background:white; } display:flex; flex-direction:column; gap:.5rem; &:not(&--open) .apps + .apps { display:none; } // .apps + .apps { max-height:0; overflow:hidden; nodisplay:none; .transition(); } // &--open .apps + .apps { max-height:3rem; } } } .styled-table tbody > tr:not(:hover) .styled-table__menu-td > .flex-buttons { opacity:0; } .styled-table .styled-table__menu-td { padding:.5rem !important; vertical-align:middle; } .shineSlow() { &:after { animation:shineKeyframes 20s infinite; } } .shine() { position:relative; overflow:hidden; &:after { content:""; position:absolute; top:110%; left:-210%; width:200%; height:600%; // opacity:1; transform:rotate(30deg); background:linear-gradient( to right, fade(white, 0%) 0%, fade(white, 13%) 90%, fade(white, 50%) 97%, fade(white, 0%) 100% ); top:-400%; transition-property:left,top; transition-duration:.7s; transition-timing-function:ease; animation:shineKeyframes 7s infinite; } } .progressbarColor(@foreground, @background, @font) { background:@background; .progressbar__bar { background:@foreground; } .progressbar__label { color:white; } > .progressbar__label { color:@font; } } .checklist() { text-align:left; list-style:none inside; padding-left:0; > li { font-weight:600; padding-left:2.5rem; position:relative; line-height:2.5rem; margin-bottom:.5rem; strong { font-weight:800; } &:before { font-size:1.5rem; line-height:2.5rem; font-family:"Material Symbols Rounded"; content:"check_circle"; font-weight:800; font-variation-settings:"FILL" 1, "wght" 800, "GRAD" 0, "opsz" 40; position:absolute; left:0; margin-left:3px; color:@primaryColor; @media @mediaMinBreak3 { margin-top:2px; } } } } .checklistLight() { > li { margin-bottom:0; padding-left:2rem; font-weight:400; font-size:1rem; &:before { line-height:2.3rem; } } }.pf-default-text() { font-size:~"clamp(1rem, 2vw, 1.2rem)"; line-height:~"clamp(1.5rem, 2vw, 1.9rem)"; } .pf-default-text-large() { font-size:~"clamp(1.1rem, 2.1vw, 1.35rem)"; line-height:~"clamp(1.55rem, 2.1vw, 2.15rem)"; } .pf-default-text-small() { font-size:~"clamp(.9rem, 2vw, 1rem)"; line-height:~"clamp(1.4rem, 2vw, 1.5rem)"; } // #loop-mixin("grid-columns", @columns) { // & when(@columns > 1) { // .pf-form-row--grid-column-@{columns} { // .wm-radiobuttons__container { // columns:@columns; // display:block; // .radiobutton-container { // break-inside:avoid; // } // } // } // } // } #column-width(@columns, @column) when (@column > 0) { &.pf-form-row--column-width-@{column} { // width:~"calc( (100% / @{columns} * @{column}) - ( var(--fieldPadding) / 2 ) )"; width:~"calc( (100% / @{columns} * @{column}) )"; &:not(.pf-fixed-layout) { @media @mediaBreak4 { width:100% !important; } } } #column-width(@columns, @column - 1); } // Begint hier. We lopen door alle columns #loop-mixin("fb-element-column", @columns) { &--column-@{columns} { // En per column maken we een class met width #column-width(@columns, @columns - 1); } } // // Zelfde voor input width // #input-column-width(@columns, @column) when (@column > 0) { // &.pf-form-row--input-column-width-@{column} > .pf-form-row__container > .pf-form-row__element { // width:~"calc( 100% / @{columns} * @{column} - 0.5rem )"; // - 1rem // // @media @mediaBreak4 { // // width:100% !important; // // } // } // #input-column-width(@columns, @column - 1); // } // // Begint hier. We lopen door alle columns // #loop-mixin("fb-input-column", @columns) { // &--input-column-@{columns} { // // En per column maken we een class met width // #input-column-width(@columns, @columns - 1); // } // } .fake-viewport() { margin-left:1.5rem; margin-bottom:2rem; box-shadow:0 0 1rem fade(@primaryColor, 50%); border-radius:5px; .transition-specific(max-width); .pf-form-row { // position:relative; // Needed for checkboxes. Why? Dunno } } // .formrowHilight(@color) { // // border:2px dashed @primaryColorBorder; // .drag-handler { // box-shadow: 0 0 0 2px @primaryColorBorder inset, 0 0 0 2px white; // } // // border-color:fade(@primaryColor, 30%); // // &:after { // // border:1px dashed white; // // background: linear-gradient(175deg, // // lighten(@color, 20%) 0%, // // lighten(@color, 10%) 50%, // // @color 51%, // // lighten(@color, 20%) 100% // // ); // // } // // &:hover .resize-handler { // // display:flex; // // } // // input[type="text"] { // // background:white; // // } // } .glow-links() { color:saturate(lighten(@secondaryColor,10%), 20%); text-shadow:0 0 25px rgba(255,255,255,.5); } .generic-scrollbar() { &__wrap::-webkit-scrollbar { width:20px; } // padding-right:2px; overflow-x:hidden; height:100%; &__wrap { // height:~"calc(100vh - 9rem)"; overflow-x:hidden; overflow-y:scroll; box-sizing:content-box !important; height:100%; // width:100%; // position:relative; // padding-right:1rem; position:absolute; right:-20px; // right:0; left:0; // scrollbar-width:none; } .scroll-content__content { width:100%; top:0; position:absolute; // padding-right:20px; // '24 nope } position:relative; .scrollbar { border:1px solid white; // background:@primaryColorBackgroundLight; position:absolute; right:0; top:0; bottom:0; z-index:601; width:.5rem; padding:0 .25rem; overflow:hidden; opacity:0; .transition-specific(opacity); &--visible { opacity:1; } > div { // background:@primaryColor; position:absolute; left:0; right:0; margin:.5rem 0; } &:before, &:after { content:""; display:block; width:100%; height:.5rem; // background:@secondaryColor; // background:@primaryColor; position:absolute; left:0; right:0; z-index:1; } &:before { top:0; border-bottom:1px solid white; } &:after { bottom:0; border-top:1px solid white; } } .scrollbar--visible { > div { cursor:n-resize; } } // .scrollbar { // background:@primaryColorBackgroundLight; // > div { // background:@primaryColor; // } // &:before, // &:after { // background:@primaryColor; // } // } .scrollbar { background:@fontColorGraySofter; > div { background:@fontColorGrayLight; } &:before, &:after { background:@fontColorGrayLight; } } } .pfColoredItem(@bg, @bgHover, @bgActive, @txt, @txtHover, @txtActive) { .pf-colored-item--fixed-size .pf-colored-item { max-width:30rem; } .pf-colored-item-container { display:flex; justify-content:center; &:not(.pf-colored-item--no-wrap) { flex-wrap:wrap; } .pf-colored-item-outerwrap { // flex-basis:25%; max-width:25%; width:30rem; } .pf-colored-item { padding:2rem !important; .pf-colored-item-description { font-size:1.1rem; line-height:1.8rem; } img { @media @mediaMinBreak1 { max-width:15rem; } @media @mediaBreak1 { max-width:8rem; } } } input + label:before, input + label:after { display:none !important; } input:checked + .pf-colored-item { h1, h2, h3, p { text-shadow:none; } } } .pf-colored-item { .commonFontSettings(); .transition-specific(background-color); } /*input:not(:disabled):checked */.pf-colored-item { display:block; // background:@bg; // &, .pf-colored-item-label { color:@txt; } // Doen geen solid meer dus is niet meer nodig background:@bg; // border:1px solid fade(@paragraphTextColor, 50%); } .pf-colored-item--border { border:1px solid fade(@primaryColor, 50%); } .pf-bordered-item { border:2px solid @bgHover !important; } .pf-nocolored-item { border:1px solid transparent; } input:not(:disabled):checked + .pf-nocolored-item { border-color:@bg; box-shadow:0 0 2rem fade(shade(@bgHover, 50%), 20%) !important; } input:not(:disabled):not(:checked) + .pf-colored-item:hover { background:@bgHover; } input:checked + .pf-colored-item { border-color:@bgActive; background:@bgActive; // padding:0 1rem !important; .pf-colored-item-label, .pf-colored-item-description, .pf-colored-item-description * { color:@txtActive !important; // !imp erbij vanwege gateways 3-3-`21 } } .pf-form-row--tiles:not(.pf-tiles--check-selected) .tiles__check-icon { display:none; } .pf-tiles--check-selected { label { position:relative; overflow:hidden; .tiles__check-icon { position:absolute;left:0;top:0; opacity:0; color:white; padding:2px; border-bottom-right-radius:.8rem; .transition-specific(opacity); } } input:checked + label { .tiles__check-icon { opacity:1; } } } } // .pfColoredItemCheckSign() { // input + label .pf-colored-item-wrap:before { // .checkboxUpperRight(); // } // input:checked + label .pf-colored-item-wrap:before { // .checkboxUpperRightChecked(); // } // } // .pfColoredItemCheckSignColor(@color, @secCol) { // .pfColoredItemCheckSignColor(@color) { // input + label .pf-colored-item-wrap:before { // color:@color; // // // text-shadow:0 0 5px @secCol; // } // } .nice-choice-general-align { &.nice-choice--align-left .nice-choice__items { justify-content:flex-start; } &.nice-choice--align-right .nice-choice__items { justify-content:flex-end; } &.nice-choice--align-center .nice-choice__items { justify-content:center; } &.nice-choice--align-stretched .nice-choice__items { justify-content:space-between; .nicechoice__container { flex-grow:1; } } &.nice-choice--wrap .nice-choice__items { flex-wrap:wrap; } &:not(.nice-choice--align-stretched) .nicechoice__container--dummy { display:none !important; } .nicechoice__container { max-width:100%; // label img { max-height:30vh; } > label { width:100%; } } // @media @mediaMinBreak3 { // &:not(.nice-choice--wrap--5):not(.nice-choice--wrap--6):not(.nice-choice--wrap--7):not(.nice-choice--wrap--8) { .nicechoice__container { // min-width:10rem; // } } // } // @media @mediaBreak3 { // .nicechoice__container { // min-width:10rem; // } // } // @media (max-width:22rem) { // .nicechoice__container--dummy { display:none !important; } // } .nice-choice__items .nicechoice__container.nicechoice__container--dummy { /*background:red; height:1rem; */display:none; } &.nice-choice--wrap--1 .nicechoice__container { flex-basis:100%; } &.nice-choice--wrap--2 .nicechoice__container { @media @mediaMinBreak4 { flex-basis:~"calc(50% - 2rem)"; } @media @mediaBreak4 { flex-basis:50%; } &.nicechoice__container--dummy-column-2 { display:flex; } } &.nice-choice--wrap--3 .nicechoice__container { @media @mediaMinBreak4 { flex-basis:~"calc( (100% / 3) - 2rem)"; &.nicechoice__container--dummy-column-3 { display:flex; } } @media @mediaBreak4 { flex-basis:~"calc(50% - 2rem)"; &.nicechoice__container--dummy-column-2 { display:flex; } } } &.nice-choice--wrap--4 .nicechoice__container { @media @mediaMinBreak3 { flex-basis:~"calc( (100% / 4) - 2rem)"; &.nicechoice__container--dummy-column-3 { display:flex; } } } &.nice-choice--wrap--5 .nicechoice__container { @media @mediaMinBreak3 { flex-basis:~"calc( (100% / 5) - 2rem)"; &.nicechoice__container--dummy-column-3 { display:flex; } } } &.nice-choice--wrap--6 .nicechoice__container { @media @mediaMinBreak3 { flex-basis:~"calc( (100% / 6) - 2rem)"; &.nicechoice__container--dummy-column-3 { display:flex; } } } &.nice-choice--wrap--7 .nicechoice__container { @media @mediaMinBreak3 { flex-basis:~"calc( (100% / 7) - 2rem)"; &.nicechoice__container--dummy-column-3 { display:flex; } } } &.nice-choice--wrap--8 .nicechoice__container { @media @mediaMinBreak3 { flex-basis:~"calc( (100% / 8) - 2rem)"; &.nicechoice__container--dummy-column-3 { display:flex; } } } &.nice-choice--wrap--4 .nicechoice__container, &.nice-choice--wrap--5 .nicechoice__container, &.nice-choice--wrap--6 .nicechoice__container, &.nice-choice--wrap--7 .nicechoice__container, &.nice-choice--wrap--8 .nicechoice__container { @media @mediaMinBreak4 and @mediaBreak3 { flex-basis:~"calc( (100% / 3) - 2rem)"; } @media @mediaBreak3 { &.nicechoice__container--dummy-column-2 { display: flex; } } @media @mediaBreak4 { flex-basis:~"calc(50% - 1rem)"; // &.nicechoice__container--dummy:not(.nicechoice__container--dummy-column-2) { display: none; } } } @media @mediaBreak5 { .nice-choice__items .nicechoice__container { flex-basis:100%; } } .nice-choice__items { // @media @mediaBreak3 { margin-left:-1rem; margin-right:-1rem; width:~"calc(100% + 2rem)" !important; // } } // .nicechoice__container--dummy { // @media @mediaMinBreak3 { // display:none !important; // } // } &.nice-choice--label-top { img { order:2; } .nicechoice__item-label { order:1; margin-top:.5rem; padding-top:1rem; } .nicechoice__item-description { order:3; } } &.nice-choice--background-none input:not(:checked) + .pf-colored-item { background:transparent/* !important*/; } } .nice-choice-general { display:flex; @media @mediaMinBreak3 { margin-left:-1rem; margin-right:-1rem; width:~"calc(100% + 2rem)" !important; } @media @mediaBreak4 { flex-wrap:wrap; } .pf-colored-item-margin img, .pf-colored-item img { // margin:1rem; is niet mooi bij responsive te kleine nicechoice // padding:1rem; padding:1px; padding-bottom:1rem; } .nicechoice__container { // margin:1rem; // flex-grow:1; // margin:0 .5rem; 27-8-19 anders want dialog color presets margin:1rem; display:flex; // &:first-child { margin-left:0; } // &:last-child { margin-right:0; } label { cursor:pointer; padding:0 0 1rem 0; &:hover { position:relative; z-index:10; } .transition(); // Hide the label checkbox visuals &:before, &:after { display:none; } img { // width:100%; // 2-5-2021 uit want niet goed op tablet // width:100%; // 4-5-2021 toch weer aan voor export dialog max-width:100%; max-height:20vw; min-height:10rem; align-self:center; display:block; overflow:hidden; } } .nicechoice__item-label { text-align:center; // Geen padding want dan wrapt ie te snel met 5 items bijv. // padding:1rem; max-width:~"calc(100% - 2rem)"; margin:0 auto; word-break:break-word; } .nicechoice__item-description { font-size:1rem; line-height:1.8rem; padding:0 1rem; } // &:not(:last-child) { // margin-right:1rem; // } :checked + label { z-index:1; } } // .nicechoice__container, // .nicechoice__container label, .nicechoice__item-wrap { display:flex; width:100%; height:100%; position:relative; flex-direction:column; // justify-content:space-between; justify-content:flex-start; align-items:center; } } .nice-choice-general--colors { .nicechoice__item-label { font-weight:600; color:@labelFontColor; } } .paymentReceipt(@forMail: false, @forPdf: false) { .invoice-text-align-right { text-align:right; } border-spacing:0; > table > thead > tr > *, > table > tr > *, > table > tbody > tr > *, > table > tr > * { padding:.2rem .4rem; vertical-align:top; } ul { margin-top:0; margin-bottom:0; } .left { text-align:left; } .right, .last, th.text-align-right, td.text-align-right { padding-left:2rem; } .total-item th, .total-item-final th { text-align:right; } .last, .right { text-align:right; } .total-item:not(:last-child) { margin-bottom:1em; } // &when(@forMail = false) { .padding-top-zero { padding-top:0.2cm; } // 22-04-23 anders met checkbox 2 opties en lange omschrijving te dicht op elkaar .padding-bottom-zero { padding-bottom:0; } .white-space-nowrap { white-space:nowrap; } .font-style-small { font-size:80%; } // } .text-align-right { text-align:right; } .total-item, .total-item-final, thead { // background:@primaryColorBackgroundLighter; } .total-item, .total-item-final { td, th { text-align:right; } } // .divider + .total-item th, // /*.divider + */.total-item-final th { // padding-top:1cm; // } .header th { // font-weight:600; // font-size:80%; } // td, th { &.first-child { // padding-left:0; // } } // td, th { &.last-child { // padding-right:0; // } } tbody td, tbody th { &.border { // background:#f5f5f5; // border-top:1px solid white; // border-bottom:1px solid @primaryColorBackgroundLighter; } } .spacer td { height:.75cm; } .divider { td { padding: 0; } hr { // margin:0; // border:none; // border-top:1px solid @primaryColorBackgroundLighter; // height:1px; // color:@primaryColorBackgroundLighter; } // div { td { // border:1px solid @primaryColorBackgroundLighter; &when(@forPdf = true) { border:1px solid @invoiceColor; } &when(@forPdf = false) { border:1px solid @primaryColorBackgroundLight; } } // height:2px; // background:red; // width:100%; // } } .section td, .section th { // font-weight:600; // text-align:center; padding:.5rem; white-space:nowrap; // background:@primaryColorBackgroundLight; &when(@forPdf = true) { background:@invoiceColor; } &when(@forPdf = false) { background:@primaryColorBackgroundLight; } } tr.margin.section td { // border-top:.5cm solid white; // padding-top:.5cm; } .payment-receipt__footer { padding:0 .4rem; } div sup, td sup { font-size:.7rem !important; } } .menuTitleSpan(@direction) { display:none; position:absolute; z-index:102; padding:0 .5rem; // background:white; color:@fontColorGray !important; font-weight:300 !important; border:1px solid fade(@fontColorGraySoft, 50%); line-height:3rem; &when(@direction = left) { border-right:none; border-top-left-radius:@inputEditorRadius; border-bottom-left-radius:@inputEditorRadius; right:100%; //margin-right:~"calc(.5rem - 1px)"; } &when(@direction = right) { border-left:none; border-top-right-radius:@inputEditorRadius; border-bottom-right-radius:@inputEditorRadius; left:100%; //margin-left:~"calc(.5rem - 1px)"; } } .wm-tabs__new-active-border { position:relative; &:before { content:""; position:absolute; bottom:0; display:flex; justify-content:center; // width:clamp(2rem, 50%, 3rem); margin:auto; // border-bottom:3px solid @fontColorGray; height:3px; background:@fontColorGray; border-radius:3px; max-height:0; .transition-specific(max-height); left:~"min(2rem, 30%)"; right:~"min(30%, 2rem)"; min-width:~"min(40%, 3rem)"; } &.wm-tabs__tab--active:before { max-height:3px; } }@primaryColor: fade(#4bb477, 100%); // Origineel //#3ca9b0 // @primaryColor: fade(#4bb477, 100%); // Mooooi @primaryColor: fade(#4bb477, 100%); // @primaryColor: fade(#4bb477, 100%); @secondaryColor: fade(#d8566c, 100%); @secondaryColorStrong:#F3BA05; @charlieColor: fade(#cc1cfd, 100%); @fontColorGray:#353D42; @fontColorGrayStrong:#707070; @fontColorGrayMedium:lighten(@fontColorGray, 20%); @fontColorGrayDark:#606060; @fontColorGrayDarker:#111; @fontColorGrayLight:#aaaaaa; //lighten(@fontColorGray, 20%); @fontColorGrayLighter:lighten(@fontColorGray, 35%); @fontColorGrayLighterst:lighten(@fontColorGray, 42%); @fontColorGraySoft:lighten(@fontColorGray, 50%); @fontColorGraySofter:lighten(@fontColorGray, 65%); @fontColorGraySofterst:lighten(@fontColorGray, 70%); @headerBgGray:#555; @fontColor: @primaryColor; @fontColorH1:@fontColor; @fontColorDark:darken(@fontColor, 12%); @fontColorLight:desaturate(lighten(@fontColor, 12%), 12%); @pageBackground:#fbfbfb; @grayBg:#33333322; @grayBgDarkerst:#555555cc; @grayBgDarker:#55555566; @grayBgDarkerSolid:#B7B7B7; @grayBgDark:#55555522; @grayBgDarkSolid:#505050; @grayBgMedium:#77777711; @grayBgMediumDark:#6664; @grayBgMediumLight:#f8f8f8; @grayBgMediumLighter:tint(#f8f8f8, 20%); @grayBgLight:#FAFAFA; @grayBgLighter:#FdFdFd; @boxShadowCommon:0 0 1rem #cccccc99; @boxShadowCommonLessSafe:0 0 1rem rgba(204,204,204,0.6); @boxShadowCommonSofter:0 0 1rem #cccccc77; @boxShadowSetPanelWhite:0 0 1rem @grayBgDark; @boxShadowSetPanelWhiteSoft:0 0 1rem @grayBgLight; @boxShadowSetPanelWhiteLarge:0 0 2rem @grayBgDark; @boxShadowBorderStyle:0 0 2px #66666699; @darkGrayBg:#343D42; // @fontColor: shade(@primaryColor, 5%); @fontParagraphColor:@fontColorGray;// #555; @secondaryColorHover: fade(saturate(shade(#d8566c, 30%), 20%), 100%); @paymentAccentColor:@fontColorGray; @variationColor1:#CFBEFB; @variationColor2:#F8E68E; @grayColor:#fafafa; @grayColorLight:#fefefe; // @redColor:desaturate(#D84A05, 5%); @redColor:#ff5a5a; // @redColor:#D84A05; @purpleColor:#8758d3; @blueColor:#227DBF; @validationTextColor:#f36c0f; // @greenColor:#51de50; @greenColor:#7bd629; @background:#fff; // @uspTitleColor:@primaryColor; @buttonBackground:@primaryColor; @buttonBackgroundHover:@primaryColorHover; @buttonFontColor:#ffffff; @submitButtonBackground:@secondaryColor; @submitButtonBackgroundHover:saturate(shade(@secondaryColor, 10%), 10%); @submitButtonFontColor:#ffffff; @buttonHeight: 2.5rem; @buttonLineHeight: 2.5rem; @buttonSmallHeight: 2.2rem; //@buttonSmallLineHeight: 2rem; @buttonTinyHeight: 1.8rem; //@buttonTinyLineHeight: 1.7rem; @fontSizeButtonTinyDefault: .9rem; @submitButtonHeight: @buttonHeight; @submitButtonLineHeight: @buttonLineHeight; // @textInputBackgroundColor:#ffffff; // @textInputTextColor:#454545; @fontSizeButtonLarge: 1.5rem; @fontSizeButtonDefault: .9rem; // Empty placeholders .commonFontSettings() {} .labelFontSettings() {} .inputFontSettings() {} .inputFontSettingsNoHeight() {} .buttonFontSettings() {} .buttonSmallFontSettings() {} .buttonTinyFontSettings() {} .redFontSettings() {} .submitButtonFontSettings() {} @primaryColorStrong:darken(saturate(@primaryColor, 20%), 10%); @primaryColorForDatagrid: @primaryColor; // @colorBase: desaturate(@primaryColor, 10%); @colorBase: @primaryColor; @primaryColorBorder: tint(@colorBase, 50%); @primaryColorBorderStrong: lighten(@colorBase, 12%); @primaryColorBackground: tint(saturate(@colorBase, 10%), 65%); @primaryColorBackgroundDark: lighten(@colorBase, 12%); @primaryColorBackgroundLight: desaturate(lighten(@primaryColorBackground, 8%), 20%); // @primaryColorBackgroundLighter: desaturate(lighten(@primaryColorBackground, 12%), 20%); @primaryColorBackgroundLighter: mix(@primaryColor, white, 10%); @primaryColorBackgroundLighterst: desaturate(lighten(@primaryColorBackground, 13%), 30%); @primaryColorBackgroundLighterAlmostWhite: desaturate(lighten(@primaryColorBackground, 15%), 40%); @primaryColorHover: fade(saturate(shade(#4bb477, 30%), 20%), 100%); @primaryColorActive: saturate(shade(@colorBase, 40%), 10%); @placeholderColor: fade(@fontColorGray, 50%); @primaryColorBackgroundWhite:tint(@primaryColorBackgroundLighterAlmostWhite, 65%); @primaryColorHoverColor: white; @primaryColorBackgroundHover: tint(@colorBase, 20%); @inputHoverBackgroundColor:@primaryColorBackgroundLighter; @secondaryColorBorder: lighten(@secondaryColor, 25%); @secondaryColorBackground: lighten(@secondaryColor, 35%); @secondaryColorBackgroundLight: lighten(@secondaryColorBackground, 8%); @secondaryTextColor: darken(@secondaryColor, 35%); @secondaryFontColor: #f78318; @attentionColor:#f3ba00; // @inactiveColor:lighten(desaturate(@primaryColor, 35%), 55%); //#ccc; @inactiveColor: tint(desaturate(@buttonBackground, 45%), 70%); @inactiveColorSec: tint(desaturate(@secondaryColor, 45%), 70%); // @inactiveColor:#d2eae8; @attentionColorBorder: lighten(@attentionColor, 30%); // Basic colors @black: #343d42; @blacker: #161a1c; @blackBorder: lighten(#343d42, 10%); @green: darken(@greenColor, 5%); @red: @redColor; @yellow: #F3BB09; @orange: #EC7505; @blue: #07f; @softOrange: lighten(@orange, 42%); @mediumOrange: lighten(@orange, 25%); @gray: #8C92AC; @redBackground:#fff2f0; @redBorder: tint(@red, 65%); @orangeBackground: lighten(@orange, 45%); @orangeBorder: lighten(@orange, 25%); @yellowBackground: #FFFAEB; @yellowBorder: #F3BA05; @inputCheckColor:lighten(#353D42, 20%); //fade(@primaryColor, 85%); @inputBoxShadow: none; @inputBoxShadowFocus: none; @inputWebkitFakerBoxShadow:0 0 0 1000px #fff inset; // @inputBorderColor:desaturate(tint(@primaryColor, 60%), 15%); @inputBorderColor:@fontColorGraySofter; @borderColorGraySofter: #eee; @borderColorGray: #ccc6; @borderColorGrayStrong: #cccb; @borderColorGrayStronger: #ccc; @textColorOnBackgrounds: @fontColorGray; @commonBackgroundColorHover: @primaryColorBackgroundLight; @commonBackgroundColor: @primaryColorBackgroundLighter;// desaturate(tint(@primaryColor, 90%), 15%); @commonBackgroundColorHover: desaturate(tint(@primaryColor, 85%), 15%); @commonTextColor: @textColorOnBackgrounds; @fieldsBackgroundColor:shade(@primaryColor, 80%); @fieldsBackgroundColorHover: darken(@fieldsBackgroundColor, 10%); @fieldsTextColor:white; @fieldsTextColorHover: @fieldsTextColor; @fieldsActiveBackgroundColor: fade(#4bb477, 100%); @fieldsActivetextColor:shade(@fieldsBackgroundColor, 20%); // :placeholder-shown toegevoegd voor content leadform 14-7-25 @textInputActive: ~".pf-form-row--text:not(.pf-form-row--input-type--hidden):not(.pf-form-row--text-empty) input:not(:placeholder-shown) ~ .pf-form-row--text-placeholder,.pf-form-row--text:not(.pf-form-row--input-type--hidden) input[type=date] ~ .pf-form-row--text-placeholder,.pf-form-row--text:not(.pf-form-row--input-type--hidden) input[type=time] ~ .pf-form-row--text-placeholder,.pf-form-row--text:not(.pf-form-row--input-type--hidden) input:focus ~ .pf-form-row--text-placeholder"; @textInputActivePrefix: ~".pf-form-row--text:not(.pf-form-row--input-type--hidden):not(.pf-form-row--text-empty) .html-input-prefix,.pf-form-row--text:not(.pf-form-row--input-type--hidden):has(input:focus) .html-input-prefix"; @disabledItemColor: #dcd7c8; @inputFontColor:@fontColorGray; @inputUnderlineFontColor:@inputFontColor; // @labelFontColor:#9bd8dd; // @labelFontColor:@primaryColor; @labelFontColor:@fontColorGray; @subLabelFontColor:fade(@labelFontColor, 70%); @textfieldBorderColor:@primaryColorBorder; @textfieldLabelFontColor:@labelFontColor; @textfieldUnderlineLabelFontColor:@labelFontColor; @productListStyleTitleColor: @labelFontColor; @productCardStyleTitleColor: @productListStyleTitleColor; // Paragraph @paragraphH1Color: @fontColorGray; @paragraphH2Color: @fontColorGray; @paragraphH3Color: @fontColorGray; @paragraphH1ColorInvert: #fff; @paragraphH2ColorInvert: #fff; @paragraphH3ColorInvert: #fff; @paragraphContentH1Color: @fontColorGray; @paragraphContentH2Color: @fontColorGray; @paragraphContentH3Color: @fontColorGray; @paragraphContentH4Color: @fontColorGray; @paragraphContentH5Color: @fontColorGray; @paragraphContentH6Color: @fontColorGray; @paragraphContentH1ColorInvert:#fff; @paragraphContentH2ColorInvert:#fff; @paragraphContentH3ColorInvert:#fff; @paragraphContentH4ColorInvert:#fff; @paragraphContentH5ColorInvert:#fff; @paragraphContentH6ColorInvert:#fff; @paragraphTextColor: fade(@fontColorGray, 100%); @paragraphTextLargeColor: fade(@fontColorGray, 100%); @paragraphTextMediumColor: fade(@fontColorGray, 100%); @paragraphTextSmallColor: fade(@fontColorGray, 100%); @paragraphAnchorColor: fade(@fontColor, 100%); @paragraphAnchorInvertColor: fade(@paragraphAnchorColor, 100%); @preTitleColor: fade(@fontColor, 100%); // Adres @paragraphAddressTextColor: fade(@paragraphTextColor, 100%); // Reviews @testimonialStarColor: @secondaryColor; // Thanks // @thanksH1Color: @fontColor; // @thanksH2Color: @fontColor; // @thanksTextColor: @fontColorGray; // @thanksAnchorColor: @fontColor; @invoiceColor: #eee; // Pagecounter // @pageCounterContainerBackgroundColor:transparent;// @primaryColor; // @pageCounterBackgroundColor:transparent;//rgba(255,255,255,.2); // @pageCounterTextColor:@fontColorGray;//white; @pageCounterContainerBackgroundColor: @primaryColor; @pageCounterBackgroundColor:white; @pageCounterTextColor:@fontColorGray; @pageCounterLineColor:transparent; // @pageCounterLineColor:transparent; @pageCounterLeadinTextColor:white; @biteFlowBorderColor: #E9E9E9; @contentSubTitleColor:@secondaryColor; @contentButtonColor:@buttonBackground; @contentButtonSublineColor:@contentButtonColor; .pfColoredItem( @fieldsBackgroundColor, @fieldsBackgroundColorHover, @fieldsActiveBackgroundColor, @fieldsTextColor, @fieldsTextColorHover, @fieldsActivetextColor ); // Nieuwe fontstyles ook in lessfunctions.php getOptions @baseLineHeight:1.6; @baseLineHeightHeader:1.4; @commonFontSettings_fontSize:1.05rem; @commonFontSettings_lineHeight:@baseLineHeight; @commonFontSettings_fontSize_tablet:1.05rem; @commonFontSettings_lineHeight_tablet:@baseLineHeight; @commonFontSettings_fontSize_mobile:1.0rem; @commonFontSettings_lineHeight_mobile:@baseLineHeight; .commonFontSettings() { font-size: @commonFontSettings_fontSize; line-height: @commonFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @commonFontSettings_fontSize_tablet; line-height: @commonFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @commonFontSettings_fontSize_mobile; line-height: @commonFontSettings_lineHeight_mobile; } } @labelFontSettings_fontWeight:600; @labelFontSettings_fontSize:1.1rem; @labelFontSettings_lineHeight:@baseLineHeight; @labelFontSettings_fontSize_tablet:1.1rem; @labelFontSettings_lineHeight_tablet:@baseLineHeight; @labelFontSettings_fontSize_mobile:1.1rem; @labelFontSettings_lineHeight_mobile:@baseLineHeight; .labelFontSettings() { font-weight: @labelFontSettings_fontWeight; font-size: @labelFontSettings_fontSize; line-height: @labelFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @labelFontSettings_fontSize_tablet; line-height: @labelFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @labelFontSettings_fontSize_mobile; line-height: @labelFontSettings_lineHeight_mobile; } } @sublabelFontSettings_fontSize:1rem; @sublabelFontSettings_lineHeight:@baseLineHeight; @sublabelFontSettings_fontSize_tablet:0.9rem; @sublabelFontSettings_lineHeight_tablet:@baseLineHeight; @sublabelFontSettings_fontSize_mobile:0.9rem; @sublabelFontSettings_lineHeight_mobile:@baseLineHeight; .sublabelFontSettings() { font-size: @sublabelFontSettings_fontSize; line-height: @sublabelFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @sublabelFontSettings_fontSize_tablet; line-height: @sublabelFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @sublabelFontSettings_fontSize_mobile; line-height: @sublabelFontSettings_lineHeight_mobile; } } @inputFontSettings_fontSize:1rem; @inputFontSettings_lineHeight:@baseLineHeight; @inputFontSettings_fontSize_tablet:1rem; @inputFontSettings_lineHeight_tablet:@baseLineHeight; @inputFontSettings_fontSize_mobile:1rem; @inputFontSettings_lineHeight_mobile:@baseLineHeight; .inputFontSettings() { // font-size: @inputFontSettings_fontSize; height: @inputFontSettings_lineHeight !important; } font-size: @inputFontSettings_fontSize; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @inputFontSettings_fontSize_tablet; line-height: @inputFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @inputFontSettings_fontSize_mobile; line-height: @inputFontSettings_lineHeight_mobile; } // height:auto !important; // 8-12-24 omdat anders dropdown en text niet evne hooge zijn } .inputFontSettingsNoHeight() { // font-size: @inputFontSettings_fontSize; height: @inputFontSettings_lineHeight !important; } font-size: @inputFontSettings_fontSize; } @buttonFontSettings_fontWeight:600; @buttonFontSettings_fontSize:1.4rem; @buttonFontSettings_lineHeight:@baseLineHeight; @buttonFontSettings_fontSize_tablet:1.25rem; @buttonFontSettings_lineHeight_tablet:@baseLineHeight; @buttonFontSettings_fontSize_mobile:1.1rem; @buttonFontSettings_lineHeight_mobile:@baseLineHeight; .buttonFontSettings() { font-weight: @buttonFontSettings_fontWeight; * { font-weight:inherit; font-size:inherit; line-height:inherit; text-decoration:inherit; } *:not(.material-symbols-rounded) { font-family:inherit; } font-size: @buttonFontSettings_fontSize; line-height: @buttonFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @buttonFontSettings_fontSize_tablet; line-height: @buttonFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @buttonFontSettings_fontSize_mobile; line-height: @buttonFontSettings_lineHeight_mobile; } } @submitButtonFontSettings_fontWeight:600; @submitButtonFontSettings_fontSize:1.3rem; @submitButtonFontSettings_lineHeight:@baseLineHeight; @submitButtonFontSettings_fontSize_tablet:1.2rem; @submitButtonFontSettings_lineHeight_tablet:@baseLineHeight; @submitButtonFontSettings_fontSize_mobile:1.2rem; @submitButtonFontSettings_lineHeight_mobile:@baseLineHeight; .submitButtonFontSettings() { font-weight: @submitButtonFontSettings_fontWeight; font-size: @submitButtonFontSettings_fontSize; line-height: @submitButtonFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @submitButtonFontSettings_fontSize_tablet; line-height: @submitButtonFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @submitButtonFontSettings_fontSize_mobile; line-height: @submitButtonFontSettings_lineHeight_mobile; } } @redFontSettings_lineHeight:@baseLineHeight; @redFontSettings_lineHeight_tablet:@baseLineHeight; @redFontSettings_lineHeight_mobile:@baseLineHeight; .redFontSettings() { line-height: @redFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { line-height: @redFontSettings_lineHeight_tablet; } @media @mediaBreak3 { line-height: @redFontSettings_lineHeight_mobile; } } // Paragraphs @paragraphH1FontSettings_fontWeight:800; @paragraphH1FontSettings_fontFamily: "Open Sans", "Open Sans"; @paragraphH1FontSettings_fontSize:2.5rem; // @baseLineHeight; @paragraphH1FontSettings_lineHeight:@baseLineHeightHeader; @paragraphH1FontSettings_fontSize_tablet:2.2rem; @paragraphH1FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphH1FontSettings_fontSize_mobile:2rem; @paragraphH1FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphH1FontSettings() { font-weight: @paragraphH1FontSettings_fontWeight; font-family: @paragraphH1FontSettings_fontFamily; ; * { font-family:inherit; } font-size: @paragraphH1FontSettings_fontSize; /*line-height: @paragraphH1FontSettings_lineHeight;*/ line-height: @paragraphH1FontSettings_lineHeight;// ~"calc(@{paragraphH1FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @paragraphH1FontSettings_fontSize_tablet; line-height: @paragraphH1FontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @paragraphH1FontSettings_fontSize_mobile; line-height: @paragraphH1FontSettings_lineHeight_mobile; } } @paragraphH2FontSettings_fontWeight:800; @paragraphH2FontSettings_fontFamily: "Open Sans", "Open Sans"; @paragraphH2FontSettings_fontSize:1.8rem; // @baseLineHeightHeader; @paragraphH2FontSettings_lineHeight:@baseLineHeightHeader; @paragraphH2FontSettings_fontSize_tablet:1.7rem; @paragraphH2FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphH2FontSettings_fontSize_mobile:1.6rem; @paragraphH2FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphH2FontSettings() { font-weight: @paragraphH2FontSettings_fontWeight; font-family: @paragraphH2FontSettings_fontFamily; ; * { font-family:inherit; } font-size: @paragraphH2FontSettings_fontSize; /*line-height: @paragraphH2FontSettings_lineHeight;*/ line-height: @paragraphH2FontSettings_lineHeight;// ~"calc(@{paragraphH2FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @paragraphH2FontSettings_fontSize_tablet; line-height: @paragraphH2FontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @paragraphH2FontSettings_fontSize_mobile; line-height: @paragraphH2FontSettings_lineHeight_mobile; } } @paragraphH3FontSettings_fontWeight:600; @paragraphH3FontSettings_fontSize:1.4rem; // @baseLineHeightHeader; @paragraphH3FontSettings_lineHeight:@baseLineHeightHeader; @paragraphH3FontSettings_fontSize_tablet:1.3rem; @paragraphH3FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphH3FontSettings_fontSize_mobile:1.2rem; @paragraphH3FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphH3FontSettings() { font-weight: @paragraphH3FontSettings_fontWeight; * { font-family:inherit; } font-size: @paragraphH3FontSettings_fontSize; /*line-height: @paragraphH3FontSettings_lineHeight;*/ line-height: @paragraphH3FontSettings_lineHeight;// ~"calc(@{paragraphH3FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @paragraphH3FontSettings_fontSize_tablet; line-height: @paragraphH3FontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @paragraphH3FontSettings_fontSize_mobile; line-height: @paragraphH3FontSettings_lineHeight_mobile; } } @paragraphContentH1FontSettings_fontWeight:800; @paragraphContentH1FontSettings_fontSize:3.5rem; // @baseLineHeight; @paragraphContentH1FontSettings_lineHeight:@baseLineHeightHeader; @paragraphContentH1FontSettings_fontSize_tablet:2.4rem; @paragraphContentH1FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphContentH1FontSettings_fontSize_mobile:2rem; @paragraphContentH1FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphContentH1FontSettings() { :where(h1,h2,h3,h4,h5,h6) { font-weight: @paragraphContentH1FontSettings_fontWeight; } --fontSizeHeader: @paragraphContentH1FontSettings_fontSize; font-size: var(--fontSizeHeader); /*line-height: @paragraphContentH1FontSettings_lineHeight;*/ line-height: @paragraphContentH1FontSettings_lineHeight;// ~"calc(@{paragraphH1FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { --fontSizeHeader: @paragraphContentH1FontSettings_fontSize_tablet; font-size: var(--fontSizeHeader); line-height: @paragraphContentH1FontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSizeHeader: @paragraphContentH1FontSettings_fontSize_mobile; font-size: var(--fontSizeHeader); line-height: @paragraphContentH1FontSettings_lineHeight_mobile; } } @paragraphContentH2FontSettings_fontWeight:800; @paragraphContentH2FontSettings_fontSize:2.2rem; // @baseLineHeight; @paragraphContentH2FontSettings_lineHeight:@baseLineHeightHeader; @paragraphContentH2FontSettings_fontSize_tablet:2rem; @paragraphContentH2FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphContentH2FontSettings_fontSize_mobile:1.6rem; @paragraphContentH2FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphContentH2FontSettings() { :where(h1,h2,h3,h4,h5,h6) { font-weight: @paragraphContentH2FontSettings_fontWeight; } --fontSizeHeader: @paragraphContentH2FontSettings_fontSize; font-size: var(--fontSizeHeader); /*line-height: @paragraphContentH2FontSettings_lineHeight;*/ line-height: @paragraphContentH2FontSettings_lineHeight;// ~"calc(@{paragraphH2FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { --fontSizeHeader: @paragraphContentH2FontSettings_fontSize_tablet; font-size: var(--fontSizeHeader); line-height: @paragraphContentH2FontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSizeHeader: @paragraphContentH2FontSettings_fontSize_mobile; font-size: var(--fontSizeHeader); line-height: @paragraphContentH2FontSettings_lineHeight_mobile; } } @paragraphContentH3FontSettings_fontWeight:600; @paragraphContentH3FontSettings_fontSize:1.8rem; // @baseLineHeight; @paragraphContentH3FontSettings_lineHeight:@baseLineHeightHeader; @paragraphContentH3FontSettings_fontSize_tablet:1.7rem; @paragraphContentH3FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphContentH3FontSettings_fontSize_mobile:1.6rem; @paragraphContentH3FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphContentH3FontSettings() { :where(h1,h2,h3,h4,h5,h6) { font-weight: @paragraphContentH3FontSettings_fontWeight; } --fontSizeHeader: @paragraphContentH3FontSettings_fontSize; font-size: var(--fontSizeHeader); /*line-height: @paragraphContentH3FontSettings_lineHeight;*/ line-height: @paragraphContentH3FontSettings_lineHeight;// ~"calc(@{paragraphH3FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { --fontSizeHeader: @paragraphContentH3FontSettings_fontSize_tablet; font-size: var(--fontSizeHeader); line-height: @paragraphContentH3FontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSizeHeader: @paragraphContentH3FontSettings_fontSize_mobile; font-size: var(--fontSizeHeader); line-height: @paragraphContentH3FontSettings_lineHeight_mobile; } } @paragraphContentH4FontSettings_fontWeight:600; @paragraphContentH4FontSettings_fontSize:1.4rem; // @baseLineHeight; @paragraphContentH4FontSettings_lineHeight:@baseLineHeightHeader; @paragraphContentH4FontSettings_fontSize_tablet:1.3rem; @paragraphContentH4FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphContentH4FontSettings_fontSize_mobile:1.2rem; @paragraphContentH4FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphContentH4FontSettings() { :where(h1,h2,h3,h4,h5,h6) { font-weight: @paragraphContentH4FontSettings_fontWeight; } --fontSizeHeader: @paragraphContentH4FontSettings_fontSize; font-size: var(--fontSizeHeader); /*line-height: @paragraphContentH4FontSettings_lineHeight;*/ line-height: @paragraphContentH4FontSettings_lineHeight;// ~"calc(@{paragraphH4FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { --fontSizeHeader: @paragraphContentH4FontSettings_fontSize_tablet; font-size: var(--fontSizeHeader); line-height: @paragraphContentH4FontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSizeHeader: @paragraphContentH4FontSettings_fontSize_mobile; font-size: var(--fontSizeHeader); line-height: @paragraphContentH4FontSettings_lineHeight_mobile; } } @paragraphContentH5FontSettings_fontWeight:600; @paragraphContentH5FontSettings_fontSize:1.3rem; // @baseLineHeight; @paragraphContentH5FontSettings_lineHeight:@baseLineHeightHeader; @paragraphContentH5FontSettings_fontSize_tablet:1.2rem; @paragraphContentH5FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphContentH5FontSettings_fontSize_mobile:1.2rem; @paragraphContentH5FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphContentH5FontSettings() { :where(h1,h2,h3,h4,h5,h6) { font-weight: @paragraphContentH5FontSettings_fontWeight; } --fontSizeHeader: @paragraphContentH5FontSettings_fontSize; font-size: var(--fontSizeHeader); /*line-height: @paragraphContentH5FontSettings_lineHeight;*/ line-height: @paragraphContentH5FontSettings_lineHeight;// ~"calc(@{paragraphH5FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { --fontSizeHeader: @paragraphContentH5FontSettings_fontSize_tablet; font-size: var(--fontSizeHeader); line-height: @paragraphContentH5FontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSizeHeader: @paragraphContentH5FontSettings_fontSize_mobile; font-size: var(--fontSizeHeader); line-height: @paragraphContentH5FontSettings_lineHeight_mobile; } } @paragraphContentH6FontSettings_fontWeight:600; @paragraphContentH6FontSettings_fontSize:1.3rem; // @baseLineHeight; @paragraphContentH6FontSettings_lineHeight:@baseLineHeightHeader; @paragraphContentH6FontSettings_fontSize_tablet:1.2rem; @paragraphContentH6FontSettings_lineHeight_tablet:@baseLineHeightHeader; @paragraphContentH6FontSettings_fontSize_mobile:1.2rem; @paragraphContentH6FontSettings_lineHeight_mobile:@baseLineHeightHeader; .paragraphContentH6FontSettings() { :where(h1,h2,h3,h4,h5,h6) { font-weight: @paragraphContentH6FontSettings_fontWeight; } --fontSizeHeader: @paragraphContentH6FontSettings_fontSize; font-size: var(--fontSizeHeader); /*line-height: @paragraphContentH6FontSettings_lineHeight;*/ line-height: @paragraphContentH6FontSettings_lineHeight;// ~"calc(@{paragraphH6FontSettings_fontSize} * 1.5)"; @media @mediaBreak1 and @mediaMinBreak3 { --fontSizeHeader: @paragraphContentH6FontSettings_fontSize_tablet; font-size: var(--fontSizeHeader); line-height: @paragraphContentH6FontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSizeHeader: @paragraphContentH6FontSettings_fontSize_mobile; font-size: var(--fontSizeHeader); line-height: @paragraphContentH6FontSettings_lineHeight_mobile; } } @preTitleFontSettings_fontSize:clamp(16px, 30%, 20px); @preTitleFontSettings_lineHeight:@baseLineHeight; @preTitleFontSettings_fontSize_tablet:clamp(15px, 30%, 20px); @preTitleFontSettings_lineHeight_tablet:@baseLineHeight; @preTitleFontSettings_fontSize_mobile:clamp(14px, 30%, 20px); @preTitleFontSettings_lineHeight_mobile:@baseLineHeight; .preTitleFontSettings() { font-size: ~"max(17px, @{preTitleFontSettings_fontSize})"; // line-height: @preTitleFontSettings_lineHeight; line-height:normal; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @preTitleFontSettings_fontSize_tablet; line-height:normal; /*line-height: @preTitleFontSettings_lineHeight_tablet;*/ } @media @mediaBreak3 { font-size: @preTitleFontSettings_fontSize_mobile; line-height:normal; /*line-height: @preTitleFontSettings_lineHeight_mobile;*/ } } @paragraphTextFontSettings_fontSize:1.2rem; @paragraphTextFontSettings_lineHeight:@baseLineHeight; @paragraphTextFontSettings_fontSize_tablet:1.1rem; @paragraphTextFontSettings_lineHeight_tablet:@baseLineHeight; @paragraphTextFontSettings_fontSize_mobile:1rem; @paragraphTextFontSettings_lineHeight_mobile:@baseLineHeight; .paragraphTextFontSettings() { --fontSize:@paragraphTextFontSettings_fontSize; font-size:var(--fontSize); line-height: @paragraphTextFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { --fontSize:@paragraphTextFontSettings_fontSize_tablet; font-size:var(--fontSize); line-height: @paragraphTextFontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSize:@paragraphTextFontSettings_fontSize_mobile; font-size:var(--fontSize); line-height: @paragraphTextFontSettings_lineHeight_mobile; } } @paragraphTextLargeFontSettings_fontSize:1.35rem; @paragraphTextLargeFontSettings_lineHeight:@baseLineHeight; @paragraphTextLargeFontSettings_fontSize_tablet:1.2rem; @paragraphTextLargeFontSettings_lineHeight_tablet:@baseLineHeight; @paragraphTextLargeFontSettings_fontSize_mobile:1.1rem; @paragraphTextLargeFontSettings_lineHeight_mobile:@baseLineHeight; .paragraphTextLargeFontSettings() { --fontSize:@paragraphTextLargeFontSettings_fontSize; font-size:var(--fontSize); line-height: @paragraphTextLargeFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { --fontSize:@paragraphTextLargeFontSettings_fontSize_tablet; font-size:var(--fontSize); line-height: @paragraphTextLargeFontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSize:@paragraphTextLargeFontSettings_fontSize_mobile; font-size:var(--fontSize); line-height: @paragraphTextLargeFontSettings_lineHeight_mobile; } } @paragraphTextMediumFontSettings_fontSize:1.05rem; @paragraphTextMediumFontSettings_lineHeight:@baseLineHeight; @paragraphTextMediumFontSettings_fontSize_tablet:1rem; @paragraphTextMediumFontSettings_lineHeight_tablet:@baseLineHeight; @paragraphTextMediumFontSettings_fontSize_mobile:1rem; @paragraphTextMediumFontSettings_lineHeight_mobile:@baseLineHeight; .paragraphTextMediumFontSettings() { --fontSize: @paragraphTextMediumFontSettings_fontSize; font-size:var(--fontSize); line-height: @paragraphTextMediumFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { --fontSize: @paragraphTextMediumFontSettings_fontSize_tablet; font-size:var(--fontSize); line-height: @paragraphTextMediumFontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSize: @paragraphTextMediumFontSettings_fontSize_mobile; font-size:var(--fontSize); line-height: @paragraphTextMediumFontSettings_lineHeight_mobile; } } @paragraphTextSmallFontSettings_fontSize:1rem; @paragraphTextSmallFontSettings_lineHeight:@baseLineHeight; @paragraphTextSmallFontSettings_fontSize_tablet:1rem; @paragraphTextSmallFontSettings_lineHeight_tablet:@baseLineHeight; @paragraphTextSmallFontSettings_fontSize_mobile:.95rem; @paragraphTextSmallFontSettings_lineHeight_mobile:@baseLineHeight; .paragraphTextSmallFontSettings() { --fontSize:@paragraphTextSmallFontSettings_fontSize; font-size:var(--fontSize); line-height: @paragraphTextSmallFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { --fontSize:@paragraphTextSmallFontSettings_fontSize_tablet; font-size:var(--fontSize); line-height: @paragraphTextSmallFontSettings_lineHeight_tablet; } @media @mediaBreak3 { --fontSize:@paragraphTextSmallFontSettings_fontSize_mobile; font-size:var(--fontSize); line-height: @paragraphTextSmallFontSettings_lineHeight_mobile; } } @paragraphTextFormFontSettings_fontSize:1.05rem; @paragraphTextFormFontSettings_lineHeight:@baseLineHeight; @paragraphTextFormFontSettings_fontSize_tablet:1rem; @paragraphTextFormFontSettings_lineHeight_tablet:@baseLineHeight; @paragraphTextFormFontSettings_fontSize_mobile:1rem; @paragraphTextFormFontSettings_lineHeight_mobile:@baseLineHeight; .paragraphTextFormFontSettings() { font-size: @paragraphTextFormFontSettings_fontSize; line-height: @paragraphTextFormFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @paragraphTextFormFontSettings_fontSize_tablet; line-height: @paragraphTextFormFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @paragraphTextFormFontSettings_fontSize_mobile; line-height: @paragraphTextFormFontSettings_lineHeight_mobile; } } @paragraphTextFormSmallFontSettings_fontSize:13px; @paragraphTextFormSmallFontSettings_lineHeight:@baseLineHeight; @paragraphTextFormSmallFontSettings_fontSize_tablet:13px; @paragraphTextFormSmallFontSettings_lineHeight_tablet:@baseLineHeight; @paragraphTextFormSmallFontSettings_fontSize_mobile:13px; @paragraphTextFormSmallFontSettings_lineHeight_mobile:@baseLineHeight; .paragraphTextFormSmallFontSettings() { font-size: @paragraphTextFormSmallFontSettings_fontSize; line-height: @paragraphTextFormSmallFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @paragraphTextFormSmallFontSettings_fontSize_tablet; line-height: @paragraphTextFormSmallFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @paragraphTextFormSmallFontSettings_fontSize_mobile; line-height: @paragraphTextFormSmallFontSettings_lineHeight_mobile; } } @paragraphAnchorFontSettings_lineHeight:@baseLineHeight; @paragraphAnchorFontSettings_lineHeight_tablet:@baseLineHeight; @paragraphAnchorFontSettings_lineHeight_mobile:@baseLineHeight; .paragraphAnchorFontSettings() { line-height: @paragraphAnchorFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { line-height: @paragraphAnchorFontSettings_lineHeight_tablet; } @media @mediaBreak3 { line-height: @paragraphAnchorFontSettings_lineHeight_mobile; } } // Buttons @paragraphButtonStyle1FontSettings_fontSize:1.2rem; @paragraphButtonStyle1FontSettings_lineHeight:@baseLineHeight; @paragraphButtonStyle1FontSettings_fontSize_tablet:1.15rem; @paragraphButtonStyle1FontSettings_lineHeight_tablet:@baseLineHeight; @paragraphButtonStyle1FontSettings_fontSize_mobile:1.1rem; @paragraphButtonStyle1FontSettings_lineHeight_mobile:@baseLineHeight; .paragraphButtonStyle1FontSettings() { .wm-btn--font { } font-size: @paragraphButtonStyle1FontSettings_fontSize; line-height: @paragraphButtonStyle1FontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @paragraphButtonStyle1FontSettings_fontSize_tablet; line-height: @paragraphButtonStyle1FontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @paragraphButtonStyle1FontSettings_fontSize_mobile; line-height: @paragraphButtonStyle1FontSettings_lineHeight_mobile; } } @paragraphButtonStyle2FontSettings_fontSize:1.2rem; @paragraphButtonStyle2FontSettings_lineHeight:@baseLineHeight; @paragraphButtonStyle2FontSettings_fontSize_tablet:1.15rem; @paragraphButtonStyle2FontSettings_lineHeight_tablet:@baseLineHeight; @paragraphButtonStyle2FontSettings_fontSize_mobile:1.1rem; @paragraphButtonStyle2FontSettings_lineHeight_mobile:@baseLineHeight; .paragraphButtonStyle2FontSettings() { .wm-btn--font { } font-size: @paragraphButtonStyle2FontSettings_fontSize; line-height: @paragraphButtonStyle2FontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @paragraphButtonStyle2FontSettings_fontSize_tablet; line-height: @paragraphButtonStyle2FontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @paragraphButtonStyle2FontSettings_fontSize_mobile; line-height: @paragraphButtonStyle2FontSettings_lineHeight_mobile; } } @paragraphButtonStyle3FontSettings_fontSize:1.2rem; @paragraphButtonStyle3FontSettings_lineHeight:@baseLineHeight; @paragraphButtonStyle3FontSettings_fontSize_tablet:1.15rem; @paragraphButtonStyle3FontSettings_lineHeight_tablet:@baseLineHeight; @paragraphButtonStyle3FontSettings_fontSize_mobile:1.1rem; @paragraphButtonStyle3FontSettings_lineHeight_mobile:@baseLineHeight; .paragraphButtonStyle3FontSettings() { .wm-btn--font { } font-size: @paragraphButtonStyle3FontSettings_fontSize; line-height: @paragraphButtonStyle3FontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @paragraphButtonStyle3FontSettings_fontSize_tablet; line-height: @paragraphButtonStyle3FontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @paragraphButtonStyle3FontSettings_fontSize_mobile; line-height: @paragraphButtonStyle3FontSettings_lineHeight_mobile; } } // Adres @paragraphAddressTextFontSettings_lineHeight:@baseLineHeight; @paragraphAddressTextFontSettings_lineHeight_tablet:@baseLineHeight; @paragraphAddressTextFontSettings_lineHeight_mobile:@baseLineHeight; .paragraphAddressTextFontSettings() { line-height: @paragraphAddressTextFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { line-height: @paragraphAddressTextFontSettings_lineHeight_tablet; } @media @mediaBreak3 { line-height: @paragraphAddressTextFontSettings_lineHeight_mobile; } } // // Thanks // // // // // // @baseLineHeight; // // // @baseLineHeight; // // @thanksH1FontSettings_lineHeight_mobile:@baseLineHeight; // .thanksH1FontSettings() { // // line-height: @thanksH1FontSettings_lineHeight; // @media @mediaBreak1 and @mediaMinBreak3 { line-height: @thanksH1FontSettings_lineHeight_tablet; } // @media @mediaBreak3 { line-height: @thanksH1FontSettings_lineHeight_mobile; } // } // // // // // // @baseLineHeight; // // // @baseLineHeight; // // @thanksH2FontSettings_lineHeight_mobile:@baseLineHeight; // .thanksH2FontSettings() { // // line-height: @thanksH2FontSettings_lineHeight; // @media @mediaBreak1 and @mediaMinBreak3 { line-height: @thanksH2FontSettings_lineHeight_tablet; } // @media @mediaBreak3 { line-height: @thanksH2FontSettings_lineHeight_mobile; } // } // // // // // // @baseLineHeight; // // // @baseLineHeight; // // @thanksTextFontSettings_lineHeight_mobile:@baseLineHeight; // .thanksTextFontSettings() { // // line-height: @thanksTextFontSettings_lineHeight; // @media @mediaBreak1 and @mediaMinBreak3 { line-height: @thanksTextFontSettings_lineHeight_tablet; } // @media @mediaBreak3 { line-height: @thanksTextFontSettings_lineHeight_mobile; } // } // // // // // // @baseLineHeight; // // // @baseLineHeight; // // @thanksAnchorFontSettings_lineHeight_mobile:@baseLineHeight; // .thanksAnchorFontSettings() { // // line-height: @thanksAnchorFontSettings_lineHeight; // @media @mediaBreak1 and @mediaMinBreak3 { line-height: @thanksAnchorFontSettings_lineHeight_tablet; } // @media @mediaBreak3 { line-height: @thanksAnchorFontSettings_lineHeight_mobile; } // // } // Products @productListStyleTitleFontSettings_lineHeight:@baseLineHeight; @productListStyleTitleFontSettings_lineHeight_tablet:@baseLineHeight; @productListStyleTitleFontSettings_lineHeight_mobile:@baseLineHeight; .productListStyleTitleFontSettings() { line-height: @productListStyleTitleFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { line-height: @productListStyleTitleFontSettings_lineHeight_tablet; } @media @mediaBreak3 { line-height: @productListStyleTitleFontSettings_lineHeight_mobile; } } @productCardStyleTitleFontSettings_fontSize: 2.1rem; @productCardStyleTitleFontSettings_lineHeight:@baseLineHeight; @productCardStyleTitleFontSettings_fontSize_tablet: 29px; @productCardStyleTitleFontSettings_lineHeight_tablet:@baseLineHeight; @productCardStyleTitleFontSettings_fontSize_mobile: 24px; @productCardStyleTitleFontSettings_lineHeight_mobile:@baseLineHeight; .productCardStyleTitleFontSettings() { font-size: @productCardStyleTitleFontSettings_fontSize; line-height: @productCardStyleTitleFontSettings_lineHeight; @media @mediaBreak1 and @mediaMinBreak3 { font-size: @productCardStyleTitleFontSettings_fontSize_tablet; line-height: @productCardStyleTitleFontSettings_lineHeight_tablet; } @media @mediaBreak3 { font-size: @productCardStyleTitleFontSettings_fontSize_mobile; line-height: @productCardStyleTitleFontSettings_lineHeight_mobile; } } .peggy__form--theme { /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { -webkit-text-size-adjust: 100%; /* 2 */ } main { display: block; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ /* button, /* input, /* optgroup, /* select, /* textarea { /* font-family: inherit; /* 1 */ /* font-size: 100%; /* 1 */ /* line-height: 1.15; /* 1 */ /* margin: 0; /* 2 */ /* } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; }input[type=checkbox], input[type=radio] { &[disabled] { + label { &:after { background:@inactiveColor; } } } &:focus { + label:before { // box-shadow:@inputBoxShadowFocus inset; } } + label { &:before { // box-shadow: 0 0 8px @primaryColorBackgroundLight inset; box-shadow:@inputBoxShadow inset; // background:#FAFAFA; background:#FFF; border:1px solid @inputBorderColor; } &:after { background:@inputCheckColor; border:1px solid white; } // &:hover { // background:@inputHoverBackgroundColor; // } } // &:not(:checked) + label:before { // box-shadow: 0 0 8px @primaryColorBackgroundLight inset; // } } input[type=text], input[type=url], input[type=password], input[type=file], input[type=email], input[type=number], input[type=date], input[type=time], input[type=color], input[type=search], select, .drop-down, textarea { border-color:@inputBorderColor; // box-shadow:@inputBoxShadow; &:focus { box-shadow:@inputBoxShadowFocus; // border-color:@primaryColor; } &:disabled { background:@grayBgLight; // color:fade(@primaryColor, 40%); // box-shadow:0 0 0.7rem white inset; // border-color:@borderColorGray; } &:read-only { cursor:default; } } input[type=text], input[type=url], input[type=password], input[type=file], input[type=email], input[type=number], input[type=date], input[type=time], input[type=color], input[type=search], textarea { &.placeholder, option.placeholder, &::placeholder { color:@placeholderColor; } } // .peggy__form--input-style-underline .html-input-prefix { // color:@textfieldUnderlineLabelFontColor; // .inputFontSettings(); // } .peggy__form--input-style-default .html-input-prefix span { color:@textfieldLabelFontColor; // .inputFontSettings(); // beter van niet voor bijv. website-input 11-9-25 } input[type=color] { background:white; } .use-pattern { input[type=text], input[type=url], input[type=date], input[type=number] { &[pattern]:invalid { background:@red; color:white; } } } .progressbar:not(.progressbar--sec) { .progressbarColor(@primaryColor, @primaryColorBackgroundLighter, @primaryColor); } .progressbar.progressbar--secondary { .progressbarColor(@secondaryColor, @secondaryColorBackground, @secondaryTextColor); } .pf-testimonial-image:not([fill]) { fill:#111111; }.wm-btn { &:not(.wm-btn--no-styling):not(.wm-btn--tiny):not(.wm-btn--small) { // 7-8-22 small toegevoegd voor uploadcomp .buttonFontSettings(); } & { padding:.5rem 1rem; height:auto; } // [class*="mf-icon"] { // margin-left:-.3rem; // margin-right:.3rem; // } &--small { font-size:.9rem; } &--large { padding:1rem 3rem; // line-height:2rem; height:2rem; font-size:1.5rem; // Aanpas naar padding voor upsell knop wrap font-weight:600; } &--medium-small { font-size:1.1rem; padding:1rem; } &--medium { padding:0 3rem; // line-height:3rem; height:3rem; font-size:1.3rem; font-weight:600; @media @mediaBreak1 { padding:0 1.5rem; } @media @mediaMinBreak1 { padding:0 3rem; } } }.pf-form-row--validation-messages-message { color:@validationTextColor; font-weight:600; .redFontSettings(); } .pf-form-row--validation-messages { // display:flex; flex-direction:column; gap:1rem; // &-message { padding:.5rem 0; } } .pf-form-row--validation-messages-error { .validation-error(); .html-input-prefix { color:@validationTextColor; } } .pf-form-row--validation-messages-valid { .validation-valid(); } .parsley-error, .validation-error { color:@validationTextColor !important; border-color:@validationTextColor !important; // text-shadow:0 0 8px white; // padding-bottom:2rem !important; // Uit want beweegt te veel input { border-color:@validationTextColor !important; } } // Geen labels? .pf-form-row--has-no-label.pf-form-row--validation-error { // margin-bottom:2rem; // Uit want beweegt te veel } .pf-form-row--validation-messages { // white-space:nowrap; 11 8 19 uit want beetje gek zo // height:2rem; // overflow:hidden; position:relative; &-message { width:100%; // overflow:hidden; // text-overflow:ellipsis; } } // Was voor alles, maar is volgens mij alleen voor settingspanel .settings-panel { .pf-form-row--text input[pattern]:invalid:not(:focus) { color:@red !important; } } /*.pf-form-row--is-required.pf-form-row--validation-error > .pf-form-row__container > :not(.pf-form-row__sub-form) .pf-form-row__label--label, .pf-form-row--is-required.pf-form-row--validation-error > .pf-form-row__label--sub-label, .peggy__form--text-label-inside .pf-form-row--is-required.pf-form-row--validation-error > .pf-form-row__container > :not(.pf-form-row__sub-form) .pf-form-row--text-placeholder { &, &:after { color:@validationTextColor !important; } }*/.button3d(@strongness:1) { // @color, @shadow, @white) { // background-image: linear-gradient(-180deg, tint(@color, @shadow) 0%, @color 100%); // box-shadow: 0 -0.25rem 1.5rem saturate(shade(@color, @shadow), @shadow) inset, // 0 0.75rem 0.5rem rgba(255,255,255, @white) inset, // 0 0.25rem 0.5rem 0 saturate(tint(@color, @shadow), @shadow) inset; border-radius:3px; // background-image: linear-gradient(-180deg, rgba(255,255,255,1) 0%, @color 100%); box-shadow: 0 -0.25rem 1.5rem rgba(0,0,0,.1 * @strongness) inset, 0 0.75rem 1.5rem rgba(255,255,255,.15 * @strongness) inset, 0 0.25rem 0.5rem 0 rgba(255,255,255,.1 * @strongness) inset, 0 0 1rem 0rem rgba(255,255,255,.2); } .wm-btn { .setBaseButtonColor(@buttonFontColor, @buttonBackground, @buttonBackgroundHover); // &:not(.wm-btn--prim):not(.wm-btn--sec):not(.wm-btn--green):not(.wm-btn--green-light):not(.wm-btn--danger):not(.wm-btn--attention):not(.wm-btn--delete):not(.wm-btn--invert):not([disabled]):not(.wm-btn--disabled):not(.wm-btn--border) { // .button3d(0.5);//@primaryColor, 3%, .15); // } &--sec { &:not(:disabled) { background:@secondaryColor; &, & * { color:@buttonFontColor; } // text-shadow:0 0 7px #5f420066; is nu met drop-shadow &:not(.wm-btn--tiny) { border:2px solid @secondaryColor; } &.wm-btn--tiny { border:1px solid @secondaryColor; } } // text-shadow:0 0 @buttonFontColor; // WHY 8-10-24 niet mooi met witte inverted knop // span { // filter:drop-shadow(0 0 5px rgba(0,0,0,0.15)); // } &:not([disabled]):not(.wm-btn--disabled):hover { background:shade(@secondaryColor, 10%); border-color:shade(@secondaryColor, 10%); } } &--charlie { &:not(:disabled) { background:@charlieColor; &, & * { color:@buttonFontColor; } // text-shadow:0 0 7px #5f420066; is nu met drop-shadow &:not(.wm-btn--tiny) { border:2px solid @charlieColor; } &.wm-btn--tiny { border:1px solid @charlieColor; } } // text-shadow:0 0 @buttonFontColor; // WHY 8-10-24 niet mooi met witte inverted knop // span { // filter:drop-shadow(0 0 5px rgba(0,0,0,0.15)); // } &:not([disabled]):not(.wm-btn--disabled):hover { background:shade(@charlieColor, 10%); border-color:shade(@charlieColor, 10%); } } &--black { &:not(:disabled) { background:@black; &, & * { color:@buttonFontColor; } // text-shadow:0 0 7px #5f420066; is nu met drop-shadow &:not(.wm-btn--tiny) { border:2px solid @black; } &.wm-btn--tiny { border:1px solid @black; } } // text-shadow:0 0 @buttonFontColor; // WHY 8-10-24 niet mooi met witte inverted knop // span { // filter:drop-shadow(0 0 5px rgba(0,0,0,0.15)); // } &:not([disabled]):not(.wm-btn--disabled):hover { background:shade(@black, 10%); border-color:shade(@black, 10%); } } @invertColor: white; &--invert { background:@invertColor; border:2px solid @fontColorGrayLighter; box-shadow:none; &, .material-symbols-rounded { color:@fontColorGray; } // &:not([disabled]):not(.wm-btn--disabled):hover { // background:@primaryColorBackgroundLighterst; // } &:not([disabled]):not(.wm-btn--disabled):hover { // nee. In ieder geval niet in besteloverzicht enzo. 18-4-25 background:@grayBgLight; // border-color:@primaryColor;//background:@primaryColorBackgroundLighterst; } } // &--white { // background:#ffffff; // color:@fontColorGray; // } &--gray { background:@invertColor; color:@fontColor/* !important*/; // border:1px solid @invertColor; // border:1px solid @primaryColorBorder; 7-8-22 vanwege uploadcomp border:2px solid #eee; box-shadow:@inputBoxShadow; } // &--cancel { // color:@fontColorGray !important; // background:none !important; // } }.pf-form-row--radio-checkbox-check input[type="checkbox"] + label:after { color:@inputCheckColor; } .pf-form-row--text-placeholder > div > * { .labelFontSettings(); // font-size:1rem; } .peggy__form--input-style-default .pf-form-row--text .pf-form-row--text-placeholder { color:@commonTextColor; } .peggy__form--input-style-half .pf-form-row--text .pf-form-row--text-placeholder/*, .peggy__form--input-style-underline .pf-form-row--text .pf-form-row--text-placeholder*/ { color:@textfieldUnderlineLabelFontColor; } .pf-add-remove span, .pf-form-row--product .pf-product__title, .pf-payment-continue { color:@labelFontColor; } // .pf-product:not(.pf-product--style-list) { // .pf-product-card-wrap, // .pf-product-cardSmall-wrap-3, // .pf-product__right { // border-color:@primaryColorBorder; // } // } .pf-payment-continue { .labelFontSettings(); } .pf-form-row { // &__field-info { // &:after { // background:@primaryColor; // } // + div { // border-color:@primaryColorBackground; // box-shadow:0 0 2rem @primaryColorBackgroundLighter // } // } /* was zonder where en met >, maar dat werkt niet.. */ :where( .pf-form-row__form-label, .pf-form-row__label-container > .pf-form-row__label, .pf-form-row__container > .pf-form-row__label ) { color:@labelFontColor; &, & > .pf-form-row__label--label { .labelFontSettings(); } } // .pf-form-row__description { // .commonFontSettings(); // } /* was zonder where en met >, maar dat werkt niet.. */ &.pf-form-row--is-disabled :where( .pf-form-row--text-placeholder, .pf-form-row__form-label, .pf-form-row__label-container > .pf-form-row__label, .pf-form-row__container > .pf-form-row__label ) { color:@disabledItemColor; } > .pf-form-row__container > .pf-form-row__label > .pf-form-row__label--sub, .pf-form-row__label--sub-label { color:@subLabelFontColor; .sublabelFontSettings(); } input:not([type=radio]):not([type=image]):not([type=checkbox]):not([type=color]):not([type=date]), select { .inputFontSettings(); } select option { color:initial; // font-size:90%; &:disabled { color:@fontColorGraySoft; } } textarea { .inputFontSettingsNoHeight(); } } .peggy__form--input-style-default .pf-form-row { input:not([type=radio]):not([type=image]):not([type=checkbox]):not([type=color]), select, textarea { color:@inputFontColor; .transition-specific(box-shadow); &:focus { box-shadow:@inputBoxShadowFocus; } } } // .peggy__form--input-style-underline .pf-form-row { // input:not([type=radio]):not([type=image]):not([type=checkbox]):not([type=color]), // select, // textarea { // color:@inputUnderlineFontColor; // .transition-specific(box-shadow); // &:focus { // box-shadow:@inputBoxShadowFocus; // } // } // } .pf-form-row--is-required .pf-form-row__label--label:after, // Edit grid .pf-form-row--is-required > .pf-form-row__label--sub-label:after { color:@labelFontColor; } .pf-form-row--rating .wm-rating { .wm-rating-value-wrap .wm-rating__star { color:@primaryColor; } .wm-rating-placeholder-wrap .wm-rating__star { color:fade(@primaryColor, 20%); } // &__star { // color:@primaryColor; // } // &:hover .wm-rating-placeholder-wrap .wm-rating__star { // color:lighten(@primaryColor, 15%); // } } .pf-form-row--divider { hr { border:none; border-top:1px solid @fontColor; // border-top-color: lighten(@primaryColorBorder, 20%); // border-left:none; border-right:none; } &-editortext { color:fade(@fontColor, 20%); } .text-divider-label .pf-form-row__label--label { .labelFontSettings(); color:@labelFontColor; } } // .pf-form-row__label--sub-label { // // color:@labelFontColor; // .commonFontSettings(); // color:@labelFontColor; // } // } :where( .peggy-header, .pf-form-row--product, .ck-content, .wysiwyg-preview, .pf-paragraph-wrapper, .pf-paragraph-wrapper-generic, .pf-paragraph ) ul:not([style*="list-style"]) { li:before, li.usp--has-text span.list--header { color:@primaryColor; } } .settings-panel .ck-editor, .pf-form-row--textblock .pf-form-row__element { // h1, h2, h3 { // // color: @primaryColor; // color:@fontColor; // } // p, li { // // color: @fontColor; // color:@fontColor; // } // ul li:before { // // color: @primaryColor; // color:@primaryColor; // } // table { // &, td, th { // border-color:@primaryColorBackground; // } // th { // border-bottom:0; // } // th { // background:@primaryColorBorder; // } // } blockquote { margin-left:0; margin-right:0; padding:0 1rem; border-left: 3px solid @primaryColor; > p:first-child { margin-top:0; } > p:last-child { margin-bottom:0; } } } .mf-payment { .pf-form-row__form-label, // &__page, &__voucher--back { color:@fontColorGray; .commonFontSettings(); // font-size:1.1rem; line-height:1.4rem; } &__empty-cart { .commonFontSettings(); color:@fontColorGray; } // .payment__cart-line a { // Lijkt hier niet te moeten: http://view.formbuilder.local.nl/a2779721/payment; // color:@fontColor; // } // &__gateways label { // background:white; // border:1px solid fade(@primaryColor, 50%); // } // .mf-payment__gateways-icon::before { .transition(); } // &__gateways :checked + label { // background:mix(@primaryColor, @commonBackgroundColor, 50%); // background:@fieldsActiveBackgroundColor; // color:@fieldsActivetextColor; // border-color:@primaryColor; // .mf-payment__gateways-icon::before { background:white; } // } .mf-payment__gateway label { .tiles__check-icon { background:var(--colorAlpha); } } .mf-payment__gateways input:checked + label { border-color:var(--colorAlpha); box-shadow:0 0 1px 1px var(--colorAlpha) inset; } &--style-simple .mf-payment__page { &, & a { color:@commonTextColor; } } .mf-payment__page-subtotal strong { // color:@primaryColor; color:@paymentAccentColor; } &--no-background { .mf-payment__page-subtotal, .mf-payment__page-total { &:before { content:""; display:block; width:100%; border-top:1px solid fade(@fontColorGray, 15%); } } } } .mf-payment--items-dashed { .mf-payment__overview-item--last { border-color:@primaryColorBorder; } } .pf-form-row--type-pagebreak { .progressbar__label, .wm-btn span { font-size:1rem !important; } } @pagebreakProgressColor: @greenColor; .pagebreakprogress { &__label { color:@fontColorGray; } .pagebreakprogress__page .pagebreakprogress__bar:before, .pagebreakprogress__page .pagebreakprogress__bar:after { background:@fontColorGraySofter; } .pagebreakprogress__page--active .pagebreakprogress__bar:before, .pagebreakprogress__page--active .pagebreakprogress__bar:after { background:@primaryColorBorder; } } .tiles-container { input:not(:checked) + .pf-colored-item { border:1px solid @inputBorderColor; padding:1px !important; background:white; background:#fcfcfc; } input:checked + .pf-colored-item { border:2px solid var(--colorAlpha) !important; background:var(--colorAlpha13) !important; .tiles__item-wrap * { color:@fontColorGray !important; } } label .tiles__check-icon { background:var(--colorAlpha); color:white !important; } } .pf-form-row--view-state-view { border-color:@primaryColorBorder; background:fade(@primaryColorBackground, 20%); .pf-form-row__incremental-label { .soft-gradient(@primaryColorBackground); &/*, [class^="mf-icon"]*/ { color:@fontColor; } &:before { color:@greenColor; } } } .pf-form-row--repeater--border { .repeater-container { border:1px solid @textfieldBorderColor; } } .pf-form-row--repeater--background { .repeater-container { background:@primaryColorBackgroundLighter; } } .pf-form-row--repeater--viewstate-view.repeater-container:before { background:@commonBackgroundColor; } .pf-form-row--repeater .pf-form-row--repeater-icons [class*="material-symbols-rounded"] { background-color:@primaryColor; color:white; padding:.4rem; } // .pf-form-row--repeater--repeater .repeater-container:hover { // background:fade(@commonBackgroundColor,30%); // } .pf-form-row--fileUpload .wm-fileupload__preview-container:before { .commonFontSettings(); } .pf-form-row--submitButton .wm-btn:not(.wm-btn--forced-color) { &:where([disabled], .wm-btn--disabled) { background:@inactiveColor; } .setBaseButtonColor(@submitButtonFontColor, @submitButtonBackground, @submitButtonBackgroundHover); } .pf-form-row--subTotal .mf-payment__overview { color:@labelFontColor; .labelFontSettings(); } &, .settings-panel { &:extend(.nice-choice-general--colors all); } .peggy__form-head > div { color:white; } .editable-grid__dropdown-container:after, .pf-form-row--dropdown .pf-form-row__element:after, .pf-form-row--product .pf-product__options:after { border-top-color:@labelFontColor; } // .peggy__form--input-style-underline { // // input:not([type=radio]):not([type=image]):not([type=checkbox]):not([type=color])/*, textarea*/, select { // // background:transparent; // // border-left:0;border-top:0;border-right:0; // // } // .pf-form-row--type-text-universal-container:before { // background:fade(@textfieldUnderlineLabelFontColor, 50%); // } // .pf-form-row--type-text-universal-container .pf-form-row--text-underline { // background:fade(@textfieldUnderlineLabelFontColor, 50%); // } // } .pf-product { &__message { &, & * { color:@paragraphTextColor; .paragraphTextFontSettings(); } } &__price { &, & * { color:@fontColorGray; .commonFontSettings(); } } } // .pf-upsell__container .pf-paragraph p, // .pf-product__message, // .pf-product__description p, // .pf-form-row__description p { // .commonFontSettings(); // } .audiotracks { &__track { color:@paragraphTextColor; } progress::-webkit-progress-bar { background-color:@commonBackgroundColor; } progress::-webkit-progress-value { background:@primaryColor; } } .pf-social-icons > a { color:@primaryColor; } .pf-form-row__field-info { color:@labelFontColor; } .pf-datalist { background:@background; box-shadow:@boxShadowSetPanelWhite; &__item { &, * { color:@fontColorGray; } &--focussed { background:@primaryColorBackground; } } } // .pf-gallery__thumb--active { // border:1px solid @primaryColorBackground; // } .pf-address { &__btn { // color:@primaryColor; } &__match-text { // background:@grayBgLight; // color:@fontColorGray; // border:1px solid @primaryColor; } } .peggy-switch-label input:checked + div .peggy-switch__wrap-wrap, .peggy-switch-label--always-active input + div .peggy-switch__wrap-wrap { background:@primaryColor !important; } .peggy-switch-label input:checked + div .peggy-switch__wrap-wrap .peggy-switch__selector, .peggy-switch-label--always-active input + div .peggy-switch__wrap-wrap .peggy-switch__selector { border-color:@primaryColor; } .peggy-switch__title { color:@labelFontColor; } .pf-form-row--testimonial .pf-testimonial-stars span { color:var(--colorAlpha) !important; } .pf-form-row--upsell .pf-form-row__container .pf-upsell__container { // background:fade(@primaryColor, 10%); // border:2px dashed @primaryColor; border-size:2px; border-style:dashed; border-color:var(--color); background:~"hsl(from var(--color) h s 95)"; } // .pf-paragraph-wrapper-generic a { // color:@paragraphAnchorColor; // border-bottom-color:@paragraphAnchorColor; // } .pf-content__counters { color:var(--fontColorGray); } .pf-content__counters-icon { background:@primaryColorBackground; } .peggy__form :where( .pf-border-radius-buttons, .wm-btn ) { border-radius: 10rem; } :where( .pf-border-radius-inputs, select, .mf-text-number-container .wm-btn, input[type=text],input[type=password],input[type=number],input[type=email],input[type=date],input[type=time] ) { border-radius: .8rem; } input[type=text].column-address--first { border-top-right-radius: 0; border-bottom-right-radius: 0; } input[type=text].column-address--middle { border-radius: 0; } input[type=text].column-address--last { border-top-left-radius: 0; border-bottom-left-radius: 0; } textarea { border-radius: 12.8px; nahborder-bottom-right-radius:2px; } input[type=checkbox] + label:before { border-radius:5px; } input[type=checkbox] + label:after { border-radius:3px; } .pf-product:not(.pf-product--style-list) .pf-product__right, :where( .mf-video-wrapper iframe, .peggy__thanks-page, .pf-thanks-upsells__popup, .pf-upsell__image picture img, .pf-page-timer__tile, .pf-form-row__container .pf-upsell__container, .pf-form-row--upsell .pf-form-row__container, .pf-form-row--pagebreakProgress--peggydefault .pf-form-row--pagebreakProgress__page, .progressbar, .pf-gallery__img, .pf-form-row--type-accept--border .pf-form-row__element, .pf-border-radius-backgrounds, .template-blocks .pf-form-row__container, .pf-gallery__thumb, .pf-address__match-text, .nicechoice__container label, .nicechoice__container label img, .pf-form-row--textblock figure img, .pf-form-row--textblock picture img, .pf-form-row--textblock table, .pf-form-row--textblock table, .pf-form-row--media .pf-form-row__element > *, .pf-form-row--validation-messages-message, .pf-content__counters-item, .pf-form-row--divider hr, .pf-form-row__field-info + div, .tiles__item, .pf-content__title-pre--background ) { border-radius: var(--borderRadiusBackgrounds); } :where(.pf-product, .pf-content__media, .pf-content__mediablocks) { --borderWidth:0px; } .pf-content__media--videoUrl .pf-content__media-main-wrap, .pf-content__media img { border-radius:calc(var(--borderRadiusBackgrounds) - var(--borderWidth)); } .peggy__form--main .peggy__form > .pf-form-row, .peggy-side__bar .peggy__form > .pf-form-row { &, > .pf-form-row--wrap { border-radius: var(--borderRadiusBackgrounds); } } // fix for header .peggy__form-head, .peggy__form-head-img { border-top-left-radius:var(--borderRadiusBackgrounds); border-top-right-radius:var(--borderRadiusBackgrounds); // overflow:hidden; } .peggy__form-head ~ .peggy__form { border-top-left-radius:0; border-top-right-radius:0; } .pf-form-row--pagebreakProgress--arrows .pf-form-row--pagebreakProgress__page:first-child { border-bottom-left-radius:var(--borderRadiusBackgrounds); } .wm-tbody .wm-tr:first-child .wm-td:first-child, .pf-form-row--textblock table > :first-child > tr:first-child > :first-child, .styled-table > tbody > tr:first-child > td:first-child { border-top-left-radius:calc(var(--borderRadiusBackgrounds) * 0.8); } .wm-tbody .wm-tr:first-child .wm-td:last-child, .pf-form-row--textblock table > :first-child > tr:first-child > :last-child, .styled-table > tbody > tr:first-child > td:last-child { border-top-right-radius:calc(var(--borderRadiusBackgrounds) * 0.8); } .wm-tbody .wm-tr:last-child .wm-td:first-child, .pf-form-row--textblock table > :last-child > tr:last-child > :first-child, .styled-table > tbody > tr:last-child > td:first-child { border-bottom-left-radius:calc(var(--borderRadiusBackgrounds) * 0.8); } .wm-tbody .wm-tr:last-child .wm-td:last-child, .pf-form-row--textblock table > :last-child > tr:last-child > :last-child, .styled-table > tbody > tr:last-child > td:last-child { border-bottom-right-radius:calc(var(--borderRadiusBackgrounds) * 0.8); } .pf-border-radius-backgrounds--half, .mf-payment__overview { border-radius:calc(var(--borderRadiusBackgrounds) / 2); } @media @mediaMinBreak2 { .peggy__form > .pf-form-row--top { border-top-left-radius:var(--borderRadiusBackgrounds); border-top-right-radius:var(--borderRadiusBackgrounds); } .peggy__form > .pf-form-row--bottom { border-bottom-left-radius:var(--borderRadiusBackgrounds); border-bottom-right-radius:var(--borderRadiusBackgrounds); } } .pf-form-row .pf-form-row__section-label { padding:.75rem var(--formPadding); background:var(--colorWhite3); > div { color:@fontColorGray !important; } border-top-left-radius:calc(.8rem / 100 * 90); border-top-right-radius:calc(.8rem / 100 * 90); }@media @mediaMinBreak2 { .peggy-body__form { justify-content:flex-start } }.tiles__item-pre-title { background:var(--colorAlpha); color:white; }.pf-form-row--submitButton .wm-btn { &, * { text-shadow:0 0 7px rgba(95,66,0,0.4) !important; } } :where(.peggy__form > .pf-form-row, .peggy__menu-wrap) .wm-btn:not(.wm-btn--sec).wm-btn--forced-color:not(.wm-btn--white):not(.wm-btn--invert) { &, * { text-shadow:0 0 7px rgba(95,66,0,0.4) !important; } } :where(.peggy__form > .pf-form-row, .peggy__menu-wrap) .wm-btn--sec.wm-btn--forced-color:not(.wm-btn--white):not(.wm-btn--invert) { &, * { text-shadow:0 0 7px rgba(95,66,0,0.4) !important; } } input[type=checkbox], input[type=radio] { + label:before { border-color: fade(#cdcdcd, 100%); } } .peggy__form--input-style-default { textarea, select, input:not([type=radio]):not([type=image]):not([type=checkbox]):not([type=color]) { border-color: fade(#cdcdcd, 100%); } } .pf-form-row--payment .mf-payment__voucher-wrap .wm-btn { border:1px solid fade(#cdcdcd, 100%); border-left:0; } // input[type=radio] + label:before, input[type=checkbox] + label:before { // border-color: fade(#606060, 100%); // } input[type=checkbox] + label:after, input[type=radio] + label:after { background: fade(#606060, 100%); color: fade(#606060, 100%) !important; } } .pf-form-row--product :where(.pf-product--style-listDetail, .pf-product--style-list) .pf-product__title { // .productListStyleTitleFontSettings(); color: @productListStyleTitleColor; } .pf-form-row--product :where(.pf-product--style-card, .pf-product--style-cardSmall) .pf-product__title { // .productCardStyleTitleFontSettings(); color: @productCardStyleTitleColor; } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-generic) :where(h1, h2, h3, h4, h5, h6,strong.header--medium) * { color:inherit; font-size:inherit; font-family:inherit; font-weight:inherit; line-height:inherit; } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-generic, .pf-paragraph-wrapper-form) :where(h1, h2, h3) { &, * { margin:0; } } .peggy__form--theme .pf-form-row--textblock :where(.pf-paragraph, .pf-paragraph-wrapper-form) h2, :where(.peggy__thanks-page, .ck-content) h2 { .paragraphH1FontSettings(); color: @paragraphH1Color; } .peggy__form--theme .pf-form-row--textblock :where(.pf-paragraph, .pf-paragraph-wrapper-form) h3, :where(.peggy__thanks-page, .ck-content) h3 { .paragraphH2FontSettings(); color: @paragraphH2Color; } .peggy__form--theme .pf-form-row--textblock :where(.pf-paragraph, .pf-paragraph-wrapper-form) h4, :where(.peggy__thanks-page, .ck-content) h4 { .paragraphH3FontSettings(); color: @paragraphH3Color; } .peggy__form--theme .pf-paragraph-wrapper-form :where(p, td, th, li):not(.pf-small) { .paragraphTextFormFontSettings(); } .ck-content p.pf-small, .peggy__form--theme .pf-paragraph-wrapper-form p.pf-small { .paragraphTextFormSmallFontSettings(); } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-generic) .pf-content__title-pre { .preTitleFontSettings(); &:not(.pf-content__title-pre--background) { color:@preTitleColor; } } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-1) { .paragraphContentH1FontSettings(); color: var(--fontColorGray);; .header-tag { --headerUnderlineColor:var(--colorAlpha0); --headerUnderlineColorInvert:currentColor; } .header-tag u { display:inline-block; text-decoration:none; position:relative; &:after { --underlineHeight: ~"calc( var(--fontSizeHeader) * 0.3)"; --underlineBottom: ~"calc( var(--fontSizeHeader) * -0.2)"; --underlineInlinePadding: ~"calc( var(--underlineBottom) * 0.5)"; content:''; position:absolute; bottom:var(--underlineBottom); left:var(--underlineInlinePadding); right:var(--underlineInlinePadding); height:var(--underlineHeight); z-index:-1; background-color:var(--headerUnderlineColor); mask-image:url('https://dev.peggypay.com/app/images/contentblock/underline/underline-default.svg'); mask-size:100% var(--underlineHeight); } } } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-1) .header-tag { font-size:inherit; line-height:inherit; position:relative;z-index:0; // nodig voor underline viewer } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-2) { .paragraphContentH2FontSettings(); color: var(--fontColorGray);; .header-tag { --headerUnderlineColor:var(--colorAlpha0); --headerUnderlineColorInvert:currentColor; } .header-tag u { display:inline-block; text-decoration:none; position:relative; &:after { --underlineHeight: ~"calc( var(--fontSizeHeader) * 0.3)"; --underlineBottom: ~"calc( var(--fontSizeHeader) * -0.2)"; --underlineInlinePadding: ~"calc( var(--underlineBottom) * 0.5)"; content:''; position:absolute; bottom:var(--underlineBottom); left:var(--underlineInlinePadding); right:var(--underlineInlinePadding); height:var(--underlineHeight); z-index:-1; background-color:var(--headerUnderlineColor); mask-image:url('https://dev.peggypay.com/app/images/contentblock/underline/underline-default.svg'); mask-size:100% var(--underlineHeight); } } } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-2) .header-tag { font-size:inherit; line-height:inherit; position:relative;z-index:0; // nodig voor underline viewer } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-3) { .paragraphContentH3FontSettings(); color: var(--fontColorGray);; .header-tag { --headerUnderlineColor:var(--colorAlpha0); --headerUnderlineColorInvert:currentColor; } .header-tag u { display:inline-block; text-decoration:none; position:relative; &:after { --underlineHeight: ~"calc( var(--fontSizeHeader) * 0.3)"; --underlineBottom: ~"calc( var(--fontSizeHeader) * -0.2)"; --underlineInlinePadding: ~"calc( var(--underlineBottom) * 0.5)"; content:''; position:absolute; bottom:var(--underlineBottom); left:var(--underlineInlinePadding); right:var(--underlineInlinePadding); height:var(--underlineHeight); z-index:-1; background-color:var(--headerUnderlineColor); mask-image:url('https://dev.peggypay.com/app/images/contentblock/underline/underline-default.svg'); mask-size:100% var(--underlineHeight); } } } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-3) .header-tag { font-size:inherit; line-height:inherit; position:relative;z-index:0; // nodig voor underline viewer } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-4) { .paragraphContentH4FontSettings(); color: var(--fontColorGray);; .header-tag { --headerUnderlineColor:var(--colorAlpha0); --headerUnderlineColorInvert:currentColor; } .header-tag u { display:inline-block; text-decoration:none; position:relative; &:after { --underlineHeight: ~"calc( var(--fontSizeHeader) * 0.3)"; --underlineBottom: ~"calc( var(--fontSizeHeader) * -0.2)"; --underlineInlinePadding: ~"calc( var(--underlineBottom) * 0.5)"; content:''; position:absolute; bottom:var(--underlineBottom); left:var(--underlineInlinePadding); right:var(--underlineInlinePadding); height:var(--underlineHeight); z-index:-1; background-color:var(--headerUnderlineColor); mask-image:url('https://dev.peggypay.com/app/images/contentblock/underline/underline-default.svg'); mask-size:100% var(--underlineHeight); } } } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-4) .header-tag { font-size:inherit; line-height:inherit; position:relative;z-index:0; // nodig voor underline viewer } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-5) { .paragraphContentH5FontSettings(); color: var(--fontColorGray);; .header-tag { --headerUnderlineColor:var(--colorAlpha0); --headerUnderlineColorInvert:currentColor; } .header-tag u { display:inline-block; text-decoration:none; position:relative; &:after { --underlineHeight: ~"calc( var(--fontSizeHeader) * 0.3)"; --underlineBottom: ~"calc( var(--fontSizeHeader) * -0.2)"; --underlineInlinePadding: ~"calc( var(--underlineBottom) * 0.5)"; content:''; position:absolute; bottom:var(--underlineBottom); left:var(--underlineInlinePadding); right:var(--underlineInlinePadding); height:var(--underlineHeight); z-index:-1; background-color:var(--headerUnderlineColor); mask-image:url('https://dev.peggypay.com/app/images/contentblock/underline/underline-default.svg'); mask-size:100% var(--underlineHeight); } } } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-5) .header-tag { font-size:inherit; line-height:inherit; position:relative;z-index:0; // nodig voor underline viewer } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-6) { .paragraphContentH6FontSettings(); color: var(--fontColorGray);; .header-tag { --headerUnderlineColor:var(--colorAlpha0); --headerUnderlineColorInvert:currentColor; } .header-tag u { display:inline-block; text-decoration:none; position:relative; &:after { --underlineHeight: ~"calc( var(--fontSizeHeader) * 0.3)"; --underlineBottom: ~"calc( var(--fontSizeHeader) * -0.2)"; --underlineInlinePadding: ~"calc( var(--underlineBottom) * 0.5)"; content:''; position:absolute; bottom:var(--underlineBottom); left:var(--underlineInlinePadding); right:var(--underlineInlinePadding); height:var(--underlineHeight); z-index:-1; background-color:var(--headerUnderlineColor); mask-image:url('https://dev.peggypay.com/app/images/contentblock/underline/underline-default.svg'); mask-size:100% var(--underlineHeight); } } } .peggy__form--theme :where(.pf-paragraph, .pf-paragraph-wrapper) :where(.header-6) .header-tag { font-size:inherit; line-height:inherit; position:relative;z-index:0; // nodig voor underline viewer } .peggy__form--theme :where(.peggy__thanks-page, .ck-content, .pf-paragraph-wrapper) :not(h1,h2,h3,h4,h5,h6) > :where(p, td, th, li), .peggy__form--theme .pf-paragraph :where(p, td, th, li) { .paragraphTextFontSettings(); color: @paragraphTextColor; } .peggy__form--theme :where(.peggy__thanks-page, .ck-content, .pf-paragraph-wrapper-large) :not(h1,h2,h3,h4,h5,h6) > :where(p, td, th, li) { .paragraphTextLargeFontSettings(); color: @paragraphTextLargeColor; } .peggy__form--theme :where(.peggy__thanks-page, .ck-content, .pf-paragraph-wrapper-medium) :not(h1,h2,h3,h4,h5,h6) > :where(p, td, th, li) { .paragraphTextMediumFontSettings(); color: @paragraphTextMediumColor; } .peggy__form--theme :where(.peggy__thanks-page, .ck-content, .pf-paragraph-wrapper-small) :not(h1,h2,h3,h4,h5,h6) > :where(p, td, th, li) { .paragraphTextSmallFontSettings(); color: @paragraphTextSmallColor; } .pf-content__button-container { * { font-size:unset !important; line-height:unset !important; } // Was beide important maar dat gaat niet goed met de meuk hieronder 2-7-25 } .pf-content__button-container .wm-btn small { font-size:~"max(16px, 60%) !important"; } .pf-content__button-container .pf-content__button-subline { font-size:~"max(17px, 70%)" !important; line-height:normal !important; } .pf-content__button-container--style-1 { .paragraphButtonStyle1FontSettings(); } .pf-content__button-container--style-2 { .paragraphButtonStyle2FontSettings(); } .pf-content__button-container--style-3 { .paragraphButtonStyle3FontSettings(); } .peggy__form--theme .pf-paragraph-address, .peggy__form--theme .pf-paragraph-address :where( p, p *, td, th, li ) { .paragraphAddressTextFontSettings(); color: @paragraphAddressTextColor; } .pf-form-row--submitButton .wm-btn { &, > * { .submitButtonFontSettings() !important; } } .peggy__thanks-page, .ck-content a, .peggy__form--theme .pf-paragraph-wrapper a:not(.pf-no-coloring), .peggy__form--theme .pf-paragraph-wrapper-generic a:not(.pf-no-coloring), .peggy__form--theme .pf-paragraph a, .peggy__form--theme .pf-form-row--upsell a { border-bottom-color:@paragraphAnchorColor; &, & * { .paragraphAnchorFontSettings(); color:@paragraphAnchorColor; } } a.pf-no-coloring { color:inherit; } :where( .peggy__form--theme .pf-form-row__field-info + div p, .peggy__form--theme .pf-form-row__meta-info, .peggy__form--theme .radiobutton-container label, .peggy__form--theme .pf-testimonial-stars, .peggy__form--theme .pf-testimonial-meta, .peggy__form--theme .pf-form-row--type-upsell label, .pageno, .peggy__form--theme .pf-form-row--payment .pf-form-row__element, .pf-form-row--media .pf-image-subline, .pf-page-timer, .peggy__thanks-page ) { color: @fontColorGray; .commonFontSettings(); // !important; a { color: @fontColor; } } .common-text-color, .common-text-color *, .peggy__form--theme .pf-form-row--type-accept label a { color:@fontColorGray; } .pf-page-timer__lead-in :where(h2, p, strong, u) { color:white !important; } .pf-page-timer { background:#4bb477; border-bottom:@pageCounterLineColor 2px solid; &__tile { background:#ffffff; color:@pageCounterTextColor; } } #cc-main { --cc-btn-primary-bg:var(--colorAlpha0); --cc-btn-primary-border-color:transparent; --cc-btn-primary-color:white; }.peggy__footer { background:var(--colorAlpha0); .paragraphTextSmallFontSettings(); }.peggy__footer { color:white; }.peggy__footer .peggy__menu-logo-img--inverted { display:block; }.peggy__footer img.social { filter:invert(1); }.peggy__footer { border-top:2px solid transparent; } @container formContainer (min-width:850px) { .pf-content__container--collapse-columns { gap:0; &.pf-content__container--swapped { .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg) + .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg) { border-right:0 !important; border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; } .pf-content__column:has( + .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg)) { border-left:0 !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; } } &:not(.pf-content__container--swapped) { .pf-content__column:has( + .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg)) { border-right:0 !important; border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; } .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg) + .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg) { border-left:0 !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; } } } } @container formContainer (max-width:850px) { .pf-content__container--collapse-columns { gap:0; .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg) + .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg) { border-top:0 !important; border-top-right-radius:0 !important; border-top-left-radius:0 !important; } .pf-content__column:has( + .pf-content__column:not(.pf-content__column--empty):not(.pf-content__column--no-bg)) { border-bottom:0 !important; border-bottom-right-radius:0 !important; border-bottom-left-radius:0 !important; } } } :root { --black:@black; --ppContentAnimationSpeed:.2s; --ppContentAnimationModuleDistance:-1rem; --ppContentAnimationDelay:calc(var(--ppContentAnimationSpeed) / 3); } .pf-form-row__content-bg { transition:border-color ease 1s; &:not(.content--inviewport) { border-color:transparent !important; } } .pf-form-row--content :where(.pf-animation-item, .pf-content__global-title, .pf-content__column-container, .pf-content__usp-item, .pf-content__textblock.pf-content__textblock--default .pf-content__textblock-item, .pf-content__textblock--faq, .pf-content__counters-item):not(.pf-content__usp,.pf-content__counters) { .transition(var(--ppContentAnimationSpeed)) !important; } .peggy__full-width-container:not(.peggy__form-content-container) .pf-form-row--content, .peggy__full-width-container.peggy__form-content-container .pf-form-row--content:not(:first-of-type) { :where(.pf-animation-item, .pf-content__global-title, .pf-content__column-container, .pf-content__usp-item, .pf-content__textblock.pf-content__textblock--default .pf-content__textblock-item, .pf-content__textblock--faq, .pf-content__counters-item):not(.pf-content__usp,.pf-content__textBlock, .pf-content__counters):not(.content--inviewport) { opacity:0; } } // Per module .peggy__full-width-container:not(.peggy__form-content-container) .pf-form-row--content, .peggy__full-width-container.peggy__form-content-container .pf-form-row--content:not(:first-of-type) { :where(.pf-animation-item, .pf-content__global-title, .pf-content__column-container):not(.pf-content__usp,.pf-content__counters,.pf-content__textBlock):not(.content--inviewport) { transform:translateY(var(--ppContentAnimationModuleDistance)) scale(.9); } } // Module specifiek @iterations2: 9; .animationDelayLoopUsp (@i) when (@i > 0) { .pf-animation-item:nth-child(@{i}), .pf-content__usp-list .pf-content__usp-item:nth-child(@{i}) { transition-delay: calc(@i * var(--ppContentAnimationDelay) * 1) !important; } .animationDelayLoopUsp(@i - 1); } .animationDelayLoopUsp (@iterations2); .peggy__full-width-container:not(.peggy__form-content-container) .pf-form-row--content, .peggy__full-width-container.peggy__form-content-container .pf-form-row--content:not(:first-of-type) { :where(.pf-animation-item, .pf-content__usp-list--style-tiles .pf-content__usp-item, .pf-content__textblock--default .pf-content__textblock-item, .pf-content__textblock--faq, .pf-content__counters-item):not(.content--inviewport) { opacity:0; transform:translateY(var(--ppContentAnimationModuleDistance)) scale(.9); } } .peggy__form-footer-mobile, .peggy__form-footer { &, * { color:@fontColorGray !important; } } body.peggy-standalone, .nowhy-kanniet-arrowshadow-peggy-body__embed-container > .peggy__form--theme, &.formbuilder-form--customize-tool { background: fade(#ffffff, 100%); } .peggy__form--main .peggy__form > .pf-form-row, .peggy-side__bar .peggy__form > .pf-form-row, .peggy__thanks-page { --formBackgroundColor:fade(#ffffff, 100%); background-color:var(--formBackgroundColor); } .peggy__thanks-page, .peggy__form-main-container .peggy__form, .peggy__form-head { filter: drop-shadow(0 0 3.2rem fade(#2b78c9, 20%)); } .peggy__thanks-page, .peggy__form--main .peggy__form > .pf-form-row, .peggy-side__bar .peggy__form > .pf-form-row { border: var(--formBorderSize) solid fade(#efefef, 100%); } .peggy-standalone .peggy-header { * { color: fade(@fontColorGray, 100%); } } .peggy-footer { background: fade(@primaryColor, 10%); } .peggy-footer { &, & * { color: fade(@fontColorGray, 100%); } } @media @mediaBreak2 { .a{} .peggy__form-main-container.peggy__side-wrap { padding:.5rem; } .peggy-body__panel.peggy-body__form + .peggy-body__panel.peggy-side__bar { margin-top:2rem; } } .peggy__form--theme { width:100%; .peggy__form--form-alignment-center { .pf-form-row__label, .pf-form-row__form-label { text-align:center; } } .pf-form-row__label { font-size:0.9rem; line-height:1.8rem; padding-bottom:.5rem; margin:0; .pf-form-row__label--label + .pf-form-row__label--sub { padding-top:0; } &--sub { font-size:0.8rem; line-height:1.5rem; } &--small { // waar is dit voor? font-size:5rem; color:red; // font-size:0.7rem; line-height:1rem; padding:0.2rem; // color:#555; } &--label:before { padding-right:0.3rem; font-size:0.8rem; line-height:1.2rem; } } .pf-form-row__description { display:flex; flex-direction:column; gap:.5rem; margin-bottom:var(--formPadding); p { margin:0; :where(strong, span, a, u, i) { color:inherit; } } } .editable-grid__controls, .addable-items__row.targetting { .wm-btn--tiny { padding:.6rem; width:3rem; height:auto; &:not(:last-child) { margin-right:.2rem; } } } .pf-form-row--validation-messages { order:10; &--visible { margin-top:.5rem; } } &.peggy__form--form-alignment-left, &.peggy__form--form-alignment-right { .pf-form-row--validation-messages { flex-basis:100%; } } } // STANDALONE .peggy.peggy-standalone .peggy__full-width-container { width:100%; // overflow:hidden; // waarom? Kan ei`k niet voor de scroll-snap } .peggy__form-main-container .peggy__form { // overflow:hidden; // Voor onderste field bg kleur en borderradius } :root { --fieldPadding:.5rem; --contentContentBgPadding:2rem; --formPadding:1rem; @media @mediaMinBreak2 { --formPadding:2rem; } // @media @mediaBreak2 and @mediaMinBreak4 { // } // @media @mediaBreak4 { // } } .peggy__form-main-container .peggy__form { // Alleen toplevel formelements > .pf-form-row:not(.pf-form-row--is-invisible) { &.pf-form-row--left > .pf-form-row--wrap { padding-left:var(--formPadding); } &.pf-form-row--right > .pf-form-row--wrap { padding-right:var(--formPadding); } &:not(.pf-form-row--top):has(.pf-form-row__section-label) > .pf-form-row--wrap { padding-top:var(--formPadding); } &:not(.pf-form-row--top):not(:has(.pf-form-row__section-label)) > .pf-form-row--wrap { padding-top:~"calc(var(--formPadding) / 2)"; } &.pf-form-row--top > .pf-form-row--wrap { padding-top:var(--formPadding); } // &.pf-form-row--top > .pf-form-row--wrap { padding-top:var(--formPadding); } &.pf-form-row--bottom:not(.pf-form-row--pagebreak) > .pf-form-row--wrap { padding-bottom:var(--formPadding); } &.pf-form-row--bottom.pf-form-row--pagebreak > .pf-form-row--wrap { padding-block:~"calc(var(--formPadding) / 4)"; } &:not(.pf-form-row--bottom) > .pf-form-row--wrap { padding-bottom:~"calc(var(--formPadding) / 2)"; } } // Subformelements .pf-form-row__sub-form .pf-form-row:not(.pf-form-row--is-invisible) { &:not(.pf-form-row--left) { padding-left:var(--fieldPadding); } &:not(.pf-form-row--right) { padding-right:var(--fieldPadding); } &:not(.pf-form-row--top) { padding-top:var(--fieldPadding); } &:not(.pf-form-row--bottom) { padding-bottom:~"calc(var(--formPadding) / 2)"; } } // .pf-form-row__sub-form .pf-form-row:not(.pf-form-row--is-invisible):not(.pf-form-row--top) > .pf-form-row--wrap { padding-top:var(--fieldPadding); } } @media @mediaMinBreak2 { .peggy-body__panel.peggy-body__form { display:flex; flex-direction:column; align-items:center; flex-grow:1; width:100%; } /* Form align */ .peggy-body__form { .peggy__form-container-wrap { display:flex; flex-direction:column; position:relative; // Voor bottompanel } } .peggy-body__form.peggy__form--page-thanks { justify-content:center; } } @media @mediaMinBreak2 { .peggy__form-main-container { padding:4rem 0; } } // Sidebar @media @mediaMinBreak2 { .a{} .peggy-side__bar { width:~"min(40%, 30rem)"; flex-grow:1; flex-shrink:0; // display:flex; // flex-direction:column; } } :where(.peggy__form-bottom-container, .peggy__form-content-container) .peggy__side-wrap { flex-wrap:wrap; display:flex; } @media @mediaBreak2 { .a{} :where(.peggy__form-bottom-container, .peggy__form-content-container) .peggy__side-wrap { // padding-inline:1rem; nee waarom? niet mooi met bg met arrows 25-6-25 // padding-top:2rem; idem.. niet mooi met website menu en eerste blok bg } } .peggy-side__bar-wrap, .peggy-body__form.peggy__form--main .peggy__form-container-wrap { position:sticky; top:2rem; // was 0 maar waarom? 15-02-25 // top:9rem; // dit is mooier bij website floating menu. Verplaatst naar hieronder bottom:0; width:100%; // 19-12-23 anders met alleen naw field klein form } .peggy-viewer-root-container:has(.peggy__menu:not(.peggy__menu--hide) .peggy__menu--style-default) .peggy-body__form.peggy__form--main .peggy__form-container-wrap { top:9rem; } .peggy-side__bar--payments-side .peggy__form--side { width:100%; } // .peggy-side__bar-wrap { // display:flex; // flex-direction:column; // justify-content:space-between; // position: sticky; // top:0; // // flex-grow:1; // } .peggy-body__embed-container--viewer { display:flex; flex-direction:column; align-items:center; &.peggy-body__embed-container--page-thanks { min-height:100vh; justify-content:center; } } @media @mediaMinBreak2 { .a{} .peggy__side-wrap { display:flex; justify-content:center; } .peggy-standalone .peggy-header__container, .pf-form-row__active-container, .peggy__side-wrap { width:var(--defaultFormWidth); margin-inline:auto; } // Maar content doen we anders .peggy__form-content-container { .peggy__side-wrap { width:100%; padding-inline:0; } .pf-form-row__hover-container { width:var(--defaultFormWidth); margin-inline:auto; } .pf-form-row__active-container { position:absolute; //z-index:500; inset:0; } .pf-form-row:not(.pf-form-row--is-inactive) .pf-form-row__active-container { top:calc(var(--content-block-padding-top) + var(--websiteFirstBlockPadding) - 1rem); bottom:calc(var(--content-block-padding-bottom) - 1rem); } } // Waarom is deze? Gebeurt toch in theme.php? 19-3-25 // .peggy__form-main-container:not(:has(.peggy-side__bar)) { // width:var(--defaultFormWidthNoSide); // margin-inline:auto; // } .peggy__form-container-wrap { max-width:var(--calculatedFormWidthNoSide); } .peggy-side__bar { // margin-left:~"clamp(2rem, 4vw, 4rem)"; margin-left:2rem; } } .peggy-footer__wrap { max-width:var(--calculatedFormWidth); padding:0 1rem; } :where( .peggy-standalone .peggy-header__container > .peggy__form, .peggy__side-wrap > .peggy__form, .peggy__form-main-container .peggy-body__panel ) { container-type:inline-size; container-name: formContainer; } // Powered // .pf-powered { // white-space:nowrap; // font-weight:400 !important; // img { display:none; } // a { // text-decoration:none; // font-weight:600; // font-size:1rem; // } // } .peggy-footer { position:relative; z-index:2; padding-top:1rem; padding-bottom:1rem; * { line-height:2rem; } } .peggy-footer__wrap { display:flex; justify-content:space-between; margin:auto; } // .peggy-footer .pf-powered { margin-left:2rem; } // @media @mediaMinBreak2 { // .peggy__form-footer-mobile { // display:none; // } // } // @media @mediaBreak2 { // .peggy__form-footer { // display: none; // } // } .mf-payment__voucher-wrap > * { background:fade(#ffffff, 100%); } @pageBackground:#fafafa;.peggy__menu .peggy__menu-logo-img--default { display:block; } .peggy__menu { --menuBackground:var(--pageBackground); --menuBorderColor:@borderColorGraySofter; } .peggy__menu :where(.peggy__menu-language__list, .peggy__menu-sub-wrap),.peggy__menu--small .peggy__menu-wrap { background:var(--menuBackground) !important; border-color:var(--menuBorderColor); filter:drop-shadow(@boxShadowCommonLessSafe); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"] > .pf-form-row__container > .pf-form-row__bg{ background: linear-gradient(0deg, var(--colorAlpha13) 20%, var(--colorAlpha14) 80%) } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__button { flex-wrap:nowrap; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__button .pf-content__button-container[data-button-no="1"] { @media @mediaMinBreak3 { width:calc(50% - .5rem); } .wm-btn { width:100%; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__button .pf-content__button-container[data-button-no="1"] .wm-btn { color:white; background:var(--colorAlpha); border:2px solid transparent; box-shadow:none; .wm-btn--font, &, .material-symbols-rounded { color:white; } &:hover { background:var(--colorDarkAlpha1); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__button .pf-content__button-container[data-button-no="2"] .wm-btn { color:@fontColorGray; background:transparent; border:2px solid @primaryColor; box-shadow:none; .wm-btn--font, &, .material-symbols-rounded { color:@fontColorGray; } &:hover { background:transparent; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"]:not(.pf-form-row--is-inactive) > .pf-form-row__container { --content-block-padding-bottom:calc(0rem + (var(--arrowHeight) / 2) ); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12316"] { --contentBackgroundPadding: 0rem; &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__bg { content:""; // position:absolute; z-index:0; top:0; bottom:-1px; // -1 nodig voor usp met achtergrond, weird.. 29-10-24 // Maar nee dat is echt niet mooi met 1 blok bijv page offline position:absolute; z-index:0; top:0; bottom:0; width:101dvw; left:50%;margin-left:-50.5dvw; } } } --arrowHeightPrevBlock:0rem;} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"] > .pf-form-row__container > .pf-form-row__bg { padding-block:var(--formPadding) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"] > .pf-form-row__container > .pf-form-row__bg{ background: linear-gradient(0deg, var(--colorAlpha11) 20%, var(--colorAlpha13) 80%) } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"]:not(.pf-form-row--is-inactive) > .pf-form-row__container { --content-block-padding-bottom:calc(~"clamp(6rem, 9vw, 7.5rem)" + (var(--arrowHeight) / 2) ); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12318"] { --contentBackgroundPadding: 0rem; &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__bg { content:""; // position:absolute; z-index:0; top:0; bottom:-1px; // -1 nodig voor usp met achtergrond, weird.. 29-10-24 // Maar nee dat is echt niet mooi met 1 blok bijv page offline position:absolute; z-index:0; top:0; bottom:0; width:101dvw; left:50%;margin-left:-50.5dvw; } } } .pf-form-row__container { mask: linear-gradient(#000 0 0) 0 calc(1px - var(--arrowHeight)) no-repeat, url('https://dev.peggypay.com/app/images/contentblock/arrows/arc-inv.svg') bottom/auto var(--arrowHeight) no-repeat ; mask-size: auto, ~"max(100vw, 40rem)" 82px; @media @mediaBreak2 { mask-size: auto, ~"max(150vw, 20rem)" 82px; } } --arrowHeightPrevBlock:0rem; z-index:499;} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__container { filter:drop-shadow(0 0 2rem fade(#111111, 10%)); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__container { filter:drop-shadow(0 0 2rem fade(#111111, 10%)); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column1"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorAlpha14); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column2"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorAlpha14); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column3"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorAlpha14); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"]:not(.pf-form-row--is-inactive) > .pf-form-row__container { --content-block-padding-top:~"clamp(6rem, 12vw, 9rem)"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12320"] { &:not(.pf-form-row--top) .pf-form-row--wrap { padding-top:~"calc(var(--formPadding) ) !important"; } &:not(.pf-form-row--bottom) .pf-form-row--wrap { padding-bottom:~"calc(var(--formPadding) )"; } &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__content-bg { content:""; position:absolute; z-index:0; top:0; bottom:0; left:0;right:0; } } } &:not(.pf-form-row--is-inactive) { --arrowHeightPrevBlock:var(--arrowHeight); @media @mediaBreak2 { --arrowHeightPrevBlock:calc(var(--arrowHeight) / 2); } margin-top:~"calc(var(--arrowHeight) * -1)" !important; }} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"] > .pf-form-row__container > .pf-form-row__bg { padding-block:var(--formPadding) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"] > .pf-form-row__container > .pf-form-row__bg { background-color:var(--colorPageBackground0); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__global-title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { color:--colorAlpha !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { background:var(--colorAlpha0); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { color:white; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__usp .pf-content__usp-item .list--text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__usp { // background .pf-content__usp-list.pf-content__usp-list--style-tiles:not(.pf-content__usp-list--icon-background-style-none) li:before { background:~"hsl( from var(--colorAlpha12) h s l / 80%)"; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__usp { .pf-content__usp .pf-content__usp-item.usp--has-text .list--header p { color:var(--colorAlpha) !important; } .pf-content__usp li:before { color:var(--colorAlpha) !important; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__button .pf-content__button-container[data-button-no="1"] .wm-btn { color:white; background:var(--colorAlpha); border:2px solid transparent; box-shadow:none; .wm-btn--font, &, .material-symbols-rounded { color:white; } &:hover { background:var(--colorDarkAlpha1); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__button .pf-content__button-container[data-button-no="2"] .wm-btn { color:@fontColorGray; background:white; border:2px solid transparent; box-shadow:none; * {text-shadow:none !important;} .wm-btn--font, &, .material-symbols-rounded { color:@fontColorGray; } &:hover { background:#eee; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"]:not(.pf-form-row--is-inactive) > .pf-form-row__container { --content-block-padding-bottom:calc(~"clamp(6rem, 12vw, 9rem)" + (var(--arrowHeight) / 2) ); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12319"] { --contentBackgroundPadding: 0rem; &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__bg { content:""; // position:absolute; z-index:0; top:0; bottom:-1px; // -1 nodig voor usp met achtergrond, weird.. 29-10-24 // Maar nee dat is echt niet mooi met 1 blok bijv page offline position:absolute; z-index:0; top:0; bottom:0; width:101dvw; left:50%;margin-left:-50.5dvw; } } } .pf-form-row__container { mask: linear-gradient(#000 0 0) 0 calc(1px - var(--arrowHeight)) no-repeat, url('https://dev.peggypay.com/app/images/contentblock/arrows/arc-inv.svg') bottom/auto var(--arrowHeight) no-repeat ; mask-size: auto, ~"max(100vw, 40rem)" 82px; @media @mediaBreak2 { mask-size: auto, ~"max(150vw, 20rem)" 82px; } } --arrowHeightPrevBlock:0rem; z-index:497;} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"] > .pf-form-row__container > .pf-form-row__bg{ background: linear-gradient(0deg, var(--colorAlpha14) 20%, var(--colorAlpha13) 80%) } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__global-title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { background:var(--colorAlpha0); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { color:white; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column1"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorAlpha0); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column2"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorAlpha0); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column3"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorAlpha0); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"]:not(.pf-form-row--is-inactive) > .pf-form-row__container { --content-block-padding-top:~"clamp(6rem, 12vw, 9rem)"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12321"] { --contentBackgroundPadding: 0rem; &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__bg { content:""; // position:absolute; z-index:0; top:0; bottom:-1px; // -1 nodig voor usp met achtergrond, weird.. 29-10-24 // Maar nee dat is echt niet mooi met 1 blok bijv page offline position:absolute; z-index:0; top:0; bottom:0; width:101dvw; left:50%;margin-left:-50.5dvw; } } } .pf-content__arrows { -webkit-mask: url('https://dev.peggypay.com/app/images/contentblock/arrows/arrows.svg') no-repeat center; } .pf-content__arrows { background-color: #f2faf5; } &:not(.pf-form-row--is-inactive) { --arrowHeightPrevBlock:var(--arrowHeight); @media @mediaBreak2 { --arrowHeightPrevBlock:calc(var(--arrowHeight) / 2); } margin-top:~"calc(var(--arrowHeight) * -1)" !important; } --textShadowColor: rgba(0, 0, 0, .3); --textShadowColorDropShadow: 0; --textShadow: 0 0 6px var(--textShadowColor);--textShadowDropShadow:drop-shadow(0 0 6px var(--textShadowColor)); .pf-content__column[data-column="column1"] { :where( .pf-form-row__form-label, .pf-form-row__label, .pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-form, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-product__title, .common-text, .peggy-switch__title, .common-text-color, .pf-content__common-color ) { // text-shadow:var(--textShadow); filter:var(--textShadowDropShadow); } } .pf-content__column[data-column="column1"] { --colorFont:var(--colorInvert); --colorFontAnchor:@paragraphAnchorInvertColor; } .pf-content__column[data-column="column1"] { :where(.pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-paragraph-wrapper-form):not(.pf-content--invert-false) > :where(h1,h2,h3,h4,h5,h6,span,p,strong,li):not([style]):not(.pf-content--invert-false), :where(.pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-paragraph-wrapper-form) :not(.pf-content--invert-false) > :where(h1,h2,h3,h4,h5,h6,span,p,strong,li):not([style]):not(.pf-content--invert-false), :where( .pf-form-row__form-label, .pf-form-row__label, .pf-form-row__label--label, .pf-paragraph, .peggy-switch__title, .text-divider-label, .pf-product__title, .mf-payment__page, .pf-form-row__label--sub-label, .mf-payment__issuers, .pf-content__button small span, .common-text-color, .pf-content__common-color, .pf-content__textblock-add-container ):not(.pf-content--invert-false) { color:var(--colorFont); // toch wel link voor veel. Zoals linkjes hehe. Even andere oplossing zoeken denk ik 23-7-25 *:not(.noinvert) { color:inherit !important; } // important nodig voor donker form 12-10-24. Stond uit, waarom? Moet idd aan 17-9-25 } .header-tag { --headerUnderlineColor:var(--headerUnderlineColorInvert); } .pf-content__usp-list--icon-background-style-none .pf-content__usp-item:before { color:var(--colorFont); } .pf-paragraph-wrapper-generic a { color:var(--colorFontAnchor); } .peggy-switch__wrap-wrap { box-shadow:0 0 0 2px var(--colorFont) !important; } } --textShadowColor: rgba(0, 0, 0, .3); --textShadowColorDropShadow: 0; --textShadow: 0 0 6px var(--textShadowColor);--textShadowDropShadow:drop-shadow(0 0 6px var(--textShadowColor)); .pf-content__column[data-column="column2"] { :where( .pf-form-row__form-label, .pf-form-row__label, .pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-form, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-product__title, .common-text, .peggy-switch__title, .common-text-color, .pf-content__common-color ) { // text-shadow:var(--textShadow); filter:var(--textShadowDropShadow); } } .pf-content__column[data-column="column2"] { --colorFont:var(--colorInvert); --colorFontAnchor:@paragraphAnchorInvertColor; } .pf-content__column[data-column="column2"] { :where(.pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-paragraph-wrapper-form):not(.pf-content--invert-false) > :where(h1,h2,h3,h4,h5,h6,span,p,strong,li):not([style]):not(.pf-content--invert-false), :where(.pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-paragraph-wrapper-form) :not(.pf-content--invert-false) > :where(h1,h2,h3,h4,h5,h6,span,p,strong,li):not([style]):not(.pf-content--invert-false), :where( .pf-form-row__form-label, .pf-form-row__label, .pf-form-row__label--label, .pf-paragraph, .peggy-switch__title, .text-divider-label, .pf-product__title, .mf-payment__page, .pf-form-row__label--sub-label, .mf-payment__issuers, .pf-content__button small span, .common-text-color, .pf-content__common-color, .pf-content__textblock-add-container ):not(.pf-content--invert-false) { color:var(--colorFont); // toch wel link voor veel. Zoals linkjes hehe. Even andere oplossing zoeken denk ik 23-7-25 *:not(.noinvert) { color:inherit !important; } // important nodig voor donker form 12-10-24. Stond uit, waarom? Moet idd aan 17-9-25 } .header-tag { --headerUnderlineColor:var(--headerUnderlineColorInvert); } .pf-content__usp-list--icon-background-style-none .pf-content__usp-item:before { color:var(--colorFont); } .pf-paragraph-wrapper-generic a { color:var(--colorFontAnchor); } .peggy-switch__wrap-wrap { box-shadow:0 0 0 2px var(--colorFont) !important; } } --textShadowColor: rgba(0, 0, 0, .3); --textShadowColorDropShadow: 0; --textShadow: 0 0 6px var(--textShadowColor);--textShadowDropShadow:drop-shadow(0 0 6px var(--textShadowColor)); .pf-content__column[data-column="column3"] { :where( .pf-form-row__form-label, .pf-form-row__label, .pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-form, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-product__title, .common-text, .peggy-switch__title, .common-text-color, .pf-content__common-color ) { // text-shadow:var(--textShadow); filter:var(--textShadowDropShadow); } } .pf-content__column[data-column="column3"] { --colorFont:var(--colorInvert); --colorFontAnchor:@paragraphAnchorInvertColor; } .pf-content__column[data-column="column3"] { :where(.pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-paragraph-wrapper-form):not(.pf-content--invert-false) > :where(h1,h2,h3,h4,h5,h6,span,p,strong,li):not([style]):not(.pf-content--invert-false), :where(.pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-paragraph-wrapper-form) :not(.pf-content--invert-false) > :where(h1,h2,h3,h4,h5,h6,span,p,strong,li):not([style]):not(.pf-content--invert-false), :where( .pf-form-row__form-label, .pf-form-row__label, .pf-form-row__label--label, .pf-paragraph, .peggy-switch__title, .text-divider-label, .pf-product__title, .mf-payment__page, .pf-form-row__label--sub-label, .mf-payment__issuers, .pf-content__button small span, .common-text-color, .pf-content__common-color, .pf-content__textblock-add-container ):not(.pf-content--invert-false) { color:var(--colorFont); // toch wel link voor veel. Zoals linkjes hehe. Even andere oplossing zoeken denk ik 23-7-25 *:not(.noinvert) { color:inherit !important; } // important nodig voor donker form 12-10-24. Stond uit, waarom? Moet idd aan 17-9-25 } .header-tag { --headerUnderlineColor:var(--headerUnderlineColorInvert); } .pf-content__usp-list--icon-background-style-none .pf-content__usp-item:before { color:var(--colorFont); } .pf-paragraph-wrapper-generic a { color:var(--colorFontAnchor); } .peggy-switch__wrap-wrap { box-shadow:0 0 0 2px var(--colorFont) !important; } }} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"] > .pf-form-row__container > .pf-form-row__bg { padding-block:var(--formPadding) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"] > .pf-form-row__container > .pf-form-row__bg{ background: linear-gradient(180deg, var(--colorAlpha14) 20%, var(--colorAlpha13) 80%) } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__global-title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_ffbdb606']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_ffbdb606']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_ffbdb606']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_ffbdb606']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_ffbdb606']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_4be87def']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_4be87def']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_4be87def']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_4be87def']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_4be87def']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_e5c2dc44']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_e5c2dc44']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_e5c2dc44']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_e5c2dc44']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_e5c2dc44']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_f22c2d83']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_f22c2d83']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_f22c2d83']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_f22c2d83']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_f22c2d83']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_7e19262d']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_7e19262d']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_7e19262d']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_7e19262d']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_7e19262d']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_6af35ea2']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_6af35ea2']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_6af35ea2']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_6af35ea2']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='content_6af35ea2']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidu3rlz2']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidu3rlz2']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidu3rlz2']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidu3rlz2']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidu3rlz2']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid1xzeux']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid1xzeux']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid1xzeux']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid1xzeux']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid1xzeux']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidhwg5de']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidhwg5de']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidhwg5de']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidhwg5de']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidhwg5de']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidd83tqu']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidd83tqu']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidd83tqu']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidd83tqu']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uidd83tqu']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid6w4cb3']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid6w4cb3']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid6w4cb3']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid6w4cb3']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid6w4cb3']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid4sn6ok']:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid4sn6ok']:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid4sn6ok']:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid4sn6ok']:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__mediablocks .pf-content__linkblocks-item[data-id='uid4sn6ok']:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"]:not(.pf-form-row--is-inactive) > .pf-form-row__container { --content-block-padding-bottom:calc(~"clamp(6rem, 12vw, 9rem)" + (var(--arrowHeight) / 2) ); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12326"] { --contentBackgroundPadding: 0rem; &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__bg { content:""; // position:absolute; z-index:0; top:0; bottom:-1px; // -1 nodig voor usp met achtergrond, weird.. 29-10-24 // Maar nee dat is echt niet mooi met 1 blok bijv page offline position:absolute; z-index:0; top:0; bottom:0; width:101dvw; left:50%;margin-left:-50.5dvw; } } } .pf-form-row__container { mask: linear-gradient(#000 0 0) 0 calc(1px - var(--arrowHeight)) no-repeat, url('https://dev.peggypay.com/app/images/contentblock/arrows/arc-inv.svg') bottom/auto var(--arrowHeight) no-repeat ; mask-size: auto, ~"max(100vw, 40rem)" 82px; @media @mediaBreak2 { mask-size: auto, ~"max(150vw, 20rem)" 82px; } } --arrowHeightPrevBlock:0rem; z-index:495;} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__container { filter:drop-shadow(0 0 2rem fade(#4bb477, 10%)); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__container { filter:drop-shadow(0 0 2rem fade(#4bb477, 10%)); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__global-title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { background:var(--colorAlpha0); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__global-title .pf-content__title-pre { color:white; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column1"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorWhite4); border:2px solid var(--colorAlpha0); backdrop-filter:none; .pf-content__media img { --borderWidth: 2px; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__usp .pf-content__usp-item .list--text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__usp { // background .pf-content__usp-list.pf-content__usp-list--style-tiles:not(.pf-content__usp-list--icon-background-style-none) li:before { background:~"hsl( from var(--colorAlpha12) h s l / 80%)"; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__usp { .pf-content__usp .pf-content__usp-item.usp--has-text .list--header p { color:var(--colorAlpha) !important; } .pf-content__usp li:before { color:var(--colorAlpha) !important; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column2"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorWhite4); border:2px solid var(--colorAlpha0); backdrop-filter:none; .pf-content__media img { --borderWidth: 2px; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__usp .pf-content__usp-item .list--text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__usp { // background .pf-content__usp-list.pf-content__usp-list--style-tiles:not(.pf-content__usp-list--icon-background-style-none) li:before { background:~"hsl( from var(--colorAlpha12) h s l / 80%)"; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__usp { .pf-content__usp .pf-content__usp-item.usp--has-text .list--header p { color:var(--colorAlpha) !important; } .pf-content__usp li:before { color:var(--colorAlpha) !important; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column3"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorWhite4); border:2px solid var(--colorAlpha0); backdrop-filter:none; .pf-content__media img { --borderWidth: 2px; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__button .pf-content__button-container[data-button-no="1"] .wm-btn { color:white; background:var(--colorAlpha); border:2px solid transparent; box-shadow:none; .wm-btn--font, &, .material-symbols-rounded { color:white; } &:hover { background:var(--colorDarkAlpha1); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__button .pf-content__button-container[data-button-no="2"] .wm-btn { color:white; background:var(--colorAlpha); border:2px solid transparent; box-shadow:none; .wm-btn--font, &, .material-symbols-rounded { color:white; } &:hover { background:var(--colorDarkAlpha1); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__media:not(.pf-content__mediablocks-block) { --fixMarginTop:0px; --fixMarginBottom:0px; &:first-child { --fixMarginTop: var(--contentColumnPadding); } &:last-child { --fixMarginBottom: var(--contentColumnPadding); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__media:not(.pf-content__mediablocks-block) .pf-content__media-main-wrap { margin-top:~"calc(-1 * var(--fixMarginTop))"; margin-bottom:~"calc(-1 * var(--fixMarginBottom))"; height:~"calc(100% + var(--fixMarginTop) + var(--fixMarginBottom))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__media:not(.pf-content__mediablocks-block) { --fixMarginLeft:0px; --fixMarginRight:0px; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__media:not(.pf-content__mediablocks-block) { --fixMarginLeft: var(--contentColumnPadding); --fixMarginRight: var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__media:not(.pf-content__mediablocks-block) { margin-left:~"calc(-1 * var(--fixMarginLeft))"; margin-right:~"calc(-1 * var(--fixMarginRight))"; width:~"calc(100% + var(--fixMarginLeft) + var(--fixMarginRight))"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] .pf-content__media { &.pf-content__media--videoUrl:not(:first-child) .pf-content__media-main-wrap, &.pf-content__media--imageUpload:not(:first-child) img { border-top-left-radius:0; border-top-right-radius:0; } &.pf-content__media--videoUrl:not(:last-child) .pf-content__media-main-wrap, &.pf-content__media--imageUpload:not(:last-child) img { border-bottom-left-radius:0; border-bottom-right-radius:0; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"]:not(.pf-form-row--is-inactive) > .pf-form-row__container { --content-block-padding-top:~"clamp(6rem, 12vw, 9rem)"; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12325"] { &:not(.pf-form-row--top) .pf-form-row--wrap { padding-top:~"calc(var(--formPadding) ) !important"; } &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__content-bg { content:""; position:absolute; z-index:0; top:0; bottom:0; left:0;right:0; } } } &:not(.pf-form-row--is-inactive) { --arrowHeightPrevBlock:var(--arrowHeight); @media @mediaBreak2 { --arrowHeightPrevBlock:calc(var(--arrowHeight) / 2); } margin-top:~"calc(var(--arrowHeight) * -1)" !important; }} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-pre { color:--colorAlpha !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12327"] { &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__content-bg { content:""; position:absolute; z-index:0; top:0; bottom:0; left:0;right:0; } } } --arrowHeightPrevBlock:0rem;} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:0rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--inverted { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12328"] { &:not(.pf-form-row--bottom) .pf-form-row--wrap { padding-bottom:~"calc(var(--formPadding) )"; } &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__content-bg { content:""; position:absolute; z-index:0; top:0; bottom:0; left:0;right:0; } } } --arrowHeightPrevBlock:0rem;} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"] > .pf-form-row__container > .pf-form-row__bg { padding-block:var(--formPadding) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"] > .pf-form-row__container > .pf-form-row__bg{ background: linear-gradient(0deg, var(--colorAlpha0) 50%, var(--colorAlpha14) 50%) } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column { border-radius:.8rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__container { filter:drop-shadow(0 0 2rem fade(#111111, 10%)); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__container { filter:drop-shadow(0 0 2rem fade(#111111, 10%)); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column1"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorWhite4); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__global-title :where(h1,h2):not(.pf-content--invert-false) { color:var(--colorInvert); --headerUnderlineColor:var(--headerUnderlineColorInvert); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--default { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-icon { font-size:clamp(7rem * 0.7, 12vw, 7rem); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__title .pf-content__title-pre { color:var(--colorAlpha) !important; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column1"] .pf-content__text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column2"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorWhite4); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__global-title :where(h1,h2):not(.pf-content--invert-false) { color:var(--colorInvert); --headerUnderlineColor:var(--headerUnderlineColorInvert); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--default { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__usp .pf-content__usp-item .list--text p { text-wrap: balance; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__usp { // background .pf-content__usp-list.pf-content__usp-list--style-tiles:not(.pf-content__usp-list--icon-background-style-none) li:before { background:~"hsl( from var(--colorAlpha12) h s l / 80%)"; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column2"] .pf-content__usp { .pf-content__usp .pf-content__usp-item.usp--has-text .list--header p { color:var(--colorAlpha) !important; } .pf-content__usp li:before { color:var(--colorAlpha) !important; } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-column="column3"]:not(.pf-content__column--no-bg):not(.pf-content__column--empty) { background-color: var(--colorWhite4); backdrop-filter:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] :where(.pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small) { text-shadow:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__column[data-base-column="column3"] { --contentColumnPadding:2rem; padding:var(--contentColumnPadding); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__global-title :where(h1,h2):not(.pf-content--invert-false) { color:var(--colorInvert); --headerUnderlineColor:var(--headerUnderlineColorInvert); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__logo-img--default { display:none; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) .pf-content__logo { display:flex; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"]:not(.pf-form-row--is-inactive) > .pf-form-row__container { --content-block-padding-bottom:calc(~"clamp(6rem, 12vw, 12rem)" + (var(--arrowHeight) / 2) ); } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12324"] { --contentBackgroundPadding: 0rem; &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__bg { content:""; // position:absolute; z-index:0; top:0; bottom:-1px; // -1 nodig voor usp met achtergrond, weird.. 29-10-24 // Maar nee dat is echt niet mooi met 1 blok bijv page offline position:absolute; z-index:0; top:0; bottom:0; width:101dvw; left:50%;margin-left:-50.5dvw; } } } --arrowHeightPrevBlock:0rem; --textShadowColor: rgba(255, 255, 255, .3); --textShadowColorDropShadow: 255; --textShadow: 0 0 6px var(--textShadowColor);--textShadowDropShadow:drop-shadow(0 0 6px var(--textShadowColor)); .pf-content__column[data-column="column1"] { :where( .pf-form-row__form-label, .pf-form-row__label, .pf-paragraph, .pf-paragraph-wrapper, .pf-paragraph-wrapper-form, .pf-paragraph-wrapper-large, .pf-paragraph-wrapper-small, .pf-paragraph-wrapper-generic, .pf-product__title, .common-text, .peggy-switch__title, .common-text-color, .pf-content__common-color ) { // text-shadow:var(--textShadow); filter:var(--textShadowDropShadow); } } .pf-content__global-title .pf-paragraph-wrapper { text-shadow:var(--textShadow); } .pf-content__global-title .header-tag, .pf-content__global-title .pf-content__title-pre:not(.pf-content__title-pre--background) { filter:var(--textShadowDropShadow); } } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12313"] { &, > .pf-form-row--wrap { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; } > .pf-form-row--wrap { padding-top: var(--formPadding) !important; } &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__content-bg { content:""; position:absolute; z-index:0; top:0; bottom:0; left:0;right:0; } } } --arrowHeightPrevBlock:0rem;} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12314"] { &, > .pf-form-row--wrap { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; } &, > .pf-form-row--wrap, .pf-form-row__section-label { border-top-left-radius:0; border-top-right-radius:0; } border-top:none; &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__content-bg { content:""; position:absolute; z-index:0; top:0; bottom:0; left:0;right:0; } } } --arrowHeightPrevBlock:0rem;} .peggy__form--theme .peggy__form > .pf-form-row[data-id="12315"]:not(.pf-form-row--is-inactive) .pf-form-row--wrap { margin-top:1rem; } .peggy__form--theme .peggy__form > .pf-form-row[data-id="12315"] { > .pf-form-row--wrap { padding-bottom: var(--formPadding) !important; } &, > .pf-form-row--wrap, .pf-form-row__section-label { border-top-left-radius:0; border-top-right-radius:0; } border-top:none; &:not(.pf-form-row--is-invisible) { position:relative; > .pf-form-row__container { .pf-form-row__content-bg { content:""; position:absolute; z-index:0; top:0; bottom:0; left:0;right:0; } } } --arrowHeightPrevBlock:0rem;}ParseError: Unexpected input in anonymous-file-46.less on line 36, column 97 34| } 35| 36| Warning: Attempt to read property "isInvertColors" on null in /home/dev/domains/dev.peggypay.com/deploys/current/www/app/style/dynamic/parts/content.php on line 675 37| // Copy AMP 38| .bgImage(@base, @ext) { 39| @media (max-width: 768px) {