From df5ca0a76cbddaf570b77b43060f841252793576 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 23 Feb 2018 16:27:15 +0100 Subject: Unify grid height with 40px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/_details.scss.orig | 460 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 460 insertions(+) create mode 100644 css/_details.scss.orig (limited to 'css') diff --git a/css/_details.scss.orig b/css/_details.scss.orig new file mode 100644 index 00000000..9a659452 --- /dev/null +++ b/css/_details.scss.orig @@ -0,0 +1,460 @@ +.contact-details-wrapper { + position: relative; + background: $color-main-background; + min-height: 100%; +} + +.wrapper-show { + z-index: 201; +} + +@media only screen and (max-width: 768px) { + .wrapper-show:not(.mobile-show) { + display: none; + } +} + +.contactdetails__header { + height: 100px; + padding-left: 44px; + display: flex; + font-weight: bold; + align-items: center; +} + +.contactdetails__header #details-contact-infos { + width: 80%; + margin: 2px 6px 0; + 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; + /* Override focus, active & hover! */ + color: #fff !important; /* No vars used on purpose since we use custom BGs */ + text-shadow: 0 0 2px rgba(0, 0, 0, .2); // better readability on bright background colors + 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; /* No vars used on purpose since we use custom BGs */ + 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; /* No vars used on purpose since we use custom BGs */ + 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; /* No vars used on purpose since we use custom BGs */ + 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; /* No vars used on purpose since we use custom BGs */ + 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; +} + +.contactdetails__header + section { + padding: 20px 20px 100px; +} + +/* GRID */ +$grid-height-unit: 40px; +$grid-input-padding: 7px; +$grid-input-margin: 3px; +$grid-input-height-with-margin: calc(#{$grid-height-unit} - (#{$grid-input-margin} * 2)); + +@media screen and (min-width: 1380px) { + section { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 20px; + } +} + +/* General details item styles */ +contactdetails { + select, button, input, textarea { + &:disabled { + background-color: transparent !important; + border-color: transparent !important; + opacity: 1 !important; + color: #545454 !important; + } + } + + detailsitem > select:disabled { + background-image: none !important; + &:first-child { + opacity: 0.5 !important; + color: inherit !important; + } + } +} + +propertygroup { + display: block; + padding-bottom: $grid-height-unit; + .propertyGroup__title { + display: flex; + align-items: center; + height: $grid-height-unit; + padding: calc(#{$grid-height-unit} / 4); + margin: 0; + margin-left: 68px; + opacity: .6; + i { + display: block; + vertical-align: middle; + background-size: 16px 16px; + margin-right: 8px; + opacity: .5; + } + } +} + + +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; + flex-grow: 1; + margin: $grid-input-margin; + height: $grid-input-height-with-margin; + padding: $grid-input-padding; +} + +.add-field { + margin-left: 106px; +} + +detailsitem label, +.select-addressbook label { + margin: $grid-input-margin; + margin-left: 0; + display: inline-block; + width: 100px; + height: $grid-input-height-with-margin; + padding: $grid-input-padding 0; + text-align: right; + opacity: .5; + white-space: nowrap; + overflow: hidden; + overflow-x: hidden; + text-overflow: ellipsis; + vertical-align: middle; +} + +detailsitem { + display: flex; + flex-wrap: wrap; + position: relative; + width: 380px; + > div { + display: inline-flex; + } + select { + width: 100px; + height: $grid-input-height-with-margin; + padding: $grid-input-padding; + margin: $grid-input-margin; + margin-left: 0; + border: none; + text-align: right; + text-align-last: right; + opacity: .5; + color: $color-main-text; + outline: none; + &:hover, + &:focus, + &:active { + opacity: 1; + } + } + +<<<<<<< HEAD +detailsitem .item-action { + position: absolute; + padding: 10px 5px; + opacity: .5; + right: 30px; +} +======= + & .icon-delete { + position: relative; + vertical-align: top; + padding: 16px 10px; + background-color: transparent; + border: none; + opacity: 0; + } +>>>>>>> Unify grid height with 40px + + & input:hover + .icon-delete, + & input:focus + .icon-delete, + & input:active + .icon-delete, + & select:hover + .icon-delete, + & select:focus + .icon-delete, + & select:active + .icon-delete, + &:hover .icon-delete { + opacity: .2; + } + + & .icon-delete:hover, + & .icon-delete:focus, + & .icon-delete:active { + opacity: 1; + } + + & .item-action { + position: absolute; + padding: 8px 5px; + opacity: .5; + right: 30px; + ~ input { + padding-right: 30px; + text-overflow: ellipsis; + } + i { + display: block; + height: 20px; + width: 20px; + } + } + + &.details-item-adr, + &.details-item-n { + padding-bottom: $grid-height-unit; + .icon-delete { + vertical-align: middle; + left: 251px; + } + } + + &.details-item-note label { + vertical-align: top; + } + + /* Failed props */ + &.failed { + box-shadow: inset 2px 0 $color-error; + } + textarea { + height: calc(#{$grid-input-height-with-margin} + (#{$grid-height-unit} * 4)); + } +} + +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; +} + +/* 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; +} + +/* Fix disabled select2 state */ +detailsitem .select2-container[disabled] .select2-choices { + border-color: transparent; + min-height: 100%; + background-color: transparent !important; +} -- cgit v1.2.3