ffr-components/es/input-group/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-input-group+(--inline)
    .fd-input-group__addon+(--button)
*/.fd-input-group{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;display:-webkit-box;display:-ms-flexbox;display:flex}.hcb .fd-input-group{color:#fff}.hcw .fd-input-group{color:#000}.fd-input-group:after,.fd-input-group:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-input-group>:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.fd-input-group>:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.fd-input-group>:not(:first-child):not(:last-child){border-radius:0}.fd-input-group>[dir=rtl]:first-child,[dir=rtl] .fd-input-group>:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.fd-input-group>[dir=rtl]:last-child,[dir=rtl] .fd-input-group>:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.fd-input-group .fd-input-group__input{width:100%;z-index:1}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group--inline{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom}.fd-input-group__addon{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;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:auto;color:#6a6d70;padding:0 12px;border:1px solid #89919a;background-color:#fafafa;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:4px}.hcb .fd-input-group__addon{color:#fff;border-color:#fff;background-color:#000}.hcw .fd-input-group__addon{color:#000;border-color:#000;background-color:#fff}.fd-input-group__addon:after,.fd-input-group__addon:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon:first-child{margin-right:-1px}.fd-input-group__addon:last-child{margin-left:-1px}.fd-input-group__addon[dir=rtl]:first-child,[dir=rtl] .fd-input-group__addon:first-child{margin-left:-1px;margin-right:0}.fd-input-group__addon[dir=rtl]:last-child,[dir=rtl] .fd-input-group__addon:last-child{margin-right:-1px;margin-left:0}.fd-input-group__addon--button{border:none;padding:0}.fd-input-group__addon--button .fd-input-group__button{height:100%;max-height:100%;border:1px solid #89919a;background-color:#fafafa}.hcb .fd-input-group__addon--button .fd-input-group__button{border-color:#fff;background-color:#000}.hcw .fd-input-group__addon--button .fd-input-group__button{border-color:#000;background-color:#fff}.fd-input-group__addon--button .fd-input-group__button:nth-child(n+1){margin:0}.fd-input-group__addon--button:first-child>*{margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}.fd-input-group__addon--button:first-child>:first-child:not(:last-child){border-bottom-left-radius:0}.fd-input-group__addon--button:first-child>:last-child:not(:first-child){border-top-left-radius:0;margin-top:-1px}.fd-input-group__addon--button:last-child>*{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.fd-input-group__addon--button:last-child>:first-child:not(:last-child){border-bottom-right-radius:0}.fd-input-group__addon--button:last-child>:last-child:not(:first-child){border-top-right-radius:0;margin-top:-1px}.fd-input-group__addon--button[dir=rtl]:first-child>*,[dir=rtl] .fd-input-group__addon--button:first-child>*{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;margin-right:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.fd-input-group__addon--button[dir=rtl]:first-child>:first-child:not(:last-child),[dir=rtl] .fd-input-group__addon--button:first-child>:first-child:not(:last-child){border-bottom-right-radius:0}.fd-input-group__addon--button[dir=rtl]:first-child>:last-child:not(:first-child),[dir=rtl] .fd-input-group__addon--button:first-child>:last-child:not(:first-child){border-top-right-radius:0;margin-top:-1px}.fd-input-group__addon--button[dir=rtl]:last-child>*,[dir=rtl] .fd-input-group__addon--button:last-child>*{margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.fd-input-group__addon--button[dir=rtl]:last-child>:first-child:not(:last-child),[dir=rtl] .fd-input-group__addon--button:last-child>:first-child:not(:last-child){border-bottom-left-radius:0}.fd-input-group__addon--button[dir=rtl]:last-child>:last-child:not(:first-child),[dir=rtl] .fd-input-group__addon--button:last-child>:last-child:not(:first-child){border-top-left-radius:0;margin-top:-1px}