From 5b6ef56b878167cf982400d09a4b4c08d018e322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 13 Aug 2017 19:52:03 +0200 Subject: Switch to scss, variables and importscreen design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/public/style.css | 752 ---------------------------------------------- css/public/style.scss | 802 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 802 insertions(+), 752 deletions(-) delete mode 100644 css/public/style.css create mode 100644 css/public/style.scss diff --git a/css/public/style.css b/css/public/style.css deleted file mode 100644 index 5d44cbef..00000000 --- a/css/public/style.css +++ /dev/null @@ -1,752 +0,0 @@ -.contactdetails__header { - height: 100px; - padding-left: 20px; - display: flex; - color: #fff; - font-weight: bold; - align-items: center; -} - -.contactdetails__header #details-contact-infos { - width: 80%; - margin: 2px 6px 0px; - flex-grow: 1; -} -.contactdetails__header h2 { - margin: 0; -} -.contactdetails__header #details-org-container { - display: flex; - flex-wrap: wrap; -} -.contactdetails__header input[type=text]:active { - background: transparent !important; /* remove :active effect */ -} -.contactdetails__header .contactdetails__name, -.contactdetails__header .contactdetails__org, -.contactdetails__header .contactdetails__title { - font-size: inherit; - color: #fff !important; /* override focus,active&hover */ - background: transparent; - border: none; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - max-width: 100%; - margin: 0; - padding: 4px 5px; -} -.contactdetails__header .contactdetails__org, -.contactdetails__header .contactdetails__title { - max-width: 50%; - min-width: 150px; -} -.contactdetails__header .contactdetails__name { - width: 100%; -} -.contactdetails__header #details-actions { - display: flex; - flex-shrink: 0; -} -.contactdetails__header #contact-failed-save { - animation: pulse 1.5s infinite; - border-radius: 50%; -} -/* fix placeholder color */ -.contactdetails__header .contactdetails__name::-webkit-input-placeholder, -.contactdetails__header .contactdetails__org::-webkit-input-placeholder, -.contactdetails__header .contactdetails__title::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: #fff; - opacity: .8; -} -.contactdetails__header .contactdetails__name::-moz-placeholder, -.contactdetails__header .contactdetails__org::-moz-placeholder, -.contactdetails__header .contactdetails__title::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: #fff; - opacity: .8; -} -.contactdetails__header .contactdetails__name:-ms-input-placeholder, -.contactdetails__header .contactdetails__org:-ms-input-placeholder, -.contactdetails__header .contactdetails__title:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: #fff; - opacity: .8; -} -.contactdetails__header .contactdetails__name:placeholder-shown, -.contactdetails__header .contactdetails__org:placeholder-shown, -.contactdetails__header .contactdetails__title:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ - color: #fff; - opacity: .8; -} - -.contactdetails__header #details-actions a, -.contactdetails__header #details-actions button { - padding: 15px; - background-color: transparent; - border: none; - opacity: .5; - margin: 3px; -} -.contactdetails__header #details-actions a:hover, -.contactdetails__header #details-actions button:hover, -.contactdetails__header #details-actions a:focus, -.contactdetails__header #details-actions button:focus { - opacity: .7 -} - -avatar { - position: relative; - height: 75px; - width: 75px; - border-radius: 50%; - overflow: hidden; - flex-shrink: 0; -} - -.contactdetails__logo { - height: 75px; - width: 75px; - object-fit: cover; - background-color: transparent; - margin: 0; - cursor: pointer; -} - -.avatar-options { - top: 0; - background-color: rgba(0,0,0,0.2); - display: none; - width: 100%; - height: 100%; - overflow: hidden; -} -.avatar-options > [class^="icon-"] { - display: none; - opacity: 0.5; - cursor: pointer; - min-width: 20px; - min-height: 20px; -} -.avatar-options:hover > [class^="icon-"] { - opacity: 0.6; -} -.avatar-options > [class^="icon-"]:hover { - opacity: 0.8; -} - -avatar.avatar--missing .avatar-options { - display: flex; - border-radius: 50%; -} -avatar:not(.maximized).avatar--missing .avatar-options .icon-upload-white { - display: block; - width: 100%; - height: 100%; -} - -avatar.maximized { - 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; /* Nextcloud header */ -} -avatar.maximized img { - width: auto; - height: auto; - border-radius: 0; - max-height: calc(100% - 40px); - max-width: 100%; - align-self: center; - margin-bottom: 40px; -} -avatar.maximized .avatar-options { - height: 40px; - position: absolute; - top: calc(100% - 40px); - left: 0; - display: flex; - opacity: 1; - padding: 0; - flex-wrap: wrap; - justify-content: space-around; -} -avatar.maximized .avatar-options > [class^="icon-"] { - min-width: 25%; - display: block; -} - -#check-all + label:before { - position: absolute; - top: 18px; - left: 68px; -} - -.contact__icon { - display: inline-block; - height: 40px; - width: 40px; - line-height: 40px; - border-radius: 50%; - vertical-align: middle; - margin-right: 10px; - color: white; - text-align: center; - font-size: 1.5em; - text-transform: capitalize; - object-fit: cover; -} - -.contactdetails__header + section { - padding: 20px 20px 100px; -} - -@media screen and (min-width: 1450px) { - section { - -webkit-column-count: 2; /* Chrome, Safari, Opera */ - -moz-column-count: 2; /* Firefox */ - column-count: 2; - } -} - -/* General details item styles */ - -detailsitem { - display: inline-block; - position: relative; -} - -detailsitem input[type="tel"], -detailsitem input[type="email"], -detailsitem input[type="text"], -detailsitem input[type="url"], -detailsitem textarea, -.select-addressbook select, -.add-field { - width: 245px; -} - -.add-field { - margin-left: 106px; -} - -detailsitem select { - width: 100px; -} - -detailsitem label, -.select-addressbook label { - margin: 3px 3px 3px 0; - - display: inline-block; - width: 100px; - padding: 7px 0px; - text-align: right; - opacity: .5; - white-space: nowrap; - overflow: hidden; - overflow-x: hidden; - text-overflow: ellipsis; - vertical-align: middle; -} - -detailsitem .icon-delete { - position: relative; - vertical-align: top; - padding: 16px 10px; - background-color: transparent; - border: none; - opacity: .2; -} - -detailsitem .item-action { - position: absolute; - padding: 8px 5px; - opacity: .5; - top: 2px; - right: 30px; -} - -detailsitem .item-action ~ input { - padding-right: 30px; - text-overflow: ellipsis; -} - -detailsitem .item-action i { - display: block; - height: 20px; - width: 20px; -} - -detailsitem.details-item-adr .icon-delete, detailsitem.details-item-n .icon-delete { - vertical-align: middle; - left: 251px; -} - -detailsitem.details-item-adr { - padding: 20px 0; -} - -detailsitem.details-item-n { - padding: 20px 0; -} - -detailsitem.details-item-note label { - vertical-align: top; -} - -/* Failed props */ -detailsitem.failed { - box-shadow: inset 2px 0 #c5173a; -} -avatar .icon-error { - position: absolute; - width: 100%; - height: 100% -} -avatar:not(.maximized) .icon-error + img { - opacity: 0.5; -} - -/* Prevent delete for last adr/mail/tel item */ -.last-details > detailsitem.details-item-adr .icon-delete, -.last-details > detailsitem.details-item-email .icon-delete, -.last-details > detailsitem.details-item-tel .icon-delete { - display: none; -} - -/* addressbook settings */ -.settings-section { - display: block; -} - -ul.addressBookList > li { - padding: 6px 0; - display: flex; - align-items: center; - flex-wrap: wrap; -} - -ul.addressBook-share-list { - margin-top: 8px; - margin-bottom: 12px; -} - -ul.addressBook-share-list li { - padding: 0 5px; - display: inline-flex; - align-items: center; -} - -ul.addressBook-share-list li .icon { - margin-right: 5px; - opacity: .2; -} - -ul.addressBook-share-list li .utils { - display: flex; -} - -/* override core apps css */ -#app-navigation ul.addressBookList > li span.utils { - position: relative; - padding: 0; - flex-shrink: 0; - height: 20px; -} - -ul.addressBookList li .utils .popovermenu { - margin-top: 0; - margin-right: -5px; -} - -#app-navigation ul.addressBookList li .utils .popovermenu li > button { - width: 100%; -} - -ul.addressBookList li .action > span { - display: inline-block; - opacity: 0.5; - width: 24px; - height: 20px; -} - -ul.addressBookList li .action > a { - padding: 10px 14px; -} - -div.addressBookShares ul.dropdown-menu { - border: 1px solid #ddd; - border-radius: 0 0 3px 3px; - max-height: 200px; - margin-top: -2px; - overflow-y: auto; - display: flex; - flex-wrap: wrap; - position: absolute; - background-color: #fff; - width: 100%; - z-index: 500; -} - -div.addressBookShares ul.dropdown-menu li > a { - height: 30px !important; - min-height: 30px !important; - line-height: 30px !important; -} - -ul.dropdown-menu li.active { - background: #f0f0f0; -} - -div.app-contacts span.utils { - padding: 0 !important; - float: right; - position: relative !important; -} - -.addressBookUrlContainer { - width: 100%; - position: relative; -} - -input.renameAddressBookInput, -input.newAddressBookInput, -input.shareeInput, -input.addressBookUrl { - width: 100% !important; - margin-right: 0; - padding-right: 30px; - text-overflow: ellipsis; -} - -.select2-drop .select2-search input { - width: 100% !important; - margin-right: 0; -} - -.addressBookList form { - position: relative; - width: 100%; -} - -addressBookList input[type='submit'].inline-button, -addressBookList input[type='button'].inline-button { - position: absolute; - right: 0; - top: 0; - padding: 6px 15px; - background-color: transparent; - border: none; - opacity: .5; - margin-right: 0; - cursor: pointer; -} - -ul.addressBookList li[addressbook] > span.addressBookName { - width: calc(100% - 52px); /* -actions width */ - overflow: hidden; - white-space:nowrap; - text-overflow: ellipsis; - padding-left: 7px; -} - -ul.addressBookList li[addressbook] > .addressBookShares { - width: 100%; -} - -li.addressBook-share-item span.shareeIdentifier, -li.calendar-share-item span.shareeIdentifier { - width: 100%; - overflow:hidden; - white-space:nowrap; - text-overflow:ellipsis; - display: inline-block; - vertical-align: top; - opacity: 0.5; -} - -/* Contact import */ -#app-settings-content #upload.button { - width: 100%; - padding: 7px 10px; - padding-left: 34px; - background-position: 10px center; - text-align: left; - margin: 0; - display: inline-flex; - margin-bottom: 0; - border-radius: 3px 3px 0 0; - justify-content: space-between; -} -#app-settings-content #upload.button::after { - left: 17px; /* half the padding */ -} - -contactimport .select2-container { - margin-top: 0; - width: 100%; -} - -contactimport .select2-container:after { - left: 15px; -} - -contactimport .select2-container .select2-choice { - height: 100%; - line-height: 31px; - border-radius: 0 0 3px 3px; - border-top: none !important; -} - -contactimport .select2-drop-active { - border-top: 1px solid #ddd; - box-shadow: 0 -1px 5px rgba(0, 0, 0, .15); - border-radius: 3px 3px 0 0; - margin-top: initial; -} - -contactimport .ui-select-offscreen { - display: none; -} - -contactimport .ui-select-search-hidden { - display: none; -} - -contactimport input[type='search']::-webkit-search-cancel-button { - -webkit-appearance:none -} - -/* Contacts List */ -#new-contact-button { - margin: 14px auto; /* to have the same height than a contact*/ - width: calc(100% - 20px) !important; - text-align: left; - padding-left: 34px; - background-position: 10px center; -} - -contactlist .tooltip { - max-width: 75%; -} - -.app-content-list-item-failed { - position: absolute; - right: 15px; - top: 50%; - margin-top: -15px; - opacity: 0.2; - width: 30px; - height: 30px; - z-index: 50; -} -.app-content-list-item-failed:hover { - opacity: 0.5; -} -.app-content-list-item-failed ~ .app-content-list-item-line-one, -.app-content-list-item-failed ~ .app-content-list-item-line-two { - padding-right: 50px; -} - - - -/* app content list & detail view */ -/* TO BE MOVED TO CORE apps.css ONCE STANDARDIZED ACROSS APPS */ -/* DO NOT MAKE ANY CHANGES SPECIFIC TO CONTACTS HERE! */ - -.app-content-list { - width: 30%; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - border-right: 1px solid #eee; -} - -.app-content-detail { - position: absolute; - top: 0; - right: 0; - width: 70%; - height: 100%; - overflow-y: auto; - overflow-x: hidden; -} - -.app-content-list-button { - display: block; - margin: 10px auto; - padding: 10px; -} - -.app-content-list-item { - position: relative; - height: 68px; - border-top: 1px solid #eee; - cursor: pointer; -} -.app-content-list-item:hover, -.app-content-list-item:focus, -.app-content-list-item.active { - background-color: #f8f8f8; -} -.app-content-list-item-link { - display: block; - height: 100%; -} - -.app-content-list-item-icon { - position: absolute; - display: inline-block; - left: 6px; - top: 14px; -} - -.app-content-list-item-star { - position: absolute; - display: none; /* change to inline-block when we implement it */ - left: 16px; - top: 28px; - padding: 20px; - background-size: 16px; - z-index: 100; -} - -.app-content-list-item-line-one, -.app-content-list-item-line-two { - position: absolute; - display: inline-block; - width: 100%; - padding: 12px; - padding-left: 50px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.app-content-list-item-line-one.no-line-two { - padding-top: 24px; - padding-bottom: 24px; -} -.app-content-list-item-line-two { - top: 25px; - opacity: .5; -} - -ul.addressBook-share-list { - margin-top: 8px; - margin-bottom: 12px; -} - -#app-navigation .utils .action span { - cursor: pointer !important; -} -#app-navigation .utils .action { - opacity: .5; -} -#app-navigation .utils .action:hover, -#app-navigation .utils .action:focus { - opacity: 1; -} - -#app-navigation > ul { - height: calc(100% - 68px); -} - -/* styling for contact count in contact list */ -.contacts-list-count { - text-align:center; - color: #333; - padding:25px; - position: relative; - height: 68px; - border-top: 1px solid #eee; -} - -/* SELECT2 styling */ -detailsitem .select2-container { - width: 245px; -} -/* Fix for #81 */ -.select2-container-multi .select2-choices .select2-search-choice { - padding-right: 20px; -} -.select2-container.select2-container-multi .select2-choices span { - display: flex; - flex-wrap: wrap; -} -.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { - display: block !important; - right: 4px; - left: auto; - top: 7px -} - -/* Mobile width < 768px */ -@media only screen and (max-width: 768px) { - - /* full width for message list on mobile */ - .app-content-list { - width: 100%; - background: white; - position: relative; - z-index: 100; - } - - /* overlay message detail on top of message list */ - .app-content-detail { - background: #fff; - width: 100%; - left: 0; - height: 100%; - top: 0; - box-shadow: 0 0 100px rgba(100, 100, 100, .9); - position: absolute; - } - - .wrapper-show:not(.mobile-show), - .contacts-list:not(.mobile-show) { - display: none; - } - - - #app-navigation-toggle.showdetails { - transform: translate(-50px, 0); - } - - #app-navigation-toggle-back { - position: fixed; - display: inline-block !important; - top: 45px; - left: 0; - width: 44px; - height: 44px; - z-index: 149; - background-color: rgba(255, 255, 255, .7); - cursor: pointer; - opacity: .6; - transform: rotate(90deg); - } - - /* end of media query */ -} - -.contact-details-wrapper { - position: relative; - background: white; -} -.wrapper-show { - z-index: 201; -} -#app-navigation-toggle-back { - display: none; -} - -.icon-group { - background-image: url('../../img/group.svg'); -} diff --git a/css/public/style.scss b/css/public/style.scss new file mode 100644 index 00000000..fccaad29 --- /dev/null +++ b/css/public/style.scss @@ -0,0 +1,802 @@ +.contactdetails__header { + height: 100px; + padding-left: 20px; + display: flex; + color: #fff; + font-weight: bold; + align-items: center; +} + +.contactdetails__header #details-contact-infos { + width: 80%; + margin: 2px 6px 0px; + flex-grow: 1; +} +.contactdetails__header h2 { + margin: 0; +} +.contactdetails__header #details-org-container { + display: flex; + flex-wrap: wrap; +} +.contactdetails__header input[type=text]:active { + background: transparent !important; /* remove :active effect */ +} +.contactdetails__header .contactdetails__name, +.contactdetails__header .contactdetails__org, +.contactdetails__header .contactdetails__title { + font-size: inherit; + color: #fff !important; /* override focus,active&hover */ + background: transparent; + border: none; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + margin: 0; + padding: 4px 5px; +} +.contactdetails__header .contactdetails__org, +.contactdetails__header .contactdetails__title { + max-width: 50%; + min-width: 150px; +} +.contactdetails__header .contactdetails__name { + width: 100%; +} +.contactdetails__header #details-actions { + display: flex; + flex-shrink: 0; +} +.contactdetails__header #contact-failed-save { + animation: pulse 1.5s infinite; + border-radius: 50%; +} +/* fix placeholder color */ +.contactdetails__header .contactdetails__name::-webkit-input-placeholder, +.contactdetails__header .contactdetails__org::-webkit-input-placeholder, +.contactdetails__header .contactdetails__title::-webkit-input-placeholder { /* WebKit, Blink, Edge */ + color: #fff; + opacity: .8; +} +.contactdetails__header .contactdetails__name::-moz-placeholder, +.contactdetails__header .contactdetails__org::-moz-placeholder, +.contactdetails__header .contactdetails__title::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #fff; + opacity: .8; +} +.contactdetails__header .contactdetails__name:-ms-input-placeholder, +.contactdetails__header .contactdetails__org:-ms-input-placeholder, +.contactdetails__header .contactdetails__title:-ms-input-placeholder { /* Internet Explorer 10-11 */ + color: #fff; + opacity: .8; +} +.contactdetails__header .contactdetails__name:placeholder-shown, +.contactdetails__header .contactdetails__org:placeholder-shown, +.contactdetails__header .contactdetails__title:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ + color: #fff; + opacity: .8; +} + +.contactdetails__header #details-actions a, +.contactdetails__header #details-actions button { + padding: 15px; + background-color: transparent; + border: none; + opacity: .5; + margin: 3px; +} +.contactdetails__header #details-actions a:hover, +.contactdetails__header #details-actions button:hover, +.contactdetails__header #details-actions a:focus, +.contactdetails__header #details-actions button:focus { + opacity: .7 +} + +avatar { + position: relative; + height: 75px; + width: 75px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; +} + +.contactdetails__logo { + height: 75px; + width: 75px; + object-fit: cover; + background-color: transparent; + margin: 0; + cursor: pointer; +} + +.avatar-options { + top: 0; + background-color: rgba(0,0,0,0.2); + display: none; + width: 100%; + height: 100%; + overflow: hidden; +} +.avatar-options > [class^="icon-"] { + display: none; + opacity: 0.5; + cursor: pointer; + min-width: 20px; + min-height: 20px; +} +.avatar-options:hover > [class^="icon-"] { + opacity: 0.6; +} +.avatar-options > [class^="icon-"]:hover { + opacity: 0.8; +} + +avatar.avatar--missing .avatar-options { + display: flex; + border-radius: 50%; +} +avatar:not(.maximized).avatar--missing .avatar-options .icon-upload-white { + display: block; + width: 100%; + height: 100%; +} + +avatar.maximized { + 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; /* Nextcloud header */ +} +avatar.maximized img { + width: auto; + height: auto; + border-radius: 0; + max-height: calc(100% - 40px); + max-width: 100%; + align-self: center; + margin-bottom: 40px; +} +avatar.maximized .avatar-options { + height: 40px; + position: absolute; + top: calc(100% - 40px); + left: 0; + display: flex; + opacity: 1; + padding: 0; + flex-wrap: wrap; + justify-content: space-around; +} +avatar.maximized .avatar-options > [class^="icon-"] { + min-width: 25%; + display: block; +} + +#check-all + label:before { + position: absolute; + top: 18px; + left: 68px; +} + +.contact__icon { + display: inline-block; + height: 40px; + width: 40px; + line-height: 40px; + border-radius: 50%; + vertical-align: middle; + margin-right: 10px; + color: white; + text-align: center; + font-size: 1.5em; + text-transform: capitalize; + object-fit: cover; +} + +.contactdetails__header + section { + padding: 20px 20px 100px; +} + +@media screen and (min-width: 1450px) { + section { + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; + } +} + +/* General details item styles */ + +detailsitem { + display: inline-block; + position: relative; +} + +detailsitem input[type="tel"], +detailsitem input[type="email"], +detailsitem input[type="text"], +detailsitem input[type="url"], +detailsitem textarea, +.select-addressbook select, +.add-field { + width: 245px; +} + +.add-field { + margin-left: 106px; +} + +detailsitem select { + width: 100px; +} + +detailsitem label, +.select-addressbook label { + margin: 3px 3px 3px 0; + + display: inline-block; + width: 100px; + padding: 7px 0px; + text-align: right; + opacity: .5; + white-space: nowrap; + overflow: hidden; + overflow-x: hidden; + text-overflow: ellipsis; + vertical-align: middle; +} + +detailsitem .icon-delete { + position: relative; + vertical-align: top; + padding: 16px 10px; + background-color: transparent; + border: none; + opacity: .2; +} + +detailsitem .item-action { + position: absolute; + padding: 8px 5px; + opacity: .5; + top: 2px; + right: 30px; +} + +detailsitem .item-action ~ input { + padding-right: 30px; + text-overflow: ellipsis; +} + +detailsitem .item-action i { + display: block; + height: 20px; + width: 20px; +} + +detailsitem.details-item-adr .icon-delete, detailsitem.details-item-n .icon-delete { + vertical-align: middle; + left: 251px; +} + +detailsitem.details-item-adr { + padding: 20px 0; +} + +detailsitem.details-item-n { + padding: 20px 0; +} + +detailsitem.details-item-note label { + vertical-align: top; +} + +/* Failed props */ +detailsitem.failed { + box-shadow: inset 2px 0 #c5173a; +} +avatar .icon-error { + position: absolute; + width: 100%; + height: 100% +} +avatar:not(.maximized) .icon-error + img { + opacity: 0.5; +} + +/* Prevent delete for last adr/mail/tel item */ +.last-details > detailsitem.details-item-adr .icon-delete, +.last-details > detailsitem.details-item-email .icon-delete, +.last-details > detailsitem.details-item-tel .icon-delete { + display: none; +} + +/* addressbook settings */ +.settings-section { + display: block; +} + +ul.addressBookList > li { + padding: 6px 0; + display: flex; + align-items: center; + flex-wrap: wrap; +} + +ul.addressBook-share-list { + margin-top: 8px; + margin-bottom: 12px; +} + +ul.addressBook-share-list li { + padding: 0 5px; + display: inline-flex; + align-items: center; +} + +ul.addressBook-share-list li .icon { + margin-right: 5px; + opacity: .2; +} + +ul.addressBook-share-list li .utils { + display: flex; +} + +/* override core apps css */ +#app-navigation ul.addressBookList > li span.utils { + position: relative; + padding: 0; + flex-shrink: 0; + height: 20px; +} + +ul.addressBookList li .utils .popovermenu { + margin-top: 0; + margin-right: -5px; +} + +#app-navigation ul.addressBookList li .utils .popovermenu li > button { + width: 100%; +} + +ul.addressBookList li .action > span { + display: inline-block; + opacity: 0.5; + width: 24px; + height: 20px; +} + +ul.addressBookList li .action > a { + padding: 10px 14px; +} + +div.addressBookShares ul.dropdown-menu { + border: 1px solid #ddd; + border-radius: 0 0 3px 3px; + max-height: 200px; + margin-top: -2px; + overflow-y: auto; + display: flex; + flex-wrap: wrap; + position: absolute; + background-color: #fff; + width: 100%; + z-index: 500; +} + +div.addressBookShares ul.dropdown-menu li > a { + height: 30px !important; + min-height: 30px !important; + line-height: 30px !important; +} + +ul.dropdown-menu li.active { + background: #f0f0f0; +} + +div.app-contacts span.utils { + padding: 0 !important; + float: right; + position: relative !important; +} + +.addressBookUrlContainer { + width: 100%; + position: relative; +} + +input.renameAddressBookInput, +input.newAddressBookInput, +input.shareeInput, +input.addressBookUrl { + width: 100% !important; + margin-right: 0; + padding-right: 30px; + text-overflow: ellipsis; +} + +.select2-drop .select2-search input { + width: 100% !important; + margin-right: 0; +} + +.addressBookList form { + position: relative; + width: 100%; +} + +addressBookList input[type='submit'].inline-button, +addressBookList input[type='button'].inline-button { + position: absolute; + right: 0; + top: 0; + padding: 6px 15px; + background-color: transparent; + border: none; + opacity: .5; + margin-right: 0; + cursor: pointer; +} + +ul.addressBookList li[addressbook] > span.addressBookName { + width: calc(100% - 52px); /* -actions width */ + overflow: hidden; + white-space:nowrap; + text-overflow: ellipsis; + padding-left: 7px; +} + +ul.addressBookList li[addressbook] > .addressBookShares { + width: 100%; +} + +li.addressBook-share-item span.shareeIdentifier, +li.calendar-share-item span.shareeIdentifier { + width: 100%; + overflow:hidden; + white-space:nowrap; + text-overflow:ellipsis; + display: inline-block; + vertical-align: top; + opacity: 0.5; +} + +/* Contact import */ +#app-settings-content #upload.button { + width: 100%; + padding: 7px 10px; + padding-left: 34px; + background-position: 10px center; + text-align: left; + margin: 0; + display: inline-flex; + margin-bottom: 0; + border-radius: 3px 3px 0 0; + justify-content: space-between; +} +#app-settings-content #upload.button::after { + left: 17px; /* half the padding */ +} + +contactimport .select2-container { + margin-top: 0; + width: 100%; +} + +contactimport .select2-container:after { + left: 15px; +} + +contactimport .select2-container .select2-choice { + height: 100%; + line-height: 31px; + border-radius: 0 0 3px 3px; + border-top: none !important; +} + +contactimport .select2-drop-active { + border-top: 1px solid #ddd; + box-shadow: 0 -1px 5px rgba(0, 0, 0, .15); + border-radius: 3px 3px 0 0; + margin-top: initial; +} + +contactimport .ui-select-offscreen { + display: none; +} + +contactimport .ui-select-search-hidden { + display: none; +} + +contactimport input[type='search']::-webkit-search-cancel-button { + -webkit-appearance:none +} + +/* Contacts List */ +#new-contact-button { + margin: 14px auto; /* to have the same height than a contact*/ + width: calc(100% - 20px) !important; + text-align: left; + padding-left: 34px; + background-position: 10px center; +} + +contactlist .tooltip { + max-width: 75%; +} + +.app-content-list-item-failed { + position: absolute; + right: 15px; + top: 50%; + margin-top: -15px; + opacity: 0.2; + width: 30px; + height: 30px; + z-index: 50; +} +.app-content-list-item-failed:hover { + opacity: 0.5; +} +.app-content-list-item-failed ~ .app-content-list-item-line-one, +.app-content-list-item-failed ~ .app-content-list-item-line-two { + padding-right: 50px; +} + + + +/* app content list & detail view */ +/* TO BE MOVED TO CORE apps.css ONCE STANDARDIZED ACROSS APPS */ +/* DO NOT MAKE ANY CHANGES SPECIFIC TO CONTACTS HERE! */ + +.app-content-list { + width: 30%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + border-right: 1px solid #eee; +} + +.app-content-detail { + position: absolute; + top: 0; + right: 0; + width: 70%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +.app-content-list-button { + display: block; + margin: 10px auto; + padding: 10px; +} + +.app-content-list-item { + position: relative; + height: 68px; + border-top: 1px solid #eee; + cursor: pointer; +} +.app-content-list-item:hover, +.app-content-list-item:focus, +.app-content-list-item.active { + background-color: #f8f8f8; +} +.app-content-list-item-link { + display: block; + height: 100%; +} + +.app-content-list-item-icon { + position: absolute; + display: inline-block; + left: 6px; + top: 14px; +} + +.app-content-list-item-star { + position: absolute; + display: none; /* change to inline-block when we implement it */ + left: 16px; + top: 28px; + padding: 20px; + background-size: 16px; + z-index: 100; +} + +.app-content-list-item-line-one, +.app-content-list-item-line-two { + position: absolute; + display: inline-block; + width: 100%; + padding: 12px; + padding-left: 50px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.app-content-list-item-line-one.no-line-two { + padding-top: 24px; + padding-bottom: 24px; +} +.app-content-list-item-line-two { + top: 25px; + opacity: .5; +} + +ul.addressBook-share-list { + margin-top: 8px; + margin-bottom: 12px; +} + +#app-navigation .utils .action span { + cursor: pointer !important; +} +#app-navigation .utils .action { + opacity: .5; +} +#app-navigation .utils .action:hover, +#app-navigation .utils .action:focus { + opacity: 1; +} + +#app-navigation > ul { + height: calc(100% - 68px); +} + +/* styling for contact count in contact list */ +.contacts-list-count { + text-align:center; + color: #333; + padding:25px; + position: relative; + height: 68px; + border-top: 1px solid #eee; +} + +/* SELECT2 styling */ +detailsitem .select2-container { + width: 245px; +} +/* Fix for #81 */ +.select2-container-multi .select2-choices .select2-search-choice { + padding-right: 20px; +} +.select2-container.select2-container-multi .select2-choices span { + display: flex; + flex-wrap: wrap; +} +.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { + display: block !important; + right: 4px; + left: auto; + top: 7px +} + +/* Mobile width < 768px */ +@media only screen and (max-width: 768px) { + + /* full width for message list on mobile */ + .app-content-list { + width: 100%; + background: $color-main-background; + position: relative; + z-index: 100; + } + + /* overlay message detail on top of message list */ + .app-content-detail { + background: $color-main-background; + width: 100%; + left: 0; + height: 100%; + top: 0; + box-shadow: 0 0 100px rgba(100, 100, 100, .9); + position: absolute; + } + + .wrapper-show:not(.mobile-show), + .contacts-list:not(.mobile-show) { + display: none; + } + + + #app-navigation-toggle.showdetails { + transform: translate(-50px, 0); + } + + #app-navigation-toggle-back { + position: fixed; + display: inline-block !important; + top: 45px; + left: 0; + width: 44px; + height: 44px; + z-index: 149; + background-color: rgba(255, 255, 255, .7); + cursor: pointer; + opacity: .6; + transform: rotate(90deg); + } + + /* end of media query */ +} + +.contact-details-wrapper { + position: relative; + background: $color-main-background; +} +.wrapper-show { + z-index: 201; +} +#app-navigation-toggle-back { + display: none; +} + +.icon-group { + background-image: url('../../img/group.svg'); +} + +/* Import screen */ +#import-sidebar { + position: absolute; + width: 250px; + height: 100%; + z-index: 500; + background: rgba(255,255,255,0.6); +} +#importscreen-wrapper { + position: absolute; + width: 100%; + height: 100%; + top: 0; + display: flex; + justify-content: center; + align-items: center; + background: $color-main-background; + z-index: 500; +} +#importscreen-progress { + display: block; /* default: inline-block */ + width: 300px; + margin: 2em auto; + padding: 4px; + border: 0 none; + background: rgba(0,0,0,0.1); + border-radius: 2px; + box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); +} +#importscreen-progress::-webkit-progress-bar { + background: transparent; +} +#importscreen-progress::-moz-progress-bar { + border-radius: 2px; + background: $color-primary; + box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1), 0 2px 5px 0px rgba(0,0,0,0.1); +} +/* webkit */ +@media screen and (-webkit-min-device-pixel-ratio:0) { + #importscreen-progress { + height: 25px; + } +} +#importscreen-progress::-webkit-progress-value { + border-radius: 2px; + background: $color-primary; + box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1), 0 2px 5px 0px rgba(0,0,0,0.1); + transition: 500ms all ease-in-out; +} \ No newline at end of file -- cgit v1.2.3