Skip to content

Instantly share code, notes, and snippets.

@jemgold

jemgold/dabblet.css

Created February 13, 2012 18:31
Show Gist options
  • Save jemgold/1818865 to your computer and use it in GitHub Desktop.
Save jemgold/1818865 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #333;
}
#mask {
position: absolute;
background: black;
width: 100%;
height: 100%;
opacity: .6;
z-index: 10;
}
#popup {
position: relative;
background: #fff;
z-index: 50;
width: 460px;
margin: auto;
border-radius: 4px;
top: 50px;
box-shadow: 0px 1px 10px rgba(0,0,0,.25);
background: #f5f5f5;
}
#popup header {
padding: 20px;
border-radius: 4px 4px 0 0;
font-weight: 700;
font-size: 24px;
line-height: 24px;
}
ul.tabs {
margin:0;
padding:0 0 8px 20px;
}
ul.tabs li {
display:inline;
background:#d9d9d9;
padding:8px;
border-radius:2px 2px 0 0;
font-weight:bold;
color:#333;
margin-right:2px;
}
ul.tabs li.active {
background-color:#fff;
}
#popup section {
padding: 20px;
background:#fff;
}
p.description strong { display: block }
input[type=text],
textarea {
font-family: Helvetica Neue;
color: #333;
font-size: 13px;
background: #f5f5f5;
padding: 10px;
width: 220px;
border-radius: 2px;
box-shadow: inset 0px 2px 3px rgba(0,0,0,.2);
outline: 0;
-webkit-appearance: none;
border: 1px solid #ccc;
display: block;
margin-bottom: 8px;
transition: .3s linear border;
}
input[type=text]:focus,
textarea:focus { border-color: #000 }
button {
border-radius: 2px;
border: 0;
padding: 10px 20px;
margin: 0 8px 0 0;
font-family: Helvetica Neue;
font-weight: 700;
font-size: 13px;
background: #e6e6e6;
color: #333;
transition: .1s linear top, .3s linear background;
}
button:active {
position: relative;
top: 2px;de: both;
}
button:hover { background: #d9d9d9 }
button.primary {
background-color: #e54040;
background: linear-gradient(top, #ec6262, #da2828);
border: 1px solid #992b2b;
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,.4);
}
button.primary:hover { background-color: #d51d1d }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> --><div id="mask"></div>
<div id="popup" class="animated">
<header>Popup Title</header>
<ul class="tabs">
<li class="active">Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
<section class="popup-content">
<p class="description">
<strong>Some modal boxes have descriptions. This is one of them.</strong>
Want two lines? Do it like this…
</p>
<input type="text" id="textfield" placeholder="placeholder">
<textarea placeholder="placeholder"></textarea>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
</section>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment