sharpetronics/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-11-10 00:08:40 -05:00
Code Issues Projects Releases Wiki Activity

feat: inputs refactoring, keeping where statements as is for better merge-rules

Browse Source
This commit is contained in:
Erik Poehler 2025-10-24 01:17:31 +02:00
parent e5264b20bd
commit 7257f94241
3 changed files with 111 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
scss/inline/_input.scss
View File

@ -39,8 +39,6 @@
* Found in scss/forms/_input-search.scss#4: `@if map.get($modules, "forms/input-search") {`
* Found in scss/forms/_input-search.scss#10: `#{\$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {`
* Found in scss/forms/_input-search.scss#46: `#{\$parent-selector} :where(input) {`
* Found in scss/utilities/_accessibility.scss#42: `#{\$parent-selector} input,`
*
* Add your styles here
*/
@ -362,76 +360,16 @@
// Placeholder
#{$parent-selector} input::placeholder,
#{$parent-selector} input::-webkit-input-placeholder,
#{$parent-selector} textarea::placeholder,
#{$parent-selector} textarea::-webkit-input-placeholder,
#{$parent-selector} select:invalid {
#{$parent-selector} input::-webkit-input-placeholder {
color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1;
}
// Margin bottom (Not Checkboxes and Radios)
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} select,
#{$parent-selector} textarea {
#{$parent-selector} input:not([type="checkbox"], [type="radio"]) {
margin-bottom: var(#{$css-var-prefix}spacing);
}
// Select
#{$parent-selector} select {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
&:not([multiple], [size]) {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
&[multiple] {
option {
&:checked {
background: var(#{$css-var-prefix}form-element-selected-background-color);
color: var(#{$css-var-prefix}form-element-color);
}
}
}
}
[dir="rtl"] {
#{$parent-selector} select {
&:not([multiple], [size]) {
background-position: center left 0.75rem;
}
}
}
// Textarea
#{$parent-selector} textarea {
display: block;
resize: vertical;
&[aria-invalid] {
@if $enable-important {
#{$css-var-prefix}icon-height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2)
);
background-position: top right 0.75rem !important;
background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
}
}
}
// Styles for Input inside a label
#{$parent-selector} label {
> :where(input, select, textarea) {

64
scss/inline/_select.scss
View File

@ -455,4 +455,68 @@
}
}
}
[dir="rtl"] {
#{$parent-selector} :where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"]) {
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
background-position: center left 0.75rem;
}
}
}
}
// Placeholder
#{$parent-selector} select:invalid {
color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1;
}
// Margin bottom (Not Checkboxes and Radios)
#{$parent-selector} select {
margin-bottom: var(#{$css-var-prefix}spacing);
}
// Select
#{$parent-selector} select {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
&:not([multiple], [size]) {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
&[multiple] {
option {
&:checked {
background: var(#{$css-var-prefix}form-element-selected-background-color);
color: var(#{$css-var-prefix}form-element-color);
}
}
}
}
[dir="rtl"] {
#{$parent-selector} select {
&:not([multiple], [size]) {
background-position: center left 0.75rem;
}
}
}
// Styles for Input inside a label
#{$parent-selector} label {
> :where(input, select, textarea) {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
}

45
scss/inline/_textarea.scss
View File

@ -207,4 +207,49 @@
}
}
}
[dir="rtl"] {
#{$parent-selector} :where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"]) {
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
background-position: center left 0.75rem;
}
}
}
}
// Placeholder
#{$parent-selector} textarea::placeholder,
#{$parent-selector} textarea::-webkit-input-placeholder {
color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1;
}
// Margin bottom (Not Checkboxes and Radios)
#{$parent-selector} textarea {
margin-bottom: var(#{$css-var-prefix}spacing);
}
// Textarea
#{$parent-selector} textarea {
display: block;
resize: vertical;
&[aria-invalid] {
@if $enable-important {
#{$css-var-prefix}icon-height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2)
);
background-position: top right 0.75rem !important;
background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
}
}
}
// Styles for Input inside a label
#{$parent-selector} label {
> :where(input, select, textarea) {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
}