mirror of
https://github.com/picocss/pico.git
synced 2025-04-27 19:46:14 -04:00
Merge branch 'dev' into feat/nav_breadcrumb
This commit is contained in:
Jelmer Veen
GitHub
commit
7354c7f347
105 changed files with 4323 additions and 2904 deletions
|
|
@ -5,15 +5,18 @@
|
|||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: var(--spacing);
|
||||
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;
|
||||
|
||||
&:not([role]) {
|
||||
color: var(--accordion-close-summary-color);
|
||||
}
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
|
@ -36,10 +39,11 @@ details {
|
|||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center;
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
|
@ -51,14 +55,31 @@ details {
|
|||
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: var(--accordion-active-summary-color);
|
||||
|
||||
&:not([role="button"]) {
|
||||
color: var(--accordion-active-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
~ * {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
// Type button
|
||||
&[role="button"] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
~ * {
|
||||
margin-top: 0;
|
||||
// Marker
|
||||
&::after {
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
background-image: var(--icon-chevron-button);
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
// .contrast
|
||||
&:not(.outline).contrast {
|
||||
// Marker
|
||||
&::after {
|
||||
background-image: var(--icon-chevron-button-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -66,15 +87,17 @@ details {
|
|||
// Open
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing));
|
||||
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
&:not([role]) {
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -82,8 +105,11 @@ details {
|
|||
[dir="rtl"] {
|
||||
details {
|
||||
summary {
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
float: left;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
article {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
|
@ -23,11 +22,15 @@ article {
|
|||
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
> footer {
|
||||
margin-top: var(--block-spacing-vertical);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||
border-top: var(--border-width) solid var(--card-border-color);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
208
scss/components/_dropdown.scss
Normal file
208
scss/components/_dropdown.scss
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
/**
|
||||
* Dropdown ([role="list"])
|
||||
*/
|
||||
|
||||
// Menu
|
||||
details[role="list"],
|
||||
li[role="list"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
details[role="list"] summary + ul,
|
||||
li[role="list"] > ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: var(--border-width) solid var(--dropdown-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
background-color: var(--dropdown-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
color: var(--dropdown-color);
|
||||
white-space: nowrap;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
color: var(--dropdown-color);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Marker
|
||||
details[role="list"] summary,
|
||||
li[role="list"] > a {
|
||||
&::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
margin-inline-start: 0.5rem;
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
// Global dropdown only
|
||||
details[role="list"] {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
|
||||
// Style <summary> as <select>
|
||||
summary {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not([role]) {
|
||||
height: calc(
|
||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||||
var(--border-width) * 2
|
||||
);
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--form-element-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--form-element-background-color);
|
||||
color: var(--form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--form-element-active-border-color);
|
||||
background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close for details[role="list"]
|
||||
&[open] summary {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All Dropdowns inside <nav>
|
||||
nav details[role="list"] summary,
|
||||
nav li[role="list"] a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
nav details[role="list"] summary + ul,
|
||||
nav li[role="list"] > ul {
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns inside <nav> as nested <details>
|
||||
nav details[role="list"] {
|
||||
summary,
|
||||
summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
&[open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
summary[role="link"] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
|
||||
+ ul {
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns inside a <nav> without using <details>
|
||||
li[role="list"] {
|
||||
// Open on hover (for mobile)
|
||||
// or on active/focus (for keyboard navigation)
|
||||
&:hover > ul,
|
||||
a:active ~ ul,
|
||||
a:focus ~ ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: none;
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
margin-inline-start: calc(
|
||||
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
|
||||
);
|
||||
}
|
||||
|
||||
> a::after {
|
||||
background-image: var(--icon-chevron);
|
||||
}
|
||||
}
|
||||
|
|
@ -21,23 +21,24 @@ dialog {
|
|||
height: inherit;
|
||||
min-height: 100%;
|
||||
padding: var(--spacing);
|
||||
border: none;
|
||||
border: 0;
|
||||
background-color: var(--modal-overlay-background-color);
|
||||
color: var(--color);
|
||||
|
||||
// Content
|
||||
article {
|
||||
max-height: calc(100vh - var(--spacing) * 2);
|
||||
overflow: auto;
|
||||
|
||||
@if map-get($breakpoints, 'sm') {
|
||||
@media (min-width: map-get($breakpoints, 'sm')) {
|
||||
max-width: map-get($viewports, 'sm');
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, 'md') {
|
||||
@media (min-width: map-get($breakpoints, 'md')) {
|
||||
max-width: map-get($viewports, 'md');
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +59,7 @@ dialog {
|
|||
> footer {
|
||||
text-align: right;
|
||||
|
||||
[role='button'] {
|
||||
[role="button"] {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
|
|
@ -92,9 +93,7 @@ dialog {
|
|||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -103,7 +102,7 @@ dialog {
|
|||
|
||||
// Closed state
|
||||
&:not([open]),
|
||||
&[open='false'] {
|
||||
&[open="false"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -125,8 +124,7 @@ dialog {
|
|||
@if ($enable-classes and $enable-transitions) {
|
||||
$animation-duration: 0.2s;
|
||||
|
||||
.modal-is-opening,
|
||||
.modal-is-closing {
|
||||
:where(.modal-is-opening, .modal-is-closing) {
|
||||
dialog,
|
||||
dialog > article {
|
||||
animation-duration: $animation-duration;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,18 @@
|
|||
* Nav
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
||||
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
|
||||
:where(nav li)::before {
|
||||
float: left;
|
||||
content: "\200B";
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Horizontal Nav
|
||||
nav,
|
||||
nav ul {
|
||||
|
|
@ -19,35 +31,34 @@ nav {
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -0.5);
|
||||
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(--spacing) * -0.5);
|
||||
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
padding: var(--nav-element-spacing-vertical)
|
||||
var(--nav-element-spacing-horizontal);
|
||||
|
||||
// HACK: Input & Button inside Nav
|
||||
> *,
|
||||
> input:not([type="checkbox"]):not([type="radio"]) {
|
||||
margin-bottom: 0;
|
||||
// Minimal support for buttons and forms elements
|
||||
> * {
|
||||
--spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
:where(a, [role="link"]) {
|
||||
display: inline-block;
|
||||
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
||||
calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -91,11 +102,16 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
|
||||
var(--nav-element-spacing-horizontal);
|
||||
|
||||
a {
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Minimal support for links as buttons
|
||||
[role="button"] {
|
||||
margin: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add the correct display in Edge 18- and IE
|
||||
|
|
@ -40,7 +40,7 @@ progress {
|
|||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
background: none;
|
||||
}
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--progress-color);
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin in Firefox and Safari
|
||||
// 2. Remove the margin on controls in Safari
|
||||
// 3. Show the overflow in Edge
|
||||
button {
|
||||
margin: 0; // 2
|
||||
|
|
@ -17,7 +17,7 @@ button {
|
|||
text-transform: none; // 1
|
||||
}
|
||||
|
||||
// Correct the inability to style clickable types in iOS and Safari
|
||||
// Correct the inability to style buttons in iOS and Safari
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
|
|
@ -25,15 +25,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Remove the inner border and padding in Firefox
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -77,9 +68,7 @@ input[type="reset"],
|
|||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
|
|
@ -96,19 +85,14 @@ input[type="reset"],
|
|||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
button.secondary,
|
||||
input[type="submit"].secondary,
|
||||
input[type="button"].secondary,
|
||||
input[type="reset"],
|
||||
[role="button"].secondary {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
|
|
@ -121,18 +105,12 @@ input[type="reset"],
|
|||
}
|
||||
|
||||
// Contrast
|
||||
button.contrast,
|
||||
input[type="submit"].contrast,
|
||||
input[type="button"].contrast,
|
||||
input[type="reset"].contrast,
|
||||
[role="button"].contrast {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
--color: var(--contrast-inverse);
|
||||
|
|
@ -145,53 +123,36 @@ input[type="reset"],
|
|||
}
|
||||
|
||||
// Outline (primary)
|
||||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
input[type="button"].outline,
|
||||
input[type="reset"].outline,
|
||||
[role="button"].outline {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
|
||||
input[type="reset"].outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
button.outline.secondary,
|
||||
input[type="submit"].outline.secondary,
|
||||
input[type="button"].outline.secondary,
|
||||
input[type="reset"].outline.secondary,
|
||||
[role="button"].outline.secondary {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
|
||||
input[type="reset"].outline {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
button.outline.contrast,
|
||||
input[type="submit"].outline.contrast,
|
||||
input[type="button"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
[role="button"].outline.contrast {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
|
|
@ -200,9 +161,7 @@ input[type="reset"],
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -215,13 +174,10 @@ input[type="reset"],
|
|||
}
|
||||
|
||||
// Button [disabled]
|
||||
// 1. Links without href are disabled by default
|
||||
button[disabled],
|
||||
input[type="submit"][disabled],
|
||||
input[type="button"][disabled],
|
||||
input[type="reset"][disabled],
|
||||
a[role="button"]:not([href]), // 1
|
||||
[role="button"][disabled] {
|
||||
// Links without href are disabled by default
|
||||
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
|
||||
a[role="button"]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||
// 2. Correct the font sizing in all browsers
|
||||
// 2. Correct the odd `em` font sizing in all browsers
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
|
|
@ -50,7 +50,7 @@ pre {
|
|||
> code {
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
background: transparent;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,11 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change the alignment on media elements in all browsers (opinionated)
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
:where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +25,7 @@ audio:not([controls]) {
|
|||
}
|
||||
|
||||
// Remove the border on iframes in all browsers (opinionated)
|
||||
iframe {
|
||||
:where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +38,7 @@ img {
|
|||
}
|
||||
|
||||
// Change the fill color to match the text color in all browsers (opinionated)
|
||||
svg:not([fill]) {
|
||||
:where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
// Swatch
|
||||
@mixin color-swatch {
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
// Date & Time
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
|
||||
&[type="date"],
|
||||
&[type="datetime-local"],
|
||||
&[type="month"],
|
||||
|
|
@ -70,31 +70,19 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
text-align: right;
|
||||
}
|
||||
[dir="rtl"]
|
||||
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// File
|
||||
[type="file"] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
@mixin file-selector-button {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
|
|
@ -123,9 +111,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -157,7 +143,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: $height-thumb;
|
||||
background: transparent;
|
||||
background: none;
|
||||
|
||||
// Slider Track
|
||||
@mixin slider-track {
|
||||
|
|
@ -238,14 +224,32 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
|
||||
// Search
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
|
||||
&[type="search"] {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
border-radius: 5rem;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
}
|
||||
@else {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
}
|
||||
background-position: center left 1.125rem, center right 0.75rem;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-search), var(--icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-search), var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -256,3 +260,17 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
:where(input) {
|
||||
&:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
|
||||
&[type="search"] {
|
||||
background-position: center right 1.125rem;
|
||||
|
||||
&[aria-invalid] {
|
||||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
|
|
@ -174,20 +174,16 @@ textarea {
|
|||
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
:where(select, textarea) {
|
||||
&:is(:active, :focus) {
|
||||
--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 {
|
||||
:where(select, textarea) {
|
||||
&:is(:active, :focus) {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -202,21 +198,18 @@ textarea {
|
|||
}
|
||||
|
||||
// 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: var(--form-element-disabled-opacity);
|
||||
}
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
:where(fieldset[disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
:where(input, select, textarea) {
|
||||
&:not([type="checkbox"]):not([type="radio"]) {
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
|
|
@ -228,7 +221,8 @@ textarea {
|
|||
padding-inline-end: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
} @else {
|
||||
}
|
||||
@else {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
|
|
@ -242,7 +236,7 @@ textarea {
|
|||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
|
|
@ -251,12 +245,12 @@ textarea {
|
|||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is(:active, :focus) {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||
} @else {
|
||||
}
|
||||
@else {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
||||
}
|
||||
|
|
@ -265,13 +259,13 @@ textarea {
|
|||
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
|
||||
&:is(:active, :focus) {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||
} @else {
|
||||
}
|
||||
@else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
||||
}
|
||||
|
|
@ -280,9 +274,7 @@ textarea {
|
|||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
:where(input, select, textarea) {
|
||||
&:not([type="checkbox"]):not([type="radio"]) {
|
||||
&[aria-invalid],
|
||||
&[aria-invalid="true"],
|
||||
|
|
@ -339,9 +331,7 @@ select {
|
|||
}
|
||||
|
||||
// Helper
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
:where(input, select, textarea) {
|
||||
+ small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -353,9 +343,7 @@ textarea {
|
|||
|
||||
// Styles for Input inside a label
|
||||
label {
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
> :where(input, select, textarea) {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,17 +4,16 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add the correct box sizing in Firefox
|
||||
// 2. Show the overflow in Edge and IE
|
||||
// 1. Correct the inheritance of border color in Firefox
|
||||
// 2. Add the correct box sizing in Firefox
|
||||
hr {
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
border: none;
|
||||
height: 0; // 2
|
||||
border: 0;
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
color: inherit; // 1
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
|
|
@ -22,7 +21,8 @@ hr {
|
|||
template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
} @else {
|
||||
}
|
||||
@else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,18 +4,16 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Collapse border spacing in all browsers (opinionated).
|
||||
// 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
|
||||
// 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
|
||||
table {
|
||||
// 1. Collapse border spacing in all browsers (opinionated)
|
||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||
:where(table) {
|
||||
width: 100%;
|
||||
border-color: inherit; // 2
|
||||
border-collapse: collapse; // 1
|
||||
border-spacing: 0;
|
||||
text-indent: 0; // 3
|
||||
text-indent: 0; // 2
|
||||
}
|
||||
|
||||
// Pico
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
|
|
@ -28,23 +28,6 @@ sup {
|
|||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Remove the margin on nested lists in Edge 18- and IE
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -68,7 +51,8 @@ ul {
|
|||
|
||||
// Links
|
||||
// 1. Remove the gray background on active links in IE 10
|
||||
a {
|
||||
a,
|
||||
[role="link"] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -81,9 +65,7 @@ a {
|
|||
text-decoration var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
|
@ -97,9 +79,7 @@ a {
|
|||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
|
|
@ -112,9 +92,7 @@ a {
|
|||
&.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
|
|
@ -160,22 +138,8 @@ h6 {
|
|||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
& ~ h1,
|
||||
& ~ h2,
|
||||
& ~ h3,
|
||||
& ~ h4,
|
||||
& ~ h5,
|
||||
& ~ h6 {
|
||||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
|
@ -227,8 +191,7 @@ small {
|
|||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
:where(dl, ol, ul) {
|
||||
padding-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
padding-inline-start: var(--spacing);
|
||||
|
|
@ -239,6 +202,15 @@ ol {
|
|||
}
|
||||
}
|
||||
|
||||
// Margin-top for nested lists
|
||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
:where(dl, ol, ul) {
|
||||
:is(dl, ol, ul) {
|
||||
margin: 0; // 1
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,16 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
|
||||
// 1. Add border box sizing in all browsers (opinionated)
|
||||
// 2. Backgrounds do not repeat by default (opinionated)
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
background-repeat: no-repeat; // 2
|
||||
}
|
||||
|
||||
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||
|
|
@ -23,23 +25,24 @@
|
|||
vertical-align: inherit; // 2
|
||||
}
|
||||
|
||||
// 1. Correct the line height in all browsers
|
||||
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
|
||||
// 3. Change the default tap highlight to be completely transparent in iOS
|
||||
// 4. Use the default cursor in all browsers (opinionated)
|
||||
// 5. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
|
||||
-ms-text-size-adjust: 100%; // 6
|
||||
// 1. Use the default cursor in all browsers (opinionated)
|
||||
// 2. Change the line height in all browsers (opinionated)
|
||||
// 3. Breaks words to prevent overflow in all browsers (opinionated)
|
||||
// 4. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 5. Remove the grey highlight on links in iOS (opinionated)
|
||||
// 6. Prevent adjustments of font size after orientation changes in iOS
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent; // 5
|
||||
-webkit-text-size-adjust: 100%; // 6
|
||||
text-size-adjust: 100%; // 6
|
||||
text-rendering: optimizeLegibility;
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height); // 1
|
||||
line-height: var(--line-height); // 2
|
||||
font-family: var(--font-family);
|
||||
cursor: default; // 4
|
||||
tab-size: 4; // 5
|
||||
overflow-wrap: break-word; // 3
|
||||
cursor: default; // 1
|
||||
tab-size: 4; // 4
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
// Reboot 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Render the `main` element consistently in IE
|
||||
|
|
@ -16,9 +16,10 @@ main {
|
|||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove the margin in all browsers (opinionated)
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin: 0; // 1
|
||||
|
||||
> header,
|
||||
> main,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Pico.css v1.4.4 (https://picocss.com)
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
* Pico.css v1.5.2 (https://picocss.com)
|
||||
* Copyright 2019-2022 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Config
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
@import "components/modal"; // dialog
|
||||
@import "components/nav"; // nav
|
||||
@import "components/progress"; // progress
|
||||
@import "components/dropdown"; // dropdown
|
||||
|
||||
// Utilities
|
||||
@import "utilities/loading"; // aria-busy=true
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Pico.css v1.4.4 (https://picocss.com)
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
* Pico.css v1.5.2 (https://picocss.com)
|
||||
* Copyright 2019-2022 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
* You can export only the modules you need
|
||||
|
|
|
|||
|
|
@ -103,13 +103,28 @@
|
|||
--accordion-open-summary-color: var(--muted-color);
|
||||
|
||||
// Card (<article>)
|
||||
$box-shadow-elevation: 1rem;
|
||||
$box-shadow-blur-strengh: 6rem;
|
||||
$box-shadow-opacity: 0.06;
|
||||
--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-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
|
||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
|
||||
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
|
||||
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
--dropdown-background-color: #{$grey-900};
|
||||
--dropdown-border-color: #{mix($grey-900, $grey-800)};
|
||||
--dropdown-box-shadow: var(--card-box-shadow);
|
||||
--dropdown-color: var(--color);
|
||||
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
|
||||
|
||||
|
|
@ -127,6 +142,8 @@
|
|||
// Icons
|
||||
--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-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-chevron-button: 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($white, .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-chevron-button-inverse: 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($black, .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-close: 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)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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");
|
||||
|
|
|
|||
|
|
@ -103,12 +103,27 @@
|
|||
--accordion-open-summary-color: var(--muted-color);
|
||||
|
||||
// Card (<article>)
|
||||
$box-shadow-elevation: 1rem;
|
||||
$box-shadow-blur-strengh: 6rem;
|
||||
$box-shadow-opacity: 0.06;
|
||||
--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($grey-50, $white, 25%)};
|
||||
--card-box-shadow:
|
||||
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
|
||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
|
||||
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
|
||||
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
|
||||
--dropdown-border-color: #{mix($grey-100, $grey-50)};
|
||||
--dropdown-box-shadow: var(--card-box-shadow);
|
||||
--dropdown-color: var(--color);
|
||||
--dropdown-hover-background-color: #{$grey-50};
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};
|
||||
|
|
@ -127,6 +142,8 @@
|
|||
// Icons
|
||||
--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-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-chevron-button: 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($white, .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-chevron-button-inverse: 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($white, .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-close: 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)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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");
|
||||
|
|
|
|||
|
|
@ -59,6 +59,12 @@
|
|||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Spacings for nav component
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
|
||||
// Font weight for form labels & fieldsets legend
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
* Accessibility & User interaction
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Accessibility
|
||||
|
|
@ -45,7 +44,6 @@ textarea,
|
|||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
border: 0.1875em solid currentColor;
|
||||
border-radius: 1em;
|
||||
border-right-color: transparent;
|
||||
content: '';
|
||||
content: "";
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -.125em; // Visual alignment
|
||||
animation: spinner 0.75s linear infinite;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
@if $enable-transitions and $enable-important {
|
||||
|
||||
/**
|
||||
/**
|
||||
* Reduce Motion Features
|
||||
*/
|
||||
|
||||
|
||||
// Based on :
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove animations when motion is reduced (opinionated)
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
border-left: .3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
content: '';
|
||||
content: "";
|
||||
color: var(--tooltip-background-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue