@yoobic/yobi 8.1.0-110 → 8.1.0-113

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.css

@@ -297,121 +297,112 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host {
+  position: relative;
   display: block;
   height: 100%;
+  overflow: hidden;
 }
 :host yoo-banner {
   height: 0;
 }
-:host .outer-container {
+:host #instructions {
   height: 100%;
-}
-:host .outer-container .game-container,
-:host .outer-container .instructions-container {
   transition: opacity 1s ease-in-out;
 }
-:host .outer-container .instructions-container .top-description {
+:host #instructions #header {
   padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
-  padding-bottom: var(--spacing-16, 1rem);
   background: var(--dark, #000000);
+  border-radius: var(--border-radius-04, 0.25rem);
 }
-:host .outer-container .instructions-container .top-description h1 {
+:host #instructions #header h1 {
   margin: 0;
   color: var(--light, #ffffff);
 }
-:host .outer-container .instructions-container .categories {
+:host #instructions #categories {
   display: inline-grid;
   grid-template-columns: 1fr 0.5fr 1fr;
   width: 100%;
   margin: var(--spacing-24, 1.5rem) 0;
   text-align: center;
 }
-:host .outer-container .instructions-container .categories yoo-icon {
+:host #instructions #categories yoo-icon {
   margin: 0 auto;
 }
-:host .outer-container .instructions-container .categories .category {
+:host #instructions #categories .category {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 0;
   color: var(--stable, #adadad);
 }
-:host .outer-container .instructions-container .categories .category p {
+:host #instructions #categories .category p {
   max-width: 75%;
   margin: auto;
   padding: var(--spacing-16, 1rem) 0;
 }
-:host .outer-container .instructions-container .categories .category yoo-tag {
+:host #instructions #categories .category yoo-tag {
   margin: 0 auto;
 }
-:host .outer-container .instructions-container yoo-button {
+:host #instructions yoo-button {
   padding: var(--spacing-16, 1rem);
 }
-:host .outer-container .instructions-container .document {
+:host #instructions #document {
   background-color: var(--light, #ffffff);
 }
-:host .outer-container .instructions-container .document .document-title {
+:host #instructions #document .document-title {
   padding: 0 var(--spacing-16, 1rem);
   font-size: var(--font-size-16, 1rem);
 }
-:host .outer-container .instructions-container .document yoo-form-document {
+:host #instructions #document yoo-form-document {
   --outer-container-padding: cssvar(spacing-16) cssvar(spacing-16);
   width: calc(100% - var(--spacing-16, 1rem));
 }
-:host .outer-container .game-container {
-  position: relative;
-  height: 100%;
-}
-:host .outer-container .game-container .swipecards-container {
-  height: 100%;
-  overflow: hidden;
-}
-:host .outer-container .game-container .swipecards-container [direction].card-container {
+:host [direction].card {
   z-index: 5;
   transition: transform 0.35s !important;
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
 }
-:host .outer-container .game-container .swipecards-container [direction].card-container.current .content-category {
+:host [direction].card.current .content-category {
   color: var(--light, #ffffff);
   opacity: 1 !important;
   transition: opacity 0.35s linear;
 }
-:host .outer-container .game-container .swipecards-container [direction].card-container.current.card-container + .card-container {
+:host [direction].card.current.card + .card {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
 }
-:host .outer-container .game-container .swipecards-container [direction].card-container.current.card-container + .card-container .content-image,
-:host .outer-container .game-container .swipecards-container [direction].card-container.current.card-container + .card-container .content-text {
+:host [direction].card.current.card + .card .content-image,
+:host [direction].card.current.card + .card .content-text {
   opacity: 1 !important;
 }
-:host .outer-container .game-container .swipecards-container [direction].card-container.current.card-container + .card-container + .card-container {
+:host [direction].card.current.card + .card + .card {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
 }
-:host .outer-container .game-container .swipecards-container [direction].card-container.current.card-container + .card-container + .card-container + .card-container {
+:host [direction].card.current.card + .card + .card + .card {
   transform: translate(0%, -2%) scale(0.9);
   opacity: 0.7;
 }
-:host .outer-container .game-container .swipecards-container [direction=left].background, :host .outer-container .game-container .swipecards-container [direction=left].current > .content-category {
+:host [direction=left]#game, :host [direction=left].current > .content-category {
   background-color: var(--app-color, #5a30f4) !important;
 }
-:host .outer-container .game-container .swipecards-container [direction=left].current {
+:host [direction=left].current {
   transform: translate(0%, 9%) scale(1) rotate(-3.5deg) !important;
 }
-:host .outer-container .game-container .swipecards-container [direction=right].background, :host .outer-container .game-container .swipecards-container [direction=right].current > .content-category {
+:host [direction=right]#game, :host [direction=right].current > .content-category {
   background-color: var(--warning, #ed6e33) !important;
 }
-:host .outer-container .game-container .swipecards-container [direction=right].current {
+:host [direction=right].current {
   transform: translate(0%, 9%) scale(1) rotate(3.5deg) !important;
 }
-:host .outer-container .game-container .swipecards-container .background {
+:host #game {
   position: relative;
   width: 100%;
   background-color: var(--dark, #000000);
   transition: background-color 0.25s ease-in-out;
 }
-:host .outer-container .game-container .swipecards-container .background .end-message {
+:host #game #end-message {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -425,31 +416,31 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
 }
-:host .outer-container .game-container .swipecards-container .background .end-message.rtl {
+:host #game #end-message.rtl {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
 }
-:host .outer-container .game-container .swipecards-container .background .end-message yoo-lottie {
+:host #game #end-message yoo-lottie {
   width: 30%;
   margin: 0 auto;
 }
-:host .outer-container .game-container .swipecards-container .background .end-message div {
+:host #game #end-message div {
   padding: var(--spacing-16, 1rem) 0;
   font-weight: bold;
   font-size: var(--font-size-24, 1.5rem);
 }
-:host .outer-container .game-container .swipecards-container .background .end-message.active {
+:host #game #end-message.active {
   visibility: visible;
   opacity: 1;
 }
-:host .outer-container .game-container .swipecards-container .background:after {
+:host #game:after {
   display: block;
   height: 0;
   padding-top: 85%;
   content: "";
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container {
+:host #stack {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -460,12 +451,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 100%;
   margin-top: var(--spacing-16, 1rem);
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container.rtl {
+:host #stack.rtl {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container {
+:host #stack .card {
   position: absolute;
   top: 0;
   right: 0;
@@ -486,19 +477,19 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: transform 0.25s, opacity 0.25s, background-color 0.25s;
   will-change: transform;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container:not([direction]) {
+:host #stack .card:not([direction]) {
   transform: translate(0, -5%) scale(0.85);
   opacity: 0;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.current {
+:host #stack .card.current {
   z-index: 3;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.current:not(.revealing) {
+:host #stack .card.current:not(.revealing) {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
-  transition-delay: 175ms;
+  transition-delay: 200ms;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.current.revealing {
+:host #stack .card.current.revealing {
   animation: "current" 0.25s ease-in-out;
   animation-delay: 150ms;
   animation-fill-mode: forwards;
@@ -509,15 +500,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.second {
+:host #stack .card.second {
   z-index: 2;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.second:not(.revealing) {
+:host #stack .card.second:not(.revealing) {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
-  transition-delay: 350ms;
+  transition-delay: 400ms;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.second.revealing {
+:host #stack .card.second.revealing {
   animation: "second" 0.25s ease-in-out;
   animation-delay: 300ms;
   animation-fill-mode: forwards;
@@ -528,15 +519,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.third {
+:host #stack .card.third {
   z-index: 1;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.third:not(.revealing) {
+:host #stack .card.third:not(.revealing) {
   transform: translate(0%, -2%) scale(0.9);
   opacity: 0.7;
-  transition-delay: 525ms;
+  transition-delay: 600ms;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.third.revealing {
+:host #stack .card.third.revealing {
   animation: "third" 0.25s ease-in-out;
   animation-delay: 450ms;
   animation-fill-mode: forwards;
@@ -547,61 +538,61 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 0.7;
   }
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container:after {
+:host #stack .card:after {
   display: block;
   height: 0;
   padding-top: 133%;
   content: "";
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.current .content-image,
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container.current .content-text, :host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[direction] .content-image,
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[direction] .content-text {
+:host #stack .card.current .content-image,
+:host #stack .card.current .content-text, :host #stack .card[direction] .content-image,
+:host #stack .card[direction] .content-text {
   opacity: 1 !important;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[swiped] {
+:host #stack .card[swiped] {
   animation: fade-out 1s ease-out;
   animation-fill-mode: forwards;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[swiped=left] {
+:host #stack .card[swiped=left] {
   transform: translate(-100%, 15%) rotate(-15deg);
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[swiped=right] {
+:host #stack .card[swiped=right] {
   transform: translate(100%, 15%) rotate(15deg);
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container .content-category,
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container .content-image,
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container .content-text {
+:host #stack .card .content-category,
+:host #stack .card .content-image,
+:host #stack .card .content-text {
   position: absolute;
   width: 100%;
   height: 100%;
   word-break: break-word;
   opacity: 0;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container .content-category,
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container .content-text {
+:host #stack .card .content-category,
+:host #stack .card .content-text {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container .content-image {
+:host #stack .card .content-image {
   transition: opacity 0.25s linear;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[type=image] yoo-img {
+:host #stack .card[type=image] yoo-img {
   height: 100%;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[type=textimage] .content-image {
+:host #stack .card[type=textimage] .content-image {
   top: 0;
   bottom: 3.5rem;
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[type=textimage] .content-image yoo-img {
+:host #stack .card[type=textimage] .content-image yoo-img {
   height: calc(100% - 3.5rem);
 }
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[type=textimage] .content-text,
-:host .outer-container .game-container .swipecards-container .stacked-cards-container .card-container[type=textimage] .content-category {
+:host #stack .card[type=textimage] .content-text,
+:host #stack .card[type=textimage] .content-category {
   bottom: 0;
   height: 3.5rem;
 }
-:host .outer-container .game-container .swipecards-container .swipe-buttons {
+:host #actions {
   position: absolute;
   left: 50%;
   z-index: 1;
@@ -612,7 +603,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   line-height: 2.5;
   transform: translate(-50%, 80%);
 }
-:host .outer-container .game-container .swipecards-container .swipe-buttons .swipe-action {
+:host #actions .action {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -621,16 +612,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host([readonly]) {
-  height: fit-content;
-}
-:host([readonly]) .outer-container {
   display: flex;
   flex-direction: column;
+  height: fit-content;
 }
-:host([readonly]) .outer-container .category-title {
+:host([readonly]) .category-title {
   margin-bottom: var(--spacing-08, 0.5rem);
 }
-:host([readonly]) .outer-container ul {
+:host([readonly]) ul {
   display: grid;
   grid-gap: var(--spacing-16, 1rem);
   grid-template-columns: repeat(auto-fill, 6rem);
@@ -638,10 +627,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-left: 0;
   list-style: none;
 }
-:host([readonly]) .outer-container ul + .category-title {
+:host([readonly]) ul + .category-title {
   margin-top: var(--spacing-16, 1rem);
 }
-:host([readonly]) .outer-container ul li {
+:host([readonly]) ul li {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -651,55 +640,68 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-width: var(--border-width-01, 0.0625rem);
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host([readonly]) .outer-container ul li.invalid {
+:host([readonly]) ul li.invalid {
   border-color: var(--danger, #d44333);
 }
-:host([readonly]) .outer-container ul li.invalid yoo-img::before {
+:host([readonly]) ul li.invalid yoo-img::before {
   position: absolute;
   width: 100%;
   height: 100%;
   background: var(--danger-20, rgba(212, 67, 51, 0.2));
   content: "";
 }
-:host([readonly]) .outer-container ul li.invalid yoo-truncate {
+:host([readonly]) ul li.invalid yoo-truncate {
   background: var(--danger, #d44333);
 }
-:host([readonly]) .outer-container ul li.valid {
+:host([readonly]) ul li.valid {
   border-color: var(--success, #3aa76d);
 }
-:host([readonly]) .outer-container ul li.valid yoo-img::before {
+:host([readonly]) ul li.valid yoo-img::before {
   position: absolute;
   width: 100%;
   height: 100%;
   background: var(--success-20, rgba(58, 167, 109, 0.2));
   content: "";
 }
-:host([readonly]) .outer-container ul li.valid yoo-truncate {
+:host([readonly]) ul li.valid yoo-truncate {
   background: var(--success, #3aa76d);
 }
-:host([readonly]) .outer-container ul li yoo-img {
+:host([readonly]) ul li yoo-img {
   position: relative;
   flex-grow: 1;
 }
-:host([readonly]) .outer-container ul li yoo-truncate {
+:host([readonly]) ul li yoo-truncate {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--light, #ffffff);
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([readonly]) .outer-container ul li yoo-truncate:only-child {
+:host([readonly]) ul li yoo-truncate:only-child {
   --max-lines: 4;
   height: 100%;
   padding: 0 var(--spacing-08, 0.5rem);
 }
-:host([readonly]) .outer-container ul li yoo-truncate:not(:only-child) {
+:host([readonly]) ul li yoo-truncate:not(:only-child) {
   --max-lines: 1;
   height: 2.125rem;
   padding: 0 var(--spacing-04, 0.25rem);
 }
 
-:host([animated]) .swipe-action.hide > * {
+:host([animated]) #game {
+  animation: show 0.5s ease-in-out forwards;
+}
+@keyframes show {
+  from {
+    transform: scale(0.85);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+:host([animated]) .action.hide > * {
   animation: fadeOut 0.75s ease-in-out forwards;
 }
 @keyframes fadeOut {
@@ -710,7 +712,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 0;
   }
 }
-:host([animated]) .swipe-action:not(.hide) > * {
+:host([animated]) .action:not(.hide) > * {
   animation: fadeIn 0.75s ease-in-out forwards;
 }
 @keyframes fadeIn {
@@ -721,55 +723,50 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host([animated]) .swipe-action yoo-button {
+:host([animated]) .action yoo-button {
   transition: transform 0.8s linear;
 }
 
-:host(.web:not(.live-preview)) .instructions-container .top-description {
+:host([live-preview]) #instructions yoo-button,
+:host(.mobile) #instructions yoo-button {
+  position: absolute;
+  bottom: 0;
+  width: stretch;
+}
+
+:host(.web:not([live-preview])) #instructions #header {
   background: unset;
 }
-:host(.web:not(.live-preview)) .instructions-container yoo-button {
+:host(.web:not([live-preview])) #instructions yoo-button {
   position: fixed;
-  right: 0;
-  bottom: 0;
+  right: var(--spacing-16, 1rem);
+  bottom: var(--spacing-16, 1rem);
   z-index: 1;
+  transform: translateY(-50%);
 }
-:host(.web:not(.live-preview)) .instructions-container::after {
-  position: fixed;
-  bottom: 0px;
-  display: block;
-  width: 100%;
-  height: 4rem;
-  background-color: var(--light, #ffffff);
-  border-top: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
-  content: "";
-}
-:host(.web:not(.live-preview)) .game-container .top-description {
-  margin-bottom: var(--spacing-24, 1.5rem);
-}
-:host(.web:not(.live-preview)) .game-container .background {
+:host(.web:not([live-preview])) #game {
   max-height: 21rem;
 }
-:host(.web:not(.live-preview)) .game-container .background .stacked-cards-container {
-  top: 20%;
+:host(.web:not([live-preview])) #game #stack {
+  top: 5%;
   margin-top: unset;
   transform: translate(-50%, 0);
 }
-:host(.web:not(.live-preview)) .game-container .swipe-buttons {
+:host(.web:not([live-preview])) #actions {
   align-items: start;
   max-width: unset;
-  height: 10rem;
-  margin-top: 1rem;
-  margin-top: var(--spacing-08, 0.5rem);
+  margin-top: 2.5%;
   transform: translate(-50%, 0);
 }
-:host(.web:not(.live-preview)) .game-container .swipe-buttons .swipe-action:nth-child(2) {
+:host(.web:not([live-preview])) #actions .action:nth-child(2) {
   align-self: end;
 }
-:host(.web:not(.live-preview)) .top-description {
+:host(.web:not([live-preview])) #header {
+  margin-bottom: var(--spacing-24, 1.5rem);
+  line-height: 1.75;
   text-align: center;
 }
-:host(.web:not(.live-preview)) .top-description h1 {
-  margin: var(--spacing-08, 0.5rem) 0;
-  color: var(--dark, #000000);
+:host(.web:not([live-preview])) #header h1 {
+  margin: var(--spacing-08, 0.5rem) 0 !important;
+  color: var(--dark, #000000) !important;
 }