{"componentChunkName":"component---src-pages-components-overflow-menu-style-mdx","path":"/components/overflow-menu/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Overflow menu","description":"Overflow menus are used when additional options are available to the user and there is a space constraint.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/overflow-menu/style.mdx","titleType":"prepend","MdxNode":{"id":"55c3aac8-2102-514a-8919-36ca7498a090","children":[],"parent":"a2fb2360-b1b5-5d62-a118-a9ee1696a4dc","internal":{"content":"---\ntitle: Overflow menu\ndescription: Overflow menus are used when additional options are available to the user and there is a space constraint.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                                        | Property         | Color token                      |\n| -------------------------------------------- | ---------------- | -------------------------------- |\n| `.bx--overflow-menu__icon`                   | fill             | `$icon-01`                       |\n| `.bx--overflow-menu-options`                 | background-color | `$ui-01`                         |\n| `.bx--overflow-menu-options__btn`            | color            | `$text-02`                       |\n| `.bx--overflow-menu-options__option--danger` | background-color | `$support-01`                    |\n| `.bx--overflow-menu-options`                 | box-shadow       | `0 2px 6px 0 rgba(0, 0, 0, 0.3)` |\n\n### Interactive states\n\n| Class                      | Property         | Color token     |\n| -------------------------- | ---------------- | --------------- |\n| `.bx--overflow-menu:focus` | border           | `$focus`        |\n| `option:focus`             | border           | `$focus`        |\n| `.bx--overflow-menu:hover` | background-color | `$hover-ui`     |\n| `option:hover`             | background-color | `$hover-row`    |\n| `option:hover`             | text color       | `$text-01`      |\n| `option--danger:hover`     | background-color | `$hover-danger` |\n| `option:disabled`          | text color       | `$disabled-02`  |\n\n<div className=\"image--fixed\">\n\n![Overflow menu text hover example](images/overflow-menu-style-1.png)\n\n</div>\n\n<Caption>Text and warning hover examples for overflow menu</Caption>\n\n## Typography\n\nOverflow menu text should be set in set in sentence case with the first letter of the first word capitalized.\n\n| Property                          | Font-size (px/rem) | Font-weight   | Type token       |\n| --------------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--overflow-menu-options__btn` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThe height of an overflow menu is determined by the amount of content in the menu. The overflow menu icon can be found in the [icons](/guidelines/icons/library) library.\n\n| Class                                        | Property                    | px / rem  | Spacing token |\n| -------------------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--overflow-menu__icon`                   | icon size                   | 16 x 16px | –             |\n| `.bx--overflow-menu-options__btn`            | padding-right, padding-left | 16 / 1    | `$spacing-05` |\n| `.bx--overflow-menu-options`                 | height                      | 32 / 2    | –             |\n| `.bx--overflow-menu-options__option--danger` | border-top                  | 1px       | –             |\n\n<div className=\"image-fixed\">\n\n![Structure and spacing measurements for an overflow menu](images/overflow-menu-style-3.png)\n\n</div>\n","type":"Mdx","contentDigest":"04fcc4aa96d896ad1d1aff0a80ef3b46","counter":1328,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Overflow menu","description":"Overflow menus are used when additional options are available to the user and there is a space constraint.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Overflow menu\ndescription: Overflow menus are used when additional options are available to the user and there is a space constraint.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                                        | Property         | Color token                      |\n| -------------------------------------------- | ---------------- | -------------------------------- |\n| `.bx--overflow-menu__icon`                   | fill             | `$icon-01`                       |\n| `.bx--overflow-menu-options`                 | background-color | `$ui-01`                         |\n| `.bx--overflow-menu-options__btn`            | color            | `$text-02`                       |\n| `.bx--overflow-menu-options__option--danger` | background-color | `$support-01`                    |\n| `.bx--overflow-menu-options`                 | box-shadow       | `0 2px 6px 0 rgba(0, 0, 0, 0.3)` |\n\n### Interactive states\n\n| Class                      | Property         | Color token     |\n| -------------------------- | ---------------- | --------------- |\n| `.bx--overflow-menu:focus` | border           | `$focus`        |\n| `option:focus`             | border           | `$focus`        |\n| `.bx--overflow-menu:hover` | background-color | `$hover-ui`     |\n| `option:hover`             | background-color | `$hover-row`    |\n| `option:hover`             | text color       | `$text-01`      |\n| `option--danger:hover`     | background-color | `$hover-danger` |\n| `option:disabled`          | text color       | `$disabled-02`  |\n\n<div className=\"image--fixed\">\n\n![Overflow menu text hover example](images/overflow-menu-style-1.png)\n\n</div>\n\n<Caption>Text and warning hover examples for overflow menu</Caption>\n\n## Typography\n\nOverflow menu text should be set in set in sentence case with the first letter of the first word capitalized.\n\n| Property                          | Font-size (px/rem) | Font-weight   | Type token       |\n| --------------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--overflow-menu-options__btn` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThe height of an overflow menu is determined by the amount of content in the menu. The overflow menu icon can be found in the [icons](/guidelines/icons/library) library.\n\n| Class                                        | Property                    | px / rem  | Spacing token |\n| -------------------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--overflow-menu__icon`                   | icon size                   | 16 x 16px | –             |\n| `.bx--overflow-menu-options__btn`            | padding-right, padding-left | 16 / 1    | `$spacing-05` |\n| `.bx--overflow-menu-options`                 | height                      | 32 / 2    | –             |\n| `.bx--overflow-menu-options__option--danger` | border-top                  | 1px       | –             |\n\n<div className=\"image-fixed\">\n\n![Structure and spacing measurements for an overflow menu](images/overflow-menu-style-3.png)\n\n</div>\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/overflow-menu/style.mdx"}}}}