packages/components/containers/gmailSyncModal/GmailSyncModalAnimation.scss

   1 @use 'sass:map';
   2 @use 'sass:math';
   3 @import '~@proton/styles/scss/lib';
   4
   5 .gsma {
   6         $keyframes: (
   7                 initial_pause: 0.5,
   8                 envelope: 0.5,
   9                 inbox: 0.75,
  10                 inbox_pause: 0.25,
  11                 new-mail: 0.5,
  12                 new-mail_pause: 1,
  13                 forwarded: 0.75,
  14                 forwarded_pause: 0.5,
  15                 received: 0.6,
  16                 received_pause: 0.5,
  17                 trackers: 0.6,
  18                 trackers_pause: 0.5,
  19                 encrypted: 0.6,
  20                 encrypted_pause: 0.5,
  21         );
  22
  23         @function duration($key) {
  24                 @return map.get($keyframes, $key) * 1s;
  25         }
  26
  27         @function delay($key) {
  28                 $value: 0;
  29                 @each $k, $v in $keyframes {
  30                         $value: $value + $v;
  31                         @if $k == $key {
  32                                 @return $value * 1s;
  33                         }
  34                 }
  35         }
  36
  37         position: relative;
  38         padding: 1.5rem;
  39         overflow: hidden;
  40         border-radius: var(--border-radius-lg);
  41         font-size: em(18);
  42         line-height: 1.2;
  43         pointer-events: none;
  44
  45         &::before {
  46                 content: '';
  47                 position: absolute;
  48                 inset: 0;
  49                 z-index: -1;
  50                 background-image: linear-gradient(to bottom, var(--interaction-norm-minor-2), var(--interaction-norm));
  51                 opacity: 0.22;
  52         }
  53
  54         &-gmail-username-inbox {
  55                 position: relative;
  56                 z-index: 1;
  57                 display: inline-flex;
  58                 max-inline-size: 100%;
  59                 margin-block-end: 1.5rem;
  60                 flex-flow: row nowrap;
  61                 align-items: stretch;
  62         }
  63
  64         &-gmail-logo {
  65                 position: relative;
  66                 z-index: 1;
  67                 display: inline-flex;
  68                 inline-size: rem(56);
  69                 block-size: rem(56);
  70                 padding: 0.5rem;
  71                 flex: 0 0 auto;
  72                 border-radius: var(--border-radius-lg);
  73                 box-shadow: var(--shadow-lifted);
  74                 background-color: var(--background-norm);
  75                 animation: duration(envelope) easing(ease-out-quart) delay(initial_pause) both anime-gsma-gmail-logo;
  76
  77                 @keyframes anime-gsma-gmail-logo {
  78                         from {
  79                                 scale: 0;
  80                                 opacity: 0;
  81                         }
  82
  83                         to {
  84                                 scale: 1;
  85                                 opacity: 1;
  86                         }
  87                 }
  88
  89                 img {
  90                         inline-size: rem(40);
  91                         block-size: rem(30);
  92                         margin: auto;
  93                 }
  94         }
  95
  96         &-username {
  97                 position: relative;
  98                 display: flex;
  99                 max-inline-size: calc(100% - #{rem(56)});
 100                 padding-inline: 1rem;
 101                 justify-content: center;
 102                 align-items: center;
 103                 animation: duration(inbox) easing(ease-out-back) delay(envelope) both anime-gsma-username;
 104
 105                 @keyframes anime-gsma-username {
 106                         from {
 107                                 translate: -1rem 0;
 108                                 opacity: 0;
 109                         }
 110
 111                         to {
 112                                 translate: 0 0;
 113                                 opacity: 1;
 114                         }
 115                 }
 116
 117                 &::before {
 118                         content: '';
 119                         position: absolute;
 120                         inset-inline: #{rem(56) * -1} 0;
 121                         inset-block: 0;
 122                         transform-origin: center right;
 123                         z-index: -1;
 124                         border-radius: var(--border-radius-lg) var(--border-radius-md) var(--border-radius-md) var(--border-radius-lg);
 125                         box-shadow: var(--shadow-norm);
 126                         background-color: var(--background-norm);
 127                         animation: duration(inbox) easing(ease-out-back) delay(envelope) both anime-gsma-username-background;
 128
 129                         @keyframes anime-gsma-username-background {
 130                                 from {
 131                                         scale: 0.8 1;
 132                                         opacity: 0;
 133                                 }
 134
 135                                 to {
 136                                         scale: 1;
 137                                         opacity: 1;
 138                                 }
 139                         }
 140                 }
 141
 142                 &-content {
 143                         overflow: hidden;
 144                         text-overflow: ellipsis;
 145                 }
 146         }
 147
 148         &-auto-forward {
 149                 position: relative;
 150                 z-index: 1;
 151                 display: flex;
 152                 min-block-size: rem(35);
 153                 margin-block-end: 1.5rem;
 154                 flex-flow: row nowrap;
 155                 align-items: stretch;
 156                 gap: 1rem;
 157                 animation: duration(new-mail) easing(ease-out-back) delay(inbox_pause) both anime-gsma-auto-forward;
 158
 159                 @keyframes anime-gsma-auto-forward {
 160                         from {
 161                                 translate: 0 -1rem;
 162                                 opacity: 0;
 163                         }
 164
 165                         to {
 166                                 translate: 0 0;
 167                                 opacity: 1;
 168                         }
 169                 }
 170         }
 171
 172         &-envelope {
 173                 position: relative;
 174                 z-index: 1;
 175                 flex: 0 0 auto;
 176                 animation: duration(forwarded) easing(ease-out-quad) delay(new-mail_pause) both anime-gsma-envelope;
 177
 178                 @keyframes anime-gsma-envelope {
 179                         from {
 180                                 inset-inline-start: 0;
 181                         }
 182
 183                         to {
 184                                 inset-inline-start: calc(100% - #{rem(55)});
 185                         }
 186                 }
 187
 188                 img {
 189                         inline-size: rem(55);
 190                         block-size: rem(35);
 191                         box-shadow: var(--shadow-norm);
 192                         animation: duration(forwarded) easing(ease-in-quart) delay(new-mail_pause) both anime-gsma-envelope-img;
 193
 194                         @keyframes anime-gsma-envelope-img {
 195                                 from {
 196                                         translate: 0 0;
 197                                         scale: 1;
 198                                         rotate: 0deg;
 199                                         opacity: 1;
 200                                 }
 201
 202                                 to {
 203                                         translate: 0 4rem;
 204                                         scale: 0.5;
 205                                         rotate: 70deg;
 206                                         opacity: 0;
 207                                 }
 208                         }
 209                 }
 210
 211                 &::before {
 212                         content: '1';
 213                         position: absolute;
 214                         inset-block-start: -0.75rem;
 215                         inset-inline-end: -0.75rem;
 216                         z-index: 2;
 217                         display: flex;
 218                         block-size: 1.5rem;
 219                         inline-size: 1.5rem;
 220                         justify-content: center;
 221                         align-items: center;
 222                         border-radius: 50%;
 223                         background-color: var(--signal-danger);
 224                         color: var(--signal-danger-contrast);
 225                         font-weight: bold;
 226                         animation: duration(forwarded) easing(ease-in-cubic) delay(new-mail_pause) both anime-gsma-envelope-count;
 227
 228                         @keyframes anime-gsma-envelope-count {
 229                                 from {
 230                                         inset-block-start: -0.75rem;
 231                                 }
 232
 233                                 to {
 234                                         inset-block-start: calc(100% + 0.75rem);
 235                                 }
 236                         }
 237                 }
 238         }
 239
 240         &-new-email {
 241                 position: relative;
 242                 display: flex;
 243                 padding-block: 0.5rem;
 244                 padding-inline: 1rem;
 245                 justify-content: center;
 246                 align-items: center;
 247                 border-radius: var(--border-radius-md);
 248                 box-shadow: var(--shadow-norm);
 249                 background-color: var(--background-norm);
 250                 animation: duration(forwarded) easing(ease-out-quad) delay(new-mail_pause) both anime-gsma-new-email;
 251
 252                 @keyframes anime-gsma-new-email {
 253                         0% {
 254                                 inset-inline-start: 0;
 255                                 opacity: 1;
 256                         }
 257
 258                         50% {
 259                                 opacity: 0;
 260                         }
 261
 262                         100% {
 263                                 inset-inline-start: calc(100% - 4.5rem);
 264                                 opacity: 0;
 265                         }
 266                 }
 267         }
 268
 269         &-forwarded {
 270                 position: absolute;
 271                 inset-block-start: 0;
 272                 inset-inline-start: 0;
 273                 z-index: 1;
 274                 display: flex;
 275                 padding-block: 0.5rem;
 276                 padding-inline: 1rem;
 277                 justify-content: center;
 278                 align-items: center;
 279                 border-radius: var(--border-radius-md);
 280                 box-shadow: var(--shadow-norm);
 281                 background-color: var(--background-norm);
 282                 animation: duration(forwarded) easing(ease-out-cubic) delay(new-mail_pause) both anime-gsma-forwarded;
 283
 284                 @keyframes anime-gsma-forwarded {
 285                         from {
 286                                 translate: calc(-100% - 2rem) 0;
 287                                 opacity: 0;
 288                         }
 289
 290                         to {
 291                                 translate: 0 0;
 292                                 opacity: 1;
 293                         }
 294                 }
 295         }
 296
 297         &-proton {
 298                 display: flex;
 299                 inline-size: rem(56);
 300                 block-size: rem(56);
 301                 padding: 0.25rem;
 302                 margin-block-end: 1.5rem;
 303                 margin-inline-start: auto;
 304                 aspect-ratio: 1;
 305                 border-radius: var(--border-radius-lg);
 306                 box-shadow: var(--shadow-lifted);
 307                 background-color: var(--background-norm);
 308                 animation: duration(forwarded) easing(ease-out-quint) delay(new-mail_pause) both anime-gsma-proton;
 309
 310                 @keyframes anime-gsma-proton {
 311                         from {
 312                                 scale: 0;
 313                                 opacity: 0;
 314                         }
 315
 316                         to {
 317                                 scale: 1;
 318                                 opacity: 1;
 319                         }
 320                 }
 321
 322                 &-logo {
 323                         margin: auto;
 324                 }
 325         }
 326
 327         &-received,
 328         &-trackers,
 329         &-encrypted {
 330                 display: flex;
 331                 margin-block-end: 1.5rem;
 332                 flex-flow: row nowrap;
 333                 justify-content: flex-end;
 334                 align-items: center;
 335
 336                 &-inner {
 337                         display: flex;
 338                         min-block-size: rem(50);
 339                         padding-block: 0.5rem;
 340                         padding-inline: 1rem;
 341                         flex-flow: row nowrap;
 342                         justify-content: stretch;
 343                         border-radius: var(--border-radius-md);
 344                         box-shadow: var(--shadow-norm);
 345                         animation: anime-gsma-rte-inner easing(ease-out-cubic) both;
 346
 347                         @keyframes anime-gsma-rte-inner {
 348                                 from {
 349                                         translate: 0 -1.5rem;
 350                                         opacity: 0;
 351                                 }
 352
 353                                 to {
 354                                         translate: 0 0;
 355                                         opacity: 1;
 356                                 }
 357                         }
 358
 359                         &-content {
 360                                 display: flex;
 361                                 flex-flow: row nowrap;
 362                                 justify-content: flex-start;
 363                                 align-items: center;
 364                                 animation: anime-gsma-rte-inner-content easing(ease-out-cubic) both;
 365                                 animation-duration: inherit;
 366                                 animation-delay: inherit;
 367
 368                                 @keyframes anime-gsma-rte-inner-content {
 369                                         from {
 370                                                 translate: 0 -2.5rem;
 371                                                 opacity: 0;
 372                                         }
 373
 374                                         to {
 375                                                 translate: 0 0;
 376                                                 opacity: 1;
 377                                         }
 378                                 }
 379                         }
 380                 }
 381
 382                 img {
 383                         margin-inline-end: 0.5rem;
 384                         flex: 0 0 auto;
 385                         animation: anime-gsma-icon-rotate easing(ease-out-cubic) both;
 386                         animation-duration: inherit;
 387                         animation-delay: inherit;
 388
 389                         @keyframes anime-gsma-icon-rotate {
 390                                 from {
 391                                         rotate: 0deg;
 392                                         scale: 0;
 393                                         opacity: 0;
 394                                 }
 395
 396                                 to {
 397                                         rotate: 360deg;
 398                                         scale: 1;
 399                                         opacity: 1;
 400                                 }
 401                         }
 402                 }
 403         }
 404
 405         &-received {
 406                 &-inner {
 407                         animation-duration: duration(received);
 408                         animation-delay: delay(forwarded_pause);
 409                 }
 410         }
 411
 412         &-trackers {
 413                 &-inner {
 414                         animation-duration: duration(trackers);
 415                         animation-delay: delay(received_pause);
 416                 }
 417
 418                 img {
 419                         animation-duration: duration(trackers);
 420                         animation-delay: #{delay(received_pause) + math.div(duration(trackers), 2)};
 421                 }
 422         }
 423
 424         &-encrypted {
 425                 margin-block-end: 0;
 426
 427                 &-inner {
 428                         animation-duration: duration(encrypted);
 429                         animation-delay: delay(trackers_pause);
 430                 }
 431
 432                 img {
 433                         animation-duration: duration(encrypted);
 434                         animation-delay: #{delay(trackers_pause) + math.div(duration(encrypted), 2)};
 435                 }
 436         }
 437
 438         // Class override only for reduce mode where everything is smaller
 439         &.gsma--reduced-height {
 440                 font-size: em(14);
 441                 line-height: 1;
 442                 font-weight: 500;
 443
 444                 .gsma-gmail-username-inbox {
 445                         margin-block-end: 1rem;
 446                 }
 447
 448                 .gsma-auto-forward {
 449                         margin-block-end: 0;
 450                 }
 451
 452                 .gsma-encrypted {
 453                         margin-block-end: 0;
 454                 }
 455
 456                 .gsma-proton,
 457                 .gsma-received,
 458                 .gsma-trackers {
 459                         margin-block-end: 0.75rem;
 460                 }
 461
 462                 .gsma-proton,
 463                 .gsma-received,
 464                 .gsma-trackers,
 465                 .gsma-encrypted {
 466                         &-inner {
 467                                 min-block-size: rem(30);
 468                                 padding-inline: 0.75rem;
 469                                 padding-block: 0.375rem;
 470                         }
 471
 472                         img {
 473                                 inline-size: rem(20);
 474                                 block-size: rem(20);
 475                         }
 476                 }
 477
 478                 .gsma-envelope {
 479                         &::before {
 480                                 animation: duration(forwarded) easing(ease-in-cubic) delay(new-mail_pause) both
 481                                         anime-gsma-envelope-count-reduced;
 482
 483                                 @keyframes anime-gsma-envelope-count-reduced {
 484                                         from {
 485                                                 inset-block-start: -0.75rem;
 486                                         }
 487
 488                                         to {
 489                                                 inset-block-start: 1.5rem;
 490                                         }
 491                                 }
 492                         }
 493                 }
 494
 495                 @include media('<=small') {
 496                         padding: 1rem;
 497
 498                         .gsma-gmail-username-inbox {
 499                                 margin-block-end: 0.75rem;
 500
 501                                 .gsma-username {
 502                                         max-inline-size: calc(100% - #{rem(40)});
 503
 504                                         &::before {
 505                                                 inset-inline: #{rem(40) * -1} 0;
 506                                         }
 507                                 }
 508                         }
 509
 510                         .gsma-envelope {
 511                                 margin-block-start: 0.375rem;
 512                                 animation: duration(forwarded) easing(ease-out-quad) delay(new-mail_pause) both anime-gsma-envelope-small;
 513
 514                                 @keyframes anime-gsma-envelope-small {
 515                                         from {
 516                                                 inset-inline-start: 0;
 517                                         }
 518
 519                                         to {
 520                                                 inset-inline-start: calc(100% - #{rem(48)});
 521                                         }
 522                                 }
 523
 524                                 img {
 525                                         inline-size: rem(45);
 526                                         block-size: rem(29);
 527                                 }
 528
 529                                 &::before {
 530                                         inset-block-start: -0.5rem;
 531                                         inset-inline-end: -0.5rem;
 532                                         block-size: 1rem;
 533                                         inline-size: 1rem;
 534                                         animation: duration(forwarded) easing(ease-in-cubic) delay(new-mail_pause) both
 535                                                 anime-gsma-envelope-count-reduced-small;
 536
 537                                         @keyframes anime-gsma-envelope-count-reduced-small {
 538                                                 from {
 539                                                         inset-block-start: -0.75rem;
 540                                                 }
 541
 542                                                 to {
 543                                                         inset-block-start: 1.375rem;
 544                                                 }
 545                                         }
 546                                 }
 547                         }
 548
 549                         .gsma-gmail-logo,
 550                         .gsma-proton {
 551                                 inline-size: rem(40);
 552                                 block-size: rem(40);
 553                                 padding: 0.375rem;
 554                         }
 555
 556                         .gsma-proton,
 557                         .gsma-received,
 558                         .gsma-trackers {
 559                                 margin-block-end: 0.5rem;
 560                         }
 561
 562                         .gsma-proton,
 563                         .gsma-received,
 564                         .gsma-trackers,
 565                         .gsma-encrypted {
 566                                 &-inner {
 567                                         min-block-size: rem(28);
 568                                         padding-inline: 0.5rem;
 569                                         padding-block: 0.25rem;
 570                                 }
 571
 572                                 img {
 573                                         inline-size: rem(16);
 574                                         block-size: rem(16);
 575                                 }
 576                         }
 577                 }
 578         }
 579 }