hippie-style/elements/_interactive.scss

@use "sass:color";

@use "../global/config";
@use "../global/typography";

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



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

}

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

label,
p {
	input, button, textarea, select {
		margin: 0 config.$space_basic;
	}
}

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

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

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

input, button, textarea, select {
	margin: config.$margin_inline;

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

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

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

// TODO: Move to io_module
.input_io, .button_io, .io_textarea, .io_select {
	margin: config.$margin_io;
}

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

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

	&[readonly="readonly"],
	&[readonly] {
		background-color: color.scale(config.$color_back_io, $lightness: -(config.$color_diff_double));
	}

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

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

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

.input_io, .io_textarea {
	border: config.$border_io;

	&[readonly="readonly"],
	&[readonly] {
		border-color: color.scale(config.$color_border_io, $lightness: -(config.$color_diff_double));
	}

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

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

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

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

}

.button_io {
	@extend %basic;
	border: config.$width_border_io solid config.$color_border_button;
	padding: config.$padding_basic;
	color: config.$color_text_button;
	background-color: config.$color_back_button;
	user-select: none;

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

	&[disabled="disabled"],
	&[disabled] {
		border-color: transparent;
		color: color.scale(config.$color_text_button, $lightness: config.$color_diff_double);

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

.button_clear {
	@extend %basic;
	padding: 0;
	border: 0;
	background-color: transparent;

	&:active,
	&:focus {
		background-color: transparent;
	}

	&:hover {
		background-color: config.$color_action_basic;
	}
}

// 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 {

}