bubble/yarkov.tech
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/yarkov.tech.git synced 2026-10-11 18:39:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

invert color svg icons

Browse Source
This commit is contained in:
Sergey Yarkov 2022-07-26 01:01:56 +03:00
parent 768d34fabb
commit 5f76f318db
10 changed files with 105 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/dark.css
View File

@ -16,4 +16,14 @@
--background-btn-link: var(--color-gray-800); --background-btn-link: var(--color-gray-800);
--background-btn-link-active: var(--color-gray-700); --background-btn-link-active: var(--color-gray-700);
--background-inputs-color: var(--color-gray-800); --background-inputs-color: var(--color-gray-800);
/* Icons */
--icon-primary: var(--color-white);
--icon-secondary: var(--color-gray-100);
--icon-filter: invert(100%);
}
.header svg,
.site-content svg {
filter: var(--icon-filter);
} }

4
public/assets/light.css
View File

@ -16,4 +16,8 @@
--background-btn-link: var(--color-white); --background-btn-link: var(--color-white);
--background-btn-link-active: var(--color-white); --background-btn-link-active: var(--color-white);
--background-inputs-color: var(--color-white); --background-inputs-color: var(--color-white);
/* Icons */
--icon-primary: var(--color-white);
--icon-secondary: var(--color-gray-700);
} }

4
src/components/ContactsList/ContactsList.scss
View File

@ -8,4 +8,8 @@
display: flex; display: flex;
column-gap: 5px; column-gap: 5px;
} }
& svg {
filter: none;
}
} }

96
src/components/Header/Header.scss
View File

@ -65,55 +65,51 @@
} }
} }
&__button { &__button {
cursor: pointer; // cursor: pointer;
width: 30px; // background: none;
height: 21px; // border: none;
position: relative; // &:hover {
transform: rotate(0deg); // border: none;
background: none; // opacity: var(--opacity-hover);
border: none; // }
&:hover { // & span {
border: none; // pointer-events: none;
opacity: var(--opacity-hover); // display: block;
} // position: absolute;
& span { // height: 3px;
pointer-events: none; // width: 100%;
display: block; // background: var(--font-color);
position: absolute; // border-radius: 7px;
height: 3px; // opacity: 1;
width: 100%; // left: 0;
background: var(--font-color); // }
border-radius: 7px; // & span:nth-child(1) {
opacity: 1; // top: 2px;
left: 0; // transform-origin: left center;
} // }
& span:nth-child(1) { // & span:nth-child(2) {
top: 2px; // top: 9px;
transform-origin: left center; // transform-origin: left center;
} // }
& span:nth-child(2) { // & span:nth-child(3) {
top: 9px; // top: 16px;
transform-origin: left center; // transform-origin: left center;
} // }
& span:nth-child(3) { // &[aria-pressed='true'] {
top: 16px; // & span:nth-child(1) {
transform-origin: left center; // transform: rotate(45deg);
} // top: -1px;
&[aria-pressed='true'] { // left: 5px;
& span:nth-child(1) { // }
transform: rotate(45deg); // & span:nth-child(2) {
top: -1px; // display: none;
left: 5px; // }
} // & span:nth-child(3) {
& span:nth-child(2) { // transform: rotate(-45deg);
display: none; // top: 20px;
} // left: 5px;
& span:nth-child(3) { // }
transform: rotate(-45deg); // }
top: 20px;
left: 5px;
}
}
} }
} }
@ -160,7 +156,7 @@
justify-content: center; justify-content: center;
} }
} }
&__button { & .nav-toggle {
position: absolute; position: absolute;
right: var(--content-padding); right: var(--content-padding);
} }

14
src/components/Header/NavToggle/NavToggle.scss
View File

@ -1,5 +1,17 @@
.nav-toggle {
display: flex;
padding: 0;
cursor: pointer;
// background: none;
border: none;
&:hover {
border: none;
opacity: var(--opacity-hover);
}
}
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
#nav-toggle { .nav-toggle {
display: none; display: none;
} }
} }

23
src/components/Header/NavToggle/NavToggle.tsx
View File

@ -3,6 +3,23 @@ import type { Component } from 'solid-js';
import { createSignal, createEffect } from 'solid-js'; import { createSignal, createEffect } from 'solid-js';
import './NavToggle.scss'; import './NavToggle.scss';
const MenuIcon: Component = () => (
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 6V8H3V6H21ZM3 18H21V16H3V18ZM3 13H21V11H3V13Z" fill="black" />
</svg>
);
const CloseIcon: Component = () => (
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.0002 13.0605L17.4692 18.531L18.5312 17.4705L13.0607 12L18.5312 6.53099L17.4707 5.46899L12.0002 10.9395L6.5312 5.46899L5.4707 6.53099L10.9397 12L5.4707 17.469L6.5312 18.531L12.0002 13.0605Z"
fill="black"
/>
</svg>
);
const NavToggle: Component = () => { const NavToggle: Component = () => {
const [isNavShown, setIsNavShown] = createSignal<boolean>(false); const [isNavShown, setIsNavShown] = createSignal<boolean>(false);
@ -20,10 +37,8 @@ const NavToggle: Component = () => {
}); });
return ( return (
<button id="nav-toggle" class="header__button" onClick={toggleNav} type="button" aria-pressed={isNavShown() ? 'true' : 'false'} aria-label="Menu"> <button class="nav-toggle" onClick={toggleNav} type="button" aria-pressed={isNavShown()} aria-label="Menu">
<span /> {isNavShown() ? <CloseIcon /> : <MenuIcon />}
<span />
<span />
</button> </button>
); );
}; };

2
src/components/SearchInput/SearchInput.scss
View File

@ -9,7 +9,9 @@
position: absolute; position: absolute;
left: 8px; left: 8px;
fill: var(--font-color-grayer); fill: var(--font-color-grayer);
filter: none;
} }
& input { & input {
padding-left: 40px; padding-left: 40px;
color: var(--font-color-gray); color: var(--font-color-gray);

2
src/icons/email.svg
View File

@ -1,6 +1,6 @@
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_378_210)"> <g clip-path="url(#clip0_378_210)">
<path d="M13.1464 11.4548C13.1464 12.2108 13.3615 12.5123 13.924 12.5123C15.1777 12.5123 15.976 10.9148 15.976 8.258C15.976 4.1972 13.0168 2.2532 9.32232 2.2532C5.52162 2.2532 2.06472 4.802 2.06472 9.6188C2.06472 14.2196 5.08872 16.7252 9.73272 16.7252C11.3095 16.7252 12.3679 16.5524 13.987 16.0124L14.3344 17.4587C12.736 17.978 11.0278 18.1283 9.71112 18.1283C3.61992 18.1283 0.357422 14.7803 0.357422 9.6179C0.357422 4.4123 4.13832 0.8699 9.34392 0.8699C14.7655 0.8699 17.6374 4.1099 17.6374 8.0843C17.6374 11.4539 16.5799 14.0243 13.2535 14.0243C11.7406 14.0243 10.7479 13.4195 10.6183 12.0794C10.2295 13.5698 9.19272 14.0243 7.78782 14.0243C5.90862 14.0243 4.33182 12.5762 4.33182 9.6611C4.33182 6.7235 5.71512 4.9091 8.19912 4.9091C9.51672 4.9091 10.3375 5.4275 10.7029 6.2483L11.3302 5.1035H13.1446V11.4548H13.1464V11.4548ZM10.4905 8.6036C10.4905 7.4165 9.60402 6.9188 8.86962 6.9188C8.07042 6.9188 7.18572 7.5659 7.18572 9.4676C7.18572 10.9796 7.85532 11.822 8.86962 11.822C9.58242 11.822 10.4905 11.3684 10.4905 10.1156V8.6036Z" fill="#010409"/> <path d="M13.1464 11.4548C13.1464 12.2108 13.3615 12.5123 13.924 12.5123C15.1777 12.5123 15.976 10.9148 15.976 8.258C15.976 4.1972 13.0168 2.2532 9.32232 2.2532C5.52162 2.2532 2.06472 4.802 2.06472 9.6188C2.06472 14.2196 5.08872 16.7252 9.73272 16.7252C11.3095 16.7252 12.3679 16.5524 13.987 16.0124L14.3344 17.4587C12.736 17.978 11.0278 18.1283 9.71112 18.1283C3.61992 18.1283 0.357422 14.7803 0.357422 9.6179C0.357422 4.4123 4.13832 0.8699 9.34392 0.8699C14.7655 0.8699 17.6374 4.1099 17.6374 8.0843C17.6374 11.4539 16.5799 14.0243 13.2535 14.0243C11.7406 14.0243 10.7479 13.4195 10.6183 12.0794C10.2295 13.5698 9.19272 14.0243 7.78782 14.0243C5.90862 14.0243 4.33182 12.5762 4.33182 9.6611C4.33182 6.7235 5.71512 4.9091 8.19912 4.9091C9.51672 4.9091 10.3375 5.4275 10.7029 6.2483L11.3302 5.1035H13.1446V11.4548H13.1464V11.4548ZM10.4905 8.6036C10.4905 7.4165 9.60402 6.9188 8.86962 6.9188C8.07042 6.9188 7.18572 7.5659 7.18572 9.4676C7.18572 10.9796 7.85532 11.822 8.86962 11.822C9.58242 11.822 10.4905 11.3684 10.4905 10.1156V8.6036Z" fill="black"/>
</g> </g>
<defs> <defs>
<clipPath id="clip0_378_210"> <clipPath id="clip0_378_210">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

8
src/icons/socket-io.svg
View File

@ -1,11 +1,9 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_355_422)"> <g clip-path="url(#clip0_753_2)">
<path d="M8.03531 0.576701C10.5562 -0.0697833 13.3423 0.306935 15.5655 1.67904C18.3655 3.3535 20.1934 6.52092 20.2399 9.78139C20.3423 13.0744 18.6259 16.3395 15.8678 18.1302C12.798 20.1953 8.55156 20.2744 5.41664 18.3116C2.22132 16.4046 0.356169 12.5581 0.835309 8.86506C1.22125 4.96272 4.23531 1.52092 8.03531 0.576779V0.576701Z" fill="#010101"/> <path d="M10.4463 0.0116577C9.6101 0.0140479 8.77739 0.119851 7.96715 0.326658C4.06715 1.29582 0.972981 4.82832 0.575481 8.83499C0.0838144 12.625 1.99965 16.5725 5.27881 18.53C8.49631 20.545 12.8563 20.4633 16.0071 18.3442C18.838 16.5058 20.6005 13.1542 20.4955 9.77332C20.4471 6.42666 18.5705 3.17666 15.6955 1.45666C14.1288 0.490824 12.2863 0.00499105 10.4471 0.012491L10.4463 0.0116577ZM10.3938 1.42499C14.5146 1.41916 18.5513 4.60249 18.9621 8.86166C19.7496 13.5783 15.8346 18.3725 11.0555 18.5117C6.51048 18.965 2.11881 15.1117 1.98881 10.5475C1.65048 6.85249 4.08631 3.18499 7.57048 1.96416C8.46874 1.60663 9.42702 1.42392 10.3938 1.42582V1.42499ZM14.6363 4.11166C12.3971 5.84916 10.253 7.70166 8.06215 9.49249C9.06465 9.50666 10.0721 9.50582 11.0796 9.50082C12.2546 7.69666 13.463 5.91749 14.6363 4.11166ZM9.91548 10.49C8.74048 12.295 7.53215 14.0808 6.35715 15.885C8.60131 14.1517 10.7363 12.285 12.9421 10.505C11.9333 10.4928 10.9244 10.4878 9.91548 10.49V10.49Z" fill="#010101"/>
<path d="M7.64851 2.1721C12.4113 0.26507 18.2532 3.78601 18.7462 8.89304C19.5137 13.4884 15.6997 18.1581 11.0438 18.293C6.61593 18.7349 2.33687 14.9813 2.21133 10.5349C1.88109 6.93491 4.2532 3.3628 7.64851 2.1721Z" fill="white"/>
<path d="M8.12824 9.50703C10.2632 7.76281 12.3515 5.95812 14.5329 4.26508C13.3887 6.02328 12.212 7.75812 11.0678 9.51625C10.0864 9.52093 9.10504 9.52094 8.12824 9.50695V9.50703ZM9.93293 10.4791C10.9189 10.4791 11.9004 10.4791 12.8818 10.493C10.7329 12.2279 8.65387 14.0465 6.46777 15.7349C7.61199 13.9767 8.78871 12.2373 9.93293 10.4791Z" fill="#010101"/>
</g> </g>
<defs> <defs>
<clipPath id="clip0_355_422"> <clipPath id="clip0_753_2">
<rect width="20" height="20" fill="white" transform="translate(0.5)"/> <rect width="20" height="20" fill="white" transform="translate(0.5)"/>
</clipPath> </clipPath>
</defs> </defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

4
src/styles/global.scss
View File

@ -211,10 +211,12 @@ button {
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-weight: 500; font-weight: 500;
font-size: var(--font-size-md); font-size: var(--font-size-md);
padding: 5px 17px; color: var(--font-color);
padding: 4px 16px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
background: none; background: none;
font-size: var(--font-size-sm);
&:hover { &:hover {
border: 1px solid var(--border-color-hover); border: 1px solid var(--border-color-hover);
} }