Skip to content

Instantly share code, notes, and snippets.

@Aarbel

Aarbel/dabblet.css

Last active November 24, 2018 17:53
Show Gist options
  • Save Aarbel/bfeaf934b7b24dcacbd36367dc21a67f to your computer and use it in GitHub Desktop.
Save Aarbel/bfeaf934b7b24dcacbd36367dc21a67f to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
html {
height: 100%;
}
body {
background: linear-gradient(90deg, #6bafd2 0%, #a4c8dc 38%, #d6cbca 58%, #eabc96 79%, #db8876 100%);
min-height: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
.absolute-button {
width: 80px;
height: 80px;
position: absolute;
background-color: black;
border-radius: 50%;
bottom: 32px;
left: calc(50% - 32px);
right: auto;
cursor: pointer;
display: flex;
font-size: 16px;
color: white;
justify-content: center;
align-items: center;
}
.absolute-button:active {
background-color: red;
}
.absolute-menu {
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity, transform;
transition-duration: 0.15s;
opacity: 0;
position: fixed; background-color: #a4c8dc;
visibility: visible;
opacity: 0;
transform: translateY(50vh) scale(0) translateZ(0);
}
.absolute-menu.open {
visibility: visible;
opacity: 1;
transform: translateY(0) scale(1) translateZ(0);
}
.scroll-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
margin-bottom: 6px;
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 0;
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.item {
width: 100%;
height: 64px;
border-radius: 6px;
background-color: white;
margin-bottom: 12px
}
Raw
dabblet.html
<body>
<div class="absolute-button"> MENU </div>
<div class="scroll-container">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</body>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment