nitro theme: tuck adjacent buttons under the right slant
A -0.8em right margin pulls whatever follows an article button (another button or text) under the slant's empty top triangle: adjacent buttons' slant bands overlap horizontally by ~0.3em while the painted parallel edges keep a constant ~0.3em clearance — overlapping but never touching.
This commit is contained in:
1 parent
cb046fe867
commit
d14fcbc4f3
1 file changed
+7
-1
@@ -151,7 +151,12 @@
|
|||||||
subordinate). border-radius is the fallback for browsers without
|
subordinate). border-radius is the fallback for browsers without
|
||||||
shape(). Asymmetric inline padding keeps the text clear of the
|
shape(). Asymmetric inline padding keeps the text clear of the
|
||||||
slants (wider on the right: the wide bottom-right sweep cuts deeper
|
slants (wider on the right: the wide bottom-right sweep cuts deeper
|
||||||
into the label's end side). Editor chrome (.icon-btn pens, .copy)
|
into the label's end side). The negative right margin tucks whatever
|
||||||
|
follows — another button or plain text — under the right slant's
|
||||||
|
empty top triangle: adjacent buttons' slant bands overlap by ~0.3em
|
||||||
|
horizontally while the painted edges keep ~0.3em apart (the slants
|
||||||
|
are parallel, so the clearance is constant top to bottom).
|
||||||
|
Editor chrome (.icon-btn pens, .copy)
|
||||||
keeps its own styling. The {contact:} envelope's line-height is
|
keeps its own styling. The {contact:} envelope's line-height is
|
||||||
reduced in the base stylesheet so it doesn't outgrow this height. */
|
reduced in the base stylesheet so it doesn't outgrow this height. */
|
||||||
.contact-trigger,
|
.contact-trigger,
|
||||||
@@ -161,6 +166,7 @@ article button:not(.icon-btn):not(.copy) {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 1.7em;
|
height: 1.7em;
|
||||||
padding: 0 1.3em 0 1em;
|
padding: 0 1.3em 0 1em;
|
||||||
|
margin-right: -0.8em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
/* Same typography as the contact trigger (raw <button>s otherwise get
|
/* Same typography as the contact trigger (raw <button>s otherwise get
|
||||||
the small UA font): nav family/weight, article size and leading. */
|
the small UA font): nav family/weight, article size and leading. */
|
||||||
|
|||||||
Reference in new issue
Block a user