@yoobic/yobi 8.3.0-9 → 8.3.0

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

@@ -296,119 +296,72 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: block !important;
 }
 
-:host {
+:host(:not([readonly])) {
   position: relative;
   display: block;
   height: 100%;
-  overflow: hidden;
 }
-:host yoo-banner {
+:host(:not([readonly])) yoo-banner {
   height: 0;
 }
-:host #instructions {
+:host(:not([readonly])) main {
+  display: grid;
   height: 100%;
   transition: opacity 1s ease-in-out;
 }
-:host #instructions #header {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
-  background: var(--dark, #000000);
-  border-radius: var(--border-radius-04, 0.25rem);
-}
-:host #instructions #header h1 {
-  margin: 0;
-  color: var(--light, #ffffff);
-}
-: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 #instructions #categories yoo-icon {
-  margin: 0 auto;
-}
-:host #instructions #categories .category {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 0;
-  color: var(--stable, #adadad);
-}
-:host #instructions #categories .category p {
-  max-width: 75%;
-  margin: auto;
-  padding: var(--spacing-16, 1rem) 0;
-}
-:host #instructions #categories .category yoo-tag {
-  margin: 0 auto;
-}
-:host #instructions yoo-button {
-  padding: var(--spacing-16, 1rem);
-}
-:host #instructions #document {
-  background-color: var(--light, #ffffff);
-}
-:host #instructions #document .document-title {
-  padding: 0 var(--spacing-16, 1rem);
-  font-size: var(--font-size-16, 1rem);
-}
-:host #instructions #document yoo-form-document {
-  --outer-container-padding: cssvar(spacing-16) cssvar(spacing-16);
-  width: calc(100% - var(--spacing-16, 1rem));
-}
-:host [direction].card {
-  z-index: 5;
+:host(:not([readonly])) [direction] .card {
   transition: transform 0.35s !important;
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
 }
-:host [direction].card.current .content-category {
-  color: var(--light, #ffffff);
-  opacity: 1 !important;
-  transition: opacity 0.35s linear;
+:host(:not([readonly])) [direction] .card.current [class^=content]::after {
+  opacity: 0.8 !important;
 }
-:host [direction].card.current.card + .card {
+:host(:not([readonly])) [direction] .card.current .content-text {
+  color: var(--stable-light, #f1f1f1);
+}
+:host(:not([readonly])) [direction] .card.current.card + .card {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
 }
-:host [direction].card.current.card + .card .content-image,
-:host [direction].card.current.card + .card .content-text {
+:host(:not([readonly])) [direction] .card.current.card + .card .content-image,
+:host(:not([readonly])) [direction] .card.current.card + .card .content-text {
   opacity: 1 !important;
 }
-:host [direction].card.current.card + .card + .card {
+:host(:not([readonly])) [direction] .card.current.card + .card + .card {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
 }
-:host [direction].card.current.card + .card + .card + .card {
+:host(:not([readonly])) [direction] .card.current.card + .card + .card + .card {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
 }
-:host [direction=left]#game, :host [direction=left].current > .content-category {
+:host(:not([readonly])) [direction=left] #background,
+:host(:not([readonly])) [direction=left] .current [class^=content]::after {
   background-color: var(--app-color, #5a30f4) !important;
 }
-:host [direction=left].current {
+:host(:not([readonly])) [direction=left] .current {
   transform: translate(0%, 9%) scale(1) rotate(-3.5deg) !important;
 }
-:host [direction=right]#game, :host [direction=right].current > .content-category {
+:host(:not([readonly])) [direction=right] #background,
+:host(:not([readonly])) [direction=right] .current [class^=content]::after {
   background-color: var(--warning, #ed6e33) !important;
 }
-:host [direction=right].current {
+:host(:not([readonly])) [direction=right] .current {
   transform: translate(0%, 9%) scale(1) rotate(3.5deg) !important;
 }
-:host #game {
+:host(:not([readonly])) #game #background {
   position: relative;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  max-height: calc(min(65vw, 16rem) * 1.3333333333 - var(--spacing-40, 2.5rem));
   background-color: var(--dark, #000000);
   transition: background-color 0.25s ease-in-out;
 }
-:host #game #end-message {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: calc(100% - 4rem);
-  max-width: 25rem;
+:host(:not([readonly])) #game #end-message {
+  display: grid;
   color: var(--light, #ffffff);
   font-size: var(--font-size-18, 1.125rem);
   text-align: center;
@@ -416,56 +369,41 @@ 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 #game #end-message.rtl {
-  top: 50%;
-  right: 50%;
-  transform: translate(50%, -50%);
-}
-:host #game #end-message yoo-lottie {
+:host(:not([readonly])) #game #end-message yoo-lottie {
   width: 30%;
   margin: 0 auto;
 }
-:host #game #end-message div {
-  padding: var(--spacing-16, 1rem) 0;
+:host(:not([readonly])) #game #end-message div {
   font-weight: bold;
   font-size: var(--font-size-24, 1.5rem);
 }
-:host #game #end-message.active {
+:host(:not([readonly])) #game #end-message span {
+  padding-top: var(--spacing-16, 1rem);
+}
+:host(:not([readonly])) #game #end-message.active {
   visibility: visible;
   opacity: 1;
 }
-:host #game:after {
-  display: block;
-  height: 0;
-  padding-top: 85%;
-  content: "";
+:host(:not([readonly])) #cards,
+:host(:not([readonly])) .card {
+  width: 100%;
+  height: 100%;
 }
-:host #stack {
+:host(:not([readonly])) #cards {
   position: absolute;
-  top: 50%;
+  top: 0;
   left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  width: 65%;
-  max-width: 25rem;
-  height: 100%;
+  max-width: min(65vw, 16rem);
+  max-height: calc(min(65vw, 16rem) * 1.3333333333 - var(--spacing-40, 2.5rem));
   margin-top: var(--spacing-16, 1rem);
+  transform: translateX(-50%);
 }
-:host #stack.rtl {
-  top: 50%;
-  right: 50%;
-  transform: translate(50%, -50%);
-}
-:host #stack .card {
+:host(:not([readonly])) #cards .card {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  width: 100%;
-  max-width: 16rem;
-  height: 100%;
-  max-height: 21.3333333333rem;
   margin: 0 auto;
   overflow: hidden;
   color: var(--dark, #000000);
@@ -475,20 +413,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));
   transition: transform 0.25s, opacity 0.25s, background-color 0.25s;
+  will-change: transform, opacity;
 }
-:host #stack .card:not([direction]) {
+:host(:not([readonly])) #cards .card:not([direction]) {
   transform: translate(0, -5%) scale(0.85);
   opacity: 0;
 }
-:host #stack .card.current {
+:host(:not([readonly])) #cards .card.current {
   z-index: 3;
 }
-:host #stack .card.current:not(.revealing) {
+:host(:not([readonly])) #cards .card.current:not(.revealing) {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
   transition-delay: 200ms;
 }
-:host #stack .card.current.revealing {
+:host(:not([readonly])) #cards .card.current.revealing {
   animation: "current" 0.25s ease-in-out;
   animation-delay: 150ms;
   animation-fill-mode: forwards;
@@ -499,15 +438,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.second {
+:host(:not([readonly])) #cards .card.second {
   z-index: 2;
 }
-:host #stack .card.second:not(.revealing) {
+:host(:not([readonly])) #cards .card.second:not(.revealing) {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
   transition-delay: 400ms;
 }
-:host #stack .card.second.revealing {
+:host(:not([readonly])) #cards .card.second.revealing {
   animation: "second" 0.25s ease-in-out;
   animation-delay: 300ms;
   animation-fill-mode: forwards;
@@ -518,15 +457,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.third {
+:host(:not([readonly])) #cards .card.third {
   z-index: 1;
 }
-:host #stack .card.third:not(.revealing) {
+:host(:not([readonly])) #cards .card.third:not(.revealing) {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
   transition-delay: 600ms;
 }
-:host #stack .card.third.revealing {
+:host(:not([readonly])) #cards .card.third.revealing {
   animation: "third" 0.25s ease-in-out;
   animation-delay: 450ms;
   animation-fill-mode: forwards;
@@ -534,81 +473,94 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 @keyframes third {
   to {
     transform: translate(0%, -2%) scale(0.9);
-    opacity: 0.7;
+    opacity: 1;
   }
 }
-:host #stack .card:after {
-  display: block;
-  height: 0;
-  padding-top: 133%;
-  content: "";
+:host(:not([readonly])) #cards .card.current [class^=content],
+:host(:not([readonly])) #cards .card.current [class^=content]::after {
+  transition: color 0.5s, background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+:host(:not([readonly])) #cards .card.current [class^=content]::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--light, #ffffff);
+  opacity: 0;
+  content: attr(data-category);
 }
-:host #stack .card.current .content-image,
-:host #stack .card.current .content-text, :host #stack .card[direction] .content-image,
-:host #stack .card[direction] .content-text {
+:host(:not([readonly])) #cards .card.current .content-image,
+:host(:not([readonly])) #cards .card.current .content-text, :host(:not([readonly])) #cards .card[direction] .content-image,
+:host(:not([readonly])) #cards .card[direction] .content-text {
   opacity: 1 !important;
 }
-:host #stack .card[swiped] {
+:host(:not([readonly])) #cards .card[swiped] {
   animation: fade-out 1s ease-out;
   animation-fill-mode: forwards;
 }
-:host #stack .card[swiped=left] {
+:host(:not([readonly])) #cards .card[swiped=left] {
   transform: translate(-100%, 15%) rotate(-15deg);
 }
-:host #stack .card[swiped=right] {
+:host(:not([readonly])) #cards .card[swiped=right] {
   transform: translate(100%, 15%) rotate(15deg);
 }
-:host #stack .card .content-category,
-:host #stack .card .content-image,
-:host #stack .card .content-text {
+:host(:not([readonly])) #cards .card [class^=content] {
   position: absolute;
   width: 100%;
   height: 100%;
   word-break: break-word;
-  opacity: 0;
 }
-:host #stack .card .content-category,
-:host #stack .card .content-text {
+:host(:not([readonly])) #cards .card .content-text {
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  padding: var(--spacing-16, 1rem);
 }
-:host #stack .card .content-image {
+:host(:not([readonly])) #cards .card .content-image {
   transition: opacity 0.25s linear;
 }
-:host #stack .card[type=image] yoo-img {
+:host(:not([readonly])) #cards .card[type=image] yoo-img {
   height: 100%;
 }
-:host #stack .card[type=textimage] .content-image {
+:host(:not([readonly])) #cards .card[type=textimage] .content-image {
   top: 0;
   bottom: 3.5rem;
 }
-:host #stack .card[type=textimage] .content-image yoo-img {
+:host(:not([readonly])) #cards .card[type=textimage] .content-image yoo-img {
   height: calc(100% - 3.5rem);
 }
-:host #stack .card[type=textimage] .content-text,
-:host #stack .card[type=textimage] .content-category {
+:host(:not([readonly])) #cards .card[type=textimage] .content-text {
   bottom: 0;
   height: 3.5rem;
 }
-:host #actions {
+:host(:not([readonly])) #actions {
   position: absolute;
-  left: 50%;
-  z-index: 1;
+  top: calc(109% + var(--spacing-16, 1rem));
   display: inline-grid;
   grid-template-columns: 1fr 1fr 1fr;
   width: 100%;
-  max-width: 85%;
+  max-width: min(65vw, 16rem);
+  margin-top: var(--spacing-16, 1rem);
+  padding-bottom: var(--spacing-16, 1rem);
   line-height: 2.5;
-  transform: translate(-50%, 80%);
 }
-:host #actions .action {
+:host(:not([readonly])) #actions .action {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
+  line-height: 1.75;
   text-align: center;
 }
+:host(:not([readonly])) #actions .action yoo-button {
+  margin-bottom: var(--spacing-08, 0.5rem);
+}
 
 :host([readonly]) {
   display: flex;
@@ -726,46 +678,106 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: transform 0.8s linear;
 }
 
-:host([live-preview]) #instructions yoo-button,
-:host(.mobile) #instructions yoo-button {
-  position: absolute;
-  bottom: 0;
-  width: stretch;
+:host([live-preview][view=instructions]) #instructions #header,
+:host(.mobile[view=instructions]) #instructions #header {
+  padding: var(--spacing-16, 1rem);
+  background: var(--dark, #000000);
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+:host([live-preview][view=instructions]) #instructions #header #title,
+:host(.mobile[view=instructions]) #instructions #header #title {
+  color: var(--light, #ffffff);
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
+}
+
+:host(.web:not([live-preview])) #cards {
+  transform: translate(-50%, 0);
+}
+:host(.web:not([live-preview])) .action:nth-child(2) {
+  margin-top: calc(10% + 3rem);
+}
+:host(.web:not([live-preview])) #header {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+  line-height: 1.75;
+  text-align: center;
+  background-color: var(--stable-ultralight, #fafafa);
+}
+:host(.web:not([live-preview])) #header #title {
+  color: var(--dark, #000000) !important;
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
+}
+
+:host(.web:not([live-preview])[view=game]) main {
+  grid-template-rows: auto 100% 1fr;
+}
+:host(.web:not([live-preview])[view=game]) main #actions {
+  top: 109%;
+  min-width: 32rem;
+  margin-top: 0;
 }
 
-:host(.web:not([live-preview])) #instructions #header {
-  background: unset;
+:host(.web:not([live-preview])[view=instructions]) yoo-icon[name=swipe-explanation] {
+  width: 5rem;
+  height: 5rem;
+  margin: auto;
+  --inner-width: 5rem;
+  --inner-height: 5rem;
 }
-:host(.web:not([live-preview])) #instructions yoo-button {
+:host(.web:not([live-preview])[view=instructions]) yoo-button {
   position: fixed;
-  right: var(--spacing-16, 1rem);
+  right: var(--spacing-32, 2rem);
   bottom: var(--spacing-16, 1rem);
-  z-index: 1;
-  transform: translateY(-50%);
-}
-:host(.web:not([live-preview])) #game {
-  max-height: 21rem;
 }
-:host(.web:not([live-preview])) #game #stack {
-  top: 5%;
-  margin-top: unset;
-  transform: translate(-50%, 0);
+
+:host([view=instructions]) main {
+  grid-template-rows: 1fr auto;
 }
-:host(.web:not([live-preview])) #actions {
-  align-items: start;
-  max-width: unset;
-  margin-top: 2.5%;
-  transform: translate(-50%, 0);
+:host([view=instructions]) main #instructions #header {
+  display: flex;
+  flex-direction: column;
 }
-:host(.web:not([live-preview])) #actions .action:nth-child(2) {
-  align-self: end;
+:host([view=instructions]) main #instructions #header #title {
+  font-weight: bold;
 }
-:host(.web:not([live-preview])) #header {
-  margin-bottom: var(--spacing-24, 1.5rem);
-  line-height: 1.75;
+:host([view=instructions]) main #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(.web:not([live-preview])) #header h1 {
-  margin: var(--spacing-08, 0.5rem) 0 !important;
-  color: var(--dark, #000000) !important;
+:host([view=instructions]) main #instructions #categories .category {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 0;
+  color: var(--stable, #adadad);
+}
+:host([view=instructions]) main #instructions #categories .category p {
+  max-width: 75%;
+  margin: auto;
+  padding: var(--spacing-16, 1rem) 0;
+  font-weight: bold;
+}
+:host([view=instructions]) main #instructions #categories .category yoo-tag {
+  margin: 0 auto;
+}
+:host([view=instructions]) main #instructions #document {
+  background-color: var(--light, #ffffff);
+}
+:host([view=instructions]) main #instructions #document .document-title {
+  padding: 0 var(--spacing-16, 1rem);
+  font-size: var(--font-size-16, 1rem);
+}
+:host([view=instructions]) main #instructions #document yoo-form-document {
+  --outer-container-padding: cssvar(spacing-16) cssvar(spacing-16);
+  width: calc(100% - var(--spacing-16, 1rem));
+}
+:host([view=instructions]) main yoo-button {
+  align-items: flex-end;
+  padding-bottom: var(--spacing-16, 1rem);
 }