<div class="modal">
<svg id="bow" x="0px" y="0px" viewBox="0 0 64.8 12.3">
<path fill="#FFFFFF" d="M33.2,0c12.2,0,23.6,12.3,31.1,12.3s-72.1,0-63.6,0S17.9,0,33.2,0z"/>
</svg>
<div>
<span>Notifications</span>
<div class="checkbox">
<input type="checkbox" checked="true" id="notifications"/>
<label for="notifications"></label>
</div>
</div>
<div>
<span>Newsletter</span>
<div class="checkbox">
<input type="checkbox" id="newsletter"/>
<label for="newsletter"></label>
</div>
</div>
</div>
$primary: #F38181;
$secondary: #FCE38A;
body{
margin:0;
background: linear-gradient(125deg,$primary,adjust-color($primary, $hue: -50deg));
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Quicksand;
font-size: 25px;
letter-spacing: 0.01em;
}
.modal{
padding-left: 1.5em;
border-radius: .5em;
background: white;
color: #888;
position: relative;
box-shadow: 0 30px 40px -15px rgba(0,0,0,0.3);
svg{
width: 3.5em;
height: auto;
position: absolute;
left: 2.5em;
bottom: calc(100% - 1px);
}
& > div{
padding: 1.25em 1.25em 1.25em 0;
display: flex;
justify-content: space-between;
align-items: center;
span{
padding-right: 2em;
}
& + div{
border-top: 1px solid rgba(0,0,0,0.08);
}
}
}
.checkbox{
input{
display: none;
&:checked + label{
background: $primary;
&:before{
transform: translateX(1.2em);
}
}
}
label{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: flex;
padding: .2em;
align-items: center;
width: 2.4em;
cursor: pointer;
height: 1.2em;
border-radius: 1em;
transition: background .1s ease;
background: adjust-saturation($primary,-80%);
position: relative;
&:before{
content: '';
display: block;
transition: transform .1s ease;
height: 1.2em;
width: 1.2em;
border-radius: 50%;
background: white;
box-shadow: 3px 5px 20px -3px rgba(0,0,0,0.3);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.