summaryrefslogtreecommitdiffstats
path: root/css/_details.scss
diff options
context:
space:
mode:
Diffstat (limited to 'css/_details.scss')
-rw-r--r--css/_details.scss458
1 files changed, 0 insertions, 458 deletions
diff --git a/css/_details.scss b/css/_details.scss
deleted file mode 100644
index 645802df..00000000
--- a/css/_details.scss
+++ /dev/null
@@ -1,458 +0,0 @@
-.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 div.icon-more-white {
- cursor: pointer;
- padding: 14px;
- width: 44px;
- height: 44px;
-}
-
-.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;
-}
-
-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-column-width: 380px;
-$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
-
-@mixin generate-grid-span($default-unit) {
- /* we only supports 10 props of the same type */
- @for $i from 1 through 10 {
- &.grid-span-#{$i} {
- /* default unit + title + bottom padding */
- grid-row-start: span #{2 + $i * $default-unit};
- }
- }
-}
-
-section {
- 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;
-}
-
-/* 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;
- &:not(.property-adr){
- /* adr detailsitem already have bottom padding */
- 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;
- }
- #info{
- cursor:pointer;
- margin-left: 8px;
- }
- }
- /* GRID SETTINGS */
- @include generate-grid-span(1);
- &.property-adr {
- @include generate-grid-span(8);
- }
- &.property-n {
- @include generate-grid-span(7);
- }
- &.property-note {
- @include generate-grid-span(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: $grid-column-width;
- > 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;
- }
- }
-
- & .icon-delete {
- position: relative;
- vertical-align: top;
- padding: 16px 10px;
- background-color: transparent;
- border: none;
- opacity: 0;
- }
-
- & 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: 10px 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;
-}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-01 16:55:25 +0000