library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-24 10:44:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #303 from tehnomaag/grouped-input-square-fix

Browse Source 
Fixed grouped input square corners special case
This commit is contained in:
James Alley 2015-01-30 17:20:10 -08:00
commit 6e3280420e
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/forms/css/forms.css
View File

@ -236,7 +236,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
.pure-form .pure-group input {
display: block;
padding: 10px;
margin: 0;
margin: 0 0 -1px;
border-radius: 0;
position: relative;
top: -1px;
@ -247,10 +247,17 @@ since IE8 won't execute CSS that contains a CSS3 selector.
.pure-form .pure-group input:first-child {
top: 1px;
border-radius: 4px 4px 0 0;
margin: 0;
}
.pure-form .pure-group input:first-child:last-child {
top: 1px;
border-radius: 4px;
margin: 0;
}
.pure-form .pure-group input:last-child {
top: -2px;
border-radius: 0 0 4px 4px;
margin: 0;
}
.pure-form .pure-group button {
margin: 0.35em 0;

33
src/forms/tests/manual/forms.html
View File

@ -174,11 +174,44 @@
<fieldset class="pure-group">
<input type="text" class="pure-input-1-3" placeholder="Another Group">
<input type="text" class="pure-input-1-3" placeholder="More Stuff">
<input type="text" class="pure-input-1-3" placeholder="Even More Stuff">
<input type="text" class="pure-input-1-3" placeholder="Last Item">
<button type="submit" class="pure-button pure-input-1-3">Sign in</button>
</fieldset>
</form>
<h2>Dynamic Grouped Inputs</h2>
<form class="pure-form" onsubmit="return false">
<script type="text/javascript">
function testDynamicGroupAdd() {
var g = document.getElementById('test-dynamic-group'),
newNode = g.getElementsByTagName("input")[0].cloneNode();
g.appendChild(newNode);
}
function testDynamicGroupRemove() {
var g = document.getElementById('test-dynamic-group'),
nodeCount = g.getElementsByTagName("input").length;
if (nodeCount > 1) {
g.removeChild(g.lastChild);
}
}
</script>
<fieldset class="pure-group">
<button type="submit" class="pure-button" onclick="testDynamicGroupAdd()">Add field</button>
<button type="submit" class="pure-button" onclick="testDynamicGroupRemove()">Remove field</button>
</fieldset>
<fieldset class="pure-group" id="test-dynamic-group">
<input type="text" class="pure-input-1-3" placeholder="Add or remove fields to test">
</fieldset>
</form>
<h2>Input Sizing</h2>
<form class="pure-form">