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

   1 /*
   2   Appearance factorization
   3 */
   4
   5 .calendar-dayeventcell,
   6 .calendar-eventcell {
   7         --opacity: 1;
   8
   9         font-size: rem(12);
  10         line-height: rem(14);
  11
  12         &-title {
  13                 padding-block: em(2);
  14         }
  15 }
  16
  17 .calendar-dayeventcell-inner,
  18 .calendar-eventcell {
  19         border: solid var(--color-alt);
  20         border-block-start-width: 1px;
  21         border-block-end-width: 1px;
  22         border-inline-start-width: 5px;
  23         border-inline-end-width: 1px;
  24         padding-block: em(2);
  25         padding-inline: em(3);
  26         border-radius: var(--border-radius-sm);
  27         background-color: var(--color-main);
  28         color: var(--foreground);
  29         cursor: pointer;
  30         opacity: var(--opacity);
  31         transition:
  32                 all 0.1s ease-out,
  33                 opacity 0.5s ease-out,
  34                 background-color 0.15s ease-in-out;
  35         animation: loadingEvent 1s easing(ease-in-quint) infinite alternate;
  36
  37         & > * {
  38                 transition: opacity 0.1s ease-out;
  39         }
  40
  41         &.isHidden {
  42                 z-index: 4;
  43                 opacity: 0;
  44                 visibility: hidden;
  45                 pointer-events: none;
  46         }
  47
  48         &.isLoaded {
  49                 animation: none;
  50         }
  51
  52         &.isDeclined,
  53         &.isCancelled {
  54                 border-color: var(--color-alt);
  55                 background-color: var(--background-norm);
  56                 color: inherit;
  57                 text-decoration: line-through;
  58         }
  59
  60         &.isUnanswered {
  61                 border-color: var(--color-alpha);
  62                 border-inline-start-color: var(--color-alt);
  63                 background-color: var(--background-norm);
  64                 background-image: linear-gradient(
  65                         105deg,
  66                         transparent 38%,
  67                         var(--color-alpha) 42%,
  68                         var(--color-alpha) 48%,
  69                         transparent 52%,
  70                         transparent 88%,
  71                         var(--color-alpha) 92%,
  72                         var(--color-alpha) 100%
  73                 );
  74                 background-size: 5.18px 19.32px;
  75                 color: currentcolor;
  76         }
  77
  78         &.isPast {
  79                 border-color: rgb(0 0 0 / 0.1);
  80                 border-inline-start-color: var(--color-alt);
  81                 background: var(--background-strong);
  82                 color: inherit;
  83
  84                 &:not(.isSelected) > * {
  85                         opacity: 0.5;
  86                 }
  87         }
  88
  89         &.isSelected {
  90                 z-index: 6;
  91                 border-color: rgb(0 0 0 / 0.4);
  92                 box-shadow: var(--shadow-norm);
  93
  94                 &.isPast,
  95                 &.isDeclined,
  96                 &.isCancelled,
  97                 &.isUnanswered {
  98                         border-inline-start-color: var(--color-alt);
  99                 }
 100         }
 101 }
 102
 103 @keyframes loadingEvent {
 104         from {
 105                 opacity: var(--opacity);
 106         }
 107
 108         to {
 109                 opacity: calc(var(--opacity) - 0.4);
 110         }
 111 }
 112
 113 /*
 114   Full day event
 115 */
 116
 117 .calendar-dayeventcell {
 118         padding-inline-end: $calendar-gridcell-margin;
 119         padding-block-start: $calendar-gridcell-gutter;
 120         white-space: nowrap;
 121
 122         &-inner {
 123                 position: relative;
 124                 min-block-size: 100%;
 125                 padding-block: 0;
 126                 padding-inline: 0.5em;
 127
 128                 &.isNotAllDay {
 129                         border: none;
 130
 131                         &.isPast,
 132                         &:not(.isUnanswered) {
 133                                 background: none;
 134                                 color: inherit;
 135                         }
 136
 137                         &:hover,
 138                         &:focus {
 139                                 background-color: var(--interaction-default-hover);
 140                         }
 141
 142                         &:active {
 143                                 background-color: var(--interaction-default-active);
 144                         }
 145                 }
 146         }
 147
 148         &.isOutsideStart &-inner {
 149                 padding-inline-start: 0;
 150         }
 151
 152         &.isOutsideEnd,
 153         &.isOutsideEnd &-inner {
 154                 padding-inline-end: 0;
 155         }
 156
 157         &-circle {
 158                 color: var(--background-strong);
 159         }
 160
 161         &-inner.isLoaded &-circle {
 162                 color: var(--color-main);
 163         }
 164
 165         &-lock-icon {
 166                 transform: translateY(-0.125em); // Magic number to visually align it -_-v
 167         }
 168
 169         &-time {
 170                 margin-inline-end: 0.25em;
 171         }
 172
 173         &-title {
 174                 font-weight: var(--font-weight-semibold);
 175         }
 176 }
 177
 178 /*
 179   Part day event
 180 */
 181
 182 .calendar-eventcell {
 183         position: absolute;
 184         z-index: 5;
 185
 186         &-title {
 187                 /* stylelint-disable-next-line */
 188                 display: -webkit-box;
 189                 /* stylelint-disable-next-line */
 190                 -webkit-box-orient: vertical;
 191                 overflow: hidden;
 192                 -webkit-line-clamp: max(calc(var(--line-number) - 1), 1);
 193                 font-weight: var(--font-weight-semibold);
 194                 word-break: break-word;
 195         }
 196
 197         // in this case, we remove 2 lines ellipsis for a simple ellipsis
 198         // because it's creating bad truncation of content in some cases
 199         &--title-small-fit &-title {
 200                 display: block;
 201                 /* stylelint-disable-next-line */
 202                 -webkit-box-orient: unset;
 203                 /* stylelint-disable-next-line */
 204                 -webkit-line-clamp: unset;
 205                 text-overflow: ellipsis;
 206                 white-space: nowrap;
 207         }
 208
 209         @include media('<=small') {
 210                 &-title,
 211                 &-timestring {
 212                         font-size: rem(12);
 213                 }
 214         }
 215
 216         /*
 217          * Adaptations for small sizes, meaning below 30 minutes events
 218          */
 219         $line-height: calc(var(--line-height) * 1px - 2px); // 2px for borders
 220
 221         &:is(#{&}--sm, #{&}--xs, #{&}--2xs) {
 222                 padding-block: 0;
 223                 line-height: $line-height;
 224         }
 225
 226         &:is(#{&}--sm, #{&}--xs, #{&}--2xs) &-lock-icon {
 227                 inline-size: min(#{$line-height}, #{rem(16)});
 228                 block-size: min(#{$line-height}, #{rem(16)});
 229         }
 230
 231         &--sm &-title {
 232                 padding-block-start: 0;
 233                 font-size: rem(13);
 234         }
 235
 236         &--xs &-title {
 237                 padding-block-start: 0;
 238                 font-size: rem(12);
 239         }
 240
 241         &--2xs &-title {
 242                 padding-block-start: 0;
 243                 font-size: rem(9.6); // design value
 244         }
 245 }