diff options
| author | Sophie Zhang <sophie_zhang@brown.edu> | 2023-07-18 15:06:22 -0400 |
|---|---|---|
| committer | Sophie Zhang <sophie_zhang@brown.edu> | 2023-07-18 15:06:22 -0400 |
| commit | 40784b7265851b27e043c07e5f9038a0b29af8b7 (patch) | |
| tree | 1f9e154913820cc1cb5952a9d444d9a0eca86c29 /src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss | |
| parent | 162ca319eae256be523f2ee75e7aae7a9a408e37 (diff) | |
| parent | 267f5d7c6a87b955c2fa2121c6db7e01cfc1c148 (diff) | |
Merge branch 'master' into sophie-ai-images
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 |