Added FF styling. Closes visionmedia#13

shim0mura · Feb 4, 2012 · 264e115 · 264e115
1 parent 1119ccb
commit 264e115
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 33 deletions.
diff --git a/build/ui.css b/build/ui.css
@@ -26,7 +26,7 @@
 }
 
 #dialog.modal {
-  -webkit-box-shadow: 0 1px 8px 0 black;
+  box-shadow: 0 1px 8px 0 black;
 }
 
 /* close */
@@ -58,6 +58,7 @@
 
 #dialog.slide {
   -webkit-transition: opacity 300ms, top 300ms;
+  -moz-transition: opacity 300ms, top 300ms;
 }
 
 #dialog.slide.hide {
@@ -69,6 +70,7 @@
 
 #dialog.fade {
   -webkit-transition: opacity 300ms;
+  -moz-transition: opacity 300ms;
 }
 
 #dialog.fade.hide {
@@ -79,11 +81,14 @@
 
 #dialog.scale {
   -webkit-transition: -webkit-transform 300ms;
+  -moz-transition: -moz-transform 300ms;
   -webkit-transform: scale(1);
+  -moz-transform: scale(1);
 }
 
 #dialog.scale.hide {
   -webkit-transform: scale(0);
+  -moz-transform: scale(0);
 }#overlay {
   position: fixed;
   top: 0;
@@ -92,7 +97,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,.75);
-  -webkit-transition: opacity 300ms;
+  transition: opacity 300ms;
   z-index: 500;
 }
 
@@ -104,7 +109,7 @@
   padding: 5px;
   text-align: right;
   background: #fafafa;
-  -webkit-box-shadow: inset 0 1px 0 white;
+  box-shadow: inset 0 1px 0 white;
 }.color-picker canvas {
   border: 1px solid #888;
   cursor: crosshair;
@@ -184,6 +189,7 @@
 
 .notification.slide {
   -webkit-transition: opacity 300ms, top 300ms;
+  -moz-transition: opacity 300ms, top 300ms;
 }
 
 .notification.slide.hide {
@@ -195,6 +201,7 @@
 
 .notification.fade {
   -webkit-transition: opacity 300ms;
+  -moz-transition: opacity 300ms;
 }
 
 .notification.fade.hide {
@@ -205,11 +212,14 @@
 
 .notification.scale {
   -webkit-transition: -webkit-transform 300ms;
+  -moz-transition: -moz-transform 300ms;
   -webkit-transform: scale(1);
+  -moz-transform: scale(1);
 }
 
 .notification.scale.hide {
   -webkit-transform: scale(0);
+  -moz-transform: scale(0);
 }#context-menu {
   display: none;
   position: absolute;
@@ -242,25 +252,28 @@
   background: #f1faff;
 }
 
-/* from: http://desandro.github.com/3d-webkit-transforms */
+/* from: http://desandro.github.com/3dtransforms */
 
 .card {
   width: 200px;
   height: 260px;
   position: relative;
-  -webkit-perspective: 800;
+  perspective: 800;
 }
 
 .card .wrapper {
   width: 100%;
   height: 100%;
   position: absolute;
   -webkit-transform-style: preserve-3d;
-  -webkit-transition: -webkit-transform 500ms ease-in-out;
+  -moz-transform-style: preserve-3d;
+  -webkit-transition: transform 500ms ease-in-out;
+  -moz-transition: transform 500ms ease-in-out;
   border: 1px solid #eee;
   border-bottom-color: #cacaca;
-  -webkit-border-radius: 3px;
+  border-radius: 3px;
   -webkit-box-shadow: inset 0 -1px 0 0 white, 0 1px 4px 0 #ddd;
+  -moz-box-shadow: inset 0 -1px 0 0 white, 0 1px 4px 0 #ddd;
 }
 
 .card .face {
@@ -269,22 +282,27 @@
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
 }
 
 .card .back {
   -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
 }
 
 .card.flipped .wrapper {
   -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
 }
 
 /* sideflip effect */
 
 .card.sideflip .wrapper {
   -webkit-transform-origin: right center;
+  -moz-transform-origin: right center;
 }
 
 .card.sideflip.flipped .wrapper {
   -webkit-transform: translateX(-100%) rotateY(180deg);
+  -moz-transform: translateX(-100%) rotateY(180deg);
 }
diff --git a/docs/style.css b/docs/style.css
@@ -48,6 +48,7 @@ body {
 #dialog .actions button.main {
   padding: 5px 15px;
   background: -webkit-linear-gradient(top, #fff 20%, #eee);
+  background: -moz-linear-gradient(top, #fff 20%, #eee);
   border: 1px solid #eee;
   border-bottom-color: #cacaca;
   border-radius: 3px;
@@ -56,25 +57,33 @@ body {
 #dialog .actions button.main:hover {
   text-decoration: none;
   background: -webkit-linear-gradient(top, #fff 50%, #eee);
+  background: -moz-linear-gradient(top, #fff 50%, #eee);
 }
 #dialog .actions button.main:active {
   background: -webkit-linear-gradient(bottom, #fff 20%, #eee);
+  background: -moz-linear-gradient(bottom, #fff 20%, #eee);
 }
 #context-menu {
   font-size: 12px;
   -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
   -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1), 0 2px 6px 0 rgba(0,0,0,0.2);
 }
 #context-menu li:first-child a {
   -webkit-border-radius: 5px 5px 0 0;
+  -moz-border-radius: 5px 5px 0 0;
 }
 #context-menu li:last-child a {
   -webkit-border-radius: 0 0 5px 5px;
+  -moz-border-radius: 0 0 5px 5px;
 }
 .notification {
   border-bottom-color: #cacaca;
   -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
   -webkit-box-shadow: 0 1px 4px 0 #ddd;
+  -moz-box-shadow: 0 1px 4px 0 #ddd;
 }
 #wrapper > section {
   margin: 30px 0;

diff --git a/lib/components/card/card.css b/lib/components/card/card.css
@@ -12,36 +12,44 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  transform-style: preserve-3d;
-  transition: transform 500ms ease-in-out;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -webkit-transition: transform 500ms ease-in-out;
+  -moz-transition: transform 500ms ease-in-out;
   border: 1px solid #eee;
   border-bottom-color: #cacaca;
   border-radius: 3px;
-  box-shadow: inset 0 -1px 0 0 white, 0 1px 4px 0 #ddd;
+  -webkit-box-shadow: inset 0 -1px 0 0 white, 0 1px 4px 0 #ddd;
+  -moz-box-shadow: inset 0 -1px 0 0 white, 0 1px 4px 0 #ddd;
 }
 
 .card .face {
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
 }
 
 .card .back {
-  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
 }
 
 .card.flipped .wrapper {
-  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
 }
 
 /* sideflip effect */
 
 .card.sideflip .wrapper {
-  transform-origin: right center;
+  -webkit-transform-origin: right center;
+  -moz-transform-origin: right center;
 }
 
 .card.sideflip.flipped .wrapper {
-  transform: translateX(-100%) rotateY(180deg);
+  -webkit-transform: translateX(-100%) rotateY(180deg);
+  -moz-transform: translateX(-100%) rotateY(180deg);
 }
diff --git a/lib/components/dialog/dialog.css b/lib/components/dialog/dialog.css
@@ -57,7 +57,8 @@
 /* slide */
 
 #dialog.slide {
-  transition: opacity 300ms, top 300ms;
+  -webkit-transition: opacity 300ms, top 300ms;
+  -moz-transition: opacity 300ms, top 300ms;
 }
 
 #dialog.slide.hide {
@@ -68,7 +69,8 @@
 /* fade */
 
 #dialog.fade {
-  transition: opacity 300ms;
+  -webkit-transition: opacity 300ms;
+  -moz-transition: opacity 300ms;
 }
 
 #dialog.fade.hide {
@@ -78,10 +80,13 @@
 /* scale */
 
 #dialog.scale {
-  transition: transform 300ms;
-  transform: scale(1);
+  -webkit-transition: -webkit-transform 300ms;
+  -moz-transition: -moz-transform 300ms;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
 }
 
 #dialog.scale.hide {
-  transform: scale(0);
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
 }
diff --git a/lib/components/notification/notification.css b/lib/components/notification/notification.css
@@ -72,7 +72,8 @@
 /* slide */
 
 .notification.slide {
-  transition: opacity 300ms, top 300ms;
+  -webkit-transition: opacity 300ms, top 300ms;
+  -moz-transition: opacity 300ms, top 300ms;
 }
 
 .notification.slide.hide {
@@ -83,7 +84,8 @@
 /* fade */
 
 .notification.fade {
-  transition: opacity 300ms;
+  -webkit-transition: opacity 300ms;
+  -moz-transition: opacity 300ms;
 }
 
 .notification.fade.hide {
@@ -93,10 +95,13 @@
 /* scale */
 
 .notification.scale {
-  transition: transform 300ms;
-  transform: scale(1);
+  -webkit-transition: -webkit-transform 300ms;
+  -moz-transition: -moz-transform 300ms;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
 }
 
 .notification.scale.hide {
-  transform: scale(0);
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
 }
diff --git a/support/build.js b/support/build.js
@@ -74,14 +74,6 @@ function build(name, fn) {
   var css = path.join(lib, name, name + '.css');
   if (path.existsSync(css)) {
     read(css, function(css){
-      css = css
-        .replace(/perspective/g, '-webkit-perspective')
-        .replace(/transform/g, '-webkit-transform')
-        .replace(/transition/g, '-webkit-transition')
-        .replace(/box-shadow/g, '-webkit-box-shadow')
-        .replace(/border-radius/g, '-webkit-border-radius')
-        .replace(/backface-visibility/g, '-webkit-backface-visibility')
-        .replace(/linear-gradient/g, '-webkit-linear-gradient');
       append('build/ui.css', css);
     });
   }