packages/styles/scss/components/_topnav.scss

   1 .topnav-link {
   2         &--blackfriday::before {
   3                 content: '';
   4                 position: absolute;
   5                 inline-size: rem(7);
   6                 block-size: rem(7);
   7                 background: var(--signal-danger);
   8                 border-radius: 50%;
   9                 inset-inline-start: calc(#{rem(17.5)} + #{rem(15)});
  10                 inset-block-start: calc(50% - #{rem(14)});
  11         }
  12 }
  13
  14 .topnav-list > li:not(:last-child) {
  15         margin-inline-end: 0.25em;
  16
  17         /* Decrease margins (was 1em) */
  18         @include media('<=#{em(1500, 16)}') {
  19                 margin-inline-end: 1px;
  20         }
  21 }
  22
  23 .topnav-icon {
  24         margin-inline-end: 0.5em;
  25 }
  26
  27 .topnav-vr {
  28         @include media('<=large') {
  29                 display: none;
  30         }
  31 }
  32
  33 // code to collapse all elements except upgrade button (topnav-listItem--noCollapse)
  34 @mixin collapse-all-four-except-upgrade {
  35         .topnav-list--four-elements {
  36                 .topnav-listItem:not(.topnav-listItem--noCollapse) {
  37                         // we collapse text as general case
  38                         .navigation-title {
  39                                 // equivalent of .sr-only, but impossible to extend in a breakpoint
  40                                 border: 0;
  41                                 clip: rect(0 0 0 0);
  42                                 block-size: 1px;
  43                                 margin: -1px;
  44                                 overflow: hidden;
  45                                 padding: 0;
  46                                 position: absolute;
  47                                 inline-size: 1px;
  48                         }
  49
  50                         .topnav-icon {
  51                                 margin-inline-end: 0;
  52
  53                                 &.expand-caret {
  54                                         margin-inline-start: 0.25em;
  55                                 }
  56                         }
  57                 }
  58         }
  59 }
  60
  61 // code to collapse all elements with NO exception
  62 @mixin collapse-all-four-no-exception {
  63         .topnav-list--four-elements {
  64                 .topnav-link {
  65                         padding-inline: rem(5);
  66                 }
  67
  68                 .topnav-listItem:not(.topnav-listItem--noCollapse) {
  69                         .navigation-title {
  70                                 // collapse for ALL without any exception
  71                                 // equivalent of .sr-only, but impossible to extend in a breakpoint
  72                                 border: 0;
  73                                 clip: rect(0 0 0 0);
  74                                 block-size: 1px;
  75                                 margin: -1px;
  76                                 overflow: hidden;
  77                                 padding: 0;
  78                                 position: absolute;
  79                                 inline-size: 1px;
  80                         }
  81                 }
  82
  83                 .topnav-icon {
  84                         margin-inline-end: 0;
  85                 }
  86
  87                 .topnav-link--blackfriday::before {
  88                         inset-inline-start: calc(#{rem(5)} + #{rem(15)});
  89                 }
  90
  91                 .topnav-link--notification {
  92                         .notification-dot {
  93                                 inset-inline-end: 0.1em;
  94                                 inset-block-start: 0.1em;
  95                         }
  96                 }
  97         }
  98 }
  99
 100 @mixin collapse-all-items-no-exception {
 101         .topnav-link {
 102                 // Specificity -_-v
 103                 &#{&} {
 104                         padding-inline: rem(5);
 105                 }
 106         }
 107
 108         .topnav-listItem:not(.topnav-listItem--noCollapse) {
 109                 .navigation-title {
 110                         // collapse for ALL without any exception
 111                         // equivalent of .sr-only, but impossible to extend in a breakpoint
 112                         border: 0;
 113                         clip: rect(0 0 0 0);
 114                         block-size: 1px;
 115                         margin: -1px;
 116                         overflow: hidden;
 117                         padding: 0;
 118                         position: absolute;
 119                         inline-size: 1px;
 120                 }
 121         }
 122
 123         .topnav-icon {
 124                 &#{&} {
 125                         // Specificity -_-v
 126                         margin-inline-end: 0;
 127                 }
 128         }
 129
 130         .topnav-link--blackfriday::before {
 131                 inset-inline-start: calc(#{rem(5)} + #{rem(15)});
 132         }
 133 }
 134
 135 @include media('<=xlarge') {
 136         @include collapse-all-four-except-upgrade;
 137 }
 138
 139 // special fix for Hungarian looooooooong text
 140 [lang='hu'] {
 141         @include media('<=#{em(1650, 16)}') {
 142                 @include collapse-all-four-except-upgrade;
 143         }
 144         @include media('<=#{em(1050, 16)}') {
 145                 @include collapse-all-four-no-exception;
 146         }
 147 }
 148
 149 @include media('<=#{em(940, 16)}') {
 150         @include collapse-all-four-no-exception;
 151 }
 152
 153 @include media('<=#{em(800, 16)}') {
 154         @include collapse-all-items-no-exception;
 155 }
 156
 157 @include media('<=small') {
 158         .topnav-icon {
 159                 // Specificity -_-v
 160                 &#{&} {
 161                         inline-size: rem(24);
 162                         block-size: rem(19); // to align with user drop down
 163                         margin-inline-end: 0;
 164                 }
 165         }
 166
 167         .topnav-listItem:not(.topnav-listItem--noCollapse) {
 168                 .navigation-title {
 169                         // collapse for ALL without any exception
 170                         // equivalent of .sr-only, but impossible to extend in a breakpoint
 171                         border: 0;
 172                         clip: rect(0 0 0 0);
 173                         block-size: 1px;
 174                         margin: -1px;
 175                         overflow: hidden;
 176                         padding: 0;
 177                         position: absolute;
 178                         inline-size: 1px;
 179                 }
 180         }
 181
 182         .topnav-list--four-elements .topnav-link {
 183                 padding-inline: rem(10);
 184         }
 185
 186         .topnav-list--four-elements .topnav-link--blackfriday::before,
 187         .topnav-link--blackfriday::before {
 188                 inset-inline-start: calc(#{rem(10)} + #{rem(22)});
 189                 inset-block-start: calc(50% - #{rem(18)});
 190         }
 191
 192         .topnav-link--notification {
 193                 &#{&} {
 194                         .notification-dot {
 195                                 inset-inline-end: 0.15em;
 196                                 inset-block-start: 0.15em;
 197                         }
 198                 }
 199         }
 200 }
 201
 202 @include media('<=xsmall') {
 203         .topnav-list--four-elements .topnav-link,
 204         .topnav-link {
 205                 padding-inline: rem(2);
 206         }
 207
 208         .topnav-list--four-elements .topnav-link--blackfriday::before,
 209         .topnav-link--blackfriday::before {
 210                 inset-inline-start: calc(#{rem(5)} + #{rem(22)});
 211         }
 212 }