Skip to content
This repository was archived by the owner on Feb 2, 2023. It is now read-only.

Commit 71d080b

Browse files
LukyVjvvo
LukyVj
authored and
vvo
committed
feat(searchbox): added default style for input
1 parent da3cd4b commit 71d080b

File tree

7 files changed

+164
-94
lines changed

7 files changed

+164
-94
lines changed

‎docs/source/javascripts/all.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ places({
77

88
// The following code is used to change the color of the navigation
99
// depending the level of page scroll.
10+
1011
const hero = document.querySelector('.hero-section');
1112
const navigation = document.querySelector('.navigation');
12-
const height = hero.offsetHeight;
13+
const height = hero.offsetHeight || 0;
1314
const navHeight = navigation.offsetHeight;
1415
const sidebar = document.getElementById('sidebar');
1516

16-
1717
// automatically darken the top menu when going down
1818
document.addEventListener('scroll', () => {
1919
const value = event.target.scrollingElement.scrollTop;

‎docs/source/searchbox.html.haml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
%br
2+
%div.container{style: "width: 400px"}
3+
%input{ type: "text", id:"landing-demo"}
4+

‎docs/source/stylesheets/components/_inputs.scss‎

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,52 @@
11
input {
22
outline: none;
33
}
4+
// Style the input for the Demo page
5+
.hero-section {
6+
.algolia-places {
7+
top: 50px;
8+
font-family: 'Open Sans', helvetica Neue;
9+
width: 100%; // we ask the autocomplete to take the full width of his container
410

5-
.algolia-places {
6-
top: 50px;
7-
font-family: 'Open Sans', helvetica Neue;
11+
&:before {
12+
content:'Try me!';
13+
position: absolute;
14+
top: -44px;
15+
left: 10px;
16+
width: 100px;
17+
height: 44px;
18+
text-align: right;
19+
font-style: italic;
20+
font-weight: 600;
21+
font-family: 'Open Sans', helvetica Neue;
22+
font-size: 16px;
23+
line-height: 44px;
24+
color: $powder-blue;
25+
background: {
26+
image: url($icon-arrow);
27+
repeat: no-repeat;
28+
position: bottom 12px left 12px;
29+
size: 24px;
30+
}
31+
}
832

9-
&:before {
10-
content:'Try me!';
11-
position: absolute;
12-
top: -44px;
13-
left: 10px;
14-
width: 100px;
15-
height: 44px;
16-
text-align: right;
17-
font-style: italic;
18-
font-weight: 600;
19-
font-family: 'Open Sans', helvetica Neue;
20-
font-size: 16px;
21-
line-height: 44px;
22-
color: $powder-blue;
23-
background: {
24-
image: url($icon-arrow);
25-
repeat: no-repeat;
26-
position: bottom 12px left 12px;
27-
size: 24px;
33+
.aa-input {
34+
border: solid em(1) rgba(255, 255, 255, 0.5);
35+
box-shadow: 0 em(1) em(10) rgba(0, 0, 0, 0.2), 0 em(2) em(4) 0 rgba(0, 0, 0, 0.1);
36+
color: #8f94ad;
37+
font-family: "Raleway", Helvetica Neue, helvetica;
2838
}
29-
}
30-
}
3139

32-
.algolia-places .aa-suggestion {
33-
color: #262626;
34-
}
40+
.aa-input, .aa-hint {
41+
width: 100%;
42+
height: em(56);
43+
padding-left: em(16);
44+
padding-right: em(48);
45+
border-radius: em(4);
46+
}
3547

36-
.hero-searchbar {
37-
color: #8f94ad;
38-
font-family: "Raleway", Helvetica Neue, helvetica;
39-
}
48+
.aa-suggestion {
49+
color: #262626;
50+
}
51+
}
52+
}

‎docs/source/stylesheets/components/_navigation.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,4 @@
8686
top: 16px;
8787
right: 8px;
8888
}
89-
}
89+
}

‎docs/source/stylesheets/site.css.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

2-
32
@import 'vendors/normalize',
43
'vendors/variables',
4+
'vendors/functions',
55
'vendors/mixins',
66
'vendors/base',
77
'vendors/svg-animations';

‎docs/source/stylesheets/vendors/_functions.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
$browser-context: 16; // Default
2+
3+
@function em($pixels, $context: $browser-context) {
4+
@return #{$pixels/$context}em;
5+
}

‎src/places.scss‎

Lines changed: 107 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,89 +2,137 @@ $icon-search: "data:image/svg+xml;utf8,<svg width=\'22\' height=\'22\' viewBox=\
22
$pale-grey: #f2f4f6;
33
$greyish: #a4a4a4;
44

5+
$browser-context: 16; // Default
6+
7+
@function em($pixels, $context: $browser-context) {
8+
@return #{$pixels/$context}em;
9+
}
10+
11+
@mixin placeholder {
12+
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
13+
@each $placeholder in $placeholders {
14+
&:#{$placeholder}-placeholder {
15+
@content;
16+
}
17+
}
18+
}
19+
20+
521
// all em units are computed given a font of 16px
622
// see http://pxtoem.com/ to change/add values
723
.algolia-places {
8-
width: 100%; // we ask the autocomplete to take the full width of his container
24+
width: 100%;
925

10-
.aa-hint {color: #dedede}
26+
.aa-input,
27+
.aa-hint{
28+
padding: em(12) em(16);
29+
border-radius: 3px;
30+
line-height: em(40);
31+
height: 40px;
32+
}
1133

1234
.aa-input {
13-
border: solid 0.063em rgba(255, 255, 255, 0.5);
14-
box-shadow: 0 0.063em 0.625em rgba(0, 0, 0, 0.2), 0 0.125em 0.250em 0 rgba(0, 0, 0, 0.1);
35+
position: relative;
36+
width: 100%;
37+
overflow: hidden;
38+
-webkit-appearance: none;
39+
-moz-appearance: none;
40+
appearance: none;
41+
border: em(1) solid #ccc;
42+
color: #555555;
43+
1544
background: {
16-
image: url($icon-search);
45+
image: url("data:image/svg+xml;utf8,<svg width=\'14\' height=\'20\' viewBox=\'0 0 14 20\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 0C3.13 0 0 3.13 0 7c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5C5.62 9.5 4.5 8.38 4.5 7S5.62 4.5 7 4.5 9.5 5.62 9.5 7 8.38 9.5 7 9.5z\' fill=\'%23CFCFCF\' fill-rule=\'evenodd\'/></svg>");
1746
repeat: no-repeat;
18-
position: center right 1em;
47+
position: center right 16px;
48+
size: 14px;
1949
}
20-
}
2150

22-
.aa-input, .aa-hint {
23-
width: 100%;
24-
height: 3.5em;
25-
padding-left: 1em;
26-
padding-right: 3em;
27-
border-radius: 0.250em;
51+
&:hover,
52+
&:focus {
53+
border-color: #999;
54+
background: {
55+
image: url("data:image/svg+xml;utf8,<svg width=\'14\' height=\'20\' viewBox=\'0 0 14 20\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 0C3.13 0 0 3.13 0 7c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5C5.62 9.5 4.5 8.38 4.5 7S5.62 4.5 7 4.5 9.5 5.62 9.5 7 8.38 9.5 7 9.5z\' fill=\'%23AAAAAA\' fill-rule=\'evenodd\'/></svg>");
56+
repeat: no-repeat;
57+
position: center right 16px;
58+
size: 14px;
59+
}
60+
}
61+
62+
@include placeholder {
63+
font-size: 14px;
64+
color: #aaaaaa;
65+
}
2866
}
2967

30-
.aa-dropdown-menu {
68+
.aa-hint {
3169
width: 100%;
32-
background: #ffffff;
33-
box-shadow: 0 0.063em 0.625em rgba(0, 0, 0, 0.2), 0 0.125em 0.250em 0 rgba(0, 0, 0, 0.1);
34-
border-radius: 0.250em;
35-
margin-top: 0.250em;
70+
height: 100%;
71+
color: lighten(#555555, 35%);
72+
border: 1px solid transparent;
3673
}
3774

38-
.aa-suggestion {
39-
cursor: pointer;
40-
height: 2.875em;
41-
line-height: 2.875em;
42-
padding-left: 1.125em;
43-
em {
44-
font-weight: bold;
45-
font-style: normal;
75+
// Dropdown
76+
.aa-dropdown-menu {
77+
width: 100%;
78+
background: #ffffff;
79+
box-shadow: 0 em(1) em(10) rgba(0, 0, 0, 0.2), 0 em(2) em(4) 0 rgba(0, 0, 0, 0.1);
80+
border-radius: em(4);
81+
margin-top: em(4);
4682
}
4783

48-
&:first-child {
49-
border-top-left-radius: 0.250em;
50-
border-top-right-radius: 0.250em;
51-
}
84+
.aa-suggestion {
85+
cursor: pointer;
86+
height: em(46);
87+
line-height: em(46);
88+
padding-left: em(18);
89+
overflow: hidden;
5290

53-
&:last-child {
54-
border-bottom-left-radius: 0.250em;
55-
border-bottom-right-radius: 0.250em;
56-
}
57-
}
91+
em {
92+
font-weight: bold;
93+
font-style: normal;
94+
}
5895

59-
.pl-address {
60-
font-size: 0.875em; // 14px when font is 16px
61-
margin-left: 0.857em; // 12px when font is 14px
62-
color: $greyish;
63-
}
96+
&:first-child {
97+
border-top-left-radius: em(4);
98+
border-top-right-radius: em(4);
99+
}
64100

65-
.pl-icon {
66-
max-width: 0.875em;
67-
max-height: 1.250em;
68-
margin-right: 0.625em;
69-
float: left;
70-
position: relative;
71-
top: 50%;
72-
transform: translateY(-50%);
101+
&:last-child {
102+
border-bottom-left-radius: em(4);
103+
border-bottom-right-radius: em(4);
104+
}
105+
}
73106

74-
svg {
75-
transform: scale(0.90);
107+
.pl-address {
108+
font-size: em(14); // 14px when font is 16px
109+
margin-left: em(13); // 12px when font is 14px
110+
color: $greyish;
76111
}
77-
}
78112

79-
.aa-cursor {
80-
background: $pale-grey;
113+
.pl-icon {
114+
max-width: em(14);
115+
max-height: em(20);
116+
margin-right: em(10);
117+
float: left;
118+
position: relative;
119+
top: 50%;
120+
transform: translateY(-50%);
81121

82-
.pl-address {
83-
color: darken($greyish, 10%)
122+
svg {
123+
transform: scale(0.90);
124+
}
84125
}
85126

86-
.pl-icon svg {
87-
transform: scale(1)
127+
.aa-cursor {
128+
background: $pale-grey;
129+
130+
.pl-address {
131+
color: darken($greyish, 10%)
132+
}
133+
134+
.pl-icon svg {
135+
transform: scale(1)
136+
}
88137
}
89-
}
90-
}
138+
}

0 commit comments

Comments
 (0)