xmeter/css/src/__tool.delims.less

A default stylesheet with a set of tools that make designing with vertical rhythm easy.

/*################################*\
    xmeter  |  __tool.delims.less
\*################################*/


// This tool adds opening and closing punctuation marks surrounding an element.
// The punctuation marks are given by the `quotes` property.
//
// @arg - (default: `none`) an even number of space-separated left/right delimiters,
//        each pair used for one level of nested quotation.
// ^author
// : Chris Harvey
// ^updated
// : 2016-05-05
.delims(@arg: none) {
  quotes: @arg;
  &::before { content:  open-quote; }
  &::after  { content: close-quote; }
}

.parens()            { .delims('(' ')'); }
.brackets()          { .delims('[' ']'); }
.braces()            { .delims('{' '}'); }
.angles()            { .delims('<' '>'); }   // '\003c' '\003e' // &lt;     &gt;

.apos()              { .delims('\'' '\''); } // '\0027' '\0027' // &apos;   &apos;
.quot()              { .delims('\"' '\"'); } // '\0022' '\0022' // &quot;   &quot;

.quotes-single()     { .delims('\2018' '\2019'); } // '‘' '’' // &lsquo;  &rsquo;
.quotes-double()     { .delims('\201c' '\201d'); } // '“' '”' // &ldquo;  &rdquo;
.guillemets-single() { .delims('\2039' '\203a'); } // '‹' '›' // &lsaquo; &rsaquo;
.guillemets-double() { .delims('\00ab' '\00bb'); } // '«' '»' // &laquo;  &raquo;