Created
July 25, 2013 14:08
-
-
Save not-only-code/6080018 to your computer and use it in GitHub Desktop.
Flexible Field layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Flexible Field layout | |
*/ | |
body { | |
background: #f4f4f4; | |
color: #444; | |
font: 16px/1.2em Helvetica, Arial, Sans-serif; | |
} | |
* { | |
margin: 0; | |
padding: 0 | |
} | |
ul { | |
margin: 10px; | |
} | |
li { | |
position: relative; | |
width: 100%; | |
style: none; | |
} | |
.field { | |
display: table; | |
width: 100%; | |
max-width: 100%; | |
} | |
.field > * { | |
display: table-cell; | |
border-radius: 5px; | |
border: solid 1px #666; | |
background: white; | |
box-shadow: 0 1px 0 #bababa; | |
} | |
.space { | |
width: 10px; | |
border: none; | |
background: none; | |
box-shadow: none !important; | |
} | |
.position { | |
padding: 0; | |
min-width: 10px; | |
width: 45px;; | |
height: 45px; | |
white-space: nowrap; | |
cursor: pointer; | |
overflow: hidden; | |
} | |
.position > * { | |
float:left | |
} | |
span.field-position { | |
display: inline-block; | |
padding-top: 14px; | |
text-align: center; | |
width: 45px; | |
height: 30px; | |
margin-bottom: 0; | |
} | |
.jumps { | |
position: relative; | |
display: none; | |
margin: 15px; | |
margin-bottom: 0; | |
float: left; | |
font-size: 0.8em | |
} | |
.jumps > div, | |
.jumps > div > * { | |
float:left; | |
} | |
.jumps ul { | |
margin: 0; | |
margin-left: 8px; | |
float: left; | |
position: relative | |
} | |
.jumps ul li { | |
list-style: none; | |
top: -2px; | |
float: left; | |
display: block; | |
width: 20px; | |
border-radius: 3px; | |
border: solid 1px #999; | |
height: 20px; | |
background-color: white; | |
text-align: center; | |
} | |
.arrows { | |
display: none; | |
} | |
div.label { | |
position:relative; | |
vertical-align: middle; | |
width: auto; | |
padding: 0 15px; | |
border-right: 0; | |
border-radius: 5px 0 0 5px; | |
cursor: pointer; | |
} | |
span.label { | |
display: block; | |
word-wrap: break-word; | |
text-overflow: ellipsis; | |
height: 15px; | |
line-heihgt: 16px; | |
overflow:hidden; | |
} | |
div.actions { | |
border-left: 0; | |
width: 6px; | |
padding: 0; | |
white-space: nowrap; | |
vertical-align: middle; | |
text-align: center; | |
border-radius: 0 5px 5px 0; | |
} | |
div.actions a { | |
display: none; | |
width: 10px; | |
margin-right: 5px; | |
height: 10px; | |
background: #666; | |
} | |
.field:hover > * { | |
box-shadow: 0 6px 0 rgba(0,0,0,.05), 0 4px 0 rgba(0,0,0,.05), 0 3px 0 rgba(0,0,0,.05), 0 2px 0 rgba(0,0,0,.1), 0 1px 0 rgba(0,0,0,.1); | |
} | |
.field:hover .actions { | |
width: auto; | |
} | |
.field:hover .actions a { | |
display: inline-block; | |
} | |
.field:hover .position:hover { | |
width: auto; | |
background-color: #F8F4EA; | |
} | |
.field:hover .position:hover .jumps { | |
margin-left: 5px; | |
display: block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul> | |
<li class="field ui-state-default type-2 enabled" id="field-462"> | |
<div class="position"> | |
<span class="field-position">11</span> | |
<div class="arrow incoming above"></div> | |
<div class="arrow incoming below"></div> | |
<div class="arrow outgoing above"></div> | |
<div class="arrow outgoing below"></div> | |
<div class="jumps"> | |
<div class="outgoing"> | |
<span class="label">Jumps to</span> | |
<ul> | |
<li title="/typeform/web/admin/form/jump/condition/45/outgoing">A</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="space"> </div> | |
<div class="label"> | |
<span class="field-icon textfield"></span> | |
<span class="label ellipsis">sdfsd sdf safsdf sdf sd fasdf sdfsd sdf safsdf sdf sd fasdf sdfsd sdf safsdf sdf sd fasdf asdffdsfsdf</span> | |
</div> | |
<div class="actions"> | |
<a class="action-jump"></a> | |
<a class="action-duplicate"></a> | |
<a class="action-delete"></a> | |
</div> | |
</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment