Skip to content

Instantly share code, notes, and snippets.

@mfrohberg

mfrohberg/index.html

Created November 28, 2014 15:42
Show Gist options
  • Save mfrohberg/3094eea2f7beec495f70 to your computer and use it in GitHub Desktop.
Save mfrohberg/3094eea2f7beec495f70 to your computer and use it in GitHub Desktop.
Download ZIP
zxGQgy
Raw
index.html
<body ng-app="codeBrowse">
<div class="flex">
<div>
<div class="controls">
<div class="controls-left">
<button id="html-settings" class="control-buttons">
<i class="ion-gear-b"></i>
</button>
<h2>HTML</h2>
</div>
<div class="controls-right">
<button id="html-close" class="control-buttons">
<i class="ion-close"></i>
</button>
</div>
</div>
</div>
<div>
<div class="controls">
<div class="controls-left">
<button id="css-settings" class="control-buttons">
<i class="ion-gear-b"></i>
</button>
<h2>CSS</h2>
</div>
<div class="controls-right">
<button id="css-close" class="control-buttons">
<i class="ion-close"></i>
</button>
</div>
</div>
</div>
<div>
<div class="controls">
<div class="controls-left">
<button id="js-settings" class="control-buttons">
<i class="ion-gear-b"></i>
</button>
<h2>JS</h2>
</div>
<div class="controls-right">
<button id="js-close" class="control-buttons">
<i class="ion-close"></i>
</button>
</div>
</div>
</div>
</div>
</body>
Raw
script.js
angular.module('codeBrowse')
.controller('htmlCtrl', function($scope) {
})
.controller('cssCtrl', function($scope) {
})
.controller('jsCtrl', function($scope) {
})
Raw
style.css
.flex
{
/* basic styling */
width: 100%;
height: 684px;
/* flexbox setup */
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
.flex > div
{
background: #1d1f20;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
width: 100%;
-webkit-transition: width 0.7s ease-out;
transition: width 0.7s ease-out;
}
/* borders */
.flex > div:nth-child(1){
border-bottom : 6px solid #505050; }
.flex > div:nth-child(2){
border-bottom : 6px solid #505050; }
.controls {
color: #d3d3d3;
position: relative;
overflow: hidden;
background: #1d1f20;
white-space: nowrap;
padding: 2px 2px 2px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.controls-left {
margin: 0;
float: left;
width: 50%;
}
.controls-right {
float: right;
width: 50%;
}
.controls h2{
font-family: "Lato", Sans-Serif;
color: #999;
margin: 0;
font-weight: 700;
line-height: 1.2;
font-size: 1.1em;
display: inline-block;
padding-left: 2px;
}
.control-buttons {
font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
color: #999;
font-size: 1.3em;
display: inline-block;
position: relative;
border: 0;
top: 1px;
margin: 0;
background: none;
outline: 0;
padding: 1px 0 0 2px;
color:
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment