@ohu-mobile/core
Version:
110 lines (109 loc) • 2.34 kB
CSS
.ohu-form {
font-size: 0.42667rem;
}
.ohu-form-field {
box-sizing: border-box;
display: flex;
font-size: 0.42667rem;
min-height: 1.33333rem;
border: 0;
border-style: solid;
line-height: 1.17333rem;
background: #FFF;
}
.ohu-form-field.is-inline {
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-start;
padding: 0.08rem 0 0.08rem 0.42667rem;
border-color: #eee;
position: relative;
}
.ohu-form-field.is-inline::after {
content: "";
box-sizing: border-box;
position: absolute;
z-index: 1;
pointer-events: none;
border-style: inherit;
border-width: 1Px 0 0;
right: 0;
bottom: 0;
left: 0;
border-color: inherit;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.ohu-form-field.is-inline::after {
transform: scaleY(0.5);
transform-origin: center top;
}
}
.ohu-form-field.is-inline .ohu-form-field__control > :not(.ohu-input):not(.ohu-select) {
padding-left: 0.625em;
}
.ohu-form-field.is-inline .ohu-form-field__control__error {
font-size: 0.75em;
padding: 0 0.26667rem 0.26667rem 0.625em;
}
.ohu-form-field.is-block {
flex-flow: column wrap;
padding: 0 0.42667rem;
}
.ohu-form-field.is-block .ohu-form-field__label {
width: 100%;
}
.ohu-form-field.is-block .ohu-form-field__control {
padding: 0.16rem 0;
}
.ohu-form-field.is-block .ohu-form-field__control__error {
font-size: 0.875em;
padding: 0.26667rem 0;
}
.ohu-form-field.no-padding {
padding: 0;
}
.ohu-form-field__label {
flex-shrink: 0;
flex-grow: 0;
position: relative;
box-sizing: border-box;
color: #333;
font-size: 1em;
}
.ohu-form-field__label.is-left {
text-align: left;
}
.ohu-form-field__label.is-right {
text-align: right;
}
.ohu-form-field__label.is-center {
text-align: center;
}
.ohu-form-field__label.is-required::before {
content: "*";
position: absolute;
display: inline-block;
color: #ff2d31;
top: 0;
left: -0.5em;
font-size: 1.2em;
}
.ohu-form-field__control {
flex-grow: 1;
}
.ohu-form-field__control > .ohu-input, .ohu-form-field__control .ohu-select {
width: 100%;
}
.ohu-form-field__control.is-left {
text-align: left;
}
.ohu-form-field__control.is-right {
text-align: right;
}
.ohu-form-field__control.is-center {
text-align: center;
}
.ohu-form-field__control__error {
color: #ff2d31;
line-height: 1em;
}