Skip to content

Commit

Permalink
Update universal CSS for legacy IE browsers (Fixes #7390)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexgibson committed Jul 31, 2019
1 parent 5d74216 commit 94af7a1
Show file tree
Hide file tree
Showing 14 changed files with 278 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

{% from "macros.html" import fxa_link_fragment with context %}

<div class="mzp-c-navigation">
<div class="mzp-c-navigation top-header-navigation">
<div class="mzp-c-navigation-l-content">
<div class="mzp-c-navigation-container">
<button class="mzp-c-navigation-menu-button" type="button" aria-controls="mzp-c-navigation-items">{{ _('Menu') }}</button>
Expand Down
2 changes: 1 addition & 1 deletion bedrock/base/templates/includes/sub-nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}

{# hidden for screens smaller than 880px wide #}
<nav class="moz-sub-nav {% block sub_nav_class %}{% endblock %}" role="navigation">
<nav class="moz-sub-nav {% block sub_nav_class %}{% endblock %} is-js-dependent" role="navigation">
<div class="nav-horizontal-menu-container">
<div class="nav-horizontal-menu">
<div class="sub-nav-primary-links-container">
Expand Down
2 changes: 1 addition & 1 deletion bedrock/firefox/templates/firefox/accounts-2019.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h1 class="c-accounts-hero-title">{{ _('There is a way to protect your privacy.
</div>

{% if has_signed_in_copy %}
<div class="c-accounts-hero-body c-accounts-hero-body-signed-in">
<div class="c-accounts-hero-body c-accounts-hero-body-signed-in is-js-dependent">
{# L10n: the span here is to display the phrase "Now try Firefox Monitor." in a different color. Line breaks are for visual formatting. #}
<h2 class="c-accounts-hero-title">{{ _('You’re signed <br>in to Firefox. <br><span>Now try Firefox Monitor.</span>') }}</h2>

Expand Down
4 changes: 2 additions & 2 deletions bedrock/mozorg/templates/mozorg/home/home-en.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
{% block content %}
{% block main %}
<main>
<header class="main-page-heading">
<header class="main-page-heading visually-hidden">
{# Main page h1 is hidden from view and exists mainly for SEO purposes #}
<h1>{{ self.page_title() }}</h1>
</header>
Expand Down Expand Up @@ -197,7 +197,7 @@ <h3 class="section-heading">{{ _('What we’re reading:') }}</h3>
{% call call_out_compact(
title=_('The account that protects you rather than profits off you.'),
desc=None,
class='fxaccount-secondary-cta mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
class='fxaccount-secondary-cta mzp-t-product-firefox mzp-t-firefox mzp-t-dark is-js-dependent',
heading_level=2
) %}
<a href="{{ url('firefox.accounts') }}" class="mzp-c-button mzp-t-secondary mzp-t-dark" id="fxa-learn-secondary">{{ _('Learn More') }}</a>
Expand Down
6 changes: 3 additions & 3 deletions bedrock/mozorg/templates/mozorg/home/includes/macros.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h3 class="c-primary-cta-title-sub">{{ sub_title }}</h3>
{%- endmacro %}

{% macro download_banner_sticky(title, sub_title, desc) -%}
<section id="download-firefox-sticky-cta" class="c-sticky-cta download-firefox-sticky-cta mzp-t-firefox">
<section id="download-firefox-sticky-cta" class="c-sticky-cta download-firefox-sticky-cta mzp-t-firefox is-js-dependent">
<div class="mzp-l-content">
<div class="c-sticky-cta-wrapper">
<h2 class="c-sticky-cta-title">{{ title }}</h2>
Expand Down Expand Up @@ -50,7 +50,7 @@ <h2 class="c-secondary-cta-title">{{ title }}</h2>
{%- endmacro %}

{% macro fxa_banner(logo_title, title, sub_title, link_cta) -%}
<section id="fxaccount-primary-cta" class="c-primary-cta fxaccount-primary-cta mzp-t-firefox">
<section id="fxaccount-primary-cta" class="c-primary-cta fxaccount-primary-cta mzp-t-firefox is-js-dependent">
<div class="mzp-l-content">
<div class="c-primary-cta-wrapper">
<h2 class="c-primary-cta-logo">{{ logo_title }}</h2>
Expand All @@ -67,7 +67,7 @@ <h4 class="c-primary-cta-title-sub">{{ sub_title }}</h4>
{%- endmacro %}

{% macro fxa_banner_sticky(title, sub_title, link_cta) -%}
<section id="fxaccount-sticky-cta" class="c-sticky-cta fxaccount-sticky-cta mzp-t-firefox">
<section id="fxaccount-sticky-cta" class="c-sticky-cta fxaccount-sticky-cta mzp-t-firefox is-js-dependent">
<div class="mzp-l-content">
<div class="c-sticky-cta-wrapper">
<h2 class="c-sticky-cta-title">{{ title }}</h2>
Expand Down
53 changes: 48 additions & 5 deletions media/css/pebbles/base/oldIE.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,21 @@
// This style sheet is served exclusively to Internet Explorer 8 and older.
// Old versions get this minimal style while IE9 and up recieve more advanced styling.

@import
'../includes/lib',
'elements',
'../components/buttons',
'../components/buttons-download';
@import '../includes/lib';
@import 'elements';
@import '../components/buttons';
@import '../components/buttons-download';
@import '../../protocol/components/navigation-ie';
@import '../../protocol/components/navigation';
@import '../../../protocol/css/base/elements/sections';

.content {
@include border-box;
margin: 0 auto;
padding: 20px 0;
min-width: $width-phone;
width: $width-desktop-wide;
}

// An arbitrary container for translatable strings to use in scripts
#strings {
Expand Down Expand Up @@ -54,3 +64,36 @@ label {
.hidden {
@include hidden;
}

.is-js-dependent {
display: none;
}

/**
* Pebbles specific overrides for download button in main navigation.
*/
.mzp-c-navigation-download {
.download-button {
.download-link {
background-color: transparent;
background-image: none;
border-radius: 2px;
color: #12bc00;
border: 2px solid #12bc00;
box-shadow: none;
line-height: 1.125;
padding: $spacing-sm $spacing-md;

&:hover,
&:focus {
background-color: #12bc00;
border-color: #12bc00;
color: $color-white;
}
}

.fx-privacy-link {
display: none;
}
}
}
154 changes: 154 additions & 0 deletions media/css/protocol/components/_navigation-ie.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
// 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 http://mozilla.org/MPL/2.0/.

$font-path: '/media/fonts';
$image-path: '/media/protocol/img';

@import '../../../protocol/css/includes/lib';

/* -------------------------------------------------------------------------- */
// Navigation styles

.top-header-navigation {
background: $color-white;
color: $color-black;
margin-bottom: $layout-lg;

.mzp-c-navigation-l-content {
padding: $layout-xs;
}

.mzp-c-navigation-container {
@include clearfix;
margin: 0 auto;
max-width: $content-max;
position: relative;
}

// Mozilla Logo
.mzp-c-navigation-logo {
left: 0;
position: absolute;
top: 0;
width: 112px;

a {
@include image-replaced;
background-image: url('/media/img/nav/logo-black.png');
background-repeat: no-repeat;
display: block;
height: 32px;
margin: 0 auto;
width: 112px;
}
}

// Download button
.mzp-c-navigation-download {
display: inline-block;
*display: inline;
margin: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
zoom: 1;

.mzp-c-button-download-container {
display: inline-block;
*display: inline;
margin-bottom: 0;
zoom: 1;

// hide privacy link
.mzp-c-button-download-privacy-link {
display: none;
}
}

// hide FxA button
.c-navigation-fxa-cta-container {
display: none;
}
}

// Nav buttom
.mzp-c-navigation-menu-button {
@include image-replaced;
background-color: transparent;
background-image: url('/media/img/nav/menu.png');
background-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
border-radius: 4px;
border: none;
display: none;
height: 32px;
left: 120px;
padding: 1px 2px;
position: absolute;
top: 0;
width: 28px;

&:hover,
&:active,
&:focus,
&.mzp-is-active {
background-color: $color-gray-20;
}
}

.mzp-c-navigation-items {
margin-top: $layout-xs;
}

// hide panel close buttons
.mzp-c-menu-button-close {
display: none;
}

.mzp-c-menu-title {
display: inline-block;
*display: inline;
font-weight: bold;
margin-bottom: $spacing-xl;
zoom: 1;
}

.mzp-c-menu-category {
margin-bottom: $spacing-2xl;
}

// hide cards
.mzp-c-menu-panel-card {
display: none;
}

.mzp-c-navigation-menu {
display: none;
position: relative;
top: $layout-lg;

ul {
list-style-type: none;
margin: 0 0 $spacing-lg;
padding: 0;

li {
margin: 0;
padding: 0;
}
}

.mzp-c-menu-panel {
padding-left: $spacing-xl;
}
}
}

.js .top-header-navigation {
.mzp-c-navigation-menu-button {
display: block;
}
}
30 changes: 14 additions & 16 deletions media/css/protocol/oldIE.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,15 @@
// This style sheet is served exclusively to Internet Explorer 8 and older.
// Old versions get this minimal style while IE9 and up recieve more advanced styling.

$font-path: '/media/fonts';
$image-path: '/media/protocol/img';

@import '../../protocol/css/includes/lib';
@import '../../protocol/css/base/elements';
@import '../../protocol/css/components/button';

@import 'components/navigation-ie';
@import 'components/navigation';
@import 'components/download-button';

// An arbitrary container for translatable strings to use in scripts
Expand All @@ -32,21 +37,6 @@ label {
display: block;
}

.masthead .toggle {
display: none; /* oldIE never gets a mobile menu. */
}

/* oldIE never gets slide out drawer */
.moz-global-nav {
.nav-button-menu {
display: none;
}
}

.moz-global-nav-drawer {
display: none;
}

.visually-hidden {
@include visually-hidden;
}
Expand All @@ -55,8 +45,16 @@ label {
@include hidden;
}

// Make sure form details are visible
.is-js-dependent {
display: none;
}

/* Make sure form details are visible */
/* stylelint-disable declaration-no-important */
.js .mzp-c-newsletter-details {
display: block !important;
}

.mzp-c-newsletter-thanks {
display: none;
}
39 changes: 39 additions & 0 deletions media/css/sandstone/old-ie.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// 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 http://mozilla.org/MPL/2.0/.

$font-path: '/media/fonts';
$image-path: '/media/protocol/img';

@import '../protocol/components/navigation-ie';
@import '../protocol/components/navigation';
@import '../../protocol/css/base/elements/sections';

/**
* Sandstone specific overrides for download button in main navigation.
*/
.mzp-c-navigation-download {
.download-button {
.download-link {
background-color: transparent;
background-image: none;
border-radius: 2px;
color: #12bc00;
border: 2px solid #12bc00;
box-shadow: none;
line-height: 1.125;
padding: $spacing-sm $spacing-md;

&:hover,
&:focus {
background-color: #12bc00;
border-color: #12bc00;
color: $color-white;
}
}

.fx-privacy-link {
display: none;
}
}
}
Binary file added media/img/nav/logo-black.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/nav/menu.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 94af7a1

Please sign in to comment.