diff --git a/client/scss/components/_messages.scss b/client/scss/components/_messages.scss index 4b1afdbc91..25ef299f7e 100644 --- a/client/scss/components/_messages.scss +++ b/client/scss/components/_messages.scss @@ -83,7 +83,10 @@ .ready .messages > ul, .messages.appear > ul { - transition: top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease; + transition: + top 0.5s ease, + opacity 0.5s ease, + max-height 1.2s ease; opacity: 1; top: 0; } diff --git a/client/scss/components/_userbar.scss b/client/scss/components/_userbar.scss index 42a2c0af8e..590c48312f 100644 --- a/client/scss/components/_userbar.scss +++ b/client/scss/components/_userbar.scss @@ -8,7 +8,8 @@ $size-home-button: 3.5em; $position: 2em; -$box-shadow-props: 0 0 1px 0 rgba(107, 214, 230, 1), +$box-shadow-props: + 0 0 1px 0 rgba(107, 214, 230, 1), 0 1px 10px 0 rgba(107, 214, 230, 0.7); $max-items: 12; $userbar-radius: 6px; diff --git a/client/scss/components/forms/_select.scss b/client/scss/components/forms/_select.scss index e76ca0a2b0..305d5cb3a7 100644 --- a/client/scss/components/forms/_select.scss +++ b/client/scss/components/forms/_select.scss @@ -22,10 +22,12 @@ $chevron-inline-end-offset: math.div($select-size - $chevron-width, 2); theme('colors.text-label') 66%, transparent 66% ); - background-position: calc(100% - $chevron-top-offset - $chevron-width) - $chevron-top-offset, + background-position: + calc(100% - $chevron-top-offset - $chevron-width) $chevron-top-offset, calc(100% - $chevron-inline-end-offset) $chevron-top-offset; - background-size: $chevron-width $chevron-width, $chevron-width $chevron-width; + background-size: + $chevron-width $chevron-width, + $chevron-width $chevron-width; background-repeat: no-repeat; } diff --git a/client/scss/elements/_elements.scss b/client/scss/elements/_elements.scss index 70cf1cb4ce..efea35916b 100644 --- a/client/scss/elements/_elements.scss +++ b/client/scss/elements/_elements.scss @@ -41,7 +41,9 @@ body { &:after { content: ''; position: fixed; - transition: visibility 0s linear 0s, opacity 0.2s ease-out; + transition: + visibility 0s linear 0s, + opacity 0.2s ease-out; background: theme('colors.white-50'); width: 100%; height: 100%; diff --git a/client/src/components/CommentApp/components/Comment/style.scss b/client/src/components/CommentApp/components/Comment/style.scss index 6512fe398c..bb2f45c622 100644 --- a/client/src/components/CommentApp/components/Comment/style.scss +++ b/client/src/components/CommentApp/components/Comment/style.scss @@ -3,7 +3,9 @@ width: 300px; display: block; - transition: top 0.5s ease 0s, inset-inline-end 0.5s ease 0s, + transition: + top 0.5s ease 0s, + inset-inline-end 0.5s ease 0s, height 0.5s ease 0s; pointer-events: auto; padding-bottom: 0; diff --git a/client/src/components/Sidebar/modules/WagtailBranding.scss b/client/src/components/Sidebar/modules/WagtailBranding.scss index 091f5bf6bb..119a58aead 100644 --- a/client/src/components/Sidebar/modules/WagtailBranding.scss +++ b/client/src/components/Sidebar/modules/WagtailBranding.scss @@ -22,8 +22,10 @@ $logo-size: 110px; text-align: center; width: $logo-size; height: $logo-size; - transition: transform 150ms cubic-bezier(0.28, 0.15, 0, 2.1), - width $menu-transition-duration ease, height $menu-transition-duration ease, + transition: + transform 150ms cubic-bezier(0.28, 0.15, 0, 2.1), + width $menu-transition-duration ease, + height $menu-transition-duration ease, padding-top $menu-transition-duration ease; border-radius: 100%; diff --git a/client/src/components/StreamField/blocks/BaseSequenceBlock.js b/client/src/components/StreamField/blocks/BaseSequenceBlock.js index 1f76d84814..89b5c87fa8 100644 --- a/client/src/components/StreamField/blocks/BaseSequenceBlock.js +++ b/client/src/components/StreamField/blocks/BaseSequenceBlock.js @@ -2,8 +2,8 @@ /* global $ */ -import { v4 as uuidv4 } from 'uuid'; import EventEmitter from 'events'; +import { v4 as uuidv4 } from 'uuid'; import { escapeHtml as h } from '../../../utils/text'; import { initCollapsiblePanel, @@ -146,11 +146,11 @@ export class BaseSequenceChild extends EventEmitter { + this.type || '', + )}"> + this.id || '', + )}">
diff --git a/client/src/components/Transition/Transition.scss b/client/src/components/Transition/Transition.scss index 64b2ededa7..0e44c22ac5 100644 --- a/client/src/components/Transition/Transition.scss +++ b/client/src/components/Transition/Transition.scss @@ -12,7 +12,8 @@ $c-transition-duration: 200ms; .c-transition-push-enter { transform: translateX(calc(var(--w-direction-factor) * 100%)); - transition: transform $c-transition-duration ease, + transition: + transform $c-transition-duration ease, opacity $c-transition-duration linear; opacity: 0; } @@ -24,7 +25,8 @@ $c-transition-duration: 200ms; .c-transition-push-leave { transform: translateX(0); - transition: transform $c-transition-duration ease, + transition: + transform $c-transition-duration ease, opacity $c-transition-duration linear; opacity: 1; } @@ -39,7 +41,8 @@ $c-transition-duration: 200ms; // ============================================================================= .c-transition-pop-enter { transform: translateX(calc(var(--w-direction-factor) * -100%)); - transition: transform $c-transition-duration ease, + transition: + transform $c-transition-duration ease, opacity $c-transition-duration linear; opacity: 0; } @@ -51,7 +54,8 @@ $c-transition-duration: 200ms; .c-transition-pop-leave { transform: translateX(0); - transition: transform $c-transition-duration ease, + transition: + transform $c-transition-duration ease, opacity $c-transition-duration linear; opacity: 1; }