OwlCyberSecurity - MANAGER

Edit File: _lozenges.scss

@if $use-lozenges == true{

/*------------------------------------*\
 $LOZENGES
\*------------------------------------*/
/**
 * Create pill- and lozenge-like runs of text, e.g.:
 *
 This here is a pill!
 *
 This here is also a lozenge!
 *
 * 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