@constructor-io/constructorio-ui-quizzes 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/constructorio-ui-quizzes-bundled.js +1 -1
- package/lib/styles.css +123 -120
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="cio-quizzes-styles",o.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap";.cio-quiz{--primary-color-h: 227;--primary-color-s: 70%;--primary-color-l: 46%;--primary-color-variant-100: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 10%), calc(var(--primary-color-l) + 25%) );--primary-color-variant-400: hsl( var(--primary-color-h), var(--primary-color-s), var(--primary-color-l) );--primary-color-variant-500: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 10%), calc(var(--primary-color-l) - 5%) );--primary-color-variant-600: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 15%), calc(var(--primary-color-l) - 10%) );--primary-color-variant-700: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 15%), calc(var(--primary-color-l) - 15%) );--primary-color-variant-800: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 20%), calc(var(--primary-color-l) - 20%) );--primary-color: var(--primary-color-variant-400);--gray-dust-100: #92959c;--gray-dust-200: #74757b;--gray-dust-500: #46474a;--gray-dust-900: #2c2c2f;--bottom-bar-height: 80px;--container-image-small-height: 250px;container:quiz / inline-size}.cio-quiz,.cio-quiz *{box-sizing:border-box;font-family:Inter,sans-serif}.cio-quiz{position:relative;min-width:100%;min-height:100%;height:100%;overflow:auto;background-color:#fff;color:var(--gray-dust-500);font-size:16px}.cio-quiz.cio-quiz-loading{display:flex;justify-content:center}.cio-quiz button{cursor:pointer}.cio-container{display:flex;justify-content:center;margin-top:2rem;padding-bottom:var(--bottom-bar-height);width:100%;position:relative;align-self:start;height:calc(100% - 2rem - var(--bottom-bar-height))}.cio-container--with-image{display:flex;flex-direction:column;width:100%;padding-bottom:var(--bottom-bar-height);position:relative;align-self:start;height:calc(100% - var(--bottom-bar-height))}.cio-question-background-image{height:calc(100% - 4px);width:100%;position:absolute;z-index:-1}.cio-session-prompt-modal{position:absolute;display:flex;z-index:100;width:100%;height:100%;background-color:#00000080;justify-content:space-between}.cio-session-prompt-container{margin:auto}.cio-session-prompt-content{display:flex;flex-direction:column;gap:1rem;height:fit-content;margin:2rem;padding:2rem;border-radius:8px;background:#ffffff;line-height:1.5}.cio-session-prompt-controls-container{display:flex;justify-content:space-between;gap:1rem}.cio-session-prompt-content .cio-button-container{margin:0;padding:0}.cio-session-prompt-controls-container .cio-button-container:nth-child(1) .cio-question-cta-button{color:var(--primary-color);background-color:#fff}.cio-question-content{display:flex;flex-direction:column;padding:1rem}.cio-question-title{font-size:2.125em;margin:0}.cio-question-description{font-size:1em;line-height:1.5;margin-top:1.5rem}.cio-question-image{width:100%;height:100%;object-fit:cover}.cio-question-image-container{box-sizing:border-box;width:100%;object-fit:cover;max-height:var(--container-image-small-height);height:var(--container-image-small-height);display:flex;align-self:stretch}.cio-question-input-text{width:100%;padding:.5rem;border:0;border-bottom:1px solid var(--gray-dust-100);color:var(--primary-color-variant-500);padding:.8rem;outline:none;font-size:1rem}.cio-question-input-text:focus,.cio-question-input-text:active{border-bottom:1px solid var(--primary-color-variant-500)}.cio-question-input-text::placeholder{color:var(--gray-dust-100)}.cio-question-buttons-container{width:100%;height:var(--bottom-bar-height);padding:8px 16px;display:flex;position:sticky;bottom:0px;left:0px;background:white;background-color:#ffffffde;align-items:center}.cio-question-cta-button{background:var(--primary-color);color:#fff;border:2px solid var(--primary-color);border-radius:4px;height:3rem;font-size:1rem;flex-grow:1;margin-left:auto;width:100%}.cio-button-container{max-width:10rem;flex-grow:1;margin-left:auto;padding-left:1rem}.cio-question-cta-button:hover{background:var(--primary-color-variant-500);border:2px solid var(--primary-color-variant-600)}.cio-question-cta-button:active{background:var(--primary-color-variant-700);border:2px solid var(--primary-color-variant-800)}.cio-question-cta-button:focus{outline:3px solid var(--primary-color-variant-100)}.cio-question-cta-button:disabled,.cio-question-cta-button.disabled{background:var(--gray-dust-200);border:2px solid var(--gray-dust-200);cursor:auto;outline:none}.cio-question-back-button{color:var(--primary-color);background:#ffffff;border:1px solid var(--primary-color);border-radius:4px;height:3rem;width:3rem;font-size:1rem;margin-right:4rem}.cio-question-back-button:hover{border:2px solid var(--primary-color-variant-600)}.cio-question-back-button:active{border:2px solid var(--primary-color-variant-700)}.cio-question-back-button:focus{outline:3px solid var(--primary-color-variant-100)}.cio-question-back-button.disabled{display:none}.cio-question-back-button svg{display:inline}.cio-cover-question-container--with-image{padding:0;padding-bottom:var(--bottom-bar-height)}.cio-question-option-container{padding:1.5rem;border-radius:8px;border:1px solid var(--primary-color-variant-100);box-shadow:0 4px 10px #5d7ce826;width:calc(50% - 10px);display:flex;flex-direction:column;cursor:pointer;background-color:#fff}.cio-question-option-container.selected,.cio-question-option-container-text-only.selected{outline:3px solid var(--primary-color-variant-600);box-shadow:0 4px 10px #5d7ce859}.cio-question-option-container:hover:not(.selected){outline:1px solid var(--primary-color-variant-600);box-shadow:0 4px 10px #5d7ce840}.cio-question-option-container-text-only:hover:not(.selected){outline:1px solid var(--primary-color-variant-600);box-shadow:0 4px 10px #5d7ce840}.cio-select-question-container{position:relative;display:flex;flex-direction:column;align-items:center;max-width:1200px;padding:1rem;margin-top:2rem;min-height:calc(100% - 2rem - var(--bottom-bar-height));width:100%;margin-right:auto;margin-left:auto}.cio-question-options-container{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;width:100%;margin-bottom:var(--bottom-bar-height);margin-top:2rem}.cio-question-options-container-text-only{display:flex;flex-direction:column;gap:1rem;width:100%;padding:10px;margin-bottom:var(--bottom-bar-height);margin-top:2rem}.cio-question-option-container-text-only{padding:1.5rem;border-radius:8px;border:1px solid var(--primary-color-variant-100);box-shadow:0 4px 10px #5d7ce826;display:flex;flex-direction:column;width:100%;margin:auto;cursor:pointer;background-color:#fff}.cio-question-option-image{width:100%;height:auto;border-radius:4px;object-fit:cover;margin-bottom:16px;aspect-ratio:1/1}.cio-question-option-value{text-align:center;margin:auto 0}.cio-select-question-text{width:100%;display:flex;flex-direction:column;justify-content:space-between}.cio-select-question-text .cio-question-description{margin-bottom:0}.cio-select-question-instructions{text-align:center;font-size:1.125rem;color:var(--gray-dust-100);line-height:150%;margin-top:2.75rem;margin-bottom:-1rem}.cio-results-container{width:100%;max-width:1200px;padding:2rem 1rem;display:flex;flex-direction:column;margin-right:auto;margin-left:auto}.cio-results-title{margin-top:0;margin-bottom:1rem;color:var(--gray-dust-500)}.cio-results-filter-container{margin-bottom:1.5rem}.cio-results-filter-container p{color:var(--gray-dust-500);margin-bottom:1.5rem}.cio-results-filter-options{display:flex;flex-wrap:wrap;gap:.5rem;cursor:default}.cio-results-filter-option{background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color-variant-500);border-radius:10000px;padding:.4rem 1.25rem;display:flex;justify-content:center;align-items:center;font-size:.75rem}.cio-results{display:flex;flex-direction:row;flex-wrap:wrap}.cio-zero-results{margin-top:2rem;text-align:center;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin-left:auto;margin-right:auto}.cio-zero-results-subtitle{font-weight:500;font-size:1.25rem;line-height:1.5rem;margin-bottom:2rem;color:var(--gray-dust-500);margin-top:0}.cio-zero-results .cio-button-container{width:14rem;margin-right:auto;margin-left:auto;padding-left:0}.cio-result-card{background-color:transparent;height:auto;box-sizing:border-box;text-decoration:none;margin:0;margin-bottom:1.5rem;flex-basis:100%;display:flex;flex-direction:column}.cio-result-card-anchor,.cio-result-card-container{text-decoration:none;background-color:transparent;color:inherit;height:100%;display:flex;flex-direction:column;justify-content:space-between}.cio-result-card-image{width:auto;height:240px;margin-left:auto;margin-right:auto;margin-bottom:10px}.cio-result-card-image img{height:100%;width:100%;object-fit:contain}.cio-result-card-text{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}.cio-result-card-title{color:var(--gray-dust-500);margin:0;margin-bottom:1rem;font-weight:700}.cio-result-card-prices{margin-bottom:1rem;font-weight:700}.cio-result-card-sale-price{color:#bf1728;margin-right:.75rem}.cio-result-card-regular-price{color:var(--gray-dust-900)}.cio-result-card-regular-price--strike-through{text-decoration:line-through}.cio-result-card-rating{margin-bottom:10px}.cio-result-card-rating-score{margin-right:5px}.cio-result-card-favorites-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;width:25px;margin-left:auto;margin-bottom:1rem}.cio-result-card-favorites-button.favorited svg{fill:red}.cio-result-card-favorites-button svg:hover{stroke:#000;stroke-width:1px}.cio-result-card-cta-button{padding:.75rem 2.5rem;height:3rem;background:var(--primary-color);border:2px solid var(--primary-color);border-radius:4px;color:#fff;font-size:1rem;width:100%}.cio-result-card-cta-button:hover{background:var(--primary-color-variant-500);border:2px solid var(--primary-color-variant-600)}.cio-result-card-cta-button:active{background:var(--primary-color-variant-700);border:2px solid var(--primary-color-variant-800)}.cio-result-card-cta-button:focus{outline:3px solid var(--primary-color-variant-100)}.cio-result-card-cta-button:disabled,.cio-result-card-cta-button.disabled{background:var(--gray-dust-200);border:2px solid var(--gray-dust-200)}.cio-question-redo-button{background:none;border:none;display:flex;gap:.5rem;align-items:center}.cio-question-redo-button:hover{text-decoration:underline}.cio-question-redo-button span{margin-top:1px}@container quiz (min-width: 640px){.cio-container{padding-bottom:0;align-self:normal}.cio-container--with-image{display:flex;align-items:center;margin-bottom:0;padding-bottom:0;align-self:normal}.cio-question-image-container{flex-basis:50%;flex-shrink:0;border-radius:4px}.cio-cover-question-container--with-image{margin-bottom:0;padding-bottom:0}.cio-select-question-text{margin-top:2rem}.cio-select-question-buttons{padding:1rem 3rem}.cio-results-container{padding:3rem 4rem}.cio-results-filter-and-redo-container{display:flex;justify-content:space-between;align-items:end;margin-bottom:1.5rem}.cio-results-filter-container{margin-bottom:0}.cio-results{column-gap:5%}.cio-result-card{flex-basis:30%}}@container quiz (min-width: 768px){.cio-container{align-items:center;margin-top:0;height:calc(100% - var(--bottom-bar-height))}.cio-container--with-image{padding:6% 2%;align-items:center;flex-direction:row;justify-content:center}.cio-cover-question-container--with-image{flex-direction:row-reverse}.cio-question-input-text{margin-bottom:1rem}.cio-question-image-container{max-height:unset;height:unset}.cio-question-content{justify-content:center;height:fit-content;flex-basis:70%;flex-shrink:1;margin:0 auto;padding:3rem}.cio-question-description{margin-bottom:2rem}.cio-cover-question-container--with-image{padding:0}.cio-select-question-text{padding:0;padding-bottom:2rem;margin:0}.cio-select-question-buttons{padding:1rem 5rem}.cio-select-question-container{justify-content:center;margin-bottom:0;margin-top:0;padding:2rem;padding-bottom:0;min-height:calc(100% - var(--bottom-bar-height))}.cio-question-option-container{width:calc(25% - 13px)}.cio-question-options-container{padding:0;margin-bottom:2rem}.cio-question-options-container-text-only{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-bottom:2rem;margin-top:0}.cio-question-option-container-text-only{margin:0;width:30%}}@container quiz (min-width: 1280px){.cio-cover-question-container--with-image{padding:0}.cio-question-option-container-text-only{width:30%}.cio-select-question-container{margin-bottom:0}.cio-select-question-text{padding:2.5rem 0rem}.cio-results-container{margin-top:3rem}.cio-zero-results{margin-top:7rem}.cio-question-content{padding:5rem}}.cio-spinner{display:inline-block;position:relative;width:80px;margin:auto}.cio-spinner div{box-sizing:border-box;display:block;position:absolute;top:-35px;width:64px;height:64px;margin:4px;border:4px solid var(--primary-color);border-radius:50%;animation:cio-spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--primary-color) transparent transparent transparent}.cio-spinner div:nth-child(1){animation-delay:-.45s}.cio-spinner div:nth-child(2){animation-delay:-.3s}.cio-spinner div:nth-child(3){animation-delay:-.15s}@keyframes cio-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}')),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.id="cio-quizzes-styles",i.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap";.cio-quiz{--primary-color-h: 227;--primary-color-s: 70%;--primary-color-l: 46%;--primary-color-variant-100: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 10%), calc(var(--primary-color-l) + 25%) );--primary-color-variant-400: hsl( var(--primary-color-h), var(--primary-color-s), var(--primary-color-l) );--primary-color-variant-500: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 10%), calc(var(--primary-color-l) - 5%) );--primary-color-variant-600: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 15%), calc(var(--primary-color-l) - 10%) );--primary-color-variant-700: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 15%), calc(var(--primary-color-l) - 15%) );--primary-color-variant-800: hsl( var(--primary-color-h), calc(var(--primary-color-s) + 20%), calc(var(--primary-color-l) - 20%) );--primary-color: var(--primary-color-variant-400);--gray-dust-100: #92959c;--gray-dust-200: #74757b;--gray-dust-500: #46474a;--gray-dust-900: #2c2c2f;--bottom-bar-height: 80px;--container-image-small-height: 250px;container:quiz / inline-size}.cio-quiz,.cio-quiz *{box-sizing:border-box;font-family:Inter,sans-serif}.cio-quiz{position:relative;min-width:100%;min-height:100%;height:100%;overflow:auto;background-color:#fff;color:var(--gray-dust-500);font-size:16px}.cio-quiz.cio-quiz-loading{display:flex;justify-content:center}.cio-quiz button{cursor:pointer}.cio-quiz .cio-container{display:flex;justify-content:center;margin-top:2rem;padding-bottom:var(--bottom-bar-height);width:100%;position:relative;align-self:start;height:calc(100% - 2rem - var(--bottom-bar-height))}.cio-quiz .cio-container--with-image{display:flex;flex-direction:column;width:100%;padding-bottom:var(--bottom-bar-height);position:relative;align-self:start;height:calc(100% - var(--bottom-bar-height))}.cio-quiz .cio-question-background-image{height:calc(100% - 4px);width:100%;position:absolute;z-index:-1}.cio-quiz .cio-session-prompt-modal{position:absolute;display:flex;z-index:100;width:100%;height:100%;background-color:#00000080;justify-content:space-between}.cio-quiz .cio-session-prompt-container{margin:auto}.cio-quiz .cio-session-prompt-content{display:flex;flex-direction:column;gap:1rem;height:fit-content;margin:2rem;padding:2rem;border-radius:8px;background:#ffffff;line-height:1.5}.cio-quiz .cio-session-prompt-controls-container{display:flex;justify-content:space-between;gap:1rem}.cio-quiz .cio-session-prompt-content .cio-button-container{margin:0;padding:0}.cio-quiz .cio-session-prompt-controls-container .cio-button-container:nth-child(1) .cio-question-cta-button{color:var(--primary-color);background-color:#fff}.cio-quiz .cio-question-content{display:flex;flex-direction:column;padding:1rem}.cio-quiz .cio-question-title{font-size:2.125em;margin:0}.cio-quiz .cio-question-description{font-size:1em;line-height:1.5;margin-top:1.5rem}.cio-quiz .cio-question-image{width:100%;height:100%;object-fit:cover}.cio-quiz .cio-question-image-container{box-sizing:border-box;width:100%;object-fit:cover;max-height:var(--container-image-small-height);height:var(--container-image-small-height);display:flex;align-self:stretch}.cio-quiz .cio-question-input-text{width:100%;padding:.5rem;border:0;border-bottom:1px solid var(--gray-dust-100);color:var(--primary-color-variant-500);padding:.8rem;outline:none;font-size:1rem}.cio-quiz .cio-question-input-text:focus,.cio-quiz .cio-question-input-text:active{border-bottom:1px solid var(--primary-color-variant-500)}.cio-quiz .cio-question-input-text::placeholder{color:var(--gray-dust-100)}.cio-quiz .cio-question-buttons-container{width:100%;height:var(--bottom-bar-height);padding:8px 16px;display:flex;position:sticky;bottom:0px;left:0px;background:white;background-color:#ffffffde;align-items:center}.cio-quiz .cio-question-cta-button{background:var(--primary-color);color:#fff;border:2px solid var(--primary-color);border-radius:4px;height:3rem;font-size:1rem;flex-grow:1;margin-left:auto;width:100%}.cio-quiz .cio-button-container{max-width:10rem;flex-grow:1;margin-left:auto;padding-left:1rem}.cio-quiz .cio-question-cta-button:hover{background:var(--primary-color-variant-500);border:2px solid var(--primary-color-variant-600)}.cio-quiz .cio-question-cta-button:active{background:var(--primary-color-variant-700);border:2px solid var(--primary-color-variant-800)}.cio-quiz .cio-question-cta-button:focus{outline:3px solid var(--primary-color-variant-100)}.cio-quiz .cio-question-cta-button:disabled,.cio-quiz .cio-question-cta-button.disabled{background:var(--gray-dust-200);border:2px solid var(--gray-dust-200);cursor:auto;outline:none}.cio-quiz .cio-question-back-button{color:var(--primary-color);background:#ffffff;border:1px solid var(--primary-color);border-radius:4px;height:3rem;width:3rem;font-size:1rem;margin-right:4rem}.cio-quiz .cio-question-back-button:hover{border:2px solid var(--primary-color-variant-600)}.cio-quiz .cio-question-back-button:active{border:2px solid var(--primary-color-variant-700)}.cio-quiz .cio-question-back-button:focus{outline:3px solid var(--primary-color-variant-100)}.cio-quiz .cio-question-back-button.disabled{display:none}.cio-quiz .cio-question-back-button svg{display:inline}.cio-quiz .cio-cover-question-container--with-image{padding:0;padding-bottom:var(--bottom-bar-height)}.cio-quiz .cio-question-option-container{padding:1.5rem;border-radius:8px;border:1px solid var(--primary-color-variant-100);box-shadow:0 4px 10px #5d7ce826;width:calc(50% - 10px);display:flex;flex-direction:column;cursor:pointer;background-color:#fff}.cio-quiz .cio-question-option-container.selected,.cio-quiz .cio-question-option-container-text-only.selected{outline:3px solid var(--primary-color-variant-600);box-shadow:0 4px 10px #5d7ce859}.cio-quiz .cio-question-option-container:hover:not(.selected){outline:1px solid var(--primary-color-variant-600);box-shadow:0 4px 10px #5d7ce840}.cio-quiz .cio-question-option-container-text-only:hover:not(.selected){outline:1px solid var(--primary-color-variant-600);box-shadow:0 4px 10px #5d7ce840}.cio-quiz .cio-select-question-container{position:relative;display:flex;flex-direction:column;align-items:center;max-width:1200px;padding:1rem;margin-top:2rem;min-height:calc(100% - 2rem - var(--bottom-bar-height));width:100%;margin-right:auto;margin-left:auto}.cio-quiz .cio-question-options-container{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;width:100%;margin-bottom:var(--bottom-bar-height);margin-top:2rem}.cio-quiz .cio-question-options-container-text-only{display:flex;flex-direction:column;gap:1rem;width:100%;padding:10px;margin-bottom:var(--bottom-bar-height);margin-top:2rem}.cio-quiz .cio-question-option-container-text-only{padding:1.5rem;border-radius:8px;border:1px solid var(--primary-color-variant-100);box-shadow:0 4px 10px #5d7ce826;display:flex;flex-direction:column;width:100%;margin:auto;cursor:pointer;background-color:#fff}.cio-quiz .cio-question-option-image{width:100%;height:auto;border-radius:4px;object-fit:cover;margin-bottom:16px;aspect-ratio:1/1}.cio-quiz .cio-question-option-value{text-align:center;margin:auto 0}.cio-quiz .cio-select-question-text{width:100%;display:flex;flex-direction:column;justify-content:space-between}.cio-quiz .cio-select-question-text .cio-question-description{margin-bottom:0}.cio-quiz .cio-select-question-instructions{text-align:center;font-size:1.125rem;color:var(--gray-dust-100);line-height:150%;margin-top:2.75rem;margin-bottom:-1rem}.cio-quiz .cio-results-container{width:100%;max-width:1200px;padding:2rem 1rem;display:flex;flex-direction:column;margin-right:auto;margin-left:auto}.cio-quiz .cio-results-title{margin-top:0;margin-bottom:1rem;color:var(--gray-dust-500)}.cio-quiz .cio-results-filter-container{margin-bottom:1.5rem}.cio-quiz .cio-results-filter-container p{color:var(--gray-dust-500);margin-bottom:1.5rem}.cio-quiz .cio-results-filter-options{display:flex;flex-wrap:wrap;gap:.5rem;cursor:default}.cio-quiz .cio-results-filter-option{background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color-variant-500);border-radius:10000px;padding:.4rem 1.25rem;display:flex;justify-content:center;align-items:center;font-size:.75rem}.cio-quiz .cio-results{display:flex;flex-direction:row;flex-wrap:wrap}.cio-quiz .cio-zero-results{margin-top:2rem;text-align:center;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin-left:auto;margin-right:auto}.cio-quiz .cio-zero-results-subtitle{font-weight:500;font-size:1.25rem;line-height:1.5rem;margin-bottom:2rem;color:var(--gray-dust-500);margin-top:0}.cio-quiz .cio-zero-results .cio-button-container{width:14rem;margin-right:auto;margin-left:auto;padding-left:0}.cio-quiz .cio-result-card{background-color:transparent;height:auto;box-sizing:border-box;text-decoration:none;margin:0;margin-bottom:1.5rem;flex-basis:100%;display:flex;flex-direction:column}.cio-quiz .cio-result-card-anchor,.cio-quiz .cio-result-card-container{text-decoration:none;background-color:transparent;color:inherit;height:100%;display:flex;flex-direction:column;justify-content:space-between}.cio-quiz .cio-result-card-image{width:auto;height:240px;margin-left:auto;margin-right:auto;margin-bottom:10px}.cio-quiz .cio-result-card-image img{height:100%;width:100%;object-fit:contain}.cio-quiz .cio-result-card-text{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}.cio-quiz .cio-result-card-title{color:var(--gray-dust-500);margin:0;margin-bottom:1rem;font-weight:700}.cio-quiz .cio-result-card-prices{margin-bottom:1rem;font-weight:700}.cio-quiz .cio-result-card-sale-price{color:#bf1728;margin-right:.75rem}.cio-quiz .cio-result-card-regular-price{color:var(--gray-dust-900)}.cio-quiz .cio-result-card-regular-price--strike-through{text-decoration:line-through}.cio-quiz .cio-result-card-rating{margin-bottom:10px}.cio-quiz .cio-result-card-rating-score{margin-right:5px}.cio-quiz .cio-result-card-favorites-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;width:25px;margin-left:auto;margin-bottom:1rem}.cio-quiz .cio-result-card-favorites-button.favorited svg{fill:red}.cio-quiz .cio-result-card-favorites-button svg:hover{stroke:#000;stroke-width:1px}.cio-quiz .cio-result-card-cta-button{padding:.75rem 2.5rem;height:3rem;background:var(--primary-color);border:2px solid var(--primary-color);border-radius:4px;color:#fff;font-size:1rem;width:100%}.cio-quiz .cio-result-card-cta-button:hover{background:var(--primary-color-variant-500);border:2px solid var(--primary-color-variant-600)}.cio-quiz .cio-result-card-cta-button:active{background:var(--primary-color-variant-700);border:2px solid var(--primary-color-variant-800)}.cio-quiz .cio-result-card-cta-button:focus{outline:3px solid var(--primary-color-variant-100)}.cio-quiz .cio-result-card-cta-button:disabled,.cio-quiz .cio-result-card-cta-button.disabled{background:var(--gray-dust-200);border:2px solid var(--gray-dust-200)}.cio-quiz .cio-question-redo-button{background:none;border:none;display:flex;gap:.5rem;align-items:center}.cio-quiz .cio-question-redo-button:hover{text-decoration:underline}.cio-quiz .cio-question-redo-button span{margin-top:1px}@container quiz (min-width: 640px){.cio-quiz .cio-container{padding-bottom:0;align-self:normal}.cio-quiz .cio-container--with-image{display:flex;align-items:center;margin-bottom:0;padding-bottom:0;align-self:normal}.cio-quiz .cio-question-image-container{flex-basis:50%;flex-shrink:0;border-radius:4px}.cio-quiz .cio-cover-question-container--with-image{margin-bottom:0;padding-bottom:0}.cio-quiz .cio-select-question-text{margin-top:2rem}.cio-quiz .cio-select-question-buttons{padding:1rem 3rem}.cio-quiz .cio-results-container{padding:3rem 4rem}.cio-quiz .cio-results-filter-and-redo-container{display:flex;justify-content:space-between;align-items:end;margin-bottom:1.5rem}.cio-quiz .cio-results-filter-container{margin-bottom:0}.cio-quiz .cio-results{column-gap:5%}.cio-quiz .cio-result-card{flex-basis:30%}}@container quiz (min-width: 768px){.cio-quiz .cio-container{align-items:center;margin-top:0;height:calc(100% - var(--bottom-bar-height))}.cio-quiz .cio-container--with-image{padding:6% 2%;align-items:center;flex-direction:row;justify-content:center}.cio-quiz .cio-cover-question-container--with-image{flex-direction:row-reverse}.cio-quiz .cio-question-input-text{margin-bottom:1rem}.cio-quiz .cio-question-image-container{max-height:unset;height:unset}.cio-quiz .cio-question-content{justify-content:center;height:fit-content;flex-basis:70%;flex-shrink:1;margin:0 auto;padding:3rem}.cio-quiz .cio-question-description{margin-bottom:2rem}.cio-quiz .cio-cover-question-container--with-image{padding:0}.cio-quiz .cio-select-question-text{padding:0;padding-bottom:2rem;margin:0}.cio-quiz .cio-select-question-buttons{padding:1rem 5rem}.cio-quiz .cio-select-question-container{justify-content:center;margin-bottom:0;margin-top:0;padding:2rem;padding-bottom:0;min-height:calc(100% - var(--bottom-bar-height))}.cio-quiz .cio-question-option-container{width:calc(25% - 13px)}.cio-quiz .cio-question-options-container{padding:0;margin-bottom:2rem}.cio-quiz .cio-question-options-container-text-only{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-bottom:2rem;margin-top:0}.cio-quiz .cio-question-option-container-text-only{margin:0;width:30%}}@container quiz (min-width: 1280px){.cio-quiz .cio-quiz .cio-cover-question-container--with-image{padding:0}.cio-quiz .cio-question-option-container-text-only{width:30%}.cio-quiz .cio-select-question-container{margin-bottom:0}.cio-quiz .cio-select-question-text{padding:2.5rem 0rem}.cio-quiz .cio-results-container{margin-top:3rem}.cio-quiz .cio-zero-results{margin-top:7rem}.cio-quiz .cio-question-content{padding:5rem}}.cio-quiz .cio-spinner{display:inline-block;position:relative;width:80px;margin:auto}.cio-quiz .cio-spinner div{box-sizing:border-box;display:block;position:absolute;top:-35px;width:64px;height:64px;margin:4px;border:4px solid var(--primary-color);border-radius:50%;animation:cio-spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--primary-color) transparent transparent transparent}.cio-quiz .cio-spinner div:nth-child(1){animation-delay:-.45s}.cio-quiz .cio-spinner div:nth-child(2){animation-delay:-.3s}.cio-quiz .cio-spinner div:nth-child(3){animation-delay:-.15s}@keyframes cio-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}')),document.head.appendChild(i)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
2
2
|
var It=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function ed(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var D={},td={get exports(){return D},set exports(e){D=e}},K={};/**
|
|
3
3
|
* @license React
|
|
4
4
|
* react.production.min.js
|
package/lib/styles.css
CHANGED
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
/* Container */
|
|
76
|
-
.cio-container {
|
|
76
|
+
.cio-quiz .cio-container {
|
|
77
77
|
display: flex;
|
|
78
78
|
justify-content: center;
|
|
79
79
|
margin-top: 2rem;
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
align-self: start;
|
|
84
84
|
height: calc(100% - 2rem - var(--bottom-bar-height)); /* Full height - margin - control bar */
|
|
85
85
|
}
|
|
86
|
-
.cio-container--with-image {
|
|
86
|
+
.cio-quiz .cio-container--with-image {
|
|
87
87
|
display: flex;
|
|
88
88
|
flex-direction: column;
|
|
89
89
|
width: 100%;
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
/* Background image */
|
|
97
|
-
.cio-question-background-image {
|
|
97
|
+
.cio-quiz .cio-question-background-image {
|
|
98
98
|
height: calc(100% - 4px);
|
|
99
99
|
width: 100%;
|
|
100
100
|
position: absolute;
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
/* Session Prompt Modal */
|
|
105
|
-
.cio-session-prompt-modal {
|
|
105
|
+
.cio-quiz .cio-session-prompt-modal {
|
|
106
106
|
position: absolute;
|
|
107
107
|
display: flex;
|
|
108
108
|
z-index: 100;
|
|
@@ -112,11 +112,11 @@
|
|
|
112
112
|
justify-content: space-between;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
.cio-session-prompt-container {
|
|
115
|
+
.cio-quiz .cio-session-prompt-container {
|
|
116
116
|
margin: auto;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
.cio-session-prompt-content {
|
|
119
|
+
.cio-quiz .cio-session-prompt-content {
|
|
120
120
|
display: flex;
|
|
121
121
|
flex-direction: column;
|
|
122
122
|
gap: 1rem;
|
|
@@ -128,49 +128,52 @@
|
|
|
128
128
|
line-height: 1.5;
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
.cio-session-prompt-controls-container {
|
|
131
|
+
.cio-quiz .cio-session-prompt-controls-container {
|
|
132
132
|
display: flex;
|
|
133
133
|
justify-content: space-between;
|
|
134
134
|
gap: 1rem;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
.cio-session-prompt-content .cio-button-container {
|
|
137
|
+
.cio-quiz .cio-session-prompt-content .cio-button-container {
|
|
138
138
|
margin: 0px;
|
|
139
139
|
padding: 0px;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
-
.cio-
|
|
142
|
+
.cio-quiz
|
|
143
|
+
.cio-session-prompt-controls-container
|
|
144
|
+
.cio-button-container:nth-child(1)
|
|
145
|
+
.cio-question-cta-button {
|
|
143
146
|
color: var(--primary-color);
|
|
144
147
|
background-color: #ffffff;
|
|
145
148
|
}
|
|
146
149
|
|
|
147
150
|
/* Content */
|
|
148
|
-
.cio-question-content {
|
|
151
|
+
.cio-quiz .cio-question-content {
|
|
149
152
|
display: flex;
|
|
150
153
|
flex-direction: column;
|
|
151
154
|
padding: 1rem;
|
|
152
155
|
}
|
|
153
156
|
|
|
154
157
|
/* Title */
|
|
155
|
-
.cio-question-title {
|
|
158
|
+
.cio-quiz .cio-question-title {
|
|
156
159
|
font-size: 2.125em;
|
|
157
160
|
margin: 0;
|
|
158
161
|
}
|
|
159
162
|
|
|
160
163
|
/* Description */
|
|
161
|
-
.cio-question-description {
|
|
164
|
+
.cio-quiz .cio-question-description {
|
|
162
165
|
font-size: 1em;
|
|
163
166
|
line-height: 1.5;
|
|
164
167
|
margin-top: 1.5rem;
|
|
165
168
|
}
|
|
166
169
|
|
|
167
170
|
/* Image */
|
|
168
|
-
.cio-question-image {
|
|
171
|
+
.cio-quiz .cio-question-image {
|
|
169
172
|
width: 100%;
|
|
170
173
|
height: 100%;
|
|
171
174
|
object-fit: cover;
|
|
172
175
|
}
|
|
173
|
-
.cio-question-image-container {
|
|
176
|
+
.cio-quiz .cio-question-image-container {
|
|
174
177
|
box-sizing: border-box;
|
|
175
178
|
width: 100%;
|
|
176
179
|
object-fit: cover;
|
|
@@ -181,7 +184,7 @@
|
|
|
181
184
|
}
|
|
182
185
|
|
|
183
186
|
/* Input */
|
|
184
|
-
.cio-question-input-text {
|
|
187
|
+
.cio-quiz .cio-question-input-text {
|
|
185
188
|
width: 100%;
|
|
186
189
|
padding: 0.5rem;
|
|
187
190
|
border: 0;
|
|
@@ -191,16 +194,16 @@
|
|
|
191
194
|
outline: none;
|
|
192
195
|
font-size: 1rem;
|
|
193
196
|
}
|
|
194
|
-
.cio-question-input-text:focus,
|
|
195
|
-
.cio-question-input-text:active {
|
|
197
|
+
.cio-quiz .cio-question-input-text:focus,
|
|
198
|
+
.cio-quiz .cio-question-input-text:active {
|
|
196
199
|
border-bottom: 1px solid var(--primary-color-variant-500);
|
|
197
200
|
}
|
|
198
|
-
.cio-question-input-text::placeholder {
|
|
201
|
+
.cio-quiz .cio-question-input-text::placeholder {
|
|
199
202
|
color: var(--gray-dust-100);
|
|
200
203
|
}
|
|
201
204
|
|
|
202
205
|
/* CTA Button Component */
|
|
203
|
-
.cio-question-buttons-container {
|
|
206
|
+
.cio-quiz .cio-question-buttons-container {
|
|
204
207
|
width: 100%;
|
|
205
208
|
height: var(--bottom-bar-height);
|
|
206
209
|
padding: 8px 16px;
|
|
@@ -212,7 +215,7 @@
|
|
|
212
215
|
background-color: rgba(255, 255, 255, 0.87);
|
|
213
216
|
align-items: center;
|
|
214
217
|
}
|
|
215
|
-
.cio-question-cta-button {
|
|
218
|
+
.cio-quiz .cio-question-cta-button {
|
|
216
219
|
background: var(--primary-color);
|
|
217
220
|
color: #ffffff;
|
|
218
221
|
border: 2px solid var(--primary-color);
|
|
@@ -223,25 +226,25 @@
|
|
|
223
226
|
margin-left: auto;
|
|
224
227
|
width: 100%;
|
|
225
228
|
}
|
|
226
|
-
.cio-button-container {
|
|
229
|
+
.cio-quiz .cio-button-container {
|
|
227
230
|
max-width: 10rem;
|
|
228
231
|
flex-grow: 1;
|
|
229
232
|
margin-left: auto;
|
|
230
233
|
padding-left: 1rem;
|
|
231
234
|
}
|
|
232
|
-
.cio-question-cta-button:hover {
|
|
235
|
+
.cio-quiz .cio-question-cta-button:hover {
|
|
233
236
|
background: var(--primary-color-variant-500);
|
|
234
237
|
border: 2px solid var(--primary-color-variant-600);
|
|
235
238
|
}
|
|
236
|
-
.cio-question-cta-button:active {
|
|
239
|
+
.cio-quiz .cio-question-cta-button:active {
|
|
237
240
|
background: var(--primary-color-variant-700);
|
|
238
241
|
border: 2px solid var(--primary-color-variant-800);
|
|
239
242
|
}
|
|
240
|
-
.cio-question-cta-button:focus {
|
|
243
|
+
.cio-quiz .cio-question-cta-button:focus {
|
|
241
244
|
outline: 3px solid var(--primary-color-variant-100);
|
|
242
245
|
}
|
|
243
|
-
.cio-question-cta-button:disabled,
|
|
244
|
-
.cio-question-cta-button.disabled {
|
|
246
|
+
.cio-quiz .cio-question-cta-button:disabled,
|
|
247
|
+
.cio-quiz .cio-question-cta-button.disabled {
|
|
245
248
|
background: var(--gray-dust-200);
|
|
246
249
|
border: 2px solid var(--gray-dust-200);
|
|
247
250
|
cursor: auto;
|
|
@@ -249,7 +252,7 @@
|
|
|
249
252
|
}
|
|
250
253
|
|
|
251
254
|
/* Back Button Component */
|
|
252
|
-
.cio-question-back-button {
|
|
255
|
+
.cio-quiz .cio-question-back-button {
|
|
253
256
|
color: var(--primary-color);
|
|
254
257
|
background: #ffffff;
|
|
255
258
|
border: 1px solid var(--primary-color);
|
|
@@ -259,32 +262,32 @@
|
|
|
259
262
|
font-size: 1rem;
|
|
260
263
|
margin-right: 4rem;
|
|
261
264
|
}
|
|
262
|
-
.cio-question-back-button:hover {
|
|
265
|
+
.cio-quiz .cio-question-back-button:hover {
|
|
263
266
|
border: 2px solid var(--primary-color-variant-600);
|
|
264
267
|
}
|
|
265
|
-
.cio-question-back-button:active {
|
|
268
|
+
.cio-quiz .cio-question-back-button:active {
|
|
266
269
|
border: 2px solid var(--primary-color-variant-700);
|
|
267
270
|
}
|
|
268
|
-
.cio-question-back-button:focus {
|
|
271
|
+
.cio-quiz .cio-question-back-button:focus {
|
|
269
272
|
outline: 3px solid var(--primary-color-variant-100);
|
|
270
273
|
}
|
|
271
|
-
.cio-question-back-button.disabled {
|
|
274
|
+
.cio-quiz .cio-question-back-button.disabled {
|
|
272
275
|
display: none;
|
|
273
276
|
}
|
|
274
277
|
|
|
275
|
-
.cio-question-back-button svg {
|
|
278
|
+
.cio-quiz .cio-question-back-button svg {
|
|
276
279
|
display: inline;
|
|
277
280
|
}
|
|
278
281
|
|
|
279
282
|
/* Cover Page Component */
|
|
280
|
-
.cio-cover-question-container--with-image {
|
|
283
|
+
.cio-quiz .cio-cover-question-container--with-image {
|
|
281
284
|
padding: 0;
|
|
282
285
|
padding-bottom: var(--bottom-bar-height);
|
|
283
286
|
}
|
|
284
287
|
|
|
285
288
|
/** Select Component */
|
|
286
289
|
/* Options */
|
|
287
|
-
.cio-question-option-container {
|
|
290
|
+
.cio-quiz .cio-question-option-container {
|
|
288
291
|
padding: 1.5rem;
|
|
289
292
|
border-radius: 8px;
|
|
290
293
|
border: 1px solid var(--primary-color-variant-100);
|
|
@@ -295,23 +298,23 @@
|
|
|
295
298
|
cursor: pointer;
|
|
296
299
|
background-color: white;
|
|
297
300
|
}
|
|
298
|
-
.cio-question-option-container.selected {
|
|
301
|
+
.cio-quiz .cio-question-option-container.selected {
|
|
299
302
|
outline: 3px solid var(--primary-color-variant-600);
|
|
300
303
|
box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.35);
|
|
301
304
|
}
|
|
302
|
-
.cio-question-option-container-text-only.selected {
|
|
305
|
+
.cio-quiz .cio-question-option-container-text-only.selected {
|
|
303
306
|
outline: 3px solid var(--primary-color-variant-600);
|
|
304
307
|
box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.35);
|
|
305
308
|
}
|
|
306
|
-
.cio-question-option-container:hover:not(.selected) {
|
|
309
|
+
.cio-quiz .cio-question-option-container:hover:not(.selected) {
|
|
307
310
|
outline: 1px solid var(--primary-color-variant-600);
|
|
308
311
|
box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.25);
|
|
309
312
|
}
|
|
310
|
-
.cio-question-option-container-text-only:hover:not(.selected) {
|
|
313
|
+
.cio-quiz .cio-question-option-container-text-only:hover:not(.selected) {
|
|
311
314
|
outline: 1px solid var(--primary-color-variant-600);
|
|
312
315
|
box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.25);
|
|
313
316
|
}
|
|
314
|
-
.cio-select-question-container {
|
|
317
|
+
.cio-quiz .cio-select-question-container {
|
|
315
318
|
position: relative;
|
|
316
319
|
display: flex;
|
|
317
320
|
flex-direction: column;
|
|
@@ -324,7 +327,7 @@
|
|
|
324
327
|
margin-right: auto;
|
|
325
328
|
margin-left: auto;
|
|
326
329
|
}
|
|
327
|
-
.cio-question-options-container {
|
|
330
|
+
.cio-quiz .cio-question-options-container {
|
|
328
331
|
display: flex;
|
|
329
332
|
justify-content: center;
|
|
330
333
|
flex-wrap: wrap;
|
|
@@ -333,7 +336,7 @@
|
|
|
333
336
|
margin-bottom: var(--bottom-bar-height);
|
|
334
337
|
margin-top: 2rem;
|
|
335
338
|
}
|
|
336
|
-
.cio-question-options-container-text-only {
|
|
339
|
+
.cio-quiz .cio-question-options-container-text-only {
|
|
337
340
|
display: flex;
|
|
338
341
|
flex-direction: column;
|
|
339
342
|
gap: 1rem;
|
|
@@ -342,7 +345,7 @@
|
|
|
342
345
|
margin-bottom: var(--bottom-bar-height);
|
|
343
346
|
margin-top: 2rem;
|
|
344
347
|
}
|
|
345
|
-
.cio-question-option-container-text-only {
|
|
348
|
+
.cio-quiz .cio-question-option-container-text-only {
|
|
346
349
|
padding: 1.5rem;
|
|
347
350
|
border-radius: 8px;
|
|
348
351
|
border: 1px solid var(--primary-color-variant-100);
|
|
@@ -356,7 +359,7 @@
|
|
|
356
359
|
}
|
|
357
360
|
|
|
358
361
|
/* Option Image */
|
|
359
|
-
.cio-question-option-image {
|
|
362
|
+
.cio-quiz .cio-question-option-image {
|
|
360
363
|
width: 100%;
|
|
361
364
|
height: auto;
|
|
362
365
|
border-radius: 4px;
|
|
@@ -366,24 +369,24 @@
|
|
|
366
369
|
}
|
|
367
370
|
|
|
368
371
|
/* Select Option Value */
|
|
369
|
-
.cio-question-option-value {
|
|
372
|
+
.cio-quiz .cio-question-option-value {
|
|
370
373
|
text-align: center;
|
|
371
374
|
margin: auto 0;
|
|
372
375
|
}
|
|
373
376
|
|
|
374
377
|
/* Select Text and Description */
|
|
375
|
-
.cio-select-question-text {
|
|
378
|
+
.cio-quiz .cio-select-question-text {
|
|
376
379
|
width: 100%;
|
|
377
380
|
display: flex;
|
|
378
381
|
flex-direction: column;
|
|
379
382
|
justify-content: space-between;
|
|
380
383
|
}
|
|
381
|
-
.cio-select-question-text .cio-question-description {
|
|
384
|
+
.cio-quiz .cio-select-question-text .cio-question-description {
|
|
382
385
|
margin-bottom: 0;
|
|
383
386
|
}
|
|
384
387
|
|
|
385
388
|
/* Select Instructions */
|
|
386
|
-
.cio-select-question-instructions {
|
|
389
|
+
.cio-quiz .cio-select-question-instructions {
|
|
387
390
|
text-align: center;
|
|
388
391
|
font-size: 1.125rem;
|
|
389
392
|
color: var(--gray-dust-100);
|
|
@@ -393,7 +396,7 @@
|
|
|
393
396
|
}
|
|
394
397
|
|
|
395
398
|
/* Results component */
|
|
396
|
-
.cio-results-container {
|
|
399
|
+
.cio-quiz .cio-results-container {
|
|
397
400
|
width: 100%;
|
|
398
401
|
max-width: 1200px;
|
|
399
402
|
padding: 2rem 1rem;
|
|
@@ -402,25 +405,25 @@
|
|
|
402
405
|
margin-right: auto;
|
|
403
406
|
margin-left: auto;
|
|
404
407
|
}
|
|
405
|
-
.cio-results-title {
|
|
408
|
+
.cio-quiz .cio-results-title {
|
|
406
409
|
margin-top: 0;
|
|
407
410
|
margin-bottom: 1rem;
|
|
408
411
|
color: var(--gray-dust-500);
|
|
409
412
|
}
|
|
410
|
-
.cio-results-filter-container {
|
|
413
|
+
.cio-quiz .cio-results-filter-container {
|
|
411
414
|
margin-bottom: 1.5rem;
|
|
412
415
|
}
|
|
413
|
-
.cio-results-filter-container p {
|
|
416
|
+
.cio-quiz .cio-results-filter-container p {
|
|
414
417
|
color: var(--gray-dust-500);
|
|
415
418
|
margin-bottom: 1.5rem;
|
|
416
419
|
}
|
|
417
|
-
.cio-results-filter-options {
|
|
420
|
+
.cio-quiz .cio-results-filter-options {
|
|
418
421
|
display: flex;
|
|
419
422
|
flex-wrap: wrap;
|
|
420
423
|
gap: 0.5rem;
|
|
421
424
|
cursor: default;
|
|
422
425
|
}
|
|
423
|
-
.cio-results-filter-option {
|
|
426
|
+
.cio-quiz .cio-results-filter-option {
|
|
424
427
|
background-color: #ffffff;
|
|
425
428
|
border: 1px solid var(--primary-color);
|
|
426
429
|
color: var(--primary-color-variant-500);
|
|
@@ -431,12 +434,12 @@
|
|
|
431
434
|
align-items: center;
|
|
432
435
|
font-size: 0.75rem;
|
|
433
436
|
}
|
|
434
|
-
.cio-results {
|
|
437
|
+
.cio-quiz .cio-results {
|
|
435
438
|
display: flex;
|
|
436
439
|
flex-direction: row;
|
|
437
440
|
flex-wrap: wrap;
|
|
438
441
|
}
|
|
439
|
-
.cio-zero-results {
|
|
442
|
+
.cio-quiz .cio-zero-results {
|
|
440
443
|
margin-top: 2rem;
|
|
441
444
|
text-align: center;
|
|
442
445
|
display: flex;
|
|
@@ -446,7 +449,7 @@
|
|
|
446
449
|
margin-left: auto;
|
|
447
450
|
margin-right: auto;
|
|
448
451
|
}
|
|
449
|
-
.cio-zero-results-subtitle {
|
|
452
|
+
.cio-quiz .cio-zero-results-subtitle {
|
|
450
453
|
font-weight: 500;
|
|
451
454
|
font-size: 1.25rem;
|
|
452
455
|
line-height: 1.5rem;
|
|
@@ -454,7 +457,7 @@
|
|
|
454
457
|
color: var(--gray-dust-500);
|
|
455
458
|
margin-top: 0;
|
|
456
459
|
}
|
|
457
|
-
.cio-zero-results .cio-button-container {
|
|
460
|
+
.cio-quiz .cio-zero-results .cio-button-container {
|
|
458
461
|
width: 14rem;
|
|
459
462
|
margin-right: auto;
|
|
460
463
|
margin-left: auto;
|
|
@@ -462,7 +465,7 @@
|
|
|
462
465
|
}
|
|
463
466
|
|
|
464
467
|
/* Result Card component */
|
|
465
|
-
.cio-result-card {
|
|
468
|
+
.cio-quiz .cio-result-card {
|
|
466
469
|
background-color: transparent;
|
|
467
470
|
height: auto;
|
|
468
471
|
box-sizing: border-box;
|
|
@@ -473,8 +476,8 @@
|
|
|
473
476
|
display: flex;
|
|
474
477
|
flex-direction: column;
|
|
475
478
|
}
|
|
476
|
-
.cio-result-card-anchor,
|
|
477
|
-
.cio-result-card-container {
|
|
479
|
+
.cio-quiz .cio-result-card-anchor,
|
|
480
|
+
.cio-quiz .cio-result-card-container {
|
|
478
481
|
text-decoration: none;
|
|
479
482
|
background-color: transparent;
|
|
480
483
|
color: inherit;
|
|
@@ -483,54 +486,54 @@
|
|
|
483
486
|
flex-direction: column;
|
|
484
487
|
justify-content: space-between;
|
|
485
488
|
}
|
|
486
|
-
.cio-result-card-image {
|
|
489
|
+
.cio-quiz .cio-result-card-image {
|
|
487
490
|
width: auto;
|
|
488
491
|
height: 240px;
|
|
489
492
|
margin-left: auto;
|
|
490
493
|
margin-right: auto;
|
|
491
494
|
margin-bottom: 10px;
|
|
492
495
|
}
|
|
493
|
-
.cio-result-card-image img {
|
|
496
|
+
.cio-quiz .cio-result-card-image img {
|
|
494
497
|
height: 100%;
|
|
495
498
|
width: 100%;
|
|
496
499
|
object-fit: contain;
|
|
497
500
|
}
|
|
498
|
-
.cio-result-card-text {
|
|
501
|
+
.cio-quiz .cio-result-card-text {
|
|
499
502
|
flex-grow: 1;
|
|
500
503
|
display: flex;
|
|
501
504
|
flex-direction: column;
|
|
502
505
|
justify-content: space-between;
|
|
503
506
|
text-decoration: none;
|
|
504
507
|
}
|
|
505
|
-
.cio-result-card-title {
|
|
508
|
+
.cio-quiz .cio-result-card-title {
|
|
506
509
|
color: var(--gray-dust-500);
|
|
507
510
|
margin: 0;
|
|
508
511
|
margin-bottom: 1rem;
|
|
509
512
|
font-weight: 700;
|
|
510
513
|
}
|
|
511
|
-
.cio-result-card-prices {
|
|
514
|
+
.cio-quiz .cio-result-card-prices {
|
|
512
515
|
margin-bottom: 1rem;
|
|
513
516
|
font-weight: 700;
|
|
514
517
|
}
|
|
515
|
-
.cio-result-card-sale-price {
|
|
518
|
+
.cio-quiz .cio-result-card-sale-price {
|
|
516
519
|
color: #bf1728;
|
|
517
520
|
margin-right: 0.75rem;
|
|
518
521
|
}
|
|
519
|
-
.cio-result-card-regular-price {
|
|
522
|
+
.cio-quiz .cio-result-card-regular-price {
|
|
520
523
|
color: var(--gray-dust-900);
|
|
521
524
|
}
|
|
522
|
-
.cio-result-card-regular-price--strike-through {
|
|
525
|
+
.cio-quiz .cio-result-card-regular-price--strike-through {
|
|
523
526
|
text-decoration: line-through;
|
|
524
527
|
}
|
|
525
|
-
.cio-result-card-rating {
|
|
528
|
+
.cio-quiz .cio-result-card-rating {
|
|
526
529
|
margin-bottom: 10px;
|
|
527
530
|
}
|
|
528
|
-
.cio-result-card-rating-score {
|
|
531
|
+
.cio-quiz .cio-result-card-rating-score {
|
|
529
532
|
margin-right: 5px;
|
|
530
533
|
}
|
|
531
534
|
|
|
532
535
|
/* Result Favorites Button*/
|
|
533
|
-
.cio-result-card-favorites-button {
|
|
536
|
+
.cio-quiz .cio-result-card-favorites-button {
|
|
534
537
|
background: none;
|
|
535
538
|
color: inherit;
|
|
536
539
|
border: none;
|
|
@@ -543,17 +546,17 @@
|
|
|
543
546
|
margin-bottom: 1rem;
|
|
544
547
|
}
|
|
545
548
|
|
|
546
|
-
.cio-result-card-favorites-button.favorited svg{
|
|
549
|
+
.cio-quiz .cio-result-card-favorites-button.favorited svg {
|
|
547
550
|
fill: red;
|
|
548
551
|
}
|
|
549
552
|
|
|
550
|
-
.cio-result-card-favorites-button svg:hover {
|
|
553
|
+
.cio-quiz .cio-result-card-favorites-button svg:hover {
|
|
551
554
|
stroke: black;
|
|
552
555
|
stroke-width: 1px;
|
|
553
556
|
}
|
|
554
557
|
|
|
555
558
|
/* Result CTA Button */
|
|
556
|
-
.cio-result-card-cta-button {
|
|
559
|
+
.cio-quiz .cio-result-card-cta-button {
|
|
557
560
|
padding: 0.75rem 2.5rem;
|
|
558
561
|
height: 3rem;
|
|
559
562
|
background: var(--primary-color);
|
|
@@ -563,35 +566,35 @@
|
|
|
563
566
|
font-size: 1rem;
|
|
564
567
|
width: 100%;
|
|
565
568
|
}
|
|
566
|
-
.cio-result-card-cta-button:hover {
|
|
569
|
+
.cio-quiz .cio-result-card-cta-button:hover {
|
|
567
570
|
background: var(--primary-color-variant-500);
|
|
568
571
|
border: 2px solid var(--primary-color-variant-600);
|
|
569
572
|
}
|
|
570
|
-
.cio-result-card-cta-button:active {
|
|
573
|
+
.cio-quiz .cio-result-card-cta-button:active {
|
|
571
574
|
background: var(--primary-color-variant-700);
|
|
572
575
|
border: 2px solid var(--primary-color-variant-800);
|
|
573
576
|
}
|
|
574
|
-
.cio-result-card-cta-button:focus {
|
|
577
|
+
.cio-quiz .cio-result-card-cta-button:focus {
|
|
575
578
|
outline: 3px solid var(--primary-color-variant-100);
|
|
576
579
|
}
|
|
577
|
-
.cio-result-card-cta-button:disabled,
|
|
578
|
-
.cio-result-card-cta-button.disabled {
|
|
580
|
+
.cio-quiz .cio-result-card-cta-button:disabled,
|
|
581
|
+
.cio-quiz .cio-result-card-cta-button.disabled {
|
|
579
582
|
background: var(--gray-dust-200);
|
|
580
583
|
border: 2px solid var(--gray-dust-200);
|
|
581
584
|
}
|
|
582
585
|
|
|
583
586
|
/* Redo Button Component */
|
|
584
|
-
.cio-question-redo-button {
|
|
587
|
+
.cio-quiz .cio-question-redo-button {
|
|
585
588
|
background: none;
|
|
586
589
|
border: none;
|
|
587
590
|
display: flex;
|
|
588
591
|
gap: 0.5rem;
|
|
589
592
|
align-items: center;
|
|
590
593
|
}
|
|
591
|
-
.cio-question-redo-button:hover {
|
|
594
|
+
.cio-quiz .cio-question-redo-button:hover {
|
|
592
595
|
text-decoration: underline;
|
|
593
596
|
}
|
|
594
|
-
.cio-question-redo-button span {
|
|
597
|
+
.cio-quiz .cio-question-redo-button span {
|
|
595
598
|
margin-top: 1px;
|
|
596
599
|
}
|
|
597
600
|
|
|
@@ -599,13 +602,13 @@
|
|
|
599
602
|
|
|
600
603
|
/* Small Tablet */
|
|
601
604
|
@container quiz (min-width: 640px) {
|
|
602
|
-
.cio-container {
|
|
605
|
+
.cio-quiz .cio-container {
|
|
603
606
|
padding-bottom: 0;
|
|
604
607
|
align-self: normal;
|
|
605
608
|
}
|
|
606
609
|
|
|
607
610
|
/* Container */
|
|
608
|
-
.cio-container--with-image {
|
|
611
|
+
.cio-quiz .cio-container--with-image {
|
|
609
612
|
display: flex;
|
|
610
613
|
align-items: center;
|
|
611
614
|
margin-bottom: 0;
|
|
@@ -614,45 +617,45 @@
|
|
|
614
617
|
}
|
|
615
618
|
|
|
616
619
|
/* Image */
|
|
617
|
-
.cio-question-image-container {
|
|
620
|
+
.cio-quiz .cio-question-image-container {
|
|
618
621
|
flex-basis: 50%;
|
|
619
622
|
flex-shrink: 0;
|
|
620
623
|
border-radius: 4px;
|
|
621
624
|
}
|
|
622
625
|
|
|
623
626
|
/* Cover Page Component */
|
|
624
|
-
.cio-cover-question-container--with-image {
|
|
627
|
+
.cio-quiz .cio-cover-question-container--with-image {
|
|
625
628
|
margin-bottom: 0;
|
|
626
629
|
padding-bottom: 0;
|
|
627
630
|
}
|
|
628
631
|
|
|
629
632
|
/* Select Component */
|
|
630
|
-
.cio-select-question-text {
|
|
633
|
+
.cio-quiz .cio-select-question-text {
|
|
631
634
|
margin-top: 2rem;
|
|
632
635
|
}
|
|
633
|
-
.cio-select-question-buttons {
|
|
636
|
+
.cio-quiz .cio-select-question-buttons {
|
|
634
637
|
padding: 1rem 3rem;
|
|
635
638
|
}
|
|
636
639
|
|
|
637
640
|
/* Results component */
|
|
638
|
-
.cio-results-container {
|
|
641
|
+
.cio-quiz .cio-results-container {
|
|
639
642
|
padding: 3rem 4rem;
|
|
640
643
|
}
|
|
641
|
-
.cio-results-filter-and-redo-container {
|
|
644
|
+
.cio-quiz .cio-results-filter-and-redo-container {
|
|
642
645
|
display: flex;
|
|
643
646
|
justify-content: space-between;
|
|
644
647
|
align-items: end;
|
|
645
648
|
margin-bottom: 1.5rem;
|
|
646
649
|
}
|
|
647
|
-
.cio-results-filter-container {
|
|
650
|
+
.cio-quiz .cio-results-filter-container {
|
|
648
651
|
margin-bottom: 0;
|
|
649
652
|
}
|
|
650
|
-
.cio-results {
|
|
653
|
+
.cio-quiz .cio-results {
|
|
651
654
|
column-gap: 5%;
|
|
652
655
|
}
|
|
653
656
|
|
|
654
657
|
/* Result Card component */
|
|
655
|
-
.cio-result-card {
|
|
658
|
+
.cio-quiz .cio-result-card {
|
|
656
659
|
flex-basis: 30%;
|
|
657
660
|
}
|
|
658
661
|
}
|
|
@@ -660,34 +663,34 @@
|
|
|
660
663
|
/* Big Tablet */
|
|
661
664
|
@container quiz (min-width: 768px) {
|
|
662
665
|
/* Container */
|
|
663
|
-
.cio-container {
|
|
666
|
+
.cio-quiz .cio-container {
|
|
664
667
|
align-items: center;
|
|
665
668
|
margin-top: 0;
|
|
666
669
|
height: calc(100% - var(--bottom-bar-height)); /* Full height - control bar */
|
|
667
670
|
}
|
|
668
|
-
.cio-container--with-image {
|
|
671
|
+
.cio-quiz .cio-container--with-image {
|
|
669
672
|
padding: 6% 2%;
|
|
670
673
|
align-items: center;
|
|
671
674
|
flex-direction: row;
|
|
672
675
|
justify-content: center;
|
|
673
676
|
}
|
|
674
|
-
.cio-cover-question-container--with-image {
|
|
677
|
+
.cio-quiz .cio-cover-question-container--with-image {
|
|
675
678
|
flex-direction: row-reverse;
|
|
676
679
|
}
|
|
677
680
|
|
|
678
681
|
/* Input */
|
|
679
|
-
.cio-question-input-text {
|
|
682
|
+
.cio-quiz .cio-question-input-text {
|
|
680
683
|
margin-bottom: 1rem;
|
|
681
684
|
}
|
|
682
685
|
|
|
683
686
|
/* Image */
|
|
684
|
-
.cio-question-image-container {
|
|
687
|
+
.cio-quiz .cio-question-image-container {
|
|
685
688
|
max-height: unset;
|
|
686
689
|
height: unset;
|
|
687
690
|
}
|
|
688
691
|
|
|
689
692
|
/* Content */
|
|
690
|
-
.cio-question-content {
|
|
693
|
+
.cio-quiz .cio-question-content {
|
|
691
694
|
justify-content: center;
|
|
692
695
|
height: fit-content;
|
|
693
696
|
flex-basis: 70%;
|
|
@@ -697,25 +700,25 @@
|
|
|
697
700
|
}
|
|
698
701
|
|
|
699
702
|
/* Description */
|
|
700
|
-
.cio-question-description {
|
|
703
|
+
.cio-quiz .cio-question-description {
|
|
701
704
|
margin-bottom: 2rem;
|
|
702
705
|
}
|
|
703
706
|
|
|
704
707
|
/* Cover Component */
|
|
705
|
-
.cio-cover-question-container--with-image {
|
|
708
|
+
.cio-quiz .cio-cover-question-container--with-image {
|
|
706
709
|
padding: 0;
|
|
707
710
|
}
|
|
708
711
|
|
|
709
712
|
/* Select Component */
|
|
710
|
-
.cio-select-question-text {
|
|
713
|
+
.cio-quiz .cio-select-question-text {
|
|
711
714
|
padding: 0;
|
|
712
715
|
padding-bottom: 2rem;
|
|
713
716
|
margin: 0;
|
|
714
717
|
}
|
|
715
|
-
.cio-select-question-buttons {
|
|
718
|
+
.cio-quiz .cio-select-question-buttons {
|
|
716
719
|
padding: 1rem 5rem;
|
|
717
720
|
}
|
|
718
|
-
.cio-select-question-container {
|
|
721
|
+
.cio-quiz .cio-select-question-container {
|
|
719
722
|
justify-content: center;
|
|
720
723
|
margin-bottom: 0;
|
|
721
724
|
margin-top: 0;
|
|
@@ -723,21 +726,21 @@
|
|
|
723
726
|
padding-bottom: 0;
|
|
724
727
|
min-height: calc(100% - var(--bottom-bar-height)); /* Full height - padding - margin */
|
|
725
728
|
}
|
|
726
|
-
.cio-question-option-container {
|
|
729
|
+
.cio-quiz .cio-question-option-container {
|
|
727
730
|
width: calc(25% - 13px);
|
|
728
731
|
}
|
|
729
|
-
.cio-question-options-container {
|
|
732
|
+
.cio-quiz .cio-question-options-container {
|
|
730
733
|
padding: 0;
|
|
731
734
|
margin-bottom: 2rem;
|
|
732
735
|
}
|
|
733
|
-
.cio-question-options-container-text-only {
|
|
736
|
+
.cio-quiz .cio-question-options-container-text-only {
|
|
734
737
|
flex-direction: row;
|
|
735
738
|
flex-wrap: wrap;
|
|
736
739
|
justify-content: center;
|
|
737
740
|
margin-bottom: 2rem;
|
|
738
741
|
margin-top: 0;
|
|
739
742
|
}
|
|
740
|
-
.cio-question-option-container-text-only {
|
|
743
|
+
.cio-quiz .cio-question-option-container-text-only {
|
|
741
744
|
margin: 0;
|
|
742
745
|
width: 30%;
|
|
743
746
|
}
|
|
@@ -746,42 +749,42 @@
|
|
|
746
749
|
/* Desktop */
|
|
747
750
|
@container quiz (min-width: 1280px) {
|
|
748
751
|
/* Container */
|
|
749
|
-
.cio-cover-question-container--with-image {
|
|
752
|
+
.cio-quiz .cio-quiz .cio-cover-question-container--with-image {
|
|
750
753
|
padding: 0;
|
|
751
754
|
}
|
|
752
755
|
|
|
753
756
|
/* Select component */
|
|
754
|
-
.cio-question-option-container-text-only {
|
|
757
|
+
.cio-quiz .cio-question-option-container-text-only {
|
|
755
758
|
width: 30%;
|
|
756
759
|
}
|
|
757
|
-
.cio-select-question-container {
|
|
760
|
+
.cio-quiz .cio-select-question-container {
|
|
758
761
|
margin-bottom: 0;
|
|
759
762
|
}
|
|
760
|
-
.cio-select-question-text {
|
|
763
|
+
.cio-quiz .cio-select-question-text {
|
|
761
764
|
padding: 2.5rem 0rem;
|
|
762
765
|
}
|
|
763
766
|
|
|
764
767
|
/* Results component */
|
|
765
|
-
.cio-results-container {
|
|
768
|
+
.cio-quiz .cio-results-container {
|
|
766
769
|
margin-top: 3rem;
|
|
767
770
|
}
|
|
768
|
-
.cio-zero-results {
|
|
771
|
+
.cio-quiz .cio-zero-results {
|
|
769
772
|
margin-top: 7rem;
|
|
770
773
|
}
|
|
771
|
-
.cio-question-content {
|
|
774
|
+
.cio-quiz .cio-question-content {
|
|
772
775
|
padding: 5rem;
|
|
773
776
|
}
|
|
774
777
|
}
|
|
775
778
|
|
|
776
779
|
/* Spinner Styles */
|
|
777
|
-
.cio-spinner {
|
|
780
|
+
.cio-quiz .cio-spinner {
|
|
778
781
|
display: inline-block;
|
|
779
782
|
position: relative;
|
|
780
783
|
width: 80px;
|
|
781
784
|
margin: auto;
|
|
782
785
|
}
|
|
783
786
|
|
|
784
|
-
.cio-spinner div {
|
|
787
|
+
.cio-quiz .cio-spinner div {
|
|
785
788
|
box-sizing: border-box;
|
|
786
789
|
display: block;
|
|
787
790
|
position: absolute;
|
|
@@ -795,15 +798,15 @@
|
|
|
795
798
|
border-color: var(--primary-color) transparent transparent transparent;
|
|
796
799
|
}
|
|
797
800
|
|
|
798
|
-
.cio-spinner div:nth-child(1) {
|
|
801
|
+
.cio-quiz .cio-spinner div:nth-child(1) {
|
|
799
802
|
animation-delay: -0.45s;
|
|
800
803
|
}
|
|
801
804
|
|
|
802
|
-
.cio-spinner div:nth-child(2) {
|
|
805
|
+
.cio-quiz .cio-spinner div:nth-child(2) {
|
|
803
806
|
animation-delay: -0.3s;
|
|
804
807
|
}
|
|
805
808
|
|
|
806
|
-
.cio-spinner div:nth-child(3) {
|
|
809
|
+
.cio-quiz .cio-spinner div:nth-child(3) {
|
|
807
810
|
animation-delay: -0.15s;
|
|
808
811
|
}
|
|
809
812
|
|