diff options
| author | James Hu <51237606+jameshu111@users.noreply.github.com> | 2023-07-26 12:15:46 -0400 |
|---|---|---|
| committer | James Hu <51237606+jameshu111@users.noreply.github.com> | 2023-07-26 12:15:46 -0400 |
| commit | 4a8cf5ee3fd6f01ff2d28ccc0a456e9782bd261b (patch) | |
| tree | a1a4ac7200a38f55227fff941d8d7246cb85eebf /src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss | |
| parent | 7c1017f15b9c0ad09d3e0185e310733ab7c10c09 (diff) | |
| parent | c87024c06941920f1df689d54d82cc309891e3d2 (diff) | |
Merge branch 'master' into james-azure-image
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 |