amikhalev/sprinklers3
1
1
Fork 0
Code Issues 9 Pull Requests 1 Releases Wiki Activity

Fixed DurationView wrapping

Browse Source
This commit is contained in:
Alex Mikhalev 2018-07-25 17:40:06 -06:00
parent 7a4adf4299
commit 1eff9b4267
2 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/styles/DurationView.scss
View File

@ -1,30 +1,49 @@
$durationInput-spacing: 1.0em;
.durationInputs { .durationInputs {
display: flex; display: flex;
// max-width: 100%;
justify-content: start;
flex-wrap: wrap; flex-wrap: wrap;
margin: -0.5em; margin: -$durationInput-spacing / 2;
&.inline { &.inline {
min-width: 30em; min-width: 20em;
.ui.input.durationInput {
>input {
width: 0 !important;
}
}
} }
} }
$durationInput-inputWidth: 5em; $durationInput-inputWidth: 4em;
$durationInput-labelWidth: 2.5em; $durationInput-labelWidth: 2.5em;
.ui.form .field .ui.input.durationInput { .ui.form .field .ui.input.durationInput {
margin: 0.5em; padding: $durationInput-spacing / 2;
flex: 1 0 ($durationInput-inputWidth + $durationInput-labelWidth); max-width: 100%;
width: auto;
flex-basis: auto;
flex-shrink: 0;
flex-grow: 1;
> input { > input {
flex: 1 0 $durationInput-inputWidth;
min-width: $durationInput-inputWidth; min-width: $durationInput-inputWidth;
width: 100%; width: auto;
flex-basis: $durationInput-inputWidth;
flex-grow: 1;
flex-shrink: 0;
} }
> .label { > .label {
min-width: $durationInput-labelWidth;
width: $durationInput-labelWidth; width: $durationInput-labelWidth;
flex: 0 0 $durationInput-labelWidth; flex: $durationInput-labelWidth;
flex-grow: 0;
flex-shrink: 0;
text-align: center; text-align: center;
} }
} }

2
app/styles/SectionChooser.scss
View File

@ -1,5 +1,5 @@
.sectionChooser { .sectionChooser {
.ui.selection.dropdown { .ui.selection.dropdown {
min-width: 12em; min-width: 14em;
} }
} }