{"version":3,"sources":["webpack:///./src/pages/mt/utilities/appearance/develop.js"],"names":["site","data","slug","state","title","class","className","to"],"mappings":"6FAAA,oEAMe,qBACb,OACE,oCACE,kBAAC,IAAD,CACEA,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,YAClBC,MAAM,UACNC,MAAOH,EAAKG,QAEd,kBAAC,IAAD,CACEF,KAAMD,EAAKC,KAAO,YAClBF,KAAMC,EAAKD,KACXG,MAAM,UACNC,MAAOH,EAAKG,OAEZ,kBAAC,IAAD,KACE,sGAKF,kBAAC,IAAD,sBAEA,2BAAOC,MAAM,wCACX,+BACE,4BACE,4BACE,yBAAKA,MAAM,yCACT,0BAAMA,MAAM,eAAZ,4BAGJ,wBAAIC,UAAU,sBAAd,0CAIF,4BACE,4BACE,yBAAKD,MAAM,yCACT,0BAAMA,MAAM,eAAZ,6BAGJ,wBAAIC,UAAU,sBAAd,0CAIF,4BACE,4BACE,yBAAKD,MAAM,yCACT,0BAAMA,MAAM,eAAZ,4BAGJ,wBAAIC,UAAU,sBAAd,4CAMN,kBAAC,IAAD,CAAWA,UAAU,yBAArB,UACA,2BAAOD,MAAM,wCACX,+BACE,4BACE,4BACE,yBAAKA,MAAM,yCACT,0BAAMA,MAAM,eAAZ,uBAGJ,wBAAIC,UAAU,sBAAd,iEAMN,kBAAC,IAAD,CAAWA,UAAU,yBAArB,uBAGA,2BAAOD,MAAM,wCACX,+BACE,4BACE,4BACE,yBAAKA,MAAM,yCACT,0BAAMA,MAAM,eAAZ,wBAGJ,wBAAIC,UAAU,sBAAd,0EAON,kBAAC,IAAD,CAAWA,UAAU,yBAArB,SACA,2BAAOD,MAAM,wCACX,+BACE,4BACE,4BACE,yBAAKA,MAAM,yCACT,0BAAMA,MAAM,eAAZ,kBAGJ,wBAAIC,UAAU,sBAAd,8HAQN,kBAAC,IAAD,CAAWA,UAAU,yBAArB,UACA,2BAAOD,MAAM,wCACX,+BACE,4BACE,4BACE,yBAAKA,MAAM,yCACT,0BAAMA,MAAM,eAAZ,oBAGJ,wBAAIC,UAAU,sBAAd,kEAIF,4BACE,4BACE,yBAAKD,MAAM,yCACT,0BAAMA,MAAM,eAAZ,wBAGJ,wBAAIC,UAAU,sBAAd,qGAKF,4BACE,4BACE,yBAAKD,MAAM,yCACT,0BAAMA,MAAM,eAAZ,0BAGJ,wBAAIC,UAAU,sBAAd,yGAON,kBAAC,IAAD,CAAWA,UAAU,yBAArB,aACA,2BAAOD,MAAM,wCACX,+BACE,4BACE,4BACE,yBAAKA,MAAM,yCACT,0BAAMA,MAAM,eAAZ,kBAGJ,wBAAIC,UAAU,sBAAd,8CAIF,4BACE,4BACE,yBAAKD,MAAM,yCACT,0BAAMA,MAAM,eAAZ,mBAGJ,wBAAIC,UAAU,sBAAd,+CAIF,4BACE,4BACE,yBAAKD,MAAM,yCACT,0BAAMA,MAAM,eAAZ,mBAGJ,wBAAIC,UAAU,sBAAd,iDAMN,kBAAC,IAAD,CAAWA,UAAU,yBAArB,cACA,2BAAOD,MAAM,wCACX,+BACE,4BACE,4BACE,yBAAKA,MAAM,yCACT,0BAAMA,MAAM,eAAZ,iCAGJ,wBAAIC,UAAU,sBAAd,iGAEoC,6BAFpC,MAGM,IACJ,kBAAC,OAAD,CAAMC,GAAE,IAAMN,EAAKD,KAAX,mCAAR,4BAJF,MAUF,4BACE,4BACE,yBAAKK,MAAM,yCACT,0BAAMA,MAAM,eAAZ,sCAKJ,wBAAIC,UAAU,sBAAd,gGAEoC,6BAFpC,MAGM,IACJ,kBAAC,OAAD,CAAMC,GAAE,IAAMN,EAAKD,KAAX,mCAAR,4BAJF,MAUF,4BACE,4BACE,yBAAKK,MAAM,yCACT,0BAAMA,MAAM,eAAZ,gCAGJ,wBAAIC,UAAU,sBAAd,kGAEoC,6BAFpC,MAGM,IACJ,kBAAC,OAAD,CAAMC,GAAE,IAAMN,EAAKD,KAAX,mCAAR,4BAJF,QAYN,kBAAC,IAAD,CAAWM,UAAU,yBAArB,eACA,2BAAOD,MAAM,wCACX,+BACE,4BACE,4BACE,yBAAKA,MAAM,yCACT,0BAAMA,MAAM,eAAZ,2BAGJ,wBAAIC,UAAU,sBAAd,+EAKF,4BACE,4BACE,yBAAKD,MAAM,yCACT,0BAAMA,MAAM,eAAZ,2BAGJ,wBAAIC,UAAU,sBAAd,yG","file":"component---src-pages-mt-utilities-appearance-develop-js-b19adea1028671ac6037.js","sourcesContent":["import React from 'react'\nimport { Link } from 'gatsby'\nimport { Layout, Header, Intro, ItemTitle } from '../../../../components'\n\nimport data from './data.json'\n\nexport default () => {\n  return (\n    <>\n      <Header\n        site={data.site}\n        slug={data.slug + '/develop/'}\n        state=\"develop\"\n        title={data.title}\n      />\n      <Layout\n        slug={data.slug + '/develop/'}\n        site={data.site}\n        state=\"develop\"\n        title={data.title}\n      >\n        <Intro>\n          <p>\n            Use these appearance classes to manipulate how an element is\n            rendered.\n          </p>\n        </Intro>\n        <ItemTitle>Border Radius</ItemTitle>\n\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-border-radius--small</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Gives element a border radius of 2px.\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-border-radius--medium</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Gives element a border radius of 4px.\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-border-radius--large</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Gives element a border radius of 8px.\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle className=\"l-margin-top--xxlarge\">Cursor</ItemTitle>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-cursor--pointer</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Sets `cursor: pointer` to element, implying a click event.\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle className=\"l-margin-top--xxlarge\">\n          List Style Variants\n        </ItemTitle>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-list-style--none</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Sets `list-style-type: none` to element, removing all list\n                bullets.\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle className=\"l-margin-top--xxlarge\">Reset</ItemTitle>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-reset--box</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Resets the box model to `box-sizing: border-box`. Width and\n                height properties will include content, padding and border.\n              </td>\n            </tr>\n          </tbody>\n        </table>\n\n        <ItemTitle className=\"l-margin-top--xxlarge\">Scroll</ItemTitle>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-scroll--none</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Sets `overflow: none` on an element, removing all scrollbars.\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-scroll--vertical</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Sets `overflow-y: auto` on an element, showing scrollbars\n                whenever content overflows vertically.\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-scroll--horizontal</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Sets `overflow-x: auto` on an element, showing scrollbars\n                whenever content overflows horizontally.\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle className=\"l-margin-top--xxlarge\">Transform</ItemTitle>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-rotate--90</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Rotates the element 90 degrees clockwise.\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-rotate--180</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Rotates the element 180 degrees clockwise.\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-rotate--270</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Rotates the element 270 degrees clockwise.\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle className=\"l-margin-top--xxlarge\">Visibility</ItemTitle>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-is-visible--[screen size]</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Adds `display: block`, forcing element to appear visible at\n                designated screen-size and below. <br />\n                See{' '}\n                <Link to={`/${data.site}/guidelines/grid-system/design/`}>\n                  full list of breakpoints\n                </Link>\n                .\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">\n                    u-is-visible-flex--[screen size]\n                  </span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Adds `display: flex`, forcing element to appear visible at\n                designated screen-size and below. <br />\n                See{' '}\n                <Link to={`/${data.site}/guidelines/grid-system/design/`}>\n                  full list of breakpoints\n                </Link>\n                .\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-is-hidden--[screen size]</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Adds `display: none`, forcing element to appear be hidden at\n                desginated screen-size and below. <br />\n                See{' '}\n                <Link to={`/${data.site}/guidelines/grid-system/design/`}>\n                  full list of breakpoints\n                </Link>\n                .\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle className=\"l-margin-top--xxlarge\">White Space</ItemTitle>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-white-space--nowrap</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Sets `white-space: nowrap`, forcing text to never wrap onto the\n                next line.\n              </td>\n            </tr>\n            <tr>\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__code\">u-white-space--normal</span>\n                </div>\n              </td>\n              <td className=\"table__description\">\n                Sets `white-space: normal`, forcing text to wrap onto the next\n                line whenever width is limited.\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </Layout>\n    </>\n  )\n}\n"],"sourceRoot":""}