/** * WP WOO Toolkit — Variantswatches. * * Maten en kleuren komen uit variabelen die de module in de zet. */ .wwt-swatches-wrap { margin: 0 0 6px; } .wwt-swatches { display: flex; flex-wrap: wrap; gap: var(--wwt-swatch-gap, 8px); align-items: flex-start; margin: 4px 0 2px; } /* De oorspronkelijke keuzelijst blijft in het formulier staan — WooCommerce werkt ermee — maar hij is niet zichtbaar en niet aan te wijzen. */ .wwt-swatches-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wwt-swatch { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Fototegel met de naam er in witte letters overheen. */ .wwt-swatch__box { position: relative; display: flex; align-items: flex-end; justify-content: center; width: var(--wwt-swatch-size, 48px); height: var(--wwt-swatch-size, 48px); border-radius: var(--wwt-swatch-radius, 50%); border: 1px solid rgba(20, 37, 26, .16); background-color: #eef1ef; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .wwt-swatch__caption { position: relative; z-index: 2; width: 100%; padding: 2px 3px 3px; font-size: 11px; font-weight: 700; line-height: 1.05; color: #fff; text-align: center; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); /* Een lange naam mag over twee regels; wat dan nog niet past valt weg. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; overflow: hidden; } /* Donkere waas onderaan, zodat witte tekst ook op een lichte stof leesbaar is. */ .wwt-swatch__box.has-caption::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); pointer-events: none; } .wwt-swatch__color, .wwt-swatch img { display: block; width: var(--wwt-swatch-size, 40px); height: var(--wwt-swatch-size, 40px); border-radius: var(--wwt-swatch-radius, 50%); border: 1px solid rgba(20, 37, 26, .16); box-shadow: 0 0 0 0 transparent; object-fit: cover; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .wwt-swatch--button .wwt-swatch__label, .wwt-swatch--fallback .wwt-swatch__label { display: inline-flex; align-items: center; justify-content: center; min-width: var(--wwt-swatch-size, 40px); min-height: 40px; padding: 0 14px; border: 1px solid #d9ddd9; border-radius: 10px; background: #fff; color: #16211a; font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; } .wwt-swatch__name { font-size: 12px; color: #6b7a70; max-width: calc(var(--wwt-swatch-size, 40px) + 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Gekozen */ .wwt-swatch.is-selected .wwt-swatch__color, .wwt-swatch.is-selected .wwt-swatch__box, .wwt-swatch.is-selected img { border-color: var(--wwt-swatch-accent, #4caf50); box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--wwt-swatch-accent, #4caf50); } .wwt-swatch.is-selected .wwt-swatch__label { border-color: var(--wwt-swatch-accent, #4caf50); background: var(--wwt-swatch-accent, #4caf50); color: #fff; } .wwt-swatch.is-selected .wwt-swatch__name { color: #16211a; font-weight: 600; } @media (hover: hover) and (pointer: fine) { .wwt-swatch:hover .wwt-swatch__color, .wwt-swatch:hover .wwt-swatch__box, .wwt-swatch:hover img { transform: scale(1.06); } .wwt-swatch:hover .wwt-swatch__label { border-color: var(--wwt-swatch-accent, #4caf50); } } .wwt-swatch:focus-visible { outline: 3px solid color-mix(in srgb, var(--wwt-swatch-accent, #4caf50) 55%, transparent); outline-offset: 3px; border-radius: 6px; } /* Niet leverbaar */ .wwt-swatch.is-unavailable { cursor: not-allowed; } .wwt-swatch.is-unavailable .wwt-swatch__color, .wwt-swatch.is-unavailable .wwt-swatch__box, .wwt-swatch.is-unavailable img, .wwt-swatch.is-unavailable .wwt-swatch__label { opacity: .4; } /* Een streep door de swatch, van linksonder naar rechtsboven. */ .wwt-swatch.is-unavailable::after { content: ""; position: absolute; top: 0; left: 0; width: var(--wwt-swatch-size, 40px); height: var(--wwt-swatch-size, 40px); background: linear-gradient( to left top, transparent calc(50% - 1px), rgba(120, 20, 20, .75) calc(50% - 1px), rgba(120, 20, 20, .75) calc(50% + 1px), transparent calc(50% + 1px) ); pointer-events: none; } body.wwt-swatch-fade .wwt-swatch.is-unavailable::after { display: none; } /* Tooltip */ .wwt-swatch[data-tooltip]::before { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); z-index: 5; padding: 5px 9px; border-radius: 7px; background: #16211a; color: #fff; font-size: 12px; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; } @media (hover: hover) and (pointer: fine) { .wwt-swatch[data-tooltip]:hover::before, .wwt-swatch[data-tooltip]:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); } } /* In de quick view van de catalogus staan de keuzeknoppen al; die krijgen hier alleen een kleur- of fotovlakje mee. */ .wwt-cat-option .wwt-swatch__color, .wwt-cat-option img.wwt-swatch-img { width: 18px; height: 18px; margin-right: 8px; border-radius: var(--wwt-swatch-radius, 50%); border: 1px solid rgba(20, 37, 26, .18); vertical-align: middle; display: inline-block; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .wwt-swatch *, .wwt-swatch::before { transition-duration: .01ms !important; } }