1
0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00

Add .grouped.gapless class

This commit is contained in:
yne 2019-09-14 23:55:09 +02:00
parent f05ce0504d
commit 121eb60df0
3 changed files with 29 additions and 14 deletions

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

File diff suppressed because one or more lines are too long

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);
}