packages/components/containers/offers/Offer.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 $amount-size: 34; // should be 36, but don't increase more than 34, otherwise we'll have some display issues.
   4
   5 .offer {
   6         &-modal {
   7                 &.modal-two-dialog--large {
   8                         // only increasing size for large case = when 3 plans
   9                         --size: #{em(1050)}; // 992 before, but increase to have feature copy on one line...
  10                 }
  11
  12                 &.offer-modal--four-deals {
  13                         // larger case = when 4 plans
  14                         --size: #{em(1200)};
  15                 }
  16
  17                 &.offer-modal--one-deal {
  18                         --size: #{em(820)}; // half image & content
  19
  20                         .modal-two-content {
  21                                 margin-block-end: 0;
  22                                 @include media('>small') {
  23                                         display: flex;
  24                                         inline-size: 100%;
  25                                 }
  26                         }
  27
  28                         // kill scroll only for desktop
  29                         @include media('>small') {
  30                                 .scroll-outer-vertical .scroll-inner,
  31                                 .scroll-child {
  32                                         overflow: hidden;
  33                                         display: flex;
  34                                         block-size: 100%;
  35                                         inline-size: 100%;
  36                                 }
  37
  38                                 .offer-main-wrapper {
  39                                         inline-size: calc(100% + 4rem);
  40                                 }
  41
  42                                 .offer-main-content-container {
  43                                         overflow-y: auto;
  44                                 }
  45                         }
  46                 }
  47
  48                 .scroll-inner {
  49                         overflow: overlay; // trick for Chrome Mac layout rendering for scrollbar
  50                 }
  51         }
  52
  53         // for some promotions
  54         &-proton-logo {
  55                 @include media('<=small') {
  56                         inline-size: em(30); // just to avoid having images going to another next line on mobile
  57                 }
  58         }
  59         @include media('<=small') {
  60                 &-proton-logo {
  61                         inline-size: em(30); // just to avoid having images going to another next line on mobile
  62                 }
  63         }
  64
  65         // top banner offer
  66         // need to compensate modal paddings
  67         &-modal &-main-wrapper {
  68                 margin-inline: -2rem;
  69                 margin-block-start: -0.5em;
  70                 @include media('<=small') {
  71                         margin-inline: 0;
  72                 }
  73
  74                 // special case when deal title is not displayed
  75                 &--no-deal-title .offer-main-title {
  76                         margin-block-start: 1.5em;
  77                 }
  78
  79                 &--left-banner .offer-plan-container {
  80                         max-inline-size: 30em; // to use more space for features when only 1 plan with a side image
  81                 }
  82         }
  83
  84         &-modal:not(.offer-modal--one-deal) {
  85                 .offer-main-content {
  86                         margin-inline: 2rem;
  87                         @include media('<=small') {
  88                                 margin-inline: 0;
  89                         }
  90                 }
  91
  92                 @include media('>small') {
  93                         .offer-close-button--dark {
  94                                 color: white; // always above a banner, so hardcoded to white
  95                         }
  96                 }
  97         }
  98
  99         // side banner offer
 100         &-side-image-container,
 101         &-side-image {
 102                 min-inline-size: 300px;
 103                 @include media('<=#{em(900, 16)}') {
 104                         min-inline-size: 250px;
 105                 }
 106         }
 107
 108         &-main-wrapper--left-banner &-wrapper {
 109                 flex-direction: column;
 110                 align-items: center;
 111
 112                 .offer-plan-container:not(:first-child) {
 113                         margin-inline-start: 0;
 114                 }
 115         }
 116
 117         // special 2x2 stacking for four plan case
 118         &-main-wrapper--four-plans &-wrapper {
 119                 // special 2x2 stacking for four plan case
 120                 @include media('<=#{em(1200, 16)}') {
 121                         flex-wrap: wrap;
 122
 123                         .offer-plan-container {
 124                                 min-inline-size: calc(50% - 2em);
 125
 126                                 &--mostPopular {
 127                                         order: -4;
 128                                 }
 129
 130                                 &--secondMostPopular {
 131                                         order: -3;
 132                                 }
 133
 134                                 &--thirdMostPopular {
 135                                         order: -2;
 136                                 }
 137
 138                                 &:not(:first-child) {
 139                                         margin-inline-start: 0;
 140                                 }
 141                         }
 142                 }
 143         }
 144
 145         // contents of offers
 146         &-countdown {
 147                 &-number {
 148                         font-variant: tabular-nums;
 149                         min-inline-size: 2em;
 150                 }
 151         }
 152
 153         &-plan-container {
 154                 flex: 1;
 155                 max-inline-size: 26em;
 156
 157                 &:not(:first-child) {
 158                         margin-inline-start: 1em;
 159                         @include media('<=small') {
 160                                 margin-inline-start: 0;
 161                         }
 162                 }
 163                 @include media('<=small') {
 164                         max-inline-size: none;
 165
 166                         &--mostPopularOnMobile {
 167                                 order: -4;
 168                         }
 169
 170                         &--secondMostPopularOnMobile {
 171                                 order: -3;
 172                         }
 173
 174                         &--thirdMostPopularOnMobile {
 175                                 order: -2;
 176                         }
 177
 178                         &--fourthMostPopularOnMobile {
 179                                 order: -1;
 180                         }
 181                 }
 182         }
 183
 184         &-plan {
 185                 padding-inline: em(20);
 186                 @include media('<=#{em(850, 16)}') {
 187                         padding-inline: em(18);
 188                 }
 189                 @include media('<=small') {
 190                         padding-inline: em(24);
 191                 }
 192
 193                 &.is-focused {
 194                         border-color: var(--focus-outline);
 195                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 196                 }
 197         }
 198
 199         &-percentage {
 200                 inset-inline-start: 50%;
 201                 transform: translateX(-50%) translateY(-50%);
 202                 max-inline-size: calc(100% - 1em); // just to avoid pill touching edge
 203                 border-radius: 1em;
 204                 z-index: 1;
 205
 206                 [dir='rtl'] & {
 207                         transform: translateX(50%) translateY(-50%);
 208                 }
 209         }
 210
 211         &-most-popular {
 212                 min-block-size: 1.5em;
 213
 214                 // no need to keep space for 1 plan case
 215                 .offer-modal--one-deal &:empty {
 216                         display: none;
 217                 }
 218
 219                 // hidden when empty on mobile
 220                 @include media('<=small') {
 221                         &:empty {
 222                                 display: none;
 223                         }
 224                 }
 225         }
 226
 227         &-plan-namePeriod {
 228                 .offer-modal:not(.offer-modal--one-deal) & {
 229                         @include media('<=#{em(850, 16)}') {
 230                                 min-block-size: 6em; // proton unlimited on 2 lines
 231                         }
 232                         @include media('<=small') {
 233                                 min-block-size: 0;
 234                         }
 235                 }
 236         }
 237
 238         &-monthly-price {
 239                 display: block;
 240
 241                 .amount,
 242                 .currency {
 243                         font-size: em($amount-size);
 244                         font-weight: var(--font-weight-bold);
 245                         @include media('<=#{em(1050, 16)}') {
 246                                 font-size: em(28);
 247                         }
 248                         @include media('<=#{em(770, 16)}') {
 249                                 // fix for medium viewports
 250                                 font-size: em(24);
 251                         }
 252                         @include media('<=small') {
 253                                 font-size: em($amount-size);
 254                         }
 255                 }
 256
 257                 .suffix {
 258                         margin-inline-start: 0.5em;
 259                         color: var(--text-weak);
 260                         display: inline-block;
 261
 262                         .offer-modal:not(.offer-modal--one-deal) & {
 263                                 @include media('<=#{em(960, 16)}') {
 264                                         min-inline-size: 100%;
 265                                         position: relative;
 266                                         inset-block-start: -0.5em;
 267                                 }
 268                                 @include media('<=small') {
 269                                         min-inline-size: 0;
 270                                         position: static;
 271                                 }
 272                         }
 273                 }
 274
 275                 &--suffix-new-line .suffix {
 276                         margin-inline-start: 0;
 277                         display: block;
 278                         inline-size: 100%;
 279                 }
 280         }
 281
 282         &-regular-price {
 283                 inset-block-start: -0.2em; // magic number to be a bit closer to real price and not CTA
 284         }
 285
 286         &-features:empty {
 287                 display: none;
 288         }
 289
 290         &-features {
 291                 .info-button {
 292                         position: relative;
 293                         inset-block-start: em(-2);
 294                 }
 295         }
 296 }