packages/components/containers/contacts/view/ContactView.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 .contact-view {
   4         &-actions {
   5                 margin-block-start: -0.5em;
   6         }
   7
   8         .contactsummary-contact-name {
   9                 font-size: em(24);
  10                 line-height: 1.333; // design wanted 32px for line-height
  11                 flex: 1 1 auto;
  12                 margin-block-end: 0.25em;
  13         }
  14
  15         /*
  16          * Make summary elements wrap at 1500
  17          */
  18         @include media('<=xlarge') {
  19                 .contactsummary-contact-name-container {
  20                         display: flex;
  21                         flex-direction: column;
  22                 }
  23
  24                 .contactsummary-action-buttons {
  25                         > :first-child {
  26                                 margin-inline-start: 0;
  27                         }
  28                 }
  29         }
  30
  31         /*
  32         * triger mobile adaptation around 1000px because... not enough space
  33         */
  34         @include media('>medium', '<=large') {
  35                 .contactsummary-container {
  36                         display: block;
  37                 }
  38
  39                 .contactsummary-photo-container {
  40                         inline-size: auto;
  41                         margin-block-end: 0.5em;
  42                         margin-inline: auto;
  43                 }
  44
  45                 .contactsummary-contact-name-container {
  46                         padding-inline-start: 0;
  47                 }
  48
  49                 .contactsummary-contact-name {
  50                         margin-block-end: 1em;
  51                         text-align: center;
  52                 }
  53
  54                 .contactsummary-action-buttons {
  55                         text-align: center;
  56                 }
  57
  58                 .contact-view-contents,
  59                 .contact-view-cta {
  60                         padding-inline: 0;
  61                 }
  62
  63                 .contact-summary-wrapper {
  64                         margin-inline: 0;
  65                 }
  66
  67                 .contact-view-row-left {
  68                         flex-direction: column;
  69                 }
  70
  71                 .contact-view-row-label {
  72                         max-inline-size: 100%;
  73                 }
  74
  75                 .contact-view-row-content {
  76                         flex-basis: auto;
  77                         padding-inline-start: 0;
  78                 }
  79         }
  80 }