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). 

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/scss/mixins.scss
View File

@ -11,3 +11,22 @@
}
}
@mixin green-shadow {
box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
}
@mixin textual-input {
@include bordered-block;
box-sizing: border-box;
@include var(background-color, background-color);
@include var(color, text-color);
font-family: $font-body;
padding: $input-padding;
&:active, &:focus {
@include green-shadow;
border-color: $primary-color;
}
flex-grow: 1;
}

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);
}
}

4
assets/scss/style.scss
View File

@ -78,6 +78,10 @@ h1, h2, h3, h4, h5, h6 {
}
}
.input[type="text"], textarea {
@include textual-input;
}
nav {
width: 100%;
margin: 0rem 0rem 1rem 0rem;

2
assets/scss/variables.scss
View File

@ -32,6 +32,8 @@ $code-lineno-color: grey;
$code-comment-color: grey;
$code-border: $standard-border-width solid $code-border-color;
$input-padding: 0.5rem;
$sidenote-padding: 1rem;
$sidenote-highlight-border-width: .2rem;