Replace obsolete normalize with a lightweight reset.
This commit is contained in:
Fredrik Jonsson
parent
8974e915aa
commit
a1e745c686
11 changed files with 220 additions and 703 deletions
|
|
@ -1,25 +0,0 @@
|
|||
// Normalize.css is intended to be used as an alternative to CSS resets.
|
||||
//
|
||||
// @see https://necolas.github.io/normalize.css/
|
||||
//
|
||||
// This directory is a slight fork of this original source:
|
||||
// normalize.css 8.0.1 | MIT License
|
||||
|
||||
|
||||
// Universal
|
||||
// ==========================================================================
|
||||
|
||||
// Broken into modular pieces to make it easier to edit.
|
||||
@import 'document/document';
|
||||
@import 'sections/sections';
|
||||
@import 'grouping/grouping';
|
||||
@import 'links/links';
|
||||
@import 'text/text';
|
||||
@import 'embedded/embedded';
|
||||
@import 'forms/forms';
|
||||
@import 'tables/tables';
|
||||
@import 'interactive/interactive';
|
||||
@import 'scripting/scripting';
|
||||
|
||||
// Note: we allow the .button component (loaded by forms) to override :link, by
|
||||
// loading links first.
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
// stylelint-disable property-no-vendor-prefix
|
||||
|
||||
// Document
|
||||
//
|
||||
// The default font styles are inherited from the `<html>` element.
|
||||
|
||||
html {
|
||||
// Change the default font family in all browsers (opinionated).
|
||||
@include typeface(body);
|
||||
// Correct the line height in all browsers.
|
||||
@include define-type-sizing();
|
||||
// Prevent adjustments of font size after orientation changes in IE on Windows
|
||||
// Phone and in iOS.
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
// On short pages, we want any background gradients to fill the entire height
|
||||
// of the browser.
|
||||
min-height: 100%;
|
||||
// Use the saner border-box model.
|
||||
box-sizing: border-box;
|
||||
// Use smooth scrolling.
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@include respond-to(xxl) {
|
||||
@include define-type-sizing($base-font-size-2, $base-line-height-2);
|
||||
}
|
||||
}
|
||||
|
||||
// Use the saner border-box model for all elements.
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// Embedded content
|
||||
|
||||
// Audio
|
||||
|
||||
audio {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
// Image
|
||||
//
|
||||
// An `<img>` element represents an image.
|
||||
|
||||
img {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
// Suppress the space beneath the baseline
|
||||
// vertical-align: bottom;
|
||||
|
||||
// Responsive images
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Video
|
||||
|
||||
video {
|
||||
// Add your styles.
|
||||
}
|
||||
|
|
@ -1,229 +0,0 @@
|
|||
// stylelint-disable property-no-vendor-prefix
|
||||
|
||||
// Form defaults
|
||||
//
|
||||
// These are the default base styles applied to HTML form elements.
|
||||
//
|
||||
// Component classes can override these styles, but if no class applies a style
|
||||
// to an HTML form element, these styles will be the ones displayed.
|
||||
|
||||
//
|
||||
// The following rules are from normalize.css and help to fix inconsistencies
|
||||
// across various browsers. You should probably leave these rules as is and jump
|
||||
// to the "Buttons" rule on line 92 before you start editing this file.
|
||||
//
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
// Change the font styles in all browsers (opinionated).
|
||||
@include typeface(body);
|
||||
@include line-height(1);
|
||||
font-size: 100%;
|
||||
// Keep form elements constrained in their containers.
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
// Remove the margin in Firefox and Safari.
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Show the overflow in IE.
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// Show the overflow in Edge.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type='search'] {
|
||||
// Correct the odd appearance in Chrome and Safari.
|
||||
-webkit-appearance: textfield;
|
||||
// Correct the outline style in Safari.
|
||||
outline-offset: -2px;
|
||||
|
||||
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
// Correct the inability to style clickable types in iOS and Safari.
|
||||
-webkit-appearance: button;
|
||||
// Change font properties to `inherit` in Safari.
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// Buttons built with the `<button>` element are the most flexible for styling
|
||||
// purposes. But `<input>` elements with `type` set to `submit`, `image`,
|
||||
// `reset`, or `button` are also supported.
|
||||
//
|
||||
// Below is the default button styling. To see variations on the button styling
|
||||
// see the [button component](section-forms.html#kssref-forms-button).
|
||||
//
|
||||
// :hover - Hover styling.
|
||||
// :active:hover - Depressed button styling.
|
||||
|
||||
@import 'components/button/button';
|
||||
|
||||
// The %text-form-element can be used to style `<input>` text types and
|
||||
// `<textarea>` elements at the same time.
|
||||
%text-form-element {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
// Inputs
|
||||
//
|
||||
// The `<input>` element is mostly used for text-based inputs that include the
|
||||
// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
|
||||
// `time`, `number`, `range`, `color`, and `file`.
|
||||
//
|
||||
// Note: Certain font size values applied to `number` inputs cause the cursor
|
||||
// style of the decrement button to change from `default` to `text`.
|
||||
//
|
||||
// Note: The search input is not fully stylable by default. In Chrome and Safari
|
||||
// on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
|
||||
// Chrome and Safari on Windows you can't control `border` properly. It will
|
||||
// apply `border-width` but will only show a border color (which cannot be
|
||||
// controlled) for the outer 1px of that border. Applying
|
||||
// `-webkit-appearance: textfield` addresses these issues without removing the
|
||||
// benefits of search inputs (e.g. showing past searches). Safari (but not
|
||||
// Chrome) will clip the cancel button on when it has padding (and `textfield`
|
||||
// appearance).
|
||||
|
||||
[type='text'],
|
||||
[type='search'],
|
||||
[type='tel'],
|
||||
[type='url'],
|
||||
[type='email'],
|
||||
[type='password'],
|
||||
[type='date'],
|
||||
[type='time'],
|
||||
[type='number'] {
|
||||
@extend %text-form-element !optional;
|
||||
}
|
||||
|
||||
[type='range'] {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
[type='color'] {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
[type='file'] {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
//
|
||||
// If an `<input>` element has the `type='checkbox'` attribute set, the form
|
||||
// field is displayed as a checkbox.
|
||||
//
|
||||
// It is recommended that you do not style checkbox and radio inputs as
|
||||
// Firefox's implementation does not respect box-sizing, padding, or width.
|
||||
|
||||
// Radio buttons
|
||||
//
|
||||
// If an `<input>` element has the `type='radio'` attribute set, the form field
|
||||
// is displayed as a radio button.
|
||||
//
|
||||
// It is recommended that you do not style checkbox and radio inputs as
|
||||
// Firefox's implementation does not respect box-sizing, padding, or width.
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
// Add the correct box sizing in IE 10-.
|
||||
box-sizing: border-box;
|
||||
// Remove the padding in IE 10-.
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Fieldsets
|
||||
//
|
||||
// The `<fieldset>` element groups a set of form fields, optionally under a
|
||||
// common name given by the `<legend>` element.
|
||||
|
||||
fieldset {
|
||||
// Correct the padding in Firefox.
|
||||
@include padding(.35 .5 .65);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
legend {
|
||||
// Correct the text wrapping in Edge and IE.
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
// Align legend text with a fieldset's text while removing left padding so
|
||||
// people aren't caught out if they zero out fieldset padding.
|
||||
margin-left: -5px;
|
||||
padding: 0 5px;
|
||||
// Correct the color inheritance from `fieldset` elements in IE.
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// Labels
|
||||
//
|
||||
// The `<label>` element represents a caption of a form field. The label can be
|
||||
// associated with a specific form control by using the `for` attribute or by
|
||||
// putting the form control inside the label element itself.
|
||||
|
||||
label {
|
||||
// Drupal-style form labels.
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Select list
|
||||
//
|
||||
// The `<select>` element represents a form field for selecting amongst a set of
|
||||
// options.
|
||||
//
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `<select>`, unless a `border` property is set. The default font
|
||||
// weight on `optgroup` elements cannot safely be changed in Chrome on OSX and
|
||||
// Safari on OS X.
|
||||
|
||||
select {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
// Progress
|
||||
//
|
||||
// The `<progress>` element represents the completion progress of a task.
|
||||
|
||||
progress {
|
||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Text areas
|
||||
//
|
||||
// The `<textarea>` element represents a multi-line plain text form field.
|
||||
|
||||
textarea {
|
||||
@extend %text-form-element !optional;
|
||||
// Remove the default vertical scrollbar in IE.
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
// Dependencies.
|
||||
@import 'components/divider/divider';
|
||||
|
||||
// Grouping content
|
||||
|
||||
|
||||
// Block quotes
|
||||
//
|
||||
// The `<blockquote>` element is for quoting blocks of content from another
|
||||
// source within your document. Wrap the `<blockquote>` around any <abbr
|
||||
// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
|
||||
// quotes, we recommend a `<p>`.
|
||||
//
|
||||
// Optionally, add a `<footer>` to identify the source of the quote, wrapping
|
||||
// the name of the source work in `<cite>`.
|
||||
|
||||
blockquote {
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margin.
|
||||
// Also indent the quote on both sides.
|
||||
@include margin(1 $indent-amount);
|
||||
}
|
||||
|
||||
// Lists
|
||||
//
|
||||
// Style guide: base.grouping.lists
|
||||
|
||||
// Unordered list
|
||||
//
|
||||
// The `<ul>` element is a list of items in which the order does <em>not</em>
|
||||
// explicitly matter.
|
||||
|
||||
// Ordered list
|
||||
//
|
||||
// The `<ol>` element is a list of items in which the order <em>does</em>
|
||||
// explicitly matter.
|
||||
|
||||
// Description list
|
||||
//
|
||||
// The `<dl>` element is a list of terms with their associated descriptions.
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
// Add vertical rhythm margins.
|
||||
@include margin(1 0);
|
||||
}
|
||||
|
||||
dt {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 $indent-amount;
|
||||
|
||||
@include rtl {
|
||||
margin: 0 $indent-amount 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 $indent-amount;
|
||||
|
||||
@include rtl {
|
||||
padding: 0 $indent-amount 0 0;
|
||||
}
|
||||
|
||||
// Turn off margins on nested lists.
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Figures
|
||||
//
|
||||
// The `<figure>` element can be used to annotate illustrations, diagrams,
|
||||
// photos, code listings, etc.
|
||||
//
|
||||
// Optionally, a `<figcaption>` element inside the `<figure>` represents the
|
||||
// caption of the figure.
|
||||
|
||||
figure {
|
||||
// Add vertical rhythm margins.
|
||||
@include margin(1 0);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
// Horizontal rule
|
||||
//
|
||||
// The `<hr>` element represents a paragraph-level thematic break, e.g. a scene
|
||||
// change in a story, or a transition to another topic within a section of a
|
||||
// reference book.
|
||||
|
||||
hr {
|
||||
@extend %divider;
|
||||
// Add the correct box sizing in Firefox.
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
// Show the overflow in Edge and IE.
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Main
|
||||
//
|
||||
// The `<main>` element represents the main content of the page.
|
||||
|
||||
main {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
// Body copy
|
||||
//
|
||||
// The default `font-size` and `line-height` properties are applied to the
|
||||
// `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
|
||||
// a top and bottom margin.
|
||||
|
||||
p,
|
||||
pre {
|
||||
@include margin(.75 0);
|
||||
}
|
||||
|
||||
// Preformatted text
|
||||
//
|
||||
// The `<pre>` element represents a block of preformatted text, such as
|
||||
// fragments of computer code, ASCII art, etc.
|
||||
|
||||
%monospace {
|
||||
// Correct the inheritance and scaling of font size in all browsers.
|
||||
// The font-family value ends with ", serif".
|
||||
@include typeface(monospace);
|
||||
// Correct the odd `em` font sizing in all browsers.
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
@extend %monospace;
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// Interactive
|
||||
|
||||
// Details
|
||||
|
||||
details {
|
||||
// Add the correct display in Edge, IE, and Firefox.
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
// Add the correct display in all browsers.
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
// Menu
|
||||
|
||||
menu {
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margin.
|
||||
@include margin(1 0);
|
||||
// Set consistent space for the list style image.
|
||||
padding: 0 0 0 $indent-amount;
|
||||
|
||||
@include rtl {
|
||||
padding: 0 $indent-amount 0 0;
|
||||
}
|
||||
|
||||
// Turn off margins on nested lists.
|
||||
menu &,
|
||||
ol &,
|
||||
ul & {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
// Links
|
||||
//
|
||||
// Hyperlinks are used to allow the user to navigate to other resources or to
|
||||
// download a resource.
|
||||
//
|
||||
// The order of link states are based on Eric Meyer's article:
|
||||
// http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
|
||||
//
|
||||
// :visited - A link that has already been visited.
|
||||
// :hover - A link that is being hovered over.
|
||||
// :focus - A link that has been given keyboard focus.
|
||||
// :active - A link that is being actively clicked.
|
||||
|
||||
a,
|
||||
%link {
|
||||
color: var(--color-link);
|
||||
// stylelint-disable property-no-vendor-prefix
|
||||
// Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
// Any element can receive focus, but only links can be visited, so we can
|
||||
// safely lower this selector's specificity. This also ensures visited links
|
||||
// with additional styles won't have their styles overridden.
|
||||
:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// Scripting
|
||||
|
||||
// Canvas
|
||||
|
||||
canvas {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
// Template
|
||||
|
||||
template {
|
||||
// Add your styles.
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
// Sections
|
||||
// ==========================================================================
|
||||
|
||||
|
||||
body {
|
||||
// Output a horizontal grid to help with debugging typography. The
|
||||
// $typey-debug variable will toggle its output.
|
||||
@include typey-debug-grid();
|
||||
// Remove the margin in all browsers (opinionated).
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Headings
|
||||
//
|
||||
// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
|
||||
// classes are also available, for when you want to match the font styling of a
|
||||
// heading but still want your text to be displayed inline.
|
||||
|
||||
// Correct the font size and margin on `h1` elements within `section` and
|
||||
// `article` contexts in Chrome, Firefox, and Safari.
|
||||
h1,
|
||||
%h1 {
|
||||
// Set the font-size and line-height while keeping a proper vertical rhythm.
|
||||
@include type-layout(xxl, 1.5);
|
||||
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margins.
|
||||
@include margin-top(1, xxl);
|
||||
@include margin-bottom(1, xxl);
|
||||
}
|
||||
|
||||
h2,
|
||||
%h2 {
|
||||
@include type-layout(xl, 1.5);
|
||||
@include margin-top(1, xl);
|
||||
@include margin-bottom(1, xl);
|
||||
}
|
||||
|
||||
h3,
|
||||
%h3 {
|
||||
@include type-layout(l, 1.5);
|
||||
@include margin-top(1, l);
|
||||
@include margin-bottom(1, l);
|
||||
}
|
||||
|
||||
h4,
|
||||
%h4 {
|
||||
@include type-layout(m, 1);
|
||||
@include margin-top(1, m);
|
||||
@include margin-bottom(1, m);
|
||||
}
|
||||
|
||||
h5,
|
||||
%h5 {
|
||||
@include type-layout(s, 1);
|
||||
@include margin-top(1, s);
|
||||
@include margin-bottom(1, s);
|
||||
}
|
||||
|
||||
h6,
|
||||
%h6 {
|
||||
@include type-layout(xs, 1);
|
||||
@include margin-top(1, xs);
|
||||
@include margin-bottom(1, xs);
|
||||
}
|
||||
|
||||
@include respond-to(s) {
|
||||
h1,
|
||||
%h1 {
|
||||
// Set the font-size and line-height while keeping a proper vertical rhythm.
|
||||
@include type-layout(xxl-2, 2);
|
||||
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margins.
|
||||
@include margin-top(1, xxl-2);
|
||||
@include margin-bottom(1, xxl-2);
|
||||
}
|
||||
|
||||
h2,
|
||||
%h2 {
|
||||
@include type-layout(xl-2, 1.5);
|
||||
@include margin-top(1, xl-2);
|
||||
@include margin-bottom(1, xl-2);
|
||||
}
|
||||
|
||||
h3,
|
||||
%h3 {
|
||||
@include type-layout(l-2, 1.5);
|
||||
@include margin-top(1, l-2);
|
||||
@include margin-bottom(1, l-2);
|
||||
}
|
||||
|
||||
h4,
|
||||
%h4 {
|
||||
@include type-layout(m-2, 1);
|
||||
@include margin-top(1, m-2);
|
||||
@include margin-bottom(1, m-2);
|
||||
}
|
||||
|
||||
h5,
|
||||
%h5 {
|
||||
@include type-layout(s-2, 1);
|
||||
@include margin-top(1, s-2);
|
||||
@include margin-bottom(1, s-2);
|
||||
}
|
||||
|
||||
h6,
|
||||
%h6 {
|
||||
@include type-layout(xs-2, 1);
|
||||
@include margin-top(1, xs-2);
|
||||
@include margin-bottom(1, xs-2);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
// Tables
|
||||
//
|
||||
// The `<table>` element displays tabular data in rows, columns, and cells.
|
||||
|
||||
table {
|
||||
// Add vertical rhythm margins.
|
||||
@include margin(1 0);
|
||||
// Remove most spacing between table cells.
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
// Prevent cramped-looking tables
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
// Remove most spacing between table cells.
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
// 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;
|
||||
// stylelint-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;
|
||||
}
|
||||
|
||||
// stylelint-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.
|
||||
}
|
||||
Loading…
Reference in a new issue