refactor(search): Simplified CSS code

This commit is contained in:
Lucas Larroche 2022-03-13 10:51:03 +07:00
parent a469644b42
commit 1bab87a15b
13 changed files with 24 additions and 31 deletions

View file

@ -1544,7 +1544,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
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;
@ -1552,7 +1553,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
@ -1568,11 +1570,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem);
background-position: center right 1.125rem;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center right 1.125rem, center left 0.75rem;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1647,7 +1647,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
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;
@ -1655,7 +1656,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
@ -1671,11 +1673,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem);
background-position: center right 1.125rem;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center right 1.125rem, center left 0.75rem;
}

File diff suppressed because one or more lines are too long

View file

@ -1514,7 +1514,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
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;
@ -1522,7 +1523,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
@ -1538,11 +1540,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem);
background-position: center right 1.125rem;
}
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center right 1.125rem, center left 0.75rem;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -226,7 +226,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
&[type="search"] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
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;
@ -235,10 +235,10 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
&[aria-invalid] {
@if $enable-important {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
}
@else {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
}
background-position: center left 1.125rem, center right 0.75rem;
}
@ -265,16 +265,9 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
:where(input) {
&:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
&[type="search"] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem);
background-position: center right 1.125rem;
&[aria-invalid] {
@if $enable-important {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
}
@else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem);
}
background-position: center right 1.125rem, center left 0.75rem;
}
}