diff options
author | Jessica <jessica@Absolventas-MacBook-Pro.local> | 2018-09-20 16:36:59 +0200 |
---|---|---|
committer | Jessica <jessica@Absolventas-MacBook-Pro.local> | 2018-09-20 16:36:59 +0200 |
commit | 649e370f68eb81bb01c2c2b59c87169addd01203 (patch) | |
tree | 2faf4c0b5f77467754c7c58bce671130cf2042d9 /css | |
parent | b99c0df19227bf83dd1912000473a01d4690a556 (diff) | |
parent | 16ddf705e61897ce45207edb47d0d81906a75ba4 (diff) |
added code for preview and merged in work on uploading photo from other branch, still needs full styling
Diffstat (limited to 'css')
-rw-r--r-- | css/contact-details-avatar.scss | 137 |
1 files changed, 96 insertions, 41 deletions
diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss index 07b494ba..68a6bdfd 100644 --- a/css/contact-details-avatar.scss +++ b/css/contact-details-avatar.scss @@ -21,44 +21,99 @@ * */ - // AVATAR - #contact-header-avatar { - position: relative; - height: 75px; - width: 75px; - border-radius: 50%; - overflow: hidden; - flex-shrink: 0; - margin: 0 22px 0 44px; - .contact-avatar-background { - background-color: var(--color-background-dark); - opacity: .2; - z-index: 0; - } - img { - z-index: 1; - } - label.icon-upload-white { - opacity: .5; - z-index: 2; - &:hover, - a:active, - a:focus { - opacity: .7; - } - } - img + label.icon-upload-white { - opacity: 0; - } - .contact-avatar-background, - img, - label.icon-upload-white { - position: absolute; - width: 100%; - height: 100%; - } - &__picture { - border-radius: 50%; - flex-shrink: 0; - } -}
\ No newline at end of file +// AVATAR +#contact-header-avatar { + position: relative; + height: 75px; + width: 75px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; + margin: 0 22px 0 44px; + .contact-avatar-background { + background-color: var(--color-background-dark); + opacity: .2; + z-index: 0; + } + img { + z-index: 10; + } + label.icon-upload-white { + opacity: .5; + z-index: 2; + &:hover, + a:active, + a:focus { + opacity: .7; + } + } + img + label.icon-upload-white { + opacity: 0; + } + .contact-avatar-background, + img, + label.icon-upload-white { + position: absolute; + width: 100%; + height: 100%; + } + .avatar-options { + top: 0; + background-color: rgba(0, 0, 0, 0.2); + width: 100%; + height: 100%; + overflow: hidden; + } +} + +#contact-header-avatar.maximised { + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + border-radius: 0; + padding: 20px; + background-color: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: center; + z-index: 200; + padding-top: 65px; + img { + width: auto; + height: auto; + border-radius: 0; + max-height: calc(100% - 40px); + max-width: 100%; + align-self: center; + margin-bottom: 40px; + } + .avatar-options { + height: 40px; + width: 100%; + position: absolute; + top: calc(100% - 40px); + left: 0; + display: flex; + opacity: 1; + padding: 0; + flex-wrap: wrap; + justify-content: space-around; + } + .avatar-options > [class^='icon-'] { + min-width: 25%; + display: block; + } +} + +.contact-header-avatar-options { + top: 0; + background-color: rgba(0, 0, 0, 0.2); + display: flex; + width: 100%; + height: 100%; + overflow: hidden; + +} + + |