FIX: form improvements
This commit is contained in:
parent
54bba8b4d7
commit
5c0c2cc12e
|
@ -14,6 +14,83 @@ input.checkbox {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Basic class definition at _ui.main.scss
|
||||||
|
*/
|
||||||
|
.field {
|
||||||
|
&.collapse {
|
||||||
|
display: none;
|
||||||
|
&.show {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.composite {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
&.row {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&.collapse {
|
||||||
|
display: none;
|
||||||
|
&.show {
|
||||||
|
display: block;
|
||||||
|
&.row {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.required {
|
||||||
|
&:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
content: '*';
|
||||||
|
color: $red;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.holder-error,
|
||||||
|
&.error {
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
border-color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
flex: 1 1 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middleColumn {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
}
|
||||||
|
|
||||||
|
.message,
|
||||||
|
.alert {
|
||||||
|
margin: 1rem 0;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-list {
|
.checkbox-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.form-stepped {
|
.form-stepped {
|
||||||
.step {
|
.step {
|
||||||
display: none;
|
display: none !important;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
display: block;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,6 +27,16 @@ img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.a {
|
.a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
|
@ -124,76 +134,16 @@ textarea,
|
||||||
margin-top: $field-gutter-height;
|
margin-top: $field-gutter-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Extra class definition at _ui.form.basics.scss
|
||||||
|
*/
|
||||||
.field {
|
.field {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
position: relative;
|
|
||||||
margin: $field-gutter-height 0;
|
margin: $field-gutter-height 0;
|
||||||
|
|
||||||
&.collapse {
|
|
||||||
display: none;
|
|
||||||
&.show {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.composite {
|
|
||||||
display: block;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
&.row {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
&.collapse {
|
|
||||||
display: none;
|
|
||||||
&.show {
|
|
||||||
display: block;
|
|
||||||
&.row {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.required {
|
|
||||||
&:after {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 2rem;
|
|
||||||
right: 0.5rem;
|
|
||||||
content: '*';
|
|
||||||
color: $red;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.holder-error,
|
|
||||||
&.error {
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
border-color: $red;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
color: $red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.left {
|
|
||||||
flex: 1 1 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.middleColumn {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
}
|
|
||||||
.bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// element col paddings
|
// element col paddings
|
||||||
.col-block {
|
.col-block {
|
||||||
padding-top: $col-block-gutter-height;
|
padding-top: $col-block-gutter-height;
|
||||||
|
|
Loading…
Reference in New Issue