mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
Build CSS
This commit is contained in:
github-actions[bot]
parent
ddf41a191a
commit
951aae3801
77 changed files with 7702 additions and 7702 deletions
|
|
@ -1,209 +1,209 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/button") {
|
||||
/**
|
||||
* Button
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin on controls in Safari
|
||||
// 3. Show the overflow in Edge
|
||||
#{$parent-selector} button {
|
||||
margin: 0; // 2
|
||||
overflow: visible; // 3
|
||||
font-family: inherit; // 1
|
||||
text-transform: none; // 1
|
||||
}
|
||||
|
||||
// Correct the inability to style buttons in iOS and Safari
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button,
|
||||
#{$parent-selector} [role="button"] {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
||||
#{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
outline: none;
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
box-shadow: var(#{$css-var-prefix}box-shadow);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: 1rem;
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
border-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"])),
|
||||
&:is(:hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
|
||||
#{$css-var-prefix}box-shadow: var(
|
||||
#{$css-var-prefix}button-hover-box-shadow,
|
||||
0 0 0 rgba(0, 0, 0, 0)
|
||||
);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"] {
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
||||
[type="reset"].outline {
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
#{$parent-selector}
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
||||
[type="reset"].outline {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
#{$parent-selector}
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Secondary button without .class
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
#{$parent-selector}
|
||||
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
|
||||
#{$parent-selector}
|
||||
:where(fieldset[disabled])
|
||||
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/button") {
|
||||
/**
|
||||
* Button
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin on controls in Safari
|
||||
// 3. Show the overflow in Edge
|
||||
#{$parent-selector} button {
|
||||
margin: 0; // 2
|
||||
overflow: visible; // 3
|
||||
font-family: inherit; // 1
|
||||
text-transform: none; // 1
|
||||
}
|
||||
|
||||
// Correct the inability to style buttons in iOS and Safari
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button,
|
||||
#{$parent-selector} [role="button"] {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
||||
#{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
outline: none;
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
box-shadow: var(#{$css-var-prefix}box-shadow);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: 1rem;
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
border-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"])),
|
||||
&:is(:hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
|
||||
#{$css-var-prefix}box-shadow: var(
|
||||
#{$css-var-prefix}button-hover-box-shadow,
|
||||
0 0 0 rgba(0, 0, 0, 0)
|
||||
);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"] {
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
||||
[type="reset"].outline {
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
#{$parent-selector}
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
||||
[type="reset"].outline {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
#{$parent-selector}
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Secondary button without .class
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
#{$parent-selector}
|
||||
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
|
||||
#{$parent-selector}
|
||||
:where(fieldset[disabled])
|
||||
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,73 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/code") {
|
||||
/**
|
||||
* Code
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||
// 2. Correct the odd `em` font sizing in all browsers
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd,
|
||||
#{$parent-selector} samp {
|
||||
font-size: 0.875em; // 2
|
||||
font-family: var(#{$css-var-prefix}font-family); // 1
|
||||
}
|
||||
|
||||
#{$parent-selector} pre code {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
#{$parent-selector} pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd {
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: var(#{$css-var-prefix}code-background-color);
|
||||
color: var(#{$css-var-prefix}code-color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd {
|
||||
display: inline-block;
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
#{$parent-selector} pre {
|
||||
display: block;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
overflow-x: auto;
|
||||
|
||||
> code {
|
||||
display: block;
|
||||
padding: var(#{$css-var-prefix}spacing);
|
||||
background: none;
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
#{$parent-selector} kbd {
|
||||
background-color: var(#{$css-var-prefix}code-kbd-background-color);
|
||||
color: var(#{$css-var-prefix}code-kbd-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/code") {
|
||||
/**
|
||||
* Code
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||
// 2. Correct the odd `em` font sizing in all browsers
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd,
|
||||
#{$parent-selector} samp {
|
||||
font-size: 0.875em; // 2
|
||||
font-family: var(#{$css-var-prefix}font-family); // 1
|
||||
}
|
||||
|
||||
#{$parent-selector} pre code {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
#{$parent-selector} pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd {
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: var(#{$css-var-prefix}code-background-color);
|
||||
color: var(#{$css-var-prefix}code-color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd {
|
||||
display: inline-block;
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
#{$parent-selector} pre {
|
||||
display: block;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
overflow-x: auto;
|
||||
|
||||
> code {
|
||||
display: block;
|
||||
padding: var(#{$css-var-prefix}spacing);
|
||||
background: none;
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
#{$parent-selector} kbd {
|
||||
background-color: var(#{$css-var-prefix}code-kbd-background-color);
|
||||
color: var(#{$css-var-prefix}code-kbd-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,54 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/embedded") {
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change the alignment on media elements in all browsers (opinionated)
|
||||
#{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
#{$parent-selector} audio,
|
||||
#{$parent-selector} video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Add the correct display in iOS 4-7
|
||||
#{$parent-selector} audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Remove the border on iframes in all browsers (opinionated)
|
||||
#{$parent-selector} :where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// 1. Remove the border on images inside links in IE 10.
|
||||
// 2. Responsive by default
|
||||
#{$parent-selector} img {
|
||||
max-width: 100%; // 2
|
||||
height: auto; // 2
|
||||
border-style: none; // 1
|
||||
}
|
||||
|
||||
// Change the fill color to match the text color in all browsers (opinionated)
|
||||
#{$parent-selector} :where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Hide the overflow in IE
|
||||
#{$parent-selector} svg:not(:root),
|
||||
#{$parent-selector} svg:not(:host) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/embedded") {
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change the alignment on media elements in all browsers (opinionated)
|
||||
#{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
#{$parent-selector} audio,
|
||||
#{$parent-selector} video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Add the correct display in iOS 4-7
|
||||
#{$parent-selector} audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Remove the border on iframes in all browsers (opinionated)
|
||||
#{$parent-selector} :where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// 1. Remove the border on images inside links in IE 10.
|
||||
// 2. Responsive by default
|
||||
#{$parent-selector} img {
|
||||
max-width: 100%; // 2
|
||||
height: auto; // 2
|
||||
border-style: none; // 1
|
||||
}
|
||||
|
||||
// Change the fill color to match the text color in all browsers (opinionated)
|
||||
#{$parent-selector} :where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Hide the overflow in IE
|
||||
#{$parent-selector} svg:not(:root),
|
||||
#{$parent-selector} svg:not(:host) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/figure") {
|
||||
/**
|
||||
* Figure
|
||||
*/
|
||||
|
||||
#{$parent-selector} figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
|
||||
color: var(#{$css-var-prefix}muted-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/figure") {
|
||||
/**
|
||||
* Figure
|
||||
*/
|
||||
|
||||
#{$parent-selector} figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
|
||||
color: var(#{$css-var-prefix}muted-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,69 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/link") {
|
||||
/**
|
||||
* Link
|
||||
*/
|
||||
|
||||
#{$parent-selector} :where(a:not([role="button"])),
|
||||
#{$parent-selector} [role="link"] {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
|
||||
outline: none;
|
||||
background-color: var(#{$css-var-prefix}background-color); // 1
|
||||
color: var(#{$css-var-prefix}color);
|
||||
text-decoration: var(#{$css-var-prefix}text-decoration);
|
||||
text-decoration-color: var(#{$css-var-prefix}underline);
|
||||
text-underline-offset: 0.125em;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
text-decoration var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
|
||||
#{$css-var-prefix}text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
&.secondary {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} a {
|
||||
&[role="button"] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/link") {
|
||||
/**
|
||||
* Link
|
||||
*/
|
||||
|
||||
#{$parent-selector} :where(a:not([role="button"])),
|
||||
#{$parent-selector} [role="link"] {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
|
||||
outline: none;
|
||||
background-color: var(#{$css-var-prefix}background-color); // 1
|
||||
color: var(#{$css-var-prefix}color);
|
||||
text-decoration: var(#{$css-var-prefix}text-decoration);
|
||||
text-decoration-color: var(#{$css-var-prefix}underline);
|
||||
text-underline-offset: 0.125em;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
text-decoration var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
|
||||
#{$css-var-prefix}text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
&.secondary {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} a {
|
||||
&[role="button"] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/misc") {
|
||||
/**
|
||||
* Misc
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance of border color in Firefox
|
||||
// 2. Add the correct box sizing in Firefox
|
||||
#{$parent-selector} hr {
|
||||
height: 0; // 2
|
||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
|
||||
color: inherit; // 1
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
#{$parent-selector} [hidden],
|
||||
#{$parent-selector} template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
} @else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
#{$parent-selector} canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/misc") {
|
||||
/**
|
||||
* Misc
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance of border color in Firefox
|
||||
// 2. Add the correct box sizing in Firefox
|
||||
#{$parent-selector} hr {
|
||||
height: 0; // 2
|
||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
|
||||
color: inherit; // 1
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
#{$parent-selector} [hidden],
|
||||
#{$parent-selector} template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
} @else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
#{$parent-selector} canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +1,62 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/table") {
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Collapse border spacing in all browsers (opinionated)
|
||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||
#{$parent-selector} :where(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse; // 1
|
||||
border-spacing: 0;
|
||||
text-indent: 0; // 2
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Cells
|
||||
#{$parent-selector} th,
|
||||
#{$parent-selector} td {
|
||||
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
|
||||
border-bottom: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}table-border-color);
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
// Footer
|
||||
#{$parent-selector} tfoot {
|
||||
th,
|
||||
td {
|
||||
border-top: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}table-border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Striped
|
||||
@if enable-classes {
|
||||
#{$parent-selector} table {
|
||||
&.striped {
|
||||
tbody tr:nth-child(odd of :not([hidden])) th,
|
||||
tbody tr:nth-child(odd of :not([hidden])) td {
|
||||
background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/table") {
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Collapse border spacing in all browsers (opinionated)
|
||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||
#{$parent-selector} :where(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse; // 1
|
||||
border-spacing: 0;
|
||||
text-indent: 0; // 2
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Cells
|
||||
#{$parent-selector} th,
|
||||
#{$parent-selector} td {
|
||||
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
|
||||
border-bottom: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}table-border-color);
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
// Footer
|
||||
#{$parent-selector} tfoot {
|
||||
th,
|
||||
td {
|
||||
border-top: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}table-border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Striped
|
||||
@if enable-classes {
|
||||
#{$parent-selector} table {
|
||||
&.striped {
|
||||
tbody tr:nth-child(odd of :not([hidden])) th,
|
||||
tbody tr:nth-child(odd of :not([hidden])) td {
|
||||
background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,182 +1,182 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/typography") {
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
#{$parent-selector} b,
|
||||
#{$parent-selector} strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
||||
#{$parent-selector} sub,
|
||||
#{$parent-selector} sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
#{$parent-selector} sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
#{$parent-selector} sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} address,
|
||||
#{$parent-selector} blockquote,
|
||||
#{$parent-selector} dl,
|
||||
#{$parent-selector} ol,
|
||||
#{$parent-selector} p,
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} table,
|
||||
#{$parent-selector} ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-style: normal;
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
}
|
||||
|
||||
// Headings
|
||||
#{$parent-selector} h1,
|
||||
#{$parent-selector} h2,
|
||||
#{$parent-selector} h3,
|
||||
#{$parent-selector} h4,
|
||||
#{$parent-selector} h5,
|
||||
#{$parent-selector} h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: var(#{$css-var-prefix}font-size);
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
font-family: var(#{$css-var-prefix}font-family);
|
||||
}
|
||||
|
||||
#{$parent-selector} h1 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
|
||||
}
|
||||
#{$parent-selector} h2 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
|
||||
}
|
||||
#{$parent-selector} h3 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
|
||||
}
|
||||
#{$parent-selector} h4 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
|
||||
}
|
||||
#{$parent-selector} h5 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
|
||||
}
|
||||
#{$parent-selector} h6 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a block
|
||||
#{$parent-selector}
|
||||
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(#{$css-var-prefix}typography-spacing-top);
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
#{$parent-selector} p {
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Heading group
|
||||
#{$parent-selector} hgroup {
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:not(:first-child):last-child {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
|
||||
#{$css-var-prefix}font-weight: unset;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
#{$parent-selector} :where(ol, ul) {
|
||||
li {
|
||||
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// Margin-top for nested lists
|
||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
#{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0; // 1
|
||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
#{$parent-selector} ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
// Highlighted text
|
||||
#{$parent-selector} mark {
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(#{$css-var-prefix}mark-background-color);
|
||||
color: var(#{$css-var-prefix}mark-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
#{$parent-selector} blockquote {
|
||||
display: block;
|
||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||
padding: var(#{$css-var-prefix}spacing);
|
||||
border-right: none;
|
||||
border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
||||
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
||||
border-inline-end: none;
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
|
||||
color: var(#{$css-var-prefix}blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
||||
#{$parent-selector} abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none; // 1
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// Ins
|
||||
#{$parent-selector} ins {
|
||||
color: var(#{$css-var-prefix}ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
#{$parent-selector} del {
|
||||
color: var(#{$css-var-prefix}del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
#{$parent-selector} ::selection {
|
||||
background-color: var(#{$css-var-prefix}text-selection-color);
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/typography") {
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
#{$parent-selector} b,
|
||||
#{$parent-selector} strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
||||
#{$parent-selector} sub,
|
||||
#{$parent-selector} sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
#{$parent-selector} sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
#{$parent-selector} sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} address,
|
||||
#{$parent-selector} blockquote,
|
||||
#{$parent-selector} dl,
|
||||
#{$parent-selector} ol,
|
||||
#{$parent-selector} p,
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} table,
|
||||
#{$parent-selector} ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-style: normal;
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
}
|
||||
|
||||
// Headings
|
||||
#{$parent-selector} h1,
|
||||
#{$parent-selector} h2,
|
||||
#{$parent-selector} h3,
|
||||
#{$parent-selector} h4,
|
||||
#{$parent-selector} h5,
|
||||
#{$parent-selector} h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: var(#{$css-var-prefix}font-size);
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
font-family: var(#{$css-var-prefix}font-family);
|
||||
}
|
||||
|
||||
#{$parent-selector} h1 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
|
||||
}
|
||||
#{$parent-selector} h2 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
|
||||
}
|
||||
#{$parent-selector} h3 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
|
||||
}
|
||||
#{$parent-selector} h4 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
|
||||
}
|
||||
#{$parent-selector} h5 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
|
||||
}
|
||||
#{$parent-selector} h6 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a block
|
||||
#{$parent-selector}
|
||||
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(#{$css-var-prefix}typography-spacing-top);
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
#{$parent-selector} p {
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Heading group
|
||||
#{$parent-selector} hgroup {
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:not(:first-child):last-child {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
|
||||
#{$css-var-prefix}font-weight: unset;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
#{$parent-selector} :where(ol, ul) {
|
||||
li {
|
||||
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// Margin-top for nested lists
|
||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
#{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0; // 1
|
||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
#{$parent-selector} ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
// Highlighted text
|
||||
#{$parent-selector} mark {
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(#{$css-var-prefix}mark-background-color);
|
||||
color: var(#{$css-var-prefix}mark-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
#{$parent-selector} blockquote {
|
||||
display: block;
|
||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||
padding: var(#{$css-var-prefix}spacing);
|
||||
border-right: none;
|
||||
border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
||||
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
||||
border-inline-end: none;
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
|
||||
color: var(#{$css-var-prefix}blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
||||
#{$parent-selector} abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none; // 1
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// Ins
|
||||
#{$parent-selector} ins {
|
||||
color: var(#{$css-var-prefix}ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
#{$parent-selector} del {
|
||||
color: var(#{$css-var-prefix}del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
#{$parent-selector} ::selection {
|
||||
background-color: var(#{$css-var-prefix}text-selection-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue