m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 09:13:35 +01:00
Code

dark text input

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-10-04 21:30:45 +02:00
parent 02e0edb7d0
commit 288b2e6039
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout.module.scss
View File

@ -35,7 +35,7 @@
transition-property: transform, background;
:global(.has-menu-open) & {
transform: translate3d(0, ($spacer * 3), 0);
transform: translate3d(0, ($spacer * 3.5), 0);
}
:global(.dark) & {

5
src/components/Search/SearchInput.module.scss
View File

@ -2,15 +2,10 @@
.searchInput {
composes: input from '../atoms/Input.module.scss';
background: $input-bg-focus;
&::-webkit-search-cancel-button {
display: none;
}
&:hover {
background: $input-bg-focus;
}
}
.searchInputClose {

10
src/components/atoms/Input.module.scss
View File

@ -1,4 +1,5 @@
@import 'variables';
@import 'mixins';
.input {
display: block;
@ -16,12 +17,15 @@
transition: all ease-in-out 0.15s;
appearance: none;
&:hover {
background: lighten($input-bg, 30%);
@include placeholder();
:global(.dark) & {
color: $input-color--dark;
background-color: $input-bg--dark;
@include placeholder($input-color-placeholder--dark);
}
&:focus {
background-color: $input-bg-focus;
border-color: $input-border-focus;
outline: 0;
}

11
src/components/molecules/Menu.module.scss
View File

@ -44,8 +44,19 @@
display: block;
text-align: center;
&:hover,
&:focus {
color: $link-color-hover;
}
:global(.dark) & {
color: $text-color--dark;
text-shadow: 0 -1px 0 rgba(#000, 0.5);
&:hover,
&:focus {
color: $link-color-hover;
}
}
}
}

11
src/styles/_variables.scss
View File

@ -59,7 +59,6 @@ $line-height-small: 1.1428571429;
$font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
Helvetica, Arial, sans-serif;
$font-weight-base: 400;
$font-color-base: $text-color;
$font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
'Courier New', monospace;
@ -103,15 +102,17 @@ $screen-lg: 87.5em;
// Forms
/////////////////////////////////////
$input-bg: rgba(#fff, 0.85);
$input-bg-focus: #fff;
$input-bg: darken($body-background-color, 5%);
$input-bg--dark: darken($body-background-color--dark, 5%);
$input-bg-disabled: $brand-grey-light;
$input-font-size: $font-size-base;
$input-font-weight: $font-weight-base;
$input-color: $font-color-base;
$input-color-placeholder: rgba(46, 79, 92, 0.3);
$input-color: $text-color;
$input-color--dark: $text-color--dark;
$input-color-placeholder: $brand-grey-light;
$input-color-placeholder--dark: $brand-grey;
$input-border: $brand-grey-light;
$input-border-radius: $border-radius;

2
src/styles/global.scss
View File

@ -24,7 +24,7 @@ body {
font-weight: $font-weight-base;
font-size: $font-size-base;
line-height: $line-height;
color: $font-color-base;
color: $text-color;
text-rendering: optimizeLegibility;
letter-spacing: -0.01em;
font-feature-settings: 'liga', 'kern';