Parsing className

mopidy_iris/static/app.css

@@ -3245,7 +3245,7 @@ input[type="submit"] {
     display: inline-block;
     float: none;
     width: auto;
-    padding: 5px 5px 5px 26px;
+    padding: 5px 5px 5px 28px;
     position: relative;
     cursor: pointer; }
   .field.radio input + .label:before {
@@ -3263,19 +3263,21 @@ input[type="submit"] {
     box-shadow: inset 0px 0px 0px 4px #222222; }
   .field.checkbox input + .label:before {
     font-family: "Material Icons";
-    font-size: 8px;
+    font-size: 14px;
-    content: ' ';
+    content: '';
-    color: #a3a19f;
+    color: #FFFFFF;
+    background: #383734;
     display: inline-block;
-    width: 11px;
+    padding: 0.2em;
-    height: 11px;
+    height: 1.1em;
-    padding: 3px 0 0 3px;
+    width: 1.1em;
-    border: 2px solid #a3a19f;
+    text-align: center;
     position: absolute;
-    top: 5px;
+    top: 3px;
-    left: 0; }
+    left: 0;
+    border-radius: 3px; }
   .field.checkbox input:checked + .label:before {
-    content: 'check'; }
+    content: '\E5CA'; }
   .field.range {
     position: relative; }
     .field.range .input-range {
@@ -3484,11 +3486,11 @@ input[type="submit"] {
         color: inherit;
         border-bottom: 1px solid #454440 !important; }
         #context-menu .liner > span button .icon,
-        #context-menu .liner > span button .fa,
+        #context-menu .liner > span button .icon,
+        #context-menu .liner > span .button .icon,
         #context-menu .liner > span .button .icon,
-        #context-menu .liner > span .button .fa,
         #context-menu .liner > span .dropdown-field .icon,
-        #context-menu .liner > span .dropdown-field .fa {
+        #context-menu .liner > span .dropdown-field .icon {
           display: none; }
         .notouch #context-menu .liner > span button:hover, .notouch
         #context-menu .liner > span .button:hover, .notouch
@@ -3517,7 +3519,7 @@ input[type="submit"] {
             padding: 3px 5px;
             border-radius: 0;
             opacity: 0.6; }
-            #context-menu .liner > span .dropdown-field .options .option .fa {
+            #context-menu .liner > span .dropdown-field .options .option .icon {
               display: inline-block;
               position: relative;
               padding-right: 5px;
@@ -5163,7 +5165,7 @@ aside {
       z-index: -2; }
     .tiles .tile.thumbnail-wrapper:before {
       display: none; }
-  .tiles.artist-stats .tile .content .fa {
+  .tiles.artist-stats .tile .content .icon {
     display: block;
     position: absolute;
     top: 50%;
@@ -5205,7 +5207,7 @@ aside {
   @media (max-width: 350px) {
     .tiles.artist-stats .tile .text {
       font-size: 14px; }
-      .tiles.artist-stats .tile .text .fa {
+      .tiles.artist-stats .tile .text .icon {
         font-size: 28px;
         margin-top: -12px; } }
 
@@ -5216,7 +5218,7 @@ aside {
     position: absolute;
     top: -5px;
     right: 0; }
-    .grid-slider-wrapper .controls .fa {
+    .grid-slider-wrapper .controls .icon {
       display: inline-block;
       padding: 8px;
       margin-left: 2px;
@@ -5226,10 +5228,10 @@ aside {
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out; }
-      .grid-slider-wrapper .controls .fa[disabled] {
+      .grid-slider-wrapper .controls .icon[disabled] {
         opacity: 0.2;
         cursor: not-allowed; }
-      .grid-slider-wrapper .controls .fa:hover {
+      .grid-slider-wrapper .controls .icon:hover {
         opacity: 1; }
   .grid-slider-wrapper .grid-slider {
     position: relative;

mopidy_iris/static/index.html

@@ -77,7 +77,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1526847653";
+	var build = "1526978865";
 	var version = "3.18.0";
 
 	// Construct the script tag

src/js/components/Icon.js

@@ -22,7 +22,7 @@ export default class Icon extends React.Component{
 
 		switch (this.props.type){
 			case 'fontawesome':	
-				return <FontAwesome className="icon" type="fontawesome" name={this.props.name} onClick={e => this.handleClick(e)} />;
+				return <FontAwesome className={className} type="fontawesome" name={this.props.name} onClick={e => this.handleClick(e)} />;
 
 			default:
 				className += ' material-icon';		

src/scss/components/_context-menu.scss

@@ -173,7 +173,7 @@
 				border-bottom: 1px solid lighten($grey, 5%) !important;
 
 				.icon,
-				.fa {
+				.icon {
 					display: none;
 				}
 
@@ -212,7 +212,7 @@
 						border-radius: 0;
 						opacity: 0.6;
 
-						.fa {
+						.icon {
 							display: inline-block;
 							position: relative;
 							padding-right: 5px;

src/scss/components/_grid-slider.scss

@@ -8,7 +8,7 @@
 		top: -5px;
 		right: 0;
 
-		.fa {
+		.icon {
 			display: inline-block;
 			padding: 8px;
 			margin-left: 2px;

src/scss/components/_grid.scss

@@ -236,7 +236,7 @@
 
 		.tile {
 			.content {
-				.fa {
+				.icon {
 					display: block;
 					position: absolute;
 					top: 50%;
@@ -269,7 +269,7 @@
 			.tile {
 				.text {
 					font-size: 14px;
-					.fa {
+					.icon {
 						font-size: 28px;
 						margin-top: -12px;
 					}

src/scss/global/_forms.scss

@@ -280,7 +280,7 @@ input[type="submit"] {
 			display: inline-block;
 			float: none;
 			width: auto;
-			padding: 5px 5px 5px 26px;
+			padding: 5px 5px 5px 28px;
 			position: relative;
 			cursor: pointer;
 		}
@@ -308,21 +308,23 @@ input[type="submit"] {
 	&.checkbox {
 		input + .label:before {
 			font-family: "Material Icons";
-			font-size: 8px;
+			font-size: 14px;
-			content: ' ';
+			content: '';
-			color: $mid_grey;
+			color: $white;
+			background: $grey;
 			display: inline-block;
-			width: 11px;
+			padding: 0.2em;
-			height: 11px;
+			height: 1.1em;
-			padding: 3px 0 0 3px;
+			width: 1.1em;
-			border: 2px solid $mid_grey;
+			text-align: center;
 			position: absolute;
-			top: 5px;
+			top: 3px;
 			left: 0;
+			border-radius: 3px;
 		}
 
 		input:checked + .label:before {
-			content: 'check';
+			content: '\e5ca';
 		}
 	}