Here is the code I have so far:
let burger = document.querySelector('.burger');
burger.addEventListener('click', function(e) {
burger.classList.toggle('active');
});
.settings-container .amd-app {
margin: auto;
padding: 10px;
background-color: white;
width: 575px;
height: 280px;
border-radius: 20px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label > input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label > input:checked i {
background: #1094fb;
}
label > input:checked i span {
color: #29316b;
}
label > input:checked i:after {
transform: translateX(25px);
}
body {
background: #708fd4;
}
.filter {
position: absolute;
}
.burger {
display: flex;
flex-direction: column;
filter: url(#gooeyness);
padding: 30px;
}
.rect {
background: black;
display: inline-block;
height: 32px;
margin-top: 40px;
transition: transform 500ms;
width: 200px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-51px) translateY(50px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(51px) translateY(-50px);
}
.close {
}
<div class="settings-container">
<div class="amd-app">
<div class="amd-intro">
<div class="close">
<svg class="filter" version="1.1">
<defs>
<filter id="gooeyness">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="gooeyness" />
<feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
</filter>
</defs>
</svg>
<div class="burger">
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
</div>
</div>
<hr>
</div>
<div class="amd-info text-center">
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>آموزش کارت حتی در صورت پاسخ صحیح</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>ضبط صدا در صورت استفاده از تشخیص گفتار</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>نمایش جلوه های ویژه ی صوتی و بصری</span>
</label>
</div>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
The issue is I'm unable to resize and position the close button at the top-right corner of the white panel...
If I do this every thing gets distorted!!
Here is a codepen: https://codepen.io/pixy-dixy/pen/MWvgxNM
Even when I try to resize the close button distortion occurs!!!
CodePudding user response：
You can absolutely position the button with relative positioning of the panel.
To resize, you can use the scale() CSS function and the transform-origin property.
let burger = document.querySelector('.burger');
burger.addEventListener('click', function(e) {
burger.classList.toggle('active');
});
.burger {
display: flex;
flex-direction: column;
filter: url(#gooeyness);
padding: 30px;
transform: scale(0.5);
transform-origin: 100% 0;
}
.settings-container .amd-app {
margin: auto;
padding: 10px;
background-color: white;
width: 575px;
height: 280px;
border-radius: 20px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.settings-container {
position: relative;
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label>input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label>input:checked i {
background: #1094fb;
}
label>input:checked i span {
color: #29316b;
}
label>input:checked i:after {
transform: translateX(25px);
}
body {
align-items: center;
background: #708fd4;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
position: absolute;
width: 100%;
}
.filter {
position: absolute;
}
.rect {
background: black;
display: inline-block;
height: 32px;
margin-top: 40px;
transition: transform 500ms;
width: 200px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-51px) translateY(50px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(51px) translateY(-50px);
}
.close {
position: absolute;
right: 0px;
top: 0px;
}
<div class="settings-container">
<div class="amd-app">
<div class="amd-intro">
<hr>
</div>
<div class="amd-info text-center">
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>آموزش کارت حتی در صورت پاسخ صحیح</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>ضبط صدا در صورت استفاده از تشخیص گفتار</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>نمایش جلوه های ویژه ی صوتی و بصری</span>
</label>
</div>
</div>
<div class="close">
<svg class="filter" version="1.1">
<defs>
<filter id="gooeyness">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="gooeyness" />
<feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
</filter>
</defs>
</svg>
<div class="burger">
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
</div>
</div>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
If you don't want to use scale(), you can always shrink the width and height properties. The only caveat with this is that you'll need to remove the parent's filter property, and substitute it with border-radius on the children:
let burger = document.querySelector('.burger');
burger.addEventListener('click', function(e) {
burger.classList.toggle('active');
});
.burger {
display: flex;
flex-direction: column;
padding: 30px;
}
.settings-container .amd-app {
margin: auto;
padding: 10px;
background-color: white;
width: 575px;
height: 280px;
border-radius: 20px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.settings-container {
position: relative;
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label>input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label>input:checked i {
background: #1094fb;
}
label>input:checked i span {
color: #29316b;
}
label>input:checked i:after {
transform: translateX(25px);
}
body {
align-items: center;
background: #708fd4;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
position: absolute;
width: 100%;
}
.filter {
position: absolute;
}
.rect {
background: black;
display: inline-block;
height: 18px;
margin-top: 14px;
transition: transform 500ms;
width: 90px;
border-radius: 50px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-51px) translateY(50px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(51px) translateY(-50px);
}
.close {
position: absolute;
right: 0px;
top: 0px;
}
<div class="settings-container">
<div class="amd-app">
<div class="amd-intro">
<hr>
</div>
<div class="amd-info text-center">
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>آموزش کارت حتی در صورت پاسخ صحیح</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>ضبط صدا در صورت استفاده از تشخیص گفتار</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>نمایش جلوه های ویژه ی صوتی و بصری</span>
</label>
</div>
</div>
<div class="close">
<svg class="filter" version="1.1">
<defs>
<filter id="gooeyness">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="gooeyness" />
<feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
</filter>
</defs>
</svg>
<div class="burger">
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
</div>
</div>
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
CodePudding user response：
You can use relative positioning to the panel and absolute positioning to the close button. Here is a similar answer:
