_Navigation.scss (3805B)
1 /* stylelint-disable max-nesting-depth */ 2 3 .ds-navigation { 4 color: var(--newtab-contextual-text-primary-color); 5 font-size: var(--font-size-small); 6 font-weight: var(--font-weight-semibold); 7 padding: var(--space-xsmall) 0; 8 9 @media (min-width: $break-point-widest) { 10 line-height: 32px; 11 } 12 13 &.ds-navigation-centered { 14 text-align: center; 15 } 16 17 &.ds-navigation-right-aligned { 18 text-align: end; 19 } 20 21 // Contrast fix for users who have wallpapers set 22 @include wallpaper-contrast-fix; 23 24 ul { 25 display: inline; 26 margin: 0; 27 padding: 0; 28 } 29 30 ul li { 31 display: inline-block; 32 33 &::after { 34 content: 'ยท'; 35 padding: var(--space-xsmall); 36 } 37 38 &:last-child::after { 39 content: none; 40 } 41 42 a { 43 &:hover, 44 &:active { 45 text-decoration: none; 46 } 47 48 &:active { 49 color: var(--newtab-primary-element-active-color); 50 } 51 } 52 } 53 54 .ds-navigation-header { 55 padding-inline-end: var(--space-xsmall); 56 } 57 58 .ds-navigation-privacy { 59 padding-inline-start: var(--space-xsmall); 60 float: inline-end; 61 62 &:hover { 63 text-decoration: none; 64 } 65 } 66 67 &.ds-navigation-new-topics { 68 display: block; 69 padding-block-start: var(--space-xxlarge); 70 71 .ds-navigation-header { 72 font-size: var(--font-size-small); 73 font-weight: var(--heading-font-weight); 74 display: inline-block; 75 margin-block-end: var(--space-small); 76 } 77 78 .ds-navigation-family { 79 text-align: center; 80 font-size: var(--font-size-small); 81 margin: var(--space-large) auto var(--space-xlarge); 82 83 span { 84 margin: 0 var(--space-small); 85 } 86 87 .firefox-logo, 88 .pocket-logo { 89 height: 20px; 90 width: 20px; 91 background-size: cover; 92 } 93 94 .firefox-logo { 95 background-image: url('chrome://newtab/content/data/content/assets/firefox.svg'); 96 } 97 98 .pocket-logo { 99 background-image: url('chrome://global/skin/icons/help.svg'); 100 fill: $pocket-icon-fill; 101 } 102 103 .ds-navigation-family-message { 104 display: block; 105 106 @media (min-width: $break-point-medium) { 107 display: inline; 108 } 109 } 110 111 @media (min-width: $break-point-medium) { 112 // Bug 1967304 - Large number (40px) 113 margin-block-start: calc(var(--space-large) + var(--space-xlarge)); 114 } 115 } 116 117 ul { 118 display: grid; 119 grid-gap: 0 var(--space-xlarge); 120 grid-auto-flow: column; 121 grid-template: repeat(8, 1fr) / repeat(1, 1fr); 122 123 li { 124 border-block-start: 1px solid var(--border-color); 125 line-height: 24px; 126 font-size: var(--font-size-small); 127 font-weight: var(--font-weight-semibold); 128 129 &::after { 130 content: ''; 131 padding: 0; 132 } 133 134 &:nth-last-child(2), 135 &:nth-last-child(3) { 136 display: none; 137 } 138 139 &:nth-last-child(1) { 140 border-block-end: 1px solid var(--border-color); 141 } 142 } 143 144 @media (min-width: $break-point-medium) { 145 grid-template: repeat(3, 1fr) / repeat(2, 1fr); 146 147 li { 148 &:nth-child(3) { 149 border-block-end: 1px solid var(--border-color); 150 } 151 } 152 } 153 154 @media (min-width: $break-point-large) { 155 grid-template: repeat(2, 1fr) / repeat(3, 1fr); 156 157 158 li { 159 &:nth-child(odd) { 160 border-block-end: 0; 161 } 162 163 &:nth-child(even) { 164 border-block-end: 1px solid var(--border-color); 165 } 166 } 167 } 168 169 @media (min-width: $break-point-widest) { 170 grid-template: repeat(2, 1fr) / repeat(4, 1fr); 171 172 li { 173 &:nth-last-child(2), 174 &:nth-last-child(3) { 175 display: block; 176 } 177 } 178 } 179 } 180 } 181 }