Size
Size
| Name | Value |
|---|---|
| size-base | 32px Defined in Refers to TODO: Should be a relative size. Deprecate key and change to `size-component`? |
| size-full | 100% Defined in Refers to |
| size-icon | 20px Defined in Refers to |
| size-relative-em-12 | 0.125em Defined in |
| size-relative-em-25 | 0.25em Defined in |
| size-relative-em-30 | 0.313em Defined in |
| size-relative-em-50 | 0.5em Defined in |
| size-relative-em-75 | 0.75em Defined in |
| size-relative-em-87 | 0.875em Defined in |
| size-relative-em-100 | 1em Defined in |
| size-relative-em-125 | 1.25em Defined in |
| size-relative-em-150 | 1.5em Defined in |
| size-relative-em-200 | 2em Defined in |
| size-relative-em-250 | 2.5em Defined in |
| size-relative-percentage-25 | 25% Defined in |
| size-relative-percentage-33 | 33% Defined in |
| size-relative-percentage-50 | 50% Defined in |
| size-relative-percentage-100 | 100% Defined in |
| size-absolute-6 | 1px Defined in |
| size-absolute-12 | 2px Defined in |
| size-absolute-25 | 4px Defined in |
| size-absolute-50 | 8px Defined in |
| size-absolute-75 | 12px Defined in |
| size-absolute-100 | 16px Defined in |
| size-absolute-125 | 20px Defined in |
| size-absolute-150 | 24px Defined in |
| size-absolute-200 | 32px Defined in |
| size-absolute-250 | 40px Defined in |
| size-absolute-300 | 48px Defined in |
| size-absolute-800 | 128px Defined in |
| size-absolute-1600 | 256px Defined in |
| size-absolute-2400 | 384px Defined in |
| size-absolute-2800 | 448px Defined in |
| size-absolute-3200 | 512px Defined in |
| size-absolute-1px | 1px Defined in TODO: Unclear if this would clarify or complicate applications. |
| size-absolute-9999px | 9999px Defined in TODO: How to fit this best-possible in? Similar to 1px above |
Min-size
| Name | Value |
|---|---|
| min-size-base | 32px Defined in Refers to TODO: Deprecate key and change to `min-size-component`? |
| min-size-icon | 20px Defined in Refers to |
Width
| Name | Value |
|---|---|
| width-x-small | 24px Defined in Refers to |
| width-small | 128px Defined in Refers to |
| width-medium | 256px Defined in Refers to |
| width-large | 384px Defined in Refers to |
| width-x-large | 512px Defined in Refers to |
| width-full | 100% Defined in Refers to |
Max-width
| Name | Value |
|---|---|
| max-width-100 | none Defined in |
| max-width-base | none Defined in Refers to |
| max-width-button | 448px Defined in Refers to Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` |
Min-height
| Name | Value |
|---|---|
| min-height-x-small | 20px Defined in Refers to |
| min-height-small | 24px Defined in Refers to |
| min-height-medium | 32px Defined in Refers to |
| min-height-large | 40px Defined in Refers to |
| min-height-x-large | 48px Defined in Refers to |