packages/components/containers/contacts/widget/ContactsWidget.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 .contacts-widget {
   4         --min-width: #{em(500)};
   5         --min-height: #{em(550)};
   6
   7         &-search-container,
   8         &-toolbar,
   9         .contact-item-container {
  10                 padding-inline: var(--space-4);
  11         }
  12
  13         &-tabs {
  14                 padding-block-start: var(--space-4);
  15                 margin-inline: var(--space-4);
  16         }
  17
  18         .ReactVirtualized__Grid__innerScrollContainer {
  19                 border: 0;
  20         }
  21         @include media('<=small') {
  22                 &.dropdown {
  23                         padding-inline: 5%;
  24                 }
  25         }
  26
  27         .contact-item-container {
  28                 border-radius: 0;
  29                 margin-inline: 0;
  30                 padding-block: var(--space-2);
  31                 padding-inline: rem(16) rem(12);
  32
  33                 &:not(.item-in-drawer) {
  34                         border-block-end: 1px solid var(--border-weak);
  35                 }
  36         }
  37 }
  38
  39 .contacts-modal {
  40         // Special case otherwise contacts are not properly displayed
  41         --size: #{rem(740)};
  42 }
  43
  44 .ReactVirtualized__Grid__innerScrollContainer {
  45         min-block-size: 100%;
  46 }
  47
  48 .item-contact {
  49         &:hover {
  50                 z-index: 2;
  51                 box-shadow: var(--shadow-norm);
  52         }
  53 }
  54
  55 .contact-item-hover-action-buttons {
  56         display: none;
  57 }
  58
  59 @include media('mouse', '>small') {
  60         .contact-item-hover-action-buttons {
  61                 margin-inline-end: rem(-6); // Magic number to get perfect alignment with star on hover :D
  62         }
  63
  64         .contact-item-container:hover {
  65                 .contact-item-hover-action-buttons {
  66                         display: inline-flex; // We don't want any transition, so we can use `display`.
  67                 }
  68         }
  69 }