ffr-components
Version:
Fiori styled UI components
8 lines • 7.05 kB
CSS
/*!
* 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-status-label+(--available, --away, --busy, --offline, --success, --warning, --error)
*/.fd-status-label.fd-status-label--available,.fd-status-label.fd-status-label--away,.fd-status-label.fd-status-label--busy,.fd-status-label.fd-status-label--offline{padding-left:20px}.fd-status-label.fd-status-label--available:before,.fd-status-label.fd-status-label--away:before,.fd-status-label.fd-status-label--busy:before,.fd-status-label.fd-status-label--offline:before{position:absolute;z-index:1;background-repeat:no-repeat;content:"";line-height:1}.fd-status-label.fd-status-label--available:after,.fd-status-label.fd-status-label--away:after,.fd-status-label.fd-status-label--busy:after,.fd-status-label.fd-status-label--offline:after{width:16px;height:16px;display:inline-block;content:"";line-height:1;border-radius:50%;position:absolute;top:0;left:0;background-color:#51555a}.hcb .fd-status-label.fd-status-label--available:after,.hcb .fd-status-label.fd-status-label--away:after,.hcb .fd-status-label.fd-status-label--busy:after,.hcb .fd-status-label.fd-status-label--offline:after,.hcw .fd-status-label.fd-status-label--available:after,.hcw .fd-status-label.fd-status-label--away:after,.hcw .fd-status-label.fd-status-label--busy:after,.hcw .fd-status-label.fd-status-label--offline:after{background-color:#51555a}.fd-status-label.fd-status-label--available[dir=rtl],.fd-status-label.fd-status-label--away[dir=rtl],.fd-status-label.fd-status-label--busy[dir=rtl],.fd-status-label.fd-status-label--offline[dir=rtl],[dir=rtl] .fd-status-label.fd-status-label--available,[dir=rtl] .fd-status-label.fd-status-label--away,[dir=rtl] .fd-status-label.fd-status-label--busy,[dir=rtl] .fd-status-label.fd-status-label--offline{padding-left:0;padding-right:20px}.fd-status-label.fd-status-label--available[dir=rtl]:before,.fd-status-label.fd-status-label--away[dir=rtl]:before,.fd-status-label.fd-status-label--busy[dir=rtl]:before,.fd-status-label.fd-status-label--offline[dir=rtl]:before,[dir=rtl] .fd-status-label.fd-status-label--available:before,[dir=rtl] .fd-status-label.fd-status-label--away:before,[dir=rtl] .fd-status-label.fd-status-label--busy:before,[dir=rtl] .fd-status-label.fd-status-label--offline:before{left:auto}.fd-status-label.fd-status-label--available[dir=rtl]:after,.fd-status-label.fd-status-label--away[dir=rtl]:after,.fd-status-label.fd-status-label--busy[dir=rtl]:after,.fd-status-label.fd-status-label--offline[dir=rtl]:after,[dir=rtl] .fd-status-label.fd-status-label--available:after,[dir=rtl] .fd-status-label.fd-status-label--away:after,[dir=rtl] .fd-status-label.fd-status-label--busy:after,[dir=rtl] .fd-status-label.fd-status-label--offline:after{left:auto;right:0}.fd-status-label{--fd-status-label-color:var(--fd-color-text-2);--fd-status-label-icon-background-color:var(--fd-color-text-2);position:relative;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;color:#51555a}.hcb .fd-status-label{color:#fff;color:#51555a}.hcw .fd-status-label{color:#000;color:#51555a}.fd-status-label:after,.fd-status-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-label:before{vertical-align:-8%;width:20px;height:16px;line-height:1}.fd-status-label.fd-status-label--success{--fd-status-label-color:var(--fd-color-positive);color:#0a7e3e}.hcb .fd-status-label.fd-status-label--success,.hcw .fd-status-label.fd-status-label--success{color:#0a7e3e}.fd-status-label.fd-status-label--warning{--fd-status-label-color:var(--fd-color-alert);color:#e9730c}.hcb .fd-status-label.fd-status-label--warning,.hcw .fd-status-label.fd-status-label--warning{color:#e9730c}.fd-status-label.fd-status-label--error{--fd-status-label-color:var(--fd-color-negative);color:#b00}.hcb .fd-status-label.fd-status-label--error,.hcw .fd-status-label.fd-status-label--error{color:#b00}.fd-status-label.fd-status-label--available{--fd-status-label-icon-background-color:var(--fd-color-positive)}.fd-status-label.fd-status-label--available:before{width:7px;height:7px;top:4px;left:4px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDUuOSI+PHBhdGggZD0iTTIuNyAzLjJMNC4xLjRDNC40IDAgNS0uMSA1LjUuMWMuNC4zLjYuOC40IDEuMmwtMiA0Yy0uMy42LS45LjgtMS4zLjUtLjEgMC0uMi0uMS0uMy0uMmwtMi0yYy0uNC0uNC0uNC0xIDAtMS40LjQtLjQgMS0uNCAxLjQgMGwxIDF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)}.fd-status-label.fd-status-label--available:after,.hcb .fd-status-label.fd-status-label--available:after,.hcw .fd-status-label.fd-status-label--available:after{background-color:#0a7e3e}.fd-status-label.fd-status-label--available[dir=rtl]:before,[dir=rtl] .fd-status-label.fd-status-label--available:before{right:4px}.fd-status-label.fd-status-label--away{--fd-status-label-icon-background-color:var(--fd-color-alert)}.fd-status-label.fd-status-label--away:before{width:6px;height:6px;top:4px;left:6px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDUiPjxwYXRoIGQ9Ik0xIDVjLS42IDAtMS0uNC0xLTFWMWMwLS42LjQtMSAxLTFzMSAuNCAxIDF2MmgyYy42IDAgMSAuNCAxIDFzLS40IDEtMSAxSDF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)}.fd-status-label.fd-status-label--away:after,.hcb .fd-status-label.fd-status-label--away:after,.hcw .fd-status-label.fd-status-label--away:after{background-color:#e9730c}.fd-status-label.fd-status-label--away[dir=rtl]:before,[dir=rtl] .fd-status-label.fd-status-label--away:before{right:4px}.fd-status-label.fd-status-label--busy{--fd-status-label-icon-background-color:var(--fd-color-negative)}.fd-status-label.fd-status-label--busy:before{width:4px;height:4px;top:6px;left:6px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDQiPjxwYXRoIGQ9Ik00IDJjMCAxLjEtLjkgMi0yIDJzLTItLjktMi0yIC45LTIgMi0yIDIgLjkgMiAyIiBmaWxsPSIjZmZmIi8+PC9zdmc+)}.fd-status-label.fd-status-label--busy:after,.hcb .fd-status-label.fd-status-label--busy:after,.hcw .fd-status-label.fd-status-label--busy:after{background-color:#b00}.fd-status-label.fd-status-label--busy[dir=rtl]:before,[dir=rtl] .fd-status-label.fd-status-label--busy:before{right:6px}.fd-status-label.fd-status-label--offline:before{width:8px;height:8px;top:4px;left:4px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjkgNy45Ij48cGF0aCBkPSJNNy45IDRjMCAyLjItMS44IDQtNCA0UzAgNi4yIDAgNHMxLjgtNCA0LTQgMy45IDEuOCAzLjkgNCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==)}.fd-status-label.fd-status-label--offline[dir=rtl]:before,[dir=rtl] .fd-status-label.fd-status-label--offline:before{right:4px}