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

Commit 693ff04

Browse files
LukyVjvvo
LukyVj
authored and
vvo
committed
feat(dropdown): style the dropdown
1 parent 176a184 commit 693ff04

File tree

15 files changed

+233
-148
lines changed

15 files changed

+233
-148
lines changed

‎docs/source/images/svg/places-illustration.svg‎

Lines changed: 34 additions & 49 deletions
Loading

‎docs/source/index.html.haml‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,27 @@
22
title: Welcome to Middleman
33
---
44
%div.navigation
5-
-# %div.fl-left
6-
-# %span.brand
7-
-# Algolia Community
8-
9-
10-
-# %div.fl-right
11-
-# %div.searchbar
12-
-# %input
13-
14-
-# %ul
15-
-# %li
16-
-# %a documentations
17-
-# %li
18-
-# %a examples
19-
-# %li
20-
-# %a about
21-
-# %li
22-
-# %a github
23-
24-
-# %div{id: "instant-search-nav", class: "navbar-collapse"}
25-
-# %ul{class: "nav navbar-nav navbar-right"}
26-
-# %li{class: "hidden-xs"}
27-
-# %form{class: "form search-form", action: "#"}
28-
-# %input{class: "form-control aa-input", placeholder: "Search in the documentation", type: "text", id: "doc-search"}
5+
%div.fl-left
6+
%span.brand
7+
<span class="icon icon-algolia-light">Algolia</span> Community
8+
9+
10+
%div.fl-right
11+
%div.searchbar
12+
%input{class: "form-control aa-input", placeholder: "Search in the documentation", type: "text", id: "doc-search"}
13+
14+
%ul
15+
%li
16+
%a documentations
17+
%li
18+
%a examples
19+
%li
20+
%a about
21+
%li
22+
%a
23+
%span.icon.icon-github
24+
github
25+
2926
3027
%section.hero-section
3128
.container
@@ -39,11 +36,11 @@ title: Welcome to Middleman
3936
%h1 Lorem Ipsumdol
4037
%h3 The easiest way to find an address lorem
4138
42-
%a{href: "#", class: "btn"} Get Started
39+
%a{href: "http://algolia.com", class: "btn"} Get Started
4340
4441
%div.fl-right
45-
%img{src: "images/svg/places-illustration.svg", class: "hero-illustration"}
46-
42+
-#%img{src: "images/svg/places-illustration.svg", class: "hero-illustration"}
43+
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="303" height="230" viewBox="0 0 323 230"> <title>Geosearch</title> <defs> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="b"> <feOffset dy="6" in="SourceAlpha" result="shadowOffsetOuter1"/> <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"/> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/> <feOffset dy="9" in="SourceAlpha" result="shadowOffsetOuter2"/> <feGaussianBlur stdDeviation="13.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"/> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" in="shadowBlurOuter2" result="shadowMatrixOuter2"/> <feMerge> <feMergeNode in="shadowMatrixOuter1"/> <feMergeNode in="shadowMatrixOuter2"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <path id="a" d="M130.62 1.387c-2.643-1.54-6.92-1.54-9.547 0L2.163 71.102c-2.63 1.542-2.614 4.02.038 5.536l118.834 67.927c2.652 1.515 6.96 1.516 9.605.01l119.436-67.948c2.653-1.51 2.672-3.978.02-5.525L130.618 1.387z"/> </defs> <g transform="translate(24.132 2.347)" fill="none" fill-rule="evenodd"> <g transform="translate(1 46)"> <mask id="c" fill="#fff"> <use xlink:href="#a"/> </mask> <use stroke="#2897C5" stroke-width="4.5" fill="#FFF" filter="url(#b)" xlink:href="#a"/> <g mask="url(#c)" stroke="#2897C5" stroke-opacity=".33" stroke-width="4.147"> <path d="M29.126 91.633l26.547 14.52 6.216-14.52H29.125zM87.428 22.49L.448 72.965l6.214 4.84H67.76L87.428 22.49zM86.644 65.36l-15.855 50.9 49.7 28.772c5.993-27.148 27.824-62.706 42.803-79.673h-76.65zM178.208 50.913c5.99-4.743 11.752-8.325 16.84-10.454l-45.564-28.266h-44.17L91.5 50.914h86.708zM179.167 115.413L161.57 92.25c-8.02 11.407-17.772 31.234-21.75 46.325M215.144 49.456c-11.523 4.846-38.12 21.31-46.328 30.17l24.293 27.218 63.78-33.88-41.746-23.508z"/> </g> </g> <ellipse fill-opacity=".6" fill="#A1C2D0" cx="124.745" cy="122.421" rx="29.979" ry="11.063" id="ellipse"/> <g stroke="#8962B2" id="pin"> <path d="M157.39 34.315c0 18.546-33.825 83.958-33.825 83.958S89.74 52.86 89.74 34.315C89.74 15.768 104.885.73 123.565.73c18.68 0 33.825 15.038 33.825 33.585z" stroke-width="5.53" fill="#E6D2FC"/> <path d="M123.565 49.13c-8.008 0-14.496-6.498-14.496-14.52 0-8.017 6.487-14.52 14.495-14.52s14.496 6.503 14.496 14.52c0 8.022-6.487 14.52-14.495 14.52z" stroke-width="2.765" fill="#FFF"/> </g> </g> </svg>
4744
%input{type: "text", id: "landing-demo", class: "hero-searchbar", placeholder: "Search a country, city or address…"}
4845
4946
%section
@@ -95,7 +92,7 @@ title: Welcome to Middleman
9592
%p We're kind of scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn’t always easy to find the information we need.
9693
%p No one's to blame, building a good search for a documentation is a complex challenge. We just happen to have a lot of experience doing that, and we want to share it with the world.
9794
98-
%a{href: "#", class: "btn btn-cta"} Get Started
95+
%a{href: "http://algolia.com", class: "btn btn-cta"} Get Started
9996
10097
10198
@@ -112,4 +109,4 @@ title: Welcome to Middleman
112109
%div
113110
%span.icon.icon-mail
114111
%input{type: "text", placeholder: "Email"}
115-
%a{href: "#", class:"btn btn-grey"} Subscribe
112+
%a{href: "http://algolia.com", class:"btn btn-grey"} Subscribe

‎docs/source/javascripts/all.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
places({container: document.querySelector('#landing-demo')});
2+

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
font-weight: 600;
1515
font-size: 12px;
1616
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
17+
transition: background 0.1s ease;
1718

1819
&:hover,
1920
&:active {
@@ -32,4 +33,7 @@
3233
color: $grey-blue;
3334
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
3435
}
36+
37+
cursor: pointer;
38+
3539
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -157,15 +157,15 @@ section {
157157

158158
////
159159
.action-section {
160-
background: $pale-grey url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 35%;
160+
background: $pale-grey url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 38%;
161161
padding-bottom: 420px;
162162

163163
@include medium-mq {
164-
background: $pale-grey url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 55%;
164+
background: $pale-grey url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 58%;
165165
}
166166

167167
@include big-min-mq {
168-
background: $pale-grey url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 25%;
168+
background: $pale-grey url('../images/svg/search-everywhere-illu.svg')no-repeat center bottom / 28%;
169169
}
170170

171171
@include small-mq {
@@ -186,6 +186,7 @@ section {
186186

187187
p {
188188
margin: 48px 0;
189+
font-size: 16px;
189190
}
190191

191192
.link {

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.algolia-autocomplete {
2+
3+
.aa-dropdown-menu {
4+
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
5+
border-radius: 4px;
6+
margin-top: 4px;
7+
8+
.aa-suggestion {
9+
height: 46px;
10+
line-height: 46px;
11+
padding: 0 18px;
12+
font-family: 'Open Sans', helvetica neue, helvetica;
13+
font-weight: 400;
14+
color: #262626;
15+
overflow: hidden;
16+
17+
&:first-child {
18+
border-top-left-radius: 4px;
19+
border-top-right-radius: 4px;
20+
}
21+
22+
&:last-child {
23+
border-bottom-left-radius: 4px;
24+
border-bottom-right-radius: 4px;
25+
}
26+
27+
&:hover,
28+
&.aa-cursor {
29+
background: $pale-grey;
30+
31+
.pl-address {
32+
color: darken($greyish, 10%)
33+
}
34+
35+
.pl-icon svg {
36+
transform: scale(1)
37+
}
38+
}
39+
}
40+
}
41+
42+
.pl-address {
43+
font-size: 14px;
44+
margin-left: 12px;
45+
color: $greyish;
46+
}
47+
48+
49+
.pl-icon {
50+
max-width: 14px;
51+
max-height: 20px;
52+
margin-right: 10px;
53+
float: left;
54+
position: relative;
55+
top: 50%;
56+
transform: translateY(-50%);
57+
58+
svg {
59+
max-width: 14px;
60+
max-height: 20px;
61+
transform: scale(0.90);
62+
}
63+
}
64+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@ h3.title {
8181
padding: 8px 0 0;
8282
}
8383
}
84+
h4 {
85+
font-size: 18px;
86+
}
8487

8588
/* Anchors / links
8689
====================*/

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,18 @@
1010
background: url($icon-algolia-dark)no-repeat center center / contain
1111
}
1212

13+
&-algolia-light {
14+
background: url($icon-algolia-light)no-repeat center center / contain
15+
}
16+
1317
&-mail {
1418
background: url($icon-mail)no-repeat 8px 7px / 70%
1519
}
1620

21+
&-github {
22+
background: url($icon-github)no-repeat center center / contain
23+
}
24+
1725
&-algolia-small {
1826
background: url($icon-algolia-small)no-repeat center center / contain
1927
}

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

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,49 @@
22
position: fixed;
33
width: 100%;
44
max-height: $navigation-height;
5-
background: $denim-blue;
5+
line-height: $navigation-height;
6+
background: darken($denim-blue, 5%);
67
overflow: hidden;
7-
z-index: 12;
8-
8+
z-index: 101;
9+
color: #fff;
10+
padding: 0 16px;
11+
margin: 0;
12+
913
.brand {
1014
float: left;
1115
}
1216

1317
.searchbar {
1418
float: left;
15-
width: 100px;
16-
background: red;
17-
height: 40px;
19+
width: auto;
20+
height: $navigation-height;
1821

1922
input {
20-
display: none;
23+
position: relative;
24+
width: 36px;
25+
height: 36px;
26+
line-height: 2.3em;
27+
padding: 0 0px 0 35px;
28+
background-color: transparent;
29+
background-image: url($icon-search-white);
30+
background-repeat: no-repeat;
31+
background-position: center center;
32+
background-size: 15px;
33+
34+
border: solid 2px rgba(#FFF, 0.5);
35+
border-radius: 40px;
36+
color: #FFFFFF;
37+
overflow: hidden;
38+
margin-right: 16px;
39+
cursor: pointer;
40+
transition: width 0.2s ease;
41+
42+
43+
&:focus {
44+
width: 300px;
45+
background-position: center left 15px;
46+
}
47+
2148
}
2249
}
2350

@@ -26,9 +53,10 @@
2653
margin: 0;
2754
float: left;
2855
list-style: none;
29-
56+
3057
li {
3158
display: inline-block;
59+
padding: 0 6px;
3260
}
3361
}
3462
}

‎docs/source/stylesheets/csspeed/_base.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
* {
22
-webkit-font-smoothing: antialiased;
3-
-moz-osx-font-smoothing: grayscaled;
3+
-moz-osx-font-smoothing: grayscale;
44
box-sizing: border-box;
55
}
66

0 commit comments

Comments
 (0)