@aneves/react-flyout
Version:
Flyout React Component
2 lines (1 loc) • 3.86 kB
CSS
.flyout-clearfix:before,.flyout.flyout--dropdown .flyout__wrapper>ul>li:before,.flyout-clearfix:after,.flyout.flyout--dropdown .flyout__wrapper>ul>li:after{content:"";display:table}.flyout-clearfix:after,.flyout.flyout--dropdown .flyout__wrapper>ul>li:after{clear:both}.has-flyout--fixed{background:#313941;position:fixed;overflow:hidden}.has-flyout{position:relative;display:inline-block}.flyout{z-index:7000;position:absolute;box-sizing:border-box;padding:1px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,0.075);text-align:left;font-size:.9rem;line-height:1.4}.flyout .flyout__wrapper{overflow:auto;overflow-x:hidden;height:auto;padding:15px}.flyout.flyout--light{background:#fff;border:1px solid #ddd;color:#313941}.flyout.flyout--dark{background:#313941;color:#fff}.flyout.flyout--fixed{z-index:7000;position:fixed;left:0;width:100% ;height:100% }.flyout.flyout--fixed .flyout__wrapper{height:calc(100% - 45px);max-height:none }.flyout.flyout--menu{border-radius:0}.flyout.flyout--tooltip{width:175px;background:#333;color:#fff}.flyout.flyout--tooltip .flyout__wrapper{padding:8px}.flyout.flyout--tooltip .flyout__wrapper p{margin:0;font-size:.8rem;line-height:1.2}.flyout.flyout--tooltip.flyout--top-right .flyout__arrow,.flyout.flyout--tooltip.flyout--top-left .flyout__arrow,.flyout.flyout--tooltip.flyout--top-middle .flyout__arrow{border-top-color:#313941}.flyout.flyout--tooltip.flyout--right-top .flyout__arrow,.flyout.flyout--tooltip.flyout--right-bottom .flyout__arrow,.flyout.flyout--tooltip.flyout--right-middle .flyout__arrow{border-right-color:#313941}.flyout.flyout--tooltip.flyout--bottom-right .flyout__arrow,.flyout.flyout--tooltip.flyout--bottom-left .flyout__arrow,.flyout.flyout--tooltip.flyout--bottom-middle .flyout__arrow{border-bottom-color:#313941}.flyout.flyout--tooltip.flyout--left-top .flyout__arrow,.flyout.flyout--tooltip.flyout--left-bottom .flyout__arrow,.flyout.flyout--tooltip.flyout--left-middle .flyout__arrow{border-left-color:#313941}.flyout.flyout--tooltip .flyout__arrow{position:absolute;border:5px solid transparent}.flyout.flyout--dropdown{z-index:5000}.flyout.flyout--dropdown .flyout__wrapper>ul{list-style:none;margin:0;padding:0}.flyout.flyout--dropdown .flyout__wrapper>ul>li{width:100%;margin:0;padding:0.7rem 0;border-bottom:1px solid #ddd}.flyout.flyout--dropdown .flyout__wrapper>ul>li:first-child{padding-top:0}.flyout.flyout--dropdown .flyout__wrapper>ul>li:last-child{padding-bottom:0;border-bottom:none}.flyout.flyout--dropdown .flyout__wrapper>ul>li>a{display:block}.flyout.flyout--dropdown .flyout__wrapper>ul>li>a p{margin:0;color:#313941}.flyout.flyout--dropdown.flyout--dropdown-has-icons-right .flyout__wrapper>ul>li>a,.flyout.flyout--dropdown.flyout--dropdown-has-icons-left .flyout__wrapper>ul>li>a{position:relative}.flyout.flyout--dropdown.flyout--dropdown-has-icons-right .flyout__wrapper>ul>li>a>i,.flyout.flyout--dropdown.flyout--dropdown-has-icons-left .flyout__wrapper>ul>li>a>i{font-size:18px}.flyout.flyout--dropdown.flyout--dropdown-has-icons-right .flyout__wrapper>ul>li>a>i:first-child,.flyout.flyout--dropdown.flyout--dropdown-has-icons-right .flyout__wrapper>ul>li>a>i:last-child,.flyout.flyout--dropdown.flyout--dropdown-has-icons-left .flyout__wrapper>ul>li>a>i:first-child,.flyout.flyout--dropdown.flyout--dropdown-has-icons-left .flyout__wrapper>ul>li>a>i:last-child{position:absolute;top:2px;width:25px;text-align:center}.flyout.flyout--dropdown.flyout--dropdown-has-icons-right .flyout__wrapper>ul>li>a{padding-right:30px}.flyout.flyout--dropdown.flyout--dropdown-has-icons-right .flyout__wrapper>ul>li>a>i:last-child{right:-5px}.flyout.flyout--dropdown.flyout--dropdown-has-icons-left .flyout__wrapper>ul>li>a{padding-left:25px}.flyout.flyout--dropdown.flyout--dropdown-has-icons-left .flyout__wrapper>ul>li>a>i:first-child{left:-5px}