Skip to content
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.

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

Add .grouped.gapless class #40

Merged
merged 2 commits into from
Sep 15, 2019
Merged

Add .grouped.gapless class #40

merged 2 commits into from
Sep 15, 2019

Conversation

yne
Copy link
Contributor

@yne yne commented Sep 14, 2019

This PR add support for the .grouped.gapless class that allow to group elements (input, select, button ...)

Preview

image

<kbd>button</kbd>:
<div>
	<button class=button>Left</button>
	<button class=button>Center</button>
	<button class=button>Right</button>
</div>

<kbd>.grouped > button</kbd>:
<div class="grouped">
	<button class=button>Left</button>
	<button class=button>Center</button>
	<button class=button>Right</button>
</div>
<kbd>.grouped.gapless > .button.icon-only</kbd>:
<div class="grouped gapless">
	<button class="button icon-only"><img src="https://icongr.am/clarity/align-left-text.svg?size=18"></button>
	<button class="button icon-only"><img src="https://icongr.am/clarity/center-text.svg?size=18"></button>
	<button class="button icon-only"><img src="https://icongr.am/clarity/align-right-text.svg?size=18"></button>
</div>
<kbd>.grouped.gapless > .button.outline.primary</kbd>:
<div class="grouped gapless">
	<a class="button icon-only outline">&laquo;</a>
	<a class="button icon-only outline">1</a>
	<a class="button icon-only outline">2</a>
	<a class="button icon-only outline primary">3</a>
	<a class="button icon-only outline">4</a>
	<a class="button icon-only outline">&raquo;</a>
</div>
<kbd>.grouped.gapless > .col-2</kbd>:
<form class="grouped gapless">
	<select class=col-2>
		<option>Track
		<option>Artist
		<option>Playlist
	</select>
	<input type=search placeholder=search>
	<input type=submit>
</form>

dist/chota.css Outdated Show resolved Hide resolved
dist/chota.css Outdated Show resolved Hide resolved
docs/index.html Outdated Show resolved Hide resolved
src/_group.css Outdated Show resolved Hide resolved
@yne yne requested a review from jenil September 15, 2019 14:46
@yne yne changed the title Add .group class Add .grouped.gapless class Sep 15, 2019
@jenil jenil merged commit ee19848 into jenil:master Sep 15, 2019
@yne
Copy link
Contributor Author

yne commented Sep 21, 2019

@jenil Hi, could you push a 0.7.1 tag ?
Thanks

@jenil
Copy link
Owner

jenil commented Sep 22, 2019

Published

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants