mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 03:06:14 -04:00
Lucas
parent
d0730c8b6e
commit
a2404b19b5
27 changed files with 1141 additions and 185 deletions
|
|
@ -3,12 +3,13 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// 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
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers.
|
||||
// 2. Remove the margin in Firefox and Safari.
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin in Firefox and Safari
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
|
|
@ -16,23 +17,29 @@ textarea {
|
|||
margin: 0; // 2
|
||||
font-family: inherit; // 1
|
||||
font-size: 1rem; // 1
|
||||
letter-spacing: inherit; // 2
|
||||
line-height: $line-height; // 1
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Change the inconsistent appearance in all browsers (opinionated).
|
||||
* 2. Add typography inheritance in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
// Show the overflow in IE.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
// Remove the inheritance of text transform in Edge, Firefox, and IE
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// 1. Correct the text wrapping in Edge and IE.
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
// 1. Correct the text wrapping in Edge and IE
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE
|
||||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers.
|
||||
// `fieldset` elements in all browsers
|
||||
legend {
|
||||
display: table; // 1
|
||||
max-width: 100%; // 1
|
||||
|
|
@ -41,41 +48,75 @@ legend {
|
|||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
// Remove the default vertical scrollbar in IE 10+.
|
||||
// 1. Remove the margin in Firefox and Safari
|
||||
// 2. Remove the default vertical scrollbar in IE
|
||||
// 3. Change the resize direction in all browsers (opinionated)
|
||||
textarea {
|
||||
overflow: auto;
|
||||
margin: 0; // 1
|
||||
overflow: auto; // 2
|
||||
resize: vertical; // 3
|
||||
resize: block; // 3
|
||||
}
|
||||
|
||||
// Remove the padding in IE 10.
|
||||
// Remove the padding in IE 10
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button {
|
||||
// Correct the cursor style of increment and decrement buttons in Safari
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 1. Correct the odd appearance in Chrome and Safari.
|
||||
// 2. Correct the outline style in Safari.
|
||||
// 1. Correct the odd appearance in Chrome and Safari
|
||||
// 2. Correct the outline style in Safari
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
outline-offset: -2px; // 2
|
||||
}
|
||||
|
||||
// Remove the inner padding in Chrome and Safari on macOS.
|
||||
// Remove the inner padding in Chrome and Safari on macOS
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
// 2. Change font properties to `inherit` in Safari.
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari
|
||||
// 2. Change font properties to `inherit` in Safari
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // 1
|
||||
font: inherit; // 2
|
||||
}
|
||||
|
||||
// Remove the inner border and padding of focus outlines in Firefox
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// Restore the focus outline styles unset by the previous rule in Firefox
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
// Remove the additional :invalid styles in Firefox
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Change the inconsistent appearance in IE (opinionated)
|
||||
::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Remove the border and padding in all browsers (opinionated)
|
||||
[type="color"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
|
@ -132,7 +173,8 @@ textarea {
|
|||
box-shadow $transition;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -181,17 +223,15 @@ textarea {
|
|||
}
|
||||
|
||||
&.valid {
|
||||
// Source: https://feathericons.com/
|
||||
$valid-icon-color: "288a6a"; // Without '#' !important
|
||||
border-bottom: 1px solid var(--valid);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .99)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
// Source: https://feathericons.com/
|
||||
$invalid-icon-color: "b94646"; // Without '#' !important
|
||||
border-bottom: 1px solid var(--invalid);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $invalid-icon-color + "' 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");
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .99)}' 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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -210,10 +250,9 @@ select {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not([multiple]) {
|
||||
&:not([multiple]):not([size]) {
|
||||
// Source: https://feathericons.com/
|
||||
$caret-icon-color: "808080"; // Without '#' !important
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: 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, .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");
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue