applications/calendar/src/app/styles/_eventpopover.scss

   1 @use 'sass:map';
   2 @import '~@proton/styles/scss/lib';
   3
   4 .eventpopover {
   5         position: absolute;
   6         z-index: map.get($z-indexes, 'floating-frames');
   7         transform-origin: 50%;
   8         padding: rem(24);
   9         overflow: auto;
  10         background: var(--background-norm);
  11         color: var(--text-norm);
  12         animation: eventpopoverIn ease 0.15s;
  13         animation-fill-mode: both;
  14         border: 1px solid var(--border-weak);
  15
  16         @include media('<=small') {
  17                 inset: 0;
  18                 inline-size: 100%;
  19                 block-size: 100%;
  20         }
  21
  22         @include media('>small') {
  23                 inline-size: rem(500);
  24                 max-inline-size: rem(368);
  25                 max-block-size: 100%;
  26                 border-radius: var(--border-radius-lg);
  27                 box-shadow: var(--shadow-lifted);
  28         }
  29
  30         @include media('<=small') {
  31                 padding-inline: rem(16);
  32         }
  33
  34         @include media('print') {
  35                 inline-size: rem(368);
  36                 block-size: fit-content;
  37                 border: 1px solid var(--border-norm);
  38         }
  39
  40         &,
  41         &:focus-visible,
  42         &:focus:focus-visible {
  43                 outline: none;
  44         }
  45
  46         // transition: all .25s ease; should be applied only when opened and end of animation <-- this is solved by react-transition-group
  47         &-header {
  48                 &--draggable {
  49                         padding-block: rem(5);
  50                         padding-inline: rem(8);
  51                         margin-block: rem(-24) rem(24);
  52                         margin-inline: rem(-24);
  53                         cursor: grab;
  54                         background-color: var(--background-weak);
  55                         border-block-end: 1px solid var(--border-weak);
  56
  57                         &:active {
  58                                 cursor: grabbing;
  59                         }
  60                 }
  61         }
  62
  63         &-actions {
  64                 > * + * {
  65                         margin-inline-start: rem(8);
  66                 }
  67
  68                 &-separator {
  69                         background-color: var(--border-norm);
  70                         inline-size: rem(1);
  71                         block-size: rem(28);
  72                 }
  73         }
  74
  75         &-title {
  76                 font-size: rem(24);
  77         }
  78
  79         .participant {
  80                 min-block-size: rem(32);
  81
  82                 &-text {
  83                         line-height: rem(20);
  84                 }
  85
  86                 &-extra-text {
  87                         line-height: rem(16);
  88                 }
  89
  90                 &:first-child,
  91                 &.is-organizer,
  92                 + .participant {
  93                         margin-block-start: em(12); // from design
  94                 }
  95
  96                 &.needsAction {
  97                         border-color: var(--border-norm);
  98                 }
  99
 100                 &-display {
 101                         border-radius: var(--border-radius-md);
 102                 }
 103         }
 104
 105         .partstatIcon {
 106                 position: absolute;
 107                 inset-inline-end: 0;
 108                 inset-block-end: 0;
 109                 transform: translate3d(50%, 50%, 0);
 110         }
 111
 112         .tabs {
 113                 min-block-size: 12em;
 114         }
 115
 116         // special fix when no select for calendar ------------------
 117         &-calendar-select:has(.field--frozen) {
 118                 .label {
 119                         padding-block: 0;
 120                 }
 121
 122                 .field--frozen {
 123                         // let it go
 124                         block-size: auto;
 125                         padding-block: 0;
 126                 }
 127         }
 128
 129         // special fix for popover line with fullday checkbox + recurrency (DE) ------------------
 130         &-fullday-recurrency {
 131                 @include media('>=#{em(350, 16)}') {
 132                         flex-flow: row nowrap;
 133
 134                         .eventpopover-recurrency {
 135                                 margin-block-start: 0;
 136                                 margin-inline-start: auto;
 137                         }
 138                 }
 139                 @include media('<#{em(350, 16)}') {
 140                         button {
 141                                 flex-direction: row-reverse;
 142                                 justify-content: flex-end;
 143                         }
 144                 }
 145         }
 146
 147         // special fixes for recurring frequency ------------------
 148         .noInEventPopover {
 149                 display: none;
 150         }
 151
 152         .onpopover-flex-column {
 153                 flex-direction: column;
 154
 155                 & > * {
 156                         inline-size: 100%;
 157                         flex-basis: auto;
 158                 }
 159         }
 160
 161         // --------------------------------------------------------
 162 }
 163
 164 @keyframes eventpopoverIn {
 165         from {
 166                 opacity: 0;
 167         }
 168
 169         to {
 170                 opacity: 1;
 171         }
 172 }