Fix field-horizontal
This commit is contained in:
parent
4fc17958c2
commit
6aa269c2a5
3 changed files with 71 additions and 80 deletions
|
@ -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
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue