/* Gregor Bikes · bookly-skin.css · gebouwd 2026-10-27 23:48 · alleen op /afspraak/* · niet met de hand bewerken */ /* ========================================================================== Gregor Bikes · bookly-skin.css · afspraak-onderdeel Restyling van het Bookly-boekingsformulier binnen .gb (agenda-marker .gb-bookly op /afspraak/bike-fit/, /showroom/ en /bikesizing/). Los bestand: build.py schrijft dist/wp/bookly-skin.css, snippet gb-core laadt het alleen op /afspraak/*. Werkt samen met bookly-skin.js (stappenbalk-nummers, laadstatus, stap Dienst overslaan). Waarom zo zwaar: Bookly zet zijn "hoofdkleur" met !important op (0,2,0)-selectors (.bookly-form .bookly-btn …). Alles hier staat op minimaal (0,3,0) en gebruikt !important waar Bookly dat ook doet (kleur, rand, achtergrond, lettertype). Nooit !important op display: Bookly verbergt knoppen en tijdschermen met inline display:none. Bookly-DOM (klassieke boekingsvorm; eerst in de live DOM controleren): .bookly-form · .bookly-progress-tracker > div(.active) > .step · .bookly-box · .bookly-time-step (.bookly-slot-calendar met pickadate .picker__*) · .bookly-columnizer-wrap > .bookly-columnizer (> .bookly-time-screen) > .bookly-column > button.bookly-day + button.bookly-hour · .bookly-details-step .bookly-form-group > label + div > input · .bookly-nav-steps > .bookly-btn (.bookly-js-next-step, .bookly-js-back-step, .bookly-time-next, .bookly-time-prev). Eén oranje moment: alleen de knop Volgende is oranje. Inhoud: 0 marker en status · 1 basis · 2 stappenbalk · 3 tijdstap (kalender, tijden) · 4 velden · 5 keuzes · 6 knoppen · 7 overige stappen · 8 mobiel ========================================================================== */ /* 0 · MARKER, STATUS, VOORBEELD -------------------------------------------- */ .gb .gb-bookly { position: relative; } .gb .gb-bookly__status { display: none; margin: 0; } .gb .gb-bookly[data-gb-loading] .gb-bookly__status { display: flex; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; padding: 2rem; text-align: center; font-family: var(--gb-mono); font-size: var(--gb-fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gb-fg-3); } .gb .gb-bookly[data-gb-loading] .bookly-form { visibility: hidden; } .gb .gb-bookly[data-gb-step="fout"] .gb-bookly__status { display: block; font-size: var(--gb-fs-small); color: var(--gb-fg-2); } .gb .gb-bookly[data-gb-step="fout"] .gb-bookly__status a { color: var(--gb-fg); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; } .gb .gb-bookly__mocklabel { margin-bottom: 1.5rem; padding-bottom: .875rem; border-bottom: 1px dashed var(--gb-rule-strong); } /* 1 · BASIS ---------------------------------------------------------------- */ .gb .bookly-form { max-width: none; margin: 0; padding: 0; background: none; font-family: var(--gb-sans) !important; font-size: var(--gb-fs-small); line-height: 1.55; color: var(--gb-fg); } .gb .bookly-form *, .gb .bookly-form *::before, .gb .bookly-form *::after { box-sizing: border-box; } .gb .bookly-form .bookly-box { float: none; margin: 0 0 1.25rem; padding: 0; } .gb .bookly-form .bookly-box:empty { display: none; } .gb .bookly-form .bookly-bold { font-weight: 600; } .gb .bookly-form .bookly-progress-tracker + .bookly-box { max-width: 60ch; color: var(--gb-fg-2); font-size: var(--gb-fs-small); } .gb .bookly-form img[src*="loader"] { display: block; margin: 3rem auto; opacity: .5; } /* 2 · STAPPENBALK (bookly-skin.js zet data-gb-n en data-gb-state; zonder JS valt .active terug) ---------- */ .gb .bookly-form .bookly-progress-tracker { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .375rem; width: 100%; margin: 0 0 2rem; padding: 0; border: 0; table-layout: auto; } .gb .bookly-form .bookly-progress-tracker > div { display: block; width: auto; min-width: 0; margin: 0; padding: .75rem 0 0 !important; border-top: 2px solid var(--gb-rule); background: none !important; font-family: var(--gb-mono) !important; font-size: .6875rem !important; font-weight: 600 !important; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; text-align: left; color: var(--gb-fg-3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s, border-color .3s; } .gb .bookly-form .bookly-progress-tracker > div[data-gb-n]::before { content: attr(data-gb-n); margin-right: .625rem; font-weight: 400; opacity: .75; } .gb .bookly-form .bookly-progress-tracker > div .step { display: none !important; } .gb .bookly-form .bookly-progress-tracker > .gb-bookly__skip { display: none !important; } .gb .bookly-form .bookly-progress-tracker > .active { color: var(--gb-fg) !important; border-top-color: var(--gb-fg); } .gb .bookly-form .bookly-progress-tracker > [data-gb-state="done"] { color: var(--gb-fg-2) !important; border-top-color: var(--gb-fg-3); } .gb .bookly-form .bookly-progress-tracker > [data-gb-state="current"] { color: var(--gb-fg) !important; border-top-color: var(--gb-fg); } /* 3 · TIJDSTAP ------------------------------------------------------------- */ .gb .bookly-form .bookly-time-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin: 0; } @media (min-width: 768px) { .gb .bookly-form .bookly-time-step:has(.bookly-slot-calendar) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } } /* 3a · kalender (pickadate, altijd open) */ .gb .bookly-form .bookly-slot-calendar { position: relative; float: none !important; width: auto !important; margin: 0 !important; padding: 0; } .gb .bookly-form .bookly-slot-calendar > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .gb .bookly-form .bookly-slot-calendar .picker, .gb .bookly-form .bookly-slot-calendar .picker__holder, .gb .bookly-form .bookly-slot-calendar .picker__frame, .gb .bookly-form .bookly-slot-calendar .picker__wrap { position: static !important; display: block; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; top: auto !important; bottom: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; overflow: visible !important; } .gb .bookly-form .picker__box { padding: clamp(.875rem, .6rem + 1vw, 1.25rem) !important; margin: 0 !important; background: var(--gb-surface) !important; border: 1px solid var(--gb-rule) !important; border-radius: var(--gb-radius-btn) !important; box-shadow: none !important; } .gb .bookly-form .picker__header { position: relative !important; display: flex; align-items: center; justify-content: center; gap: .375rem; min-height: 36px; margin: 0 0 .75rem !important; padding: 0 3rem !important; text-align: center; background: none !important; border: 0 !important; color: var(--gb-fg) !important; } .gb .bookly-form .picker__month, .gb .bookly-form .picker__year { margin: 0 !important; font-family: var(--gb-sans) !important; font-size: 1rem !important; font-style: normal !important; font-weight: 600 !important; color: var(--gb-fg) !important; text-transform: capitalize; } .gb .bookly-form .picker__year { font-weight: 400 !important; color: var(--gb-fg-2) !important; } .gb .bookly-form .picker__nav--prev, .gb .bookly-form .picker__nav--next { position: absolute !important; top: 0 !important; display: grid; place-items: center; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--gb-rule-strong) !important; border-radius: var(--gb-radius-btn) !important; background: transparent !important; color: var(--gb-fg) !important; cursor: pointer; transition: border-color .2s; } .gb .bookly-form .picker__nav--prev { left: 0 !important; right: auto !important; } .gb .bookly-form .picker__nav--next { right: 0 !important; left: auto !important; } .gb .bookly-form .picker__nav--prev::before, .gb .bookly-form .picker__nav--next::before { content: "" !important; position: static !important; display: block !important; width: 16px !important; height: 16px !important; margin: 0 !important; border: 0 !important; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .gb .bookly-form .picker__nav--prev::before { transform: scaleX(-1) !important; } .gb .bookly-form .picker__nav--prev:hover, .gb .bookly-form .picker__nav--next:hover { border-color: var(--gb-fg) !important; background: transparent !important; } .gb .bookly-form .picker__nav--disabled, .gb .bookly-form .picker__nav--disabled:hover { opacity: .3; cursor: default; pointer-events: none; } .gb .bookly-form .picker__table { width: 100% !important; margin: 0 !important; table-layout: fixed; border-collapse: separate !important; border-spacing: 4px !important; font-size: inherit !important; } .gb .bookly-form .picker__table th, .gb .bookly-form .picker__table td { padding: 0 !important; margin: 0; border: 0 !important; background: none !important; text-align: center; vertical-align: middle; } .gb .bookly-form .picker__weekday { width: auto !important; padding: .375rem 0 !important; font-family: var(--gb-mono) !important; font-size: .65625rem !important; font-weight: 400 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--gb-fg-3) !important; } .gb .bookly-form .picker__day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 2.25rem; margin: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: var(--gb-radius-btn) !important; background: var(--gb-paper) !important; color: var(--gb-fg) !important; font-family: var(--gb-sans) !important; font-size: .90625rem !important; font-weight: 500 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s, background-color .15s; } .gb .bookly-form .picker__day:hover, .gb .bookly-form .picker__day--highlighted:hover { border-color: var(--gb-fg) !important; background: var(--gb-paper) !important; color: var(--gb-fg) !important; } .gb .bookly-form .picker__day--today { box-shadow: inset 0 -2px 0 var(--gb-fg-3) !important; } .gb .bookly-form .picker__day--today::before { display: none !important; } .gb .bookly-form .picker__day--disabled, .gb .bookly-form .picker__day--disabled:hover { background: transparent !important; border-color: transparent !important; color: var(--gb-fg-3) !important; cursor: default; text-decoration: line-through; text-decoration-color: var(--gb-rule-strong); } .gb .bookly-form .picker__day--selected, .gb .bookly-form .picker__day--selected:hover, .gb .bookly-form .picker__day--selected.picker__day--highlighted { background: var(--gb-carbon) !important; border-color: var(--gb-carbon) !important; color: #FFFFFF !important; text-decoration: none; } .gb .bookly-form .picker__day--outfocus { visibility: hidden; } .gb .bookly-form .picker__table tbody tr:not(:has(.picker__day--infocus)) { display: none; } .gb .bookly-form .picker__footer { display: none !important; } /* 3b · tijden: elke dag een kolom; naast de kalender een 2-koloms raster zoals in het ontwerp */ .gb .bookly-form .bookly-columnizer-wrap { position: relative; min-width: 0; margin: 0; height: auto !important; overflow: visible !important; } .gb .bookly-form .bookly-columnizer, .gb .bookly-form .bookly-time-screen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem .75rem; width: auto !important; height: auto !important; margin: 0 !important; } .gb .bookly-form .bookly-time-screen { flex: 1 1 100%; } .gb .bookly-form .bookly-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; align-content: start; flex: 1 1 6rem; min-width: 0; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } .gb .bookly-form .bookly-time-step:has(.bookly-slot-calendar) .bookly-column { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); } .gb .bookly-form .bookly-column .bookly-day { grid-column: 1 / -1; width: 100% !important; height: auto !important; min-height: 0; margin: 0 !important; padding: .125rem 0 .375rem !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-family: var(--gb-mono) !important; font-size: .71875rem !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: .12em; text-transform: uppercase; text-align: left; color: var(--gb-fg-2) !important; cursor: default; } .gb .bookly-form .bookly-column .bookly-hour { width: 100% !important; height: 52px !important; min-height: 52px; margin: 0 !important; padding: 0 .75rem !important; border: 1px solid var(--gb-rule-strong) !important; border-radius: var(--gb-radius-btn) !important; background: var(--gb-surface) !important; box-shadow: none !important; font-family: var(--gb-mono) !important; font-size: .9375rem !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .02em; text-transform: none !important; text-align: center; color: var(--gb-fg) !important; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } .gb .bookly-form .bookly-column .bookly-hour:hover, .gb .bookly-form .bookly-column .bookly-hour:focus-visible { border-color: var(--gb-fg) !important; background: var(--gb-surface) !important; color: var(--gb-fg) !important; } .gb .bookly-form .bookly-column .bookly-hour:active, .gb .bookly-form .bookly-column .bookly-hour[data-loading] { border-color: var(--gb-carbon) !important; background: var(--gb-carbon) !important; color: #FFFFFF !important; } .gb .bookly-form .bookly-column .bookly-hour:disabled, .gb .bookly-form .bookly-column .bookly-hour.booked { border-style: dashed !important; border-color: var(--gb-rule-strong) !important; background: transparent !important; color: var(--gb-fg-3) !important; text-decoration: line-through; cursor: not-allowed; } .gb .bookly-form .bookly-hour .ladda-label, .gb .bookly-form .bookly-hour .bookly-time-main { display: inline-flex; align-items: center; gap: .5rem; color: inherit !important; font: inherit !important; } .gb .bookly-form .bookly-hour .bookly-hour-icon { display: none !important; } .gb .bookly-form .bookly-hour .bookly-time-additional { font-family: var(--gb-sans); font-size: var(--gb-fs-xs); color: inherit; opacity: .7; } /* 4 · VELDEN (stap Gegevens; ook de dienststap als die zichtbaar wordt) ---- */ .gb .bookly-form .bookly-details-step .bookly-table, .gb .bookly-form .bookly-js-chain-item.bookly-table { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; width: 100%; margin-bottom: 1.25rem; } @media (min-width: 600px) { .gb .bookly-form .bookly-details-step .bookly-table, .gb .bookly-form .bookly-js-chain-item.bookly-table { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } } .gb .bookly-form .bookly-form-group { display: block; float: none; width: auto; margin: 0 0 1.25rem; padding: 0; } .gb .bookly-form .bookly-table > .bookly-form-group { margin: 0; } .gb .bookly-form .bookly-form-group > label, .gb .bookly-form .bookly-form-group > span.bookly-bold { display: block; margin: 0 0 .5rem; padding: 0; font-family: var(--gb-mono) !important; font-size: var(--gb-fs-mono) !important; font-weight: 600 !important; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--gb-fg-2) !important; } .gb .bookly-form input[type="text"], .gb .bookly-form input[type="email"], .gb .bookly-form input[type="tel"], .gb .bookly-form input[type="number"], .gb .bookly-form input[type="password"], .gb .bookly-form input[type="date"], .gb .bookly-form select, .gb .bookly-form textarea { width: 100%; max-width: none; min-height: 52px; height: auto; margin: 0; padding: .8125rem 1rem; font-family: var(--gb-sans) !important; font-size: 1rem !important; line-height: 1.4; color: var(--gb-fg) !important; background-color: #FFFFFF !important; border: 1px solid var(--gb-rule-strong) !important; border-radius: var(--gb-radius-btn) !important; box-shadow: none !important; outline: 0; transition: border-color .2s, box-shadow .2s; } .gb .bookly-form textarea { min-height: 140px; resize: vertical; } .gb .bookly-form select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.25rem) 52%, calc(100% - .9rem) 52%; background-size: .375rem .375rem; background-repeat: no-repeat; } .gb .bookly-form input::placeholder, .gb .bookly-form textarea::placeholder { color: var(--gb-fg-3); opacity: 1; } .gb .bookly-form input:hover, .gb .bookly-form select:hover, .gb .bookly-form textarea:hover { border-color: var(--gb-fg-3) !important; } .gb .bookly-form input:focus, .gb .bookly-form select:focus, .gb .bookly-form textarea:focus { border-color: var(--gb-fg) !important; box-shadow: 0 0 0 1px var(--gb-fg) !important; } .gb .bookly-form .bookly-error, .gb .bookly-form input.bookly-error, .gb .bookly-form textarea.bookly-error { border-color: #B3261E !important; } .gb .bookly-form .bookly-label-error { margin-top: .375rem; font-family: var(--gb-sans) !important; font-size: var(--gb-fs-xs) !important; font-weight: 400 !important; color: #B3261E !important; } /* telefoon (intl-tel-input): ruimte voor de vlag */ .gb .bookly-form .iti, .gb .bookly-form .intl-tel-input { display: block; width: 100%; } .gb .bookly-form .iti input, .gb .bookly-form .intl-tel-input input { padding-left: 3.25rem; } .gb .bookly-form .iti__country-list, .gb .bookly-form .intl-tel-input .country-list { z-index: 20; max-width: min(22rem, 90vw); font-size: var(--gb-fs-small); color: var(--gb-charcoal); background: #FFFFFF; border: 1px solid var(--gb-rule-strong); border-radius: var(--gb-radius-btn); box-shadow: var(--gb-shadow); } /* 5 · KEUZES: keuzerondjes en vinkjes als chips (eigen velden), voorwaarden en nieuwsbrief als vinkje ---- */ .gb .bookly-form input[type="checkbox"], .gb .bookly-form input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gb-carbon); } .gb .bookly-form .bookly-form-group label:has(> input[type="checkbox"]), .gb .bookly-form .bookly-form-group label:has(> input[type="radio"]) { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 .5rem; font-family: var(--gb-sans) !important; font-size: var(--gb-fs-small) !important; font-weight: 400 !important; letter-spacing: 0; text-transform: none; color: var(--gb-fg-2) !important; cursor: pointer; } .gb .bookly-form .bookly-custom-field-row[data-type="radio-buttons"] .bookly-form-group > div, .gb .bookly-form .bookly-custom-field-row[data-type="checkboxes"] .bookly-form-group > div { display: flex; flex-wrap: wrap; gap: .5rem; } .gb .bookly-form .bookly-custom-field-row[data-type="radio-buttons"] label:has(> input), .gb .bookly-form .bookly-custom-field-row[data-type="checkboxes"] label:has(> input) { align-items: center; min-height: 44px; margin: 0; padding: .5rem 1rem; border: 1px solid var(--gb-rule-strong); border-radius: var(--gb-radius-btn); background: #FFFFFF; font-weight: 500 !important; color: var(--gb-fg) !important; transition: background-color .2s, color .2s, border-color .2s; } .gb .bookly-form .bookly-custom-field-row[data-type="radio-buttons"] label:has(> input:checked), .gb .bookly-form .bookly-custom-field-row[data-type="checkboxes"] label:has(> input:checked) { background: var(--gb-fg); border-color: var(--gb-fg); color: var(--gb-bg) !important; } .gb .bookly-form .bookly-custom-field-row label:has(> input:checked) > input { accent-color: var(--gb-white); } /* 6 · KNOPPEN -------------------------------------------------------------- */ .gb .bookly-form .bookly-nav-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; margin: 2rem 0 0 !important; padding: 1.5rem 0 0 !important; border-top: 1px solid var(--gb-rule); overflow: visible; } .gb .bookly-form .bookly-nav-steps > * { float: none !important; margin: 0 !important; } .gb .bookly-form .bookly-btn { position: relative; vertical-align: middle; width: auto; height: auto !important; min-height: 52px; margin: 0; padding: 1rem 1.5rem !important; border: 1px solid var(--gb-rule-strong) !important; border-radius: var(--gb-radius-btn) !important; background: transparent !important; box-shadow: none !important; font-family: var(--gb-sans) !important; font-size: .96875rem !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .005em !important; text-align: center; text-transform: none !important; text-shadow: none !important; color: var(--gb-fg) !important; cursor: pointer; transition: background-color .2s var(--gb-ease), color .2s var(--gb-ease), border-color .2s var(--gb-ease); } .gb .bookly-form .bookly-btn:hover, .gb .bookly-form .bookly-btn:focus-visible { border-color: var(--gb-fg) !important; background: var(--gb-tint) !important; color: var(--gb-fg) !important; } .gb .bookly-form .bookly-btn .ladda-label { display: inline-flex; align-items: center; gap: .75rem; color: inherit !important; font: inherit !important; } /* primair: Volgende en Boek (het enige oranje in de agenda) */ .gb .bookly-form .bookly-next-step, .gb .bookly-form .bookly-js-next-step, .gb .bookly-form .bookly-mobile-next-step { margin-left: auto !important; border-color: var(--gb-orange) !important; background: var(--gb-orange) !important; color: var(--gb-carbon) !important; } .gb .bookly-form .bookly-next-step:hover, .gb .bookly-form .bookly-js-next-step:hover, .gb .bookly-form .bookly-mobile-next-step:hover, .gb .bookly-form .bookly-js-next-step:focus-visible { border-color: var(--gb-orange-hover) !important; background: var(--gb-orange-hover) !important; color: var(--gb-carbon) !important; } .gb .bookly-form .bookly-js-next-step .ladda-label::after, .gb .bookly-form .bookly-mobile-next-step .ladda-label::after { content: ""; flex: none; width: 1.0625rem; height: 1.0625rem; background: currentColor; transition: transform .25s var(--gb-ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .gb .bookly-form .bookly-js-next-step:hover .ladda-label::after { transform: translateX(3px); } /* terug: links, als tekstknop */ .gb .bookly-form .bookly-back-step, .gb .bookly-form .bookly-js-back-step, .gb .bookly-form .bookly-mobile-prev-step { order: -1; margin-right: auto !important; padding-inline: .875rem !important; border-color: transparent !important; } .gb .bookly-form .bookly-js-back-step .ladda-label::before { content: ""; flex: none; width: 1.0625rem; height: 1.0625rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; } /* dagen vooruit en terug (tijdstap): kleine vierkante knoppen met een chevron */ .gb .bookly-form .bookly-time-next, .gb .bookly-form .bookly-time-prev { width: 44px; min-height: 44px; height: 44px !important; padding: 0 !important; } .gb .bookly-form .bookly-time-prev { order: 1; } .gb .bookly-form .bookly-time-next { order: 2; } .gb .bookly-form .bookly-time-next .ladda-label, .gb .bookly-form .bookly-time-prev .ladda-label { font-size: 0 !important; } .gb .bookly-form .bookly-time-next .ladda-label::before, .gb .bookly-form .bookly-time-prev .ladda-label::before { content: ""; display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .gb .bookly-form .bookly-time-prev .ladda-label::before { transform: scaleX(-1); } /* staat de dienst vast (stap Dienst wordt overgeslagen), dan heeft Terug op de tijdstap geen doel */ .gb .gb-bookly[data-gb-skip-service][data-gb-step="time"]:not([data-gb-skip-failed]) .bookly-back-step, .gb .gb-bookly[data-gb-skip-service][data-gb-step="time"]:not([data-gb-skip-failed]) .bookly-js-back-step { display: none; } .gb .bookly-form .bookly-btn[disabled], .gb .bookly-form .bookly-btn:disabled { opacity: .45; cursor: not-allowed; } /* 7 · OVERIGE STAPPEN ------------------------------------------------------ */ .gb .bookly-form .bookly-details-step, .gb .bookly-form .bookly-payment-step, .gb .bookly-form .bookly-complete-step { margin: 0; } .gb .bookly-form .bookly-payment-step .bookly-box label, .gb .bookly-form .bookly-complete-step .bookly-box { font-size: var(--gb-fs-small); color: var(--gb-fg-2); } .gb .bookly-form .bookly-week-days label { font-family: var(--gb-mono) !important; color: var(--gb-fg-2) !important; } .gb .bookly-form .bookly-week-days input { accent-color: var(--gb-carbon); } /* 8 · MOBIEL --------------------------------------------------------------- */ @media (max-width: 599px) { .gb .bookly-form .bookly-progress-tracker { margin-bottom: 1.5rem; } .gb .bookly-form .bookly-progress-tracker > div[data-gb-n]::before { margin-right: .375rem; } .gb .bookly-form .bookly-nav-steps { gap: .5rem; } .gb .bookly-form .bookly-next-step, .gb .bookly-form .bookly-js-next-step, .gb .bookly-form .bookly-mobile-next-step { flex: 1 1 100%; margin-left: 0 !important; } /* Bookly 2x zet Volgende soms in een wrapper
: dan krijgt de wrapper de volle breedte */ .gb .bookly-form .bookly-nav-steps > div.bookly-right:has(.bookly-js-next-step) { flex: 1 1 100%; } .gb .bookly-form .bookly-nav-steps > div.bookly-right:has(.bookly-next-step) { flex: 1 1 100%; } .gb .bookly-form .bookly-nav-steps > div.bookly-right .bookly-btn { width: 100%; } .gb .bookly-form .bookly-back-step, .gb .bookly-form .bookly-js-back-step { order: 3; } .gb .bookly-form .picker__table { border-spacing: 3px !important; } }