@guyn-style/forms v0.1.0-alpha.13

Forms

<div class="html-example">
	<form>
		<h4>Basic information</h4>
		<div class="input-text">
			<input type="text" />
			<label>Name</label>
		</div>
		<div class="input-text">
			<input type="email" />
			<label>E-mail</label>
		</div>
		<div class="input-text">
			<input type="email" />
			<label>E-mail</label>
		</div>
		<h4>Do you like this?</h4>
		<div class="input-switch">
			<input type="checkbox" id="input-switch-test1" />
			<label for="input-switch-test1">Yeah</label>
		</div>
		<h4>What grade would you give this form?</h4>
		<div class="input-range">
			<input type="range" min="0" max="50" />
			<label>With min/max</label>
		</div>
		<h4>Yes?</h4>
		<div class="input-checkbox">
			<input type="checkbox" id="input-check-test1" />
			<label for="input-check-test1">Sure!</label>
		</div>
		<h4>More?</h4>
		<div class="input-radio">
			<input type="radio" name="radio1" id="input-radio-test1" />
			<label for="input-radio-test1">Yes</label>
		</div>
		<div class="input-radio">
			<input type="radio" name="radio1" id="input-radio-test2" />
			<label for="input-radio-test2">No</label>
		</div>
	</form>
</div>

Checkbox & Radio

The Checkbox and radio inputs are quite similar, thats why you can style them in the same matter.

Code Example

<div class="input-checkbox-element">
	<input id="my-checkbox" type="checkbox" />
	<label for="my-checkbox">Should this be checked?</label>
</div>

Make sure you have a wrapper and an input with directly after that the label.

.input-checkbox-element {
	@include input-checkbox();
}

Styling

Mixins

There are several mixins to target different parts of an element.

Input Range

The range slider is a quite hard to style element. With the mixin this will be a lot easier and it will keep it all its normal behaviour.

Mixins

input-range-container

Create all elements for a container of the range slider with its defaults.

.element {
	@include input-range-container();
}

input-range

Default include for range slider, all range sliders within element will be styled.

<div class="input-range">
	<input type="range" min="0" max="100" id="my-range-slider" />
	<label for="my-range-slider">My range slider</label>
</div>

.element {
	@include input-range();
}

Or give a class or the range slider, in this way the mixins can be used anywhere but will only target the specific range slider with given class.

@include input-range(".my-range-slider");

input-range-input

Only targets the input of the range slider

.element {
	@include input-range();
}

input-range-input

Targets the label which comes after the Range slider

.element {
	@include input-range();
}

input-range-track

If there are any property which you want to set on the track only, you can use the input-range-track mixin.

@include input-range-track {
	opacity: 0.5;
	&:hover {
		background-color: red;
	}
}

input-range-thumb

If there are any property which you want to set on the track only, you can use the input-range-thumb mixin.

@include input-range-thumb {
	&:hover {
		transform: scale(1.2);
	}
}

Styling the Range slider

There is some default styling which can easily be overwritten. This can be done using CSS custom properties or defining sass variables before you use the mixin.

Switch

Just a simple yes or no on a field can be done with a switch

<div class="input-switch">
	<input type="checkbox" id="input-switch-test1" />
	<label for="input-switch-test1">Yeah</label>
</div>

body {
	@include input-switch-container(".input-switch");
}

Styling variables

Input Text

Styling input fields can be a pain, but Guyn makes it a little easier without losing all control. The only thing necessary is just to keep up with a simple buildup.

Simple Example

<section class="my-section">
	...
	<div class="input-text">
		<input type="text" id="my-input" placeholder="John Doe" />
		<label>Name</label>
	</div>
	...
</section>

.my-section {
	@include input-text-container(".input-text");
}

You don't have to be "unlogically" turning the input and the label around, but in order to give your field some extra interaction, this is necessary. If you don't you will just loose that. Just make sure to "unreverse" the container with $input-text-container-reverse: false; before the include.

Types

By default the mixin gives you the following types for inputs; email, tel, number, search, url, password, date, datetime-local, month, time and text. This can be adjusted by passing just the type you want, or a list of types to any of the mixins.

.my-section{
	// Target only input[type="text"]
	@include input-text-container('.input-container', 'text');

	// Target both input[type="text"] and input[type="email"]
	@include input-text-container('.input-container', ('text','email'));

	// Target all
	@include input-text-container('.input-container'));
}

Mixins

There is a whole set of mixins to style your elements.

Styling Variables