mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 11:16:15 -04:00
Move styles in SCSS vars to CSS vars
This commit is contained in:
Lucas
parent
f67044ecae
commit
9b1ef33577
49 changed files with 2921 additions and 1841 deletions
|
|
@ -33,86 +33,6 @@ $enable-transitions: true !default;
|
|||
$enable-important: true !default;
|
||||
|
||||
|
||||
// Spacings
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Gutters and horizontals margins
|
||||
// For <body>, .grid, <nav>, <table>
|
||||
$spacing-gutter: 1rem !default;
|
||||
|
||||
// Blocks verticals margins and paddings
|
||||
// For <header>, <main>, <footer>, <section>, <article>
|
||||
// This value is proportionally multiplied according breakpoints for great responsive spacings
|
||||
$spacing-block: 2rem !default;
|
||||
|
||||
// Vertical margins for Typography and Form elements
|
||||
// This value is proportionally multiplied according breakpoints for great responsive spacings
|
||||
$spacing-typography: 1.5rem !default;
|
||||
|
||||
// Spacing between: Label and Input, Checkboxes, Radios
|
||||
$spacing-form-elements: $spacing-typography/6 !default;
|
||||
|
||||
// Padding for <input> and <button>
|
||||
$spacing-input-button-vertical: .75rem !default;
|
||||
$spacing-input-button-horizontal: 1rem !default;
|
||||
|
||||
|
||||
// Typography
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Sans serif native font stack
|
||||
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
$sans-serif:
|
||||
system-ui,
|
||||
-apple-system, // macOS 10.11-10.12
|
||||
"Segoe UI", // Windows 6+
|
||||
"Roboto", // Android 4+
|
||||
"Ubuntu", // Ubuntu 10.10+
|
||||
"Cantarell", // Gnome 3+
|
||||
"Noto Sans", // KDE Plasma 5+
|
||||
sans-serif, // Fallback
|
||||
"Apple Color Emoji", // macOS emoji
|
||||
"Segoe UI Emoji", // Windows emoji
|
||||
"Segoe UI Symbol", // Windows emoji
|
||||
"Noto Color Emoji" // Linux emoji
|
||||
!default;
|
||||
|
||||
// Monospace native font stack
|
||||
// // Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
$monospace:
|
||||
"Menlo", // macOS 10.10+
|
||||
"Consolas", // Windows 6+
|
||||
"Roboto Mono", // Android 4+
|
||||
"Ubuntu Monospace", // Ubuntu 10.10+
|
||||
"Noto Mono", // KDE Plasma 5+
|
||||
"Oxygen Mono", // KDE Plasma 4+
|
||||
"Liberation Mono", // Linux/OpenOffice fallback
|
||||
monospace, // Fallback
|
||||
"Apple Color Emoji", // macOS emoji
|
||||
"Segoe UI Emoji", // Windows emoji
|
||||
"Segoe UI Symbol", // Windows emoji
|
||||
"Noto Color Emoji" // Linux emoji
|
||||
!default;
|
||||
|
||||
$line-height: 1.5 !default;
|
||||
$text-weight: 400 !default;
|
||||
$heading-weight: 700 !default;
|
||||
|
||||
|
||||
// Blocks
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// For <form> elements, <button>, <article>, <details> inlined code, tooltips
|
||||
$round: .25rem !default;
|
||||
|
||||
|
||||
// Transitions
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// For <a>, <form> elements and <button>
|
||||
$transition: .2s ease-in-out !default;
|
||||
|
||||
|
||||
// Responsive
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -126,7 +46,6 @@ $transition: .2s ease-in-out !default;
|
|||
// To provide an easy and fine styling on each breakpoint
|
||||
// we didn't use @each, @mixin or @include.
|
||||
// That means you need to edit each CSS selector file to add a breakpoint
|
||||
// You can disable any viewports, base-font and spacing-factor with 'null'
|
||||
|
||||
// Breakpoints
|
||||
// 'null' disable the breakpoint
|
||||
|
|
@ -146,24 +65,3 @@ $viewports: (
|
|||
lg: 920px,
|
||||
xl: 1130px
|
||||
) !default;
|
||||
|
||||
// Base font for .rem
|
||||
// 'null' disable the base font on a breakpoint
|
||||
// 'xs' should not be 'null'
|
||||
$base-font: (
|
||||
xs: 16px,
|
||||
sm: 17px,
|
||||
md: 18px,
|
||||
lg: 19px,
|
||||
xl: 20px
|
||||
) !default;
|
||||
|
||||
// Multiplication factor for spacings
|
||||
// 'null' disable spacing factor on a breakpoint
|
||||
$spacing-factor: (
|
||||
xs: 1,
|
||||
sm: 1.25,
|
||||
md: 1.5,
|
||||
lg: 1.75,
|
||||
xl: 2
|
||||
) !default;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
|
||||
details {
|
||||
display: block;
|
||||
margin-bottom: $spacing-typography;
|
||||
padding-bottom: $spacing-typography/2;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding-bottom: calc(var(--spacing-typography) / 2);
|
||||
border-bottom: 1px solid var(--muted-border);
|
||||
|
||||
summary {
|
||||
|
|
@ -32,12 +32,15 @@ details {
|
|||
height: 1rem;
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
content: '';
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -45,7 +48,7 @@ details {
|
|||
}
|
||||
|
||||
~ * {
|
||||
margin-top: $spacing-typography/2;
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
|
||||
~ * {
|
||||
margin-top: 0;
|
||||
|
|
@ -57,7 +60,7 @@ details {
|
|||
&[open] {
|
||||
|
||||
summary {
|
||||
margin-bottom: $spacing-typography/4;
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
color: var(--muted-text);
|
||||
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -10,135 +10,123 @@ article {
|
|||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin: -$spacing-gutter;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
margin: calc(var(--spacing-gutter) * -1);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "sm");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "md");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "lg");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "xl");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
> header {
|
||||
margin-top: -$spacing-gutter*2;
|
||||
margin-bottom: $spacing-block;
|
||||
margin-top: calc(var(--spacing-gutter) * -2);
|
||||
margin-bottom: var(--spacing-block);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "sm");
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "md"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "md");
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "lg");
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xl");
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
> footer,
|
||||
> pre {
|
||||
margin-top: $spacing-block;
|
||||
margin-bottom: -$spacing-gutter*2;
|
||||
margin-top: var(--spacing-block);
|
||||
margin-bottom: calc(var(--spacing-gutter) * -2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "sm");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "sm"));
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "md");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "md"));
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "lg");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "lg"));
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "xl");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,53 +3,50 @@
|
|||
*/
|
||||
|
||||
article {
|
||||
margin: $spacing-block 0;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
overflow: hidden;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
@if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
|
||||
margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
|
||||
padding: $spacing-block*map-get($spacing-factor, "sm");
|
||||
@if $enable-responsive-spacings {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
@else {
|
||||
margin: $spacing-block 0;
|
||||
padding: $spacing-block;
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
|
||||
padding: $spacing-block*map-get($spacing-factor, "md");
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
|
||||
padding: $spacing-block*map-get($spacing-factor, "lg");
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
|
||||
padding: $spacing-block*map-get($spacing-factor, "xl");
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,17 +19,17 @@ nav {
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: -$spacing-gutter/2;
|
||||
margin-left: calc(var(--spacing-gutter) * -0.5);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: -$spacing-gutter/2;
|
||||
margin-right: calc(var(--spacing-gutter) * -0.5);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: $spacing-gutter $spacing-gutter/2;
|
||||
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||
|
||||
// HACK: Input & Button inside Nav
|
||||
> *,
|
||||
|
|
@ -40,23 +40,25 @@ nav {
|
|||
|
||||
a {
|
||||
display: block;
|
||||
margin: -$spacing-gutter (-$spacing-gutter/2);
|
||||
padding: $spacing-gutter $spacing-gutter/2;
|
||||
border-radius: $round;
|
||||
margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);
|
||||
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||
border-radius: var(--block-round);
|
||||
|
||||
@if $enable-important {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Disable underline for a.contrast in nav
|
||||
@if $enable-classes {
|
||||
&.contrast:not([role="button"]),
|
||||
&.contrast:not([role="button"]):hover,
|
||||
&.contrast:not([role="button"]):active,
|
||||
&.contrast:not([role="button"]):focus {
|
||||
box-shadow: none;
|
||||
@if $enable-important {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -73,11 +75,11 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: $spacing-gutter/2;
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
|
||||
a {
|
||||
margin: -$spacing-gutter/2;
|
||||
padding: $spacing-gutter/2;
|
||||
margin: calc(var(--spacing-gutter) * -0.5);
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
padding: .25rem .5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -.25rem);
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background: var(--contrast);
|
||||
color: var(--contrast-inverse);
|
||||
font-size: .85rem;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: var(--text-weight);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -9,17 +9,24 @@
|
|||
input[type="submit"].secondary,
|
||||
input[type="reset"],
|
||||
a[role="button"].secondary {
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
||||
@if $enable-important {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,17 +36,19 @@
|
|||
input[type="submit"].contrast,
|
||||
input[type="reset"].contrast,
|
||||
a[role="button"].contrast {
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: var(--contrast);
|
||||
color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--contrast-hover-border);
|
||||
background-color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,14 +57,14 @@
|
|||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
a.outline[role="button"] {
|
||||
border: 1px solid var(--primary);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--primary-hover);
|
||||
border: 1px solid var(--primary-hover-border);
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -66,20 +75,16 @@
|
|||
input[type="submit"].outline.secondary,
|
||||
input[type="reset"].outline,
|
||||
a[role="button"].outline.secondary {
|
||||
border: 1px solid var(--secondary);
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: transparent;
|
||||
color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--secondary-hover);
|
||||
border: 1px solid var(--secondary-hover-border);
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -88,19 +93,15 @@
|
|||
input[type="submit"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
a[role="button"].outline.contrast {
|
||||
border: 1px solid var(--contrast);
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--contrast-hover);
|
||||
border: 1px solid var(--contrast-hover-border);
|
||||
color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ button::-moz-focus-inner,
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
|
|
@ -53,35 +53,40 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[type="file"]::-webkit-file-upload-button,
|
||||
a[role="button"] {
|
||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $round;
|
||||
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
border-radius: var(--button-round);
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--primary-inverse);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: $line-height;
|
||||
font-weight: var(--buttons-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary-hover-border);
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--button-hover-shadow);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: $monospace; // 1
|
||||
font-family: var(--code-font); // 1
|
||||
font-size: 1rem; // 2
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ kbd {
|
|||
background: var(--code-inlined);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
font-weight: var(--code-weight);
|
||||
line-height: initial;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
|
|
@ -65,13 +65,13 @@ code,
|
|||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: $spacing-block;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
margin-bottom: var(--spacing-block);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
overflow-x: auto;
|
||||
background: var(--code-background);
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ pre {
|
|||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
line-height: $line-height;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ code {
|
|||
// Tags
|
||||
b {
|
||||
color: var(--code-color-2);
|
||||
font-weight: normal;
|
||||
font-weight: var(--code-weight);
|
||||
}
|
||||
|
||||
// Properties
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@
|
|||
// Swatch
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: $round/2;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
}
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: $round/2;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31,9 +31,7 @@
|
|||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -45,30 +43,40 @@
|
|||
|
||||
// Time
|
||||
[type="time"] {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-time);
|
||||
}
|
||||
|
||||
// File
|
||||
[type="file"] {
|
||||
padding: $spacing-input-button-horizontal/2 0;
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
color: var(--muted-text);
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding-top: $spacing-input-button-horizontal/2;
|
||||
padding-bottom: $spacing-input-button-horizontal/2;
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: var(--secondary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--secondary-inverse);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +84,7 @@
|
|||
&:focus {
|
||||
box-shadow: none;
|
||||
&::-webkit-file-upload-button {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,38 +109,39 @@
|
|||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height:$height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -146,16 +155,15 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--background);
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -164,15 +172,15 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,39 +189,36 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: transparent;
|
||||
|
||||
// Slider Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,12 +248,11 @@
|
|||
|
||||
// Search
|
||||
[type="search"] {
|
||||
border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
|
||||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-top: -.125rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: $spacing-form-elements;
|
||||
border-width: 2px;
|
||||
border-width: var(--checkbox-radio-border-width);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -21,16 +21,20 @@
|
|||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
&:checked,
|
||||
&:indeterminate {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
background-image: var(--icon-checkbox);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75rem auto;
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background-image: var(--icon-minus);
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375rem;
|
||||
|
|
@ -45,8 +49,8 @@
|
|||
|
||||
&:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-inverse);
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-inverse);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,23 +61,22 @@
|
|||
// Config
|
||||
$switch-height: 1.25rem;
|
||||
$switch-width: 2.25rem;
|
||||
$switch-border: 3px;
|
||||
$switch-transition: .1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: $switch-border solid var(--input-border);
|
||||
border: var(--switch-border-width) solid var(--input-border);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--input-border);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - #{$switch-border*2});
|
||||
width: calc(#{$switch-height} - (var(--switch-border-width)*2));
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-inverse);
|
||||
background-color: var(--input-inverse);
|
||||
content: '';
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -82,13 +85,13 @@
|
|||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-left: calc(#{$switch-width/2} - #{$switch-border});
|
||||
margin-left: calc(#{$switch-width/2} - var(--switch-border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ textarea {
|
|||
font-family: inherit; // 1
|
||||
font-size: 1rem; // 1
|
||||
letter-spacing: inherit; // 2
|
||||
line-height: $line-height; // 1
|
||||
line-height: var(--line-height); // 1
|
||||
}
|
||||
|
||||
// Show the overflow in IE.
|
||||
|
|
@ -36,7 +36,6 @@ select {
|
|||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers
|
||||
legend {
|
||||
display: table; // 1
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
color: inherit; // 2
|
||||
|
|
@ -118,13 +117,17 @@ textarea {
|
|||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||
height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
|
||||
height: calc(
|
||||
(1rem * var(--line-height)) +
|
||||
(var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--form-element-border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -133,7 +136,7 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: $spacing-form-elements;
|
||||
margin-bottom: var(--spacing-form-element);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +156,7 @@ textarea {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -161,20 +164,20 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: $round;
|
||||
border: var(--form-element-border-width) solid var(--input-border);
|
||||
border-radius: var(--block-round);
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
font-weight: var(--form-element-weight);
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
border-color $transition,
|
||||
color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&::placeholder,
|
||||
|
|
@ -185,7 +188,8 @@ textarea {
|
|||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-background);
|
||||
}
|
||||
|
||||
&[readonly],
|
||||
|
|
@ -196,6 +200,16 @@ textarea {
|
|||
& ~ label {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||
|
|
@ -203,8 +217,7 @@ textarea {
|
|||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
opacity: .66;
|
||||
}
|
||||
|
||||
// Validation states
|
||||
|
|
@ -220,13 +233,11 @@ textarea {
|
|||
}
|
||||
|
||||
&.valid {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +246,7 @@ textarea {
|
|||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Focus styles (Not Range and File)
|
||||
|
|
@ -243,7 +254,7 @@ input:not([type="range"]):not([type="file"]),
|
|||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -257,9 +268,8 @@ select {
|
|||
}
|
||||
|
||||
&:not([multiple]):not([size]) {
|
||||
padding-right: #{$spacing-input-button-horizontal + 1.5rem};
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -276,8 +286,8 @@ input,
|
|||
select,
|
||||
textarea {
|
||||
+ small {
|
||||
margin-top: -$spacing-typography/1.5;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-top: calc(var(--spacing-typography) * -0.5);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -286,6 +296,6 @@ label {
|
|||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin-top: $spacing-form-elements;
|
||||
margin-top: var(--spacing-form-element);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ table {
|
|||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: ($spacing-gutter/2) $spacing-gutter;
|
||||
padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter);
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--muted-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: $text-weight;
|
||||
font-weight: var(--text-weight);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -50,6 +50,8 @@ thead {
|
|||
}
|
||||
|
||||
// Striping
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
table[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
|
|
@ -76,10 +76,10 @@ a {
|
|||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
color $transition,
|
||||
text-decoration $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
text-decoration var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -99,6 +99,7 @@ a {
|
|||
@if $enable-classes {
|
||||
a.secondary {
|
||||
color: var(--secondary);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
@ -114,16 +115,14 @@ a {
|
|||
|
||||
// Link .contrast
|
||||
@if $enable-classes {
|
||||
a.contrast:not([role="button"]) {
|
||||
box-shadow: inset 0 -.33rem 0 var(--contrast-border);
|
||||
a.contrast {
|
||||
color: var(--contrast);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: inset 0 -.33rem 0 var(--contrast-border-h);
|
||||
color: var(--contrast-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -141,43 +140,43 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
font-weight: $heading-weight;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
font-weight: var(--titles-weight);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: $spacing-typography*2;
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
color: var(--h1);
|
||||
font-size: 2rem;
|
||||
font-size: var(--h1-size);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: $spacing-typography*1.75;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||
color: var(--h2);
|
||||
font-size: 1.75rem;
|
||||
font-size: var(--h2-size);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: $spacing-typography*1.5;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||
color: var(--h3);
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--h3-size);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: $spacing-typography*1.25;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||
color: var(--h4);
|
||||
font-size: 1.25rem;
|
||||
font-size: var(--h4-size);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: $spacing-typography*1.125;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||
color: var(--h5);
|
||||
font-size: 1.125rem;
|
||||
font-size: var(--h5-size);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--h6);
|
||||
font-size: 1rem;
|
||||
font-size: var(--h6-size);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
|
|
@ -192,34 +191,34 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
& ~ h1 {
|
||||
margin-top: $spacing-typography*2;
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
& ~ h2 {
|
||||
margin-top: $spacing-typography*1.75;
|
||||
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||
}
|
||||
|
||||
& ~ h3 {
|
||||
margin-top: $spacing-typography*1.5;
|
||||
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||
}
|
||||
|
||||
& ~ h4 {
|
||||
margin-top: $spacing-typography*1.25;
|
||||
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||
}
|
||||
|
||||
& ~ h5 {
|
||||
margin-top: $spacing-typography*1.125;
|
||||
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||
}
|
||||
|
||||
& ~ h6 {
|
||||
margin-top: $spacing-typography;
|
||||
margin-top: calc(var(--spacing-typography));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Multi-level heading
|
||||
hgroup {
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
|
||||
*{
|
||||
margin-bottom: 0;
|
||||
|
|
@ -228,13 +227,13 @@ hgroup {
|
|||
> *:last-child {
|
||||
color: var(--muted-text);
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-weight: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin-bottom: $spacing-typography/2;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Small
|
||||
|
|
@ -268,10 +267,10 @@ small {
|
|||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $spacing-typography;
|
||||
padding-left: var(--spacing-typography);
|
||||
|
||||
li {
|
||||
margin-bottom: $spacing-typography/4;
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -290,12 +289,12 @@ mark {
|
|||
// Blockquote
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: ($spacing-typography*2) 0;
|
||||
padding: $spacing-gutter;
|
||||
margin: var(--spacing-typography) 0;
|
||||
padding: var(--spacing-gutter);
|
||||
border-left: .25rem solid var(--muted-border);
|
||||
|
||||
footer {
|
||||
margin-top: $spacing-typography/2;
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
color: var(--muted-text);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $spacing-gutter;
|
||||
padding-left: $spacing-gutter;
|
||||
padding-right: var(--spacing-gutter);
|
||||
padding-left: var(--spacing-gutter);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -38,46 +38,42 @@ html {
|
|||
-webkit-text-size-adjust: 100%; // 6
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: $sans-serif;
|
||||
font-size: map-get($base-font, "xs");
|
||||
font-weight: $text-weight;
|
||||
line-height: $line-height; // 1
|
||||
font-family: var(--text-font);
|
||||
font-size: var(--base-font-xs);
|
||||
font-weight: var(--text-weight);
|
||||
line-height: var(--line-height); // 1
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default; // 4
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($base-font, "sm") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: map-get($base-font, "sm");
|
||||
font-size: var(--base-font-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($base-font, "md") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: map-get($base-font, "md");
|
||||
font-size: var(--base-font-md);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($base-font, "lg") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: map-get($base-font, "lg");
|
||||
font-size: var(--base-font-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($base-font, "xl") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: map-get($base-font, "xl");
|
||||
font-size: var(--base-font-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
*/
|
||||
|
||||
.grid {
|
||||
grid-column-gap: $spacing-gutter;
|
||||
grid-row-gap: $spacing-gutter;
|
||||
grid-column-gap: var(--spacing-gutter);
|
||||
grid-row-gap: var(--spacing-gutter);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ figure {
|
|||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: ($spacing-gutter/2) 0;
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
color: var(--muted-text);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,41 +4,37 @@
|
|||
*/
|
||||
|
||||
section {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xs")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "sm")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "md")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "lg")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xl")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ body {
|
|||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
$padding-horizontal: $spacing-gutter !default;
|
||||
$spacing-vertical: $spacing-block !default;
|
||||
$padding-horizontal: var(--spacing-gutter) !default;
|
||||
$spacing-vertical: var(--spacing-block) !default;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
|
@ -50,13 +50,13 @@ body {
|
|||
$padding-horizontal: 0;
|
||||
}
|
||||
@else {
|
||||
$padding-horizontal: $spacing-gutter;
|
||||
$padding-horizontal: var(--spacing-gutter);
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "sm") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "sm");
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
@else {
|
||||
$spacing-vertical: $spacing-block;
|
||||
$spacing-vertical: var(--spacing-block);
|
||||
}
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
|
|
@ -71,8 +71,8 @@ body {
|
|||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "md") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "md");
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
|
@ -86,8 +86,8 @@ body {
|
|||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "lg") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "lg");
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
|
@ -101,8 +101,8 @@ body {
|
|||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "xl") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "xl");
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,7 @@
|
|||
*/
|
||||
|
||||
@import "default/colors";
|
||||
@import "default/styles";
|
||||
@import "default/icons";
|
||||
@import "default/light";
|
||||
@import "default/dark";
|
||||
|
|
@ -35,9 +35,3 @@ $green-600: hsl(160, 55%, 35%) !default;
|
|||
$green-700: hsl(160, 60%, 30%) !default;
|
||||
$red-700: hsl(0, 45%, 50%) !default;
|
||||
$red-900: hsl(0, 45%, 40%) !default;
|
||||
|
||||
// Icons color
|
||||
// For <details>, [type="date"], <select>, etc.
|
||||
// Must be neutral to work in light or dark mode
|
||||
// HACK: .99 opacity is used to force rgba() vs #hex
|
||||
$icon-color: #{rgba($grey-500, .999)};
|
||||
|
|
|
|||
|
|
@ -1,70 +1,83 @@
|
|||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
|
||||
// Document
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-300};
|
||||
--h1: #{$grey-50};
|
||||
--h2: #{$grey-100};
|
||||
--h3: #{$grey-200};
|
||||
--h4: #{$grey-300};
|
||||
--h5: #{$grey-400};
|
||||
--h6: #{$grey-500};
|
||||
--text: #{$grey-300};
|
||||
--h1: #{$grey-50};
|
||||
--h2: #{$grey-100};
|
||||
--h3: #{$grey-200};
|
||||
--h4: #{$grey-300};
|
||||
--h5: #{$grey-400};
|
||||
--h6: #{$grey-500};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-hover-border: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// // Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-border: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-hover-border: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-border: #{rgba($amber-200, .33)}; // Links underline for
|
||||
--contrast-border-h: #{rgba($amber-200, .5)}; // Links hover underline
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-border: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-hover-border: #{$white};
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
|
||||
// Form elements
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-hover-background: #{darken($grey-900, 6%)};
|
||||
--input-hover-border: #{$primary-600};
|
||||
--input-focus: #{rgba($primary-600, .25)};
|
||||
--input-inverse: #{$white};
|
||||
|
||||
// Button
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$white};
|
||||
--muted-text: #{$grey-500};
|
||||
--muted-background: #{darken($grey-900, 6%)};
|
||||
--muted-border: #{mix($grey-800, $grey-900)};
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$white};
|
||||
--muted-text: #{$grey-500};
|
||||
--muted-background: #{mix($grey-800, $grey-900)};
|
||||
--muted-border: #{mix($grey-800, $grey-900)};
|
||||
|
||||
// Card
|
||||
--card-background: #{darken($grey-900, 2%)};
|
||||
--card-sections: #{darken($grey-900, 4%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
|
||||
--card-background: #{darken($grey-900, 2%)};
|
||||
--card-sections: #{darken($grey-900, 4%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
|
||||
|
||||
// Code
|
||||
--code-background: #{darken($grey-900, 4%)};
|
||||
--code-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
--code-background: #{darken($grey-900, 4%)};
|
||||
--code-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-500, .06)};
|
||||
--table-stripping: #{rgba($grey-500, .02)};
|
||||
--table-border: #{rgba($grey-500, .075)};
|
||||
--table-stripping: #{rgba($grey-500, .05)};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,64 +88,77 @@
|
|||
[data-theme="dark"] {
|
||||
|
||||
// Document
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-300};
|
||||
--h1: #{$grey-50};
|
||||
--h2: #{$grey-100};
|
||||
--h3: #{$grey-200};
|
||||
--h4: #{$grey-300};
|
||||
--h5: #{$grey-400};
|
||||
--h6: #{$grey-500};
|
||||
--text: #{$grey-300};
|
||||
--h1: #{$grey-50};
|
||||
--h2: #{$grey-100};
|
||||
--h3: #{$grey-200};
|
||||
--h4: #{$grey-300};
|
||||
--h5: #{$grey-400};
|
||||
--h6: #{$grey-500};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-hover-border: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
// // Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-border: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-hover-border: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-border: #{rgba($amber-200, .33)}; // For links
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-border: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-hover-border: #{$white};
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
|
||||
// Form elements
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-hover-background: #{darken($grey-900, 6%)};
|
||||
--input-hover-border: #{$primary-600};
|
||||
--input-focus: #{rgba($primary-600, .25)};
|
||||
--input-inverse: #{$white};
|
||||
|
||||
// Button
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$white};
|
||||
--muted-text: #{$grey-500};
|
||||
--muted-background: #{darken($grey-900, 6%)};
|
||||
--muted-border: #{mix($grey-800, $grey-900)};
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$white};
|
||||
--muted-text: #{$grey-500};
|
||||
--muted-background: #{mix($grey-800, $grey-900)};
|
||||
--muted-border: #{mix($grey-800, $grey-900)};
|
||||
|
||||
// Card
|
||||
--card-background: #{darken($grey-900, 2%)};
|
||||
--card-sections: #{darken($grey-900, 4%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
|
||||
--card-background: #{darken($grey-900, 2%)};
|
||||
--card-sections: #{darken($grey-900, 4%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
|
||||
|
||||
// Code
|
||||
--code-background: #{darken($grey-900, 4%)};
|
||||
--code-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
--code-background: #{darken($grey-900, 4%)};
|
||||
--code-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-500, .06)};
|
||||
--table-stripping: #{rgba($grey-500, .02)};
|
||||
--table-border: #{rgba($grey-500, .075)};
|
||||
--table-stripping: #{rgba($grey-500, .05)};
|
||||
}
|
||||
|
|
|
|||
13
scss/themes/default/_icons.scss
Normal file
13
scss/themes/default/_icons.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// Icons
|
||||
// Source: https://feathericons.com/
|
||||
|
||||
:root {
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -1,68 +1,81 @@
|
|||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
||||
// Document
|
||||
--background: #{$white};
|
||||
--background: #{$white};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-700};
|
||||
--h1: #{$grey-900};
|
||||
--h2: #{$grey-800};
|
||||
--h3: #{$grey-700};
|
||||
--h4: #{$grey-600};
|
||||
--h5: #{$grey-500};
|
||||
--h6: #{$grey-400};
|
||||
--text: #{$grey-700};
|
||||
--h1: #{$grey-900};
|
||||
--h2: #{$grey-800};
|
||||
--h3: #{$grey-700};
|
||||
--h4: #{$grey-600};
|
||||
--h5: #{$grey-500};
|
||||
--h6: #{$grey-400};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-hover-border: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-500};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-500, .125)};
|
||||
--secondary-inverse: #{$white};
|
||||
--secondary: #{$grey-500};
|
||||
--secondary-border: #{$grey-500};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-hover-border: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-500, .125)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-800};
|
||||
--contrast-hover: #{mix($grey-900, $black)};
|
||||
--contrast-focus: #{rgba($grey-500, .125)};
|
||||
--contrast-border: #{rgba($amber-200, .5)}; // Links underline
|
||||
--contrast-border-h: #{rgba($amber-200, 1)}; // Links hover underline
|
||||
--contrast-inverse: #{$white};
|
||||
--contrast: #{$grey-800};
|
||||
--contrast-border: #{$grey-800};
|
||||
--contrast-hover: #{mix($grey-900, $black)};
|
||||
--contrast-hover-border: #{mix($grey-900, $black)};
|
||||
--contrast-focus: #{rgba($grey-500, .125)};
|
||||
--contrast-inverse: #{$white};
|
||||
|
||||
// Form elements
|
||||
--input-background: #{$white};
|
||||
--input-border: #{mix($grey-100, $grey-200)};
|
||||
--input-background: #{$white};
|
||||
--input-border: #{mix($grey-100, $grey-200)};
|
||||
--input-hover-background: #{$white};
|
||||
--input-hover-border: #{$primary-600};
|
||||
--input-focus: #{rgba($primary-600, .125)};
|
||||
--input-inverse: #{$white};
|
||||
|
||||
// Button
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);;
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-600};
|
||||
--invalid: #{$red-700};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$grey-800};
|
||||
--muted-text: #{mix($grey-400, $grey-500)};
|
||||
--muted-background: #{$grey-50};
|
||||
--muted-border: #{$grey-50};
|
||||
--valid: #{$green-600};
|
||||
--invalid: #{$red-700};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$grey-800};
|
||||
--muted-text: #{mix($grey-400, $grey-500)};
|
||||
--muted-background: #{$grey-50};
|
||||
--muted-border: #{$grey-50};
|
||||
|
||||
// Card
|
||||
--card-background: #{$white};
|
||||
--card-sections: #{lighten($grey-50, 2%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
|
||||
--card-background: #{$white};
|
||||
--card-sections: #{lighten($grey-50, 2%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
|
||||
|
||||
// Code
|
||||
--code-background: #{lighten($grey-50, 2%)};
|
||||
--code-inlined: #{$grey-50};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 40%, 50%)};
|
||||
--code-color-3: #{hsl(185, 40%, 40%)};
|
||||
--code-color-4: #{hsl(40, 20%, 50%)};
|
||||
--code-color-5: #{mix($grey-300, $grey-400)};
|
||||
--code-background: #{lighten($grey-50, 2%)};
|
||||
--code-inlined: #{$grey-50};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 40%, 50%)};
|
||||
--code-color-3: #{hsl(185, 40%, 40%)};
|
||||
--code-color-4: #{hsl(40, 20%, 50%)};
|
||||
--code-color-5: #{mix($grey-300, $grey-400)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-50, .75)};
|
||||
--table-stripping: #{rgba($grey-500, .04)};
|
||||
--table-border: #{rgba($grey-50, .75)};
|
||||
--table-stripping: #{rgba($grey-500, .075)};
|
||||
}
|
||||
|
|
|
|||
93
scss/themes/default/_styles.scss
Normal file
93
scss/themes/default/_styles.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
// Commons Styles
|
||||
|
||||
:root {
|
||||
|
||||
// Typography
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Fonts family
|
||||
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--titles-font: var(--text-font);
|
||||
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
|
||||
// Typography styles
|
||||
--line-height: 1.5;
|
||||
--text-weight: 400;
|
||||
--titles-weight: 700;
|
||||
--form-element-weight: var(--text-weight);
|
||||
--buttons-weight: var(--text-weight);
|
||||
--code-weight: var(--text-weight);
|
||||
|
||||
// Base font sizes
|
||||
// All the others sizes are relative to this font base sizes (rem)
|
||||
--base-font-xs: 16px;
|
||||
--base-font-sm: 17px;
|
||||
--base-font-md: 18px;
|
||||
--base-font-lg: 19px;
|
||||
--base-font-xl: 20px;
|
||||
|
||||
// Font sizes
|
||||
// All the others sizes are relative to this sizes
|
||||
--h1-size: 2rem;
|
||||
--h2-size: 1.75rem;
|
||||
--h3-size: 1.5rem;
|
||||
--h4-size: 1.25rem;
|
||||
--h5-size: 1.125rem;
|
||||
|
||||
|
||||
// Styles
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
|
||||
--block-round: .25rem ;
|
||||
|
||||
// Form elements
|
||||
--form-element-border-width: 1px;
|
||||
--form-element-outline-width: 3px;
|
||||
--checkbox-radio-border-width: 2px;
|
||||
--switch-border-width: 3px;
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Buttons
|
||||
--button-round: var(--block-round);
|
||||
--button-border-width: var(--form-element-border-width);
|
||||
--button-outline-width: var(--form-element-outline-width);
|
||||
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||
|
||||
|
||||
// Spacings
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Gutters and horizontals margins
|
||||
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre>
|
||||
--spacing-gutter: 1rem;
|
||||
|
||||
// Vertical spacing for blocks
|
||||
// For <header>, <main>, <footer>, <section>, <article>
|
||||
--spacing-block: 2rem;
|
||||
|
||||
// Multiplication factor for --spacing-block
|
||||
// '1' disable spacing factor on a breakpoint
|
||||
--spacing-factor-xs: 1;
|
||||
--spacing-factor-sm: 1.25;
|
||||
--spacing-factor-md: 1.5;
|
||||
--spacing-factor-lg: 1.75;
|
||||
--spacing-factor-xl: 2;
|
||||
|
||||
// Vertical margins for typography elements
|
||||
--spacing-typography: 1.5rem;
|
||||
|
||||
// Spacing between <form> elements
|
||||
--spacing-form-element: .25rem;
|
||||
|
||||
|
||||
// Transitions
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Transitions: <a>, <form> elements and <button>
|
||||
--transition: .2s ease-in-out;
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue