Make button modifier classes more explicit

This commit is contained in:
Craig Cook 2016-12-23 14:34:17 -08:00
Родитель dd7718f983
Коммит 4e2399d275
51 изменённых файлов: 193 добавлений и 197 удалений

Просмотреть файл

@ -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&amp;utm_medium=referral&amp;utm_source=accounts-page&amp;utm_content=fx-{{ version }}&amp;entrypoint=accounts-page&amp;service=sync&amp;context=iframe&amp;style=chromeless&amp;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 Mozillas 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 worlds 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 Mozillas newsletter.'), button_class='light')
subtitle=_('Sign up for Mozillas 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=_('Whats 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=_('Whats 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 dont like the Mozilla developer newsletter, you can easily unsubscribe (but we think youll 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}}' +