fix pinned

public/css/app.css

@@ -695,7 +695,7 @@ div.create .input {
   margin: 20px;
 }
 
-div.create .input label {
+div.create .input label:not(.switch) {
   width: 100%;
   font-size: 13px;
   color: #9094a5;
@@ -764,6 +764,81 @@ div.create .input input {
   margin-left: 20px;
 }
 
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+}
+
+/* Hide default HTML checkbox */
+
+.switch input {
+  display: none;
+}
+
+/* The slider */
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #4a556b;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  -webkit-box-shadow: 0 0 1px #2196F3;
+          box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(16px);
+  transform: translateX(16px);
+}
+
+/* Rounded sliders */
+
+.slider.round {
+  border-radius: 20px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+@-webkit-keyframes autofill {
+  to {
+    background: #f5f5f5;
+    color: #fff;
+  }
+}
+
+input:-webkit-autofill {
+  -webkit-animation-name: autofill;
+  -webkit-animation-fill-mode: both;
+}
+
 /*! Huebee v2.0.0
 http://huebee.buzz
 ---------------------------------------------- */

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/css/app.css": "/css/app.css?id=e84d63d3d2ba664d24a7",
+    "/css/app.css": "/css/app.css?id=5230540b4eebff9be644",
     "/js/app.js": "/js/app.js?id=aa9e426dc7b92d42d3b2"
 }

resources/assets/sass/_app.scss

@@ -364,7 +364,7 @@ div.create {
 	.input {
 		width: 260px;
 		margin: 20px;
-		label {
+		label:not(.switch) {
 			width: 100%;
 			font-size: 13px;
 			color: lighten($app-text, 40%);
@@ -421,4 +421,75 @@ div.create {
 	font-size: 11px;
 	color: #91a1b3;
 	margin-left: 20px;
-}
+}
+
+.switch {
+	position: relative;
+	display: inline-block;
+	width: 36px;
+	height: 20px;
+  }
+  
+  /* Hide default HTML checkbox */
+  .switch input {display:none;}
+  
+  /* The slider */
+  .slider {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: #4a556b;
+	-webkit-transition: .4s;
+	transition: .4s;
+  }
+  
+  .slider:before {
+	position: absolute;
+	content: "";
+	height: 14px;
+	width: 14px;
+	left: 3px;
+	bottom: 3px;
+	background-color: white;
+	-webkit-transition: .4s;
+	transition: .4s;
+  }
+  
+  input:checked + .slider {
+	background-color: #2196F3;
+  }
+  
+  input:focus + .slider {
+	box-shadow: 0 0 1px #2196F3;
+  }
+  
+  input:checked + .slider:before {
+	-webkit-transform: translateX(16px);
+	-ms-transform: translateX(16px);
+	transform: translateX(16px);
+  }
+  
+  /* Rounded sliders */
+  .slider.round {
+	border-radius: 20px;
+  }
+  
+  .slider.round:before {
+	border-radius: 50%;
+  }
+  
+  @-webkit-keyframes autofill {
+	  to {
+		  background:#f5f5f5;
+		  color:#fff;
+	  }
+  }
+  
+  input:-webkit-autofill {
+	  -webkit-animation-name: autofill;
+	  -webkit-animation-fill-mode: both;
+  }
+  

resources/views/items/form.blade.php

@@ -14,11 +14,11 @@
             </div>-->
 
             <div class="input">
-                <label>Application name</label>
+                <label>Application name *</label>
                 {!! Form::text('title', null, array('placeholder' => 'Title','class' => 'form-control')) !!}
             </div>
             <div class="input">
-                <label>Colour</label>
+                <label>Colour *</label>
                 {!! Form::text('colour', null, array('placeholder' => 'Hex Colour','class' => 'form-control color-picker')) !!}
             </div>
             <div class="input">
@@ -27,7 +27,7 @@
             </div>
             
             <div class="input">
-                <label>Icon *</label>
+                <label>Icon</label>
                 @if(isset($item->icon) && !empty($item->icon))
                 {{ asset('storage/'.$item->icon) }}
                 {!! Form::hidden('icon', $item->icon, ['class' => 'form-control']) !!}
@@ -36,16 +36,18 @@
                 
             </div>
 
-
-            <label class="switch">
-                <?php
-                $checked = false;
-                if(isset($item->pinned) && $item->pinned === 1) $checked = true;
-                $set_checked = ($checked) ? ' checked="checked"' : '';
-                ?>
-                <input type="checkbox" name="active" value="1"<?php echo $set_checked;?> />
-                <span class="slider round"></span>
-              </label>
+            <div class="input">
+                <label>Pinned</label>
+                <label class="switch">
+                    <?php
+                    $checked = false;
+                    if(isset($item->pinned) && $item->pinned === 1) $checked = true;
+                    $set_checked = ($checked) ? ' checked="checked"' : '';
+                    ?>
+                    <input type="checkbox" name="active" value="1"<?php echo $set_checked;?> />
+                    <span class="slider round"></span>
+                </label>
+            </div>
 
             
         </div>