Skip to content

Instantly share code, notes, and snippets.

@renoirb

renoirb/dabblet.css

Created March 27, 2013 21:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save renoirb/5258442 to your computer and use it in GitHub Desktop.
Save renoirb/5258442 to your computer and use it in GitHub Desktop.
Download ZIP
Adaptation: nav with a light colored line
Raw
dabblet.css
/**
* Adaptation: nav with a light colored line
*
* Twitter Bootstrap code re-use, adapting: .nav, .nav-stacked, .nav-pills
*/
// The real deal.
.nav-light>li{
font-size:1.1em
}
.nav-light.nav-pills>li>a {
border-radius:0;
}
.nav-light a{
border-left:5px solid white
}
.nav-light .nav-light-alfa>a{
color:#062260;border-left-color:#062260;
}
.nav-light .nav-light-bravo>a{
color:#159867;border-left-color:#159867
}
.nav-light .nav-light-charlie>a{
color:#973566;border-left-color:#973566
}
.nav-light .nav-light-delta>a{
color:#127cb5;border-left-color:#127cb5
}
.nav-light .nav-light-echo>a{
color:#cb9822;border-left-color:#cb9822
}
.nav-light .nav-light-foxtrot>a{
color:#9f771b;border-left-color:#9f771b
}
.nav-light .active>a{
color:#FFF
}
.nav-light .nav-light-alfa.active>a{
background-color:#0c44c0
}
.nav-light .nav-light-bravo.active>a{
background-color:#31e2a0
}
.nav-light .nav-light-charlie.active>a{
background-color:#ca6899
}
.nav-light .nav-light-delta.active>a{
background-color:#41b0ec
}
.nav-light .nav-light-echo.active>a{
background-color:#e6c26d
}
.nav-light .nav-light-foxtrot.active>a{
background-color:#dfaf41
}
// Example formatting.
.hero-unit-parent {
}
.hero-unit {
}
Raw
dabblet.html
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://gist.github.com/renoirb/5149225/raw/4ea49c79a220f073a43856162a2a989249fe95fb/parent.counter.js"></script>
</head>
<body class="container">
<div class="row-fluid">
<div class="span4 offset4 hero-unit-parent">
<div class="hero-unit">
<!-- the example -->
<ul class="nav nav-light nav-pills nav-stacked">
<li class="nav-light-alfa"><a href="#">Lorem</a></li>
<li class="nav-light-bravo active"><a href="#">Ipsum</a></li>
<li class="nav-light-charlie"><a href="#">Dolor</a></li>
<li class="nav-light-delta"><a href="#">Sit amet</a></li>
</ul>
<!-- /the example -->
</div>
</div>
</div>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment