react-tooltip 5.0.0-beta.1 → 5.0.0-beta.2

package/example-v5/src/index.css

@@ -1,238 +0,0 @@
-html,
-body {
-  margin: 0px;
-  padding: 0px;
-  min-width: 1024px;
-  letter-spacing: 0.05rem;
-}
-.tooltip-example {
-  background: #1182dd;
-  height: 900px;
-  position: relative;
-}
-.tooltip-example .title {
-  color: #fff;
-  padding-top: 50px;
-  margin-top: 0px;
-  font-size: 45px;
-  text-align: center;
-  margin-bottom: 20px;
-  font-weight: 700;
-}
-.demonstration {
-  width: 600px;
-  height: 150px;
-  margin: 10px auto;
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 5px;
-  box-sizing: border-box;
-  position: relative;
-}
-.demonstration a {
-  display: block;
-  width: 60px;
-  height: 60px;
-  line-height: 60px;
-  border-radius: 60px;
-  text-align: center;
-  color: #222;
-  background: rgba(255, 255, 255, 1);
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -30px;
-  margin-top: -15px;
-  cursor: pointer;
-  box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.5);
-  border: 1px solid #333;
-}
-.demonstration a:after {
-  content: 'hover on me';
-  text-align: center;
-  color: rgba(0, 0, 0, 0.25);
-  position: absolute;
-  width: 100px;
-  top: 45px;
-  left: -18px;
-}
-.control-panel {
-  background: rgba(255, 255, 255, 0.4);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  width: 100%;
-  height: auto;
-  padding-bottom: 30px;
-  overflow: auto;
-}
-.control-panel:after {
-  content: '';
-  height: 0px;
-  display: block;
-  clear: both;
-}
-.control-panel .button-group {
-  box-sizing: border-box;
-  width: 55%;
-  float: left;
-  padding-left: 10px;
-}
-.control-panel .button-group .item {
-  padding: 3px 2px;
-  clear: both;
-}
-.control-panel .button-group .item p {
-  margin: 10px 0px 2px;
-  font-size: 18px;
-  color: black;
-}
-.control-panel .button-group .item a {
-  border-radius: 3px;
-  text-align: center;
-  cursor: pointer;
-  transition: background 0.25s ease-out;
-  background: #e8e8e8;
-  float: left;
-  margin-right: 8px;
-  padding: 7px 10px;
-  font-size: 14px;
-}
-.control-panel .button-group .item a .mark {
-  color: #888;
-  font-size: 13px;
-  display: inline-block;
-  padding-left: 3px;
-}
-.control-panel .button-group .item a.active,
-.control-panel .button-group .item a:hover {
-  color: #fff;
-  background: #1182dd;
-}
-.control-panel .button-group .item a.active .mark,
-.control-panel .button-group .item a:hover .mark {
-  color: rgba(255, 255, 255, 0.6);
-}
-.control-panel pre {
-  box-sizing: border-box;
-  width: 45%;
-  float: left;
-}
-.control-panel pre div {
-  background: rgba(255, 255, 255, 0.8);
-  margin: 0px 20px;
-  padding: 8px 12px;
-}
-.control-panel pre .label {
-  margin: 10px 0px 2px;
-  font-size: 18px;
-  color: #777;
-}
-.advance .title {
-  color: #222;
-  padding-top: 100px;
-  margin-top: 0px;
-  font-size: 30px;
-  text-align: center;
-  margin-bottom: 20px;
-  font-weight: 700;
-}
-.advance .sub-title {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-  color: #666;
-  font-size: 20px;
-  padding-bottom: 5px;
-}
-.advance .section {
-  width: 800px;
-  margin: 20px auto;
-}
-.example-jsx {
-  padding: 10px 0px;
-  height: 50px;
-}
-.example-jsx:after {
-  content: '';
-  clear: both;
-  height: 0;
-  visibility: hidden;
-}
-.example-jsx .block {
-  float: left;
-}
-.example-jsx .block a {
-  text-align: center;
-  width: 55px;
-  height: 55px;
-  border: 1px solid #999;
-  border-radius: 0px;
-}
-.example-jsx .side {
-  width: 50%;
-  float: left;
-  box-sizing: border-box;
-}
-.example-jsx .side-3 {
-  width: 33.333%;
-  float: left;
-  box-sizing: border-box;
-}
-.example-jsx a {
-  text-align: center;
-  width: 55px;
-  height: 55px;
-  line-height: 55px;
-  border-radius: 55px;
-  display: block;
-  margin: auto;
-  cursor: pointer;
-  color: #999;
-  border: 1px solid #999;
-  font-size: 13px;
-}
-.example-jsx a:hover {
-  color: #222;
-  border: 1px solid #222;
-}
-.example-jsx p {
-  margin-bottom: 2px;
-  padding: 0px;
-}
-.example-jsx ul {
-  padding: 0px;
-  list-style: none;
-}
-.example-jsx ul li {
-  padding-left: 10px;
-  margin: 0px;
-  text-align: left;
-}
-.example-pre {
-  border-radius: 2px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-sizing: border-box;
-  padding: 10px;
-  margin-bottom: 60px;
-  font-size: 14px;
-}
-.example-pre p {
-  line-height: 30px;
-}
-.extraClass {
-  font-size: 20px;
-  background-color: #00ffe5;
-  color: #222;
-}
-.extraClass .extraClassArrow {
-  background-color: #00ffe5;
-}
-.customTheme {
-  color: #ff6e00;
-  background-color: orange;
-}
-.customTheme.place-top:after {
-  border-top-color: orange;
-  border-top-style: solid;
-  border-top-width: 6px;
-}

package/example-v5/src/index.js

@@ -1,15 +0,0 @@
-import { StrictMode, version } from 'react'
-import { createRoot } from 'react-dom/client'
-import 'react-tooltip/dist/react-tooltip.css'
-import './index.css'
-import App from './App'
-
-console.log('Examples folder loaded React version: ', version)
-
-const container = document.getElementById('root')
-const root = createRoot(container)
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/example-v5/src/index.scss

@@ -1,251 +0,0 @@
-html,
-body {
-  margin: 0px;
-  padding: 0px;
-  min-width: 1024px;
-  letter-spacing: 0.05rem;
-}
-.tooltip-example {
-  background: #1182dd;
-  height: 900px;
-  position: relative;
-  .title {
-    color: #fff;
-    padding-top: 50px;
-    margin-top: 0px;
-    font-size: 45px;
-    text-align: center;
-    margin-bottom: 20px;
-    font-weight: 700;
-  }
-}
-.demonstration {
-  width: 600px;
-  height: 150px;
-  margin: 10px auto;
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 5px;
-  box-sizing: border-box;
-  position: relative;
-  $wd: 60px;
-  a {
-    display: block;
-    width: $wd;
-    height: $wd;
-    line-height: $wd;
-    border-radius: $wd;
-    text-align: center;
-    color: #222;
-    background: rgba(255, 255, 255, 1);
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -$wd / 2;
-    margin-top: -$wd / 2 - 15;
-    cursor: pointer;
-    box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.5);
-    border: 1px solid #333;
-    &:after {
-      content: 'hover on me';
-      text-align: center;
-      color: rgba(0, 0, 0, 0.25);
-      position: absolute;
-      width: 100px;
-      top: 45px;
-      left: -18px;
-    }
-  }
-}
-.control-panel {
-  background: rgba(255, 255, 255, 0.4);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  width: 100%;
-  height: auto;
-  padding-bottom: 30px;
-  overflow: auto;
-  &:after {
-    content: '';
-    height: 0px;
-    display: block;
-    clear: both;
-  }
-  .button-group {
-    box-sizing: border-box;
-    width: 55%;
-    float: left;
-    padding-left: 10px;
-    .item {
-      padding: 3px 2px;
-      clear: both;
-      p {
-        margin: 10px 0px 2px;
-        font-size: 18px;
-        color: white;
-      }
-      a {
-        border-radius: 3px;
-        text-align: center;
-        cursor: pointer;
-        transition: background 0.25s ease-out;
-        background: #e8e8e8;
-        float: left;
-        margin-right: 8px;
-        padding: 7px 10px;
-        font-size: 14px;
-        .mark {
-          color: #888;
-          font-size: 13px;
-          display: inline-block;
-          padding-left: 3px;
-        }
-        &.active,
-        &:hover {
-          color: #fff;
-          background: #1182dd;
-          .mark {
-            color: rgba(255, 255, 255, 0.6);
-          }
-        }
-      }
-    }
-  }
-  pre {
-    box-sizing: border-box;
-    width: 45%;
-    float: left;
-    div {
-      background: rgba(255, 255, 255, 0.8);
-      margin: 0px 20px;
-      padding: 8px 12px;
-    }
-    .label {
-      margin: 10px 0px 2px;
-      font-size: 18px;
-      color: #777;
-    }
-  }
-}
-
-.advance {
-  .title {
-    color: #222;
-    padding-top: 100px;
-    margin-top: 0px;
-    font-size: 30px;
-    text-align: center;
-    margin-bottom: 20px;
-    font-weight: 700;
-  }
-  .sub-title {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-    color: #666;
-    font-size: 20px;
-    padding-bottom: 5px;
-  }
-  .section {
-    width: 800px;
-    margin: 20px auto;
-  }
-}
-
-.example-jsx {
-  padding: 10px 0px;
-  height: 50px;
-  &:after {
-    content: '';
-    clear: both;
-    height: 0;
-    visibility: hidden;
-  }
-  .block {
-    float: left;
-    $width: 55px;
-
-    a {
-      text-align: center;
-      width: $width;
-      height: $width;
-      border: 1px solid #999;
-      border-radius: 0px;
-    }
-  }
-  .side {
-    width: 50%;
-    float: left;
-    box-sizing: border-box;
-  }
-  .side-3 {
-    width: 33.333%;
-    float: left;
-    box-sizing: border-box;
-  }
-  a {
-    text-align: center;
-    $width: 55px;
-    width: $width;
-    height: $width;
-    line-height: $width;
-    border-radius: $width;
-    display: block;
-    margin: auto;
-    cursor: pointer;
-    color: #999;
-    border: 1px solid #999;
-    font-size: 13px;
-    &:hover {
-      color: #222;
-      border: 1px solid #222;
-    }
-  }
-  p {
-    margin-bottom: 2px;
-    padding: 0px;
-  }
-  ul {
-    padding: 0px;
-    list-style: none;
-    li {
-      padding-left: 10px;
-      margin: 0px;
-      text-align: left;
-    }
-  }
-}
-
-.example-pre {
-  border-radius: 2px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-sizing: border-box;
-  padding: 10px;
-  margin-bottom: 60px;
-  font-size: 14px;
-  p {
-    line-height: 30px;
-  }
-}
-
-// Extra class for demonstration
-.extraClass {
-  font-size: 20px !important;
-  pointer-events: auto !important;
-  &:hover {
-    visibility: visible !important;
-    opacity: 1 !important;
-  }
-}
-
-.customTheme {
-  color: #ff6e00 !important;
-  background-color: orange !important;
-  &.place-top {
-    &:after {
-      border-top-color: orange !important;
-      border-top-style: solid !important;
-      border-top-width: 6px !important;
-    }
-  }
-}

package/public/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#009ee2" />
-
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Dev - React Tooltip</title>
-    <link rel="stylesheet" href="index.css" />
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app. Please enable JavaScript 😭</noscript>
-
-    <div id="app"></div>
-
-    <script type="module" src="<%= appBundle %>"></script>
-  </body>
-</html>