tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 09:05:45 +00:00
Code Issues Projects Releases Wiki Activity

FIX: form improvements

Browse Source
This commit is contained in:
Tony Air 2020-07-02 18:44:55 +07:00
parent 54bba8b4d7
commit 5c0c2cc12e
3 changed files with 98 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/scss/_components/_ui.form.basics.scss
View File

@ -14,6 +14,83 @@ input.checkbox {
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 {
display: flex;
flex-wrap: wrap;

4
src/scss/_components/_ui.form.stepped.scss
View File

@ -1,9 +1,9 @@
.form-stepped {
.step {
display: none;
display: none !important;
&.active {
display: block;
display: flex !important;
}
}
}

78
src/scss/_components/_ui.main.scss
View File

@ -27,6 +27,16 @@ img {
max-width: 100%;
}
p {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.a {
cursor: pointer;
color: $link-color;
@ -124,76 +134,16 @@ textarea,
margin-top: $field-gutter-height;
}
/*
* Extra class definition at _ui.form.basics.scss
*/
.field {
position: relative;
display: flex;
flex-wrap: wrap;
position: relative;
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
.col-block {
padding-top: $col-block-gutter-height;