Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added FF styling. Closes #13

  • Loading branch information...
commit 264e115bab9fd4e4fada1b9d293b35ccf6c627ef 1 parent 1119ccb
TJ Holowaychuk authored
32 build/ui.css
View
@@ -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,13 +252,13 @@
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 {
@@ -256,11 +266,14 @@
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);
}
9 docs/style.css
View
@@ -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;
24 lib/components/card/card.css
View
@@ -12,12 +12,15 @@
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 {
@@ -25,23 +28,28 @@
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);
}
15 lib/components/dialog/dialog.css
View
@@ -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);
}
15 lib/components/notification/notification.css
View
@@ -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);
}
8 support/build.js
View
@@ -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);
});
}
Please sign in to comment.
Something went wrong with that request. Please try again.