diff options
| author | eperelm2 <emily_perelman@brown.edu> | 2023-07-18 11:40:12 -0400 |
|---|---|---|
| committer | eperelm2 <emily_perelman@brown.edu> | 2023-07-18 11:40:12 -0400 |
| commit | 5100a643fb0d98b6dd738e7024f4fe15f56ba1a8 (patch) | |
| tree | 92fa39d2d5cc8f584e3346c8fe0efaa5b184a9e5 /src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss | |
| parent | c9779f31d9ce2363e61c3c9fa7e3446203622dde (diff) | |
| parent | 16a1b7de3ec26187b3a426eb037a5e4f4b9fcc55 (diff) | |
Merge branch 'master' into secondpropertiesmenu-emily
Diffstat (limited to 'src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss')
| -rw-r--r-- | src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss new file mode 100644 index 000000000..e541e3f3c --- /dev/null +++ b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss @@ -0,0 +1,82 @@ +@import '../../NewLightboxStyles.scss'; + +.skeletonDoc-container { + display: flex; + flex-direction: column; + height: calc(100% - 40px); + margin: 20px; + gap: 20px; + + .header { + width: calc(100% - 20px); + height: 80px; + background: $gray-l2; + animation: skeleton-loading-l2 1s linear infinite alternate; + display: grid; + grid-template-rows: 60% 40%; + padding: 10px; + grid-template-columns: auto auto auto auto; + border-radius: 20px; + + .title { + grid-row: 1; + grid-column: 1 / 5; + display: flex; + width: fit-content; + height: 100%; + min-width: 500px; + font-size: $title-size; + animation: skeleton-loading-l3 1s linear infinite alternate; + border-radius: 20px; + } + + .type { + display: flex; + padding: 3px 7px; + width: fit-content; + height: fit-content; + margin-top: 8px; + min-height: 15px; + min-width: 60px; + grid-row: 2; + grid-column: 1; + animation: skeleton-loading-l3 1s linear infinite alternate; + border-radius: 20px; + } + + .buttons-container { + grid-row: 1 / 3; + grid-column: 5; + display: flex; + justify-content: flex-end; + align-items: center; + gap: 10px; + + .button { + width: 50px; + height: 50px; + border-radius: 100%; + animation: skeleton-loading-l3 1s linear infinite alternate; + } + } + + } + + .content { + width: 100%; + flex: 1; + -webkit-flex: 1; /* Chrome */ + background: $gray-l2; + animation: skeleton-loading-l2 1s linear infinite alternate; + border-radius: 20px; + } + + // &.dark { + // background: $black; + // } + + // &.light, + // &.default { + // background: $white; + // } +}
\ No newline at end of file |