mirror/chota
1
0
Fork 0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #40 from yne/master

Browse Source 
Add `.grouped.gapless` class
This commit is contained in:
Jenil Gogari 2019-09-15 13:26:44 -04:00 committed by GitHub
commit ee19848081
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
dist/chota.css vendored
View File

@ -524,17 +524,23 @@ button {
display: -ms-flexbox;
display: flex;
}
.grouped > input:not(:last-child),
.grouped > select:not(:last-child),
.grouped > .button:not(:last-child) {
.grouped > *:not(:last-child) {
margin-right: 16px;
}
.grouped.gapless > * {
margin: 0 0 0 -1px !important;
border-radius:0 !important;
}
.grouped.gapless > *:first-child {
margin: 0 !important;
border-radius:4px 0 0 4px !important;
}
.grouped.gapless > *:last-child {
border-radius:0 4px 4px 0 !important;
}
.button + .button {
margin-left: 1rem;
}
.buttons > .button + .button {
margin-left: 0;
}
.button:hover,
[type="button"]:hover,
[type="reset"]:hover,
@ -564,6 +570,7 @@ button:disabled:hover {
.button.success,
[type="submit"] {
color: #fff;
z-index: 1; /* hightlight from other button's border when grouped */
background-color: #000;
background-color: var(--color-primary);
}

2
dist/chota.min.css vendored
View File

File diff suppressed because one or more lines are too long

26
docs/_includes/utilities.html
View File

@ -87,12 +87,34 @@
<li><code>hide-pr</code> - hides the element for printing</li>
</ul>
<h4>Details</h4>
<p>You can have a <code>&lt;details&gt;</code> with a <code>.dropdown</code> class to defines a toggle-able block of content with a summary and additional details.</p>
<details class="dropdown">
<p>You can have a <code>&lt;details&gt;</code> to defines a toggle-able block of content with a summary and additional details.</p>
<details>
<summary>Read more</summary>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec
nulla vitae mollis.
</p>
</details>
<p>This can be coupled to a <code>.dropdown</code> and a couple of <code>.button</code> and <code>.card</code> classes to defines a dropdown button.</p>
<details class=dropdown>
<summary class="button outline">My Profile</summary>
<div class=card>
<p><a href="#">Edit</a></p>
<p><a href="#">Alerts&nbsp;<span class=tag>3</span></a></p>
<hr/>
<p><a href="#" class=text-error>Logout</a></p>
</div>
</details>
<details class=dropdown>
<summary class="button outline">Login</summary>
<form class="card row">
<input class=col-12 placeholder=username>
<input class=col-12 placeholder=password type=password>
<footer class=is-right>
<a class="button clear">Sign up</a>
<button type=submit>Sign in</button>
</footer>
</form>
</details>
</section>

22
src/_form.css
View File

@ -87,20 +87,27 @@ button {
display: flex;
}
.grouped > input:not(:last-child),
.grouped > select:not(:last-child),
.grouped > .button:not(:last-child) {
.grouped > *:not(:last-child) {
margin-right: 16px;
}
.grouped.gapless > * {
margin: 0 0 0 -1px !important;
border-radius:0 !important;
}
.grouped.gapless > *:first-child {
margin: 0 !important;
border-radius:4px 0 0 4px !important;
}
.grouped.gapless > *:last-child {
border-radius:0 4px 4px 0 !important;
}
.button + .button {
margin-left: 1rem;
}
.buttons > .button + .button {
margin-left: 0;
}
.button:hover,
[type="button"]:hover,
[type="reset"]:hover,
@ -132,6 +139,7 @@ button:disabled:hover {
.button.success,
[type="submit"] {
color: #fff;
z-index: 1; /* hightlight from other button's border when grouped */
background-color: #000;
background-color: var(--color-primary);
}