mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 10:46:14 -04:00
Prettify code
This commit is contained in:
Lucas Larroche
parent
868e5d20cb
commit
5f6e3c1abd
59 changed files with 1079 additions and 1027 deletions
|
|
@ -2,7 +2,6 @@
|
|||
* Button
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -35,7 +34,6 @@ button::-moz-focus-inner,
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -59,7 +57,8 @@ a[role="button"] {
|
|||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
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;
|
||||
|
|
@ -73,10 +72,8 @@ a[role="button"] {
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
|
|
@ -89,7 +86,8 @@ a[role="button"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +106,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +118,6 @@ input[type="reset"] {
|
|||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--background-color: var(--secondary);
|
||||
|
|
@ -135,7 +133,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +152,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -200,9 +200,8 @@ input[type="submit"],
|
|||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
&[disabled] {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Code
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -15,7 +14,7 @@ code,
|
|||
kbd,
|
||||
samp {
|
||||
font-family: var(--font-family); // 1
|
||||
font-size: .875em; // 2
|
||||
font-size: 0.875em; // 2
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
|
|
@ -24,7 +23,6 @@ pre {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -41,7 +39,7 @@ kbd {
|
|||
code,
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
@ -60,7 +58,6 @@ pre {
|
|||
|
||||
// Code Syntax
|
||||
code {
|
||||
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-tag-color);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Embedded content
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
|
||||
// Color
|
||||
[type="color"] {
|
||||
|
||||
// Wrapper
|
||||
@mixin color-wrapper {
|
||||
padding: 0;
|
||||
|
|
@ -24,7 +23,7 @@
|
|||
border: none;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
@include color-swatch;
|
||||
}
|
||||
|
|
@ -42,15 +41,15 @@
|
|||
[type="time"],
|
||||
[type="week"] {
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right .75rem;
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
||||
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Time
|
||||
[type="time"] {
|
||||
background-image: var(--icon-time);
|
||||
|
|
@ -64,7 +63,7 @@
|
|||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -80,7 +79,8 @@
|
|||
margin-left: 0;
|
||||
margin-inline-end: calc(var(--spacing) / 2);
|
||||
margin-inline-start: 0;
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
|
|
@ -92,31 +92,29 @@
|
|||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&::file-selector-button {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
||||
|
||||
&::-ms-browse {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
|
@ -125,14 +123,14 @@
|
|||
// Range
|
||||
[type="range"] {
|
||||
// Config
|
||||
$height-track: .25rem;
|
||||
$height-track: 0.25rem;
|
||||
$height-thumb: 1.25rem;
|
||||
$border-thumb: 2px;
|
||||
|
||||
// Styles
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: $height-thumb;
|
||||
background: transparent;
|
||||
|
|
@ -145,8 +143,7 @@
|
|||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
|
@ -175,8 +172,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
|
@ -221,7 +217,9 @@
|
|||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
padding-left: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.75rem
|
||||
) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-top: -.125em;
|
||||
margin-right: .375em;
|
||||
margin-top: -0.125em;
|
||||
margin-right: 0.375em;
|
||||
margin-left: 0;
|
||||
margin-inline-end: .375em;
|
||||
margin-inline-end: 0.375em;
|
||||
margin-inline-start: 0;
|
||||
border-width: var(--border-width);
|
||||
vertical-align: middle;
|
||||
|
|
@ -31,12 +31,12 @@
|
|||
background-image: var(--icon-checkbox);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75em auto;
|
||||
background-size: 0.75em auto;
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375em;
|
||||
margin-right: 0.375em;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
background-image: var(--icon-minus);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75em auto;
|
||||
background-size: 0.75em auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus{
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary-inverse);
|
||||
border-width: .35em;
|
||||
border-width: 0.35em;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -74,9 +74,9 @@
|
|||
--color: var(--switch-color);
|
||||
|
||||
// Config
|
||||
$switch-height: 1.25em;
|
||||
$switch-width: 2.25em;
|
||||
$switch-transition: .1s ease-in-out;
|
||||
$switch-height: 1.25em;
|
||||
$switch-width: 2.25em;
|
||||
$switch-transition: 0.1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color);
|
||||
content: '';
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: margin $switch-transition;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Form elements
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -106,16 +105,14 @@ textarea {
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||
height: calc(
|
||||
(1rem * var(--line-height)) +
|
||||
(var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--border-width) * 2)
|
||||
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -145,10 +142,9 @@ textarea {
|
|||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -169,10 +165,8 @@ textarea {
|
|||
font-weight: var(--font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
|
@ -221,21 +215,23 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-right: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-inline-end: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
}
|
||||
background-position: center right .75rem;
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
|
@ -247,9 +243,10 @@ textarea {
|
|||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(
|
||||
--form-element-valid-active-border-color
|
||||
) !important;
|
||||
} @else {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -262,9 +259,10 @@ textarea {
|
|||
&: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
|
||||
) !important;
|
||||
} @else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -276,7 +274,7 @@ textarea {
|
|||
select,
|
||||
textarea {
|
||||
&[aria-invalid] {
|
||||
background-position: center left .75rem;
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -300,7 +298,6 @@ textarea {
|
|||
|
||||
// Select
|
||||
select {
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
border: 0;
|
||||
|
|
@ -313,16 +310,16 @@ select {
|
|||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center right .75rem;
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
select {
|
||||
select {
|
||||
&:not([multiple]):not([size]) {
|
||||
background-position: center left .75rem;
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Miscs
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -23,8 +22,7 @@ hr {
|
|||
template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Table
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -19,7 +18,6 @@ table {
|
|||
text-indent: 0; // 3
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Typography
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -18,7 +17,7 @@ strong {
|
|||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: .75em;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
@ -46,7 +45,6 @@ ul ul {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -79,11 +77,8 @@ a {
|
|||
text-decoration: var(--text-decoration);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
text-decoration var(--transition),
|
||||
box-shadow var(--transition);
|
||||
transition: background-color var(--transition), color var(--transition),
|
||||
text-decoration var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -98,7 +93,6 @@ a {
|
|||
}
|
||||
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
|
@ -231,7 +225,7 @@ ul li {
|
|||
|
||||
// Highlighted text
|
||||
mark {
|
||||
padding: .125rem .25rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
|
|
@ -243,9 +237,9 @@ blockquote {
|
|||
margin: var(--typography-spacing-vertical) 0;
|
||||
padding: var(--spacing);
|
||||
border-right: none;
|
||||
border-left: .25rem solid var(--blockquote-border-color);
|
||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||
border-inline-end: none;
|
||||
border-inline-start: .25rem solid var(--blockquote-border-color);
|
||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue