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

style: textarea

Browse source
This commit is contained in:
Lucas Larroche 2023-03-13 01:38:56 +07:00
parent 76a656a08b
commit 44366a33d5
10 changed files with 61 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

15
css/pico.classless.css
View file

@ -780,8 +780,7 @@ sup {
address,
blockquote,
dl,
figure,
form,
figure:not(figure:has(table)),
ol,
p,
pre,
@ -1413,10 +1412,20 @@ select[multiple] option:checked {
background-position: center left 0.75rem;
}
textarea {
display: block;
resize: vertical;
}
textarea[aria-invalid] {
--pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
background-position: top right 0.75rem !important;
background-size: 1rem var(--pico-icon-height) !important;
}
:where(input, select, textarea) + small {
display: block;
width: 100%;
margin-top: calc(var(--pico-spacing) * -0.625);
margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color);
}

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

15
css/pico.css
View file

@ -824,8 +824,7 @@ sup {
address,
blockquote,
dl,
figure,
form,
figure:not(figure:has(table)),
ol,
p,
pre,
@ -1504,10 +1503,20 @@ select[multiple] option:checked {
background-position: center left 0.75rem;
}
textarea {
display: block;
resize: vertical;
}
textarea[aria-invalid] {
--pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
background-position: top right 0.75rem !important;
background-size: 1rem var(--pico-icon-height) !important;
}
:where(input, select, textarea) + small {
display: block;
width: 100%;
margin-top: calc(var(--pico-spacing) * -0.625);
margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color);
}

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

15
css/pico.fluid.classless.css
View file

@ -750,8 +750,7 @@ sup {
address,
blockquote,
dl,
figure,
form,
figure:not(figure:has(table)),
ol,
p,
pre,
@ -1383,10 +1382,20 @@ select[multiple] option:checked {
background-position: center left 0.75rem;
}
textarea {
display: block;
resize: vertical;
}
textarea[aria-invalid] {
--pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
background-position: top right 0.75rem !important;
background-size: 1rem var(--pico-icon-height) !important;
}
:where(input, select, textarea) + small {
display: block;
width: 100%;
margin-top: calc(var(--pico-spacing) * -0.625);
margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color);
}

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

20
scss/forms/_basics.scss
View file

@ -369,12 +369,30 @@
}
}
// Textarea
textarea {
display: block;
resize: vertical;
&[aria-invalid] {
@if $enable-important {
#{$✨}icon-height: calc(
(1rem * var(#{$✨}line-height)) +
(var(#{$✨}form-element-spacing-vertical) * 2) +
(var(#{$✨}border-width) * 2)
);
background-position: top right 0.75rem !important;
background-size: 1rem var(#{$✨}icon-height) !important;
}
}
}
// Helper
:where(input, select, textarea) {
+ small {
display: block;
width: 100%;
margin-top: calc(var(#{$✨}spacing) * -0.625);
margin-top: calc(var(#{$✨}spacing) * -0.75);
margin-bottom: var(#{$✨}spacing);
color: var(#{$✨}muted-color);
}