diff options
author | suntala <suntala@hotmail.com> | 2018-09-27 22:33:53 +0200 |
---|---|---|
committer | suntala <suntala@hotmail.com> | 2018-09-27 22:33:53 +0200 |
commit | 9b85192e9a60879528f8b4b25e10e882374c3f18 (patch) | |
tree | 3cf8b4c4d99c55b6ee2b355b2b86c1aec142b9f0 /css | |
parent | 96f0afd98ae57983c7552966914e2d0d13fed62b (diff) | |
parent | 8ad001cb14a3a3b0b4f1d4e65f9ac169de71e56e (diff) |
Merge branch 'vue-avatar-management' of https://github.com/nextcloud/contacts into vue-avatar-management
Diffstat (limited to 'css')
-rw-r--r-- | css/ContactDetails.scss | 38 | ||||
-rw-r--r-- | css/contact-details-avatar.scss | 136 | ||||
-rw-r--r-- | css/contacts.scss | 3 |
3 files changed, 138 insertions, 39 deletions
diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss index baefdb01..07948d3b 100644 --- a/css/ContactDetails.scss +++ b/css/ContactDetails.scss @@ -28,44 +28,6 @@ display: flex; font-weight: bold; align-items: center; - - // 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%; - } - } // ORG-TITLE-NAME #contact-header-infos { diff --git a/css/contact-details-avatar.scss b/css/contact-details-avatar.scss new file mode 100644 index 00000000..1d010758 --- /dev/null +++ b/css/contact-details-avatar.scss @@ -0,0 +1,136 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * @author Team Popcorn <teampopcornberlin@gmail.com> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + */ + +// AVATAR +.contact-header-avatar { + position: relative; + height: 75px; + width: 75px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; + margin: 0 22px 0 44px; + &__background { + opacity: .2; + z-index: 0; + left: 0; + top: 50px; + margin-left: 300px; + } + 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; + } + &__background, + img, + label.icon-upload-white { + position: absolute; + width: 100%; + height: 100%; + } + &__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; + // 300px padding on left to compensate for app-navigation having 1000 z-index + padding: 20px 20px 20px 300px; + margin: 0px; + 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; + } + label.icon-upload-white { + width: 25%; + height: 40px; + position: relative; + } + .contact-header-avatar__options { + height: 40px; + width: 100%; + position: absolute; + top: calc(100% - 40px); + left: 0; + display: flex; + opacity: 1; + padding: 0; + // 300px padding on left to compensate for app-navigation having 1000 z-index + padding-left: 300px; + flex-wrap: wrap; + justify-content: space-around; + background-color: rgba(0, 0, 0, 0.2); + } + .contact-header-avatar__options > [class^='icon-'] { + width: 25%; + display: block; + cursor: pointer; + opacity: 0.5; + } + .contact-header-avatar__options > [class^='icon-']:hover { + opacity: 0.8; + } +} + +.contact-header-avatar-options { + top: 0; + background-color: rgba(0, 0, 0, 0.2); + display: flex; + width: 100%; + height: 100%; + overflow: hidden; + +} + + diff --git a/css/contacts.scss b/css/contacts.scss index 0087327e..50016148 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -43,8 +43,9 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; @import 'settings/settings-addressbook-shares'; @import 'settings/settings-addressbook-sharee'; @import 'ContactDetails'; +@import 'contact-details-avatar'; @import 'ContentListItem'; @import 'Properties/Properties'; @import 'Properties/PropertyTitle'; @import 'importScreen'; -@import 'animations';
\ No newline at end of file +@import 'animations'; |