Web-Projects/vanilla-hugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Extract input style to common CSS and remove raw uses of var(--x).

Browse Source 
The mixin handles the fallback gracefully on browsers where it's not
supported.
This commit is contained in:
Danila Fedorin
2023-11-27 22:17:23 -08:00
parent abb137514b
commit 5aa54c1ce4
4 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/scss/search.scss
View File

@@ -1,13 +1,8 @@
@import "variables.scss";
@import "mixins.scss";
$search-input-padding: 0.5rem;
$search-element-padding: 0.5rem 1rem 0.5rem 1rem;
@mixin green-shadow {
box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
}
.stork-wrapper {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
@@ -20,26 +15,15 @@ $search-element-padding: 0.5rem 1rem 0.5rem 1rem;
}
input.stork-input {
@include bordered-block;
background-color: var(--code-color);
color: var(--text-color);
font-family: $font-body;
padding: $search-input-padding;
&:active, &:focus {
@include green-shadow;
border-color: $primary-color;
}
flex-grow: 1;
@include textual-input;
}
.stork-close-button {
@include bordered-block;
background-color: var(--code-color);
color: var(--text-color);
@include var(background-color, background-color);
@include var(color, text-color);
font-family: $font-body;
padding: $search-input-padding;
padding: $input-padding;
padding-left: 1.5rem;
padding-right: 1.5rem;
@@ -72,11 +56,11 @@ input.stork-input {
list-style: none;
&.selected {
background-color: var(--code-color);
@include var(background-color, code-color);
}
a:hover {
color: var(--text-color);
@include var(color, text-color);
}
}