diff --git a/assets/sass/_page_upload.sass b/assets/sass/_page_upload.sass index ec2917238f0b8db46d5b76df6780f90613e9fcc4..34f8be9a09c48ec0c637bd3891f44c35ce972e38 100644 --- a/assets/sass/_page_upload.sass +++ b/assets/sass/_page_upload.sass @@ -57,41 +57,48 @@ top: 0 bottom: 0 opacity: 0 - .uploading.images - .detail - .image - position: relative - .progress - position: absolute - top: -4px - left: 0 - right: 0 - height: 4px - display: block - background-color: rgba(255, 193, 7, 0.2) - overflow: hidden - transition: opacity 400ms - .indeterminate - background-color: rgba(255, 193, 7, 0.8) - &::before - content: '' - position: absolute - background-color: inherit - top: 0 - left: 0 - bottom: 0 - will-change: left, right - animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite - &::after - content: '' - position: absolute - background-color: inherit - top: 0 - left: 0 - bottom: 0 - will-change: left, right - animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite - animation-delay: 1.125s + .uploading + display: flex + flex-direction: row + .images + display: flex + flex-direction: column + align-items: stretch + flex-grow: 1 + .detail + .image + position: relative + .progress + position: absolute + top: -4px + left: 0 + right: 0 + height: 4px + display: block + background-color: rgba(255, 193, 7, 0.2) + overflow: hidden + transition: opacity 400ms + .indeterminate + background-color: rgba(255, 193, 7, 0.8) + &::before + content: '' + position: absolute + background-color: inherit + top: 0 + left: 0 + bottom: 0 + will-change: left, right + animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite + &::after + content: '' + position: absolute + background-color: inherit + top: 0 + left: 0 + bottom: 0 + will-change: left, right + animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite + animation-delay: 1.125s &:not(.uploading) .progress opacity: 0 &.submitted .container.centered