Skip to content

Instantly share code, notes, and snippets.

@xanido

xanido/dabblet.css

Created July 4, 2013 04:26
Show Gist options
  • Save xanido/5924925 to your computer and use it in GitHub Desktop.
Save xanido/5924925 to your computer and use it in GitHub Desktop.
Download ZIP
Menulog buttons
Raw
dabblet.css
/**
* Menulog buttons
*/
body {
padding: 20px;
background: #ffffff;
min-height: 100%;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.btn {
box-sizing: border-box;
display: inline-block;
border: 1px solid #6aa321; /* stroke */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #a1c939; /* layer fill content */
-moz-box-shadow: inset 0 1px 0 1px rgba(255,255,255,.51); /* inner shadow */
-webkit-box-shadow: inset 0 1px 0 1px rgba(255,255,255,.51); /* inner shadow */
box-shadow: inset 1px 1px 0 0px rgba(255,255,255,.51); /* inner shadow */
padding: 7px 8px;
color: #fff; /* text color */
font-family: "Proxima Nova";
font-size: 15px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 1px rgba(67,118,7,1); /* drop shadow */
}
.split-btn {
font-size: 0;
}
.btn.split {
background-color: #dedede; /* layer fill content */
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,.75); /* inner shadow */
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,.75); /* inner shadow */
box-shadow: inset 1px 1px 0 0 rgba(255,255,255,.75); /* inner shadow */
border: 1px solid #a5a5a5; /* stroke */
color: #737373; /* text color */
font-family: "Proxima Nova";
font-size: 15px;
font-weight: bold;
text-shadow: none;
}
.btn.split.left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.btn.split.right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn.split.selected {
background-color: #737373; /* layer fill content */
-moz-box-shadow: inset 4px 0 1px rgba(0,0,0,.3); /* inner shadow */
-webkit-box-shadow: inset 4px 0 1px rgba(0,0,0,.3); /* inner shadow */
box-shadow: inset 1px 0 1px rgba(0,0,0,.3),
inset 0px 2px 1px rgba(0,0,0,.3);
border: none;
padding: 8px 9px;
color: #fff;
font-family: "Proxima Nova";
font-size: 15px;
font-weight: bold;
text-shadow: 0 -2px 2px rgba(0,0,0,.5); /* drop shadow */
}
.info-bar {
background-color: #ececec; /* layer fill content */
-moz-box-shadow: 0 2px 2px rgba(0,0,1,.2); /* drop shadow */
-webkit-box-shadow: 0 2px 2px rgba(0,0,1,.2); /* drop shadow */
box-shadow: 0 2px 2px rgba(0,0,1,.2); /* drop shadow */
padding: 5px;
}
.info-bar h1 {
color: #8d8d8d; /* text color */
font-family: "Proxima Nova";
font-size: 21px;
font-weight: bold;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="#" class="btn">Order</a>
<a href="#" class="btn">Re-order</a>
<a href="#" class="btn">Pre-order</a>
<br/>
<br/>
<!-- split toggle button -->
<div class="split-btn">
<a href="#" class="split btn left">Pick up</a>
<a href="#" class="split btn right selected">Delivery</a>
</div>
<br/>
<br/>
<div class="info-bar">
<h1>Wollongong, 2576</h1>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment