UNPKG

@ebay/skin

Version:

Skin - CSS modules that represent the brand eBay

156 lines (132 loc) 2.81 kB
span.field { display: inline-block; } span.field + span.field { margin-left: 8px; } .field-group, div.field { margin: 16px 0; } .field-group { display: flex; } .field-group > div.field { margin: 0; } span.field--table { display: inline-table; } div.field--table { display: table; } .field__description--group { display: flex; justify-content: flex-end; } .field__description--group > :last-child { margin-inline-start: 5px; text-align: right; } .field__description--group > :first-child { flex: 1; } .field__label { margin-right: 8px; } .field__description { color: var(--field-description-color, var(--color-foreground-secondary)); font-size: var(--font-size-small); line-height: var(--spacing-200); margin-top: var(--spacing-50); } .field__description--confirmation { color: var( --field-description-confirmation-color, var(--color-foreground-confirmation) ); } .field__description--information { color: var( --field-description-information-color, var(--color-foreground-information) ); } .field__description--attention { color: var( --field-description-attention-color, var(--color-foreground-attention) ); } .field__group > .field__description, .field__group > .field__label { align-self: center; } span.field__group { display: inline-flex; } div.field__group { display: flex; } .field__control + span.field__description { margin-left: 8px; } .field__description .icon { display: inline-block; margin-right: var(--spacing-50); } div.field__description { margin: var(--spacing-100) 0 0; } .field__row { display: table-row; } .field__row > .field__control, .field__row > .field__description, .field__row > .field__label { display: table-cell; } .field__row .field__label { margin-right: auto; padding-right: 8px; } .field__row .field__control + span.field__description { margin-left: 0; padding-left: 8px; } .field__row:first-child > .field__description { padding-bottom: 8px; } .field__row:last-child > .field__description { padding-top: 8px; } .field__label--end { margin-left: 4px; margin-right: auto; } .field__label--stacked { display: block; margin-bottom: 8px; } .field__label--disabled { color: var(--field-label-color-disabled, var(--color-foreground-disabled)); } .field--fluid, .field__control--fluid, .field__group--fluid { width: 100%; } .field--align-top .field__label { display: inline-block; margin-top: 16px; } .field--align-top .textbox { vertical-align: top; } .field__group--align-top > .field__label { align-self: flex-start; margin-top: 16px; } [dir="rtl"] .field__description--group > :last-child { text-align: left; }