{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ed35b150a6f9d430c71b1494b287e2767591f62","tarball":"https://registry.npmjs.org/@material/shape/-/shape-7.0.0-canary.2f052d824.0.tgz","fileCount":13,"integrity":"sha512-nI1wx+IbhL+M22Wc2p8jfzdpofoG+y0kcfzQc+XiHPEEAuyhPF4P+8S10MGza6d2DxXAoz9o9n+pklMUd0EO8g==","signatures":[{"sig":"MEUCIQCj+AwbAh6s7ti6S4aLgF/yuny9Dmd89X09Azn6ty3/sgIgcsQSOWnfeBoVZrelf3sK0jsNHTlZWsEWGiewBpmiTrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcnsCRA9TVsSAnZWagAAlBEQAKHG0no5xJXoV550BM1o\n4OG4s7GWvcbo+eExkXphjZrLFUXrnd8fw/o/dOh0kD1c3HvnosnusQziZs1S\nOWJ/qfa7hTOoQClYBNu8jvOGGd2hEtmLkJzbOZ8a06IWXeKtHPFoKk9oGnIU\njhgxYKiA8HmBpxnrl7bCmp/EfRl0s+HDgvLFQ5Bb1XBBJxMYgTHjxYHW5/uX\nshfOgxTuJ7aO7SCetUpOd8kFygfISv4/x+XbJ8zUB9Zs4J2/bCbsEp6+zJDG\nUG+UsY60VRPgYT2h0DF9XWIRWEUnGvvzrvm6fNBjkz1NkqBped0sbqbnpKtt\n7pZjPiaL6PPVMm1LLCTLBs40CstFoGaI+v/q8XWP6BaD0BE4wU0s/nPdLdfI\nbC24HBx78/8cQWw9tgZ9AmPkAv8Ym7q35ep3uo5gtMPl6bylkIqvUqU7uHE6\n8n/Klj/IORvJJF//m4vWhIUZEAyCOZfeKXoIOndocFaPY3vyiWHPDsw0AT/r\nJAl1s8AjSg2NmdIF9TDvKSVKn1X+rcIInjCI6Vi5TV+5g9V6I8tfpatN3YDk\n0enoAw0kkNaIWn1a2tp+cY4t/dcgNsr/vlXRd9kndOVU8kDwCLgxlhdxpo+l\nhtBIhJ/5RVrA6sZkpbDQ7kqtzKk3b/I1JC96daZ8v+yE9FfYCOBVljsSqF6I\nAFJX\r\n=sAYZ\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/shape","readme":"\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium and large in shape system. Overriding below sass variables applies shape (rounded) to respective categories. For example, overriding `$medium-radius` variable would apply shape to all components that belong to medium category.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n> Use `resolve-percentage-radius` sass function to resolve percentage unit value to absolute radius value.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`resolve-percentage-radius($component-height, $radius)` | Calculates the absolute radius value based on its component height. Use this for fixed height components only.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`prop-value($radius)` | Returns `$radius` value of shape category - `large`, `medium` or `small`. Otherwise, it returns the `$radius` itself if valid. `$radius` can be a single value or list of up to 4.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius(shape.resolve-percentage-radius(button.$height, $radius));\n```\n\nWhere, `button.$height` is the height of standard button and `$radius` is the size of shape. `resolve-percentage-radius` function is used to resolve percentage unit value to absolute `$radius` value based on component height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere, `$radius` is absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere, only top-right & bottom-right corners are customizable and it automatically flips radius values based on RTL context when `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above styles applies 50% (pill) shape to button. It can also be absolute value (e.g., `8px`);\n\n> You would indirectly use the Shape API through respective component's mixin which takes care of applying radius to applicable corners for all its variants.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","shape"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-shape"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Shape utilities for Material Components for the web","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/shape_7.0.0-canary.2f052d824.0_1588972012189_0.23130304958491132","host":"s3://npm-registry-packages"},"_id":"@material/shape@7.0.0-canary.2f052d824.0","version":"7.0.0-canary.2f052d824.0"}