:host .tef-button-group { display: inline-block; vertical-align: middle; margin: 0; padding: 0; list-style: none; } :host .tef-button-group:before, :host .tef-button-group:after { content: ""; display: table; } :host .tef-button-group:after { clear: both; } :host .tef-button-group > *, :host .tef-button-group ::content > * { float: left; margin-left: 1px; } :host .tef-button-group > *:first-child, :host .tef-button-group ::content > *:first-child { margin-left: 0; } :host .tef-button-group > *:first-child .tef-button, :host .tef-button-group ::content > *:first-child .tef-button { border-radius: 3px 0 0 3px; } :host .tef-button-group > *:last-child .tef-button, :host .tef-button-group ::content > *:last-child .tef-button, :host .tef-button-group > *:last-child::shadow .tef-button, :host .tef-button-group ::content > *:last-child::shadow .tef-button { border-radius: 0 3px 3px 0; } :host .tef-button-group .tef-button, :host .tef-button-group > ::content tef-button::shadow .tef-button { border-radius: 0; } :host .tef-button-group > .tef-button, :host .tef-button-group > ::content ::shadow .tef-button { display: block; } :host .tef-button-group > .tef-button:first-child, :host .tef-button-group > ::content tef-button:first-child::shadow .tef-button { border-radius: 3px 0 0 3px; } :host .tef-button-group > .tef-button:last-child, :host .tef-button-group > ::content tef-button:last-child::shadow .tef-button { border-radius: 0 3px 3px 0; } :host .tef-button-group > .tef-button + .tef-button, :host .tef-button-group ::content tef-button + tef-button { margin-left: 1px; } :host .tef-button-group[disabled], :host .tef-button-group.disabled { opacity: 0.4; pointer-events: none; } :host label { color: {{g.grey5}}; display: inline-block; vertical-align: middle; font-size: 12px; line-height: 28px; font-weight: bold; padding-right: 7px; } :host .tef-input { display: inline-block; vertical-align: middle; background: white; color: black; font-size: 15px; line-height: 18px; padding: 8px 9px; border: 1px solid {{g.grey2}}; border-radius: {{g.radius}}; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :host .tef-input.small { font-size: 11px; line-height: 13px; padding: 6px 9px; } :host .tef-input.large { font-size: 24px; line-height: 29px; padding: 7px 14px; } :host .tef-input:hover, :host .tef-input:focus, :host .tef-input:active { padding: 7px 8px; border: 2px solid {{g.significant}}; outline: none; } :host .tef-input:hover.small, :host .tef-input:focus.small, :host .tef-input:active.small { padding: 5px 8px; } :host .tef-input:hover.large, :host .tef-input:focus.large, :host .tef-input:active.large { padding: 6px 13px; } :host .tef-input.icon { padding-right: 40px; } :host .tef-input.icon:hover, :host .tef-input.icon:focus, :host .tef-input.icon:active { padding-right: 39px; } :host .tef-input.icon + [icon] { position: relative; top: 3px; left: -37px; width: 40px; margin-right: -27px; } :host .tef-input.icon + [icon]:before { font-size: 24px; } :host .tef-input.icon.small + [icon] { top: 2px; left: -32px; margin-right: -22px; } :host .tef-input.icon.small + [icon]:before { font-size: 18px; } :host .tef-input.icon.large + [icon] { top: 6px; left: -40px; margin-right: -30px; } :host .tef-input.icon.large + [icon]:before { font-size: 30px; } :host .tef-input.block { width: 100%; } :host .tef-input.block + [icon], :host .tef-input.block.small + [icon], :host .tef-input.block.large + [icon] { position: absolute; right: 0; left: auto; margin-right: 0; } :host .tef-message { display: inline-block; vertical-align: middle; color: white; font-size: 12px; padding: 6px 10px; border-radius: {{g.radius}}; box-sizing: border-box; } :host .tef-ok .tef-input, :host .tef-warning .tef-input, :host .tef-error .tef-input { padding: 7px 8px; border-width: 2px; border-style: solid; } :host .tef-ok .tef-input.small, :host .tef-warning .tef-input.small, :host .tef-error .tef-input.small { padding: 5px 8px; } :host .tef-ok .tef-input.large, :host .tef-warning .tef-input.large, :host .tef-error .tef-input.large { padding: 6px 13px; } :host .tef-ok .tef-input:hover, :host .tef-warning .tef-input:hover, :host .tef-error .tef-input:hover, :host .tef-ok .tef-input:focus, :host .tef-warning .tef-input:focus, :host .tef-error .tef-input:focus, :host .tef-ok .tef-input:active, :host .tef-warning .tef-input:active, :host .tef-error .tef-input:active { border-color: {{g.significant}}; } :host .tef-ok .tef-input { border-color: {{g.positive}}; } :host .tef-ok .tef-message { background-color: {{g.positive}}; } :host .tef-warning .tef-input { border-color: {{g.warning}}; } :host .tef-warning .tef-message { background-color: {{g.warning}}; } :host .tef-error .tef-input { border-color: {{g.negative}}; } :host .tef-error .tef-message { background-color: {{g.negative}}; } :host .tef-input.block + .tef-message { margin-top: 5px; display: block; } :host .tef-row, :host .tef-group { display: block; position: relative; margin-bottom: 10px; } :host .tef-row label, :host .tef-group label { display: block; } :host .tef-row label.tef-inline, :host .tef-group label.tef-inline { display: inline-block; } :host .tef-row > label + *, :host .tef-group > label + *, :host .tef-row > .tef-message, :host .tef-group > .tef-message { margin-left: 0; } :host .tef-group > * { border-radius: 0 !important; } :host .tef-group > *:first-child, :host .tef-group > *:first-child > button { border-radius: {{g.radius}} 0 0 {{g.radius}} !important; } :host .tef-group > *:last-child, :host .tef-group > *:last-child > button { border-radius: 0 {{g.radius}} {{g.radius}} 0 !important; } :host .tef-group > *:first-child:last-child { border-radius: {{g.radius}} !important; } :host .tef-group > * ~ * { margin: 0 0 0 -5px !important; } :host .tef-group ::content > * { border-radius: 0 !important; } :host .tef-group ::content > *::shadow .tef-button, :host .tef-group ::content > *::shadow .tef-input { border-radius: 0 !important; } :host .tef-group ::content > *:first-child, :host .tef-group ::content > *:first-child > button, :host .tef-group ::content > *:first-child::shadow .tef-button, :host .tef-group ::content > *:first-child::shadow .tef-input { border-radius: {{g.radius}} 0 0 {{g.radius}} !important; } :host .tef-group ::content > *:last-child, :host .tef-group ::content > *:last-child > button, :host .tef-group ::content > *:last-child::shadow .tef-button, :host .tef-group ::content > *:last-child::shadow .tef-input { border-radius: 0 {{g.radius}} {{g.radius}} 0 !important; } :host .tef-group ::content > *:first-child:last-child { border-radius: {{g.radius}} !important; } :host .tef-group ::content > * ~ * { margin: 0 0 0 -5px !important; } :host .tef-group .tef-button + .tef-button { border-left-color: white; } :host .tef-group ::content tef-button + tef-button::shadow .tef-button { border-left-color: white; } :host textarea.tef-input { resize: none; } :host [disabled], :host .disabled { opacity: 0.4; pointer-events: none; }