Skip to content

Instantly share code, notes, and snippets.

@XOP
Created June 6, 2016 11:47
Show Gist options
  • Save XOP/996e5a409142e4113405c380c15d4bf3 to your computer and use it in GitHub Desktop.
Save XOP/996e5a409142e4113405c380c15d4bf3 to your computer and use it in GitHub Desktop.
<div class="body">
<div class="dropdown">
<div class="dropdown__content">
<div class="content">
<div class="content__item">
<input type="checkbox" />
Item 1
</div>
<div class="content__item">
<input type="checkbox" />
Item 2
</div>
<div class="content__item">
<input type="checkbox" />
Item 3
</div>
<div class="content__item">
<input type="checkbox" />
Item 4
</div>
<div class="content__item">
<input type="checkbox" />
Item 5
</div>
<div class="content__item">
<input type="checkbox" />
Item 6
</div>
<div class="content__item">
<input type="checkbox" />
Item 7
</div>
<div class="content__item">
<input type="checkbox" />
Item 8
</div>
<div class="content__item">
<input type="checkbox" />
Item 9
</div>
<div class="content__item">
<input type="checkbox" />
Item 10
</div>
</div>
</div>
<div class="dropdown__button">
<button>Apply</button>
</div>
</div>
</div>
body {
margin: 0;
font: 14px/1.5 normal Helvetica, Arial, sans-serif;
color: #333;
}
.body {
box-sizing: border-box;
padding: 2rem;
height: 100vh;
background: rgba(0,0,0,.8);
}
.dropdown {
display: flex;
flex-flow: column nowrap;
position: absolute;
left: 50%;
min-width: 30vw;
transform: translateX(-50%);
background: #fff;
max-height: 200px; // demo
overflow: hidden;
box-shadow: 0 2px 6px 1px rgba(0,0,0,.8);
}
.dropdown__content {
flex: 1 1 auto;
min-height: 30vh;
overflow: hidden;
overflow-y: auto;
}
.dropdown__button {
position: relative;
flex: 1 0 auto;
padding: .5rem;
box-shadow: 0 -12px 14px -10px rgba(0,0,0,.7); // point 1
}
button {
box-sizing: border-box;
width: 100%;
padding: .5rem;
color: #fefefe;
background: #666;
font-size: 16px;
border: 0 none;
}
.content {
position: relative; // point 2
padding-bottom: 1rem; // point 3
&:after {
content: "";
position: absolute;
z-index: 1; // point 4
left: 0; right: 0; bottom: 0;
height: 1rem; // point 5
background: #fff;
}
}
.content__item {
padding: .5rem;
&:nth-child(odd) {
background-color: #eee;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment