@wix/thunderbolt-common-css 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/thunderbolt-common-css",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "UNLICENSED",
   "main": "dist/index.css",
   "files": [
@@ -36,5 +36,5 @@
       ]
     }
   },
-  "falconPackageHash": "3c32c6dfacc615b0f7c3473f788bbe3608cf40430e30fa4dfa3db148"
+  "falconPackageHash": "fb921dfb7d01d8705ea80e15adb78f1c5f15ae53a606adf60268f863"
 }

package/src/assets/scss/view-transitions.scss

@@ -0,0 +1,97 @@
+@keyframes slide-horizontal-new {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-horizontal-old {
+  80% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-vertical-new {
+  from {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slide-vertical-old {
+  80% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+@keyframes out-in-new {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes out-in-old {
+  to {
+    opacity: 0;
+  }
+}
+
+$easeQuintIn: cubic-bezier(0.64, 0, 0.78, 0);
+$easeQuintOut: cubic-bezier(0.22, 1, 0.36, 1);
+$easeQuintInOut: cubic-bezier(0.83, 0, 0.17, 1);
+
+// disable the default cross fade view transition
+:root:active-view-transition {
+  view-transition-name: none;
+}
+
+// disable default stylesheet rule, allow clicks on the non transitioning elements (i.e. menu) during transition
+::view-transition {
+  pointer-events: none;
+}
+
+:root:active-view-transition::view-transition-old(page-group),
+:root:active-view-transition::view-transition-new(page-group) {
+  pointer-events: all;
+  cursor: wait;
+  animation-duration: 600ms; // Change from the default CrossFade view-transition
+}
+
+:root:active-view-transition-type(SlideHorizontal)::view-transition-old(page-group) {
+  mix-blend-mode: normal;
+  animation: slide-horizontal-old 600ms $easeQuintInOut forwards;
+}
+:root:active-view-transition-type(SlideHorizontal)::view-transition-new(page-group) {
+  mix-blend-mode: normal;
+  animation: slide-horizontal-new 600ms $easeQuintInOut backwards;
+}
+
+:root:active-view-transition-type(SlideVertical)::view-transition-old(page-group) {
+  mix-blend-mode: normal;
+  animation: slide-vertical-old 600ms $easeQuintInOut forwards;
+}
+:root:active-view-transition-type(SlideVertical)::view-transition-new(page-group) {
+  mix-blend-mode: normal;
+  animation: slide-vertical-new 600ms $easeQuintInOut backwards;
+}
+
+:root:active-view-transition-type(OutIn)::view-transition-old(page-group) {
+  animation: out-in-old 350ms $easeQuintOut forwards;
+}
+:root:active-view-transition-type(OutIn)::view-transition-new(page-group) {
+  animation: out-in-new 350ms 350ms $easeQuintIn backwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

package/src/viewer.global.scss

@@ -0,0 +1,94 @@
+@import "./assets/scss/view-transitions.scss";
+
+/* Global reset rules: */
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+body {
+  font-size: 10px;
+  font-family: Arial, Helvetica, sans-serif;
+  --scrollbar-width: 0px;
+}
+
+// *
+// * Set body and site structure to a minimum height of 100%
+// * this causes the body to be smaller than it's content, which means that when scrolling it looks like the content is out of body.
+// *
+html,
+body {
+  height: 100%;
+}
+
+// *************************************
+// * Body overflow settings, BE CAREFUL WHEN CHANGING THIS
+// *
+
+//  When in Public Viewer Mode
+body {
+  overflow-x: auto;
+  overflow-y: scroll;
+}
+
+/* Global root rules: */
+
+body:not(.responsive) {
+  #site-root {
+    width: 100%;
+    min-width: var(--site-width);
+  }
+}
+
+body:not([data-js-loaded]) [data-hide-prejs] {
+  visibility: hidden;
+}
+
+interact-element {
+  display: contents;
+}
+
+#SITE_CONTAINER {
+  position: relative;
+}
+
+:root {
+  --one-unit: 1vw;
+  --section-max-width: 9999px;
+  --spx-stopper-max: 9999px;
+  --spx-stopper-min: 0px;
+  --browser-zoom: 1;
+}
+
+// We want to apply this only to Safari, using this hack which is supposed to work for at least Safari 13:
+// https://caniuse.com/?search=stroke-color
+// Was tested on Dec 2023 for Safari 17, iOS Safari 17, Chrome 120, firefox 120
+// (@see same usage in editor elements TextMask)
+@supports (-webkit-appearance: none) and (stroke-color: transparent) {
+  :root {
+    --safari-sticky-fix: opacity;
+    --experimental-safari-sticky-fix: translateZ(0);
+  }
+}
+
+@supports (container-type:inline-size) {
+  :root {
+    --one-unit: 1cqw;
+  }
+}
+
+// Global styles for old Hoverbox migration
+[id^="oldHoverBox-"] {
+  transition: opacity 0.5s ease, visibility 0.5s ease;
+  mix-blend-mode: plus-lighter;
+}
+
+[data-mesh-id$="inlineContent-gridContainer"]:has(> [id^="oldHoverBox-"]) {
+  isolation: isolate;
+}