ffr-components/es/popover/style.css

Fiori styled UI components

/*!
 * Fundamental Styles v0.3.0
 * Copyright (c) 2019 SAP SE or an SAP affiliate company.
 * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/master/LICENSE)
 */.fd-popover{font-size:14px;line-height:1.42857;color:#32363a;font-family:"72",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;position:relative;display:inline-block}.hcb .fd-popover{color:#fff}.hcw .fd-popover{color:#000}.fd-popover:after,.fd-popover:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-popover__control{font-size:14px;line-height:1.42857;color:#32363a;font-family:"72",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;border:0;position:relative;margin:0;cursor:pointer}.hcb .fd-popover__control{color:#fff}.hcw .fd-popover__control{color:#000}.fd-popover__control:after,.fd-popover__control:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-popover__body{font-size:14px;line-height:1.42857;color:#32363a;font-family:"72",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:1px solid #89919a;position:absolute;white-space:nowrap;z-index:1000;border-radius:4px;background-color:#fff;-webkit-box-shadow:0 5px 20px 0 #d9d9d9,0 2px 8px 0 #eeeeef;box-shadow:0 5px 20px 0 #d9d9d9,0 2px 8px 0 #eeeeef;opacity:1;visibility:visible;-webkit-transition:all 125ms;transition:all 125ms;left:0;top:120%;-webkit-transform:translateY(0);transform:translateY(0)}.hcb .fd-popover__body{color:#fff;background-color:#000;-webkit-box-shadow:0 5px 20px 0 #fff,0 2px 8px 0 #000;box-shadow:0 5px 20px 0 #fff,0 2px 8px 0 #000}.hcw .fd-popover__body{color:#000;background-color:#fff;-webkit-box-shadow:0 5px 20px 0 #000,0 2px 8px 0 #fff;box-shadow:0 5px 20px 0 #000,0 2px 8px 0 #fff}.fd-popover__body:after,.fd-popover__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-popover__body[dir=rtl],[dir=rtl] .fd-popover__body{left:auto;right:-3px}.fd-popover__body[dir=rtl]:after,.fd-popover__body[dir=rtl]:before,[dir=rtl] .fd-popover__body:after,[dir=rtl] .fd-popover__body:before{right:10px}.fd-popover__body:before{height:0;width:0;border-top-style:solid;border-top-width:0;border-bottom:8px solid #fff;border-left:6.5px solid transparent;border-right:6.5px solid transparent;content:"";position:absolute;top:-8px;left:10px;z-index:1002}.hcb .fd-popover__body:before{border-bottom-color:#000}.hcw .fd-popover__body:before{border-bottom-color:#fff}.fd-popover__body:after{height:0;width:0;border-top-style:solid;border-top-width:0;border-bottom:8px solid #89919a;border-left:6.5px solid transparent;border-right:6.5px solid transparent;content:"";position:absolute;top:-9px;left:10px;z-index:1001}.hcb .fd-popover__body:after{border-bottom-color:#000}.hcw .fd-popover__body:after{border-bottom-color:#fff}.fd-popover__body--left{right:auto;left:-3px}.fd-popover__body--left[dir=rtl],[dir=rtl] .fd-popover__body--left{right:-3px;left:auto}.fd-popover__body--left[dir=rtl]:after,.fd-popover__body--left[dir=rtl]:before,[dir=rtl] .fd-popover__body--left:after,[dir=rtl] .fd-popover__body--left:before{right:14px;left:unset}.fd-popover__body--left:after,.fd-popover__body--left:before{left:10px}.fd-popover__body--right{left:auto;right:-3px}.fd-popover__body--right[dir=rtl],[dir=rtl] .fd-popover__body--right{right:auto;left:-3px}.fd-popover__body--right[dir=rtl]:after,.fd-popover__body--right[dir=rtl]:before,[dir=rtl] .fd-popover__body--right:after,[dir=rtl] .fd-popover__body--right:before{left:14px;right:unset}.fd-popover__body--right:after,.fd-popover__body--right:before{left:auto;right:10px}.fd-popover__body--no-arrow{top:100%}.fd-popover__body--no-arrow:after,.fd-popover__body--no-arrow:before{display:none}.fd-popover__body--no-arrow.fd-popover__body--left{left:0}.fd-popover__body--no-arrow.fd-popover__body--left[dir=rtl],.fd-popover__body--no-arrow.fd-popover__body--right,[dir=rtl] .fd-popover__body--no-arrow.fd-popover__body--left{right:0}.fd-popover__body--no-arrow.fd-popover__body--right[dir=rtl],[dir=rtl] .fd-popover__body--no-arrow.fd-popover__body--right{left:0}.fd-popover__body.is-hidden,.fd-popover__body[aria-hidden=true]{z-index:1;opacity:0;visibility:hidden;-webkit-transform:translateY(-15px);transform:translateY(-15px)}.fd-popover__popper{border:1px solid #89919a;position:absolute;white-space:nowrap;z-index:1000;border-radius:4px;background-color:#fff;-webkit-box-shadow:0 5px 20px 0 #d9d9d9,0 2px 8px 0 #eeeeef;box-shadow:0 5px 20px 0 #d9d9d9,0 2px 8px 0 #eeeeef;opacity:1}.hcb .fd-popover__popper{background-color:#000;-webkit-box-shadow:0 5px 20px 0 #fff,0 2px 8px 0 #000;box-shadow:0 5px 20px 0 #fff,0 2px 8px 0 #000}.hcw .fd-popover__popper{background-color:#fff;-webkit-box-shadow:0 5px 20px 0 #000,0 2px 8px 0 #fff;box-shadow:0 5px 20px 0 #000,0 2px 8px 0 #fff}.fd-popover__popper--no-arrow{margin:0!important}.fd-popover__popper--no-arrow .fd-popover__arrow{display:none}.fd-popover__popper .fd-popover__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent}.fd-popover__popper .fd-popover__arrow:after{position:absolute;content:"";border-style:solid;border-color:transparent}.fd-popover__popper[x-out-of-boundaries]{display:none}.fd-popover__popper[x-placement^=top]{margin-bottom:8px}.fd-popover__popper[x-placement^=top] .fd-popover__arrow{bottom:-8px;margin:0 6.5px;border-width:8px 6.5px 0;border-top-color:#89919a}.hcb .fd-popover__popper[x-placement^=top] .fd-popover__arrow{border-top-color:#000}.hcw .fd-popover__popper[x-placement^=top] .fd-popover__arrow{border-top-color:#fff}.fd-popover__popper[x-placement^=top] .fd-popover__arrow:after{bottom:1px;margin:0 -6.5px;border-width:8px 6.5px 0;border-top-color:#fff}.hcb .fd-popover__popper[x-placement^=top] .fd-popover__arrow:after{border-top-color:#000}.hcw .fd-popover__popper[x-placement^=top] .fd-popover__arrow:after{border-top-color:#fff}.fd-popover__popper[x-placement^=bottom]{margin-top:8px}.fd-popover__popper[x-placement^=bottom] .fd-popover__arrow{top:-8px;margin:0 6.5px;border-width:0 6.5px 8px;border-bottom-color:#89919a}.hcb .fd-popover__popper[x-placement^=bottom] .fd-popover__arrow{border-bottom-color:#000}.hcw .fd-popover__popper[x-placement^=bottom] .fd-popover__arrow{border-bottom-color:#fff}.fd-popover__popper[x-placement^=bottom] .fd-popover__arrow:after{top:1px;margin:0 -6.5px;border-width:0 6.5px 8px;border-bottom-color:#fff}.hcb .fd-popover__popper[x-placement^=bottom] .fd-popover__arrow:after{border-bottom-color:#000}.hcw .fd-popover__popper[x-placement^=bottom] .fd-popover__arrow:after{border-bottom-color:#fff}.fd-popover__popper[x-placement^=left]{margin-right:8px}.fd-popover__popper[x-placement^=left] .fd-popover__arrow{right:-8px;margin:6.5px 0;border-width:6.5px 0 6.5px 8px;border-left-color:#89919a}.hcb .fd-popover__popper[x-placement^=left] .fd-popover__arrow{border-left-color:#000}.hcw .fd-popover__popper[x-placement^=left] .fd-popover__arrow{border-left-color:#fff}.fd-popover__popper[x-placement^=left] .fd-popover__arrow:after{right:1px;margin:-6.5px 0;border-width:6.5px 0 6.5px 8px;border-left-color:#fff}.hcb .fd-popover__popper[x-placement^=left] .fd-popover__arrow:after{border-left-color:#000}.hcw .fd-popover__popper[x-placement^=left] .fd-popover__arrow:after{border-left-color:#fff}.fd-popover__popper[x-placement^=right]{margin-left:8px}.fd-popover__popper[x-placement^=right] .fd-popover__arrow{left:-8px;margin:6.5px 0;border-width:6.5px 8px 6.5px 0;border-right-color:#89919a}.hcb .fd-popover__popper[x-placement^=right] .fd-popover__arrow{border-right-color:#000}.hcw .fd-popover__popper[x-placement^=right] .fd-popover__arrow{border-right-color:#fff}.fd-popover__popper[x-placement^=right] .fd-popover__arrow:after{left:1px;margin:-6.5px 0;border-width:6.5px 8px 6.5px 0;border-right-color:#fff}.hcb .fd-popover__popper[x-placement^=right] .fd-popover__arrow:after{border-right-color:#000}.hcw .fd-popover__popper[x-placement^=right] .fd-popover__arrow:after{border-right-color:#fff}