mirror of
https://github.com/yusufipk/trillo-react.git
synced 2026-09-11 19:06:10 +00:00
styled the header usernav
This commit is contained in:
Yusuf Ipek
@@ -9,3 +9,4 @@
|
||||
@import "./SASS/base/utilities";
|
||||
|
||||
@import "./SASS/layout/layout";
|
||||
@import "./SASS/layout/home";
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin center-horizontal-vertical {
|
||||
@mixin abpos {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
.header {
|
||||
display: flex;
|
||||
font-size: $normal-font-size;
|
||||
|
||||
// main axis
|
||||
justify-content: space-between;
|
||||
|
||||
// cross axis
|
||||
align-items: center;
|
||||
|
||||
&__logo {
|
||||
height: 3.25rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex: 0 0 40%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&--input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
background-color: $color-grey-light-2;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 0.7rem 2rem;
|
||||
border-radius: 100px;
|
||||
width: 90%;
|
||||
transition: all 0.2s;
|
||||
margin-right: -3.25rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
background-color: $color-grey-light-3;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
font-weight: 100;
|
||||
color: $color-grey-light-4;
|
||||
}
|
||||
}
|
||||
|
||||
&--input:focus + &--button {
|
||||
background-color: $color-grey-light-3;
|
||||
}
|
||||
|
||||
&--button {
|
||||
border: none;
|
||||
background-color: $color-grey-light-2;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
|
||||
&--icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
fill: $color-grey-dark-3;
|
||||
}
|
||||
}
|
||||
|
||||
&__user-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
|
||||
& > * {
|
||||
padding: 0 2rem;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& > *:hover {
|
||||
background-color: $color-grey-light-2;
|
||||
}
|
||||
|
||||
&--icon-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
height: 2.25rem;
|
||||
width: 2.25rem;
|
||||
fill: $color-grey-dark-2;
|
||||
}
|
||||
|
||||
&--notification {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
border-radius: 50%;
|
||||
background-color: $color-primary;
|
||||
color: $color-white;
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.1rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--user-photo {
|
||||
height: 3.75rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,44 @@
|
||||
import logo from "../img/logo.png";
|
||||
import sprite from "../img/sprite.svg";
|
||||
import user from "../img/user.jpg";
|
||||
|
||||
function Header() {
|
||||
return <header className="header">Header Part</header>;
|
||||
return (
|
||||
<header className="header">
|
||||
<img src={logo} alt="trillo logo" className="header__logo" />
|
||||
|
||||
<form action="#" className="header__search">
|
||||
<input
|
||||
type="text"
|
||||
className="header__search--input"
|
||||
placeholder="Search hotels"
|
||||
/>
|
||||
<button className="header__search--button">
|
||||
<svg className="header__search--icon">
|
||||
<use href={`${sprite}#icon-magnifying-glass`}></use>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
<nav className="header__user-nav">
|
||||
<div className="header__user-nav--icon-box">
|
||||
<svg className="header__user-nav--icon">
|
||||
<use href={`${sprite}#icon-bookmark`}></use>
|
||||
</svg>
|
||||
<span className="header__user-nav--notification">7</span>
|
||||
</div>
|
||||
<div className="header__user-nav--icon-box">
|
||||
<svg className="header__user-nav--icon">
|
||||
<use href={`${sprite}#icon-chat`}></use>
|
||||
</svg>
|
||||
<span className="header__user-nav--notification">13</span>
|
||||
</div>
|
||||
<div className="header__user-nav--user">
|
||||
<img src={user} alt="User" className="header__user-nav--user-photo" />
|
||||
<span className="header__user-nav--user-name">Yusuf</span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>aircraft-take-off</title>
|
||||
<path d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 666 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>bookmark</title>
|
||||
<path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 253 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>chat</title>
|
||||
<path d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 384 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-right</title>
|
||||
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 395 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>home</title>
|
||||
<path d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 426 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>key</title>
|
||||
<path d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 694 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>location-pin</title>
|
||||
<path d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 379 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>magnifying-glass</title>
|
||||
<path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 587 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>map</title>
|
||||
<path d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 642 B |
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>star</title>
|
||||
<path d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 293 B |
Executable → Regular
+11
-97
@@ -1,120 +1,34 @@
|
||||
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<symbol id="icon-bookmark" viewBox="0 0 20 20">
|
||||
<title>bookmark</title>
|
||||
<path class="path1" d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-down" viewBox="0 0 20 20">
|
||||
<title>chevron-down</title>
|
||||
<path class="path1" d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-left" viewBox="0 0 20 20">
|
||||
<title>chevron-left</title>
|
||||
<path class="path1" d="M12.452 4.516c0.446 0.436 0.481 1.043 0 1.576l-3.747 3.908 3.747 3.908c0.481 0.533 0.446 1.141 0 1.574-0.445 0.436-1.197 0.408-1.615 0-0.418-0.406-4.502-4.695-4.502-4.695-0.223-0.217-0.335-0.502-0.335-0.787s0.112-0.57 0.335-0.789c0 0 4.084-4.287 4.502-4.695s1.17-0.436 1.615 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-right" viewBox="0 0 20 20">
|
||||
<title>chevron-right</title>
|
||||
<path class="path1" d="M9.163 4.516c0.418 0.408 4.502 4.695 4.502 4.695 0.223 0.219 0.335 0.504 0.335 0.789s-0.112 0.57-0.335 0.787c0 0-4.084 4.289-4.502 4.695-0.418 0.408-1.17 0.436-1.615 0-0.446-0.434-0.481-1.041 0-1.574l3.747-3.908-3.747-3.908c-0.481-0.533-0.446-1.141 0-1.576s1.197-0.409 1.615 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-down" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-down</title>
|
||||
<path class="path1" d="M17.418 6.109c0.272-0.268 0.709-0.268 0.979 0s0.271 0.701 0 0.969l-7.908 7.83c-0.27 0.268-0.707 0.268-0.979 0l-7.908-7.83c-0.27-0.268-0.27-0.701 0-0.969s0.709-0.268 0.979 0l7.419 7.141 7.418-7.141z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-left" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-left</title>
|
||||
<path class="path1" d="M13.891 17.418c0.268 0.272 0.268 0.709 0 0.979s-0.701 0.271-0.969 0l-7.83-7.908c-0.268-0.27-0.268-0.707 0-0.979l7.83-7.908c0.268-0.27 0.701-0.27 0.969 0s0.268 0.709 0 0.979l-7.141 7.419 7.141 7.418z"></path>
|
||||
<path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-right" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-right</title>
|
||||
<path class="path1" d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-thin-up" viewBox="0 0 20 20">
|
||||
<title>chevron-thin-up</title>
|
||||
<path class="path1" d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chevron-up" viewBox="0 0 20 20">
|
||||
<title>chevron-up</title>
|
||||
<path class="path1" d="M15.484 12.452c-0.436 0.446-1.043 0.481-1.576 0l-3.908-3.747-3.908 3.747c-0.533 0.481-1.141 0.446-1.574 0-0.436-0.445-0.408-1.197 0-1.615 0.406-0.418 4.695-4.502 4.695-4.502 0.217-0.223 0.502-0.335 0.787-0.335s0.57 0.112 0.789 0.335c0 0 4.287 4.084 4.695 4.502s0.436 1.17 0 1.615z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-cloud" viewBox="0 0 20 20">
|
||||
<title>cloud</title>
|
||||
<path class="path1" d="M20 11.32c0 2.584-2.144 4.68-4.787 4.68h-11.596c-1.998 0-3.617-1.584-3.617-3.537 0-1.951 1.619-3.535 3.617-3.535 0.146 0 0.288 0.012 0.429 0.027-0.037-0.246-0.057-0.498-0.057-0.756 0-2.871 2.381-5.199 5.32-5.199 2.407 0 4.439 1.562 5.096 3.707 0.263-0.043 0.532-0.066 0.809-0.066 2.642 0 4.786 2.093 4.786 4.679z"></path>
|
||||
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-aircraft-take-off" viewBox="0 0 20 20">
|
||||
<title>aircraft-take-off</title>
|
||||
<path class="path1" d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-bell" viewBox="0 0 20 20">
|
||||
<title>bell</title>
|
||||
<path class="path1" d="M14.65 8.512c-2.28-4.907-3.466-6.771-7.191-6.693-1.327 0.027-1.009-0.962-2.021-0.587-1.010 0.375-0.143 0.924-1.177 1.773-2.902 2.383-2.635 4.587-1.289 9.84 0.567 2.213-1.367 2.321-0.602 4.465 0.559 1.564 4.679 2.219 9.025 0.607s7.086-4.814 6.527-6.378c-0.765-2.145-2.311-0.961-3.272-3.027zM10.924 16.595c-3.882 1.44-7.072 0.594-7.207 0.217-0.232-0.65 1.253-2.816 5.691-4.463s6.915-1.036 7.174-0.311c0.153 0.429-1.775 3.116-5.658 4.557zM9.676 13.101c-2.029 0.753-3.439 1.614-4.353 2.389 0.643 0.584 1.847 0.726 3.046 0.281 1.527-0.565 2.466-1.866 2.095-2.904-0.005-0.013-0.011-0.023-0.016-0.036-0.251 0.082-0.508 0.171-0.772 0.27z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-calendar" viewBox="0 0 20 20">
|
||||
<title>calendar</title>
|
||||
<path class="path1" d="M17 3h-1v2h-3v-2h-6v2h-3v-2h-1c-1.101 0-2 0.9-2 2v12c0 1.1 0.899 2 2 2h14c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM17 17h-14v-8h14v8zM6.5 1h-2v3.5h2v-3.5zM15.5 1h-2v3.5h2v-3.5z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-camera" viewBox="0 0 20 20">
|
||||
<title>camera</title>
|
||||
<path class="path1" d="M10 8c-1.657 0-3 1.344-3 3s1.343 3 3 3c1.656 0 3-1.344 3-3s-1.344-3-3-3zM18 5h-2.4c-0.33 0-0.686-0.256-0.789-0.57l-0.621-1.861c-0.105-0.313-0.459-0.569-0.79-0.569h-6.8c-0.33 0-0.686 0.256-0.789 0.568l-0.622 1.862c-0.104 0.314-0.459 0.57-0.789 0.57h-2.4c-1.1 0-2 0.9-2 2v9c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-9c0-1.1-0.9-2-2-2zM10 16c-2.762 0-5-2.238-5-5s2.238-5 5-5c2.761 0 5 2.238 5 5s-2.239 5-5 5zM17.5 8.2c-0.387 0-0.7-0.314-0.7-0.701 0-0.385 0.313-0.7 0.7-0.7s0.7 0.314 0.7 0.7c0 0.387-0.313 0.701-0.7 0.701z"></path>
|
||||
<path d="M19.87 6.453c0.119 0.257 0.127 1.29-4.884 3.642l-4.913 2.306c-1.71 0.803-4.191 1.859-5.285 2.151-0.766 0.204-1.497-0.316-1.497-0.316s-2.206-1.975-2.792-2.419c-0.585-0.444-0.535-0.67 0.215-0.91 0.467-0.149 3.13 0.493 4.265 0.78 1.339-0.8 2.562-1.486 3.141-1.798-1.396-1.033-4.008-2.962-4.841-3.55-0.799-0.565 0.010-0.768 0.010-0.768 0.368-0.099 1.162-0.228 1.562-0.144 2.721 0.569 7.263 2.071 7.611 2.186 0.832-0.436 2.128-1.092 2.922-1.465 2.075-0.974 4.327-0.037 4.486 0.305z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-chat" viewBox="0 0 20 20">
|
||||
<title>chat</title>
|
||||
<path class="path1" d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-cog" viewBox="0 0 20 20">
|
||||
<title>cog</title>
|
||||
<path class="path1" d="M16.783 10c0-1.049 0.646-1.875 1.617-2.443-0.176-0.584-0.407-1.145-0.692-1.672-1.089 0.285-1.97-0.141-2.711-0.883-0.741-0.74-0.968-1.621-0.683-2.711-0.527-0.285-1.088-0.518-1.672-0.691-0.568 0.97-1.595 1.615-2.642 1.615-1.048 0-2.074-0.645-2.643-1.615-0.585 0.173-1.144 0.406-1.671 0.691 0.285 1.090 0.059 1.971-0.684 2.711-0.74 0.742-1.621 1.168-2.711 0.883-0.285 0.527-0.517 1.088-0.691 1.672 0.97 0.568 1.615 1.394 1.615 2.443 0 1.047-0.645 2.074-1.615 2.643 0.175 0.584 0.406 1.144 0.691 1.672 1.090-0.285 1.971-0.059 2.711 0.682s0.969 1.623 0.684 2.711c0.527 0.285 1.087 0.518 1.672 0.693 0.568-0.973 1.595-1.617 2.643-1.617 1.047 0 2.074 0.645 2.643 1.617 0.584-0.176 1.144-0.408 1.672-0.693-0.285-1.088-0.059-1.969 0.683-2.711 0.741-0.74 1.622-1.166 2.711-0.883 0.285-0.527 0.517-1.086 0.692-1.672-0.973-0.569-1.619-1.395-1.619-2.442zM10 13.652c-2.018 0-3.653-1.635-3.653-3.652 0-2.018 1.636-3.654 3.653-3.654s3.652 1.637 3.652 3.654c0 2.018-1.634 3.652-3.652 3.652z"></path>
|
||||
<path d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-home" viewBox="0 0 20 20">
|
||||
<title>home</title>
|
||||
<path class="path1" d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
<path d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-key" viewBox="0 0 20 20">
|
||||
<title>key</title>
|
||||
<path class="path1" d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-light-up" viewBox="0 0 20 20">
|
||||
<title>light-up</title>
|
||||
<path class="path1" d="M19 9.199c-0.182 0-0.799 0-0.98 0-0.553 0-1 0.359-1 0.801s0.447 0.799 1 0.799c0.182 0 0.799 0 0.98 0 0.552 0 1-0.357 1-0.799 0-0.441-0.449-0.801-1-0.801zM10 4.5c-3.051 0-5.5 2.449-5.5 5.5s2.449 5.5 5.5 5.5c3.050 0 5.5-2.449 5.5-5.5s-2.451-5.5-5.5-5.5zM10 14c-2.211 0-4-1.791-4-4 0-2.211 1.789-4 4-4 2.209 0 4 1.789 4 4 0 2.209-1.791 4-4 4zM3 10c0-0.441-0.449-0.801-1-0.801-0.185 0-0.816 0-1 0-0.553 0-1 0.359-1 0.801s0.447 0.799 1 0.799c0.184 0 0.815 0 1 0 0.551 0 1-0.358 1-0.799zM10 3c0.441 0 0.799-0.447 0.799-1 0-0.184 0-0.816 0-1 0-0.553-0.358-1-0.799-1s-0.801 0.447-0.801 1c0 0.184 0 0.816 0 1 0 0.553 0.359 1 0.801 1zM10 17c-0.442 0-0.801 0.447-0.801 1 0 0.184 0 0.816 0 1 0 0.553 0.359 1 0.801 1s0.799-0.447 0.799-1c0-0.184 0-0.816 0-1 0-0.553-0.358-1-0.799-1zM17.365 3.766c0.391-0.391 0.454-0.961 0.142-1.273s-0.883-0.248-1.272 0.143c-0.108 0.107-0.593 0.592-0.7 0.699-0.391 0.391-0.454 0.961-0.142 1.273s0.883 0.248 1.273-0.143c0.107-0.108 0.591-0.592 0.699-0.699zM3.334 15.533c-0.108 0.109-0.593 0.594-0.7 0.701-0.391 0.391-0.454 0.959-0.142 1.271s0.883 0.25 1.272-0.141c0.108-0.107 0.593-0.592 0.7-0.699 0.391-0.391 0.454-0.961 0.142-1.274s-0.883-0.247-1.272 0.142zM3.765 2.635c-0.39-0.391-0.961-0.455-1.273-0.143s-0.248 0.883 0.141 1.274c0.108 0.107 0.593 0.592 0.7 0.699 0.391 0.391 0.96 0.455 1.272 0.143s0.249-0.883-0.141-1.273c-0.107-0.108-0.591-0.593-0.699-0.7zM15.534 16.666c0.108 0.107 0.593 0.592 0.7 0.699 0.391 0.391 0.96 0.453 1.272 0.143 0.312-0.312 0.249-0.883-0.142-1.273-0.107-0.107-0.592-0.592-0.699-0.699-0.391-0.391-0.961-0.455-1.274-0.143s-0.248 0.882 0.143 1.273z"></path>
|
||||
<path d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-location-pin" viewBox="0 0 20 20">
|
||||
<title>location-pin</title>
|
||||
<path class="path1" d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
<path d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-magnifying-glass" viewBox="0 0 20 20">
|
||||
<title>magnifying-glass</title>
|
||||
<path class="path1" d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-mail" viewBox="0 0 20 20">
|
||||
<title>mail</title>
|
||||
<path class="path1" d="M1.574 5.286c0.488 0.262 7.248 3.894 7.5 4.029s0.578 0.199 0.906 0.199c0.328 0 0.654-0.064 0.906-0.199s7.012-3.767 7.5-4.029c0.489-0.263 0.951-1.286 0.054-1.286h-16.919c-0.897 0-0.435 1.023 0.053 1.286zM18.613 7.489c-0.555 0.289-7.387 3.849-7.727 4.027s-0.578 0.199-0.906 0.199-0.566-0.021-0.906-0.199-7.133-3.739-7.688-4.028c-0.39-0.204-0.386 0.035-0.386 0.219s0 7.293 0 7.293c0 0.42 0.566 1 1 1h16c0.434 0 1-0.58 1-1 0 0 0-7.108 0-7.292s0.004-0.423-0.387-0.219z"></path>
|
||||
<path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-map" viewBox="0 0 20 20">
|
||||
<title>map</title>
|
||||
<path class="path1" d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-squared-cross" viewBox="0 0 20 20">
|
||||
<title>squared-cross</title>
|
||||
<path class="path1" d="M16 2h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM13.061 14.789l-3.061-3.060-3.061 3.060-1.729-1.728 3.061-3.061-3.060-3.061 1.729-1.729 3.060 3.061 3.059-3.061 1.729 1.729-3.059 3.061 3.060 3.061-1.728 1.728z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star-outlined" viewBox="0 0 20 20">
|
||||
<title>star-outlined</title>
|
||||
<path class="path1" d="M18.8 8.022h-6.413l-2.387-6.722-2.389 6.722h-6.412l5.232 3.947-1.871 6.929 5.44-4.154 5.438 4.154-1.869-6.929 5.231-3.947zM10 12.783l-3.014 2.5 1.243-3.562-2.851-2.3 3.522 0.101 1.1-4.040 1.099 4.040 3.521-0.101-2.851 2.3 1.243 3.562-3.012-2.5z"></path>
|
||||
<path d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-star" viewBox="0 0 20 20">
|
||||
<title>star</title>
|
||||
<path class="path1" d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-user" viewBox="0 0 20 20">
|
||||
<title>user</title>
|
||||
<path class="path1" d="M7.725 2.146c-1.016 0.756-1.289 1.953-1.239 2.59 0.064 0.779 0.222 1.793 0.222 1.793s-0.313 0.17-0.313 0.854c0.109 1.717 0.683 0.976 0.801 1.729 0.284 1.814 0.933 1.491 0.933 2.481 0 1.649-0.68 2.42-2.803 3.334-2.13 0.918-4.326 2.073-4.326 4.073v1h18v-1c0-2-2.197-3.155-4.328-4.072-2.123-0.914-2.801-1.684-2.801-3.334 0-0.99 0.647-0.667 0.932-2.481 0.119-0.753 0.692-0.012 0.803-1.729 0-0.684-0.314-0.854-0.314-0.854s0.158-1.014 0.221-1.793c0.065-0.817-0.398-2.561-2.3-3.096-0.333-0.34-0.558-0.881 0.466-1.424-2.24-0.105-2.761 1.067-3.954 1.929z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-facebook" viewBox="0 0 20 20">
|
||||
<title>facebook</title>
|
||||
<path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h7v-7h-2v-2.475h2v-2.050c0-2.164 1.212-3.684 3.766-3.684l1.803 0.002v2.605h-1.197c-0.994 0-1.372 0.746-1.372 1.438v1.69h2.568l-0.568 2.474h-2v7h4c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-instagram" viewBox="0 0 20 20">
|
||||
<title>instagram</title>
|
||||
<path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h14c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2zM9.984 15.523c3.059 0 5.538-2.481 5.538-5.539 0-0.338-0.043-0.664-0.103-0.984h1.581v7.216c0 0.382-0.31 0.69-0.693 0.69h-12.614c-0.383 0-0.693-0.308-0.693-0.69v-7.216h1.549c-0.061 0.32-0.104 0.646-0.104 0.984 0 3.059 2.481 5.539 5.539 5.539zM6.523 9.984c0-1.912 1.55-3.461 3.462-3.461s3.462 1.549 3.462 3.461-1.551 3.462-3.462 3.462c-1.913 0-3.462-1.55-3.462-3.462zM16.307 6h-1.615c-0.382 0-0.692-0.312-0.692-0.692v-1.617c0-0.382 0.31-0.691 0.691-0.691h1.615c0.384 0 0.694 0.309 0.694 0.691v1.616c0 0.381-0.31 0.693-0.693 0.693z"></path>
|
||||
<path d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 143 KiB |
Reference in New Issue
Block a user