@livelybone/react-popper
Version:
A wrap of react-popper, achieved visible controlling via click/hover event or ref.show/ref.hide/ref.toggle
2 lines (1 loc) • 2.9 kB
CSS
.react-popper{z-index:1000;border-radius:2px;background:#fff;box-shadow:0 1px 5px #c6d6e5}.react-popper.force-show{display:block }.react-popper.show{display:block}.react-popper.hide{display:none}.react-popper.black{background:#0a1324;color:#fff}.react-popper.black[data-placement^='top'] .arrow{position:absolute;bottom:-6px;width:0;height:0;border:6px solid transparent;border-bottom:0;border-top-color:#0a1324}.react-popper.black[data-placement^='top'] .arrow:before{content:none}.react-popper.black[data-placement^='bottom'] .arrow{position:absolute;top:-6px;width:0;height:0;border:6px solid transparent;border-top:0;border-bottom-color:#0a1324}.react-popper.black[data-placement^='bottom'] .arrow:before{content:none}.react-popper.black[data-placement^='left'] .arrow{position:absolute;right:-6px;width:0;height:0;border:6px solid transparent;border-right:0;border-left-color:#0a1324}.react-popper.black[data-placement^='left'] .arrow:before{content:none}.react-popper.black[data-placement^='right'] .arrow{position:absolute;left:-6px;width:0;height:0;border:6px solid transparent;border-left:0;border-right-color:#0a1324}.react-popper.black[data-placement^='right'] .arrow:before{content:none}.react-popper.tool-tip{padding:5px 15px}.react-popper[data-placement^='top']{margin-bottom:10px}.react-popper[data-placement^='top'] .arrow{position:absolute;bottom:-6px;width:0;height:0;border:6px solid transparent;border-bottom:0;border-top-color:#e9eff5}.react-popper[data-placement^='top'] .arrow:before{content:'';position:absolute;bottom:-6px;width:0;height:0;border:6px solid transparent;border-bottom:0;border-top-color:#fff;left:-6px;bottom:1px}.react-popper[data-placement^='bottom']{margin-top:10px}.react-popper[data-placement^='bottom'] .arrow{position:absolute;top:-6px;width:0;height:0;border:6px solid transparent;border-top:0;border-bottom-color:#e9eff5}.react-popper[data-placement^='bottom'] .arrow:before{content:'';position:absolute;top:-6px;width:0;height:0;border:6px solid transparent;border-top:0;border-bottom-color:#fff;left:-6px;top:1px}.react-popper[data-placement^='left']{margin-right:10px}.react-popper[data-placement^='left'] .arrow{position:absolute;right:-6px;width:0;height:0;border:6px solid transparent;border-right:0;border-left-color:#e9eff5}.react-popper[data-placement^='left'] .arrow:before{content:'';position:absolute;right:-6px;width:0;height:0;border:6px solid transparent;border-right:0;border-left-color:#fff;top:-6px;right:1px}.react-popper[data-placement^='right']{margin-left:10px}.react-popper[data-placement^='right'] .arrow{position:absolute;left:-6px;width:0;height:0;border:6px solid transparent;border-left:0;border-right-color:#e9eff5}.react-popper[data-placement^='right'] .arrow:before{content:'';position:absolute;left:-6px;width:0;height:0;border:6px solid transparent;border-left:0;border-right-color:#fff;top:-6px;left:1px}