зеркало из https://github.com/mozilla/bedrock.git
Make button modifier classes more explicit
This commit is contained in:
Родитель
dd7718f983
Коммит
4e2399d275
|
@ -39,9 +39,9 @@
|
|||
<aside id="fxa-iframe-config" data-host="{{ settings.FXA_IFRAME_SRC }}" data-mozillaonline-host="{{ settings.FXA_IFRAME_SRC_MOZILLAONLINE }}">
|
||||
<iframe id="fxa" scrolling="no" data-src="{{ settings.FXA_IFRAME_SRC }}?utm_campaign=fxa-embedded-form&utm_medium=referral&utm_source=accounts-page&utm_content=fx-{{ version }}&entrypoint=accounts-page&service=sync&context=iframe&style=chromeless&haltAfterSignIn=true"></iframe>
|
||||
<div class="mobile">
|
||||
<a class="button dark firefox-ios more" rel="external" href="https://support.mozilla.org/kb/sync-firefox-bookmarks-and-browsing-history-iOS">{{_('Set up Sync for iOS')}}</a>
|
||||
<a class="button button-dark firefox-ios more" rel="external" href="https://support.mozilla.org/kb/sync-firefox-bookmarks-and-browsing-history-iOS">{{_('Set up Sync for iOS')}}</a>
|
||||
{# L10n: Line break below for visual formatting only. #}
|
||||
<a class="button dark firefox-android more" rel="external" href="https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android">{{_('Set up Sync on your <br>Android device')}}</a>
|
||||
<a class="button button-dark firefox-android more" rel="external" href="https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android">{{_('Set up Sync on your <br>Android device')}}</a>
|
||||
<div class="non-firefox">
|
||||
<p>{{_('Download Firefox to start using Sync.')}}</p>
|
||||
{{ google_play_button() }}
|
||||
|
|
|
@ -168,7 +168,7 @@
|
|||
{% block email_form %}
|
||||
<aside id="newsletter-subscribe" class="ga-section" data-ga-label="Keep up with all things Firefox.">
|
||||
<div class="content container">
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='light') }}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light') }}
|
||||
</div>
|
||||
</aside>
|
||||
{% endblock %}
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
{% call fxfamilynav('android') %}
|
||||
<div class="{% if has_widget %}show-widget{% endif %}">
|
||||
{{ google_play_button(class_name='dl-button') }}
|
||||
<button id="send-to-button-header" class="send-to button dark" type="button" data-button-name="Get Firefox for Android" data-cta-position="Nav">{{ _('Get Firefox for Android') }}</button>
|
||||
<button id="send-to-button-header" class="send-to button button-dark" type="button" data-button-name="Get Firefox for Android" data-cta-position="Nav">{{ _('Get Firefox for Android') }}</button>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
@ -384,7 +384,7 @@
|
|||
<h3>{{ _('Choose Firefox') }}</h3>
|
||||
<div id="send-to-device-footer">
|
||||
{{ google_play_button(anchor_attributes={'data-alt': _('Get Firefox for Android')}, class_name='dl-button') }}
|
||||
<button id="send-to-button-footer" class="send-to button dark" type="button" data-button-name="Get Firefox for Android" data-cta-position="Secondary">{{ _('Get Firefox for Android') }}</button>
|
||||
<button id="send-to-button-footer" class="send-to button button-dark" type="button" data-button-name="Get Firefox for Android" data-cta-position="Secondary">{{ _('Get Firefox for Android') }}</button>
|
||||
</div>
|
||||
</div>{#-- /#download-content --#}
|
||||
</div>{#-- /#download-wrapper --#}
|
||||
|
@ -392,7 +392,7 @@
|
|||
{% block subscribe_wrapper %}
|
||||
<div id="subscribe-wrapper" class="floating">
|
||||
{# L10n: Line break for visual formatting. #}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='light') }}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light') }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
<div class="rightcol">
|
||||
{{ high_res_img('firefox/australis/fx38.0.5/sync.png', {'alt': 'Firefox Sync', 'width': '219', 'height': '118'}) }}
|
||||
<a href="{{ url('firefox.sync') }}" id="cta-signup" class="button green">{{ _('Create a Firefox Account') }}</a>
|
||||
<a href="{{ url('firefox.sync') }}" id="cta-signup" class="button button-green">{{ _('Create a Firefox Account') }}</a>
|
||||
<a id="cta-signin" rel="external" href="https://support.mozilla.org/kb/how-do-i-set-up-firefox-sync">{{ _('Already have one? Sign in.') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -89,7 +89,7 @@
|
|||
</div>
|
||||
<aside id="newsletter-subscribe">
|
||||
<div class="container">
|
||||
{{ email_newsletter_form(title=_('<span>Firefox</span> + You'), subtitle=_('Get Firefox tips, tricks, news and more'), button_class='light') }}
|
||||
{{ email_newsletter_form(title=_('<span>Firefox</span> + You'), subtitle=_('Get Firefox tips, tricks, news and more'), button_class='button-light') }}
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
|
|
@ -169,9 +169,9 @@
|
|||
|
||||
<div id="themes-thumbs">
|
||||
<button data-interaction="Themes" data-element-action="theme-yellow" type="button" aria-controls="theme-demo" id="theme-yellow">{{ _('Preview yellow theme') }}</button>
|
||||
<button data-interaction="Themes" data-element-action="theme-green"type="button" aria-controls="theme-demo" id="theme-green">{{ _('Preview green theme') }}</button>
|
||||
<button data-interaction="Themes" data-element-action="theme-blue"type="button" aria-controls="theme-demo" id="theme-blue">{{ _('Preview blue theme') }}</button>
|
||||
<button data-interaction="Themes" data-element-action="theme-red"type="button" aria-controls="theme-demo" id="theme-red" class="selected">{{ _('Preview red theme') }}</button>
|
||||
<button data-interaction="Themes" data-element-action="theme-green" type="button" aria-controls="theme-demo" id="theme-green">{{ _('Preview green theme') }}</button>
|
||||
<button data-interaction="Themes" data-element-action="theme-blue" type="button" aria-controls="theme-demo" id="theme-blue">{{ _('Preview blue theme') }}</button>
|
||||
<button data-interaction="Themes" data-element-action="theme-red" type="button" aria-controls="theme-demo" id="theme-red" class="selected">{{ _('Preview red theme') }}</button>
|
||||
</div>
|
||||
|
||||
<a class="more" rel="external" data-interaction="outbound link" href="https://addons.mozilla.org/firefox/themes/">{{ _('Try it now') }}</a>
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
<div class="container">
|
||||
<div id="subscribe-wrapper">
|
||||
{# L10n: Line break for visual formatting. #}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='light') }}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light') }}
|
||||
</div>
|
||||
<div id="download-wrapper">
|
||||
{{ download_firefox() }}
|
||||
|
|
|
@ -241,7 +241,7 @@
|
|||
</div>
|
||||
{# See Bug 1313508 #}
|
||||
{% if LANG.startswith('en-') %}
|
||||
{{ email_newsletter_form('app-dev', 'Mozilla Developer Newsletter', button_class='light', include_language=False) }}
|
||||
{{ email_newsletter_form('app-dev', 'Mozilla Developer Newsletter', button_class='button-light', include_language=False) }}
|
||||
{% else %}
|
||||
{{ super() }}
|
||||
{% endif %}
|
||||
|
|
|
@ -149,7 +149,7 @@
|
|||
<aside id="newsletter-subscribe" class="ga-section" data-ga-label="Keep up with all things Firefox.">
|
||||
<div class="content container">
|
||||
{# L10n: Line break for visual formatting. #}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='light') }}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light') }}
|
||||
</div>
|
||||
</aside>
|
||||
{% endblock %}
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
</h2>
|
||||
<h1>{{ self.page_title() }}</h1>
|
||||
<p>{{ self.page_desc() }}</p>
|
||||
<a href="https://support.mozilla.org/en-US/kb/use-search-bar-firefox" id="try-it" role="button" class="button dark">{{ _('Search') }}</a>
|
||||
<a href="https://support.mozilla.org/en-US/kb/use-search-bar-firefox" id="try-it" role="button" class="button button-dark">{{ _('Search') }}</a>
|
||||
<small>{{ _('Yahoo is one of Mozilla’s search partners. <a href="%s">Learn more.</a>')|format('https://blog.mozilla.org/blog/2015/11/11/a-new-yahoo-search-experience-for-firefox-users-in-u-s/') }}</small>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
<ul>
|
||||
{% for plat in builds -%}
|
||||
<li><a href="{{ plat.download_link_direct or plat.download_link }}"
|
||||
class="download-link button green"
|
||||
class="download-link button button-green"
|
||||
data-link-type="download"
|
||||
data-download-version="{{ plat.os }}"
|
||||
{% if plat.os == 'android' %}data-download-os="Android"
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
<a class="dl-button" rel="external" href="{{ firefox_ios_url('mozorg-ios_page-appstore-button') }}" data-link-type="download" data-download-os="iOS">
|
||||
<img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}">
|
||||
</a>
|
||||
<button class="send-to button green" type="button" data-button-name="Get Firefox for iOS" data-cta-position="Nav">{{ _('Get Firefox for iOS') }}</button>
|
||||
<button class="send-to button button-green" type="button" data-button-name="Get Firefox for iOS" data-cta-position="Nav">{{ _('Get Firefox for iOS') }}</button>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
@ -147,7 +147,7 @@
|
|||
<aside id="newsletter-subscribe" class="light ga-section" data-ga-label="Keep up with all things Firefox.">
|
||||
<div class="container">
|
||||
{# L10n: Line break for visual formatting. #}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='dark') }}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-dark') }}
|
||||
</div>
|
||||
</aside>
|
||||
{% endblock %}
|
||||
|
|
|
@ -126,7 +126,7 @@
|
|||
</section>
|
||||
<aside id="newsletter-subscribe">
|
||||
<div class="container">
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='light') }}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light') }}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
<h1>{{ _('Experience Firefox OS on your Android device')}}</h1>
|
||||
<p>{{_('Introducing Firefox OS 2.5 Developer Preview, an experimental app that lets you use Firefox OS on your Android device.')}}</p>
|
||||
<div class="primary-cta">
|
||||
<a href="{{ settings.B2G_DROID_URL }}" class="cta-button button green" data-pixel="52161" data-id="Mozilla_B2G_Activity_Tag_1">{{_('Get the Android App')}}</a>
|
||||
<a href="{{ settings.B2G_DROID_URL }}" class="cta-button button button-green" data-pixel="52161" data-id="Mozilla_B2G_Activity_Tag_1">{{_('Get the Android App')}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
|
@ -101,7 +101,7 @@
|
|||
<div class="content-wrapper">
|
||||
<h2>{{_('Ready to try Firefox OS 2.5 Developer Preview on your Android device?')}}</h2>
|
||||
<div class="primary-cta">
|
||||
<a href="{{ settings.B2G_DROID_URL }}" class="cta-button button green" data-pixel="52162" data-id="Mozilla_B2G_Activity_Tag_2">{{_('Get the Android App')}}</a>
|
||||
<a href="{{ settings.B2G_DROID_URL }}" class="cta-button button button-green" data-pixel="52162" data-id="Mozilla_B2G_Activity_Tag_2">{{_('Get the Android App')}}</a>
|
||||
<p>{{_('Want the full Firefox OS 2.5 experience?')}} <a href="https://firefoxos.mozilla.community/devices/" class="more" rel="external">{{_('Flash your phone')}}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
<h1>{{ _('More protection. <br>The most privacy. <br>Only from Firefox.') }}</h1>
|
||||
<div class="download-buttons">
|
||||
<div class="firefox-latest-cta">
|
||||
<a class="try-pb-button button dark" data-highlight="privateWindow" data-link-type="button" data-link-name="Try Private Browsing" data-cta-position="Primary" href="https://support.mozilla.org/kb/private-browsing-use-firefox-without-history/">{{ _('Try Private Browsing') }}</a>
|
||||
<a class="try-pb-button button button-dark" data-highlight="privateWindow" data-link-type="button" data-link-name="Try Private Browsing" data-cta-position="Primary" href="https://support.mozilla.org/kb/private-browsing-use-firefox-without-history/">{{ _('Try Private Browsing') }}</a>
|
||||
</div>
|
||||
<div class="non-firefox-cta">
|
||||
<p>{{ _('To give the new Private Browsing a try, download Firefox.') }}</p>
|
||||
|
@ -126,7 +126,7 @@
|
|||
<aside id="newsletter-subscribe" class="light ga-section" data-ga-label="Keep up with all things Firefox.">
|
||||
<div class="container">
|
||||
{# L10n: Line break for visual formatting. #}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='dark') }}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-dark') }}
|
||||
</div>
|
||||
</aside>
|
||||
{% endblock %}
|
||||
|
@ -136,7 +136,7 @@
|
|||
<div class="download-buttons">
|
||||
<div class="firefox-latest-cta">
|
||||
<h2>{{ _('Try it now to stay in control') }}</h2>
|
||||
<a class="try-pb-button button dark" data-highlight="privateWindow" data-link-type="button" data-link-name="Try Private Browsing" data-cta-position="Secondary" href="https://support.mozilla.org/kb/private-browsing-use-firefox-without-history/">{{ _('Try Private Browsing') }}</a>
|
||||
<a class="try-pb-button button button-dark" data-highlight="privateWindow" data-link-type="button" data-link-name="Try Private Browsing" data-cta-position="Secondary" href="https://support.mozilla.org/kb/private-browsing-use-firefox-without-history/">{{ _('Try Private Browsing') }}</a>
|
||||
</div>
|
||||
<div class="non-firefox-cta">
|
||||
<h2>{{ _('To give the new Private Browsing a try, download Firefox.') }}</h2>
|
||||
|
|
|
@ -257,7 +257,7 @@
|
|||
<aside id="newsletter-subscribe" class="light ga-section" data-ga-label="Keep up with all things Firefox.">
|
||||
<div class="inner-wrapper container">
|
||||
{# L10n: Line break for visual formatting. #}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='dark') }}
|
||||
{{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-dark') }}
|
||||
</div>
|
||||
</aside>
|
||||
{% endblock %}
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
<label for="id_email">{{ _('Email') }}</label>
|
||||
{{ newsletter_form.email|safe }}
|
||||
</div>
|
||||
<button class="button dark" id="footer_email_submit" type="submit">Submit</button>
|
||||
<button class="button button-dark" id="footer_email_submit" type="submit">Submit</button>
|
||||
</div>{#-- /#email-submit-wrapper --#}
|
||||
|
||||
<div id="terms-format-wrapper">
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
{% block body_class %}firefox-up-to-date{% endblock %}
|
||||
|
||||
{% block main_subhead %}
|
||||
<a class="button dark" href="{{ url('firefox.private-browsing') }}" data-highlight="privateWindow" role="button" data-link-type="button" data-link-name="Try the new Private Browsing" data-cta-position="Primary">{{ _('Try the new Private Browsing') }}</a>
|
||||
<a class="button button-dark" href="{{ url('firefox.private-browsing') }}" data-highlight="privateWindow" role="button" data-link-type="button" data-link-name="Try the new Private Browsing" data-cta-position="Primary">{{ _('Try the new Private Browsing') }}</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block private_browsing_cta %}
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
<header class="main-header">
|
||||
<h1 data-alt="{{ _('The world’s most private browsing. Only from Firefox.') }}">{{ self.page_title() }}</h1>
|
||||
{% block main_subhead %}
|
||||
<a class="button dark" href="{{ url('firefox.private-browsing') }}" data-highlight="privateWindow" role="button" data-link-type="button" data-link-name="Try the new Private Browsing">{{ _('Try the new Private Browsing') }}</a>
|
||||
<a class="button button-dark" href="{{ url('firefox.private-browsing') }}" data-highlight="privateWindow" role="button" data-link-type="button" data-link-name="Try the new Private Browsing">{{ _('Try the new Private Browsing') }}</a>
|
||||
{% endblock %}
|
||||
</header>
|
||||
{% block private_browsing_cta %}
|
||||
|
|
|
@ -97,7 +97,7 @@ def firefox_footer_links(ctx, channel='release', platform='all'):
|
|||
def download_firefox(ctx, channel='release', platform='all',
|
||||
dom_id=None, locale=None, force_direct=False,
|
||||
force_full_installer=False, force_funnelcake=False,
|
||||
alt_copy=None, button_color='green'):
|
||||
alt_copy=None, button_color='button-green'):
|
||||
""" Output a "download firefox" button.
|
||||
|
||||
:param ctx: context from calling template.
|
||||
|
@ -111,7 +111,7 @@ def download_firefox(ctx, channel='release', platform='all',
|
|||
:param force_funnelcake: Force the download version for en-US Windows to be
|
||||
'latest', which bouncer will translate to the funnelcake build.
|
||||
:param alt_copy: Specifies alternate copy to use for download buttons.
|
||||
:param button_color: color of download button. Default to 'green'.
|
||||
:param button_color: color of download button. Default to 'button-green'.
|
||||
"""
|
||||
show_desktop = platform in ['all', 'desktop']
|
||||
show_android = platform in ['all', 'android']
|
||||
|
|
|
@ -76,9 +76,9 @@
|
|||
<aside id="newsletter-subscribe">
|
||||
<div class="content container">
|
||||
{% if LANG.startswith('en-') %}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Sign up. Read up.<br> Make a difference.'), subtitle=_('Get the Mozilla newsletter and help us keep the Web free and open.'), button_class='red') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Sign up. Read up.<br> Make a difference.'), subtitle=_('Get the Mozilla newsletter and help us keep the Web free and open.'), button_class='button-red') }}
|
||||
{% else %}
|
||||
{{ email_newsletter_form(button_class='red') }}
|
||||
{{ email_newsletter_form(button_class='button-red') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
@ -75,9 +75,9 @@
|
|||
<aside id="newsletter-subscribe">
|
||||
<div class="content container">
|
||||
{% if LANG.startswith('en-') %}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Love the Web?'), subtitle=_('Get the Mozilla newsletter and help us keep it open and free.'), button_class='light') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Love the Web?'), subtitle=_('Get the Mozilla newsletter and help us keep it open and free.'), button_class='button-light') }}
|
||||
{% else %}
|
||||
{{ email_newsletter_form(button_class='light') }}
|
||||
{{ email_newsletter_form(button_class='button-light') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
@ -131,9 +131,9 @@
|
|||
<aside id="newsletter-subscribe">
|
||||
<div class="content container">
|
||||
{% if LANG.startswith('en-') %}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Sign up. Read up.<br> Make a difference.'), subtitle=_('Get the Mozilla newsletter and help us keep the Web free and open.'), button_class='red') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Sign up. Read up.<br> Make a difference.'), subtitle=_('Get the Mozilla newsletter and help us keep the Web free and open.'), button_class='button-red') }}
|
||||
{% else %}
|
||||
{{ email_newsletter_form(button_class='red') }}
|
||||
{{ email_newsletter_form(button_class='button-red') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
@ -94,7 +94,7 @@
|
|||
{{ email_newsletter_form(newsletters='app-dev',
|
||||
include_language=False,
|
||||
title=_('Learn the best of web development'),
|
||||
subtitle=_('Sign up for Mozilla’s newsletter.'), button_class='light')
|
||||
subtitle=_('Sign up for Mozilla’s newsletter.'), button_class='button-light')
|
||||
}}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
{% block email_form_unwrapped %}
|
||||
<section id="newsletter-subscribe" class="light">
|
||||
<div class="container">
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Keep in touch with Mozilla. Sign up for our newsletter.'), button_class='dark') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Keep in touch with Mozilla. Sign up for our newsletter.'), button_class='button-dark') }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
@ -152,7 +152,7 @@
|
|||
<img width="176" height="184" src="{{ static('img/home/voices/promos/download-firefox/firefox-logo.png') }}" alt="">
|
||||
</div>
|
||||
<div class="secondary">
|
||||
{{ download_firefox(alt_copy=_('Free Download'), button_color='transparent-light', dom_id='promo-download-fx-button') }}
|
||||
{{ download_firefox(alt_copy=_('Free Download'), button_color='button-hollow button-light', dom_id='promo-download-fx-button') }}
|
||||
<a class="fxos-link" href="{{ url('firefox.desktop.index') }}">{{ _('Learn more') }}</a>
|
||||
<a class="unrecognized-short-link" href="{{ url('firefox.new') }}">{{_('Download Firefox')}}</a>
|
||||
</div>
|
||||
|
@ -349,9 +349,9 @@
|
|||
<section class="module" id="newsletter-subscribe">
|
||||
<div class="container">
|
||||
{% if LANG.startswith('en-') %}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Love the Web?'), subtitle=_('Get the Mozilla newsletter and help us keep it open and free.'), button_class='light') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Love the Web?'), subtitle=_('Get the Mozilla newsletter and help us keep it open and free.'), button_class='button-light') }}
|
||||
{% else %}
|
||||
{{ email_newsletter_form(button_class='light') }}
|
||||
{{ email_newsletter_form(button_class='button-light') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -200,9 +200,9 @@
|
|||
<aside class="section section-newsletter" id="newsletter-subscribe">
|
||||
<div class="content">
|
||||
{% if LANG.startswith('en-') %}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Love the Web?'), subtitle=_('Get the Mozilla newsletter and help us keep it open and free.'), button_class='hollow light', spinner_color='#fff') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Love the Web?'), subtitle=_('Get the Mozilla newsletter and help us keep it open and free.'), button_class='button-hollow button-light', spinner_color='#fff') }}
|
||||
{% else %}
|
||||
{{ email_newsletter_form(button_class='hollow light', spinner_color='#fff') }}
|
||||
{{ email_newsletter_form(button_class='button-hollow button-light', spinner_color='#fff') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
@ -83,9 +83,9 @@
|
|||
<aside id="newsletter-subscribe">
|
||||
<div class="content container">
|
||||
{% if LANG.startswith('en-') %}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Sign up. Read up.<br> Make a difference.'), subtitle=_('Get the Mozilla newsletter and help us keep the Web free and open.'), button_class='red') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Sign up. Read up.<br> Make a difference.'), subtitle=_('Get the Mozilla newsletter and help us keep the Web free and open.'), button_class='button-red') }}
|
||||
{% else %}
|
||||
{{ email_newsletter_form(button_class='red') }}
|
||||
{{ email_newsletter_form(button_class='button-red') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
{{ email_newsletter_form(newsletters='mozilla-foundation',
|
||||
title=_('What’s next?'),
|
||||
subtitle=_('Get the Mozilla newsletter for our latest tech news and more.'),
|
||||
button_class='light',
|
||||
button_class='button-light',
|
||||
spinner_color='#fff')
|
||||
}}
|
||||
</div>
|
||||
|
|
|
@ -154,7 +154,7 @@
|
|||
<section class="newsletter-container">
|
||||
<aside id="newsletter-subscribe">
|
||||
<div class="content container">
|
||||
{{ email_newsletter_form(title=_('<span>Firefox</span> + You'), subtitle=_('Get Firefox tips, tricks, news and more'), button_class='light') }}
|
||||
{{ email_newsletter_form(title=_('<span>Firefox</span> + You'), subtitle=_('Get Firefox tips, tricks, news and more'), button_class='button-light') }}
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
|
|
@ -126,7 +126,7 @@
|
|||
<div class="content">
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation',
|
||||
title=_('What’s next?'),
|
||||
subtitle=_('Get the Mozilla newsletter for our latest tech news and more.'), button_class='light')
|
||||
subtitle=_('Get the Mozilla newsletter for our latest tech news and more.'), button_class='button-light')
|
||||
}}
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
<h1 class="page-title">{{ self.page_title() }}</h1>
|
||||
<h2 class="section-title">{{ self.page_desc() }} {{ _('If you don’t like the Mozilla developer newsletter, you can easily unsubscribe (but we think you’ll like it).') }}</h2>
|
||||
</header>
|
||||
{{ email_newsletter_form(newsletters='app-dev', include_language=False, include_title=False, spinner_color='#0c99d5', button_class='hollow') }}
|
||||
{{ email_newsletter_form(newsletters='app-dev', include_language=False, include_title=False, spinner_color='#0c99d5', button_class='button-hollow') }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
<h1 class="page-title">{{ self.page_title() }}</h1>
|
||||
<h2 class="section-title">{{ self.page_desc() }}</h2>
|
||||
</header>
|
||||
{{ email_newsletter_form(include_title=False, spinner_color='#3a304b', button_class='hollow') }}
|
||||
{{ email_newsletter_form(include_title=False, spinner_color='#3a304b', button_class='button-hollow') }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
<div class="content">
|
||||
<h2 class="section-title">{{ self.page_desc() }}</h2>
|
||||
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', include_title=False, spinner_color='#c13832', button_class='red') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', include_title=False, spinner_color='#c13832', button_class='button-red') }}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -19,32 +19,32 @@
|
|||
|
||||
<p>
|
||||
<button class="button">button</button>
|
||||
<button class="button red">red button</button>
|
||||
<button class="button green">green button</button>
|
||||
<button class="button orange">orange button</button>
|
||||
<button class="button dark">dark button</button>
|
||||
<button class="button button-red">red button</button>
|
||||
<button class="button button-green">green button</button>
|
||||
<button class="button button-orange">orange button</button>
|
||||
<button class="button button-dark">dark button</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="button hollow">hollow button</button>
|
||||
<button class="button hollow red">hollow red button</button>
|
||||
<button class="button hollow dark">hollow dark button</button>
|
||||
<button class="button hollow light">hollow light button</button>
|
||||
<button class="button button-hollow">hollow button</button>
|
||||
<button class="button button-hollow button-red">hollow red button</button>
|
||||
<button class="button button-hollow button-dark">hollow dark button</button>
|
||||
<button class="button button-hollow button-light">hollow light button</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="#" class="button">link</a>
|
||||
<a href="#" class="button red">red link</a>
|
||||
<a href="#" class="button green">green link</a>
|
||||
<a href="#" class="button orange">orange link</a>
|
||||
<a href="#" class="button dark">dark link</a>
|
||||
<a href="#" class="button button-red">red link</a>
|
||||
<a href="#" class="button button-green">green link</a>
|
||||
<a href="#" class="button button-orange">orange link</a>
|
||||
<a href="#" class="button button-dark">dark link</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="#" class="button hollow">hollow link</a>
|
||||
<a href="#" class="button hollow red">hollow red link</a>
|
||||
<a href="#" class="button hollow dark">hollow dark link</a>
|
||||
<a href="#" class="button hollow light">hollow light link</a>
|
||||
<a href="#" class="button button-hollow">hollow link</a>
|
||||
<a href="#" class="button button-hollow button-red">hollow red link</a>
|
||||
<a href="#" class="button button-hollow button-dark">hollow dark link</a>
|
||||
<a href="#" class="button button-hollow button-light">hollow light link</a>
|
||||
</p>
|
||||
|
||||
<h3>Lists: Level Three Heading</h3>
|
||||
|
|
|
@ -47,9 +47,9 @@
|
|||
<div class="footer-cta" id="footer-cta">
|
||||
<div id="smarton-foot-newsletter" class="foot-newsletter content" data-footer-name="Newsletter signup">
|
||||
{% if LANG.startswith('en') %}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Stay in control'), subtitle=_('Get tips and more from Mozilla'), button_class='light') }}
|
||||
{{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Stay in control'), subtitle=_('Get tips and more from Mozilla'), button_class='button-light') }}
|
||||
{% else %}
|
||||
{{ email_newsletter_form(button_class='light') }}
|
||||
{{ email_newsletter_form(button_class='button-light') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<h4>{{ _('Download Thunderbird') }} — {{ locale_name|safe }}</h4>
|
||||
<ul>
|
||||
{% for plat in builds -%}
|
||||
<li><a href="{{ plat.download_link_direct or plat.download_link }}" class="download-link button green">{{ plat.os_arch_pretty or plat.os_pretty }}</a></li>
|
||||
<li><a href="{{ plat.download_link_direct or plat.download_link }}" class="download-link button button-green">{{ plat.os_arch_pretty or plat.os_pretty }}</a></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -15,7 +15,7 @@ from lib.l10n_utils import get_locale
|
|||
@jinja2.contextfunction
|
||||
def download_thunderbird(ctx, channel='release', dom_id=None,
|
||||
locale=None, force_direct=False,
|
||||
alt_copy=None, button_color='green'):
|
||||
alt_copy=None, button_color='button-green'):
|
||||
""" Output a "Download Thunderbird" button.
|
||||
|
||||
:param ctx: context from calling template.
|
||||
|
|
|
@ -162,12 +162,12 @@ This is done in a template as follows:
|
|||
|
||||
# dark
|
||||
{% block email_form %}
|
||||
{{ email_newsletter_form(button_class='dark') }}
|
||||
{{ email_newsletter_form(button_class='button-dark') }}
|
||||
{% endblock %}
|
||||
|
||||
# white
|
||||
{% block email_form %}
|
||||
{{ email_newsletter_form(button_class='light') }}
|
||||
{{ email_newsletter_form(button_class='button-light') }}
|
||||
{% endblock %}
|
||||
|
||||
Creating a signup page
|
||||
|
|
|
@ -93,7 +93,7 @@ aside {
|
|||
}
|
||||
}
|
||||
|
||||
.button.dark {
|
||||
.button.button-dark {
|
||||
.font-size(20px);
|
||||
}
|
||||
|
||||
|
@ -106,8 +106,8 @@ aside {
|
|||
.download-firefox,
|
||||
.non-firefox,
|
||||
.old-firefox,
|
||||
.button.dark.firefox-ios,
|
||||
.button.dark.firefox-android, {
|
||||
.button.button-dark.firefox-ios,
|
||||
.button.button-dark.firefox-android, {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -161,7 +161,7 @@ aside {
|
|||
.mobile {
|
||||
display: block;
|
||||
}
|
||||
.button.dark.firefox-ios {
|
||||
.button.button-dark.firefox-ios {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
@ -170,7 +170,7 @@ aside {
|
|||
.mobile {
|
||||
display: block;
|
||||
}
|
||||
.button.dark.firefox-android {
|
||||
.button.button-dark.firefox-android {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
@ -278,7 +278,7 @@ aside {
|
|||
}
|
||||
|
||||
.main-copy .tagline,
|
||||
.button.dark {
|
||||
.button.button-dark {
|
||||
.font-size(18px);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -57,7 +57,7 @@ h2 {
|
|||
color: #fff;
|
||||
padding-bottom: 60px;
|
||||
|
||||
.button.green {
|
||||
.button.button-green {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
|
||||
|
|
|
@ -597,7 +597,7 @@ a.go {
|
|||
|
||||
// Send to Device Widget
|
||||
#send-to-device,
|
||||
.send-to.button.green {
|
||||
.button.send-to {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -607,8 +607,8 @@ a.go {
|
|||
.appstore-badge {
|
||||
display: none;
|
||||
}
|
||||
.send-to.button.green {
|
||||
display: inline;
|
||||
.button.send-to {
|
||||
display: inline-block;
|
||||
}
|
||||
#send-to-device {
|
||||
display: block;
|
||||
|
@ -622,7 +622,7 @@ a.go {
|
|||
display: block;
|
||||
}
|
||||
#send-to-device,
|
||||
.send-to.button.green {
|
||||
.button.send-to {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -267,7 +267,7 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
.cta-button.button.green {
|
||||
.cta-button.button.button-green {
|
||||
padding-left: 66px;
|
||||
margin-bottom: @baseLine;
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.button.dark {
|
||||
.button.button-dark {
|
||||
.font-size(24px);
|
||||
|
||||
@media only screen and (max-width: @breakDesktop) {
|
||||
|
|
|
@ -1,37 +0,0 @@
|
|||
// 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 '../includes/lib';
|
||||
|
||||
|
||||
/* the basis for all buttons on bedrock */
|
||||
@mixin base-button {
|
||||
@include font-size(18px);
|
||||
@include transition(background-color 100ms ease-in-out);
|
||||
background: none;
|
||||
border-radius: 4px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: .5em 36px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
|
||||
@media #{$mq-tablet} {
|
||||
@include font-size(20px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
|
@ -5,7 +5,7 @@
|
|||
@import '../includes/lib';
|
||||
|
||||
|
||||
/* privacy policy link that accompany most download buttons */
|
||||
// privacy policy link that accompany most download buttons
|
||||
.fx-privacy-link {
|
||||
@include font-size(16px);
|
||||
display: block;
|
||||
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
|
||||
/* fxfamilynav overrides */
|
||||
// fxfamilynav overrides
|
||||
.fxfamilynav-cta-wrapper {
|
||||
.button,
|
||||
a.button:link,
|
||||
|
@ -34,7 +34,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* download button and related containers specific */
|
||||
|
||||
// download button and related containers
|
||||
ul.download-list {
|
||||
list-style-type: none;
|
||||
margin-bottom: 10px;
|
||||
|
@ -95,17 +96,19 @@ ul.download-list {
|
|||
}
|
||||
}
|
||||
|
||||
/* Product download buttons */
|
||||
.download-button .ios-download,
|
||||
.download-button .linux-arm-download,
|
||||
.download-button .unrecognized-download,
|
||||
.download-button .unsupported-download,
|
||||
.download-button .unsupported-download-osx,
|
||||
.download-button .nojs-download {
|
||||
display: none;
|
||||
// Product download buttons
|
||||
.download-button {
|
||||
.ios-download,
|
||||
.linux-arm-download,
|
||||
.unrecognized-download,
|
||||
.unsupported-download,
|
||||
.unsupported-download-osx,
|
||||
.nojs-download {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* OS detection */
|
||||
// OS detection
|
||||
.download-button .os_winsha1,
|
||||
.download-button .os_win64,
|
||||
.download-button .os_linux,
|
||||
|
@ -183,7 +186,7 @@ ul.download-list {
|
|||
}
|
||||
}
|
||||
|
||||
/* Android architecture detection */
|
||||
// Android architecture detection
|
||||
.download-button .download-list .os_android.api-9,
|
||||
.download-button .download-list .os_android.x86,
|
||||
.download-button .download-other.os_android .api-15,
|
||||
|
@ -204,7 +207,7 @@ ul.download-list {
|
|||
display: inline !important;
|
||||
}
|
||||
|
||||
/* IE on Windows XP, Server 2003, Vista need sha-1 button */
|
||||
// IE on Windows XP, Server 2003, Vista need sha-1 button
|
||||
.windows.sha-1 .download-button .os_win {
|
||||
display: none !important;
|
||||
}
|
||||
|
@ -213,7 +216,7 @@ ul.download-list {
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
/* l10n download button tweaks */
|
||||
// l10n download button tweaks
|
||||
html[lang="ml"] {
|
||||
.button {
|
||||
padding: 10px 16px;
|
||||
|
|
|
@ -2,17 +2,45 @@
|
|||
// 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
|
||||
'../includes/lib',
|
||||
'base-button';
|
||||
@import '../includes/lib';
|
||||
|
||||
// The basis for all buttons on mozilla.org
|
||||
%base-button {
|
||||
@include font-size(18px);
|
||||
@include transition(background-color 100ms ease-in-out);
|
||||
background: none;
|
||||
border-radius: 4px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: .5em 36px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
|
||||
@media #{$mq-tablet} {
|
||||
@include font-size(20px);
|
||||
}
|
||||
|
||||
&: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 {
|
||||
@include base-button;
|
||||
@extend %base-button;
|
||||
background-color: $color-mozblue;
|
||||
border-color: darken($color-mozblue, 3%);
|
||||
color: $color-button-light;
|
||||
|
@ -22,7 +50,7 @@ a.button:visited {
|
|||
background-color: saturate(lighten($color-mozblue, 5%), 10%);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
&.button-dark {
|
||||
background-color: $color-button-dark;
|
||||
border-color: darken($color-button-dark, 3%);
|
||||
color: $color-button-light;
|
||||
|
@ -33,7 +61,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
&.green {
|
||||
&.button-green {
|
||||
background-color: $color-button-green;
|
||||
border-color: darken($color-button-green, 3%);
|
||||
color: $color-button-light;
|
||||
|
@ -44,7 +72,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
&.red {
|
||||
&.button-red {
|
||||
background-color: $color-mozred;
|
||||
border-color: darken($color-mozred, 3%);
|
||||
color: $color-button-light;
|
||||
|
@ -54,7 +82,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
&.orange {
|
||||
&.button-orange {
|
||||
background-color: $color-button-orange;
|
||||
border-color: darken($color-button-orange, 3%);
|
||||
color: $color-button-light;
|
||||
|
@ -67,14 +95,14 @@ a.button:visited {
|
|||
}
|
||||
|
||||
// Hollow buttons, especially when used in forms
|
||||
.button.hollow,
|
||||
button.button.hollow,
|
||||
a.button.hollow:link,
|
||||
a.button.hollow:visited,
|
||||
.button.button-hollow,
|
||||
button.button.button-hollow,
|
||||
a.button.button-hollow:link,
|
||||
a.button.button-hollow:visited,
|
||||
button.form-button,
|
||||
input[type="submit"].form-button,
|
||||
input[type='button'].form-button {
|
||||
@include base-button;
|
||||
input[type='button'].form-button {
|
||||
@extend %base-button;
|
||||
background-color: transparent;
|
||||
border-color: $color-mozblue;
|
||||
color: $color-mozblue;
|
||||
|
@ -86,7 +114,7 @@ input[type='button'].form-button {
|
|||
color: saturate(lighten($color-mozblue, 5%), 10%);
|
||||
}
|
||||
|
||||
&.light {
|
||||
&.button-light {
|
||||
color: $color-button-light;
|
||||
border-color: $color-button-light;
|
||||
|
||||
|
@ -98,7 +126,7 @@ input[type='button'].form-button {
|
|||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
&.button-dark {
|
||||
color: $color-button-dark;
|
||||
border-color: $color-button-dark;
|
||||
|
||||
|
@ -110,7 +138,7 @@ input[type='button'].form-button {
|
|||
}
|
||||
}
|
||||
|
||||
&.red {
|
||||
&.button-red {
|
||||
color: $color-mozred;
|
||||
border-color: $color-mozred;
|
||||
|
||||
|
|
|
@ -27,18 +27,18 @@
|
|||
@mozOrangeHover: #f5894f;
|
||||
@mozOrangeBorder: #e55525;
|
||||
|
||||
/* the basis for all buttons on bedrock */
|
||||
.base-button {
|
||||
position: relative;
|
||||
.inline-block;
|
||||
background: none;
|
||||
padding: (@baseLine / 2) 36px;
|
||||
border-radius: 4px;
|
||||
// the basis for all buttons on bedrock
|
||||
.base-button() {
|
||||
.font-size(20px);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-shadow: none;
|
||||
.inline-block;
|
||||
.transition(background-color .1s ease-in-out);
|
||||
background: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: (@baseLine / 2) 36px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
|
||||
@media only screen and (max-width: @breakMobileLandscape) {
|
||||
.font-size(18px);
|
||||
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* buttons used for forms or where a button element makes semantic sense */
|
||||
// buttons used for forms or where a button element makes semantic sense
|
||||
input[type="submit"].form-button,
|
||||
button.form-button {
|
||||
.base-button;
|
||||
|
@ -69,7 +69,7 @@ button.form-button {
|
|||
border-color: @mozBlueHover;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
&.button-dark {
|
||||
color: @mozDark;
|
||||
border-color: @mozDark;
|
||||
|
||||
|
@ -80,7 +80,7 @@ button.form-button {
|
|||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
&.button-light {
|
||||
color: @light;
|
||||
border-color: @light;
|
||||
|
||||
|
@ -91,11 +91,11 @@ button.form-button {
|
|||
}
|
||||
}
|
||||
|
||||
&.general {
|
||||
&.button-general {
|
||||
.font-size(@largeFontSize);
|
||||
}
|
||||
|
||||
&.red {
|
||||
&.button-red {
|
||||
background-color: @mozRed;
|
||||
color: @light;
|
||||
border: 2px solid @mozRedBorder;
|
||||
|
@ -107,7 +107,7 @@ button.form-button {
|
|||
}
|
||||
}
|
||||
|
||||
/* All buttons not in a form context such as CTA and download buttons */
|
||||
// All buttons not in a form context such as CTA and download buttons
|
||||
.button,
|
||||
button.button,
|
||||
.blueprint .button,
|
||||
|
@ -124,7 +124,7 @@ a.button:visited {
|
|||
color: @light;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
&.button-dark {
|
||||
background-color: @mozDark;
|
||||
color: @light;
|
||||
border-color: @mozDarkBorder;
|
||||
|
@ -135,7 +135,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
&.green {
|
||||
&.button-green {
|
||||
background-color: @mozGreen;
|
||||
color: @light;
|
||||
border: 2px solid @mozGreenBorder;
|
||||
|
@ -146,7 +146,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
&.red {
|
||||
&.button-red {
|
||||
background-color: @mozRed;
|
||||
color: @light;
|
||||
border: 2px solid @mozRedBorder;
|
||||
|
@ -157,7 +157,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
&.orange {
|
||||
&.button-orange {
|
||||
background-color: @mozOrange;
|
||||
color: @light;
|
||||
border: 2px solid @mozOrangeBorder;
|
||||
|
@ -168,7 +168,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
&.transparent-light {
|
||||
&.button-transparent-light {
|
||||
background-color: transparent;
|
||||
color: @light;
|
||||
border: 2px solid @light;
|
||||
|
@ -180,7 +180,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
/* privacy policy link that accompany most download buttons */
|
||||
// privacy policy link that accompany most download buttons
|
||||
.fx-privacy-link {
|
||||
display: block;
|
||||
.font-size(@largeFontSize);
|
||||
|
@ -226,7 +226,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
/* fxfamilynav overrides */
|
||||
// fxfamilynav overrides
|
||||
.fxfamilynav-cta-wrapper {
|
||||
.button,
|
||||
a.button:link,
|
||||
|
@ -236,7 +236,7 @@ a.button:visited {
|
|||
}
|
||||
}
|
||||
|
||||
/* download button and related containers specific */
|
||||
// download button and related containers specific
|
||||
ul.download-list {
|
||||
list-style-type: none;
|
||||
margin-bottom: 10px;
|
||||
|
@ -297,17 +297,19 @@ ul.download-list {
|
|||
}
|
||||
}
|
||||
|
||||
/* Product download buttons */
|
||||
.download-button .ios-download,
|
||||
.download-button .linux-arm-download,
|
||||
.download-button .unrecognized-download,
|
||||
.download-button .unsupported-download,
|
||||
.download-button .unsupported-download-osx,
|
||||
.download-button .nojs-download {
|
||||
display: none;
|
||||
// Product download buttons
|
||||
.download-button {
|
||||
.ios-download,
|
||||
.linux-arm-download,
|
||||
.unrecognized-download,
|
||||
.unsupported-download,
|
||||
.unsupported-download-osx,
|
||||
.nojs-download {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* OS detection */
|
||||
// OS detection
|
||||
.download-button .os_winsha1,
|
||||
.download-button .os_win64,
|
||||
.download-button .os_linux,
|
||||
|
@ -385,7 +387,7 @@ ul.download-list {
|
|||
}
|
||||
}
|
||||
|
||||
/* Android architecture detection */
|
||||
// Android architecture detection
|
||||
.download-button .download-list .os_android.api-9,
|
||||
.download-button .download-list .os_android.x86,
|
||||
.download-button .download-other.os_android .api-15,
|
||||
|
@ -406,7 +408,7 @@ ul.download-list {
|
|||
display: inline !important;
|
||||
}
|
||||
|
||||
/* IE on Windows XP, Server 2003, Vista need sha-1 button */
|
||||
// IE on Windows XP, Server 2003, Vista need sha-1 button
|
||||
.windows.sha-1 .download-button .os_win {
|
||||
display: none !important;
|
||||
}
|
||||
|
@ -415,7 +417,7 @@ ul.download-list {
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
/* l10n download button tweaks */
|
||||
// l10n download button tweaks
|
||||
html[lang="ml"] {
|
||||
.button {
|
||||
padding: 10px 16px;
|
||||
|
|
|
@ -14,9 +14,9 @@
|
|||
});
|
||||
}
|
||||
|
||||
Mozilla.HighlightTarget.init('.button.dark');
|
||||
Mozilla.HighlightTarget.init('.button.button-dark');
|
||||
|
||||
$('.button.dark').on('highlight-target', function() {
|
||||
$('.button.button-dark').on('highlight-target', function() {
|
||||
$shield.addClass('blocked');
|
||||
});
|
||||
|
||||
|
|
|
@ -23,9 +23,9 @@ Mozilla.HkTwWhatsNew = (function($) {
|
|||
function _enableDefaultContent() {
|
||||
_$shield = $('#tracking-protection-animation');
|
||||
|
||||
Mozilla.HighlightTarget.init('.button.dark');
|
||||
Mozilla.HighlightTarget.init('.button.button-dark');
|
||||
|
||||
$('.button.dark').on('highlight-target', function() {
|
||||
$('.button.button-dark').on('highlight-target', function() {
|
||||
_$shield.addClass('blocked');
|
||||
});
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ var featuredPluginsTmpl = '<li class="featured-plugin">' +
|
|||
'</p>' +
|
||||
'<p class="plugin-actions">' +
|
||||
'{{#outdated}}' +
|
||||
'<a href="{{ url }}" class="action-link button orange" target="_blank" rel="noopener noreferrer" data-name="{{plugin_name}}" data-status="{{status}}">{{button_txt}}</a>' +
|
||||
'<a href="{{ url }}" class="action-link button button-orange" target="_blank" rel="noopener noreferrer" data-name="{{plugin_name}}" data-status="{{status}}">{{button_txt}}</a>' +
|
||||
'{{/outdated}}' +
|
||||
'{{#vulnerability_url}}' +
|
||||
'<a class="vulnerability-link-txt" href="{{ vulnerability_url }}" target="_blank" rel="noopener noreferrer">{{ vulnerability_link_txt }}</a></td>' +
|
||||
|
@ -29,7 +29,7 @@ var otherPluginsTmpl = '<tr><th scope="row">' +
|
|||
'<td><div class="meta-status {{status}}">{{plugin_status}}</div><div class="plugin_version">v. {{ plugin_version }}</div></td>' +
|
||||
'{{#outdated}}' +
|
||||
'<td class="action">' +
|
||||
'<a href="{{ url }}" class="action-link button orange" target="_blank" rel="noopener noreferrer" data-name="{{plugin_name}}" data-status="{{status}}">{{button_txt}}</a>' +
|
||||
'<a href="{{ url }}" class="action-link button button-orange" target="_blank" rel="noopener noreferrer" data-name="{{plugin_name}}" data-status="{{status}}">{{button_txt}}</a>' +
|
||||
'{{#vulnerability_url}}' +
|
||||
'<a class="vulnerability-link-txt" href="{{ vulnerability_url }}" target="_blank" rel="noopener noreferrer">{{ vulnerability_link_txt }}</a></td>' +
|
||||
'{{/vulnerability_url}}' +
|
||||
|
|
Загрузка…
Ссылка в новой задаче