Skip to content

Instantly share code, notes, and snippets.

@wrumsby

wrumsby/dabblet.css

Last active September 10, 2015 00:38
Show Gist options
  • Save wrumsby/d0f05c310725fcfb9df1 to your computer and use it in GitHub Desktop.
Save wrumsby/d0f05c310725fcfb9df1 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {
margin: 0;
padding: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 24px;
background-color: #fff;
color: #32465a;
}
input[type="text"],
input[list] {
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 3px;
padding: 10px;
min-width: 60%;
}
.xui-dropdown {
position: relative;
box-sizing: border-box;
display: inline-block;
/* widths are a problem */
width: 400px;
}
.xui-dropdown--trigger::after {
margin-left: -20px;
font-size: 20px;
content: '\002C7';
vertical-align: bottom;
}
.xui-dropdown--list {
background-color: #fff;
position: absolute;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 3px;
margin: 0;
padding: 0;
top: 36px;
left: 0;
right: 40%;
}
.xui-dropdown--list--item {
margin: 0;
padding: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 24px;
list-style: none;
}
.xui-dropdown--list--item:hover {
background-color: #f6f9fc;
}
.xui-form {
list-style: none;
margin: 0;
padding: 0;
}
.xui-field {
display: block;
list-style: none;
}
.xui-field--label {
font-weight: normal;
}
.xui-field--label-left {
line-height: 45px;
display: inline-block;
padding-right: 12px;
width: 160px;
}
.xui-field--label-top {
display: block;
line-height: 35px;
}
.xui-fieldgroup-horizontal .xui-fieldgroup--item {
margin-right: 16px;
}
.xui-u-right-align {
text-align: right;
}
@media (min-width: 600px) {
.xui-field--label-left {
display: block;
line-height: 35px;
text-align: left;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ol class="xui-form" style="width: 300px; border: 1px solid #ccc; padding: 12px;">
<li class="xui-field">
<label for="i2" class="xui-field--label xui-field--label-left xui-u-right-align">Label</label>
<div class="xui-dropdown">
<input type="text" id="i2" class="xui-dropdown--input" readonly/>
<span class="xui-dropdown--trigger"/>
<ul class="xui-dropdown--list" style="display: none;">
<li class="xui-dropdown--list--item">Choose One</li>
<li class="xui-dropdown--list--item">Choose Two</li>
<li class="xui-dropdown--list--item">Choose Three</li>
</ul>
</div>
</li>
<li class="xui-field">
<label for="i1" class="xui-field--label xui-field--label-left xui-u-right-align">Label</label>
<input id="i1" type="text"/>
</li>
<li class="xui-field">
<label>
<span class="xui-field--label xui-field--label-left">Label</span>
<input type="text"/>
</label>
</li>
<li class="xui-field">
<label>
<span class="xui-field--label xui-field--label-top">Label</span>
<input type="text"/>
</label>
</li>
<li class="xui-field">
<label>
<span class="xui-field--label xui-field--label-top">Label</span>
<input type="text"/>
</label>
</li>
<li class="xui-field">
<span class="xui-field--label xui-field--label-top">Choose One</span>
<div class="xui-fieldgroup xui-fieldgroup-horizontal">
<label class="xui-fieldgroup--item"><input type="radio" name="one" value="1"/> Manually</label>
<label class="xui-fieldgroup--item"><input type="radio" name="one" value="2"/> Automatically</label>
</div>
</li>
</ol>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","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