added current state from hippie main repo

commit state 175816
source/style/hippie

elements/_interactive.scss

@@ -0,0 +1,259 @@
+// 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 {
+
+}