a4a1fbc14d
new gulp setup including new npm packages new file structure moved all development files to source/ used files are in build/ now
195 lines
2.2 KiB
SCSS
195 lines
2.2 KiB
SCSS
// Form basics
|
|
// -----------------------------------------------------------------------------
|
|
|
|
form {
|
|
|
|
}
|
|
|
|
fieldset {
|
|
margin: $high_margin;
|
|
padding: $basic_space;
|
|
border: $basic_border;
|
|
}
|
|
|
|
legend {
|
|
@extend %basic;
|
|
padding: 0 $half_space;
|
|
}
|
|
|
|
|
|
|
|
// Common
|
|
// -----------------------------------------------------------------------------
|
|
input, button, textarea {
|
|
margin: $io_margin;
|
|
|
|
&[disabled="disabled"],
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
label {
|
|
@extend %basic;
|
|
|
|
input {
|
|
margin-left: $basic_space;
|
|
}
|
|
}
|
|
|
|
input {
|
|
color: $basic_io_font_color;
|
|
|
|
&[disabled="disabled"],
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
@each $input in $basic_input_list, textarea {
|
|
#{$input} {
|
|
@extend %basic_mono;
|
|
border: $basic_io_border;
|
|
padding: $half_space;
|
|
background-color: $basic_io_back_color;
|
|
|
|
&:hover {
|
|
background-color: $basic_highlight_color;
|
|
}
|
|
|
|
&[readonly="readonly"],
|
|
&[readonly] {
|
|
border-color: darken($basic_io_border_color, 30%);
|
|
background-color: darken($basic_io_back_color, 30%);
|
|
}
|
|
|
|
&[disabled="disabled"],
|
|
&[disabled] {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $input in $basic_input_list {
|
|
|
|
#{$input} {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
@each $input in $basic_button_list {
|
|
#{$input} {
|
|
padding: $basic_padding;
|
|
}
|
|
}
|
|
|
|
label + input,
|
|
.input__label_right {
|
|
margin: 0 $basic_space;
|
|
}
|
|
|
|
.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
|
|
// -----------------------------------------------------------------------------
|
|
|
|
textarea {
|
|
|
|
}
|
|
|
|
button {
|
|
|
|
}
|
|
|
|
select {
|
|
|
|
}
|
|
|
|
datalist {
|
|
|
|
}
|
|
|
|
optgroup {
|
|
|
|
}
|
|
|
|
option {
|
|
|
|
}
|
|
|
|
output {
|
|
|
|
}
|
|
|
|
progress {
|
|
|
|
}
|
|
|
|
meter {
|
|
|
|
}
|
|
|
|
|
|
|
|
// Interactive elements
|
|
// -----------------------------------------------------------------------------
|
|
|
|
details {
|
|
|
|
}
|
|
|
|
summary {
|
|
|
|
}
|
|
|
|
menu {
|
|
|
|
}
|
|
|
|
menuitem {
|
|
|
|
}
|
|
|
|
dialog {
|
|
|
|
}
|
|
|
|
|
|
|
|
// Canvas
|
|
// -----------------------------------------------------------------------------
|
|
|
|
canvas {
|
|
|
|
}
|