166 lines
3.2 KiB
SCSS
166 lines
3.2 KiB
SCSS
// Text-level semantics
|
|
//
|
|
// The elements in this section give semantics to inline text.
|
|
|
|
// Abbreviation / Acroynym
|
|
//
|
|
// The `<abbr>` element makes the meanings of abbreviations and acronyms visible
|
|
// on hover.
|
|
|
|
abbr[title] {
|
|
// Remove the bottom border in Chrome 57- and Firefox 39-.
|
|
border-bottom: 0;
|
|
// sass-lint:disable no-duplicate-properties
|
|
// Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
text-decoration: underline;
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
// Bold
|
|
//
|
|
// The `<strong>` element or the `<b>` element is for emphasizing a snippet of
|
|
// text with a heavier font-weight.
|
|
//
|
|
// Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
|
|
// without conveying additional importance.
|
|
|
|
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
|
|
|
b,
|
|
strong {
|
|
font-weight: inherit;
|
|
}
|
|
|
|
// sass-lint:disable no-mergeable-selectors
|
|
b,
|
|
strong {
|
|
// Add the correct font weight in Chrome, Edge, and Safari.
|
|
font-weight: bolder;
|
|
}
|
|
// sass-lint:enable no-mergeable-selectors
|
|
|
|
// Cite
|
|
//
|
|
// The `<cite>` element represents a reference to a creative work.
|
|
|
|
cite {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Code
|
|
//
|
|
// The `<code>` element represents a fragment of computer code. The `<samp>`
|
|
// element represents (sample) output from a program or computing system. The
|
|
// `<kbd>` element represents user input (typically keyboard input.)
|
|
|
|
code,
|
|
kbd,
|
|
samp {
|
|
@extend %monospace;
|
|
}
|
|
|
|
// Deleted text
|
|
//
|
|
// The `<del>` element indicates blocks of text that have been deleted.
|
|
|
|
del {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Definition
|
|
//
|
|
// The `<dfn>` element represents the defining instance of a term.
|
|
|
|
dfn {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Italics
|
|
//
|
|
// The `<em>` element or the `<i>` element is used for emphasizing a snippet of
|
|
// text with italics.
|
|
//
|
|
// Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
|
|
// technical terms, etc.
|
|
|
|
i,
|
|
em {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Inserted text
|
|
//
|
|
// The `<ins>` element indicates additions to the document.
|
|
|
|
ins {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Marked text
|
|
//
|
|
// The `<mark>` element highlights a run of text due to its relevance in another
|
|
// context.
|
|
|
|
mark {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Quote
|
|
//
|
|
// The `<q>` element represents an inline quote from another source. Longer
|
|
// quotes should use the `<blockquote>` element.
|
|
|
|
q {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Strikethrough text
|
|
//
|
|
// The `<s>` element indicates blocks of text that are no longer relevant.
|
|
|
|
s {
|
|
// Add your styles.
|
|
}
|
|
|
|
// Small text
|
|
//
|
|
// For de-emphasizing inline or blocks of text, use the `<small>` element to set
|
|
// text at 80% the size of the parent.
|
|
|
|
small {
|
|
// Add the correct font size in all browsers.
|
|
@include font-size(s);
|
|
}
|
|
|
|
// Superscript / Subscript
|
|
//
|
|
// The `<sup>` element represents a superscript and the `<sub>` element
|
|
// represents a subscript.
|
|
|
|
sub,
|
|
sup {
|
|
// Prevent `sub` and `sup` elements from affecting the line height in
|
|
// all browsers.
|
|
@include font-size(xs);
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -.5em;
|
|
}
|
|
|
|
// Underlined text
|
|
//
|
|
// To underline text use the `<u>` element. Not recommended since underlines are
|
|
// used by web browsers to style hyperlinks.
|
|
|
|
u {
|
|
// Add your styles.
|
|
}
|