hippie-style/elements/_interactive.scss

// Forms
// -----------------------------------------------------------------------------
// form
// label
// input
// button
// select
// datalist
// optgroup
// option
// textarea
// output
// progress
// meter
// fieldset
// legend



// Form
// -----------------------------------------------------------------------------
form {

}

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

	input, button, textarea, select {
		margin-left: $space_basic;
	}
}

input + label {
	margin-left: $space_basic;
}

.label {
	line-height: 2.5;
}

.label > input,
.label > textarea,
.label > select {
	margin: 0 $space_basic;
}

// Input
// -----------------------------------------------------------------------------
input {
}

label + input {
	margin-left: $space_basic;
}

input, button, textarea, select {
	margin: $margin_io;

	&[disabled="disabled"],
	&[disabled] {
		cursor: not-allowed;
	}
}

td > input,
td > button,
td > select,
td > textarea {
	margin: 0;
}

@each $input in $io_input_list, textarea, select {
	#{$input} {
		@extend %basic_mono;
		line-height: 1;
	}
}

.io_input, .io_textarea, .io_select {
	padding: $space_half;
	color: $color_text_io;
	background-color: $color_back_io;

	&:hover {
		background-color: $color_highlight_basic;
	}

	&[readonly="readonly"],
	&[readonly] {
		background-color: darken($color_back_io, $color_diff_double);
	}

	&[disabled="disabled"],
	&[disabled] {
		&:hover {
			background-color: $color_back_io;
		}
	}
}

@each $input in $io_date_list {
	#{$input} {
		padding-top: 0;
		padding-bottom: 0;
	}
}

@each $input in $io_input_list, textarea {
	#{$input} {
		// border: $border_io;
	}
}

.io_input, .io_textarea {
	border: $border_io;

	&[readonly="readonly"],
	&[readonly] {
		border-color: darken($color_border_io, $color_diff_double);
	}

	&[disabled="disabled"],
	&[disabled] {
		border-color: transparent;
	}
}

// Fieldset
// -----------------------------------------------------------------------------
fieldset {
	margin: $margin_double;
	padding: $space_basic;
	border: $border_basic;
}

// Legend
// -----------------------------------------------------------------------------
legend {
	@extend %basic;
	padding: 0 $space_half;
}

// Button
// -----------------------------------------------------------------------------
button {

}

.io_button {
	@extend %basic_button;
	border: $width_border_io solid $color_border_button;
	padding: $padding_basic;
	color: $color_text_button;
	background-color: $color_back_button;

	&:hover {
		// border-color: #0059F6;
		border-color: transparent;
		color: white;
		background-color: $foxtrot_color;
	}

	&[disabled="disabled"],
	&[disabled] {
		border-color: transparent;
		color: lighten($color_text_button, $color_diff_double);

		&:hover {
			background-color: $color_back_button;
		}
	}
}

// Selection
// -----------------------------------------------------------------------------
select {
	border: none;
}

// Datalist
// -----------------------------------------------------------------------------
datalist {

}

// Options
// -----------------------------------------------------------------------------
optgroup {

}

option {

}

// Textarea
// -----------------------------------------------------------------------------
textarea {
}

.io_textarea {
	line-height: 1.2;
}

// Output
// -----------------------------------------------------------------------------
output {

}

// Progress
// -----------------------------------------------------------------------------
progress {

}

meter {

}



// Interactive elements
// -----------------------------------------------------------------------------
// details
// summary
// dialog



details {

}

summary {

}

dialog {

}



// Scripting
// -----------------------------------------------------------------------------
// script
// noscript
// template
// canvas



canvas {

}