yjose

Git & Github workshop

Git

Instal Git

Download git for your operating system at: https://git-scm.com/downloads

Download VS Code https://code.visualstudio.com/

yjose

.burger-menu,
.burger-menu.open {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  right: 20px;
  bottom: 40px;
  z-index: 9999;
  background: #fff;
  padding: 10px;

yjose

mport React from "react";

export default ({ close }) => (
  <div className="menu">
    <ul>
      <li onClick={close}>Home</li>
      <li onClick={close}>Getting Started</li>
      <li onClick={close}>Component API</li>
      <li onClick={close}>Use Case - Tooltip</li>
      <li onClick={close}>Use Case - Modal</li>

yjose

import React from "react";

export default ({ open, ...props }) => (
  <div className={open ? "burger-menu open" : "burger-menu"} {...props}>
    <div className="bar1" key="b1" />
    <div className="bar2" key="b2" />
    <div className="bar3" key="b3" />
  </div>
);

yjose

import React from "react";

export default ({ open}) => (
  <div className={open ? "burger-menu open" : "burger-menu"}>
    <div className="bar1" key="b1" />
    <div className="bar2" key="b2" />
    <div className="bar3" key="b3" />
  </div>
);

yjose

[tooltip]:hover::after,[tooltip]:hover::before {
   opacity:1
}

yjose

[tooltip-position='left']::before{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform:translatey(-50%) rotate(-90deg) 
}
[tooltip-position='top']::before{
  left:50%;
}
[tooltip-position='bottom']::before{

yjose

button{
  margin:auto;
  background: #3498db;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
}
[tooltip]{
  margin:20px;
  position:relative;