mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
CSS Vars refactoring
This commit is contained in:
Lucas Larroche
parent
14460576bf
commit
d12af72cab
64 changed files with 4878 additions and 4948 deletions
|
|
@ -7,7 +7,7 @@ $enable-semantic-container: false !default;
|
|||
// Enable .container and .container-fluid
|
||||
$enable-class-container: true !default;
|
||||
|
||||
// Enable a centered viewport
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside <body>
|
||||
// Fluid layout if disabled
|
||||
$enable-viewport: true !default;
|
||||
|
||||
|
|
@ -16,20 +16,17 @@ $enable-viewport: true !default;
|
|||
$enable-responsive-spacings: true !default;
|
||||
|
||||
// Enable responsive typography
|
||||
// Fixed base font if disabled
|
||||
// Fixed root element size if disabled
|
||||
$enable-responsive-typography: true !default;
|
||||
|
||||
// Enable .classes
|
||||
// .classless version if disabled
|
||||
$enable-classes: true !default;
|
||||
|
||||
// Enable validation states for <input>
|
||||
$enable-input-states: true !default;
|
||||
|
||||
// Enable transitions for <a>, <button>, <input>
|
||||
// Enable transitions
|
||||
$enable-transitions: true !default;
|
||||
|
||||
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"])
|
||||
// Enable overriding with !important
|
||||
$enable-important: true !default;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,15 +5,20 @@
|
|||
|
||||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding-bottom: calc(var(--spacing-typography) / 2);
|
||||
border-bottom: 1px solid var(--muted-border);
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) / 2);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
summary {
|
||||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
// Reset marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
|
|
@ -44,11 +49,12 @@ details {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--accordion-active-summary-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
~ * {
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
margin-top: calc(var(--spacing) / 2);
|
||||
|
||||
~ * {
|
||||
margin-top: 0;
|
||||
|
|
@ -60,8 +66,11 @@ details {
|
|||
&[open] {
|
||||
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
color: var(--muted-text);
|
||||
margin-bottom: calc(var(--spacing) / 4);
|
||||
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
/**
|
||||
* Card sectionning (<article> > header, footer, pre)
|
||||
*/
|
||||
|
||||
article {
|
||||
> header,
|
||||
> footer {
|
||||
background-color: var(--card-sections);
|
||||
}
|
||||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin: calc(var(--spacing-gutter) * -1);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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: calc(var(--spacing-gutter) * -2);
|
||||
margin-bottom: var(--spacing-block);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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: var(--spacing-block);
|
||||
margin-bottom: calc(var(--spacing-gutter) * -2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,57 +3,32 @@
|
|||
*/
|
||||
|
||||
article {
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--block-round);
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "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: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block);
|
||||
}
|
||||
}
|
||||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
> header {
|
||||
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "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
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
|
||||
// Remove last-child margin bottom
|
||||
@if $enable-important {
|
||||
> *:not(header):not(footer):not(pre):last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
> footer,
|
||||
> pre {
|
||||
margin-top: var(--block-spacing-vertical);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||
border-top: var(--border-width) solid var(--card-border-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Nav
|
||||
*/
|
||||
|
||||
// Inline
|
||||
// Horizontal Nav
|
||||
nav,
|
||||
nav ul {
|
||||
display: flex;
|
||||
|
|
@ -19,17 +19,17 @@ nav {
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(--spacing-gutter) * -0.5);
|
||||
margin-left: calc(var(--spacing) * -0.5);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(--spacing-gutter) * -0.5);
|
||||
margin-right: calc(var(--spacing) * -0.5);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
||||
|
||||
// HACK: Input & Button inside Nav
|
||||
> *,
|
||||
|
|
@ -40,26 +40,15 @@ nav {
|
|||
|
||||
a {
|
||||
display: block;
|
||||
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;
|
||||
}
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,11 +64,11 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
padding: calc(var(--spacing) / 2);
|
||||
|
||||
a {
|
||||
margin: calc(var(--spacing-gutter) * -0.5);
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ progress {
|
|||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
progress {
|
||||
|
||||
// Reset the default appearance
|
||||
|
|
@ -29,30 +30,30 @@ progress {
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
margin-bottom: calc(var(--spacing) / 2);
|
||||
overflow: hidden;
|
||||
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--muted-background);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--progress-background-color);
|
||||
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: var(--primary);
|
||||
color: var(--progress-color);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--block-round);
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
}
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--progress-color);
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--progress-color);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left / 150% 150% no-repeat;
|
||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
padding: .25rem .5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -.25rem);
|
||||
border-radius: var(--block-round);
|
||||
background: var(--contrast);
|
||||
color: var(--contrast-inverse);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--tooltip-background-color);
|
||||
color: var(--tooltip-color);
|
||||
font-size: .85rem;
|
||||
font-style: normal;
|
||||
font-weight: var(--text-weight);
|
||||
font-weight: var(--font-weight);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -44,9 +44,8 @@
|
|||
border-left: .3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
color: var(--tooltip-background-color);
|
||||
content: '';
|
||||
|
||||
}
|
||||
|
||||
&:focus,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// Based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
@if $enable-classes {
|
||||
|
||||
/**
|
||||
* Button Styles
|
||||
*/
|
||||
|
||||
// Button .secondary
|
||||
button.secondary,
|
||||
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 {
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .contrast
|
||||
button.contrast,
|
||||
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: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline
|
||||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
a[role="button"].outline {
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width) solid var(--primary-hover-border);
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline.secondary
|
||||
button.outline.secondary,
|
||||
input[type="submit"].outline.secondary,
|
||||
input[type="reset"].outline,
|
||||
a[role="button"].outline.secondary {
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: transparent;
|
||||
color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width)solid var(--secondary-hover-border);
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline.contrast
|
||||
button.outline.contrast,
|
||||
input[type="submit"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
a[role="button"].outline.contrast {
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width) solid var(--contrast-hover-border);
|
||||
color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
|
||||
// Button reset only for classless version
|
||||
input[type="reset"] {
|
||||
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 {
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,8 +31,8 @@ button::-moz-focus-inner,
|
|||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ button::-moz-focus-inner,
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
|
|
@ -54,17 +54,20 @@ button,
|
|||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[type="file"]::-webkit-file-upload-button,
|
||||
a[role="button"] {
|
||||
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
border-radius: var(--button-round);
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: none;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--primary-inverse);
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--buttons-weight);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -80,19 +83,114 @@ a[role="button"] {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary-hover-border);
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--button-hover-shadow);
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Input [type="reset"]
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
&.outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
&.outline.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
&.outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--code-font); // 1
|
||||
font-size: 1rem; // 2
|
||||
font-family: var(--font-family); // 1
|
||||
font-size: .875rem; // 2
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
|
|
@ -31,49 +31,25 @@ pre {
|
|||
pre,
|
||||
code,
|
||||
kbd {
|
||||
background: var(--code-inlined);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: var(--code-weight);
|
||||
background: var(--code-background-color);
|
||||
color: var(--code-color);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: initial;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: 83%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: 81%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: 79%;
|
||||
}
|
||||
}
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: 77%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
border-radius: var(--block-round);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-block);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
margin-bottom: var(--spacing);
|
||||
padding: var(--spacing);
|
||||
overflow-x: auto;
|
||||
background: var(--code-background);
|
||||
background: var(--code-background-color);
|
||||
|
||||
> code {
|
||||
display: block;
|
||||
|
|
@ -84,37 +60,37 @@ pre {
|
|||
}
|
||||
}
|
||||
|
||||
// Code Syntax highlighting
|
||||
// Code Syntax
|
||||
code {
|
||||
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-color-2);
|
||||
font-weight: var(--code-weight);
|
||||
color: var(--code-tag-color);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
// Properties
|
||||
i {
|
||||
color: var(--code-color-3);
|
||||
color: var(--code-property-color);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Values
|
||||
u {
|
||||
color: var(--code-color-4);
|
||||
color: var(--code-value-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Comments
|
||||
em {
|
||||
color: var(--code-color-5);
|
||||
color: var(--code-comment-color);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
kbd {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
font-weight: bolder;
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -17,11 +18,12 @@
|
|||
// Swatch
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,17 +50,29 @@
|
|||
|
||||
// File
|
||||
[type="file"] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
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);
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -74,22 +88,17 @@
|
|||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
--color: var(--color);
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::-webkit-file-upload-button {
|
||||
box-shadow: none;
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Range
|
||||
[type="range"]{
|
||||
[type="range"] {
|
||||
// Config
|
||||
$height-track: .25rem;
|
||||
$height-thumb: 1.25rem;
|
||||
|
|
@ -108,8 +117,8 @@
|
|||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -121,8 +130,8 @@
|
|||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height:$height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -134,8 +143,8 @@
|
|||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -145,7 +154,7 @@
|
|||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background-color: var(--input-border);
|
||||
background-color: var(--border-radius);
|
||||
}
|
||||
|
||||
// Slider Thumb
|
||||
|
|
@ -154,9 +163,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -171,9 +180,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -188,9 +197,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -200,62 +209,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
@if $enable-important {
|
||||
background: transparent !important;
|
||||
}
|
||||
@else {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Slider Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
--range-border-color: var(--range-active-border-color);
|
||||
--range-thumb-color: var(--range-thumb-hover-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@if $enable-important {
|
||||
background: transparent !important;
|
||||
}
|
||||
@else {
|
||||
background: transparent;
|
||||
}
|
||||
--range-thumb-color: var(--range-thumb-active-color);
|
||||
|
||||
// Slider Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
|
|
@ -263,15 +238,15 @@
|
|||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left .75rem;
|
||||
background-position: center left 1.125rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
&::-webkit-search-cancel-button{
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
height: 1.25rem;
|
||||
margin-top: -.125rem;
|
||||
margin-right: .375rem;
|
||||
border-width: var(--checkbox-radio-border-width);
|
||||
border-width: var(--border-width);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -22,19 +22,16 @@
|
|||
}
|
||||
|
||||
&:checked,
|
||||
&:indeterminate {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
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;
|
||||
|
|
@ -43,20 +40,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
[type="checkbox"] {
|
||||
&:indeterminate {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-minus);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
[type="radio"] {
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-inverse);
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus{
|
||||
--background-color: var(--primary-inverse);
|
||||
border-width: .35rem;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Switchs
|
||||
[type="checkbox"][role="switch"] {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
--color: var(--switch-color);
|
||||
|
||||
// Config
|
||||
$switch-height: 1.25rem;
|
||||
|
|
@ -66,17 +79,27 @@
|
|||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: var(--switch-border-width) solid var(--input-border);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--input-border);
|
||||
background-color: var(--background-color);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
--background-color: var(--switch-checked-background-color);
|
||||
--border-color: var(--switch-checked-background-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - (var(--switch-border-width)*2));
|
||||
width: calc(#{$switch-height} - (var(--border-width) * 2));
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--input-inverse);
|
||||
background-color: var(--color);
|
||||
content: '';
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -85,13 +108,11 @@
|
|||
}
|
||||
|
||||
&:checked {
|
||||
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} - var(--switch-border-width));
|
||||
margin-left: calc(#{$switch-width / 2} - var(--border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,9 +89,9 @@ textarea {
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
// Restore the focus outline styles unset by the previous rule in Firefox
|
||||
// Remove the focus outline in Firefox
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Remove the additional :invalid styles in Firefox
|
||||
|
|
@ -120,14 +120,14 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
|||
height: calc(
|
||||
(1rem * var(--line-height)) +
|
||||
(var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--form-element-border-width) * 2)
|
||||
(var(--border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -136,15 +136,14 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-form-element);
|
||||
margin-bottom: calc(var(--spacing) / 4);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Global layout
|
||||
// Blocks, 100%
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea,
|
||||
form small {
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -164,13 +163,17 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: var(--form-element-border-width) solid var(--input-border);
|
||||
border-radius: var(--block-round);
|
||||
--background-color: var(--form-element-background-color);
|
||||
--border-color: var(--form-element-border-color);
|
||||
--color: var(--form-element-color);
|
||||
--box-shadow: none;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: var(--form-element-weight);
|
||||
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -179,102 +182,106 @@ textarea {
|
|||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-background);
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
|
||||
select,
|
||||
textarea {
|
||||
&[disabled] {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: .375;
|
||||
}
|
||||
}
|
||||
|
||||
// Aria-valid
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
&[readonly],
|
||||
&[disabled] {
|
||||
border-color: var(--muted-border);
|
||||
box-shadow: none;
|
||||
|
||||
& ~ label {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
background-image: var(--icon-valid);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: none !important;
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: none;
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||
background-color: var(--muted-background);
|
||||
}
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
background-image: var(--icon-invalid);
|
||||
|
||||
&[disabled] {
|
||||
opacity: .66;
|
||||
}
|
||||
|
||||
// Validation states: with aria-invalid only
|
||||
@if $enable-classes {
|
||||
.valid,
|
||||
.invalid,
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
.valid,
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
.invalid,
|
||||
&[aria-invalid="true"]{
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
|
||||
// Validation states: with aria-invalid and classes (.valid & .invalid)
|
||||
@else {
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"]{
|
||||
background-image: var(--icon-invalid);
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes andRadios)
|
||||
// Placeholder
|
||||
input::placeholder,
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
select:invalid {
|
||||
color: var(--form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes and Radios)
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Focus styles (Not Range and File)
|
||||
input:not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||
}
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
// Select
|
||||
|
|
@ -296,16 +303,15 @@ select {
|
|||
}
|
||||
|
||||
// Helper
|
||||
form small {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
+ small {
|
||||
margin-top: calc(var(--spacing-typography) * -0.75);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing) * -0.75);
|
||||
margin-bottom: var(--spacing);
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -314,6 +320,6 @@ label {
|
|||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin-top: var(--spacing-form-element);
|
||||
margin-top: calc(var(--spacing) / 4);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ hr {
|
|||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
border: none;
|
||||
border-top: 1px solid var(--muted-border);
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
|
|
|
|||
|
|
@ -26,32 +26,24 @@ table {
|
|||
// Cells
|
||||
th,
|
||||
td {
|
||||
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: var(--text-weight);
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||
color: var(--color);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Titles
|
||||
th,
|
||||
thead td {
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
// Rows
|
||||
tr {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
// First row
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 3px solid var(--table-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Striping
|
||||
table[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
// Striped
|
||||
table {
|
||||
&[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
--background-color: var(--table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -70,9 +70,12 @@ ul {
|
|||
// Links
|
||||
// 1. Remove the gray background on active links in IE 10
|
||||
a {
|
||||
background-color: transparent; // 1
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
background-color: var(--background-color); // 1
|
||||
color: var(--color);
|
||||
text-decoration: var(--text-decoration);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -85,54 +88,49 @@ a {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--primary-hover);
|
||||
text-decoration: underline;
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: var(--primary-focus);
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Link .secondary
|
||||
@if $enable-classes {
|
||||
a.secondary {
|
||||
color: var(--secondary);
|
||||
text-decoration: underline;
|
||||
@if $enable-classes {
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--secondary-hover);
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
// Link .contrast
|
||||
@if $enable-classes {
|
||||
a.contrast {
|
||||
color: var(--contrast);
|
||||
text-decoration: underline;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--contrast-focus);
|
||||
&:focus {
|
||||
--background-color: var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
// Because vertical margins can collapse, we avoid `margin-top`
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -140,44 +138,30 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
font-family: var(--titles-font);
|
||||
font-weight: var(--titles-weight);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
color: var(--h1);
|
||||
font-size: var(--h1-size);
|
||||
--color: var(--h1-color);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||
color: var(--h2);
|
||||
font-size: var(--h2-size);
|
||||
--color: var(--h2-color);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||
color: var(--h3);
|
||||
font-size: var(--h3-size);
|
||||
--color: var(--h3-color);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||
color: var(--h4);
|
||||
font-size: var(--h4-size);
|
||||
--color: var(--h4-color);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||
color: var(--h5);
|
||||
font-size: var(--h5-size);
|
||||
--color: var(--h5-color);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--h6);
|
||||
font-size: var(--h6-size);
|
||||
--color: var(--h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
|
|
@ -191,88 +175,49 @@ p,
|
|||
pre,
|
||||
table,
|
||||
ul {
|
||||
& ~ h1 {
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
& ~ h2 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||
}
|
||||
|
||||
& ~ h3 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||
}
|
||||
|
||||
& ~ h4 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||
}
|
||||
|
||||
& ~ h5 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||
}
|
||||
|
||||
& ~ h1,
|
||||
& ~ h2,
|
||||
& ~ h3,
|
||||
& ~ h4,
|
||||
& ~ h5,
|
||||
& ~ h6 {
|
||||
margin-top: calc(var(--spacing-typography));
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Multi-level heading
|
||||
// Heading group
|
||||
hgroup {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
*{
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
color: var(--muted-text);
|
||||
--color: var(--muted-color);
|
||||
font-family: unset;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
font-weight: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: 85%;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: 83%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: 81%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: 79%;
|
||||
}
|
||||
}
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: 77%;
|
||||
}
|
||||
}
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--spacing-typography);
|
||||
padding-left: var(--spacing);
|
||||
|
||||
li {
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -280,24 +225,24 @@ ul li {
|
|||
list-style: square;
|
||||
}
|
||||
|
||||
// Marked text
|
||||
// Highlighted text
|
||||
mark {
|
||||
padding: .125rem .25rem;
|
||||
background: var(--mark);
|
||||
color: var(--mark-text);
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: var(--spacing-typography) 0;
|
||||
padding: var(--spacing-gutter);
|
||||
border-left: .25rem solid var(--muted-border);
|
||||
margin: var(--typography-spacing-vertical) 0;
|
||||
padding: var(--spacing);
|
||||
border-left: .25rem solid var(--blockquote-border-color);
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
color: var(--muted-text);
|
||||
margin-top: calc(var(--typography-spacing-vertical) / 2);
|
||||
color: var(--blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -311,13 +256,13 @@ abbr[title] {
|
|||
|
||||
// Ins
|
||||
ins {
|
||||
color: var(--valid);
|
||||
color: var(--ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
del {
|
||||
color: var(--invalid);
|
||||
color: var(--del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(--spacing-gutter);
|
||||
padding-left: var(--spacing-gutter);
|
||||
padding-right: var(--spacing);
|
||||
padding-left: var(--spacing);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
padding-right: 0;
|
||||
|
|
@ -23,19 +23,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-viewport {
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-viewport {
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and $enable-viewport {
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,44 +36,12 @@ html {
|
|||
-moz-tab-size: 4; // 5
|
||||
-ms-text-size-adjust: 100%; // 6
|
||||
-webkit-text-size-adjust: 100%; // 6
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: var(--text-font);
|
||||
font-size: var(--base-font-xs);
|
||||
font-weight: var(--text-weight);
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height); // 1
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default; // 4
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: var(--base-font-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: var(--base-font-md);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: var(--base-font-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: var(--base-font-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
*/
|
||||
|
||||
.grid {
|
||||
grid-column-gap: var(--spacing-gutter);
|
||||
grid-row-gap: var(--spacing-gutter);
|
||||
grid-column-gap: var(--grid-spacing-horizontal);
|
||||
grid-row-gap: var(--grid-spacing-vertical);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ figure {
|
|||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
color: var(--muted-text);
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,37 +4,5 @@
|
|||
*/
|
||||
|
||||
section {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
|
||||
}
|
||||
}
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,87 +25,48 @@ body {
|
|||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
$padding-horizontal: var(--spacing-gutter) !default;
|
||||
$spacing-vertical: var(--spacing-block) !default;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
// xs
|
||||
@if $enable-semantic-container == false {
|
||||
$padding-horizontal: 0;
|
||||
}
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
// Semantic container
|
||||
@if $enable-semantic-container {
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
|
||||
// sm
|
||||
@if map-get($breakpoints, "sm")
|
||||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||||
// Centered viewport
|
||||
@if $enable-viewport {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "sm");
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@if $enable-responsive-spacings or $enable-viewport {
|
||||
@if $enable-viewport or $enable-semantic-container == false {
|
||||
$padding-horizontal: 0;
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
@else {
|
||||
$padding-horizontal: var(--spacing-gutter);
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
@else {
|
||||
$spacing-vertical: var(--spacing-block);
|
||||
}
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// md
|
||||
@if map-get($breakpoints, "md")
|
||||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// lg
|
||||
@if map-get($breakpoints, "lg")
|
||||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// xl
|
||||
@if map-get($breakpoints, "xl")
|
||||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
// Semantic container
|
||||
@else {
|
||||
padding: var(--block-spacing-vertical) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
// Enable <header>, <main>, <footer> inside <body> as a container
|
||||
$enable-semantic-container: true;
|
||||
|
||||
// Enable a centered viewport
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside <body>
|
||||
$enable-viewport: false;
|
||||
|
||||
// Enable .classes
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Pico.css v1.2.1 (https://picocss.com)
|
||||
* Copyright 2020 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Config
|
||||
|
|
@ -21,7 +21,6 @@
|
|||
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "content/button-styles"; // .secondary, .contrast, .outline
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
|
|
@ -33,7 +32,6 @@
|
|||
// Components
|
||||
@import "components/accordion"; // details, summary
|
||||
@import "components/card"; // article
|
||||
@import "components/card-sectioning"; // article > header, footer, pre
|
||||
@import "components/nav"; // nav
|
||||
@import "components/progress"; // progress
|
||||
@import "components/tooltip"; // data-tooltip
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Pico.css v1.2.1 (https://picocss.com)
|
||||
* Copyright 2020 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
* You can export only the modules you need
|
||||
|
|
@ -13,13 +13,10 @@
|
|||
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
||||
$enable-responsive-spacings: false;
|
||||
|
||||
// Enable validation states for <input>
|
||||
$enable-input-states: false;
|
||||
|
||||
// Enable transitions for <a>, <button>, <input>, <details>
|
||||
// Enable transitions
|
||||
$enable-transitions: false;
|
||||
|
||||
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"])
|
||||
// Enable overriding with !important
|
||||
$enable-important: false;
|
||||
|
||||
|
||||
|
|
@ -36,7 +33,7 @@ $enable-important: false;
|
|||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
// @import "layout/section"; // section
|
||||
@import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
|
|
@ -44,7 +41,6 @@ $enable-important: false;
|
|||
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit, ...
|
||||
// @import "content/button-styles"; // .secondary, .contrast, .outline
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
|
|
@ -56,7 +52,6 @@ $enable-important: false;
|
|||
// Components
|
||||
// @import "components/accordion"; // details, summary
|
||||
// @import "components/card"; // article
|
||||
// @import "components/card-sectioning"; // article > header, footer, pre
|
||||
// @import "components/nav"; // nav
|
||||
// @import "components/progress"; // progress
|
||||
// @import "components/tooltip"; // data-tooltip
|
||||
|
|
|
|||
|
|
@ -2,8 +2,25 @@
|
|||
* Theme: default
|
||||
*/
|
||||
|
||||
// Variables
|
||||
@import "../variables";
|
||||
@import "default/colors";
|
||||
|
||||
// Commons styles
|
||||
@import "default/styles";
|
||||
@import "default/icons";
|
||||
|
||||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
@import "default/light";
|
||||
@import "default/dark";
|
||||
|
||||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
@import "default/dark";
|
||||
}
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
@import "default/dark";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ $grey-800: hsl($grey-hue, 25%, 23%) !default;
|
|||
$grey-900: hsl($grey-hue, 30%, 15%) !default;
|
||||
|
||||
// Light Blue
|
||||
$primary-hue: 195;
|
||||
$primary-hue: 195 !default;
|
||||
$primary-50: hsl($primary-hue, 90%, 94%) !default;
|
||||
$primary-100: hsl($primary-hue, 88%, 86%) !default;
|
||||
$primary-200: hsl($primary-hue, 86%, 77%) !default;
|
||||
|
|
@ -28,10 +28,38 @@ $primary-900: hsl($primary-hue, 100%, 15%) !default;
|
|||
$black: #000 !default;
|
||||
$white: #FFF !default;
|
||||
|
||||
// Miscs
|
||||
$amber-200: hsl(45, 100%, 75%) !default;
|
||||
$green-500: hsl(160, 50%, 40%) !default;
|
||||
$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;
|
||||
// Amber
|
||||
$amber-50: #FFF8E1 !default;
|
||||
$amber-100: #FFECB3 !default;
|
||||
$amber-200: #FFE082 !default;
|
||||
$amber-300: #FFD54F !default;
|
||||
$amber-400: #FFCA28 !default;
|
||||
$amber-500: #FFC107 !default;
|
||||
$amber-600: #FFB300 !default;
|
||||
$amber-700: #FFA000 !default;
|
||||
$amber-800: #FF8F00 !default;
|
||||
$amber-900: #FF6F00 !default;
|
||||
|
||||
// Green
|
||||
$green-50: #E8F5E9 !default;
|
||||
$green-100: #C8E6C9 !default;
|
||||
$green-200: #A5D6A7 !default;
|
||||
$green-300: #81C784 !default;
|
||||
$green-400: #66BB6A !default;
|
||||
$green-500: #4CAF50 !default;
|
||||
$green-600: #43A047 !default;
|
||||
$green-700: #388E3C !default;
|
||||
$green-800: #2E7D32 !default;
|
||||
$green-900: #1B5E20 !default;
|
||||
|
||||
// Red
|
||||
$red-50: #FFEBEE !default;
|
||||
$red-100: #FFCDD2 !default;
|
||||
$red-200: #EF9A9A !default;
|
||||
$red-300: #E57373 !default;
|
||||
$red-400: #EF5350 !default;
|
||||
$red-500: #F44336 !default;
|
||||
$red-600: #E53935 !default;
|
||||
$red-700: #D32F2F !default;
|
||||
$red-800: #C62828 !default;
|
||||
$red-900: #B71C1C !default;
|
||||
|
|
|
|||
|
|
@ -1,164 +1,122 @@
|
|||
// 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%)};
|
||||
|
||||
// Typography
|
||||
--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-border: var(--primary);
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-border: var(--secondary);
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-border: var(--contrast);
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--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-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
|
||||
// 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, .1875)};
|
||||
--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)};
|
||||
|
||||
// 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)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-500, .075)};
|
||||
--table-stripping: #{rgba($grey-500, .05)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
// Default: Dark theme
|
||||
:root:not([data-theme="light"]) {
|
||||
|
||||
// Document
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
color-scheme: dark;
|
||||
--background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-300};
|
||||
--h1: #{$grey-50};
|
||||
--h2: #{$grey-100};
|
||||
--h3: #{$grey-200};
|
||||
--h4: #{$grey-300};
|
||||
--h5: #{$grey-400};
|
||||
--h6: #{$grey-500};
|
||||
// Texts colors
|
||||
--color: #{$grey-200};
|
||||
--h1-color: #{$grey-50};
|
||||
--h2-color: #{mix($grey-50, $grey-100)};
|
||||
--h3-color: #{$grey-100};
|
||||
--h4-color: #{mix($grey-100, $grey-200)};
|
||||
--h5-color: #{$grey-200};
|
||||
--h6-color: #{mix($grey-200, $grey-300)};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: var(--primary);
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
// Muted colors
|
||||
--muted-color: #{$grey-500};
|
||||
--muted-border-color: #{mix($grey-900, $grey-800, 75%)};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-border: var(--secondary);
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-border: var(--contrast);
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-500, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-50};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-500, .25)};
|
||||
--contrast-inverse: #{$black};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
--mark-background-color: #{mix($grey-300, $amber-300)};
|
||||
--mark-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<ins>)
|
||||
--ins-color: #{$green-700};
|
||||
--del-color: #{$red-800};
|
||||
|
||||
// Blockquote
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
|
||||
// Form elements
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
--form-element-background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
--form-element-border-color: #{mix($grey-800, $grey-700)};
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-800};
|
||||
--form-element-disabled-border-color: #{$grey-700};
|
||||
--form-element-invalid-border-color: #{$red-900};
|
||||
--form-element-invalid-active-border-color: #{$red-800};
|
||||
--form-element-valid-border-color: #{$green-800};
|
||||
--form-element-valid-active-border-color: #{$green-700};
|
||||
|
||||
// Button
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
--switch-background-color: #{mix($grey-800, $grey-700)};
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .1875)};
|
||||
--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)};
|
||||
|
||||
// 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)};
|
||||
// Range (input[type="range"])
|
||||
--range-border-color: #{mix($grey-900, $grey-800)};
|
||||
--range-active-border-color: #{$grey-800};
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-500, .075)};
|
||||
--table-stripping: #{rgba($grey-500, .05)};
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: #{rgba($grey-500, .05)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #{hsl(330, 30%, 50%)};
|
||||
--code-property-color: #{hsl(185, 30%, 50%)};
|
||||
--code-value-color: #{hsl(40, 10%, 50%)};
|
||||
--code-comment-color: #{mix($grey-600, $grey-700)};
|
||||
|
||||
// Accordion (<details>)
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-active-summary-color: var(--primary);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
|
||||
// Card (<article>)
|
||||
--card-background-color: #{mix($black, $grey-900, 25%)};
|
||||
--card-border-color: #{mix($black, $grey-900, 37.5%)};
|
||||
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
|
||||
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
||||
// Progress
|
||||
--progress-background-color: #{mix($grey-900, $grey-800)};
|
||||
--progress-color: var(--primary);
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
|
||||
// Icons
|
||||
--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-300, .999)}' 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-300, .999)}' 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-300, .999)}' 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-300, .999)}' 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-800, .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-900, .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,13 +0,0 @@
|
|||
// 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,81 +1,122 @@
|
|||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
|
||||
// Default: Light theme
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
||||
// Document
|
||||
--background: #{$white};
|
||||
color-scheme: light;
|
||||
--background-color: #{$white};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-700};
|
||||
--h1: #{$grey-900};
|
||||
--h2: #{$grey-800};
|
||||
--h3: #{$grey-700};
|
||||
--h4: #{$grey-600};
|
||||
--h5: #{$grey-500};
|
||||
--h6: #{$grey-400};
|
||||
// Texts colors
|
||||
--color: #{$grey-700};
|
||||
--h1-color: #{$grey-900};
|
||||
--h2-color: #{mix($grey-900, $grey-800)};
|
||||
--h3-color: #{$grey-800};
|
||||
--h4-color: #{mix($grey-800, $grey-700)};
|
||||
--h5-color: #{$grey-700};
|
||||
--h6-color: #{mix($grey-700, $grey-600)};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: var(--primary);
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
// Muted colors
|
||||
--muted-color: #{$grey-500};
|
||||
--muted-border-color: #{$grey-50};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-500};
|
||||
--secondary-border: var(--secondary);
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: #{rgba($grey-500, .125)};
|
||||
--secondary-inverse: #{$white};
|
||||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-800};
|
||||
--contrast-border: var(--contrast);
|
||||
--contrast-hover: #{mix($grey-900, $black)};
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--contrast-focus: #{rgba($grey-500, .125)};
|
||||
--contrast-inverse: #{$white};
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-600, .125)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-900};
|
||||
--contrast-hover: #{$black};
|
||||
--contrast-focus: #{rgba($grey-600, .125)};
|
||||
--contrast-inverse: #{$white};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
--mark-background-color: #{mix($amber-50, $amber-100)};
|
||||
--mark-color: #{mix($grey-900, $amber-900, 75%)};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<ins>)
|
||||
--ins-color: #{$green-700};
|
||||
--del-color: #{$red-800};
|
||||
|
||||
// Blockquote
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
|
||||
// Form elements
|
||||
--input-background: #{$white};
|
||||
--input-border: #{mix($grey-100, $grey-200)};
|
||||
--input-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #{$grey-300};
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-100};
|
||||
--form-element-disabled-border-color: #{$grey-300};
|
||||
--form-element-invalid-border-color: #{$red-800};
|
||||
--form-element-invalid-active-border-color: #{$red-900};
|
||||
--form-element-valid-border-color: #{$green-700};
|
||||
--form-element-valid-active-border-color: #{$green-800};
|
||||
|
||||
// Button
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
--switch-background-color: #{$grey-200};
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-600};
|
||||
--invalid: #{$red-700};
|
||||
--mark: #{rgba($amber-200, .33)};
|
||||
--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)};
|
||||
|
||||
// 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)};
|
||||
// Range (input[type="range"])
|
||||
--range-border-color: #{$grey-100};
|
||||
--range-active-border-color: #{$grey-200};
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-50, .75)};
|
||||
--table-stripping: #{rgba($grey-500, .075)};
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color:#{mix($white, $grey-50)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{$grey-50};
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #{hsl(330, 40%, 50%)};
|
||||
--code-property-color: #{hsl(185, 40%, 40%)};
|
||||
--code-value-color: #{hsl(40, 20%, 50%)};
|
||||
--code-comment-color: #{$grey-300};
|
||||
|
||||
// Accordion (<details>)
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
|
||||
// Card (<article>)
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-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-sectionning-background-color: #{mix($white, $grey-50, 75%)};
|
||||
|
||||
// Progress
|
||||
--progress-background-color: #{$grey-100};
|
||||
--progress-color: var(--primary);
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
|
||||
// Icons
|
||||
--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-700, .999)}' 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-700, .999)}' 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-700, .999)}' 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-700, .999)}' 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-700, .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-800, .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,93 +1,214 @@
|
|||
// Commons Styles
|
||||
|
||||
:root {
|
||||
|
||||
// Typography
|
||||
// ––––––––––––––––––––
|
||||
--font-family: 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";
|
||||
--line-height: 1.5;
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
|
||||
// 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";
|
||||
// Responsive typography
|
||||
@if $enable-responsive-typography {
|
||||
|
||||
// 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);
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
--h6-size: 1rem;
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Borders
|
||||
--border-radius: .25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
|
||||
// Spacings
|
||||
// ––––––––––––––––––––
|
||||
--spacing: 1rem;
|
||||
|
||||
// Gutters and horizontals margins
|
||||
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre>
|
||||
--spacing-gutter: 1rem;
|
||||
// Spacings for typography elements
|
||||
--typography-spacing-vertical: 1.5rem;
|
||||
|
||||
// Vertical spacing for blocks
|
||||
// For <header>, <main>, <footer>, <section>, <article>
|
||||
--spacing-block: 2rem;
|
||||
// Spacings for body > header, body > main, body > footer, section, article
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
|
||||
// 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;
|
||||
// Spacings .grid
|
||||
--grid-spacing-vertical: 0;
|
||||
--grid-spacing-horizontal: var(--spacing);
|
||||
|
||||
// Spacings for form elements and button
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Transitions
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Transitions: <a>, <form> elements and <button>
|
||||
--transition: .2s ease-in-out;
|
||||
--transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
// Responsives spacings
|
||||
@if $enable-responsive-spacings {
|
||||
|
||||
// Sectionning
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card (<article>)
|
||||
article {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
a {
|
||||
--text-decoration: none;
|
||||
|
||||
// Secondary & Contrast
|
||||
&.secondary,
|
||||
&.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
--font-size: 0.875rem;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
--font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
--font-size: 2rem;
|
||||
--typography-spacing-vertical: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--font-size: 1.75rem;
|
||||
--typography-spacing-vertical: 2.625rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--font-size: 1.5rem;
|
||||
--typography-spacing-vertical: 2.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--font-size: 1.25rem;
|
||||
--typography-spacing-vertical: 1.874rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--font-size: 1.125rem;
|
||||
--typography-spacing-vertical: 1.6875rem;
|
||||
}
|
||||
|
||||
// Forms elements
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"] {
|
||||
--border-width: 3px;
|
||||
}
|
||||
|
||||
// Table
|
||||
table {
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
--border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(thead) td {
|
||||
--font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
--font-family: "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";
|
||||
}
|
||||
|
||||
kbd {
|
||||
--font-weight: bolder;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue