48 lines
1.4 KiB
SCSS
48 lines
1.4 KiB
SCSS
@charset "UTF-8";
|
||
@if $use-lozenges == true{
|
||
|
||
/*------------------------------------*\
|
||
$LOZENGES
|
||
\*------------------------------------*/
|
||
/**
|
||
* Create pill- and lozenge-like runs of text, e.g.:
|
||
*
|
||
<p>This <span class=pill>here</span> is a pill!</p>
|
||
*
|
||
<p>This <span class=loz>here</span> is also a lozenge!</p>
|
||
*
|
||
* Pills have fully rounded ends, lozenges have only their corners rounded.
|
||
*
|
||
* Demo: jsfiddle.net/inuitcss/N3pGm
|
||
*
|
||
*/
|
||
.pill{
|
||
display:inline-block;
|
||
/**
|
||
* These numbers set in ems mean that, at its narrowest, a lozenge will be
|
||
* the same width as the `line-height` set on the `html` element.
|
||
* This allows us to use the `.loz` in almost any `font-size` we wish.
|
||
*/
|
||
min-width: ($line-height-ratio * 0.666667) * 1em;
|
||
padding-right:($line-height-ratio * 0.166667) * 1em;
|
||
padding-left: ($line-height-ratio * 0.166667) * 1em;
|
||
/* =1.50em */
|
||
text-align:center;
|
||
background-color:$base-ui-color;
|
||
color:#fff; /* Override this color in your theme stylesheet */
|
||
|
||
/**
|
||
* Normally we’d use border-radius:100%; but instead here we just use an
|
||
* overly large number; `border-radius:100%;` would create an oval on
|
||
* non-square elements whereas we just want to round the ends of an element.
|
||
*/
|
||
border-radius:100px;
|
||
}
|
||
|
||
.loz{
|
||
@extend .pill;
|
||
border-radius:$brand-round;
|
||
}
|
||
|
||
}//endif
|