From 7d343af41b6eb6413f8dc7375b3d6391152e3778 Mon Sep 17 00:00:00 2001 From: Rogger794 Date: Sun, 5 Jan 2020 21:39:26 -0500 Subject: [PATCH] fix: using css into example --- example/src/index.css | 228 ++++++++++++++++++++++++++++++++++++++++++ example/src/index.js | 1 + 2 files changed, 229 insertions(+) create mode 100644 example/src/index.css diff --git a/example/src/index.css b/example/src/index.css new file mode 100644 index 000000000..302b3ede0 --- /dev/null +++ b/example/src/index.css @@ -0,0 +1,228 @@ +html, body { + margin: 0px; + padding: 0px; + min-width: 1024px; +} +.tooltip-example { + background: #1182dd; + height: 550px; + 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: 230px; + 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: #777; +} +.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 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 !important; + pointer-events: auto !important; +} +.extraClass:hover { + visibility: visible !important; + opacity: 1 !important; +} +.customeTheme { + color: #ff6e00 !important; + background-color: orange !important; +} +.customeTheme.place-top:after { + border-top-color: orange !important; + border-top-style: solid !important; + border-top-width: 6px !important; +} diff --git a/example/src/index.js b/example/src/index.js index 98c31e541..f68e49dad 100755 --- a/example/src/index.js +++ b/example/src/index.js @@ -1,3 +1,4 @@ +import "./index.css"; import React from 'react' import ReactDOM from 'react-dom' import ReactTooltip from 'react-tooltip'