ffr-components/es/panel/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-panel
    .fd-panel__header
        .fd-panel__title
        .fd-panel__actions
    .fd-panel__footer
*/.fd-panel{--fd-panel-background-color:var(--fd-color-background-2,#fff);--fd-panel-border-color:var(--fd-color-neutral-2,#eeeeef);--fd-panel-box-shadow-color:var(--fd-color-neutral-2,#eeeeef);--fd-panel-divider-color:var(--fd-panel-border-color,var(--fd-color-neutral-2,#eeeeef));--fd-panel-border-width:0;--fd-panel-title-color:var(--fd-color-text-1,#32363a);background-color:#fff;border-radius:4px;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;-webkit-box-shadow:0 5px 20px 0 var(--fd-panel-box-shadow-color,var(--fd-color-neutral-2,#eeeeef));box-shadow:0 5px 20px 0 var(--fd-panel-box-shadow-color,var(--fd-color-neutral-2,#eeeeef))}.hcb .fd-panel{color:#fff}.hcb .fd-panel,.hcw .fd-panel{background-color:#fff;border-width:0;border-color:transparent}.hcw .fd-panel{color:#000}.fd-panel:after{content:"";display:table;clear:both}.fd-panel:after,.fd-panel:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel__header{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;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;border:0;min-height:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid #eeeeef;padding:16px 24px;font-size:12px;line-height:1.33333;font-weight:400;color:#6a6d70}.hcb .fd-panel__header{border-bottom-color:#eeeeef;color:#fff}.hcw .fd-panel__header{border-bottom-color:#eeeeef;color:#000}.fd-panel__header:after,.fd-panel__header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel__head{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}.hcb .fd-panel__head{color:#fff}.hcw .fd-panel__head{color:#000}.fd-panel__head:after,.fd-panel__head:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel__title{font-size:14px;line-height:1.42857;font-family:"72",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;border:0;font-size:16px;line-height:1.25;font-weight:400;-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0;color:#32363a}.hcb .fd-panel__title{color:#fff;color:#32363a}.hcw .fd-panel__title{color:#000;color:#32363a}.fd-panel__title:after,.fd-panel__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel__description{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;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;border:0;color:#6a6d70;font-size:12px;line-height:1.33333;font-weight:400;margin:4px 0 0}.hcb .fd-panel__description{color:#fff}.hcw .fd-panel__description{color:#000}.fd-panel__description:after,.fd-panel__description:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel__actions{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;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;border:0;color:#6a6d70;font-size:12px;line-height:1.33333;font-weight:400;margin:-4px 0 -4px auto}.hcb .fd-panel__actions{color:#fff}.hcw .fd-panel__actions{color:#000}.fd-panel__actions:after,.fd-panel__actions:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel__actions[dir=rtl],[dir=rtl] .fd-panel__actions{margin-right:auto;margin-left:0}.fd-panel__filters{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;margin:0;border:0;padding:12px 24px;border-bottom:1px solid #eeeeef;-webkit-transition:all .15s ease-in;transition:all .15s ease-in}.hcb .fd-panel__filters{color:#fff;border-bottom-color:#eeeeef}.hcw .fd-panel__filters{color:#000;border-bottom-color:#eeeeef}.fd-panel__filters:after,.fd-panel__filters:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel__filters.is-hidden{padding-top:0;padding-bottom:0;max-height:0;overflow:hidden}.fd-panel__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;margin:0;border:0;padding:16px 24px}.hcb .fd-panel__body{color:#fff}.hcw .fd-panel__body{color:#000}.fd-panel__body:after,.fd-panel__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-panel__body--bleed,.fd-panel__body--full-bleed{padding:0}.fd-panel__body>:first-child{margin-top:0}.fd-panel__body>:last-child{margin-bottom:0}.fd-panel__footer{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;margin:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:16px 24px;border-top:1px solid #eeeeef}.hcb .fd-panel__footer{color:#fff;border-top-color:#eeeeef}.hcw .fd-panel__footer{color:#000;border-top-color:#eeeeef}.fd-panel__footer:after,.fd-panel__footer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.enhancedPanel{height:100%}.enhancedPanel .fd-panel{display:-webkit-box;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;overflow-x:hidden;overflow-y:auto}.enhancedPanel .fd-panel .fd-panel__header{position:relative;height:77px;min-height:77px;-webkit-transition:all .15s ease-in;transition:all .15s ease-in}.enhancedPanel .fd-panel .fd-panel__lower{overflow-x:hidden;overflow-y:auto}.enhancedPanel .fd-panel.shrink .fd-panel__header{height:44px;min-height:44px}.enhancedPanel .fd-panel.shrink .fd-panel__actions,.enhancedPanel .fd-panel.shrink .fd-panel__description{display:none}.enhancedPanel .fd-panel__filters{position:relative}.enhancedPanel .fd-panel .pullUp{position:absolute;width:36px;height:20px;border-radius:6px;border:solid #d9d9d9;border-width:1px 1px 2px;text-align:center;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-10px;z-index:1;background:#fff}.hcb .enhancedPanel .fd-panel .pullUp{border:solid #fff;border-width:1px 1px 2px;background:#000}.hcw .enhancedPanel .fd-panel .pullUp{border:solid #000;border-width:1px 1px 2px;background:#fff}.enhancedPanel .fd-panel .pullUp span{position:absolute;left:0;right:0;margin:auto;top:1px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.enhancedPanel .fd-panel .dropDown:focus,.enhancedPanel .fd-panel .pullUp:focus{outline:1px dashed #0a6ed1}.hcb .enhancedPanel .fd-panel .dropDown:focus,.hcb .enhancedPanel .fd-panel .pullUp:focus{outline:1px dashed #fff}.hcw .enhancedPanel .fd-panel .dropDown:focus,.hcw .enhancedPanel .fd-panel .pullUp:focus{outline:1px dashed #000}.enhancedPanel .fd-panel .dropDown:before,.fd-panel .pullUp span:before{line-height:0}.enhancedPanel .fd-panel .sap-icon--dropdown{position:absolute;right:24px;cursor:pointer;color:#3a6aa8}.hcb .enhancedPanel .fd-panel .sap-icon--dropdown{color:#fff}.hcw .enhancedPanel .fd-panel .sap-icon--dropdown{color:#000}