diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-08-28 14:53:19 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-08-28 14:53:19 +0200 |
commit | 670493bd8a029d8e3b6ab75778cb2fd0cb16378a (patch) | |
tree | 2745cc445e21da851f20337cea12ee98fbf1db4c /css/ContactDetails.scss | |
parent | 0b5f975b5288e1a9548260f9ac8f47453982f9a7 (diff) |
Dav lib 1
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'css/ContactDetails.scss')
-rw-r--r-- | css/ContactDetails.scss | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss new file mode 100644 index 00000000..78c453a3 --- /dev/null +++ b/css/ContactDetails.scss @@ -0,0 +1,126 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.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/>. + * + */ + +#contact-details { + + // header + header { + height: 100px; + 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 { + display: flex; + flex-direction: column; + flex: 1 1; + h2, + #details-org-container { + display: flex; + margin: 0; + } + input { + font-size: inherit; + color: #fff !important; + text-shadow: 0 0 2px var(--color-box-shadow); + background: transparent; + border: none; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + margin: 0; + padding: 4px 5px; + flex: 1 1; + &::placeholder { + color: #fff !important; + opacity: .8; + } + } + #contact-org { + max-width: 20%; + min-width: 10vw; + } + } + + // ACTIONS + #contact-header-actions { + position: relative; + .menu-icon { + height: 44px; + width: 44px; + padding: 14px; + cursor: pointer; + } + } + } + + $grid-column-width: 380px; + + // contact details + section.contact-details { + display: grid; + /* unquote is a strange hack to avoid removal of the comma by the scss compiler */ + grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr)); + grid-column-gap: 20px; + padding: 0 20px; + } +}
\ No newline at end of file |