mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
Merge branch 'dev' into pr/141
This commit is contained in:
Lucas Larroche
commit
ad534987fc
16 changed files with 78 additions and 71 deletions
|
|
@ -131,7 +131,7 @@ details[role="list"] {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
background: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ dialog {
|
|||
height: inherit;
|
||||
min-height: 100%;
|
||||
padding: var(--spacing);
|
||||
border: none;
|
||||
border: 0;
|
||||
background-color: var(--modal-overlay-background-color);
|
||||
|
||||
// Content
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
|
|
@ -83,7 +83,7 @@ input[type="reset"],
|
|||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
|
||||
|
||||
// Secondary
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
||||
input[type="reset"] {
|
||||
|
|
@ -152,8 +152,7 @@ input[type="reset"],
|
|||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
|
|||
[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;
|
||||
|
||||
|
|
@ -143,7 +143,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: $height-thumb;
|
||||
background: transparent;
|
||||
background: none;
|
||||
|
||||
// Slider Track
|
||||
@mixin slider-track {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -221,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);
|
||||
|
|
@ -235,7 +236,7 @@ textarea {
|
|||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
|
|
@ -248,7 +249,8 @@ textarea {
|
|||
@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);
|
||||
}
|
||||
|
|
@ -257,12 +259,13 @@ textarea {
|
|||
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
|
||||
|
||||
&: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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue