react-nested-popper
Version:
A react library based on popper.js that supports nested poppers and proper context binding.
1 lines • 4.06 kB
Source Map (JSON)
{"version":3,"file":"demo.css","mappings":"AAAA,8BACE,eAGF,+BACE,kBACA,YAEA,wFACE,YAGF,2FACE,SAGF,yFACE,WAGF,0FACE,UAIA,+HACE,WACA,kBACA,UACA,WAGF,mEACE,WACA,wBAIS,yLACA,yLACA,yLACA,yLACA,yL;AC1Cf,qCACE,sBACA,kBACA,YAEA,gBADA,aAEA,WAEA,yEACE,oBAGF,mEACE,iBAGF,qEACE,aAEA,mNACE,YAGF,yGACE,kBAGF,0GACE,gBACA,iB;AD7BN,sBACE,eAGF,uBACE,kBACA,YAEA,wEACE,YAGF,2EACE,SAGF,yEACE,WAGF,0EACE,UAIA,+FACE,WACA,kBACA,UACA,WAGF,mDACE,WACA,wBAIS,iJACA,iJACA,iJACA,iJACA,iJEvCb,EACE,sBAGF,gBACE,yBACA,WACA,YACA,SACA,WAGF,WACE,UAGF,KACE,uCACA,eACA,UAGF,OACE,yBACA,sBACA,kBACA,WACA,eACA,gBACA,aACA,gBACA,gEAGF,WACE,gBAGF,EACE,cACA,qBAIJ,mBAGE,gBAGF,0CALE,aACA,WASA,CALF,uBACE,sBAEA,sBACA,aACA,CAEA,4CACE,0CACA,eACA,gBACA,uBAGF,8CACE,WACA,iBAEA,mEACE,yBAKN,2BACE,mBACA,aACA,sBACA,YACA,YACA,YACA,gBACA,cACA,oBAGF,wBACE,aACA,6BACA,oBAEA,4CACE,iBACA,Y","sources":["webpack://react-nested-popper/./demo/components/popperThing.scss","webpack://react-nested-popper/./demo/components/displayBlock.scss","webpack://react-nested-popper/./demo/app.scss"],"sourcesContent":[".target {\n display: inline;\n}\n\n.content {\n border-radius: 8px;\n padding: 6px;\n\n &[data-popper-placement^='top'] > .arrow {\n bottom: -4px;\n }\n\n &[data-popper-placement^='bottom'] > .arrow {\n top: -4px;\n }\n\n &[data-popper-placement^='left'] > .arrow {\n right: -4px;\n }\n\n &[data-popper-placement^='right'] > .arrow {\n left: -4px;\n }\n\n .arrow {\n &, &::before {\n height: 8px;\n position: absolute;\n width: 8px;\n z-index: -1;\n }\n\n &::before {\n content: '';\n transform: rotate(45deg);\n }\n }\n\n &.nested-0 { &, .arrow::before { background-color: #FFCC65; } }\n &.nested-1 { &, .arrow::before { background-color: #E5FF65; } }\n &.nested-2 { &, .arrow::before { background-color: #98FF65; } }\n &.nested-3 { &, .arrow::before { background-color: #65FFCC; } }\n &.nested-4 { &, .arrow::before { background-color: #FFA78C; } }\n}\n",".displayBlock {\n background-color: #ddd;\n border-radius: 8px;\n margin: 20px;\n padding: 12px;\n max-width: 600px;\n width: 100%;\n\n .description {\n padding-bottom: 12px;\n }\n\n .notes {\n padding-top: 12px \n }\n \n .content {\n display: flex;\n\n .leftContent, .rightContent {\n flex-grow: 1;\n }\n\n .leftContent {\n padding-right: 6px;\n }\n\n .rightContent {\n overflow-x: auto;\n padding-left: 6px;\n }\n }\n}\n","@import './components/popperThing';\n\n:global {\n * {\n box-sizing: border-box;\n }\n\n html, body, #root {\n background-color: #efefef;\n color: #333;\n height: 100%;\n margin: 0;\n width: 100%;\n }\n\n html, #root {\n padding: 0;\n }\n\n body {\n font-family: Helvetica, Arial, sans-serif;\n font-size: 14px;\n padding: 0px;\n }\n\n button {\n background-color: #65E5FF;\n border: 1px solid #333;\n border-radius: 3px;\n color: #333;\n cursor: pointer;\n margin-top: 20px;\n outline: none;\n padding: 4px 8px;\n user-select: none;\n }\n\n h1, h2, h3, p {\n margin-bottom: 0;\n }\n\n a {\n color: #2f78fb;\n text-decoration: none;\n }\n}\n\n.app {\n display: flex;\n height: 100%;\n overflow: hidden;\n}\n\n.sidebar {\n background-color: #dddddd;\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n height: 100%;\n\n .title {\n font-family: 'Courier New', Courier, monospace;\n font-size: 16px;\n font-weight: 600;\n padding: 20px 10px 10px 10px;\n }\n\n .navItem {\n color: #333;\n padding: 6px 10px;\n\n &.active {\n background-color: #efefef;\n }\n }\n}\n\n.mainContent {\n align-items: center;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n height: 100%;\n margin: auto;\n max-width: 900px;\n overflow: auto;\n padding: 0 20px 20px 20px;\n}\n\n.libLinks {\n display: flex;\n justify-content: space-evenly;\n padding: 0 10px 10px 10px;\n\n &.intro {\n padding-top: 10px;\n width: 200px;\n }\n}\n"],"names":[],"sourceRoot":""}