Merge pull request #6 in BUDC/concorel-frontend from feature/CONCOREL…

…-81-apply-form-elements-styles to develop

* commit '47a65f548646c86bd92798c43f8646aba486701c':
  CONCOREL-81: Basic styles for inputs and checkboxes
  CONCOREL-81: Style default inputs and selects

gulp/media/dataurls.js

@@ -54,8 +54,8 @@ gulp.task(taskName, function(cb) {
 		.pipe(colorize({
 			colors: {
 				default: {
-					primary: '000000',
-					active: 'A4C400'
+					primary: '507387',
+					secondary: 'FFFFFF'
 				}
 
 				// Use: @include iconDataurl(FILENAME, "primary") and @include iconDataurl(FILENAME, "active")

source/modules/button/button.scss

@@ -78,8 +78,8 @@ input[type='submit'].button--secondary {
 
 	position: relative;
 
-	@include iconDataurl('arrow-link', $after: true);
 	&:after {
+		@include iconDataurlStyles('arrow-link')
 		content: '';
 		position: absolute;
 		opacity: 0;

source/modules/generalstyles/_form.scss

@@ -0,0 +1,144 @@
+// Label
+label {
+	display: block;
+	font-size: 14px;
+	margin-bottom: 5px;
+}
+
+// Text-based input
+
+input:not([type]),
+input[type=date],
+input[type=datetime-local],
+input[type=email],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=text],
+input[type=time],
+input[type=url],
+select,
+textarea {
+	appearance: none;
+	color: $colorMetallicBlue;
+	background-color: $colorPaleGrey;
+	border-radius: 5px;
+	border: 2px solid rgba($colorMetallicBlue, 0.5);
+	padding: 8px 12px;
+	margin-bottom: 5px;
+	font-weight: $fontWeightBlack;
+	transition: all 0.25s ease-in-out;
+
+	&:hover:enabled {
+		border-color: $colorMetallicBlue;
+
+	}
+
+	&:focus {
+		background-color: $colorWhite;
+	}
+}
+
+// Select
+select {
+	background-color: $colorWhite;
+
+	&:not([multiple]) {
+		$iconWidth: 10px;
+		$iconHeight: 7px;
+
+		padding-right: 12px + $iconWidth + 12px;
+		background: $colorWhite url('../media/icons/triangle-arrow.svg') right 13px center no-repeat;
+	  	background-size: $iconWidth $iconHeight;
+	  	appearance: none;
+	}
+
+	&::-ms-expand {
+		display: none;
+	}
+}
+
+// Radio buttons and checkboxes
+input[type="radio"],
+input[type="checkbox"] {
+	@include visuallyhidden;
+
+	$inputSize: 23px;
+
+	~ label {
+		display: block;
+		position: relative;
+		cursor: pointer;
+		vertical-align: middle;
+		padding-left: $inputSize + 10px;
+		line-height: $inputSize;
+
+		&:before,
+		&:after {
+			content: ' ';
+			display: block;
+			box-sizing: border-box;
+			position: absolute;
+			left: 0;
+			width: 23px;
+			height: 23px;
+			transition: all 0.25s ease-in-out;
+		}
+	}
+}
+
+input[type="radio"] {
+	~ label:before {
+		border-radius: 50%;
+		border: 2px solid rgba($colorMetallicBlue, 0.5);
+		background-color: $colorPaleGrey;
+	}
+
+	~ label:after {
+		width: 11px;
+		height: 11px;
+		top: 6px;
+		left: 6px;
+		transform: scale(0);
+	}
+}
+
+input[type="radio"]:checked {
+	~ label:before {
+		border-color: $colorMetallicBlue;
+	}
+
+	~ label:after {
+		border-radius: 50%;
+		background-color: $colorMetallicBlue;
+		transform: scale(1);
+	}
+}
+
+
+input[type="checkbox"] {
+	~ label:before {
+		border: 2px solid rgba($colorMetallicBlue, 0.5);
+		background-color: $colorPaleGrey;
+	}
+
+	~ label:after {
+		@include iconDataurlStyles('checkmark');
+		top: 5px;
+		left: 5px;
+		width: 13px;
+		height: 13px;
+		transform: scale(0);
+	}
+}
+
+input[type="checkbox"]:checked {
+	~ label:before {
+		border-color: $colorMetallicBlue;
+	}
+
+	~ label:after {
+		transform: scale(1);
+	}
+}

source/modules/generalstyles/generalstyles.scss

@@ -1,6 +1,7 @@
 @import '_headings';
 @import '_text';
 @import '_table';
+@import '_form';
 
 
 *:focus {

source/preview/styleguide/forms.hbs

@@ -38,10 +38,9 @@
 						<div><label>Password input</label> <input type="password" value="password"></div>
 						<div><label>Select field</label> <select><option>Option 01</option><option>Option 02</option></select></div>
 						<div><label>Multiple select field</label><select multiple size="5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option><option>Option 6</option><option>Option 7</option><option>Option 8</option><option>Option 9</option><option>Option 10</option></select></div>
-						<div><label>Radio input</label> <input type="radio" name="rad"></div>
-						<div><label>Checkbox input</label> <input type="checkbox"></div>
-						<div><label><input type="radio" name="rad"> Radio input</label></div>
-						<div><label><input type="checkbox"> Checkbox input</label></div>
+						<div><input type="radio" name="rad" id="rad-1"> <label for="rad-1">Radio input 1</label> </div>
+						<div><input type="radio" name="rad" id="rad-2"> <label for="rad-2">Radio input 2</label> </div>
+						<div><input type="checkbox" id="check-1"> <label for="check-1">Checkbox input</label></div>
 						<div><label>File input</label> <input type="file"></div>
 						<div><label>Textarea</label> <textarea cols="30" rows="5" >Textarea text</textarea></div>
 						<div><label>Color input</label> <input type="color" value="#000000"></div>