From fdeb168878309a20751e1721036f7a03e4bc53cc Mon Sep 17 00:00:00 2001 From: Jessica Date: Wed, 15 Aug 2018 18:18:35 +0200 Subject: added BEM styling and structuring after meeting --- css/contacts.scss | 2 +- css/settings-section.scss | 90 +++++++++++ css/settings.scss | 215 -------------------------- css/settings/settings-addressbook-sharee.scss | 46 ++++++ css/settings/settings-addressbook-shares.scss | 56 +++++++ css/settings/settings-addressbook.scss | 31 ++++ 6 files changed, 224 insertions(+), 216 deletions(-) create mode 100644 css/settings-section.scss delete mode 100644 css/settings.scss create mode 100644 css/settings/settings-addressbook-sharee.scss create mode 100644 css/settings/settings-addressbook-shares.scss create mode 100644 css/settings/settings-addressbook.scss (limited to 'css') diff --git a/css/contacts.scss b/css/contacts.scss index d1b2da3e..16911655 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -1,2 +1,2 @@ -@import 'settings'; +@import 'settings-section'; @import 'details'; diff --git a/css/settings-section.scss b/css/settings-section.scss new file mode 100644 index 00000000..a2696d3a --- /dev/null +++ b/css/settings-section.scss @@ -0,0 +1,90 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ + * + * @author John Molakvoæ + * author Team Popcorn + * + * @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 . + * + */ + + +@import 'settings/settings-addressbook'; +@import 'settings/settings-addressbook-shares'; +@import 'settings/settings-addressbook-sharee'; + +// contacts settings section +#app-settings-content { + .settings-section { + display: flex; + align-items: center; + } +} + +#new-addressbook-form { + display: flex; +} + +// Sort Contacts +.sort-contacts { + .multiselect.multiselect-vue { + width: 120px; + margin-left: 5px; + } + input#sort-by, .multiselect__single { + padding: 6px 12px; + min-height: 34px; + text-align: center; + background: url(/core/css/../img/actions/triangle-s.svg) no-repeat right 4px center; + background-color: inherit; + outline: 0; + padding-right: 24px !important; + } +} + +// Import contacts +.import-contact { + display: flex; + flex-direction: column; + .multiselect-label { + width: 100%; + padding: 6px 12px 6px 34px; + margin: 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; + background: url(/core/css/../img/actions/upload.svg) no-repeat left 9px center; + background-color: #f7f7f7; + z-index: 2; + } + .multiselect-vue { + width: 100%; + margin: 0; + } + .multiselect-vue .multiselect__tags { + border: 1px solid var(--color-border-dark); + border-radius: 0 0 var(--border-radius) var(--border-radius); + margin-top: -1px; + } +} + +// Add address book +.new-address-book { + input[type='text'] + .icon-confirm, input[type='password'] + .icon-confirm, input[type='email'] + .icon-confirm { + opacity: 0.5; + } + .new-address-book-input { + border-color: var(--color-border-dark); + } +} diff --git a/css/settings.scss b/css/settings.scss deleted file mode 100644 index 74cfa7b8..00000000 --- a/css/settings.scss +++ /dev/null @@ -1,215 +0,0 @@ -/** - * @copyright Copyright (c) 2018 John Molakvoæ - * - * @author John Molakvoæ - * author Team Popcorn - * - * @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 . - * - */ - -// contacts settings section -#app-settings-content { - .settings-section { - display: flex; - align-items: center; - } -} - -#new-addressbook-form { - display: flex; -} - -// Addressbook lists -.addressbook { - display: flex; - align-items: center; - white-space: nowrap; - text-overflow: ellipsis; - - &__name { - display: block; - flex: 0 1 auto; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - &__share, - &__menu .icon-more { - width: 44px; - height: 44px; - opacity: .5; - &:hover, - &:focus, - &:active { - opacity: .7; - } - } - &__share { - margin-left: auto; - } -} - -// Addressbook sharees -.addressbook__shares { - width: 100%; - .dropdown-menu { - border: 1px solid #d1d1d1; - border-radius: 0 0 3px 3px; - max-height: 200px; - margin-top: -2px; - overflow-y: auto; - display: flex; - flex-wrap: wrap; - background-color: #fff; - position: relative; - width: 100%; - z-index: 500; - top: -2px; - left: 0px; - li { - width: 100%; - padding: 8px 9px 9px; - cursor: pointer; - } - li.active { - background: #f0f0f0; - } - } - &__input { - width: 100% !important; - margin-right: 0; - padding-right: 30px; - text-overflow: ellipsis; - } - &__list { - margin-top: 8px; - margin-bottom: 12px; - display: flex; - flex-direction: column; - } - .multiselect.multiselect-vue { - width: inherit; - .multiselect__tags:focus-within, .multiselect__tags:hover { - border-color: var(--color-primary-element); - } - } - .multiselect.multiselect-vue .multiselect__content-wrapper { - background: #f0f0f0; - width: inherit; - } - .shareematch--bold { - font-weight: bold; - } -} - -// Sharees settings for Addressbook -.addressbook__sharee { - padding: 0 5px; - display: inline-flex; - align-items: center; - &__identifier { - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - vertical-align: top; - opacity: 0.5; - } - &__utils { - padding: 0 !important; - float: right; - position: relative !important; - display: inline-flex; - align-items: center; - flex-shrink: 0; - height: 20px; - .checkbox + label { - padding: 0 !important; - } - } - - .icon { - margin-right: 5px; - opacity: 0.2; - width: 16px; - height: 16px; - display: inline-block; - } - - .icon-group { - background-image: url(/apps/contacts/img/group.svg); - } - - .icon-delete { - display: inline-block; - width: 24px; - height: 20px; - opacity: 0.4; - } -} - -// Sort Contacts -.sort-contacts { - .multiselect.multiselect-vue { - width: 120px; - margin-left: 5px; - } - input#sort-by, .multiselect__single { - padding: 6px 12px; - min-height: 34px; - text-align: center; - background: url(/core/css/../img/actions/triangle-s.svg) no-repeat right 4px center; - background-color: inherit; - outline: 0; - padding-right: 24px !important; - } -} - -// Import contacts -.import-contact { - display: flex; - flex-direction: column; - .multiselect-label { - width: 100%; - padding: 6px 12px 6px 34px; - margin: 0; - border-radius: var(--border-radius) var(--border-radius) 0 0; - background: url(/core/css/../img/actions/upload.svg) no-repeat left 9px center; - background-color: #f7f7f7; - z-index: 2; - } - .multiselect-vue { - width: 100%; - margin: 0; - } - .multiselect-vue .multiselect__tags { - border: 1px solid var(--color-border-dark); - border-radius: 0 0 var(--border-radius) var(--border-radius); - margin-top: -1px; - } -} - -// Add address book -.new-address-book { - input[type='text'] + .icon-confirm, input[type='password'] + .icon-confirm, input[type='email'] + .icon-confirm { - opacity: 0.5; - } - .new-address-book-input { - border-color: var(--color-border-dark); - } -} diff --git a/css/settings/settings-addressbook-sharee.scss b/css/settings/settings-addressbook-sharee.scss new file mode 100644 index 00000000..9ea3bd0b --- /dev/null +++ b/css/settings/settings-addressbook-sharee.scss @@ -0,0 +1,46 @@ +.addressbook__sharee { + padding: 0 5px; + display: inline-flex; + align-items: center; + width: 100%; + &__identifier { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; + opacity: 0.5; + } + &__utils { + padding: 0 !important; + float: right; + position: relative !important; + display: inline-flex; + align-items: center; + flex-shrink: 0; + height: 20px; + .checkbox + label { + padding: 0 !important; + } + } + + .icon { + margin-right: 5px; + opacity: 0.2; + width: 16px; + height: 16px; + display: inline-block; + } + + .icon-group { + background-image: url(/apps/contacts/img/group.svg); + } + + .icon-delete { + display: inline-block; + width: 24px; + height: 20px; + opacity: 0.4; + } +} \ No newline at end of file diff --git a/css/settings/settings-addressbook-shares.scss b/css/settings/settings-addressbook-shares.scss new file mode 100644 index 00000000..c8ea519e --- /dev/null +++ b/css/settings/settings-addressbook-shares.scss @@ -0,0 +1,56 @@ +.addressbook-shares { + width: 100%; + .dropdown-menu { + border: 1px solid #d1d1d1; + border-radius: 0 0 3px 3px; + max-height: 200px; + margin-top: -2px; + overflow-y: auto; + display: flex; + flex-wrap: wrap; + background-color: #fff; + position: relative; + width: 100%; + z-index: 500; + top: -2px; + left: 0px; + li { + width: 100%; + padding: 8px 9px 9px; + cursor: pointer; + } + li.active { + background: #f0f0f0; + } + } + &__input { + width: 100% !important; + margin-right: 0; + padding-right: 30px; + text-overflow: ellipsis; + } + &__list { + margin-top: 8px; + margin-bottom: 12px; + display: flex; + flex-direction: column; + } + + .multiselect-vue { + width: inherit; + + .multiselect__tags:focus-within, + .multiselect__tags:hover { + border-color: var(--color-primary-element); + } + + .multiselect__content-wrapper { + background: #f0f0f0; + width: inherit; + } + + &__shareematch--bold { + font-weight: bold; + } + } +} \ No newline at end of file diff --git a/css/settings/settings-addressbook.scss b/css/settings/settings-addressbook.scss new file mode 100644 index 00000000..bda520fa --- /dev/null +++ b/css/settings/settings-addressbook.scss @@ -0,0 +1,31 @@ +// BLOCK +.addressbook { + display: flex; + align-items: center; + white-space: nowrap; + text-overflow: ellipsis; + + &__name { + display: block; + flex: 0 1 auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + &__share, + &__menu .icon-more { + width: 44px; + height: 44px; + opacity: .5; + &:hover, + &:focus, + &:active { + opacity: .7; + } + } + &__share { + margin-left: auto; + } +} + +// MODIFIER \ No newline at end of file -- cgit v1.2.3