Modal inputs

mopidy_iris/static/index.html

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

src/js/components/Modal/CreatePlaylistModal.js

@@ -55,7 +55,10 @@ export default class CreatePlaylistModal extends React.Component{
 						</div>
 
 						<div className="field checkbox white">
-							<span className="label">Options</span>
+							<div className="label">
+								Options
+							</div>
+							<div className="input">
 								<label>
 									<input 
 										type="checkbox"
@@ -74,6 +77,7 @@ export default class CreatePlaylistModal extends React.Component{
 								</label>
 							</div>
 						</div>
+					</div>
 				)
 
 			default:
@@ -98,7 +102,10 @@ export default class CreatePlaylistModal extends React.Component{
 				<form onSubmit={(e) => this.createPlaylist(e)}>
 
 					<div className="field radio white">
-						<span className="label">Provider</span>
+						<div className="label">
+							Provider
+						</div>
+						<div className="input">
 							<label>
 								<input 
 									type="radio"
@@ -118,6 +125,7 @@ export default class CreatePlaylistModal extends React.Component{
 								<span className="label">Mopidy</span>
 							</label>
 						</div>
+					</div>
 					
 					{this.renderFields()}
 

src/scss/components/_icon.scss

@@ -48,7 +48,8 @@ $icon-stop: \e91f;
 $icon-websocket: \e920;
 
 [class^="icon-"], [class*=" icon-"] {
-	/* use !important to prevent issues with browser extensions that change fonts */
+    @include noselect();
+
     font-family: 'iris' !important;
     speak: none;
     font-style: normal;
@@ -57,8 +58,6 @@ $icon-websocket: \e920;
     text-transform: none;
     line-height: 1;
     display: inline-block;
-
-	/* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -187,6 +186,7 @@ $icon-websocket: \e920;
 }
 
 .material-icon {
+    @include noselect();
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
@@ -200,15 +200,8 @@ $icon-websocket: \e920;
     vertical-align: bottom;
     font-size: 1.3em;
     margin-bottom: 0.1em;
-
-    /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;
-
-    /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
-
-    /* Support for IE. */
     font-feature-settings: 'liga';
 }

src/scss/components/_lists.scss

@@ -53,7 +53,7 @@
 			}
 		}
 
-		.source {
+		.icon.source {
 			color: $mid_grey;
 			position: absolute;
 			top: 16px;

src/scss/components/_modal.scss

@@ -68,6 +68,9 @@
 						pointer-events: none;
 						padding: 0;
 					}
+					& > .input {
+						padding-top: 0;
+					}
 				}
 
 				&.text {

src/scss/components/_playback-controls.scss

@@ -83,6 +83,7 @@
 
 	.control {
 		@include animate();
+		@include noselect();
 		color: $white;
 		cursor: pointer;
 		padding: 10px 6px;

src/scss/global/_forms.scss

@@ -60,7 +60,7 @@ input[type="radio"]{
 		height: 6px;
 	    border-radius: 50%;
 		position: absolute;
-		top: 12px;
+		top: 11px;
 		left: 7px;
 		background: $white;
 	}