Merge remote branch 'mozilla/bug-809486-styleguide-firefoxos'

mozilla · Dec 18, 2012 · 434ad88 · 434ad88
2 parents dc20182 + 4333142
commit 434ad88
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 1 deletion.
diff --git a/apps/styleguide/templates/styleguide/products/firefox-os-icons.html b/apps/styleguide/templates/styleguide/products/firefox-os-icons.html
@@ -189,4 +189,40 @@ <h2>Examples</h2>
   </div>
 </section>
 
+<section id="downloads">
+  <div class="intro">
+    <h3>Download</h3>
+    <p>Getting started templates</p>
+  </div>
+  <div class="download-group" id="icon-circle">
+    <p>Icon (circle)</p>
+    <ul class="button-list">
+      <li><a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PSD/MozillaFXOSIconTemplate1.psd" class="button-sand">PSD</a></li><li>
+      <a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PNG/MozillaFXOSIconTemplate1.png" class="button-sand">PNG</a></li><li>
+      <a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PNG/MozillaFXOSIconTemplate1_overlay.png" class="button-sand">PNG (overlay)</a></li>
+    </ul>
+  </div>
+  <div class="download-group" id="icon-rounded">
+    <p>Icon (rounded)</p>
+    <ul class="button-list">
+      <li><a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PSD/MozillaFXOSIconTemplate2.psd" class="button-sand">PSD</a></li><li>
+      <a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PNG/MozillaFXOSIconTemplate2.png" class="button-sand">PNG</a></li>
+    </ul>
+  </div>
+  <div class="download-group" id="icon-square">
+    <p>Icon (square)</p>
+    <ul class="button-list">
+      <li><a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PSD/MozillaFXOSIconTemplate3.psd" class="button-sand">PSD</a></li><li>
+      <a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PNG/MozillaFXOSIconTemplate3.png" class="button-sand">PNG</a></li>
+    </ul>
+  </div>
+  <div class="download-group" id="icon-grid">
+    <p>Icon grid</p>
+    <ul class="button-list">
+      <li><a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PSD/MozillaFXOSIconGrid.psd" class="button-sand">PSD</a></li><li>
+      <a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/Icon%20App%20Templates/PNG/MozillaFXOSIconGrid.png" class="button-sand">PNG</a></li>
+    </ul>
+  </div>
+</section>
+
 {% endblock %}
diff --git a/media/css/sandstone/buttons.less b/media/css/sandstone/buttons.less
@@ -190,7 +190,6 @@
                 &:hover,
                 &:focus {
                     .button-hover-box-shadow();
-                    color: @linkBlueHover;
                 }
             }
         }
@@ -203,6 +202,48 @@
     }
 }
 
+.dark {
+    .button-sand,
+    .button-sand:link,
+    .button-sand:visited {
+        @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
+                  1px  0   0 0 rgba(255,255,255,0.2) inset,
+                 -1px  0   0 0 rgba(255,255,255,0.2) inset,
+                  0   -2px 0 0 rgba(0,0,0,0.1)       inset;
+        .box-shadow(@shadow);
+        &:hover,
+        &:focus {
+            .button-hover-box-shadow(rgba(255,255,255,0.2));
+            color: @linkBlue;
+        }
+    }
+    .button-list {
+        li {
+            .button-sand {
+                @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
+                         -1px  0   0 0 rgba(255,255,255,0.2) inset,
+                          0   -2px 0 0 rgba(0,0,0,0.1)       inset;
+                .box-shadow(@shadow);
+            }
+            &:first-child {
+                .button-sand {
+                    @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
+                              1px  0   0 0 rgba(255,255,255,0.2) inset,
+                             -1px  0   0 0 rgba(255,255,255,0.2) inset,
+                              0   -2px 0 0 rgba(0,0,0,0.1)       inset;
+                    .box-shadow(@shadow);
+                    &:hover,
+                    &:focus {
+                        .button-hover-box-shadow(rgba(255,255,255,0.2));
+                        color: @linkBlue;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
 
 // Product download buttons
 

diff --git a/media/css/styleguide/products-firefox-os.less b/media/css/styleguide/products-firefox-os.less
@@ -73,6 +73,21 @@
             margin: (@baseLine / 2) auto;
         }
     }
+
+    #downloads {
+        .intro {
+            .span_guide(12);
+        }
+        .download-group {
+            .span_guide(2);
+            p {
+                margin-bottom: 0;
+            }
+        }
+        #icon-circle {
+            .span_guide(4);
+        }
+    }
 }
 
 /* }}} */
diff --git a/media/css/styleguide/styleguide.less b/media/css/styleguide/styleguide.less
@@ -261,6 +261,7 @@ h1 {
 /* }}} */
 /* {{{ Dark theme */
 
+.dark.sand,
 .dark.sand #outer-wrapper {
     background-color: #272e33;
     background-image: url('/media/img/sandstone/grain.png');
@@ -315,6 +316,9 @@ body.dark {
     #colophon {
         background: transparent;
         color: @darkThemeText;
+        .footer-logo {
+            .offset_guide(1);
+        }
     }
 }