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 #621 from yahoo/button-groups

Browse Source 
Add Button Groups to Pure
This commit is contained in:
Seth Bertalotto 2017-01-04 22:06:54 -08:00 committed by GitHub
commit 4c96fe8235
3 changed files with 91 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/buttons/css/buttons-core.css
View File

@ -17,3 +17,23 @@
padding: 0;
border: 0;
}
/* Inherit .pure-g styles */
.pure-button-group {
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
*letter-spacing: normal; /* reset IE < 8 */
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
}
.opera-only :-o-prefocus,
.pure-button-group {
word-spacing: -0.43em;
}
.pure-button-group .pure-button {
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}

19
src/buttons/css/buttons.css
View File

@ -57,3 +57,22 @@ a.pure-button-selected {
background-color: rgb(0, 120, 231);
color: #fff;
}
/* Button Groups */
.pure-button-group .pure-button {
margin: 0;
border-radius: 0;
border-right: 1px solid #111; /* fallback color for rgba() for IE7/8 */
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.pure-button-group .pure-button:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.pure-button-group .pure-button:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-right: none;
}

54
src/buttons/tests/manual/button.html
View File

@ -48,7 +48,7 @@
color: #fff;
box-shadow: none;
}
.custom-fonts {
font-family: 'Open Sans', sans-serif;
}
@ -124,6 +124,56 @@
<input type="submit" class="pure-button pure-button-primary" value="Submit">
<input type="button" class="pure-button pure-button-primary" value="Input Button">
<input type="reset" class="pure-button pure-button-primary" value="Reset">
</p>
</p>
<h2>Button Groups</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="pure-button-group">
<input type="submit" class="pure-button pure-button-primary" value="Submit">
<input type="button" class="pure-button pure-button-primary" value="Input Button">
<input type="reset" class="pure-button pure-button-primary" value="Reset">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="pure-button-group">
<a href="#" class="pure-button pure-button-primary" value="Submit">Testing</a>
<a href="#" class="pure-button pure-button-primary" value="Input Button">Button</a>
<a href="#" class="pure-button pure-button-primary pure-button-active" value="Reset">Groups</a>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="pure-button-group">
<button class="pure-button">Lorem</button>
<button class="pure-button pure-button-active">Ipsum</button>
<button class="pure-button">Dolor</button>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>