Alex Mikhalev
7 years ago
2 changed files with 28 additions and 9 deletions
@ -1,30 +1,49 @@
@@ -1,30 +1,49 @@
|
||||
$durationInput-spacing: 1.0em; |
||||
|
||||
.durationInputs { |
||||
display: flex; |
||||
// max-width: 100%; |
||||
justify-content: start; |
||||
flex-wrap: wrap; |
||||
margin: -0.5em; |
||||
margin: -$durationInput-spacing / 2; |
||||
|
||||
&.inline { |
||||
min-width: 30em; |
||||
min-width: 20em; |
||||
|
||||
.ui.input.durationInput { |
||||
>input { |
||||
width: 0 !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
$durationInput-inputWidth: 5em; |
||||
$durationInput-inputWidth: 4em; |
||||
$durationInput-labelWidth: 2.5em; |
||||
|
||||
.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 { |
||||
flex: 1 0 $durationInput-inputWidth; |
||||
min-width: $durationInput-inputWidth; |
||||
width: 100%; |
||||
width: auto; |
||||
flex-basis: $durationInput-inputWidth; |
||||
flex-grow: 1; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
> .label { |
||||
min-width: $durationInput-labelWidth; |
||||
width: $durationInput-labelWidth; |
||||
flex: 0 0 $durationInput-labelWidth; |
||||
flex: $durationInput-labelWidth; |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
Loading…
Reference in new issue