diff options
| author | Sophie Zhang <sophie_zhang@brown.edu> | 2023-07-18 12:21:17 -0400 |
|---|---|---|
| committer | Sophie Zhang <sophie_zhang@brown.edu> | 2023-07-18 12:21:17 -0400 |
| commit | 8410cd330b676ce50948b2ec1011a72b219ee87b (patch) | |
| tree | 2009a9cd1942cf9662786fdbc2b20c6f0713cb60 /src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss | |
| parent | 2bfad0eb9e3d8f8d26f66cf8e6daa801a694cab0 (diff) | |
| parent | 4e1bc2547787e9b1978c23da2045eb46407e1e3c (diff) | |
Merge branch 'master' into sophie-report-manager
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 |