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,23 +55,27 @@ export default class CreatePlaylistModal extends React.Component{
 						</div>
 
 						<div className="field checkbox white">
-							<span className="label">Options</span>
+							<div className="label">
-							<label>
+								Options
-								<input 
+							</div>
-									type="checkbox"
+							<div className="input">
-									name="is_public"
+								<label>
-									checked={ this.state.is_public }
+									<input 
-									onChange={ e => this.setState({ is_public: !this.state.is_public })} />
+										type="checkbox"
-								<span className="label">Public</span>
+										name="is_public"
-							</label>
+										checked={ this.state.is_public }
-							<label>
+										onChange={ e => this.setState({ is_public: !this.state.is_public })} />
-								<input 
+									<span className="label">Public</span>
-									type="checkbox"
+								</label>
-									name="is_collaborative"
+								<label>
-									checked={ this.state.is_collaborative }
+									<input 
-									onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
+										type="checkbox"
-								<span className="label">Collaborative</span>
+										name="is_collaborative"
-							</label>
+										checked={ this.state.is_collaborative }
+										onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
+									<span className="label">Collaborative</span>
+								</label>
+							</div>
 						</div>
 					</div>
 				)
@@ -98,25 +102,29 @@ 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">
-						<label>
+							Provider
-							<input 
+						</div>
-								type="radio"
+						<div className="input">
-								name="scheme"
+							<label>
-								value="spotify"
+								<input 
-								checked={ this.state.scheme == 'spotify' }
+									type="radio"
-								onChange={ e => this.setState({ scheme: e.target.value })} />
+									name="scheme"
-							<span className="label">Spotify</span>
+									value="spotify"
-						</label>
+									checked={ this.state.scheme == 'spotify' }
-						<label>
+									onChange={ e => this.setState({ scheme: e.target.value })} />
-							<input 
+								<span className="label">Spotify</span>
-								type="radio"
+							</label>
-								name="scheme"
+							<label>
-								value="m3u"
+								<input 
-								checked={ this.state.scheme == 'm3u' }
+									type="radio"
-								onChange={ e => this.setState({ scheme: e.target.value })} />
+									name="scheme"
-							<span className="label">Mopidy</span>
+									value="m3u"
-						</label>
+									checked={ this.state.scheme == 'm3u' }
+									onChange={ e => this.setState({ scheme: e.target.value })} />
+								<span className="label">Mopidy</span>
+							</label>
+						</div>
 					</div>
 					
 					{this.renderFields()}

src/scss/components/_icon.scss

@@ -48,19 +48,18 @@ $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;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-	display: inline-block;
 
-	/* Better Font Rendering =========== */
+    font-family: 'iris' !important;
-	-webkit-font-smoothing: antialiased;
+    speak: none;
-	-moz-osx-font-smoothing: grayscale;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    display: inline-block;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-back:before {
@@ -175,18 +174,19 @@ $icon-websocket: \e920;
 **/
 
 @font-face {
-  font-family: 'Material Icons';
+    font-family: 'Material Icons';
-  font-style: normal;
+    font-style: normal;
-  font-weight: 400;;
+    font-weight: 400;;
-  src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
+    src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
-  src: local('Material Icons'),
+    src: local('Material Icons'),
-    local('MaterialIcons-Regular'),
+      local('MaterialIcons-Regular'),
-    url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
+      url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
-    url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
+      url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
-    url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
+      url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
 }
 
 .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;
 	}