зеркало из https://github.com/mozilla/bedrock.git
Update bedrock to @mozilla-protocol/core v3.1.0 (Fixes #6453)
This commit is contained in:
Alex Gibson
Stephanie Hobson
Родитель
aede772ee2
Коммит
480f860095
|
|
@ -46,6 +46,7 @@ module.exports = {
|
|||
},
|
||||
"globals": {
|
||||
"Mozilla": true,
|
||||
"Mzp": true,
|
||||
"site": true
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{% if translations|length > 1 %}
|
||||
<form id="lang_form" class="mzp-c-language-switcher" method="get" action="#">
|
||||
<label for="mzp-c-language-switcher-select">{{ _('Language') }}</label>
|
||||
<select id="mzp-c-language-switcher-select" class="mzp-c-language-switcher-select" name="lang" dir="ltr">
|
||||
<select id="mzp-c-language-switcher-select" class="mzp-js-language-switcher-select" name="lang" dir="ltr">
|
||||
{% for code, label in translations|dictsort -%}
|
||||
{# Don't escape the label as it may include entity references
|
||||
# like "Português (do Brasil)" (Bug 861149) #}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="mzp-c-navigation-logo"><a href="{{ url('mozorg.home') }}" data-link-name="mozilla home icon" data-link-type="nav">Mozilla</a></div>
|
||||
<div class="mzp-c-navigation-items" id="mzp-c-navigation-items">
|
||||
<div class="mzp-c-navigation-download">
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), dom_id='protocol-nav-download-firefox', button_color='mzp-c-button mzp-t-download-secondary', download_location='nav') }}
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), dom_id='protocol-nav-download-firefox', button_color='mzp-t-secondary mzp-t-small', download_location='nav') }}
|
||||
</div>
|
||||
<div class="mzp-c-navigation-menu">
|
||||
<nav class="mzp-c-menu">
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<div class="mzp-c-call-out-desc">
|
||||
<p>Facebook lets political advertisers target you by tracking your activity on and off their platform.</p>
|
||||
<p>With this extension, Firefox makes it easier to explore the web without Facebook watching, so you can keep your political opinions to yourself and your dinner companions.</p>
|
||||
<p class="mzp-c-button-download">
|
||||
<p class="c-button-download">
|
||||
<small class="mzp-c-button-download-privacy-link">
|
||||
<a href="{{ url('privacy.notices.firefox') }}">Firefox Privacy Notice</a>
|
||||
</small>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
</div>
|
||||
<div class="mzp-c-call-out-cta">
|
||||
<div class="mzp-c-call-out-cta-container">
|
||||
<div class="mzp-c-button-download">
|
||||
<div class="c-button-download">
|
||||
<div id="case-unsupported" class="hidden">
|
||||
<p>Sad to say, your computer doesn’t support Firefox. Even so, Digital citizens need good info. Mozilla Corporation and Firefox can help you check your registration status, read political news curated by Pocket and get other helpful resources.</p>
|
||||
<!-- hard code en-US because election content will not be localized -->
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
</div>
|
||||
<div id="case-outofdate" class="hidden">
|
||||
<p>Your version of Firefox isn’t compatible with the U.S. Election Bundle. Once you’ve updated, please return to this page for the extensions.</p>
|
||||
{{ download_firefox(alt_copy='Update Firefox', dom_id='btn-download-oldfx', button_color='mzp-c-button mzp-t-download') }}
|
||||
{{ download_firefox(alt_copy='Update Firefox', dom_id='btn-download-oldfx') }}
|
||||
</div>
|
||||
<div id="case-mobile" class="hidden">
|
||||
<p>The U.S. Election Bundle is made just for Firefox on desktop. Visit this page on your computer to download it or add the extensions.</p>
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
<div class="mzp-c-call-out-desc">
|
||||
<p>Facebook helps political advertisers target you by tracking your activity on and off their platform.</p>
|
||||
<p>This extension makes it easier to explore the web without Facebook watching, so you can keep your political opinions to yourself and your dinner companions. </p>
|
||||
<p class="mzp-c-button-download">
|
||||
<p class="c-button-download">
|
||||
<a class="mzp-c-button" rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-container/" data-button-name="Facebook Container Get It">Get It</a><br>
|
||||
<small class="mzp-c-button-download-privacy-link">
|
||||
<a href="{{ url('privacy.notices.firefox') }}">Firefox Privacy Notice</a>
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
<div class="mzp-c-call-out-desc">
|
||||
<p>Participate in ProPublica’s crowdsourcing extension that automatically gathers ads from Facebook, the biggest online platform for political discourse. Your contribution feeds a public database that lets you see what others are seeing and helps journalists flag misinformation. It’s a win-win for you and the web.</p>
|
||||
<p>Since the Political Ad Collector was developed by ProPublica, not Firefox, the <a rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-ad-collector/privacy/">ProPublica privacy policy</a> applies to this extension.</p>
|
||||
<p class="mzp-c-button-download">
|
||||
<p class="c-button-download">
|
||||
<a class="mzp-c-button" rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-ad-collector/" data-button-name="ProPublica Collector Get It">Get It</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
<div class="mzp-c-call-out-desc">
|
||||
<p>Facebook lets political advertisers target you by tracking your activity on and off their platform.</p>
|
||||
<p>With this extension, Firefox makes it easier to explore the web without Facebook watching, so you can keep your political opinions to yourself and your dinner companions.</p>
|
||||
<p class="mzp-c-button-download">
|
||||
<p class="c-button-download">
|
||||
<small class="mzp-c-button-download-privacy-link">
|
||||
<a href="{{ url('privacy.notices.firefox') }}">Firefox Privacy Notice</a>
|
||||
</small>
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
<div class="mzp-l-content">
|
||||
<div class="mzp-c-call-out-cta">
|
||||
<div class="mzp-c-call-out-cta-container">
|
||||
<div class="mzp-c-button-download">
|
||||
<div class="c-button-download">
|
||||
<div>
|
||||
<p>Sad to say, your computer doesn’t support Firefox. Even so, Digital citizens need good info. Mozilla Corporation and Firefox can help you check your registration status, read political news curated by Pocket and get other helpful resources.</p>
|
||||
<!-- hard code en-US because election content will not be localized -->
|
||||
|
|
@ -219,15 +219,15 @@
|
|||
</div>
|
||||
<div id="case-outofdate" class="hidden mzp-c-call-out-cta">
|
||||
<div class="mzp-c-call-out-cta-container">
|
||||
<div class="mzp-c-button-download">
|
||||
<div class="c-button-download">
|
||||
<p>Your version of Firefox isn’t compatible with these extensions. Once you’ve updated, please return to this page for the extensions.</p>
|
||||
{{ download_firefox(alt_copy='Update Firefox', dom_id='btn-download-oldfx', button_color='mzp-c-button mzp-t-download') }}
|
||||
{{ download_firefox(alt_copy='Update Firefox', dom_id='btn-download-oldfx') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="case-mobile" class="hidden mzp-c-call-out-cta">
|
||||
<div class="mzp-c-call-out-cta-container">
|
||||
<div class="mzp-c-button-download">
|
||||
<div class="c-button-download">
|
||||
<p>These extensions are made for Firefox on desktop. Visit this page on your computer to download Firefox or add the extensions.</p>
|
||||
<p>Digital citizens need good info. Mozilla Corporation and Firefox can help you check your registration status, read political news curated by Pocket and get other helpful resources.</p>
|
||||
<!-- hard code en-US because election content will not be localized -->
|
||||
|
|
@ -237,9 +237,9 @@
|
|||
</div>
|
||||
<div id="case-download" class="mzp-c-call-out-cta">
|
||||
<div class="mzp-c-call-out-cta-container">
|
||||
<div class="mzp-c-button-download">
|
||||
<div class="c-button-download">
|
||||
<p>Get Firefox and return to this page to add the extensions.</p>
|
||||
<p>{{ download_firefox(alt_copy='Get Firefox', dom_id='btn-download-primary', button_color='mzp-c-button mzp-t-download') }}</p>
|
||||
<p>{{ download_firefox(alt_copy='Get Firefox', dom_id='btn-download-primary') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -251,8 +251,8 @@
|
|||
<div class="mzp-c-call-out-cta">
|
||||
<div class="mzp-c-call-out-cta-container">
|
||||
<p>Once you have Firefox return to this page to install the extensions.</p>
|
||||
<p><a class="mzp-c-button t-dim" rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-container/" data-button-name="Facebook Container Get It">Firefox Facebook Container Extension</a></p>
|
||||
<p><a class="mzp-c-button t-dim" rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-ad-collector/" data-button-name="ProPublica Collector Get It">ProPublica Facebook Political Ad Collector Extension</a></p>
|
||||
<p><a class="mzp-c-button mzp-t-secondary" rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-container/" data-button-name="Facebook Container Get It">Firefox Facebook Container Extension</a></p>
|
||||
<p><a class="mzp-c-button mzp-t-secondary" rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-ad-collector/" data-button-name="ProPublica Collector Get It">ProPublica Facebook Political Ad Collector Extension</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
<div class="mzp-c-call-out-desc">
|
||||
<p>Facebook helps political advertisers target you by tracking your activity on and off their platform.</p>
|
||||
<p>This extension makes it easier to explore the web without Facebook watching, so you can keep your political opinions to yourself and your dinner companions. </p>
|
||||
<p class="mzp-c-button-download">
|
||||
<p class="c-button-download">
|
||||
<a class="mzp-c-button" rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-container/" data-button-name="Facebook Container Get It">Get It</a><br>
|
||||
<small class="mzp-c-button-download-privacy-link">
|
||||
<a href="{{ url('privacy.notices.firefox') }}">Firefox Privacy Notice</a>
|
||||
|
|
@ -292,7 +292,7 @@
|
|||
<div class="mzp-c-call-out-desc">
|
||||
<p>Participate in ProPublica’s crowdsourcing extension that automatically gathers ads from Facebook, the biggest online platform for political discourse. Your contribution feeds a public database that lets you see what others are seeing and helps journalists flag misinformation. It’s a win-win for you and the web.</p>
|
||||
<p>Since the Political Ad Collector was developed by ProPublica, not Firefox, the <a rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-ad-collector/privacy/">ProPublica privacy policy</a> applies to this extension.</p>
|
||||
<p class="mzp-c-button-download">
|
||||
<p class="c-button-download">
|
||||
<a class="mzp-c-button" rel="external" href="https://addons.mozilla.org/en-US/firefox/addon/facebook-ad-collector/" data-button-name="ProPublica Collector Get It">Get It</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="mzp-c-call-out-desc">
|
||||
<p>Open a new tab in Firefox, go to your Facebook page and enjoy as usual. The difference is that your session is contained. When you click to another site, it’s now harder for Facebook to follow you and collect your data. And without that data, Facebook has less information about you to offer ad makers, political and otherwise.</p>
|
||||
</div>
|
||||
<p class="mzp-c-button-download">
|
||||
<p class="c-button-download">
|
||||
<a class="mzp-c-button" rel="external" href="https://blog.mozilla.org/firefox/facebook-container-extension/" data-button-name="Facebook Container Learn More">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
<div class="mzp-c-call-out-desc">
|
||||
<p>Log into Facebook and the ProPublica extension automatically collects the ads targeting your newsfeed. Click on the ProPublica icon in the Firefox toolbar to view those ads and compare them with ads other Facebook users are seeing. Want to learn more? <a href="https://projects.propublica.org/facebook-ads/" rel="external" data-link-type="link" data-link-name="This database sorts political ads based on who they were targeting">This database sorts political ads based on who they were targeting</a>.</p>
|
||||
</div>
|
||||
<p class="mzp-c-button-download">
|
||||
<p class="c-button-download">
|
||||
<a class="mzp-c-button" rel="external" href="https://projects.propublica.org/political-ad-collector/" data-button-name="ProPublica Collector Learn More">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<ul>
|
||||
{% for plat in builds -%}
|
||||
<li><a href="{{ plat.download_link_direct or plat.download_link }}"
|
||||
class="download-link button button-green"
|
||||
class="download-link button button-green mzp-c-button mzp-t-download"
|
||||
data-link-type="download"
|
||||
data-download-version="{{ plat.os }}"
|
||||
{% if plat.os == 'android' %}data-download-os="Android"
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
{% set download_class = download_class ~ ' download-button-desktop' if not (show_android or show_ios) else download_class %}
|
||||
{% set download_class = download_class ~ ' download-button-ios' if not (show_desktop or show_android) else download_class %}
|
||||
|
||||
<div id="{{ id }}" class="{{ download_class }}">
|
||||
<div id="{{ id }}" class="{{ download_class }} mzp-c-button-download-container">
|
||||
{# no JS #}
|
||||
<div class="nojs-download">
|
||||
{{ alt_buttons(builds) }}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<ul class="download-list">
|
||||
{% for plat in builds %}
|
||||
<li class="os_{{ plat.os }}{% if plat.arch %} {{ plat.arch }}{% endif %}">
|
||||
<a class="download-link button {{ button_color }}"
|
||||
<a class="download-link button {{ button_color }} mzp-c-button mzp-t-download"
|
||||
href="{{ plat.download_link }}"{% if plat.download_link_direct %}
|
||||
data-direct-link="{{ plat.download_link_direct }}"{% endif %}
|
||||
data-link-type="download"
|
||||
|
|
@ -104,8 +104,8 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<small class="fx-privacy-link">
|
||||
{% if LANG.startswith('en-') %}
|
||||
<small class="fx-privacy-link mzp-c-button-download-privacy-link">
|
||||
{% if LANG.startswith('en-') %}
|
||||
{% set privacy_text = _('Firefox Privacy Notice') %}
|
||||
{% else %}
|
||||
{% set privacy_text = _('Firefox Privacy') %}
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
<p>{% block hero_desc %}{% endblock %}</p>
|
||||
</div>
|
||||
|
||||
<div class="mzp-c-hero-cta mzp-c-button-download">
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='primary cta', button_color='mzp-c-button mzp-t-download') }}
|
||||
<div class="mzp-c-hero-cta">
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='primary cta') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
title=_('Take control of your browser.'),
|
||||
class='secondary-cta mzp-t-product-firefox mzp-t-firefox'
|
||||
) %}
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='secondary cta', button_color='mzp-c-button mzp-t-download') }}
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='secondary cta') }}
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
<p>{% block hero_desc %}{% endblock %}</p>
|
||||
</div>
|
||||
|
||||
<div class="mzp-c-hero-cta mzp-c-button-download">
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='primary cta', button_color='mzp-c-button mzp-t-download') }}
|
||||
<div class="mzp-c-hero-cta">
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='primary cta') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
title=_('Take control of your browser.'),
|
||||
class='secondary-cta mzp-t-product-firefox mzp-t-firefox'
|
||||
) %}
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='secondary cta', button_color='mzp-c-button mzp-t-download') }}
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='secondary cta') }}
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
|
||||
<div class="mzp-c-hero-cta">
|
||||
<p><a href="https://getpocket.com/firefox_learnmore" class="mzp-c-button mzp-c-button-primary" rel="external">{{ _('Learn More') }}</a></p>
|
||||
<p><a href="https://getpocket.com/firefox_learnmore" class="mzp-c-button mzp-t-dark" rel="external">{{ _('Learn More') }}</a></p>
|
||||
<p class="note">{{ _('Already have an account?') }} <a href="https://getpocket.com/login" rel="external">{{ _('Log in') }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
</h2>
|
||||
|
||||
<div class="mzp-c-hero-cta">
|
||||
<p><a href="https://getpocket.com/firefox_learnmore" class="mzp-c-button mzp-c-button-primary" rel="external">{{ _('Try Pocket Now') }}</a></p>
|
||||
<p><a href="https://getpocket.com/firefox_learnmore" class="mzp-c-button mzp-t-dark" rel="external">{{ _('Try Pocket Now') }}</a></p>
|
||||
<p class="note">{{ _('Already have an account?') }} <a href="https://getpocket.com/login" rel="external">{{ _('Log in') }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
<div class="mzp-c-hero-body">
|
||||
<h1 class="mzp-c-hero-title">{{ _('Fast. Private. Fearless. <br>Firefox fights for you.') }}</h1>
|
||||
|
||||
<div class="mzp-c-hero-cta mzp-c-button-download">
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='primary cta', button_color='mzp-c-button mzp-t-download') }}
|
||||
<div class="mzp-c-hero-cta">
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='primary cta') }}
|
||||
</div>
|
||||
|
||||
<div class="mzp-c-hero-desc">
|
||||
|
|
@ -63,9 +63,7 @@
|
|||
title=_('Take control of your browser.'),
|
||||
class='secondary-cta mzp-t-product-firefox mzp-t-firefox'
|
||||
) %}
|
||||
<div class="mzp-c-button-download">
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='secondary cta', button_color='mzp-c-button mzp-t-download') }}
|
||||
</div>
|
||||
{{ download_firefox(alt_copy=_('Download Firefox'), download_location='secondary cta') }}
|
||||
{% endcall %}
|
||||
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -138,9 +138,7 @@
|
|||
title=_('If you’re using Firefox, you already have Pocket.'),
|
||||
class='secondary-cta mzp-t-firefox mzp-t-dark'
|
||||
) %}
|
||||
<div class="mzp-c-button-download">
|
||||
<a class="mzp-c-button" href="https://getpocket.com/firefox_whatsnew">{{ _('Launch Now') }}</a>
|
||||
</div>
|
||||
<a class="mzp-c-button mzp-t-dark" href="https://getpocket.com/firefox_whatsnew">{{ _('Launch Now') }}</a>
|
||||
{% endcall %}
|
||||
</article>{#-- /#pocket-container --#}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
|
||||
<p class="mzp-c-hero-cta">
|
||||
<a class="mzp-c-button mzp-c-button-primary" href="{{ url('mozorg.mission') }}">{{ _('Read Our Mission') }}</a>
|
||||
<a class="mzp-c-button" href="{{ url('mozorg.mission') }}">{{ _('Read Our Mission') }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
<h2 class="primary-title">{{ _('<strong>Firefox</strong> fights for you.') }}</h2>
|
||||
<h3 class="primary-title-sub">{{ _('Fast. Private. Fearless.') }}</h3>
|
||||
<p class="primary-desc-sub">{{ _('Firefox fights for you.') }}</p>
|
||||
{{ download_firefox(dom_id='download-sticky', download_location='sticky cta', button_color='button-small') }}
|
||||
{{ download_firefox(dom_id='download-sticky', download_location='sticky cta', button_color='mzp-t-small') }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -536,7 +536,7 @@ html.moz-nav-open .moz-global-nav-page-mask {
|
|||
.download-link:visited {
|
||||
.font-size(14px);
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border: 2px solid @buttonGreen;
|
||||
color: @buttonGreen;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
.download-link.button-arrow {
|
||||
@include font-size-level5;
|
||||
background: $color-dev-mediumblue linear-gradient(120deg, $color-dev-lightblue 0, $color-dev-mediumblue 100%) no-repeat;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 1em 40px;
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
a.button.button-hollow {
|
||||
@include font-size-level5;
|
||||
border-color: #fff;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
margin-top: 20px;
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
color: $base-blue;
|
||||
border-color: $base-blue;
|
||||
@include font-size-level5;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
margin-top: 20px;
|
||||
|
||||
@media #{$mq-phone-wide} {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
@include font-size-level5;
|
||||
margin: 20px 0 5px;
|
||||
width: auto;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
a.button.button-hollow {
|
||||
color: $color-dev-mediumblue;
|
||||
border-color: $color-dev-mediumblue;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ body {
|
|||
color: $base-blue;
|
||||
border-color: $base-blue;
|
||||
@include font-size-level5;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
margin-top: 20px;
|
||||
|
||||
@media #{$mq-phone-wide} {
|
||||
|
|
|
|||
|
|
@ -6,11 +6,9 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import "../../protocol/css/includes/lib";
|
||||
@import "../../protocol/css/components/button";
|
||||
@import "../../protocol/css/components/call-out";
|
||||
@import "../../protocol/css/components/hero";
|
||||
@import "../../protocol/css/components/download-button";
|
||||
@import '../hubs/nav-download-button-remove';
|
||||
@import '../protocol/includes/navigation-hide-download-button';
|
||||
|
||||
|
||||
// paper background
|
||||
|
|
@ -74,16 +72,12 @@ $image-path: '/media/protocol/img';
|
|||
|
||||
// facebook and propublica call out styling
|
||||
.mzp-c-call-out,
|
||||
.mzp-c-button-download {
|
||||
.c-button-download {
|
||||
text-align: left;
|
||||
|
||||
@media #{$mq-lg} {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mzp-c-button {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.t-container,
|
||||
|
|
@ -115,52 +109,6 @@ $image-path: '/media/protocol/img';
|
|||
}
|
||||
}
|
||||
|
||||
// button
|
||||
.mzp-c-button,
|
||||
.download-link.mzp-c-button.mzp-t-download {
|
||||
background-color: #000;
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-white;
|
||||
line-height: 1.125;
|
||||
padding: ($padding-md + 2px) ($padding-lg + 2px); //2px extra padding to compensate for no border.
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-blue-70;
|
||||
background-image: none;
|
||||
box-shadow: 4px 4px 0 0 $color-black;
|
||||
color: $color-white;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 0 0 $color-black;
|
||||
transition: box-shadow 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
.download-link.mzp-c-button.mzp-t-download {
|
||||
background-color: $color-blue-60;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-blue-70;
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-button.t-dim {
|
||||
background-color: $color-gray-50;
|
||||
border-color: $color-gray-50;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-gray-70;
|
||||
}
|
||||
}
|
||||
|
||||
.c-pro-disclaimer {
|
||||
background-color: $color-gray-30;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
@import '../pebbles/includes/lib';
|
||||
@import '../hubs/sections';
|
||||
@import '../hubs/masthead';
|
||||
@import '../hubs/nav-download-button-remove';
|
||||
|
||||
$enterprise-grid-spacing: 60px;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@ $image-path: '/media/protocol/img';
|
|||
|
||||
@import "../../../protocol/css/includes/lib";
|
||||
@import "../../../protocol/css/components/billboard";
|
||||
@import "../../../protocol/css/components/button";
|
||||
@import "../../../protocol/css/components/download-button";
|
||||
@import "../../../protocol/css/components/card";
|
||||
@import "../../../protocol/css/components/feature-card";
|
||||
@import "../../../protocol/css/components/hero";
|
||||
|
|
@ -93,36 +91,6 @@ section.mzp-c-hero {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Blue download button
|
||||
|
||||
.download-firefox {
|
||||
a.download-link.button {
|
||||
background-color: $color-blue-60;
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-white;
|
||||
line-height: 1.125;
|
||||
padding: ($padding-md + 2px) ($padding-lg + 2px); //2px extra padding to compensate for no border.
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-blue-70;
|
||||
background-image: none;
|
||||
box-shadow: 4px 4px 0 0 $color-black;
|
||||
color: $color-white;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 0 0 $color-black;
|
||||
transition: box-shadow 0ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
.mzp-c-call-out.tracking {
|
||||
|
|
|
|||
|
|
@ -1038,7 +1038,7 @@ body[data-modal-product='focus'] #modal .window .inner {
|
|||
}
|
||||
|
||||
#id-input {
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
height: auto;
|
||||
padding: 0.75em 20px;
|
||||
max-width: 400px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
@import '../../../protocol/css/components/button';
|
||||
@import '../../../protocol/css/components/call-out';
|
||||
@import '../../../protocol/css/components/hero';
|
||||
@import '../../../protocol/css/components/feature-card';
|
||||
|
|
@ -383,36 +382,6 @@ $image-path: '/media/protocol/img';
|
|||
}
|
||||
}
|
||||
|
||||
//* ====================================================================== */
|
||||
// Buttons
|
||||
.compare {
|
||||
.mzp-c-button.mzp-t-download {
|
||||
background-color: $color-blue-60;
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-white;
|
||||
line-height: 1.125;
|
||||
padding: ($padding-md + 2px) ($padding-lg + 2px); //2px extra padding to compensate for no border.
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-blue-70;
|
||||
background-image: none;
|
||||
box-shadow: 4px 4px 0 0 $color-black;
|
||||
color: $color-white;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 0 0 $color-black;
|
||||
transition: box-shadow 0ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//* ====================================================================== */
|
||||
// Tables
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
@import '../../../protocol/css/components/button';
|
||||
@import '../../../protocol/css/components/modal';
|
||||
@import '../../../protocol/css/components/newsletter-form';
|
||||
|
||||
|
|
@ -156,19 +155,6 @@ $image-path: '/media/protocol/img';
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.mzp-c-button {
|
||||
background: $color-black;
|
||||
border-color: $color-black;
|
||||
color: $color-white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-white;
|
||||
color: $color-black;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-newsletter-thanks {
|
||||
padding: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../protocol/css/includes/lib';
|
||||
@import '../../protocol/css/components/button';
|
||||
@import '../../protocol/css/components/billboard';
|
||||
@import '../../protocol/css/components/call-out';
|
||||
@import '../../protocol/css/components/feature-card';
|
||||
|
|
@ -14,7 +13,7 @@ $image-path: '/media/protocol/img';
|
|||
@import '../../protocol/css/templates/card-layout';
|
||||
|
||||
|
||||
.mzp-t-dark {
|
||||
.mzp-t-dark .note {
|
||||
:link,
|
||||
:visited {
|
||||
color: $color-white;
|
||||
|
|
@ -25,24 +24,6 @@ $image-path: '/media/protocol/img';
|
|||
color: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-button {
|
||||
box-shadow: none;
|
||||
color: $color-black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-white;
|
||||
box-shadow: 4px 4px 0 0 #000;
|
||||
color: $color-black;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 0 0 #000;
|
||||
transition: box-shadow 0ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-hero-title img {
|
||||
|
|
|
|||
|
|
@ -26,37 +26,6 @@ $image-path: '/media/protocol/img';
|
|||
margin: $spacing-xl 0;
|
||||
}
|
||||
|
||||
|
||||
//* ====================================================================== */
|
||||
// Download Buttons
|
||||
|
||||
.mzp-c-button-download {
|
||||
.mzp-c-button.mzp-t-download {
|
||||
background-color: $color-blue-60;
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-white;
|
||||
line-height: 1.125;
|
||||
padding: ($padding-md + 2px) ($padding-lg + 2px); //2px extra padding to compensate for no border.
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-blue-70;
|
||||
background-image: none;
|
||||
box-shadow: 4px 4px 0 0 $color-black;
|
||||
color: $color-white;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 0 0 $color-black;
|
||||
transition: box-shadow 0ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//* ====================================================================== */
|
||||
// Picto cards
|
||||
|
||||
|
|
@ -101,10 +70,3 @@ $image-path: '/media/protocol/img';
|
|||
color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
//* ====================================================================== */
|
||||
// Secondary CTA
|
||||
|
||||
.secondary-cta .fx-privacy-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ $font-open-sans-light: 'Open Sans Light', X-LocaleSpecific, sans-serif;
|
|||
|
||||
.form-input {
|
||||
input[type="text"] {
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 20px;
|
||||
padding: .9em 40px;
|
||||
width: 100%;
|
||||
|
|
@ -133,7 +133,7 @@ $font-open-sans-light: 'Open Sans Light', X-LocaleSpecific, sans-serif;
|
|||
|
||||
li {
|
||||
background: #fff;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
margin: 10px 0;
|
||||
padding: .9em 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,9 +104,10 @@
|
|||
}
|
||||
|
||||
input[type="text"] {
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1.25em;
|
||||
padding: .9em 40px;
|
||||
padding: 15px 40px;
|
||||
width: 100%;
|
||||
|
||||
/*
|
||||
|
|
@ -121,30 +122,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mzp-c-button {
|
||||
@include font-size-level6;
|
||||
@include open-sans;
|
||||
background: none transparent;
|
||||
border-radius: 100px;
|
||||
border: 2px solid $color-button-light;
|
||||
color: $color-button-light;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
padding: .9em 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
|
||||
width: 100%;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparentize($color-button-light, .95);
|
||||
border-color: darken($color-button-light, 5%);
|
||||
color: darken($color-button-light, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
@include clearfix;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
@import '../../../protocol/css/components/button';
|
||||
@import '../../../protocol/css/components/hero';
|
||||
@import '../../../protocol/css/components/call-out';
|
||||
@import 'send-yourself';
|
||||
|
|
@ -182,33 +181,6 @@ $image-path: '/media/protocol/img';
|
|||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.mzp-c-button {
|
||||
background-color: $color-white;
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
border: 2px solid $color-black;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-black;
|
||||
line-height: 1.125;
|
||||
padding: ($spacing-md + 2px) ($spacing-lg + 2px); //2px extra padding to compensate for no border.
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-gray-10;
|
||||
background-image: none;
|
||||
box-shadow: 4px 4px 0 0 $color-black;
|
||||
color: $color-black;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 0 0 $color-black;
|
||||
transition: box-shadow 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Send Yourself widget
|
||||
.mzp-c-sendyourself {
|
||||
a:link {
|
||||
|
|
@ -230,25 +202,6 @@ $image-path: '/media/protocol/img';
|
|||
}
|
||||
}
|
||||
|
||||
.mzp-c-sendyourself-field {
|
||||
input[type="text"] {
|
||||
border-radius: 3px;
|
||||
padding: .75em $spacing-lg;
|
||||
}
|
||||
|
||||
.mzp-c-button {
|
||||
border-radius: 3px;
|
||||
color: $color-black;
|
||||
border-color: $color-black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-black;
|
||||
border-color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//* -------------------------------------------------------------------------- */
|
||||
// Conditional content
|
||||
|
||||
|
|
@ -347,19 +300,6 @@ $image-path: '/media/protocol/img';
|
|||
margin: 0 auto 1.75em;
|
||||
}
|
||||
|
||||
.mzp-c-hero-cta {
|
||||
.mzp-c-button {
|
||||
background-color: $color-blue-60;
|
||||
color: $color-white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-blue-70;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pocket-hero-image {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -410,12 +350,6 @@ $image-path: '/media/protocol/img';
|
|||
.mzp-c-call-out-title {
|
||||
@include text-display-sm;
|
||||
}
|
||||
|
||||
.mzp-c-button:hover,
|
||||
.mzp-c-button:focus {
|
||||
background-color: $color-gray-20;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
@import '../../../protocol/css/components/button';
|
||||
@import '../../../protocol/css/components/call-out';
|
||||
@import '../../../protocol/css/components/hero';
|
||||
@import '../../../protocol/css/components/feature-card';
|
||||
|
|
@ -121,7 +120,7 @@ $image-path: '/media/protocol/img';
|
|||
input[type="email"] {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 16px 24px;
|
||||
padding: 18px 24px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
.download-link:visited {
|
||||
@include font-size-small;
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border: 2px solid $color-button-green;
|
||||
color: $color-button-green;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
a:link,
|
||||
a:visited {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +204,7 @@
|
|||
.download-link:visited {
|
||||
@include font-size-small;
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border: 2px solid $color-button-green;
|
||||
color: $color-button-green;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ $image-path: '/media/protocol/img';
|
|||
|
||||
@import '../../protocol/css/includes/lib';
|
||||
@import '../../protocol/css/components/billboard';
|
||||
@import '../../protocol/css/components/button';
|
||||
@import '../../protocol/css/components/feature-card';
|
||||
@import '../../protocol/css/components/hero';
|
||||
@import '../../protocol/css/components/newsletter-form';
|
||||
|
|
|
|||
|
|
@ -7,14 +7,10 @@ $image-path: '/media/protocol/img';
|
|||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
@import '../../../protocol/css/components/billboard';
|
||||
@import '../../../protocol/css/components/button';
|
||||
@import '../../../protocol/css/components/footer';
|
||||
@import '../../../protocol/css/components/modal';
|
||||
@import '../../../protocol/css/components/newsletter-form';
|
||||
@import '../../../protocol/css/templates/card-layout';
|
||||
|
||||
@import '../../hubs/nav-download-button-remove';
|
||||
|
||||
.mzp-c-navigation {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
|
@ -416,38 +412,3 @@ $image-path: '/media/protocol/img';
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Buttons
|
||||
.download-firefox-primary-cta,
|
||||
.download-firefox-secondary-cta,
|
||||
.download-firefox-sticky-cta {
|
||||
a.download-link.button {
|
||||
background-color: $color-blue-60;
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-white;
|
||||
line-height: 1.125;
|
||||
padding: ($spacing-md + 2px) ($spacing-lg + 2px); // 2px extra padding to compensate for no border.
|
||||
|
||||
&.button-small {
|
||||
padding: ($spacing-sm + 2px) ($spacing-lg + 2px);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-blue-70;
|
||||
background-image: none;
|
||||
box-shadow: 4px 4px 0 0 $color-black;
|
||||
color: $color-white;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 0 0 $color-black;
|
||||
transition: box-shadow 0ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../protocol/css/includes/lib';
|
||||
@import '../../protocol/css/components/button';
|
||||
@import '../../protocol/css/components/call-out';
|
||||
@import '../../protocol/css/components/hero';
|
||||
@import '../../protocol/css/templates/card-layout';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../protocol/css/includes/lib';
|
||||
@import '../../protocol/css/components/download-button';
|
||||
@import '../../protocol/css/components/article';
|
||||
|
||||
|
||||
|
|
@ -37,34 +36,14 @@ $image-path: '/media/protocol/img';
|
|||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Blue download button
|
||||
// Download button
|
||||
|
||||
.download-firefox {
|
||||
margin: $spacing-lg auto $spacing-sm;
|
||||
text-align: center;
|
||||
|
||||
a.download-link.button {
|
||||
background-color: $color-blue-60;
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-white;
|
||||
line-height: 1.125;
|
||||
padding: ($padding-md + 2px) ($padding-lg + 2px); //2px extra padding to compensate for no border.
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-blue-70;
|
||||
background-image: none;
|
||||
box-shadow: 4px 4px 0 0 $color-black;
|
||||
color: $color-white;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 2px 2px 0 0 $color-black;
|
||||
transition: box-shadow 0ms;
|
||||
}
|
||||
.mzp-c-button-download-container {
|
||||
margin: $spacing-lg 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
@include font-size-level6;
|
||||
@include open-sans;
|
||||
background: none;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -532,7 +532,7 @@ html.moz-nav-open .moz-global-nav-page-mask {
|
|||
.download-link:visited {
|
||||
@include font-size-small;
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border: 2px solid $color-button-green;
|
||||
color: $color-button-green;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,35 @@ $image-path: '/media/protocol/img';
|
|||
// Bedrock specific navigation overrides.
|
||||
@import '../../protocol/components/navigation';
|
||||
|
||||
/**
|
||||
* 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: $color-green-60;
|
||||
border: 2px solid $color-green-60;
|
||||
box-shadow: none;
|
||||
line-height: 1.125;
|
||||
padding: $padding-sm $padding-md;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-green-60;
|
||||
border-color: $color-green-60;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.fx-privacy-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pebbles specific overrides for Protocol Navigation and Menu components.
|
||||
* 1. Pebbles pages use Zilla for body copy, so override in the navigation.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
@import '../../protocol/css/includes/lib';
|
||||
@import '../../protocol/css/components/button';
|
||||
@import "../../protocol/css/components/article";
|
||||
|
||||
|
||||
|
|
@ -171,7 +170,6 @@
|
|||
.mzp-c-button {
|
||||
display: block;
|
||||
margin: $spacing-md auto 0;
|
||||
padding: $padding-sm $padding-md;
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
|
|
|
|||
|
|
@ -4,79 +4,6 @@
|
|||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
|
||||
// Download button color
|
||||
$color-button-green: #16da00;
|
||||
|
||||
// The basis for all buttons on mozilla.org
|
||||
%base-button {
|
||||
@include text-body-md;
|
||||
@include open-sans;
|
||||
background: none;
|
||||
border-radius: 100px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
padding: .9em 40px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
transition: background-color .1s ease-in-out, border-color .1s ease-in-out;
|
||||
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Standard solid buttons, especially those not in a form context such as CTA and download buttons
|
||||
.button,
|
||||
button.button,
|
||||
a.button:link,
|
||||
a.button:visited {
|
||||
@extend %base-button;
|
||||
|
||||
&.button-green {
|
||||
background-color: $color-button-green;
|
||||
border-color: $color-button-green;
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: saturate(darken($color-button-green, 5%), 10%);
|
||||
border-color: saturate(darken($color-button-green, 5%), 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// privacy policy link that accompany most download buttons
|
||||
.fx-privacy-link {
|
||||
@include text-body-xs;
|
||||
@include open-sans;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// download button and related containers
|
||||
ul.download-list {
|
||||
list-style-type: none;
|
||||
|
|
|
|||
|
|
@ -549,7 +549,7 @@ html.moz-nav-open .moz-global-nav-page-mask {
|
|||
.download-link:visited {
|
||||
@include text-display-xxs;
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border: 2px solid $color-button-green;
|
||||
color: $color-button-green;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -299,7 +299,7 @@ $color-button-green: #16da00;
|
|||
.download-link:visited {
|
||||
@include text-body-sm;
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border: 2px solid $color-button-green;
|
||||
color: $color-button-green;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -4,44 +4,20 @@
|
|||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
|
||||
// TODO we need convert all bedrock download buttons to use protocol
|
||||
.mzp-c-navigation-download {
|
||||
.download-button {
|
||||
.download-link {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-radius: 2px;
|
||||
color: $color-green-60;
|
||||
border: 2px solid $color-green-60;
|
||||
box-shadow: none;
|
||||
line-height: 1.125;
|
||||
padding: $padding-sm $padding-md;
|
||||
.mzp-c-navigation {
|
||||
.mzp-c-navigation-download .download-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-green-60;
|
||||
border-color: $color-green-60;
|
||||
color: $color-white;
|
||||
}
|
||||
.mzp-c-card {
|
||||
.mzp-c-card-image {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.download-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fx-privacy-link {
|
||||
display: none;
|
||||
.mzp-c-card-image[data-src] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-card {
|
||||
.mzp-c-card-image {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.mzp-c-card-image[data-src] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
// 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/.
|
||||
|
||||
@import '../../../protocol/css/includes/lib';
|
||||
|
||||
// Bug 1429849 - Overrides to hide the download button in main navigation.
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Navigation overrides for `en` pages.
|
||||
|
||||
#global-nav-download-firefox,
|
||||
#protocol-nav-download-firefox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.moz-global-nav .nav-primary-links {
|
||||
@media #{$mq-md} {
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
width: calc(100% - 270px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Legacy navigation overrides for non `en` localized pages
|
||||
|
||||
#nav-download-firefox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#masthead {
|
||||
@media #{$mq-md} {
|
||||
.masthead-nav-main {
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-xl} {
|
||||
.masthead-nav-main {
|
||||
width: calc(100% - 140px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
@import '../../protocol/css/includes/lib';
|
||||
@import '../../protocol/css/base/elements';
|
||||
@import '../../protocol/css/components/button';
|
||||
|
||||
@import 'components/download-button';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,9 @@ $font-path: '/media/fonts';
|
|||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '../../protocol/css/protocol.scss';
|
||||
|
||||
// TODO port these components to Protocol.
|
||||
@import 'components/masthead';
|
||||
@import 'components/download-button';
|
||||
@import '../../protocol/css/components/button';
|
||||
|
||||
// Bedrock specific component tweaks.
|
||||
@import 'components/masthead';
|
||||
@import 'components/navigation';
|
||||
@import 'components/download-button';
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
@include border-box;
|
||||
@include transition(all 0.1s linear);
|
||||
background: #ededf0;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
border: 2px solid #ededf0;
|
||||
line-height: 1.1;
|
||||
padding: 0.75em 20px;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
.inline-block;
|
||||
.transition(background-color .1s ease-in-out);
|
||||
background: none;
|
||||
border-radius: 100px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
padding: (@baseLine / 2) 36px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,35 @@ $image-path: '/media/protocol/img';
|
|||
// Bedrock specific navigation overrides.
|
||||
@import '../protocol/components/navigation';
|
||||
|
||||
/**
|
||||
* 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: $color-green-60;
|
||||
border: 2px solid $color-green-60;
|
||||
box-shadow: none;
|
||||
line-height: 1.125;
|
||||
padding: $padding-sm $padding-md;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-green-60;
|
||||
border-color: $color-green-60;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.fx-privacy-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sandstone specific overrides for Protocol Navigation and Menu components.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
* Initialize Protocol language switcher.
|
||||
*/
|
||||
(function() {
|
||||
if (typeof Mozilla === 'undefined' || typeof Mozilla.LangSwitcher === 'undefined') {
|
||||
if (typeof Mzp === 'undefined' || typeof Mzp.LangSwitcher === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
Mozilla.LangSwitcher.init(function(previousLanguage, newLanguage) {
|
||||
Mzp.LangSwitcher.init(function(previousLanguage, newLanguage) {
|
||||
window.dataLayer.push({
|
||||
'event': 'change-language',
|
||||
'languageSelected': newLanguage,
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
* Initialize Protocol language switcher.
|
||||
*/
|
||||
(function() {
|
||||
if (typeof Mozilla === 'undefined' || typeof Mozilla.Menu === 'undefined' || typeof Mozilla.Navigation === 'undefined') {
|
||||
if (typeof Mzp === 'undefined' || typeof Mzp.Menu === 'undefined' || typeof Mzp.Navigation === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Mozilla.Menu.isSupported()) {
|
||||
if (!Mzp.Menu.isSupported()) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -45,9 +45,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
Mozilla.Menu.init({
|
||||
Mzp.Menu.init({
|
||||
onMenuOpen: handleOnMenuOpen
|
||||
});
|
||||
|
||||
Mozilla.Navigation.init();
|
||||
Mzp.Navigation.init();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
trigger.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
Mozilla.Modal.createModal(e.target, content, {
|
||||
Mzp.Modal.createModal(e.target, content, {
|
||||
title: title.innerHTML,
|
||||
className: 'mzp-t-firefox',
|
||||
closeText: window.Mozilla.Utils.trans('global-close'),
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ function onYouTubeIframeAPIReady() {
|
|||
if (content) {
|
||||
event.preventDefault();
|
||||
|
||||
Mozilla.Modal.createModal(this, content, {
|
||||
Mzp.Modal.createModal(this, content, {
|
||||
title: title,
|
||||
className: 'mzp-has-media',
|
||||
onDestroy: function() {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
button.textContent = strings.dataset.choicesButton;
|
||||
button.setAttribute('id', 'choose');
|
||||
button.setAttribute('type', 'button');
|
||||
button.className = 'mzp-c-button';
|
||||
button.className = 'mzp-c-button mzp-t-small';
|
||||
|
||||
container.appendChild(copyContainer);
|
||||
container.appendChild(button);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"description": "Making mozilla.org awesome, one pebble at a time",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@mozilla-protocol/core": "2.4.3",
|
||||
"@mozilla-protocol/core": "3.1.0",
|
||||
"ansi-colors": "^1.1.0",
|
||||
"clean-css-cli": "4.0.5",
|
||||
"del": "^3.0.0",
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
normalize-path "^2.0.1"
|
||||
through2 "^2.0.3"
|
||||
|
||||
"@mozilla-protocol/core@2.4.3":
|
||||
version "2.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@mozilla-protocol/core/-/core-2.4.3.tgz#4d4ebb5e7d55b57540334622a42bd761e2109ec3"
|
||||
"@mozilla-protocol/core@3.1.0":
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@mozilla-protocol/core/-/core-3.1.0.tgz#161bd2efcb81e65b45bf092b3ff3b00d2ffe28fd"
|
||||
|
||||
JSONStream@^0.8.4:
|
||||
version "0.8.4"
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче