fix: made web form skeleton responsive
This commit is contained in:
parent
0889d9137f
commit
eb7dccaae2
2 changed files with 21 additions and 8 deletions
|
|
@ -117,11 +117,24 @@
|
|||
.web-form-skeleton {
|
||||
.box-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.box-container {
|
||||
width: 100%;
|
||||
padding: 0 var(--padding-sm);
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: var(--control-bg);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="web-form-skeleton">
|
||||
<div class="box-group">
|
||||
<div class="box-container">
|
||||
<div class="box-container col-sm-6">
|
||||
<div class="box box-label"></div>
|
||||
<div class="box box-area"></div>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="box-container col-sm-6">
|
||||
<div class="box box-label"></div>
|
||||
<div class="box box-area"></div>
|
||||
</div>
|
||||
|
|
@ -16,21 +16,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="box-group">
|
||||
<div class="box-container">
|
||||
<div class="box-container col-sm-6">
|
||||
<div class="box box-label"></div>
|
||||
<div class="box box-area"></div>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="box-container col-sm-6">
|
||||
<div class="box box-label"></div>
|
||||
<div class="box box-area"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-group">
|
||||
<div class="box-container">
|
||||
<div class="box-container col-sm-6">
|
||||
<div class="box box-label"></div>
|
||||
<div class="box box-area"></div>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="box-container col-sm-6">
|
||||
<div class="box box-label"></div>
|
||||
<div class="box box-area"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue