hippie/elements/_interactive.scss

// Form basics
// -----------------------------------------------------------------------------

form {

}

fieldset {
	margin: $high_margin;
	padding: $basic_space;
	border: $basic_border;
}

legend {
	@extend %basic;
	padding: 0 $half_space;
}



// Common
// -----------------------------------------------------------------------------
label {
	@extend %basic;

	& + input {
		margin-left: $basic_space;
	}

	input + & {
		margin-left: $basic_space;
	}

	input {
		margin-left: $basic_space;
	}
}

input {

}

.label__table {
	display: table;

	input {
		display: table-cell;
	}
}

.input_default {

	label {
		@extend .label__table;
		margin: $half_space 0;

		input {
			padding: $half_space ($half_space + 1);
			border-style: solid;
			border-color: transparent;
			background-color: $basic_io_back_color;
			color: $basic_io_font_color;

			&:hover {
				background-color: $darkest_color;
				color: $brightest_color;
			}
		}
	}
}



// More
// -----------------------------------------------------------------------------

button {

}

select {

}

datalist {

}

optgroup {

}

option {

}

textarea {

}

output {

}

progress {

}

meter {

}



// Interactive elements
// -----------------------------------------------------------------------------

details {

}

summary {

}

menu {

}

menuitem {

}

dialog {

}



// Canvas
// -----------------------------------------------------------------------------

canvas {

}