Correct spacing for search icon in navbar

This commit is contained in:
Raghavendra Kamath
2018-04-13 19:07:39 +05:30
parent c2694e2e01
commit ff754048a2
2 changed files with 61 additions and 18 deletions

View File

@@ -13,7 +13,7 @@ a {
.js-search-input-icon {
position: absolute;
right: 1.75rem;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
}
@@ -24,7 +24,6 @@ a {
.js-search-input {
border: 1px solid var(--fn-green-light);
margin: 0 0.75rem;
}
.logo {

View File

@@ -32,21 +32,61 @@
My Account
</a>
<span class="arrow-down ml1"></span>
<svg class="js-search-icon icon mh3" viewBox="0 0 22.780561 22.145968" height="83.701294" width="86.099762">
<g transform="translate(-54.311708,-94.201033)">
<path d="m 63.786067,94.201033 c -5.217031,0 -9.474359,4.25784 -9.474359,9.474867 0,5.21703 4.257328,9.47436 9.474359,9.47436 2.056783,0 3.963124,-0.6635 5.519557,-1.78491 l 4.386813,4.38836 a 1.9845977,1.9845977 0 1 0 2.806546,-2.80654 l -4.460708,-4.46071 a 1.9845734,1.9845734 0 0 0 -0.06408,-0.0594 c 0.81602,-1.39869 1.286742,-3.02121 1.286742,-4.75113 0,-5.217027 -4.257844,-9.474867 -9.474871,-9.474867 z m 0,2.646353 c 3.78711,0 6.830073,3.041407 6.830073,6.828514 0,3.78711 -3.042963,6.83007 -6.830073,6.83007 -3.787117,0 -6.82801,-3.04296 -6.82801,-6.83007 0,-3.787107 3.040893,-6.828514 6.82801,-6.828514 z" />
<path d="m 63.786067,94.201033 c
-5.217031,0 -9.474359,4.25784
-9.474359,9.474867 0,5.21703
4.257328,9.47436 9.474359,9.47436
2.056783,0 3.963124,-0.6635
5.519557,-1.78491 l 4.386813,4.38836 a
1.9845977,1.9845977 0 1 0
2.806546,-2.80654 l -4.460708,-4.46071
a 1.9845734,1.9845734 0 0 0
-0.06408,-0.0594 c 0.81602,-1.39869
1.286742,-3.02121 1.286742,-4.75113
0,-5.217027 -4.257844,-9.474867
-9.474871,-9.474867 z m 0,2.646353 c
3.78711,0 6.830073,3.041407
6.830073,6.828514 0,3.78711
-3.042963,6.83007 -6.830073,6.83007
-3.787117,0 -6.82801,-3.04296
-6.82801,-6.83007 0,-3.787107
3.040893,-6.828514 6.82801,-6.828514 z"
/>
</g>
</svg>
<form class="js-search-form display-abs display-none">
<input type="text" class="js-search-input ph1" aria-label="Search erpnext.org"></input>
<svg class="js-search-input-icon icon" viewBox="0 0 22.780561 22.145968" height="83.701294" width="86.099762">
<input type="text" class="js-search-input mr2 ph1" aria-label="Search erpnext.org"></input>
<svg class="js-search-input-icon mr3 icon" viewBox="0 0 22.780561 22.145968" height="83.701294" width="86.099762">
<g transform="translate(-54.311708,-94.201033)">
<path d="m 63.786067,94.201033 c -5.217031,0 -9.474359,4.25784 -9.474359,9.474867 0,5.21703 4.257328,9.47436 9.474359,9.47436 2.056783,0 3.963124,-0.6635 5.519557,-1.78491 l 4.386813,4.38836 a 1.9845977,1.9845977 0 1 0 2.806546,-2.80654 l -4.460708,-4.46071 a 1.9845734,1.9845734 0 0 0 -0.06408,-0.0594 c 0.81602,-1.39869 1.286742,-3.02121 1.286742,-4.75113 0,-5.217027 -4.257844,-9.474867 -9.474871,-9.474867 z m 0,2.646353 c 3.78711,0 6.830073,3.041407 6.830073,6.828514 0,3.78711 -3.042963,6.83007 -6.830073,6.83007 -3.787117,0 -6.82801,-3.04296 -6.82801,-6.83007 0,-3.787107 3.040893,-6.828514 6.82801,-6.828514 z" />
<path d="m 63.786067,94.201033
c -5.217031,0 -9.474359,4.25784
-9.474359,9.474867 0,5.21703
4.257328,9.47436
9.474359,9.47436 2.056783,0
3.963124,-0.6635
5.519557,-1.78491 l
4.386813,4.38836 a
1.9845977,1.9845977 0 1 0
2.806546,-2.80654 l
-4.460708,-4.46071 a
1.9845734,1.9845734 0 0 0
-0.06408,-0.0594 c
0.81602,-1.39869
1.286742,-3.02121
1.286742,-4.75113 0,-5.217027
-4.257844,-9.474867
-9.474871,-9.474867 z m
0,2.646353 c 3.78711,0
6.830073,3.041407
6.830073,6.828514 0,3.78711
-3.042963,6.83007
-6.830073,6.83007 -3.787117,0
-6.82801,-3.04296
-6.82801,-6.83007 0,-3.787107
3.040893,-6.828514
6.82801,-6.828514 z" />
</g>
</svg>
</form>
@@ -58,13 +98,17 @@
version="1.1">
<g transform="translate(-5.9941406,-91.664062)">
<path
d="M 0 0 L 0 2 L 22.994141 2 L 22.994141 0 L 0 0 z M 0 7.3886719 L 0 9.390625 L 22.994141 9.390625 L 22.994141 7.3886719 L 0 7.3886719 z M 0 14.785156 L 0 16.787109 L 22.994141 16.787109 L 22.994141 14.785156 L 0 14.785156 z "
d="M 0 0 L 0 2 L 22.994141 2 L
22.994141 0 L 0 0 z M 0 7.3886719 L 0
9.390625 L 22.994141 9.390625 L
22.994141 7.3886719 L 0 7.3886719 z M 0
14.785156 L 0 16.787109 L 22.994141
16.787109 L 22.994141 14.785156 L 0
14.785156 z "
transform="matrix(0.26458333,0,0,0.26458333,5.9941406,91.664062)"
id="path2530" />
</g>
</svg>
{% include 'foundation/templates/includes/search-box.html' %}
</div>
</div>
</nav>