fieldset {
min-width: 0; padding: 0; margin: 0; border: 0;
}
.form {
.btn.btn-form { text-shadow: 0 1px 0 #fff; color: #333; background: linear-gradient(#ccd0d6, #adb2bb); border: 1px solid #ccc; box-shadow: none; font-size: 12px; font-weight: 400; padding: 0; overflow: hidden; > span { display: inline-block; padding: 2px 10px; background: linear-gradient(#f7f8fa, #eff1f4); } &:hover { transform: none; } &:focus { @include focus-outline; } } a { margin-top: 7px; display: block; font-size: 12px; } .form-header { padding: 16px 20px; box-shadow: inset 0 -1px #e3e8ee; } .form-content { padding: 16px 20px; } .form-heading { color: #1a1f36; font-size: 16px; font-weight: 500; line-height: 26px; } .form-heading-desc { color: #3c4257; font-size: 14px; line-height: 30px; } .field { margin-bottom: 15px; .label { vertical-align: top; display: inline-block; font-size: 14px; width: 160px; text-shadow: 0 1px 0 #fff; color: #555; } .control { display: inline-block; } } .form-footer { text-align: right; padding: 16px 20px; box-shadow: inset 0 1px #e3e8ee; } .hint { margin: 7px 0; }
}
.required {
&:after { display: inline-block; margin-left: 4px; content: '*'; color: #6772e5; font-size: 16px; transform: translateY(-2px); }
}
.form-inline {
display: flex; align-items: center; flex-flow: row wrap; .form-group { margin-bottom: 0; }
}
.hint {
font-size: 13px; display: block; color: #5469d4;
}
.hint.hint-danger {
color: #e03953; &:before { font-family: $beyond-icon-font-name; margin-right: 4px; display: inline-block; transform: translateY(1px); color: #e03953; @extend .icon-exclamation-triangle:before }
}
.form.form-vertical {
.field .label { color: #1a1f36; display: block; }
}
.form-group {
margin-bottom: 1rem;
}
label {
display: inline-block; margin-bottom: .5rem;
}
.col .form-control,
- class*=col-
-
.form-control {
width: 100%;
}
.form-control {
@extend %form-control; &::placeholder { color: #a9aebf; } padding: 5px 7px 6px; background-color: #fff; background-clip: padding-box; border-radius: 4px; box-shadow: 0 0 0 1px rgba(60, 66, 87, .16), 0 1px 1px 0 rgba(0, 0, 0, .12); transition: box-shadow .15s ease-in-out; &:focus { @include focus-outline; }
}
.form-control-plaintext {
@extend %form-control; height: 100%; padding: 6px 0; background-color: transparent;
}
.col-form-label-lg {
padding-top: calc(.5rem + 1px); padding-bottom: calc(.5rem + 1px); font-size: 1.25rem; line-height: 1.5;
} .col-form-label {
padding-top: calc(.375rem + 1px); padding-bottom: calc(.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.5;
} .col-form-label-sm {
padding-top: calc(.25rem + 1px); padding-bottom: calc(.25rem + 1px); font-size: .875rem; line-height: 1.5;
} .col-form-field {
display: flex; align-items: center; .form-check { transform: translateY(-2px); margin-bottom: 0; }
}
.form-control-lg {
padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem;
}
.form-control-sm {
padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem;
}
.form-control, .form-control-lg, .form-control-sm, .form-control-plaintext {
&.is-valid { box-shadow: 0 0 0 1px $txt-color-success; } &.is-invalid { box-shadow: 0 0 0 1px $txt-color-danger; } &:disabled { cursor: not-allowed; } &:disabled, &[readonly] { color: #111; background-color: #e9ecef; }
} .form-control-plaintext {
&[readonly] { background: transparent; }
}
.valid-feedback, .invalid-feedback {
font-size: 80%; margin-top: .35rem; &:before { font-family: $beyond-icon-font-name; display: inline-block; margin-right: 4px; transform: translateY(1px); }
}
.valid-feedback {
color: $txt-color-success; &:before { color: $txt-color-success; @extend .icon-check:before; }
}
.invalid-feedback {
color: $txt-color-danger; &:before { color: $txt-color-danger; @extend .icon-exclamation-triangle:before; }
}
.form-txt {
display: block; margin-top: .25rem;
}
.form-check-label {
margin-bottom: 0;
}
.form-check.form-check-inline {
display: inline-flex; align-items: center; padding-left: 0; margin-right: .75rem; .checkbox, .radio { transform: translateY(0); } .checkbox + span, .radio + span { position: relative; margin-left: 7px; }
}
.form-check {
margin-bottom: 1rem; display: block; padding: 6px 0; cursor: pointer; margin-right: 25px; vertical-align: middle; color: #3c4257; font-size: 14px; .checkbox + span, .radio + span { position: relative; margin-left: 4px; } .checkbox .icon-checkbox { transform: translateY(-1px); } &.disabled { color: #6c757d; cursor: not-allowed; .checkbox { @extend %checkbox-disabled; } .radio { @extend %radio-disabled; } } span.is-valid { color: $txt-color-success; } span.is-invalid { color: $txt-color-danger; }
}
.form-row {
@extend %row; margin-left: -5px; margin-right: -5px;
} .form-row > .col, .form-row > [class*=col-] {
padding-left: 5px; padding-right: 15px;
}
.form-control-file {
display: block; width: 100%;
}
input {
line-height: 1;
}
.input-group {
position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; > .form-control { flex: 1 1 0%; } .invalid-feedback { flex-basis: 100%; }
}
.input-group-text {
display: flex; align-items: center; padding: .25rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 0; box-shadow: 0 0 0 1px rgba(60, 66, 87, .16), 0 1px 1px 0 rgba(0, 0, 0, .12); border-radius: .25rem;
}
.input-group-prepend {
margin-right: -1px;
} .input-group-append {
margin-left: -1px;
}
.input-group > .form-control:not(:last-child) {
border-top-right-radius: 0; border-bottom-right-radius: 0; z-index: 1;
} .input-group > .form-control:not(:first-child) {
border-top-left-radius: 0; border-bottom-left-radius: 0;
}
@media (min-width: $screen-sm) {
.form-inline { .form-control { width: auto; } .input-group { width: auto; } .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0; } label { margin-bottom: 0; } }
}