mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
chore: Update sanitize.css resets
This commit is contained in:
Lucas Larroche
parent
9b0dda8b94
commit
4c914d1807
32 changed files with 201 additions and 249 deletions
|
|
@ -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"],
|
||||
|
|
@ -95,7 +95,6 @@ input[type="reset"],
|
|||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
button.secondary,
|
||||
input[type="submit"].secondary,
|
||||
|
|
@ -196,8 +195,7 @@ input[type="reset"],
|
|||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
|
|
@ -231,4 +229,4 @@ a[role="button"]:not([href]), // 1
|
|||
[role="button"][disabled] {
|
||||
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"],
|
||||
|
|
@ -84,14 +84,14 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=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;
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +157,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,7 +238,7 @@ 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);
|
||||
border-radius: 5rem;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -216,7 +216,6 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
&:not([type="checkbox"]):not([type="radio"]) {
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
|
|
@ -228,7 +227,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 +242,7 @@ textarea {
|
|||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
|
|
@ -256,7 +256,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);
|
||||
}
|
||||
|
|
@ -265,13 +266,14 @@ textarea {
|
|||
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
|
||||
|
||||
&: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
|
||||
|
|
@ -28,20 +28,8 @@ 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 {
|
||||
// Remove the margin on nested lists in Chrome, Edge, and Safari
|
||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue