feat(documentation): Style new sidebar menu items, style new mobile s…

…elect menu and a few svg fixes

docs/source/javascripts/sidebar.js

@@ -3,6 +3,7 @@ export default function sidebar({headersContainer, sidebarContainer, headerStart
  const select = document.createElement('select');
  const list = document.createElement('ul');
  const startLevel = headerStartLevel; // we start at h2
+ list.classList.add('no-mobile');
  let currentList = list;
  let currentLevel = startLevel;
 
@@ -29,6 +30,7 @@ export default function sidebar({headersContainer, sidebarContainer, headerStart
  const option = document.createElement('option');
  option.setAttribute('value', link.getAttribute('href'));
  option.textContent = `${spacer(currentLevel - startLevel)}${title}`;
+ select.classList.add('display-on-small');
  select.appendChild(option);
  });
 
@@ -65,7 +67,7 @@ function sidebarFollowScroll(sidebarContainer) {
 // On the documentation sidebar depending on the
 // clicked item
 function activeLinks(sidebarContainer) {
- const linksContainer = sidebarContainer.querySelector('ul');
+ const linksContainer = sidebarContainer.querySelector('ul li');
 
  linksContainer.addEventListener('click', function(e) {
  if (e.target.tagName === 'A') {

docs/source/stylesheets/components/_documentation.scss

@@ -13,6 +13,28 @@
  ul {
  font-size: 16px;
  line-height: 22px;
+
+ li {
+ clear: both;
+ }
+
+ ul {
+ font-weight: normal;
+ font-size: 14px;
+ position: relative;
+
+ li {
+ height: 26px;
+ line-height: 26px;
+
+ &:before {
+ content: '-';
+ float: left;
+ margin-right: 6px;
+ color: $greyish
+ }
+ }
+ }
  }
 
  h2 {
@@ -99,7 +121,7 @@
  }
 
  .algolia-places {
- color: #000000
+ color: #000000;
  }
 
  h2, h3 {
@@ -125,7 +147,7 @@
  }
 
  @include small-mq {
- padding-top: 16px;
+ padding-top: 32px;
 
  .container {
  .documentation-container {

docs/source/stylesheets/components/_sidebar.scss

@@ -53,52 +53,26 @@ nav.sidebar {
  @include small-mq {
  width: calc(100% + 16px);
  max-width: calc(100% + 16px);
- position: relative;
+ position: absolute;
  max-height: 40px;
  left: 0px;
- top: -16px;
+ top: 16px;
  border: none;
+ padding-top: 0;
 
- ul {
- width: 100%;
- padding: 0 16px;
- height: 40px;
-
- li {
- float: left;
- display: inline-block;
- width: auto;
- height: 40px;
- line-height: 40px;
- margin-right: 8px;
- display: none;
-
-
- a {
- text-align: center;
- color: #fff;
-
- &:focus,
- &:target {
- font-weight: bold;
- box-shadow: none;
- }
- }
-
- &.active a {
- font-weight: bold;
- box-shadow: none;
- }
- }
+ select {
+ width: calc(100% - 32px);
+ margin: 8px 8px;
+ visibility: hidden;
  }
 
  &.fixed {
  background: $brand-primary;
  color: #fff;
  top: $navigation-height;
 
- ul li {
- display: inline-block;
+ select {
+ visibility: visible;
  }
  }
  }

docs/source/stylesheets/vendors/_svg-animations.scss

@@ -15,11 +15,6 @@ $timingFunction: 3s ease infinite;
  }
 }
 
-svg {
- display: block;
- width: 100%;
-}
-
 #pin {
  animation: bounce $timingFunction;
 }

src/places.scss

@@ -101,8 +101,14 @@
  bottom: 0;
  right: 12px;
  outline: none;
+
  svg {
  fill: #cfcfcf;
+ // keep the icons centered
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
  }
  }