×
:host { /* breakpoints: not-implemented / reference only */ /* --wrapped-breakpoint-xs: 320px; */ /* --wrapped-breakpoint-sm: 490px; */ /* --wrapped-breakpoint-md: 768px; */ /* --wrapped-breakpoint-lg: 1040px; */ /* --wrapped-breakpoint-xl: 1440px; */ --wrapped-thumbnail-position-start: "media gift-dialog-header" "media content" "media gift-dialog-actions"; --wrapped-thumbnail-position-end: "gift-dialog-header media" "content media" "gift-dialog-actions media"; --wrapped-grid-template-areas: var(--wrapped-thumbnail-position-start); /* border radius */ --wrapped-border-radius-scale: 6; --wrapped-border-radius-xs: calc(var(--wrapped-border-radius-scale, 65) / 100 * 1rem); --wrapped-border-radius-sm: calc(var(--wrapped-border-radius-scale, 65) / 100 * 1.5rem); --wrapped-border-radius-base: calc(var(--wrapped-border-radius-scale, 65) / 100 * 2.5rem); --wrapped-dialog-border-surface: rgba(0,0,0,0); --wrapped-border-width: 1px; --wrapped-outline-width: calc(var(--wrapped-border-width) + 0.5px); /* buttons */ --wrapped-hover-style-light: #ffffff; --wrapped-hover-style-dark: #000000; --wrapped-hover-style: var(--wrapped-hover-style-light, --wrapped-hover-style-light); --wrapped-primary-button-surface: #a0a0a0; --wrapped-primary-button-surface--active: color-mix(in srgb, var(--wrapped-primary-button-surface), var(--wrapped-hover-style) 20%); --wrapped-primary-button-surface--hover: color-mix(in srgb, var(--wrapped-primary-button-surface), var(--wrapped-hover-style) 16%); --wrapped-primary-button-text-color: #ffffff; --wrapped-primary-button-text-color--active: color-mix(in srgb, var(--wrapped-primary-button-text-color), var(--wrapped-hover-style) 20%); --wrapped-primary-button-text-color--hover: color-mix(in srgb, var(--wrapped-primary-button-text-color), var(--wrapped-hover-style) 16%); --wrapped-primary-button-border-surface: rgba(0,0,0,0); --wrapped-primary-button-border-surface--active: transparent; --wrapped-primary-button-border-surface--hover: transparent; --wrapped-secondary-button-surface: #0000000f; --wrapped-secondary-button-surface--active: color-mix(in srgb, var(--wrapped-secondary-button-surface), var(--wrapped-hover-style) 20%); --wrapped-secondary-button-surface--hover: color-mix(in srgb, var(--wrapped-secondary-button-surface), var(--wrapped-hover-style) 16%); --wrapped-secondary-button-text-color: #333333; --wrapped-secondary-button-text-color--active: color-mix(in srgb, var(--wrapped-secondary-button-text-color), var(--wrapped-hover-style) 20%); --wrapped-secondary-button-text-color--hover: color-mix(in srgb, var(--wrapped-secondary-button-text-color), var(--wrapped-hover-style) 16%); --wrapped-secondary-button-border-surface: rgba(0,0,0,0); --wrapped-secondary-button-border-surface--active: transparent; --wrapped-secondary-button-border-surface--hover: transparent; /* do not change the root text size */ --wrapped-font-size: 16px; /* text and fonts */ --wrapped-font-family: inherit; --wrapped-font-scale: calc(90 / 100); --wrapped-font-size-sm: clamp(12px, calc(14px * var(--wrapped-font-scale)), 16px); --wrapped-font-size-base: clamp(12px, calc(16px * var(--wrapped-font-scale)), 20px); --wrapped-font-size-lg: clamp(16px, calc(24px * var(--wrapped-font-scale)), 28px); --wrapped-font-weight-base: 400; --wrapped-font-weight-md: 500; --wrapped-font-weight-lg: 600; --wrapped-line-height-base: 1.5em; /* transitions */ --wrapped-transition-duration: 0.1s; --wrapped-spinner-duration: 0.7s; /* disabled */ --wrapped-disabled-opacity-sm: 0.16; --wrapped-disabled-opacity: 0.32; --wrapped-disabled-opacity-md: 0.4; --wrapped-disabled-opacity-lg: 0.64; /* Pre-calculated percentages for color-mix */ --wrapped-disabled-opacity-percent: 32%; --wrapped-disabled-opacity-sm-percent: 16%; --wrapped-disabled-opacity-md-percent: 40%; --wrapped-disabled-opacity-lg-percent: 64%; --wrapped-disabled-cursor: not-allowed; /* form elements */ --wrapped-form-element-surface: #ffffff; --wrapped-form-element-surface--disabled: color-mix(in srgb, var(--wrapped-form-element-surface) var(--wrapped-disabled-opacity-percent), var(--wrapped-secondary-text-color) 8%); --wrapped-form-element-border-color: #000000; --wrapped-form-element-border-color--active: color-mix(in srgb, var(--wrapped-form-element-border-color), white 83%); --wrapped-form-element-border-color--disabled: color-mix(in srgb, var(--wrapped-form-element-border-color) var(--wrapped-disabled-opacity-percent), var(--wrapped-secondary-text-color) 8%); --wrapped-form-element-text-color: #333333; --wrapped-form-element-text-color--disabled: color-mix(in srgb, var(--wrapped-form-element-text-color), var(--wrapped-secondary-text-color) 8%); --wrapped-form-element-placeholder-text-color: color-mix(in srgb, var(--wrapped-form-element-text-color) var(--wrapped-disabled-opacity-percent), transparent); --wrapped-form-element-placeholder-text-color--disabled: color-mix(in srgb, var(--wrapped-form-element-text-color) var(--wrapped-disabled-opacity-percent), var(--wrapped-secondary-text-color) 8%); --wrapped-form-element-selection-color: #000000; --wrapped-form-element-selection-color--active: color-mix(in srgb, var(--wrapped-form-element-selection-color), var(--wrapped-hover-style) 40%); --wrapped-form-element-selection-color--hover: color-mix(in srgb, var(--wrapped-form-element-selection-color), var(--wrapped-hover-style) 32%); /* primary colors */ --wrapped-primary-surface: #ffffff; --wrapped-primary-text-color: #000000; --wrapped-primary-text-color--hover: color-mix(in srgb, var(--wrapped-primary-text-color), var(--wrapped-hover-style) 32%); /* secondary colors */ --wrapped-secondary-surface: #f3f3f3; --wrapped-secondary-text-color: #333333; --wrapped-secondary-text-color--disabled: color-mix(in srgb, var(--wrapped-secondary-text-color) var(--wrapped-disabled-opacity-lg-percent), var(--wrapped-secondary-text-color) 8%); /* spacing */ --wrapped-spacing-scale-base: 1; --wrapped-spacing-scale-less: 0.75; --wrapped-spacing-scale-more: 1.166; --wrapped-spacing-scale: var(--wrapped-spacing-scale-base, 1); --wrapped-spacing-fixed: 4px; --wrapped-spacing-base: clamp(12px, calc(16px * var(--wrapped-spacing-scale)), 24px); --wrapped-spacing-lg: clamp(16px, calc(24px * var(--wrapped-spacing-scale)), 28px); --wrapped-spacing-sm: clamp(8px, calc(12px * var(--wrapped-spacing-scale)), 14px); --wrapped-spacing-xs: clamp(6px, calc(8px * var(--wrapped-spacing-scale)), 10px); /* shadows */ --wrapped-shadow-blur: 1.5rem; --wrapped-shadow-color: rgba(0, 0, 0, 0.25); --wrapped-shadow-offset: 0.75rem; /* default styles */ all: revert; box-sizing: border-box; cursor: default; display: block; font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size); line-height: var(--wrapped-line-height-base); letter-spacing: normal; margin-block-start: var(--wrapped-spacing-xs); margin-block-end: var(--wrapped-spacing-xs); text-align: start; width: -webkit-fill-available; white-space: normal; } *, *::before, *::after { box-sizing: inherit; } /* gift block launcher */ gift-block-launcher { display: contents; } .gift-block__launcher { background-color: var(--wrapped-primary-button-surface); border-color: var(--wrapped-primary-button-border-surface); border-width: var(--wrapped-border-width); border-radius: var(--wrapped-border-radius-sm); border-style: solid; color: var(--wrapped-primary-button-text-color); padding: var(--wrapped-spacing-sm); font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-base); width: 100%; &:hover { cursor: pointer; background-color: var(--wrapped-primary-button-surface--hover); border-color: var(--wrapped-primary-button-border-surface--hover); } &:active { background-color: var(--wrapped-primary-button-surface--active); border-color: var(--wrapped-primary-button-border-surface--active); } &:focus, &:focus-visible { outline: none; } &[with-checkmark] { position: relative; display: inline-flex; align-items: center; gap: var(--wrapped-spacing-fixed); & .icon-wrapper { display: flex; flex-shrink: 0; } & .button-content { justify-content: var(--wrapped-launcher-button-content-justify-content, space-between); } &[with-gift-options] { .checkmark-icon { display: block; /* animation: unblur calc(var(--wrapped-transition-duration) * 3) ease forwards; */ } } } &[variant="link"] { background: none; border: none; color: var(--wrapped-primary-text-color); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-base); padding: 0; text-decoration: none; width: auto; &:hover { cursor: pointer; color: var(--wrapped-primary-text-color--hover); text-decoration: underline; } &[with-checkmark] { padding-left: 0; text-align: start; word-break: keep-all; } & .button-content { flex-direction: row; justify-content: flex-start; } } & .button-content { display: inline-flex; align-items: center; gap: var(--wrapped-spacing-fixed); flex-direction: row-reverse; justify-content: var(--wrapped-launcher-button-content-justify-content, center); width: 100%; & .label { text-align: start; } } & .icon-wrapper { display: none; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; svg { fill: currentColor; height: 100%; width: 100%; } .checkmark-icon { display: none; } } } .gift-block__launcher:disabled, .gift-block__launcher[orders-limit-reached] { cursor: var(--wrapped-disabled-cursor); opacity: var(--wrapped-disabled-opacity); pointer-events: none; &[with-checkmark] { .icon-wrapper { opacity: var(--wrapped-disabled-opacity-md); } } } /* gift block modal */ .gift-block-modal { background-color: var(--wrapped-primary-surface); border: none; border-radius: var(--wrapped-border-radius-base); box-shadow: 0 var(--wrapped-shadow-offset) var(--wrapped-shadow-blur) var(--wrapped-shadow-color); outline: var(--wrapped-border-width) solid var(--wrapped-dialog-border-surface); padding: 0; } .gift-block-modal::backdrop { background-color: rgba(156, 163, 175, 0.75); } .gift-block-modal:focus, .gift-block-modal:focus-visible { outline: var(--wrapped-border-width) solid var(--wrapped-dialog-border-surface); } @media (max-width: 768px) { .gift-block-modal { max-height: calc(100% - var(--wrapped-spacing-sm)); max-width: calc(100% - var(--wrapped-spacing-sm)); overscroll-behavior: contain; } } /* gift block modal layout */ .gift-block-modal-layout { display: grid; grid-template-areas: var(--wrapped-grid-template-areas); grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; max-height: 80dvh; max-width: 80dvw; overflow: hidden; } /* Collapse to 1-column layout if media is hidden */ .gift-block-modal-layout:has(section#media[hidden]), .gift-block-modal-layout:has(section#media.with-media-inline), .gift-block-modal-layout:not(:has(section#media)), .gift-block-modal-layout:not(:has(section#media img)) { grid-template-areas: "gift-dialog-header" "content" "gift-dialog-actions"; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; section#media { display: none; } } gift-dialog-header { align-items: flex-start; background-color: var(--wrapped-primary-surface); display: flex; flex-direction: row; gap: var(--wrapped-spacing-fixed); grid-area: gift-dialog-header; justify-content: space-between; padding: var(--wrapped-spacing-lg); position: sticky; top: 0; z-index: 1; & h1 { color: var(--wrapped-primary-text-color); font-size: var(--wrapped-font-size-lg); font-weight: var(--wrapped-font-weight-md); line-height: 1.25em; margin: 0; } & button { background-color: color-mix(in srgb, var(--wrapped-secondary-text-color) 8%, transparent); color: var(--wrapped-secondary-text-color); border-radius: var(--wrapped-border-radius-xs); font-size: var(--wrapped-font-size-sm); font-weight: var(--wrapped-font-weight-lg); width: 2.25em; height: 2.25em; min-width: 2.25em; min-height: 2.25em; outline: none; border: 0; cursor: pointer; transition: background-color var(--wrapped-transition-duration) ease, color var(--wrapped-transition-duration) ease; &:hover { background-color: color-mix(in srgb, var(--wrapped-secondary-text-color) 6%, var(--wrapped-hover-style) 12%); } &:active { background-color: color-mix(in srgb, var(--wrapped-secondary-text-color) 16%, var(--wrapped-hover-style) 16%); } &:disabled { pointer-events: none; opacity: var(--wrapped-disabled-opacity); } } } gift-dialog-actions { align-items: flex-end; background-color: var(--wrapped-primary-surface); bottom: 0; display: flex; flex-direction: column; gap: var(--wrapped-spacing-sm); grid-area: gift-dialog-actions; overscroll-behavior: contain; position: sticky; padding: var(--wrapped-spacing-lg); z-index: 1; & button { border-radius: var(--wrapped-border-radius-sm); border-width: var(--wrapped-border-width); border-style: solid; cursor: pointer; font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-md); padding: var(--wrapped-spacing-sm); position: relative; width: 100%; transition: background-color var(--wrapped-transition-duration) ease, border-color var(--wrapped-transition-duration) ease, color var(--wrapped-transition-duration) ease, opacity var(--wrapped-transition-duration) ease; &.primary { background-color: var(--wrapped-primary-button-surface); border-color: var(--wrapped-primary-button-border-surface); color: var(--wrapped-primary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; width: 100%; } .label { flex: 0 1 auto; min-width: 0; text-align: center; } .label.out-of-stock { display: none; } .icon-wrapper { width: 0em; height: 1.25em; } &:hover { background-color: var(--wrapped-primary-button-surface--hover); border-color: var(--wrapped-primary-button-border-surface--hover); color: var(--wrapped-primary-button-text-color--hover); } &:active { background-color: var(--wrapped-primary-button-surface--active); border-color: var(--wrapped-primary-button-border-surface--active); color: var(--wrapped-primary-button-text-color--active); } &[loading] { background-color: var(--wrapped-primary-button-surface--active); border-color: var(--wrapped-primary-button-border-surface--active); color: var(--wrapped-primary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } } } &.secondary { background-color: var(--wrapped-secondary-button-surface); border-color: var(--wrapped-secondary-button-border-surface); color: var(--wrapped-secondary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; gap: var(--wrapped-spacing-fixed); width: 100%; } .label { flex: 0 1 auto; min-width: 0; text-align: center; } .icon-wrapper { --icon-stroke-width: 1.5px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; svg { width: 1.25em; height: 1.25em; stroke-width: var(--icon-stroke-width); } .remove-icon-top, .remove-icon-bottom { transition: transform var(--wrapped-transition-duration) ease-in-out; } } &:hover { background-color: var(--wrapped-secondary-button-surface--hover); border-color: var(--wrapped-secondary-button-border-surface--hover); color: var(--wrapped-secondary-button-text-color--hover); .icon-wrapper { .remove-icon-top { transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg); } .remove-icon-bottom { transform: translateY(var(--icon-stroke-width)); } } } &:active { background-color: var(--wrapped-secondary-button-surface--active); border-color: var(--wrapped-secondary-button-border-surface--active); .icon-wrapper { transition: filter var(--wrapped-transition-duration) ease-in-out; } } &[hidden] { display: none; } &[loading] { background-color: var(--wrapped-secondary-button-surface--active); border-color: var(--wrapped-secondary-button-border-surface--active); color: var(--wrapped-secondary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } .spinner .svg-wrapper svg { fill: var(--wrapped-secondary-button-text-color--active); } } } &:disabled { cursor: var(--wrapped-disabled-cursor); opacity: var(--wrapped-disabled-opacity); pointer-events: none; .button-content { pointer-events: none; opacity: calc(var(--wrapped-disabled-opacity) * 1.5); } } /* spinner styles */ .spinner { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); & .svg-wrapper svg { animation: spin var(--wrapped-spinner-duration) cubic-bezier(0, 0, 1, 1) infinite; fill: var(--wrapped-primary-button-text-color); height: 1.5em; } & [role="status"] { visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } &[loading] { pointer-events: none; .spinner { opacity: 1; } } } &:has(button[loading]:not([hidden])) { & button { pointer-events: none; opacity: 0.8; } } &:is([out-of-stock]) { & button.primary { pointer-events: none !important; opacity: 0.6 !important; & .label { display: none; } & .label.out-of-stock { display: block; } } } } gift-dialog-content { display: contents; } section#media { align-self: stretch; background-color: var(--wrapped-secondary-surface); grid-area: media; grid-row: 1 / 4; height: 100%; padding: var(--wrapped-spacing-lg); position: sticky; top: 0; transition: order var(--wrapped-transition-duration) ease, width var(--wrapped-transition-duration) ease; &.with-media-cover { & img { height: 100%; } } &.with-media-fill { padding: 0; & img { border-radius: 0; height: 100%; } } & shopify-media { & img { border-radius: var(--wrapped-border-radius-sm); width: 100%; height: auto; } } } section#content { grid-area: content; background-color: var(--wrapped-primary-surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding: var(--wrapped-spacing-lg); padding-bottom: 0; padding-top: 0; position: relative; /* important to prevent content shifting when changing variants */ align-items: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--wrapped-spacing-lg); transition: order var(--wrapped-transition-duration) ease; @media (max-width: 768px) { & > *:first-child:not(:only-child) { margin-top: unset; } } /* gift product details */ & .gift-product { display: flex; flex-direction: column; gap: var(--wrapped-spacing-base); } & .gift-product-header { --wrapped-thumbnail-position-start: row; --wrapped-thumbnail-position-end: row-reverse; align-items: center; display: flex; flex-direction: var(--wrapped-thumbnail-position-start); flex-wrap: wrap; row-gap: var(--wrapped-spacing-base); column-gap: var(--wrapped-spacing-sm); } & .gift-product-content { display: flex; flex: 1 1 50%; flex-direction: column; gap: var(--wrapped-spacing-xs); } & .gift-product-media { display: flex; align-items: center; &:has(shopify-media) { --wrapped-inline-media-max-size: 75px; --wrapped-inline-media-size: clamp(40px, 75px, var(--wrapped-inline-media-max-size)); border-radius: var(--wrapped-border-radius-sm); height: var(--wrapped-inline-media-size); width: var(--wrapped-inline-media-size); overflow: hidden; margin-inline-start: auto; margin-inline-end: auto; } & shopify-media { & img { border-radius: var(--wrapped-border-radius-sm); width: 100%; height: auto; } } } & .gift-product-title { color: var(--wrapped-primary-text-color); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-md); margin: 0; } & .gift-product-pricing { display: flex; gap: var(--wrapped-spacing-xs); margin: 0; font-weight: var(--wrapped-font-weight-base); /* font-size: var(--wrapped-font-size-base); */ font-size: clamp(12px, calc(var(--wrapped-font-size-base) * 0.94), 18px); line-height: 1em; } & .gift-product-price { color: var(--wrapped-secondary-text-color); } & .gift-product-price--compare { color: var(--wrapped-secondary-text-color); text-decoration: line-through; opacity: var(--wrapped-disabled-opacity); } & .gift-product-description { font-weight: var(--wrapped-font-weight-base); color: var(--wrapped-secondary-text-color); font-size: clamp(12px, calc(var(--wrapped-font-size-base) * 0.94), 18px); line-height: 1.5em; & shopify-data { & :first-child { margin-top: 0; } & :last-child { margin-bottom: 0; } & ul { padding-left: var(--wrapped-spacing-lg); } } } /* gift messaging fields */ & gift-dialog-message { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--wrapped-spacing-base); } & .option-group { display: flex; flex-direction: column; gap: var(--wrapped-spacing-xs); flex: 0 0 100%; @media (min-width: 768px) { &:has(input[id="receiver-input"]), &:has(input[id="sender-input"]) { flex: 1 1 0%; } } &.option-group-disabled { cursor: var(--wrapped-disabled-cursor); pointer-events: none; opacity: var(--wrapped-disabled-opacity-md); transition: background-color var(--wrapped-transition-duration) ease, color var(--wrapped-transition-duration) ease; & .message-field { background-color: var(--wrapped-form-element-surface--disabled); color: transparent; outline-color: var(--wrapped-form-element-border-color--disabled); pointer-events: none; } } &.option-group-hidden { display: none; } & label { font-size: var(--wrapped-font-size-sm); font-weight: var(--wrapped-font-weight-base); color: var(--wrapped-secondary-text-color); line-height: 1em; } & .message-field { background-color: var(--wrapped-form-element-surface); color: var(--wrapped-form-element-text-color); width: 100%; padding: var(--wrapped-spacing-sm); border: none; border-radius: var(--wrapped-border-radius-sm); font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size-base); outline: var(--wrapped-border-width) solid var(--wrapped-form-element-border-color); min-height: 42px; } & .message-field:active, & .message-field:focus, & .message-field:focus-within, & .message-field:focus-visible { outline-color: var(--wrapped-form-element-selection-color); outline-width: var(--wrapped-outline-width); /* UX verification needed &::placeholder { color: transparent; } */ } & .message-field::placeholder { color: var(--wrapped-form-element-placeholder-text-color); } & textarea.message-field { min-height: 100px; resize: vertical; } & .counter { color: var(--wrapped-secondary-text-color); font-size: var(--wrapped-font-size-sm); line-height: normal; } } } /* shopify variant selector */ shopify-variant-selector { font-size: var(--wrapped-font-size-sm); width: 100%; } shopify-variant-selector::part(form) { gap: var(--wrapped-spacing-base); } shopify-variant-selector::part(radio) { background-color: var(--wrapped-form-element-surface); color: var(--wrapped-form-element-text-color); border: none; border-radius: var(--wrapped-border-radius-sm); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-base); outline: var(--wrapped-border-width) solid var(--wrapped-form-element-border-color); padding: calc(var(--wrapped-spacing-sm) * 0.5) var(--wrapped-spacing-base); transition: color var(--wrapped-transition-duration) ease, outline-color var(--wrapped-transition-duration) ease, outline-width var(--wrapped-transition-duration) ease; } shopify-variant-selector::part(radio):active { outline-color: var(--wrapped-form-element-selection-color--active); outline-width: var(--wrapped-outline-width); } shopify-variant-selector::part(radio):hover { outline-color: var(--wrapped-form-element-selection-color--hover); } shopify-variant-selector::part(radio-disabled) { background-color: var(--wrapped-form-element-surface--disabled); color: var(--wrapped-form-element-text-color--disabled); opacity: var(--wrapped-disabled-opacity-md); /* do not transition opacity - it causes a flash when changing variants */ outline-color: var(--wrapped-form-element-border-color--disabled); pointer-events: none; } shopify-variant-selector::part(radio-selected) { outline-color: var(--wrapped-form-element-selection-color); outline-width: var(--wrapped-outline-width); pointer-events: none; } shopify-variant-selector::part(select) { color: var(--wrapped-form-element-text-color); border: none; border-radius: var(--wrapped-border-radius-sm); font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-base); margin-top: var(--wrapped-spacing-xs); width: 100%; max-width: 100%; padding: var(--wrapped-spacing-sm); padding-right: calc(var(--wrapped-spacing-sm) + 1.5rem); outline: var(--wrapped-border-width) solid var(--wrapped-form-element-border-color); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--wrapped-form-element-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6.24 8.2a.75.75 0 0 1 1.06.04l2.7 2.908 2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1em 1em; } shopify-variant-selector::part(select):focus, shopify-variant-selector::part(select):focus-visible { outline-color: var(--wrapped-form-element-selection-color); outline-width: var(--wrapped-outline-width); } shopify-variant-selector::part(color-swatch) { border: none; outline: var(--wrapped-border-width) solid rgba(0, 0, 0, .1); transition: color var(--wrapped-transition-duration) ease, outline-color var(--wrapped-transition-duration) ease, outline-width var(--wrapped-transition-duration) ease; } shopify-variant-selector::part(color-swatch):active { outline-color: var(--wrapped-form-element-selection-color--active); outline-width: var(--wrapped-outline-width); } shopify-variant-selector::part(color-swatch):hover { outline-color: var(--wrapped-form-element-selection-color--hover); } shopify-variant-selector::part(color-swatch-selected) { outline-color: var(--wrapped-form-element-selection-color); outline-width: var(--wrapped-outline-width); } shopify-variant-selector::part(color-swatch-selected):after { content: unset; } shopify-variant-selector::part(color-swatch-label) { color: var(--wrapped-secondary-text-color); } shopify-variant-selector::part(color-swatch-disabled) { opacity: var(--wrapped-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ pointer-events: none; } shopify-variant-selector::part(label) { color: var(--wrapped-secondary-text-color); display: inline-block; font-size: var(--wrapped-font-size-sm); font-weight: var(--wrapped-font-weight-base); line-height: 1em; margin-bottom: calc(var(--wrapped-spacing-sm) - 6px); } /* media queries */ /* md - and above */ @media (min-width: 768px) { :host { --wrapped-section-max-width: 420px; } gift-dialog-content > section { min-width: var(--wrapped-section-max-width); max-width: var(--wrapped-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--wrapped-section-max-width); max-width: var(--wrapped-section-max-width); } } /* md - and below */ @media (max-width: 768px) { :host { --wrapped-section-max-width: 390px; } gift-dialog-content > section { min-width: var(--wrapped-section-max-width); max-width: var(--wrapped-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--wrapped-section-max-width); max-width: var(--wrapped-section-max-width); padding: var(--wrapped-spacing-base); } .gift-block-modal-layout { grid-template-areas: "gift-dialog-header" "media" "content" "gift-dialog-actions"; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; max-height: calc(100dvh - var(--wrapped-spacing-base)); max-width: 100dvw; } gift-dialog-content { display: grid; grid-template-areas: "media" "content"; grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } section#media { background: none; grid-row: auto; position: relative; padding: 0; & shopify-media { & img { border-radius: unset; min-height: var(--wrapped-section-max-width); max-height: var(--wrapped-section-max-width); } } } section#content { overflow-y: unset; padding: var(--wrapped-spacing-base); &.with-media-inline { padding-top: 0; } & .gift-product-media { &:has(shopify-media) { --wrapped-inline-media-max-size: 330px; } } } } /* sm - and below */ @media (max-width: 480px) { :host { --wrapped-section-max-width: 100%; } section#media { & shopify-media { & img { border-radius: unset; min-height: 350px; max-height: 350px; } } } } /* animations for loaders */ @keyframes spin { 100% { transform: rotate(1turn); } } @keyframes unblur { from { filter: blur(2px); } to { filter: blur(0px); } }
A free pair of mini earrings for orders over €80 • Free delivery for orders over €80
L'Atelier de Solène
Our Jewels
RINGS
All our rings
To be engraved
Thin
Thick
Adjustable
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
EARRINGS
All our earrings
Hoops
XL
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Dangling
Studs
Earcuffs
Single
BRACELETS
All our bracelets
To be engraved
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Double
Bangles
NECKLACES
All our necklaces
To be engraved
Chokers
Medium-Length
Long necklaces
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Double
MEDALS & CHARMS
All our medals and charms
Medals
Charms
Chains
Our Collections
Our collections
Les Minis
Ingrid & Henriette
Signature
Wedding
Private Sales
Engraving
Gift Card
Brand universe
Our founder
Our know-how
Our values
Our commitments
Magazine
Our store
Help
Care instructions
Frequently asked questions
Order tracking
Size guide
Contact us
Sign in
We've sent you an email with a link to update your password.
Email*
Password*
Lost your password ?
Create your account
Reset your password
We will send you an email to reset your password.
Password*
Cancel
Cart
0
item
€0,00
Cart
0
item
€0,00
Home
Shop
Account
Wishlist
Our Jewels
Our Jewels
All our jewels
Rings
Rings
All our rings
To be engraved
Thin
Thick
Adjustable
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Bracelets
Bracelets
All our bracelets
To be engraved
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Double
Bangles
Necklaces
Necklaces
All our necklaces
To be engraved
Chokers
Medium-Length
Long necklaces
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Double
Earrings
Earrings
All our earrings
Hoops
XL
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Dangling
Studs
Earcuffs
Single
Medals & Charms
Medals & Charms
Medals
Charms
Chains
Our Collections
Our Collections
Les Minis
Ingrid & Henriette
Signature
Wedding
Private Sales
Engraving
Gift Card
Brand Universe
Brand Universe
Our founder
Our know-how
Our values
Our commitments
Magazine
Our store
Help
Help
Care instructions
Frequently asked questions
Order tracking
Size guide
Contact us
Colorful earrings
Home
Products
Colorful earrings
Featured
Best selling
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
Date, new to old
Sort
Clear all filter
Close
Category
Reset
Earrings
67
Availability
Reset
In stock
65
Out of stock
2
Price
Price :
€0,00
—
€78,00
Filter
Loading
Loading
Add to Cart
Léo Earring - Olive - Per unit
€23,00
Loading
Loading
Add to Cart
Tiana Earring - Azure Blue - Per unit
€20,00
Loading
Loading
Add to Cart
Suzanne Earring - Olive - Per unit
€26,00
Loading
Loading
Add to Cart
Léopold Earring - Raspberry - Per unit
€23,00
Loading
Loading
Add to Cart
Marina Earrings - Blue
€59,00
Loading
Loading
Add to Cart
Tiana Earring - Olive - Per unit
€20,00
Loading
Loading
Add to Cart
Elyn Earring - Aventurine Green - Per unit
€21,00
Loading
Loading
Add to Cart
Léo Earring - Pink - Per unit
€23,00
Loading
Loading
Out of stock
Zoé Earrings - Large Model - Aventurine
€50,00
Loading
Loading
Add to Cart
Zoé Earrings - Large Model - Olive
€50,00
Loading
Loading
Add to Cart
Léo Earring - Navy - Per unit
€23,00
Loading
Loading
Add to Cart
Zoé Earrings - Large Model - Azure Blue
€50,00
Loading
Loading
Add to Cart
Noalie Earring - Azure Blue - Per unit
€21,00
Loading
Loading
Add to Cart
Noalie Earring - Smoky Quartz - Per unit
€21,00
Loading
Loading
Add to Cart
Tiana Earring - Purple - Per unit
€20,00
Loading
Loading
Add to Cart
Muriel Earrings - Twilight
€45,00
Loading
Loading
Add to Cart
Zoé Earrings - Large Model - Turquoise
€50,00
Loading
Loading
Add to Cart
Noalie Earring - Rhodonite - Per unit
€21,00
Loading
Loading
Add to Cart
Noalie Earring - Beige - Per unit
€21,00
Loading
Loading
Add to Cart
Prudence Earrings - Twilight
€42,00
Loading
Loading
Add to Cart
Elyn Earring - Azure - Per unit
€21,00
Loading
Loading
- 32%
Add to Cart
Salomé Earrings - Twilight
€62,00
€42,00
Loading
Loading
Add to Cart
Léopold Earring - Navy - Per unit
€23,00
Loading
Loading
Add to Cart
Zoé Earrings - Large Model - Pink
€50,00
You've viewed 48 of 67 products
×
