Skip to content

Instantly share code, notes, and snippets.

@wrumsby

wrumsby/dabblet.css

Last active October 19, 2015 19:32
Show Gist options
  • Save wrumsby/3f4e771eec1c64a8dbfb to your computer and use it in GitHub Desktop.
Save wrumsby/3f4e771eec1c64a8dbfb to your computer and use it in GitHub Desktop.
Download ZIP
ExtJS-inspired markup with flexbox for drop downs (now with select).
Raw
dabblet.css
/**
* ExtJS-inspired markup with flexbox for drop downs (now with select).
*/
* {
box-sizing: border-box;
}
body {
background-color: #fff;
color: #333;
font-family: Helvetica Neue, Helvetica, Arial, Open Sans, sans-serif;
font-size: 13px;
line-height: 28px;
}
.x-form-trigger-wrap,
.xui-select {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
max-width: 300px;
}
.x-form-trigger-input-cell,
.xui-select--input {
appearance: none;
flex-grow: 5;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px 0px 0px 3px;
padding-left: 8px;
font-size: 13px;
text-align: left;
}
.xui-select--input:focus {
outline-color: #2baaed;
outline-offset: 0 !important;
}
.x-form-trigger-input-cell > input,
.xui-field--input {
border-width: 0;
font-size: 13px;
height: 28px;
padding-left: 4px;
padding-right: 4px;
width: 100%;
}
.x-form-trigger-cell,
.xui-select--trigger {
border: 1px solid #ccc;
border-radius: 0px 3px 3px 0px;
border-left: 0;
flex-grow: 0;
}
.x-form-trigger,
.xui-select--trigger {
width: 28px;
}
.x-form-arrow-trigger,
.xui-select--trigger {
transform: rotateX(180deg);
text-align: center;
}
.xui-select--trigger {
text-decoration: none;
}
.x-form-arrow-trigger::after,
.xui-select--trigger::after {
content: '\005e';
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="x-form-trigger-wrap">
<div class="x-form-trigger-input-cell">
<!-- <input type="hidden" /> if needed -->
<input type="text" class="x-form-field x-form-text" value="Ext" />
</div>
<div class="x-form-trigger-cell">
<div class="x-form-trigger x-form-trigger x-form-arrow-trigger"></div>
</div>
</div>
<hr/>
<div class="xui-select">
<div class="xui-select--input">
<!-- <input type="hidden" /> if needed -->
<input type="text" class="xui-field--input" value="XUI Combo Box" />
</div>
<div class="xui-select--trigger"></div>
</div>
<hr/>
<div class="xui-select">
<!-- <input type="hidden" /> if needed -->
<button class="xui-button xui-select--input">XUI List Box</button>
<div class="xui-select--trigger"></div>
</div>
<hr/>
<div class="xui-select">
<select class="xui-select--input">
<option>XUI Select</option>
</select>
<div class="xui-select--trigger"></div>
</div>
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