mirror of https://github.com/nextcloud/contacts
Grid calculation system
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
df5ca0a76c
commit
36007c7c9f
|
|
@ -223,12 +223,16 @@ avatar.maximized .avatar-options > [class^="icon-"] {
|
|||
padding: 20px 20px 100px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1380px) {
|
||||
section {
|
||||
display: grid;
|
||||
grid-template-columns: 50fr 50fr;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
/* 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));
|
||||
|
||||
section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
|
||||
/* General details item styles */
|
||||
|
|
@ -253,30 +257,50 @@ contactdetails {
|
|||
|
||||
propertygroup {
|
||||
display: block;
|
||||
padding-bottom: 36px;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.propertyGroup__title {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
margin-left: 68px;
|
||||
opacity: .6;
|
||||
@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 calc(2 + #{$i} * #{$default-unit});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.propertyGroup__title i {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-size: 16px 16px;
|
||||
margin-right: 8px;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
detailsitem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
width: 380px;
|
||||
/* GRID SETTINGS*/
|
||||
propertygroup {
|
||||
@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"],
|
||||
|
|
@ -288,35 +312,23 @@ detailsitem textarea,
|
|||
.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 select {
|
||||
width: 100px;
|
||||
border: none;
|
||||
text-align: right;
|
||||
text-align-last: right;
|
||||
opacity: .5;
|
||||
color: $color-main-text;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
detailsitem select:hover,
|
||||
detailsitem select:focus,
|
||||
detailsitem select:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
detailsitem label,
|
||||
.select-addressbook label {
|
||||
margin: 3px 3px 3px 0;
|
||||
|
||||
margin: $grid-input-margin;
|
||||
margin-left: 0;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
padding: 7px 0;
|
||||
height: $grid-input-height-with-margin;
|
||||
padding: $grid-input-padding 0;
|
||||
text-align: right;
|
||||
opacity: .5;
|
||||
white-space: nowrap;
|
||||
|
|
@ -326,66 +338,94 @@ detailsitem label,
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
detailsitem .icon-delete {
|
||||
detailsitem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
padding: 16px 10px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
detailsitem input:hover + .icon-delete,
|
||||
detailsitem input:focus + .icon-delete,
|
||||
detailsitem input:active + .icon-delete,
|
||||
detailsitem select:hover + .icon-delete,
|
||||
detailsitem select:focus + .icon-delete,
|
||||
detailsitem select:active + .icon-delete,
|
||||
detailsitem:hover .icon-delete {
|
||||
opacity: .2;
|
||||
}
|
||||
& .icon-delete {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
padding: 16px 10px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
detailsitem .icon-delete:hover,
|
||||
detailsitem .icon-delete:focus,
|
||||
detailsitem .icon-delete:active {
|
||||
opacity: 1;
|
||||
}
|
||||
& 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;
|
||||
}
|
||||
|
||||
detailsitem .item-action {
|
||||
position: absolute;
|
||||
padding: 10px 5px;
|
||||
opacity: .5;
|
||||
right: 30px;
|
||||
}
|
||||
& .icon-delete:hover,
|
||||
& .icon-delete:focus,
|
||||
& .icon-delete:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
detailsitem .item-action ~ input {
|
||||
padding-right: 30px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
& .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;
|
||||
}
|
||||
}
|
||||
|
||||
detailsitem .item-action 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;
|
||||
}
|
||||
}
|
||||
|
||||
detailsitem.details-item-adr .icon-delete, detailsitem.details-item-n .icon-delete {
|
||||
vertical-align: middle;
|
||||
left: 251px;
|
||||
}
|
||||
&.details-item-note label {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
detailsitem.details-item-adr,
|
||||
detailsitem.details-item-n {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
detailsitem.details-item-note label {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Failed props */
|
||||
detailsitem.failed {
|
||||
box-shadow: inset 2px 0 $color-error;
|
||||
/* 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 {
|
||||
|
|
|
|||
|
|
@ -1,460 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<propertyGroup ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'" model="ctrl.contact" data="prop" name="prop.$key"></propertyGroup>
|
||||
<propertyGroup ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'" model="ctrl.contact" data="prop" name="prop.$key" class="property-{{prop.$key}} grid-span-{{prop.length}}"></propertyGroup>
|
||||
|
||||
<div class="select-addressbook" ng-if="ctrl.addressBooks.length > 1 && !ctrl.addressBook.readOnly">
|
||||
<label for="details-addressbook">{{ctrl.t.addressBook}}</label>
|
||||
|
|
|
|||
Loading…
Reference in New Issue