diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/boards.scss')
-rw-r--r-- | app/assets/stylesheets/page_bundles/boards.scss | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 3d1ae3519a9..620b37914d8 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -138,6 +138,47 @@ border: 1px solid var(--gray-100, $gray-100); } +// to highlight columns we have animated pulse of box-shadow +// we don't want to actually animate the box-shadow property +// because that causes costly repaints. Instead we can add a +// pseudo-element that is the same size as our element, then +// animate opacity/transform to give a soothing single pulse +.board-column-highlighted::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + pointer-events: none; + opacity: 0; + z-index: -1; + box-shadow: 0 0 6px 3px $blue-200; + animation-name: board-column-flash-border; + animation-duration: 1.2s; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; +} + +@keyframes board-column-flash-border { + 0%, + 100% { + opacity: 0; + transform: scale(0.98); + } + + 25%, + 75% { + opacity: 1; + transform: scale(0.99); + } + + 50% { + opacity: 1; + transform: scale(1); + } +} + .board-header { &.has-border::before { border-top: 3px solid; |