media/css/firefox/landing/index.scss (353 lines of code) (raw):

// This Source Code Form is subject to the terms of the Mozilla Public // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. @use 'sass:math'; @use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img'); @use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark'; @use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox'; @use '~@mozilla-protocol/core/protocol/css/components/section-heading'; @use '~@mozilla-protocol/core/protocol/css/templates/multi-column'; @use '../../protocol/components/sub-navigation'; main { background-color: $color-white; // for IE6 color: $color-dark-gray-30; h2, h3, h4 { color: $color-marketing-gray-99; margin-bottom: $spacing-md; } } // Override Protocol wordmark .mzp-c-wordmark.mzp-t-wordmark-md.mzp-t-product-firefox { background-image: url('/media/img/firefox/landing/logo-word-hor.svg'); margin-bottom: $spacing-lg; } // button container .mzp-c-button-download-container { .main-download & { // target main to avoid conflicting with nav margin-bottom: 0; } .t-intro & { @include bidi(((text-align, left, right),)); } .t-features &, .t-extensions & { display: block; } } // -------------------------------------------------------------------------- // conditional content classes .show-android, .show-ios { display: none !important; /* stylelint-disable-line declaration-no-important */ } .ios .show-ios { display: block !important; /* stylelint-disable-line declaration-no-important */ } .android .show-android { display: block !important; /* stylelint-disable-line declaration-no-important */ } .ios, .android { #download-features { display: none; } } .show-else { .android &, .ios & { display: none !important; /* stylelint-disable-line declaration-no-important */ } } // -------------------------------------------------------------------------- // section titles .mzp-c-section-heading { @include text-title-md; } // -------------------------------------------------------------------------- // Blocks // used for hero, and mobile .c-block { margin: 0 auto; overflow-x: hidden; padding: $layout-md 0; position: relative; @media #{$mq-md} { padding: $layout-xl 0; } } .c-block-container { @include clearfix; @include border-box; margin: 0 auto; max-width: $content-xl + $layout-xl * 2; min-width: $content-xs; padding: 0 $layout-sm; .c-block-media-img { margin: 0 auto; } @media #{$mq-md} { padding: 0 $layout-lg; } // vertical alignment only browsers with grid support @supports (display:grid) { .l-v-center { align-self: center; } } } .c-block-media { display: none; @media #{$mq-md} { display: block; } } // -------------------------------------- // side by side layout, float based fall back @media #{$mq-md} { .c-block-body { @include border-box; @include bidi(((float, left, right),)); width: 50%; padding: 0 ($layout-lg * 0.5); > *:first-child { margin-top: 0; } > *:last-child { margin-bottom: 0; } } .c-block-media { @include border-box; @include bidi(((float, right, left),)); width: 50%; padding: 0 ($layout-lg * 0.5); } } // -------------------------------------- // side by side layout, grid based @media #{$mq-md} { @supports (display:grid) { .c-block-container { // grid is all start/end based we don't need bidi declarations for RTL support \o/ display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'body media'; grid-column-gap: $layout-lg; } .c-block-body, .c-block-media { .c-block-container & { // extra specificity to over-ride the styles that make the float fall-back work float: none; min-width: 0; // because of https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items padding: 0; width: auto; } } .c-block-body { grid-area: body; } .c-block-media { align-self: stretch; grid-area: media; .c-block-media-img { display: block; max-width: none; } } } } // -------------------------------------------------------------------------- // intro banner .t-intro { h2 { @include text-display-lg; } &.c-block { @include text-body-md; padding-top: $layout-sm; @media #{$mq-lg} { @include text-body-lg; padding-top: $layout-lg; } } .c-block-container { max-width: $content-xl + $layout-xl * 2; } .c-block-body > p { margin-bottom: $spacing-xl; } // issue 13317 .fx-unsupported-message { @include bidi(((text-align, left, right),)); } } .c-intro-download-alt { @include text-body-xs; color: $color-dark-gray-30; display: block; margin-top: $spacing-md; a:link, a:visited { color: inherit; text-decoration: none; } a:hover, a:active, a:focus { text-decoration: underline; } } // -------------------------------------------------------------------------- .t-custom { .t-custom-intro { padding-bottom: 0; } .t-custom-list { padding-top: $spacing-2xl; p { word-break: keep-all; // prevent hyphens breaking onto new line } } .c-screen { @include border-box; margin-bottom: $layout-sm; padding: $spacing-xl $spacing-lg; text-align: center; @media #{$mq-md} { padding: $spacing-2xl $spacing-xl; } &.t-gaming { background-color: #d9bfff; } &.t-education { background-color: #ffa266; } } } // -------------------------------------------------------------------------- .t-extensions { .t-extensions-item { margin-bottom: $spacing-xl; p { word-break: keep-all; // prevent hyphens breaking onto new line } } .mzp-t-columns-three { margin-bottom: $spacing-2xl; } img { display: block; margin: 0 0 $spacing-lg; text-align: left; } } // -------------------------------------------------------------------------- .t-features { background-color: $color-light-gray-10; .t-features-item { margin-bottom: $spacing-xl; p { word-break: keep-all; // prevent hyphens breaking onto new line } } .mzp-t-columns-three { margin-bottom: $spacing-2xl; } img { margin-bottom: $spacing-lg; } .mzp-u-list-styled { @include bidi(((margin-left, $spacing-md, margin-right, 0),)); margin-bottom: 0; } } // -------------------------------------------------------------------------- .c-support { @include text-title-xs; background-color: $color-light-gray-10; display: block; // IE8 font-weight: bold; padding: $spacing-lg; text-align: center; } // -------------------------------------------------------------------------- // mobile .android main, .ios main { @include flexbox; flex-direction: column; } #mobile-banner { order: -1; } .c-mobile.mzp-t-dark { @include light-links; background-color: $color-violet-70; color: $color-white; position: relative; overflow-x: hidden; h2 { color: $color-white; } p { margin-bottom: $layout-md; } @media #{$mq-sm} { &::after { @include bidi(( (left, 60%, right, auto), (margin-left, $layout-xs * 0.5, margin-left, 0), )); background-position: top center; background-repeat: no-repeat; border-radius: $border-radius-sm; bottom: $layout-lg; content: ''; display: block; position: absolute; top: $layout-lg; width: 40%; &, .android & { @include at2x('/media/img/firefox/new/desktop/android.png', contain); } .ios & { @include at2x('/media/img/firefox/new/desktop/ios.png', contain); } } .c-mobile-text { @include bidi(((padding-right, $layout-xs * 0.5, padding-left, 0),)); @include border-box; max-width: 60%; } } @media #{$mq-md} { &::after { @include bidi(( (left, 50%, right, auto), (margin-left, $layout-lg * 0.5, margin-right, 0), )); } .c-mobile-text { @include bidi(((padding-right, $layout-lg * 0.5, padding-left, 0),)); max-width: 50%; } } @media #{$mq-lg} { &::after { @include bidi(((margin-left, $layout-lg * 0.5, margin-right, 0),)); } .c-mobile-text { @include bidi(((padding-right, $layout-lg * 0.5, padding-left, 0),)); } } } .c-desktop a { @include text-title-xs; background-image: url('/media/img/firefox/new/desktop/mobile-arrow.svg'); background-position: bottom center; background-repeat: no-repeat; color: $color-purple-50; display: block; font-weight: bold; padding: $spacing-md $layout-xs #{$spacing-lg + 64px}; text-align: center; text-decoration: none; } // -------------------------------------------------------------------------- // scroll animation @supports (animation-fill-mode: forwards) { .has-animate { opacity: 0; transform-origin: bottom center; } .is-animated { animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-name: zoom; } @keyframes zoom { from { opacity: 0; transform: scaleX(0.8) scaleY(0.8); } to { opacity: 1; transform: scaleX(1) scaleY(1); } } }