@constructor-io/constructorio-ui-quizzes 1.5.0 → 1.5.2

package/lib/styles.css

@@ -73,7 +73,7 @@
 }
 
 /* Container */
-.cio-container {
+.cio-quiz .cio-container {
   display: flex;
   justify-content: center;
   margin-top: 2rem;
@@ -81,22 +81,20 @@
   width: 100%;
   position: relative;
   align-self: start;
-  height: calc(
-    100% - 2rem - calc(var(--bottom-bar-height))
-  ); /* Full height - margin - control bar */
+  height: calc(100% - 2rem - var(--bottom-bar-height)); /* Full height - margin - control bar */
 }
-.cio-container--with-image {
+.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% - calc(var(--bottom-bar-height))); /* Full height - margin - control bar */
+  height: calc(100% - var(--bottom-bar-height)); /* Full height - margin - control bar */
 }
 
 /* Background image */
-.cio-question-background-image {
+.cio-quiz .cio-question-background-image {
   height: calc(100% - 4px);
   width: 100%;
   position: absolute;
@@ -104,7 +102,7 @@
 }
 
 /* Session Prompt Modal */
-.cio-session-prompt-modal {
+.cio-quiz .cio-session-prompt-modal {
   position: absolute;
   display: flex;
   z-index: 100;
@@ -114,11 +112,11 @@
   justify-content: space-between;
 }
 
-.cio-session-prompt-container {
+.cio-quiz .cio-session-prompt-container {
   margin: auto;
 }
 
-.cio-session-prompt-content {
+.cio-quiz .cio-session-prompt-content {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -130,49 +128,52 @@
   line-height: 1.5;
 }
 
-.cio-session-prompt-controls-container {
+.cio-quiz .cio-session-prompt-controls-container {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
 }
 
-.cio-session-prompt-content .cio-button-container {
+.cio-quiz .cio-session-prompt-content .cio-button-container {
   margin: 0px;
   padding: 0px;
 }
 
-.cio-session-prompt-controls-container .cio-button-container:nth-child(1) .cio-question-cta-button {
+.cio-quiz
+  .cio-session-prompt-controls-container
+  .cio-button-container:nth-child(1)
+  .cio-question-cta-button {
   color: var(--primary-color);
   background-color: #ffffff;
 }
 
 /* Content */
-.cio-question-content {
+.cio-quiz .cio-question-content {
   display: flex;
   flex-direction: column;
   padding: 1rem;
 }
 
 /* Title */
-.cio-question-title {
+.cio-quiz .cio-question-title {
   font-size: 2.125em;
   margin: 0;
 }
 
 /* Description */
-.cio-question-description {
+.cio-quiz .cio-question-description {
   font-size: 1em;
   line-height: 1.5;
   margin-top: 1.5rem;
 }
 
 /* Image */
-.cio-question-image {
+.cio-quiz .cio-question-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.cio-question-image-container {
+.cio-quiz .cio-question-image-container {
   box-sizing: border-box;
   width: 100%;
   object-fit: cover;
@@ -183,7 +184,7 @@
 }
 
 /* Input */
-.cio-question-input-text {
+.cio-quiz .cio-question-input-text {
   width: 100%;
   padding: 0.5rem;
   border: 0;
@@ -193,16 +194,16 @@
   outline: none;
   font-size: 1rem;
 }
-.cio-question-input-text:focus,
-.cio-question-input-text:active {
+.cio-quiz .cio-question-input-text:focus,
+.cio-quiz .cio-question-input-text:active {
   border-bottom: 1px solid var(--primary-color-variant-500);
 }
-.cio-question-input-text::placeholder {
+.cio-quiz .cio-question-input-text::placeholder {
   color: var(--gray-dust-100);
 }
 
 /* CTA Button Component */
-.cio-question-buttons-container {
+.cio-quiz .cio-question-buttons-container {
   width: 100%;
   height: var(--bottom-bar-height);
   padding: 8px 16px;
@@ -214,10 +215,10 @@
   background-color: rgba(255, 255, 255, 0.87);
   align-items: center;
 }
-.cio-question-cta-button {
+.cio-quiz .cio-question-cta-button {
   background: var(--primary-color);
   color: #ffffff;
-  border: 1px solid var(--primary-color);
+  border: 2px solid var(--primary-color);
   border-radius: 4px;
   height: 3rem;
   font-size: 1rem;
@@ -225,25 +226,25 @@
   margin-left: auto;
   width: 100%;
 }
-.cio-button-container {
+.cio-quiz .cio-button-container {
   max-width: 10rem;
   flex-grow: 1;
   margin-left: auto;
   padding-left: 1rem;
 }
-.cio-question-cta-button:hover {
+.cio-quiz .cio-question-cta-button:hover {
   background: var(--primary-color-variant-500);
   border: 2px solid var(--primary-color-variant-600);
 }
-.cio-question-cta-button:active {
+.cio-quiz .cio-question-cta-button:active {
   background: var(--primary-color-variant-700);
   border: 2px solid var(--primary-color-variant-800);
 }
-.cio-question-cta-button:focus {
+.cio-quiz .cio-question-cta-button:focus {
   outline: 3px solid var(--primary-color-variant-100);
 }
-.cio-question-cta-button:disabled,
-.cio-question-cta-button.disabled {
+.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;
@@ -251,7 +252,7 @@
 }
 
 /* Back Button Component */
-.cio-question-back-button {
+.cio-quiz .cio-question-back-button {
   color: var(--primary-color);
   background: #ffffff;
   border: 1px solid var(--primary-color);
@@ -261,32 +262,32 @@
   font-size: 1rem;
   margin-right: 4rem;
 }
-.cio-question-back-button:hover {
+.cio-quiz .cio-question-back-button:hover {
   border: 2px solid var(--primary-color-variant-600);
 }
-.cio-question-back-button:active {
+.cio-quiz .cio-question-back-button:active {
   border: 2px solid var(--primary-color-variant-700);
 }
-.cio-question-back-button:focus {
+.cio-quiz .cio-question-back-button:focus {
   outline: 3px solid var(--primary-color-variant-100);
 }
-.cio-question-back-button.disabled {
+.cio-quiz .cio-question-back-button.disabled {
   display: none;
 }
 
-.cio-question-back-button svg {
+.cio-quiz .cio-question-back-button svg {
   display: inline;
 }
 
 /* Cover Page Component */
-.cio-cover-question-container--with-image {
+.cio-quiz .cio-cover-question-container--with-image {
   padding: 0;
   padding-bottom: var(--bottom-bar-height);
 }
 
 /** Select Component */
 /* Options */
-.cio-question-option-container {
+.cio-quiz .cio-question-option-container {
   padding: 1.5rem;
   border-radius: 8px;
   border: 1px solid var(--primary-color-variant-100);
@@ -297,23 +298,23 @@
   cursor: pointer;
   background-color: white;
 }
-.cio-question-option-container.selected {
+.cio-quiz .cio-question-option-container.selected {
   outline: 3px solid var(--primary-color-variant-600);
   box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.35);
 }
-.cio-question-option-container-text-only.selected {
+.cio-quiz .cio-question-option-container-text-only.selected {
   outline: 3px solid var(--primary-color-variant-600);
   box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.35);
 }
-.cio-question-option-container:hover:not(.selected) {
+.cio-quiz .cio-question-option-container:hover:not(.selected) {
   outline: 1px solid var(--primary-color-variant-600);
   box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.25);
 }
-.cio-question-option-container-text-only:hover:not(.selected) {
+.cio-quiz .cio-question-option-container-text-only:hover:not(.selected) {
   outline: 1px solid var(--primary-color-variant-600);
   box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.25);
 }
-.cio-select-question-container {
+.cio-quiz .cio-select-question-container {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -321,14 +322,12 @@
   max-width: 1200px;
   padding: 1rem;
   margin-top: 2rem;
-  min-height: calc(
-    100% - 2rem - calc(var(--bottom-bar-height))
-  ); /* Full height - padding - margin */
+  min-height: calc(100% - 2rem - var(--bottom-bar-height)); /* Full height - padding - margin */
   width: 100%;
   margin-right: auto;
   margin-left: auto;
 }
-.cio-question-options-container {
+.cio-quiz .cio-question-options-container {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -337,7 +336,7 @@
   margin-bottom: var(--bottom-bar-height);
   margin-top: 2rem;
 }
-.cio-question-options-container-text-only {
+.cio-quiz .cio-question-options-container-text-only {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -346,7 +345,7 @@
   margin-bottom: var(--bottom-bar-height);
   margin-top: 2rem;
 }
-.cio-question-option-container-text-only {
+.cio-quiz .cio-question-option-container-text-only {
   padding: 1.5rem;
   border-radius: 8px;
   border: 1px solid var(--primary-color-variant-100);
@@ -360,7 +359,7 @@
 }
 
 /* Option Image */
-.cio-question-option-image {
+.cio-quiz .cio-question-option-image {
   width: 100%;
   height: auto;
   border-radius: 4px;
@@ -370,24 +369,24 @@
 }
 
 /* Select Option Value */
-.cio-question-option-value {
+.cio-quiz .cio-question-option-value {
   text-align: center;
   margin: auto 0;
 }
 
 /* Select Text and Description */
-.cio-select-question-text {
+.cio-quiz .cio-select-question-text {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-.cio-select-question-text .cio-question-description {
+.cio-quiz .cio-select-question-text .cio-question-description {
   margin-bottom: 0;
 }
 
 /* Select Instructions */
-.cio-select-question-instructions {
+.cio-quiz .cio-select-question-instructions {
   text-align: center;
   font-size: 1.125rem;
   color: var(--gray-dust-100);
@@ -397,7 +396,7 @@
 }
 
 /* Results component */
-.cio-results-container {
+.cio-quiz .cio-results-container {
   width: 100%;
   max-width: 1200px;
   padding: 2rem 1rem;
@@ -406,25 +405,25 @@
   margin-right: auto;
   margin-left: auto;
 }
-.cio-results-title {
+.cio-quiz .cio-results-title {
   margin-top: 0;
   margin-bottom: 1rem;
   color: var(--gray-dust-500);
 }
-.cio-results-filter-container {
+.cio-quiz .cio-results-filter-container {
   margin-bottom: 1.5rem;
 }
-.cio-results-filter-container p {
+.cio-quiz .cio-results-filter-container p {
   color: var(--gray-dust-500);
   margin-bottom: 1.5rem;
 }
-.cio-results-filter-options {
+.cio-quiz .cio-results-filter-options {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   cursor: default;
 }
-.cio-results-filter-option {
+.cio-quiz .cio-results-filter-option {
   background-color: #ffffff;
   border: 1px solid var(--primary-color);
   color: var(--primary-color-variant-500);
@@ -435,12 +434,12 @@
   align-items: center;
   font-size: 0.75rem;
 }
-.cio-results {
+.cio-quiz .cio-results {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
-.cio-zero-results {
+.cio-quiz .cio-zero-results {
   margin-top: 2rem;
   text-align: center;
   display: flex;
@@ -450,7 +449,7 @@
   margin-left: auto;
   margin-right: auto;
 }
-.cio-zero-results-subtitle {
+.cio-quiz .cio-zero-results-subtitle {
   font-weight: 500;
   font-size: 1.25rem;
   line-height: 1.5rem;
@@ -458,7 +457,7 @@
   color: var(--gray-dust-500);
   margin-top: 0;
 }
-.cio-zero-results .cio-button-container {
+.cio-quiz .cio-zero-results .cio-button-container {
   width: 14rem;
   margin-right: auto;
   margin-left: auto;
@@ -466,7 +465,7 @@
 }
 
 /* Result Card component */
-.cio-result-card {
+.cio-quiz .cio-result-card {
   background-color: transparent;
   height: auto;
   box-sizing: border-box;
@@ -477,8 +476,8 @@
   display: flex;
   flex-direction: column;
 }
-.cio-result-card-anchor,
-.cio-result-card-container {
+.cio-quiz .cio-result-card-anchor,
+.cio-quiz .cio-result-card-container {
   text-decoration: none;
   background-color: transparent;
   color: inherit;
@@ -487,97 +486,115 @@
   flex-direction: column;
   justify-content: space-between;
 }
-.cio-result-card-image {
+.cio-quiz .cio-result-card-image {
   width: auto;
   height: 240px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
 }
-.cio-result-card-image img {
+.cio-quiz .cio-result-card-image img {
   height: 100%;
   width: 100%;
   object-fit: contain;
 }
-.cio-result-card-text {
+.cio-quiz .cio-result-card-text {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   text-decoration: none;
 }
-.cio-result-card-title {
+.cio-quiz .cio-result-card-title {
   color: var(--gray-dust-500);
   margin: 0;
   margin-bottom: 1rem;
   font-weight: 700;
 }
-.cio-result-card-prices {
+.cio-quiz .cio-result-card-prices {
   margin-bottom: 1rem;
   font-weight: 700;
 }
-.cio-result-card-sale-price {
+.cio-quiz .cio-result-card-sale-price {
   color: #bf1728;
   margin-right: 0.75rem;
 }
-.cio-result-card-regular-price {
+.cio-quiz .cio-result-card-regular-price {
   color: var(--gray-dust-900);
 }
-.cio-result-card-regular-price--strike-through {
+.cio-quiz .cio-result-card-regular-price--strike-through {
   text-decoration: line-through;
 }
-.cio-result-card-rating {
+.cio-quiz .cio-result-card-rating {
   margin-bottom: 10px;
 }
-.cio-result-card-rating-score {
+.cio-quiz .cio-result-card-rating-score {
   margin-right: 5px;
 }
-.cio-result-card-discount {
-  font-weight: normal;
-  font-size: .9em;
-  margin-top: 4px;
+
+/* Result Favorites Button*/
+.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: black;
+  stroke-width: 1px;
 }
 
 /* Result CTA Button */
-.cio-result-card-cta-button {
+.cio-quiz .cio-result-card-cta-button {
   padding: 0.75rem 2.5rem;
   height: 3rem;
   background: var(--primary-color);
-  border: 1px solid var(--primary-color);
+  border: 2px solid var(--primary-color);
   border-radius: 4px;
   color: #ffffff;
   font-size: 1rem;
   width: 100%;
 }
-.cio-result-card-cta-button:hover {
+.cio-quiz .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 {
+.cio-quiz .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 {
+.cio-quiz .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 {
+.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);
 }
 
 /* Redo Button Component */
-.cio-question-redo-button {
+.cio-quiz .cio-question-redo-button {
   background: none;
   border: none;
   display: flex;
   gap: 0.5rem;
   align-items: center;
 }
-.cio-question-redo-button:hover {
+.cio-quiz .cio-question-redo-button:hover {
   text-decoration: underline;
 }
-.cio-question-redo-button span {
+.cio-quiz .cio-question-redo-button span {
   margin-top: 1px;
 }
 
@@ -585,13 +602,13 @@
 
 /* Small Tablet */
 @container quiz (min-width: 640px) {
-  .cio-container {
+  .cio-quiz .cio-container {
     padding-bottom: 0;
     align-self: normal;
   }
 
   /* Container */
-  .cio-container--with-image {
+  .cio-quiz .cio-container--with-image {
     display: flex;
     align-items: center;
     margin-bottom: 0;
@@ -600,45 +617,45 @@
   }
 
   /* Image */
-  .cio-question-image-container {
+  .cio-quiz .cio-question-image-container {
     flex-basis: 50%;
     flex-shrink: 0;
     border-radius: 4px;
   }
 
   /* Cover Page Component */
-  .cio-cover-question-container--with-image {
+  .cio-quiz .cio-cover-question-container--with-image {
     margin-bottom: 0;
     padding-bottom: 0;
   }
 
   /* Select Component */
-  .cio-select-question-text {
+  .cio-quiz .cio-select-question-text {
     margin-top: 2rem;
   }
-  .cio-select-question-buttons {
+  .cio-quiz .cio-select-question-buttons {
     padding: 1rem 3rem;
   }
 
   /* Results component */
-  .cio-results-container {
+  .cio-quiz .cio-results-container {
     padding: 3rem 4rem;
   }
-  .cio-results-filter-and-redo-container {
+  .cio-quiz .cio-results-filter-and-redo-container {
     display: flex;
     justify-content: space-between;
     align-items: end;
     margin-bottom: 1.5rem;
   }
-  .cio-results-filter-container {
+  .cio-quiz .cio-results-filter-container {
     margin-bottom: 0;
   }
-  .cio-results {
+  .cio-quiz .cio-results {
     column-gap: 5%;
   }
 
   /* Result Card component */
-  .cio-result-card {
+  .cio-quiz .cio-result-card {
     flex-basis: 30%;
   }
 }
@@ -646,34 +663,34 @@
 /* Big Tablet */
 @container quiz (min-width: 768px) {
   /* Container */
-  .cio-container {
+  .cio-quiz .cio-container {
     align-items: center;
     margin-top: 0;
-    height: calc(100% - calc(var(--bottom-bar-height))); /* Full height - control bar */
+    height: calc(100% - var(--bottom-bar-height)); /* Full height - control bar */
   }
-  .cio-container--with-image {
+  .cio-quiz .cio-container--with-image {
     padding: 6% 2%;
     align-items: center;
     flex-direction: row;
     justify-content: center;
   }
-  .cio-cover-question-container--with-image {
+  .cio-quiz .cio-cover-question-container--with-image {
     flex-direction: row-reverse;
   }
 
   /* Input */
-  .cio-question-input-text {
+  .cio-quiz .cio-question-input-text {
     margin-bottom: 1rem;
   }
 
   /* Image */
-  .cio-question-image-container {
+  .cio-quiz .cio-question-image-container {
     max-height: unset;
     height: unset;
   }
 
   /* Content */
-  .cio-question-content {
+  .cio-quiz .cio-question-content {
     justify-content: center;
     height: fit-content;
     flex-basis: 70%;
@@ -683,47 +700,47 @@
   }
 
   /* Description */
-  .cio-question-description {
+  .cio-quiz .cio-question-description {
     margin-bottom: 2rem;
   }
 
   /* Cover Component */
-  .cio-cover-question-container--with-image {
+  .cio-quiz .cio-cover-question-container--with-image {
     padding: 0;
   }
 
   /* Select Component */
-  .cio-select-question-text {
+  .cio-quiz .cio-select-question-text {
     padding: 0;
     padding-bottom: 2rem;
     margin: 0;
   }
-  .cio-select-question-buttons {
+  .cio-quiz .cio-select-question-buttons {
     padding: 1rem 5rem;
   }
-  .cio-select-question-container {
+  .cio-quiz .cio-select-question-container {
     justify-content: center;
     margin-bottom: 0;
     margin-top: 0;
     padding: 2rem;
     padding-bottom: 0;
-    min-height: calc(100% - calc(var(--bottom-bar-height))); /* Full height - padding - margin */
+    min-height: calc(100% - var(--bottom-bar-height)); /* Full height - padding - margin */
   }
-  .cio-question-option-container {
+  .cio-quiz .cio-question-option-container {
     width: calc(25% - 13px);
   }
-  .cio-question-options-container {
+  .cio-quiz .cio-question-options-container {
     padding: 0;
     margin-bottom: 2rem;
   }
-  .cio-question-options-container-text-only {
+  .cio-quiz .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 {
+  .cio-quiz .cio-question-option-container-text-only {
     margin: 0;
     width: 30%;
   }
@@ -732,42 +749,42 @@
 /* Desktop */
 @container quiz (min-width: 1280px) {
   /* Container */
-  .cio-cover-question-container--with-image {
+  .cio-quiz .cio-quiz .cio-cover-question-container--with-image {
     padding: 0;
   }
 
   /* Select component */
-  .cio-question-option-container-text-only {
+  .cio-quiz .cio-question-option-container-text-only {
     width: 30%;
   }
-  .cio-select-question-container {
+  .cio-quiz .cio-select-question-container {
     margin-bottom: 0;
   }
-  .cio-select-question-text {
+  .cio-quiz .cio-select-question-text {
     padding: 2.5rem 0rem;
   }
 
   /* Results component */
-  .cio-results-container {
+  .cio-quiz .cio-results-container {
     margin-top: 3rem;
   }
-  .cio-zero-results {
+  .cio-quiz .cio-zero-results {
     margin-top: 7rem;
   }
-  .cio-question-content {
+  .cio-quiz .cio-question-content {
     padding: 5rem;
   }
 }
 
 /* Spinner Styles */
-.cio-spinner {
+.cio-quiz .cio-spinner {
   display: inline-block;
   position: relative;
   width: 80px;
   margin: auto;
 }
 
-.cio-spinner div {
+.cio-quiz .cio-spinner div {
   box-sizing: border-box;
   display: block;
   position: absolute;
@@ -781,15 +798,15 @@
   border-color: var(--primary-color) transparent transparent transparent;
 }
 
-.cio-spinner div:nth-child(1) {
+.cio-quiz .cio-spinner div:nth-child(1) {
   animation-delay: -0.45s;
 }
 
-.cio-spinner div:nth-child(2) {
+.cio-quiz .cio-spinner div:nth-child(2) {
   animation-delay: -0.3s;
 }
 
-.cio-spinner div:nth-child(3) {
+.cio-quiz .cio-spinner div:nth-child(3) {
   animation-delay: -0.15s;
 }