Merge pull request #17725 from wilsonpage/bug/972137

Bug 972137 - [Camera] 1.4 Visual Design Settings Menu
mozilla-b2g · Mar 28, 2014 · 632c674 · 632c674
2 parents 9dd7fbd + d9e5ef6
commit 632c674
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/apps/camera/js/views/controls.js b/apps/camera/js/views/controls.js
@@ -53,10 +53,10 @@ module.exports = View.extend({
         '</div>' +
       '</div>' +
       '<div class="controls-right">' +
-        '<div class="mode-switch test-switch js-switch icon" name="switch">' +
+        '<div class="mode-switch test-switch js-switch" name="switch">' +
           '<div class="mode-icon icon rotates"></div>' +
           '<div class="selected-mode">' +
-            '<div class="selected-mode-icon rotates"></div>' +
+            '<div class="selected-mode-icon icon rotates"></div>' +
           '</div>' +
         '</div>' +
       '</div>';

diff --git a/apps/camera/style/controls.css b/apps/camera/style/controls.css
@@ -185,7 +185,7 @@
   line-height: 3.6rem;
 }
 
-.mode-switch .mode-icon:after {
+.mode-switch .mode-icon:before {
   content: "\e602";
   font-size: 2.1rem;
   color: #C7C7C7;
@@ -199,7 +199,7 @@
   left: 1.1rem;
 }
 
-.controls[mode=video] .mode-switch .mode-icon:after {
+.controls[mode=video] .mode-switch .mode-icon:before {
   content: "\e60f";
 }
 
@@ -227,7 +227,7 @@
 /** Selected Mode Icon
  ---------------------------------------------------------*/
 
-.mode-switch .selected-mode-icon:after {
+.mode-switch .selected-mode-icon:before {
   content: "\e60f";
   display: block;
   text-align: center;
@@ -240,7 +240,7 @@
  * mode=video
  */
 
-.controls[mode=video] .mode-switch .selected-mode-icon:after {
+.controls[mode=video] .mode-switch .selected-mode-icon:before {
   content: "\e602";
   color: #D92E2E;
 }
@@ -320,7 +320,7 @@
 /** Icon
  ---------------------------------------------------------*/
 
-.capture-button .center:after {
+.capture-button .center:before {
   display: block;
   position: absolute;
   width: 100%;
@@ -337,16 +337,16 @@
  * capture-active=true & mode=picture
  */
 
-.capture-button:active .center:after,
-[capture-active=true] .capture-button .center:after {
+.capture-button:active .center:before,
+[capture-active=true] .capture-button .center:before {
   color: white;
 }
 
 /**
  * mode=video
  */
 
-.controls[mode=video] .capture-button .center:after {
+.controls[mode=video] .capture-button .center:before {
   content: '';
   top: calc(50% - 1rem);
   left: calc(50% - 1rem);
@@ -361,8 +361,8 @@
  * mode=video & recording=true
  */
 
-.controls[mode=video] .capture-button:active .center:after,
-.controls[mode=video][capture-active=true] .capture-button .center:after {
+.controls[mode=video] .capture-button:active .center:before,
+.controls[mode=video][capture-active=true] .capture-button .center:before {
   border-radius: 25%;
   background-color: white;
 }
diff --git a/apps/camera/style/hud.css b/apps/camera/style/hud.css
@@ -58,13 +58,11 @@
   background-clip: padding-box; /* 1 */
   border: solid 2rem transparent; /* 1 */
   -moz-box-sizing: content-box; /* 1 */
-  transition: background-color 1s; /* 2 */
   color: #fff;
 }
 
 .hud_btn:active {
   background-color: #00b9df;
-  transition: none; /* 2 */
 }
 
 /** Camera Button

diff --git a/apps/camera/style/icons.css b/apps/camera/style/icons.css
@@ -9,7 +9,6 @@
 .icon,
 [class^="icon-"],
 [class*=" icon-"] {
-  font-family: 'gaia-camera';
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -21,6 +20,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon:before,
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+  font-family: 'gaia-camera';
+}
+
 .icon-timer:before {
   content: "\e607";
 }

diff --git a/apps/camera/style/setting-options.css b/apps/camera/style/setting-options.css
@@ -44,15 +44,22 @@
 /** Item
  ---------------------------------------------------------*/
 
+/**
+ * 1. We don't want borders to change
+ *    the size of the content-box.
+ */
+
 .setting-option {
   height: 7rem;
   margin: 0 1.5rem;
   padding: 0 1.5rem;
+  font-size: 1.6rem;
   line-height: 7rem;
-  font-size: 1.7rem;
+  font-weight: 500;
   border: solid 1px rgba(255,255,255,0.15);
   border-width: 1px 0 0;
   text-transform: uppercase;
+  box-sizing: content-box; /* 1 */
 }
 
 /**

diff --git a/apps/camera/style/setting.css b/apps/camera/style/setting.css
@@ -1,11 +1,17 @@
 
+/**
+ * 1. We don't want borders to change
+ *    the size of the content-box.
+ */
+
 .setting {
   display: flex;
   height: 7rem;
   align-items: center;
   margin: 0 1.5rem;
   border: solid 1px rgba(255,255,255,0.15);
   border-width: 1px 0 0;
+  box-sizing: content-box; /* 1 */
 }
 
 /**
@@ -33,17 +39,12 @@
   font-size: 3rem;
 }
 
-/** Text
- ---------------------------------------------------------*/
-
-.setting_text {}
-
 /** Title
  ---------------------------------------------------------*/
 
 .setting_title {
   font-size: 1.9rem;
-  margin-bottom: 0.7rem;
+  margin-bottom: 0.6rem;
   color: rgba(255,255,255,0.5);
   text-transform: capitalize;
 }
@@ -53,5 +54,6 @@
 
 .setting_value {
   font-size: 1.6rem;
+  font-weight: 500;
   text-transform: uppercase;
 }