Skip to content

Instantly share code, notes, and snippets.

@bencevans

bencevans/dabblet.css

Last active December 9, 2016 12:23
Show Gist options
  • Save bencevans/218d2ad09e1fa623f70395c4097b0322 to your computer and use it in GitHub Desktop.
Save bencevans/218d2ad09e1fa623f70395c4097b0322 to your computer and use it in GitHub Desktop.
Download ZIP
Transit Popups
Raw
dabblet.css
/**
* Transit Popups
*/
html, body {
margin: 0;
height: 100%;
font-family: Verdana;
font-size: 16px;
}
.popup {
height: calc(100% - 42px);
position: absolute;
top: 42px;
right: 0;
width: 50%;
margin: auto;
background-color: #15343D;
color: #fff;
}
.transit {
background-color: #2D4951;
}
.transit-listing {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
padding: 5px;
overflow: hidden;
}
.transit-listing-icon-container {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.transit-listing-icon {
width: 42px;
height: 26px;
}
.transit-listing-details {
flex-grow:1;
overflow: hidden;
white-space: nowrap;
}
.transit-listing-details h3 { margin: 0;}
.transit-listing-details p { margin: 0;}
.transit-listing-times {
height:100%;
flex-basis: 110px;
flex-shrink: 0;
flex-grow:0;
height: 100%;
padding-left:4px;
width: 195px;
box-shadow: 7px 0px 27px 25px rgba(45,73,81,1);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="popup">
<div class="transit">
<div class="transit-listing"> <div class="transit-listing-icon-container"> <img class="transit-listing-icon" src="http://clevelandproof.livingmap.com/img/transit_icons__rapid.svg"/> </div> <div class="transit-listing-details"> <h3 class="transit-listing-route">62</h3> <p class="transit-listing-destination">B Line Trolley long destination</p> </div> <div class="transit-listing-times"> due <h3 style="display:inline">11:16</h3><br><span style="opacity:0.5">11:26, 11:36</span> </div> </div>
<div class="transit-listing" style="background-color:#009CAC"> <div class="transit-listing-icon-container"> <img class="transit-listing-icon" src="http://clevelandproof.livingmap.com/img/transit_icons__rapid.svg"/> </div> <div class="transit-listing-details"> <h3 class="transit-listing-route">62</h3> <p class="transit-listing-destination">B Line Trolley long destination</p> </div> <div class="transit-listing-times" style=" box-shadow: 7px 0px 27px 25px #009CAC;"> due <h3 style="display:inline">11:16</h3><br><span style="opacity:0.5">11:26, 11:36</span> </div> </div>
<div class="transit-listing"> <div class="transit-listing-icon-container"> <img class="transit-listing-icon" src="http://clevelandproof.livingmap.com/img/transit_icons__rapid.svg"/> </div> <div class="transit-listing-details"> <h3 class="transit-listing-route">62</h3> <p class="transit-listing-destination">B Line Trolley long destination</p> </div> <div class="transit-listing-times"> due <h3 style="display:inline">11:16</h3><br><span style="opacity:0.5">11:26, 11:36</span> </div> </div>
<div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment