{"componentChunkName":"component---src-pages-components-modal-style-mdx","path":"/components/modal/style/","result":{"pageContext":{"frontmatter":{"title":"Modal","description":"Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/modal/style.mdx","titleType":"prepend","MdxNode":{"id":"6dc54f8f-02ea-59e4-984f-afc45c49950e","children":[],"parent":"2cfcc39c-8bf8-52c8-b575-173bc7dbb33c","internal":{"content":"---\ntitle: Modal\ndescription: Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\nRefer to the [button](/components/button/style) for primary and secondary button styling in the transactional modal.\n\n| Class | Property | Color token |\n| ---------------------------- | ---------------- | ------------- |\n| `.bx--modal-container` | background-color | `$ui-01` |\n| `.bx--modal-header__label` | text color | `$text-02` |\n| `.bx--modal-header__heading` | text color | `$text-01` |\n| `.bx--modal-content` | text color | `$text-01` |\n| `.bx--modal-close__icon` | fill | `$icon-01` |\n| `.bx--modal-close:hover` | background-color | `$hover-ui` |\n| Overlay | color | `$overlay-01` |\n\n## Typography\n\nModal titles and labels should be set in sentence case. Keep all titles and labels concise and to the point. Modal labels are optional.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ---------------------------- | ------------------ | ------------- | --------------- |\n| `.bx--modal-header__label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--modal-header__heading` | 20 / 1.25 | Regular / 400 | `$heading-03` |\n| `.bx--modal-content` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\n| Class | Property | px / rem | Spacing token |\n| -------------------------- | ------------------------- | -------- | ------------- |\n| `.bx--modal-close` | height, width | 48 x 48 | – |\n| `.bx--modal-close__icon` | height, width | 16 x 16 | – |\n| `.bx--modal-header__label` | margin-bottom | 4 / 0.25 | `$spacing-02` |\n| `.bx--modal-header` | padding top, padding left | 16 / 1 | `$spacing-05` |\n| `.bx--modal-header` | margin-bottom | 16 / 1 | `$spacing-05` |\n| `.bx--modal-content` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--modal-content` | padding-right | 20% | – |\n| `.bx--modal-content` | margin-bottom | 48 / 3 | `$spacing-09` |\n\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a passive modal | px / rem\n\n\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a transactional modal | px / rem\n\n\n### Margin-right\n\nModals that are 36% width and larger have a `margin-right: 20%` (margin percentage is based off the width of the modal window). If the modal is smaller than 36% then it has a fixed `margin-right: 16px/1rem`. Body copy, including titles, in a modal alway follows the 20% margin-right rule. However, inputs and other components may still expanded the full width of modal window.\n\n\n\n\n\n\n\n
\n\n\n Margin-right for modals less than 36% (left) and greater than 36% (right).\n\n\n\n\n## Sizes\n\nThere are four modal sizes: **xs, small, default, large**. Each modal size has a responsive width that changes based on the browser size. As the browser decreases, the modal width percentage increases thus maintaining a proper ratio between the modal and browser. Modal widths are defined as percentages of the browser but will still align to columns on the 2x grid.\n\n\n\n\n\n\n\n
\n\n\n\n\n### XS\n\n| Breakpoint | Percentage width | Column span | Margin-right |\n| ---------- | ---------------- | ----------- | ------------ |\n| 1584 | 24% | 4 of 16 | 16px / 1rem |\n| 1312 | 24% | 4 of 16 | 16px / 1rem |\n| 1056 | 32% | 5 of 16 | 16px / 1rem |\n| 672 | 48% | 4 of 8 | 16px / 1rem |\n| 320 | 100% | 4 of 4 | 16px / 1rem |\n\n### Small\n\n| Breakpoint | Percentage width | Column span | Margin-right |\n| ---------- | ---------------- | ----------- | ------------ |\n| 1584 | 36% | 6 of 16 | 20% |\n| 1312 | 36% | 6 of 16 | 20% |\n| 1056 | 42% | 7 of 16 | 16px / 1rem |\n| 672 | 60% | 5 of 8 | 16px / 1rem |\n| 320 | 100% | 4 of 4 | 16px / 1rem |\n\n### Default\n\n| Breakpoint | Percentage width | Column span | Margin-right |\n| ---------- | ---------------- | ----------- | ------------ |\n| 1584 | 48% | 8 of 16 | 20% |\n| 1312 | 48% | 8 of 16 | 20% |\n| 1056 | 60% | 10 of 16 | 20% |\n| 672 | 84% | 7 of 8 | 20% |\n| 320 | 100% | 4 of 4 | 16px / 1rem |\n\n### Large\n\n| Breakpoint | Percentage width | Column span | Margin-right |\n| ---------- | ---------------- | ----------- | ------------ |\n| 1584 | 72% | 12 of 16 | 20% |\n| 1312 | 72% | 12 of 16 | 20% |\n| 1056 | 84% | 14 of 16 | 20% |\n| 672 | 96% | 8 of 8 | 20% |\n| 320 | 100% | 4 of 4 | 16px / 1rem |\n\n### Max sizes\n\nEach modal size has a max height and width in order to maintain a proper window ratio.\n\n| Modal size | Max-height | Max-width |\n| ----------- | ---------- | --------- |\n| **XS** | 48% | 420px |\n| **Small** | 72% | 576px |\n| **Default** | 84% | 768px |\n| **Large** | 96% | – |\n\n\n
\n\n### Mobile\n\nOn mobile devices, at the smaller break points the max-height does not apply. The height may either be 100% of the screen or maintain the height defined by the content while sticking to the bottom of the mobile screen.\n\n\n\n\n\n\n\n
\n","type":"Mdx","contentDigest":"8f47b832d620a030a8d0258d35e786b4","counter":1536,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Modal","description":"Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Modal\ndescription: Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\nRefer to the [button](/components/button/style) for primary and secondary button styling in the transactional modal.\n\n| Class | Property | Color token |\n| ---------------------------- | ---------------- | ------------- |\n| `.bx--modal-container` | background-color | `$ui-01` |\n| `.bx--modal-header__label` | text color | `$text-02` |\n| `.bx--modal-header__heading` | text color | `$text-01` |\n| `.bx--modal-content` | text color | `$text-01` |\n| `.bx--modal-close__icon` | fill | `$icon-01` |\n| `.bx--modal-close:hover` | background-color | `$hover-ui` |\n| Overlay | color | `$overlay-01` |\n\n## Typography\n\nModal titles and labels should be set in sentence case. Keep all titles and labels concise and to the point. Modal labels are optional.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ---------------------------- | ------------------ | ------------- | --------------- |\n| `.bx--modal-header__label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--modal-header__heading` | 20 / 1.25 | Regular / 400 | `$heading-03` |\n| `.bx--modal-content` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\n| Class | Property | px / rem | Spacing token |\n| -------------------------- | ------------------------- | -------- | ------------- |\n| `.bx--modal-close` | height, width | 48 x 48 | – |\n| `.bx--modal-close__icon` | height, width | 16 x 16 | – |\n| `.bx--modal-header__label` | margin-bottom | 4 / 0.25 | `$spacing-02` |\n| `.bx--modal-header` | padding top, padding left | 16 / 1 | `$spacing-05` |\n| `.bx--modal-header` | margin-bottom | 16 / 1 | `$spacing-05` |\n| `.bx--modal-content` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--modal-content` | padding-right | 20% | – |\n| `.bx--modal-content` | margin-bottom | 48 / 3 | `$spacing-09` |\n\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a passive modal | px / rem\n\n\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a transactional modal | px / rem\n\n\n### Margin-right\n\nModals that are 36% width and larger have a `margin-right: 20%` (margin percentage is based off the width of the modal window). If the modal is smaller than 36% then it has a fixed `margin-right: 16px/1rem`. Body copy, including titles, in a modal alway follows the 20% margin-right rule. However, inputs and other components may still expanded the full width of modal window.\n\n\n\n\n\n\n\n
\n\n\n Margin-right for modals less than 36% (left) and greater than 36% (right).\n\n\n\n\n## Sizes\n\nThere are four modal sizes: **xs, small, default, large**. Each modal size has a responsive width that changes based on the browser size. As the browser decreases, the modal width percentage increases thus maintaining a proper ratio between the modal and browser. Modal widths are defined as percentages of the browser but will still align to columns on the 2x grid.\n\n\n\n\n\n\n\n
\n\n\n\n\n### XS\n\n| Breakpoint | Percentage width | Column span | Margin-right |\n| ---------- | ---------------- | ----------- | ------------ |\n| 1584 | 24% | 4 of 16 | 16px / 1rem |\n| 1312 | 24% | 4 of 16 | 16px / 1rem |\n| 1056 | 32% | 5 of 16 | 16px / 1rem |\n| 672 | 48% | 4 of 8 | 16px / 1rem |\n| 320 | 100% | 4 of 4 | 16px / 1rem |\n\n### Small\n\n| Breakpoint | Percentage width | Column span | Margin-right |\n| ---------- | ---------------- | ----------- | ------------ |\n| 1584 | 36% | 6 of 16 | 20% |\n| 1312 | 36% | 6 of 16 | 20% |\n| 1056 | 42% | 7 of 16 | 16px / 1rem |\n| 672 | 60% | 5 of 8 | 16px / 1rem |\n| 320 | 100% | 4 of 4 | 16px / 1rem |\n\n### Default\n\n| Breakpoint | Percentage width | Column span | Margin-right |\n| ---------- | ---------------- | ----------- | ------------ |\n| 1584 | 48% | 8 of 16 | 20% |\n| 1312 | 48% | 8 of 16 | 20% |\n| 1056 | 60% | 10 of 16 | 20% |\n| 672 | 84% | 7 of 8 | 20% |\n| 320 | 100% | 4 of 4 | 16px / 1rem |\n\n### Large\n\n| Breakpoint | Percentage width | Column span | Margin-right |\n| ---------- | ---------------- | ----------- | ------------ |\n| 1584 | 72% | 12 of 16 | 20% |\n| 1312 | 72% | 12 of 16 | 20% |\n| 1056 | 84% | 14 of 16 | 20% |\n| 672 | 96% | 8 of 8 | 20% |\n| 320 | 100% | 4 of 4 | 16px / 1rem |\n\n### Max sizes\n\nEach modal size has a max height and width in order to maintain a proper window ratio.\n\n| Modal size | Max-height | Max-width |\n| ----------- | ---------- | --------- |\n| **XS** | 48% | 420px |\n| **Small** | 72% | 576px |\n| **Default** | 84% | 768px |\n| **Large** | 96% | – |\n\n\n
\n\n### Mobile\n\nOn mobile devices, at the smaller break points the max-height does not apply. The height may either be 100% of the screen or maintain the height defined by the content while sticking to the bottom of the mobile screen.\n\n\n\n\n\n\n\n
\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/modal/style.mdx"}}}}