Merge pull request #191 from byte-foundry/fix/Firefox-compat

Prototypo is looking better in Firefox already!

app/scripts/components/controls-tabs.components.jsx

@@ -20,12 +20,10 @@ export class ControlsTabs extends React.Component {
 			});
 
 			return (
-				<li className={classes}>
-					<span className={classes} id={iconId}
-						onClick={() => {
-							this.changeTab(name)
-						}} key={`${name}ControlsHeader`}>
-					</span>
+				<li className={classes} id={iconId}
+					onClick={() => {
+						this.changeTab(name)
+					}} key={`${name}ControlsHeader`}>
 					<div className="controls-tabs-icon-legend is-legend-active">{name}</div>
 				</li>
 			);

app/styles/components/controls-tabs.scss

@@ -23,22 +23,26 @@
 		height:72px;
 		float:left;
 		width:90px;
-		background: lighten($dark-grey, 2%) no-repeat center;
+		background-color: $medium-grey no-repeat center;
+		background-repeat: no-repeat;
+		background-position: 50% 50%;
+		filter: contrast(40%);
 		cursor: pointer;
 		position:relative;
 		border-right: $dark-grey 1px solid;
+		transition: background-color 300ms ease;
 
 		&.is-active, &:hover {
-			background-color:$green;
+			background-color: $green;
+			filter: contrast(100%);
 			border: none;
-			transition: all 300ms ease;
 			.controls-tabs-icon-legend {
 				display: none;
 			}
 		}
 
 		&-legend {
-			color: $medium-grey;
+			color: white;
 			position: absolute;
 			bottom: 5px;
 			text-align: center;
@@ -55,37 +59,24 @@
 			display: block;
 			width: 0;
 			height: 0;
-		}
 
-		&.is-active:after {
-			-webkit-transform: translate(35px, 8px);
 			transform: translate(35px, 8px);
 			border-left: 10px solid transparent;
 			border-right: 10px solid transparent;
 			border-top: 10px solid $green;
 		}
 	}
-
-	&-icon span {
-		background-color: $medium-grey;
-
-		&.is-active, &:hover {
-			background-color: white;
-		}
-	}
 }
 
+// TODO: ids are forbidden, get rid of 'em
 #Func {
-	-webkit-mask:  url('./images/func.svg') no-repeat 50% 50%;
-	mask: url('./images/func.svg') no-repeat 50% 50%;
+	background-image: url('./images/func.svg');
 }
 
 #Style {
-	-webkit-mask:  url('./images/style.svg') no-repeat 50% 50%;
-	mask: url('./images/style.svg') no-repeat 50% 50%;
+	background-image: url('./images/style.svg');
 }
 
 #Serif {
-	-webkit-mask:  url('./images/serif.svg') no-repeat 50% 50%;
-	mask: url('./images/serif.svg') no-repeat 50% 50%;
+	background-image: url('./images/serif.svg');
 }

app/styles/components/sliders.scss

@@ -17,8 +17,7 @@
 		margin-left: 0.8rem;
 		display: inline-block;
 		cursor: pointer;
-	//TODO(franz): integrate in theme
-		color: #7e7e7e;
+		color: $medium-grey;
 		transition: opacity 500ms ease;
 	}
 
@@ -34,8 +33,11 @@
 		background: none;
 		border: 0;
 		border-radius: 0;
-	//TODO(franz): integrate in theme
-		color: #7e7e7e;
+		color: $medium-grey;
+
+		// we'll use textfield appearance until we've figured out sth better
+		-moz-appearance: textfield;
+		-webkit-appearance: textfield;
 	}
 
 	&-controller {
@@ -82,7 +84,6 @@
 }
 
 .sliders {
-	//TODO(franz): integrate in theme
-	color:$white;
+	color: $white;
 	padding:1rem;
 }