Switched arg layout to use flexbox instead of css grid

This commit is contained in:
n1474335 2023-03-09 17:31:46 +00:00
parent bd16378e23
commit cab83cae35
3 changed files with 40 additions and 57 deletions

View file

@ -27,17 +27,31 @@
}
.ingredients {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 14px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
column-gap: 14px;
row-gap: 0;
}
.ingredients > div {
grid-column: 1 / span 3;
.ing-very-wide {
flex: 4 400px;
}
.ingredients > div.inline {
grid-column: unset;
.ing-wide {
flex: 3 200px;
}
.ing-medium {
flex: 2 120px;
}
.ing-short {
flex: 1 80px;
}
.ing-flexible {
flex-grow: 1;
}
.ingredients .form-group {
@ -64,6 +78,11 @@ div.toggle-string {
flex: 1;
}
input.toggle-string {
border-top-right-radius: 0 !important;
height: 42px !important;
}
.operation [class^='bmd-label'],
.operation [class*=' bmd-label'] {
top: 13px !important;
@ -160,7 +179,7 @@ div.toggle-string {
}
.input-group .form-control {
border-top-left-radius: 4px !important;
border-top-left-radius: 4px;
}
.input-group-append button {