fix: made web form skeleton responsive

This commit is contained in:
Shariq Ansari 2022-08-17 20:15:22 +05:30
parent 0889d9137f
commit eb7dccaae2
2 changed files with 21 additions and 8 deletions

View file

@ -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);

View file

@ -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>