Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

[Bug 815180] Use the right Firefox download button

This button looks like the one in the Sandstone style guide. Which
doesn't provide code.
  • Loading branch information...
commit 0a99b2189779798d96927553152244d9bdde30ff 1 parent 6d4fa53
@mythmon mythmon authored
View
16 apps/products/templates/products/product.html
@@ -17,17 +17,17 @@ <h1 class="product-title cf">
</h1>
{% if product.slug == 'firefox' %}
- <div class="download-button">
- <a href="http://www.mozilla.org/firefox#desktop" class="button">
- <h2>{{ _('Firefox') }}</h2>
- {# L10n: The <br/> is wholely visual. It would be good to include a <br/> about half way through the translation. #}
- <span>{{ _('Free<br/> Download') }}</span>
- <i class="down-arrow"></i>
+ <div class="download-firefox">
+ <a href="http://www.mozilla.org/firefox#desktop" class="download-button">
+ <span class="download-content">
+ <span class="download-title">{{ _('Firefox') }}</span>
+ {{ _('Free Download') }}
+ </download>
</a>
<ul class="info">
- <li><a href="http://www.mozilla.org/legal/privacy/firefox">Privacy Policy</a></li>
- <li><a href="http://www.mozilla.org/en-US/firefox/notes">What's New</a></li>
<li><a href="http://www.mozilla.org/firefox/all.html">Systems and Languages</a></li>
+ <li><a href="http://www.mozilla.org/en-US/firefox/notes">What's New</a></li>
+ <li><a href="http://www.mozilla.org/legal/privacy/firefox">Privacy</a></li>
</ul>
</div>
{% endif %}
View
BIN  media/img/icons-sprite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/icons/firefox-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
75 media/less/products.less
@@ -10,45 +10,49 @@
margin: 0 8px 0 0;
}
-.download-button {
+.download-firefox {
position: absolute;
top: 0;
right: 0;
+ font-family: 'Open Sans', sans-serif;
- a.button {
- position: relative;
- top: 0;
+ .download-button {
+ height: 48px;
display: block;
.gradient(#81BC2E, #81BC2E, #659324);
- color: #fff;
- padding: 3px 15px;
- transition: top 0s;
- transition: all 0.5s;
.border-radius(5px);
.box-shadow(~"0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -2px 0 0 rgba(0, 0, 0, 0.3) inset");
+ line-height: 40px;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ transition: top 0s;
+ transition: all 0.5s;
- h2 {
- display: inline;
- font-family: 'MetaMedium', Arial, Helvetica, sans-serif;
- font-size: 2.5em;
- }
-
- span {
- display: inline-block;
- font-size: 0.8em;
- color: #DDD;
- margin-left: 15px;
- line-height: 1.1em;
- }
-
- i.down-arrow {
- display: inline-block;
- width: 32px;
- height: 32px;
- background: url('../img/icons-sprite.png') -42px -1897px no-repeat;
- position: absolute;
- top: 6px;
- right: 12px;
+ .download-content {
+ display: block;
+ background: url('../img/icons/firefox-small.png') left top no-repeat;
+ height: 52px;
+ margin-left: -25px;
+ padding: 0 20px 0 65px;
+ color: #B5E786;
+
+ .download-title {
+ display: inline-block;
+ font-family: georgia,"Bitstream Charter",serif;
+ font-size: 24px;
+ position: relative;
+ padding-right: 25px;
+ color: #fff;
+
+ &:after {
+ width: 32px;
+ height: 32px;
+ content: "";
+ background: url('../img/icons-sprite.png') -42px -1897px no-repeat;
+ position: absolute;
+ top: 5px;
+ right: -6px;
+ }
+ }
}
&:hover {
@@ -57,24 +61,27 @@
}
&:active {
- top: 1px;
.box-shadow(~"0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -1px 0 0 rgba(0, 0, 0, 0.3) inset, 0 12px 24px 2px #83C822 inset");
}
}
ul.info {
font-size: 0.7em;
- margin: 0;
+ margin: 4px 0 0 0;
padding: 0;
- font-family: 'Moz', Arial, Helvetica, sans-serif;
+ text-align: right;
li {
list-style: none;
display: inline;
+ a {
+ color: #999;
+ }
+
&:not(:first-child):before {
content: "|";
- color: #AAA;
+ color: #999;
padding-right: 3px;
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.