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

Commit

Permalink
feat(examples): Making the examples squares clickable
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukyVj
LukyVj committed May 10, 2016
1 parent 08272f9 commit c1a1843
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 19 deletions.
31 changes: 31 additions & 0 deletions docs/source/partials/documentation.md.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,17 +462,24 @@ Then the dropdown html structure looks like this:
For the css part, here is the css used by default on our page :

```css
/* Main input wrapper */
.algolia-places.algolia-places-styled {
width: 100%;
}

/* The algolia-places input */
.algolia-places.algolia-places-styled .ap-input, .algolia-places.algolia-places-styled .ap-hint {
width: 100%;
}

/* The style of the svg icons when the input is on hover */
.algolia-places.algolia-places-styled .ap-input:hover ~ .ap-input-icon svg,
.algolia-places.algolia-places-styled .ap-input:focus ~ .ap-input-icon svg,
.algolia-places.algolia-places-styled .ap-input-icon:hover svg {
fill: #aaaaaa;
}

/* The dropdown style */
.algolia-places.algolia-places-styled .ap-dropdown-menu {
width: 100%;
background: #ffffff;
Expand All @@ -481,32 +488,42 @@ For the css part, here is the css used by default on our page :
margin-top: 3px;
overflow: hidden;
}

/* The suggestions style */
.algolia-places.algolia-places-styled .ap-suggestion {
cursor: pointer;
height: 46px;
line-height: 46px;
padding-left: 18px;
overflow: hidden;
}

/* The highlighted names style */
.algolia-places.algolia-places-styled .ap-suggestion em {
font-weight: bold;
font-style: normal;
}

/* The addresses style */
.algolia-places.algolia-places-styled .ap-address {
font-size: smaller;
margin-left: 12px;
color: #aaaaaa;
}
/* The icons of each suggestions ( can be a building or a pin ) */
.algolia-places.algolia-places-styled .ap-suggestion-icon {
margin-right: 10px;
width: 14px;
height: 20px;
vertical-align: middle;
}
/* The style of the svg inside the .ap-suggestion-icon */
.algolia-places.algolia-places-styled .ap-suggestion-icon svg {
transform: scale(0.9) translateY(2px);
fill: #cfcfcf;
}

/* The icons inside the input ( can be a pin or a cross ) */
.algolia-places.algolia-places-styled .ap-input-icon {
border: 0;
background: transparent;
Expand All @@ -516,34 +533,48 @@ For the css part, here is the css used by default on our page :
right: 16px;
outline: none;
}

/* The style of the svg inside the .ap-input-icon */
.algolia-places.algolia-places-styled .ap-input-icon svg {
fill: #cfcfcf;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}

/* .a-cursor is the class a suggestion go on hover */
.algolia-places.algolia-places-styled .ap-cursor {
background: #efefef;
}

/* The style of the svg icon, when the .ap-suggestion is on hover */
.algolia-places.algolia-places-styled .ap-cursor .ap-suggestion-icon svg {
transform: scale(1);
fill: #aaaaaa;
}

/* The styles of the Algolia Places input footer */
.algolia-places.algolia-places-styled .ap-footer {
opacity: .8;
text-align: right;
padding: .5em 1em .5em 0;
font-size: 12px;
line-height: 12px;
}

/* The styles of the Algolia Places input footer links */
.algolia-places.algolia-places-styled .ap-footer a {
color: inherit;
text-decoration: none;
}

/* The styles of the Algolia Places input footer svg icons */
.algolia-places.algolia-places-styled .ap-footer a svg {
vertical-align: middle;
}

/* The styles of the Algolia Places input footer on hover */
.algolia-places.algolia-places-styled .ap-footer:hover {
opacity: 1;
}
Expand Down
42 changes: 24 additions & 18 deletions docs/source/partials/hero.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,37 @@
%div.examples-intro
%div.items-holder
%div{:class => "item"}
%span{:class => "square input"}
= partial("/images/svg/search-icon-2.svg")
%span.name Simple Input
%a{:href => '#simple-input'}
%span{:class => "square input"}
= partial("/images/svg/search-icon-2.svg")
%span.name Simple Input
%div{:class => "item"}
%span{:class => "square form"}
= partial("/images/svg/form-icon.svg")
%span.name Complete Form
%a{:href => '#complete-form'}
%span{:class => "square form"}
= partial("/images/svg/form-icon.svg")
%span.name Complete Form
%div{:class => "item"}
%span{:class => "square city"}
= partial("/images/svg/city-icon.svg")
%span.name City Search
%a{:href => '#city-search'}
%span{:class => "square city"}
= partial("/images/svg/city-icon.svg")
%span.name City Search
%div{:class => "item"}
%span{:class => "square country"}
= partial("/images/svg/country-icon.svg")
%span.name Country Search
%a{:href => '#country-search'}
%span{:class => "square country"}
= partial("/images/svg/country-icon.svg")
%span.name Country Search
%div{:class => "item"}
%span{:class => "square map"}
= partial("/images/svg/map-icon.svg")
%span.name Map Search
%a{:href => '#displaying-a-map'}
%span{:class => "square map"}
= partial("/images/svg/map-icon.svg")
%span.name Map Search
%div{:class => "item"}
%span{:class => "square custom"}
= partial("/images/svg/custom-icon.svg")
%span.name Custom
%a{:href => '#custom-templates'}
%span{:class => "square custom"}
= partial("/images/svg/custom-icon.svg")
%span.name Custom
17 changes: 16 additions & 1 deletion docs/source/stylesheets/components/_examples-intro.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ $square-map: (
flex-wrap: wrap;
flex-direction: row;

a {
text-decoration: none;
color: inherit;
}

.item {
max-width: 120px;
height: 120px;
Expand All @@ -50,13 +55,22 @@ $square-map: (
max-width: 120px;
height: 120px;
border-radius: 16px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
transition: box-shadow 0.3s ease;

@each $class,$degrees, $color-a, $color-b in $square-map {
&.#{$class} {
background: linear-gradient(#{$degrees}deg, #{$color-a} 0, #{$color-b} 100%);
}
}

&:hover {
box-shadow: none;

&~ .name {
opacity: 1;
}
}
}

svg {
Expand All @@ -72,6 +86,7 @@ $square-map: (
font-size: 16px;
font-weight: 300;
line-height: 52px;
transition: opacity 0.3s ease;
}
}
}
Expand Down

0 comments on commit c1a1843

Please sign in to comment.