applications/calendar/src/app/components/events/EventPopover.scss

   1 @use 'sass:map';
   2 @import '~@proton/styles/scss/lib';
   3
   4 .event-popover {
   5         &-calendar-border {
   6                 inline-size: rem(8);
   7                 border-radius: rem(4);
   8                 background-color: var(--calendar-color, transparent);
   9                 margin-inline-end: rem(25);
  10                 min-block-size: rem(28);
  11                 margin-block-end: rem(4);
  12
  13                 @include media('<=xsmall') {
  14                         margin-inline-end: rem(18);
  15                 }
  16
  17                 &.isUnanswered {
  18                         // 1 pseudo element for white background
  19                         // 1 for gradient, because transparency and some other glitches
  20                         &::after,
  21                         &::before {
  22                                 content: '';
  23                                 position: absolute;
  24                                 inset: 0;
  25                                 border-radius: rem(4);
  26                         }
  27
  28                         &::before {
  29                                 z-index: 0;
  30                                 background-color: var(--background-norm);
  31                                 border: 1px solid var(--calendar-color, transparent);
  32                         }
  33
  34                         &::after {
  35                                 background-image: repeating-linear-gradient(
  36                                         -60deg,
  37                                         transparent,
  38                                         transparent rem(2),
  39                                         var(--calendar-color, transparent) rem(2),
  40                                         var(--calendar-color, transparent) rem(3)
  41                                 );
  42                                 opacity: 0.25;
  43                                 z-index: 2;
  44                         }
  45                 }
  46         }
  47 }