Skip to content

Add Button Groups to Pure #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tilomitra wants to merge 4 commits into from
Closed

Add Button Groups to Pure #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5792eab
add button groups
tilomitra Jul 23, 2013
8bcce1b
add button groups to manual test page
tilomitra Jul 23, 2013
d196990
add button group to HISTORY.md
tilomitra Jul 23, 2013
f5189da
s/add/added
tilomitra Jul 23, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions HISTORY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@ Pure Change History
NEXT
----

* Added horizontal button groups: They can be created by wrapping a collection of
`.pure-button` elements within a `.pure-button-group` element. ([#126][])


[#126](https://github.com/yui/pure/issues/126)

0.2.1 (2013-07-17)
------------------
Expand Down
20 changes: 20 additions & 0 deletions src/buttons/css/buttons-core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,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;
}
22 changes: 21 additions & 1 deletion src/buttons/css/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
}
.pure-button-active,
.pure-button:active {
box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
box-shadow: 0 0 10px 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
*font-weight: bold; /* since box-shadow wont show in IE < 8, make the font bold instead to denote active. */
Copy link
Collaborator

@ericf ericf Jul 23, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a bad idea as it will cause the buttons to shift horizontally causing a potential reflow. Let's think of a better way to show the active button…

Copy link
Contributor Author

@tilomitra tilomitra Jul 23, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, good point. I'm not sure how to get around it. I thought about changing the border-color, but that gets over-ridden by the button-group border-color. If we don't want things to shift, then the only options appear to be border-color. I can try to change up the styles a bit to make it work. What do you think about using a darker border-color for the active state when box-shadow is not supported?

Copy link
Collaborator

@ericf ericf Jul 23, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The border-color seems to make the most sense to me as it's analogous to what the active/focused form inputs look like.

Copy link
Contributor

@jamesalley jamesalley Jan 21, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like a good PR. We can get around the bolding issue by not worrying about IE7, for which we are dropping support .

}

.pure-button[disabled],
Expand Down Expand Up @@ -74,3 +75,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;
}
49 changes: 49 additions & 0 deletions src/buttons/tests/manual/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,5 +108,54 @@ <h2>Primary Form Buttons</h2>
<input type="button" class="pure-button pure-button-primary" value="Input Button">
<input type="reset" class="pure-button pure-button-primary" value="Reset">
</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>