mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 11:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prettify code

Browse source
This commit is contained in:
Lucas Larroche 2021-10-24 12:33:20 +07:00
parent 868e5d20cb
commit 5f6e3c1abd
59 changed files with 1079 additions and 1027 deletions
Download patch file Download diff file Expand all files Collapse all files

57
scss/content/_form.scss
View file

@ -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;
}
}
}