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

refactor: modules and css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-23 10:47:50 +07:00
parent 2e4d6c66ec
commit ce2ed6826d
46 changed files with 3874 additions and 3534 deletions
Download patch file Download diff file Expand all files Collapse all files

81
scss/forms/_input-search.scss
View file

@ -1,54 +1,59 @@
@use "sass:map";
@use "../settings" as *;
/**
* Input type search
*/
@if map.get($modules, "forms/input-search") {
/**
* Input type search
*/
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
background-image: var(#{$✨}icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
background-image: var(#{$✨}icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
&[aria-invalid] {
@if $enable-important {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem) !important;
} @else {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
&[aria-invalid] {
@if $enable-important {
padding-inline-start: calc(
var(#{$✨}form-element-spacing-horizontal) + 1.75rem
) !important;
} @else {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
}
background-position: center left 1.125rem, center right 0.75rem;
}
background-position: center left 1.125rem, center right 0.75rem;
}
&[aria-invalid="false"] {
background-image: var(#{$✨}icon-search), var(#{$✨}icon-valid);
}
&[aria-invalid="false"] {
background-image: var(#{$✨}icon-search), var(#{$✨}icon-valid);
}
&[aria-invalid="true"] {
background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
&[aria-invalid="true"] {
background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
}
}
}
}
// Cancel button
[type="search"] {
&::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
// Cancel button
[type="search"] {
&::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
}
}
[dir="rtl"] {
:where(input) {
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
background-position: center right 1.125rem;
[dir="rtl"] {
:where(input) {
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
background-position: center right 1.125rem;
&[aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
&[aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
}
}
}
}