Fix field-horizontal

This commit is contained in:
Tom Hubrecht 2021-06-10 15:25:10 +02:00
parent 4fc17958c2
commit 6aa269c2a5
3 changed files with 71 additions and 80 deletions

View file

@ -3608,63 +3608,57 @@ a.tag:hover {
.field.is-grouped.is-grouped-multiline:not(:last-child) { .field.is-grouped.is-grouped-multiline:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
} }
@media screen and (max-width: 768px) { .field.is-horizontal {
.field.is-horizontal { display: flex;
display: flex;
}
} }
.field-label {
margin-bottom: 0.5rem;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
margin-right: 1.5rem;
text-align: right;
}
.field-label .label { .field-label .label {
font-size: inherit; font-size: inherit;
} }
@media screen and (max-width: 768px) { .field-label.is-small {
.field-label { font-size: 0.75rem;
margin-bottom: 0.5rem; padding-top: 0.375em;
flex-basis: 0; }
flex-grow: 1; .field-label.is-normal {
flex-shrink: 0; padding-top: 0.375em;
margin-right: 1.5rem; }
text-align: right; .field-label.is-medium {
} font-size: 1.25rem;
.field-label.is-small { padding-top: 0.375em;
font-size: 0.75rem; }
padding-top: 0.375em; .field-label.is-large {
} font-size: 1.5rem;
.field-label.is-normal { padding-top: 0.375em;
padding-top: 0.375em;
}
.field-label.is-medium {
font-size: 1.25rem;
padding-top: 0.375em;
}
.field-label.is-large {
font-size: 1.5rem;
padding-top: 0.375em;
}
} }
.field-body {
display: flex;
flex-basis: 0;
flex-grow: 5;
flex-shrink: 1;
}
.field-body .field .field { .field-body .field .field {
margin-bottom: 0; margin-bottom: 0;
} }
@media screen and (max-width: 768px) { .field-body .field {
.field-body { margin-bottom: 0;
display: flex; }
flex-basis: 0; .field-body > .field {
flex-grow: 5; flex-shrink: 1;
flex-shrink: 1; }
} .field-body > .field:not(.is-narrow) {
.field-body .field { flex-grow: 1;
margin-bottom: 0; }
} .field-body > .field:not(:last-child) {
.field-body > .field { margin-right: 0.75rem;
flex-shrink: 1;
}
.field-body > .field:not(.is-narrow) {
flex-grow: 1;
}
.field-body > .field:not(:last-child) {
margin-right: 0.75rem;
}
} }
.control { .control {

File diff suppressed because one or more lines are too long

View file

@ -117,47 +117,44 @@ $label-colors: $form-colors !default
&:not(:last-child) &:not(:last-child)
margin-bottom: 0 margin-bottom: 0
&.is-horizontal &.is-horizontal
+mobile display: flex
display: flex
.field-label .field-label
.label .label
font-size: inherit font-size: inherit
+mobile margin-bottom: 0.5rem
margin-bottom: 0.5rem flex-basis: 0
flex-basis: 0 flex-grow: 1
flex-grow: 1 flex-shrink: 0
flex-shrink: 0 +ltr-property("margin", 1.5rem)
+ltr-property("margin", 1.5rem) text-align: right
text-align: right &.is-small
&.is-small font-size: $size-small
font-size: $size-small padding-top: 0.375em
padding-top: 0.375em &.is-normal
&.is-normal padding-top: 0.375em
padding-top: 0.375em &.is-medium
&.is-medium font-size: $size-medium
font-size: $size-medium padding-top: 0.375em
padding-top: 0.375em &.is-large
&.is-large font-size: $size-large
font-size: $size-large padding-top: 0.375em
padding-top: 0.375em
.field-body .field-body
.field .field .field .field
margin-bottom: 0 margin-bottom: 0
+mobile display: flex
display: flex flex-basis: 0
flex-basis: 0 flex-grow: 5
flex-grow: 5 flex-shrink: 1
.field
margin-bottom: 0
& > .field
flex-shrink: 1 flex-shrink: 1
.field &:not(.is-narrow)
margin-bottom: 0 flex-grow: 1
& > .field &:not(:last-child)
flex-shrink: 1 +ltr-property("margin", 0.75rem)
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
+ltr-property("margin", 0.75rem)
.control .control
box-sizing: border-box box-sizing: border-box