navigation acp styling / checkboxes

public/less/admin/general/navigation.less

@@ -15,6 +15,13 @@
 		.drag-item {
 			cursor: move;
 			margin-right: 10px;
+			padding: 8px 10px;
+			margin-bottom: 5px;
+		}
+
+		p {
+			line-height: 20px;
+			min-height: 40px;
 		}
 	}
 

src/views/admin/general/navigation.tpl

@@ -1,9 +1,5 @@
 <div id="navigation">
 	<div class="col-lg-9">
-		<div class="panel panel-default">
-			<div class="panel-heading">Active Navigation</div>
-			<div class="panel-body">
-
 		<div class="clearfix">
 			<ul id="active-navigation" class="nav navbar-nav">
 				<!-- BEGIN navigation -->
@@ -68,27 +64,25 @@
 						</div>
 					</div>
 
-							<hr />
-
 					<strong>Properties:</strong>
 					<div class="checkbox">
-								<label>
+						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-									<input type="checkbox" name="property:adminOnly" <!-- IF enabled.properties.adminOnly -->checked<!-- ENDIF enabled.properties.adminOnly -->/> <strong>Only display to Admins</strong>
+							<input class="mdl-switch__input" type="checkbox" name="property:adminOnly" <!-- IF enabled.properties.adminOnly -->checked<!-- ENDIF enabled.properties.adminOnly -->/>
+							<span class="mdl-switch__label"><strong>Only display to Admins</strong></span>
 						</label>
 					</div>
 					<div class="checkbox">
-								<label>
+						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-									<input type="checkbox" name="property:loggedIn" <!-- IF enabled.properties.loggedIn -->checked<!-- ENDIF enabled.properties.loggedIn -->/> <strong>Only display to logged in users</strong>
+							<input class="mdl-switch__input" type="checkbox" name="property:loggedIn" <!-- IF enabled.properties.loggedIn -->checked<!-- ENDIF enabled.properties.loggedIn -->/> <span class="mdl-switch__label"><strong>Only display to logged in users</strong></span>
 						</label>
 					</div>
 					<div class="checkbox">
-								<label>
+						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-									<input type="checkbox" name="property:targetBlank" <!-- IF enabled.properties.targetBlank -->checked<!-- ENDIF enabled.properties.targetBlank -->/> <strong>Open in a new window</strong>
+							<input class="mdl-switch__input" type="checkbox" name="property:targetBlank" <!-- IF enabled.properties.targetBlank -->checked<!-- ENDIF enabled.properties.targetBlank -->/>
+							<span class="mdl-switch__label"><strong>Open in a new window</strong></span>
 						</label>
 					</div>
 
-
-							<hr />
 					<button class="btn btn-danger delete">Delete</button>
 					<!-- IF enabled.enabled -->
 					<button class="btn btn-warning toggle">Disable</button>
@@ -101,8 +95,6 @@
 			<!-- END enabled -->
 		</ul>
 	</div>
-		</div>
-	</div>
 
 	<div class="col-lg-3">
 		<div class="panel panel-default">
@@ -110,14 +102,16 @@
 			<div class="panel-body">
 				<ul id="available">
 					<li data-id="custom" class="clearfix">
-						<div data-id="custom" class="drag-item alert alert-warning pull-left">
+						<div data-id="custom" class="drag-item alert alert-success pull-left">
-							<i class="fa fa-fw fa-navicon"></i>
+							<i class="fa fa-fw fa-plus-circle"></i>
 						</div>
+						<p>
 							<strong>Custom Route</strong>
+						</p>
 					</li>
 					<!-- BEGIN available -->
 					<li data-id="@index" class="clearfix">
-						<div data-id="@index" class="drag-item alert <!-- IF available.core -->alert-info<!-- ELSE -->alert-success<!-- ENDIF available.core --> pull-left">
+						<div data-id="@index" class="drag-item alert <!-- IF available.core -->alert-warning<!-- ELSE -->alert-info<!-- ENDIF available.core --> pull-left">
 							<i class="fa fa-fw <!-- IF available.iconClass -->{available.iconClass}<!-- ELSE -->fa-navicon<!-- ENDIF available.iconClass -->"></i>
 						</div>
 						<p>