diff --git a/components/links.html b/components/links.html index 019133a..a4f637a 100644 --- a/components/links.html +++ b/components/links.html @@ -1,152 +1,152 @@ Components: Links – Wikimedia Design Style Guide
Components

Links

Links signal an action that will let the user navigate to another page, view or resource, when they click or tap on them.

link visual example

Using links

Links must include a descriptive link text or a combination of the text and an additional icon.

Designing

Link text
Link text should describe the assigned action as clear and short as possible (e.g. download, submit form, search).

Icon (optional)
Icons simplify user recognition and provide ability to shorten link text to a minimum. Icons should be limited to differentiate from a standard hyperlink (i.e. if it does something other than navigating to a new page). In contrast to buttons, icons are only allowed additionally to link text, not as only link signifier.

Examples of non-standard links include:

  • Links that open a modal instead of a new page (e.g. map links)
  • Links that open a file instead of a web page (e.g. PDF or document links)
  • Links that cause something to happen that the user would otherwise not expect (e.g. play a sound, like pronunciation links)
  • Links that open a new website instead of just a new page (external links)[1]
  • Links that open a non-web protocol URI (e.g. mailto:, tel: links)

Several Wikimedia Movement projects provide extensive “manuals of style” for applying and designing for links, for example English Wikipedia.[2]

States of links

The link styles outlined here were designed with accessible color variations to distinguish the link’s following visually separated interaction states:

links states
-

Links don't feature a disabled state. Consider using quiet buttons for those applications instead.

+

Links focus outline is the default browser focus, here Blink based browsers only with outline color amendment to Accent50. This varies in different browsers.
Links don't feature a disabled state. Consider using quiet buttons for those applications instead.

Types

-

By default links are only underlined on interaction (hover, active).

+

By default, links are only underlined on interaction (hover, active).

Underlined links

To suit user preference and for accessibility reasons MediaWiki also provides a setting to always underline links.

Links of underlined type, visual example

References

  1. English Wikipedia: External links
  2. English Wikipedia: Manual of Style/Linking
diff --git a/css/build/wmui-style-guide.css b/css/build/wmui-style-guide.css index af06a07..79af0b1 100644 --- a/css/build/wmui-style-guide.css +++ b/css/build/wmui-style-guide.css @@ -1,1852 +1,1857 @@ /* ::: Vendor Imports ::: */ /* Load files from 'node_modules' folders with postCSS-import plugin. * Modules specified in package.json file */ /** * WikimediaUI Base v0.15.0 * Wikimedia Foundation user interface base variables * See https://design.wikimedia.org/style-guide/ */ :root { /* == Breakpoints == */ /* The following numbers are prone to change with new information. */ /** * Minimum available screen width at which a device can be considered a mobile device * Many older feature phones have screens smaller than this value. */ /** * Minimum available screen width at which a device can be considered a tablet * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low * enough to cover iPad (768px). */ /* Minimum available screen width at which a device can be considered a desktop. */ /* Wider desktop breakpoint, currently used in Flow. */ /* Extra wide desktop breakpoint */ /* == Colors == */ /** * WikimediaUI (`wmui`) color palette * See https://design.wikimedia.org/style-guide/visual-style_colors.html * Don't use those variables directly, instead define your vars * referring to them as applied further below. */ /* = HSB 0°, 0%, 0% */ /* = HSB 210°, 6%, 13% */ /* = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff` */ /* = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff` */ /* = HSB 212°, 8%, 69% */ /* = HSB 213°, 4%, 82% */ /* = HSB 220°, 3%, 94% */ /* = HSB 210°, 1%, 98% */ /* = HSB 0°, 0%, 100% */ /* = HSB 220°, 70%, 55% */ /* = HSB 220°, 75%, 80% */ /* = HSB 214°, 8%, 100% */ /* = HSB 360°, 80%, 70% */ /* = HSB 360°, 77%, 87% */ /* = HSB 3°, 9%, 100% */ /* = HSB 36°, 100%, 67% */ /* = HSB 45°, 80%, 100% */ /* = HSB 39°, 9%, 100% */ /* = HSB 167°, 85%, 53% */ /* = HSB 167°, 100%, 69% */ /* = HSB 166°, 16%, 99% */ /* Background Colors */ /* 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches…) */ /* 'Filled' UI elements (Checkboxes, Radios, ProgressBars…) */ /* Toolbar and Tools */ /* Tabs Navigation Background Color */ /* User system messages (errors, warnings, successes, notices) */ /* Highlight Colors, RGBA Colors include hex fallback on `#fff` for IE 8 */ /* Foreground Colors */ /* Primary 'Progressive' Color, Background Color and states */ /* = `filter: brightness( 109% )` */ /* 'Destructive' Color, Background Color and states */ /* ~= `filter: brightness( 120% )` */ /* Secondary Color and states (links only) */ /* User system messages (errors, warnings, successes, notices) */ /* Toolbar and Tools */ /* Used here in combination with `:hover` background-color turning light grey */ /* Opacity */ /* = `#7d7d7d` on `background-color: #fff`; HSB 0°, 0%, 49% */ /* = `#222` on `background-color: #fff`, closest to `#202122` */ /* = `#424242` on `background-color: #fff`, closest to `#404244` */ /* == Positioning == */ /* Z-Index */ /* == Box Model properties == */ /* `@*size` variables are used for `*width` & `*height` properties */ /* values used for `min-*` are defined in `px`, see T130691 */ /* Max Widths */ /* = `460px` at `16px` base, see T95367 */ /* Border */ /* User system messages (errors, warnings, successes, notices) */ /* Border Colors */ /* See T168029 */ /* Border Styles */ /* Border Widths */ /* Border Radius */ /* Box Shadows */ /* == Typography incl. print properties == */ /* See https://design.wikimedia.org/style-guide/visual-style_typography.html */ /* Font Families */ /* To be deprecated, see T247166. */ /* Provide better operating system-specific readability, see T175877. */ /* `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576. */ /* Provide better operating system-specific monospace stack, see T209915. */ /* See T176636. */ /* Line Heights */ /* Text Shadows */ /* 'coined' effect */ /* == Other Properties == */ /* Cursors */ /* == Animation & Transition == */ /* Transitions */ /* `ease` is the initial value */ /* `ease-out` is preferably used on human initiated transitions, for example dialogs */ /* Transitions > Durations */ } /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; -moz-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* ::: Local Imports ::: */ @font-face { font-family: 'Charter'; src: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ), url( '../../fonts/Charter_regular.woff' ) format( 'woff' ); font-style: normal; font-weight: 400; text-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */ } @font-face { font-family: 'Charter'; src: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ), url( '../../fonts/Charter_bold.woff' ) format( 'woff' ); font-style: normal; font-weight: 700; text-rendering: optimizeLegibility; } /* @font-face { font-family: 'Charter'; src: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ), url( '../fonts/Charter_italic.woff' ) format( 'woff' ); font-style: italic; font-weight: 400; text-rendering: optimizeLegibility; } @font-face { font-family: 'Charter'; src: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ), url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' ); font-style: italic; font-weight: 700; text-rendering: optimizeLegibility; } */ :root { /* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */ /* stylelint-disable-line value-keyword-case */ /* Setting bold to `600` as our stack works better with it, only Lato is on the edge. Helvetica and Arial fallback gracefully to `700`, see T246791. */ } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; } body { background-color: #eaecf0; /* FIXME: var; */ color: #202122; margin: 0; font-family: -apple-system , 'BlinkMacSystemFont' , 'Segoe UI' , 'Roboto' , 'Lato' , 'Helvetica' , 'Arial' , sans-serif; font-size: 1.6rem; line-height: 1.6; } /* ::: Text Block-Level Elements ::: */ /* ... Headings ... */ h1, h2, h3, h4, h5, h6 { margin: 3.2rem 0 0; line-height: 1.25; -webkit-transition: font-size 250ms, font-weight 250ms; -moz-transition: font-size 250ms, font-weight 250ms; transition: font-size 250ms, font-weight 250ms; } h2, h3, h4, h5 { font-weight: 600; } h1, .page__title { font-family: Georgia , serif; /* Fallback */ font-size: 3.2rem; font-weight: 400; } h2 { border-bottom: 3px solid #eaecf0; padding-bottom: 2px; font-size: 2.4rem; } /* Reduce top margin when introductory headlines are following each other. */ h2 + h3 { margin-top: 1.6rem; } h3 { font-size: 2rem; } h4 { font-size: 1.8rem; } h5 { font-size: 1.6rem; } h6 { font-size: 1.6rem; font-weight: normal; } /* ... Other Block-Level Elements ... */ blockquote { border-left: 3px solid #c8ccd1; /* FIXME: var */ margin: 1.6rem 0 0; padding: 0 3.2rem; font-family: Georgia , serif; /* Fallback */ font-size: 2rem; font-style: italic; line-height: 1.5; } blockquote cite { display: block; margin-top: 0.8rem; font-family: -apple-system , 'BlinkMacSystemFont' , 'Segoe UI' , 'Roboto' , 'Lato' , 'Helvetica' , 'Arial' , sans-serif; font-size: 1.4rem; font-style: normal; } blockquote cite:before { content: '— '; } code, pre, .mw-code { font-family: 'Menlo' , 'Consolas' , 'Liberation Mono' , 'Courier New' , monospace; } hr { background: #eaecf0; display: block; height: 0.8rem; border: 0; margin: 8rem 0; } p { margin: 3.2rem 0 0; line-height: 1.5; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, p + p, ul + p, p:first-child { margin: 0.8rem 0 0; } blockquote + p { margin-top: 1.6rem; } pre, .mw-code { background-color: #f8f9fa; color: #000; border: 1px solid #a2a9b1; padding: 1.2rem 2rem; font-size: 1.4rem; white-space: pre-wrap; } /* ... Lists ... */ ol, ul { margin: 0.8rem 0; padding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */ } .content li { margin-top: 0.4rem; } .content li:first-child { margin-top: 0; } /* ... Images & Figures ... */ figure { margin: 0.8rem 0 0; } img { display: block; max-width: 100%; margin: 1.6rem 0 0; } .page--components figure { margin-left: 6.4rem; padding-top: 0.8rem; } .page--components figure img { margin-top: 0.8rem; } /* ::: Inline Elements ::: */ a { color: #36c; text-decoration: none; } a:hover { text-decoration: underline; } a:active { color: #2a4b8d; } b, strong { font-weight: 600; } code { background-color: #f8f9fa; display: inline-block; padding: 0.2rem 0.4rem; font-size: 1.4rem; } small { font-size: 1.3rem; } sub, sup { font-size: 1.1rem; } /* ::: General Classes ::: */ /* ::: Text for Screen Readers only ::: */ .is-aural { display: block; position: absolute; clip: rect( 1px, 1px, 1px, 1px ); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; } .is-aural.is-focusable:active, .is-aural.is-focusable:focus { position: static; clip: auto; width: auto; height: auto; margin: 0; text-decoration: underline; overflow: visible; } .clearfix:before, .clearfix:after, .page:before, .page:after, .content-box:before, .content-box:after, .color-palette:before, .color-palette:after, .figures-do-dont:before, .figures-do-dont:after, .content__illustration-style .figure--full:before, .content__illustration-style .figure--full:after { content: ' '; display: table; } .clearfix:after, .page:after, .content-box:after, .color-palette:after, .figures-do-dont:after, .content__illustration-style .figure--full:after { clear: both; } /* ::: Text-formatting ::: */ +/* Support Blink based browsers. */ +/* They use `outline` for focus styles, we're only amending the color here, see T245887. */ +:focus { + outline-color: #36c; +} .is-complementary, .is-subtle { color: #72777d; } .is-complementary { font-size: 1.4rem; } ::-webkit-input-placeholder { color: #72777d; opacity: 1; } :-moz-placeholder { color: #72777d; opacity: 1; } ::-moz-placeholder { color: #72777d; opacity: 1; } :-ms-input-placeholder { color: #72777d; opacity: 1; } ::-ms-input-placeholder { color: #72777d; opacity: 1; } ::placeholder, .is-placeholder { color: #72777d; opacity: 1; } .content-box { position: relative; margin-right: auto; margin-left: auto; padding-left: 1.6rem; /* FIXME: var( --grid-padding ); */ padding-right: 1.6rem; } /* ::: Structure ::: */ .header { position: fixed; top: 0; left: 0; right: 0; min-height: 6.4rem; line-height: 6.4rem; } .site__title { color: #202122; margin-top: 0; height: 6.4rem; font-family: -apple-system , 'BlinkMacSystemFont' , 'Segoe UI' , 'Roboto' , 'Lato' , 'Helvetica' , 'Arial' , sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.5px; } .site__title a { color: inherit; display: inline-block; padding: 1.2rem 3.2rem 0; -webkit-transition: color 250ms; -moz-transition: color 250ms; transition: color 250ms; } .site__title a:hover { color: #000; /* --color-base-emphasized */ text-decoration: none; } .site__org { display: block; } .site__project { font-weight: 600; } /* ... Navigation button ... */ .btn--nav-main { position: absolute; top: 1.2rem; width: 4.2rem; height: 4.2rem; cursor: pointer; } /* Fake hamburger icon */ .btn--nav-main i { display: block; height: 4.2rem; -webkit-transition: color 250ms, -webkit-box-shadow 250ms; transition: color 250ms, -webkit-box-shadow 250ms; -moz-transition: color 250ms, box-shadow 250ms, -moz-box-shadow 250ms; transition: color 250ms, box-shadow 250ms; transition: color 250ms, box-shadow 250ms, -webkit-box-shadow 250ms, -moz-box-shadow 250ms; } .btn--nav-main i:before, .btn--nav-main i:after { content: ''; background-color: #54595d; width: 2rem; height: 2px; position: absolute; top: 0.4rem; left: 0; } .btn--nav-main i:after { top: 1.1rem; -webkit-box-shadow: 0 0.7rem 0 #54595d; -moz-box-shadow: 0 0.7rem 0 #54595d; box-shadow: 0 0.7rem 0 #54595d; } .btn--nav-main i:hover:before, .btn--nav-main i:hover:after { background-color: #000; /* --color-base-emphasized */ } .btn--nav-main i:hover:after { -webkit-box-shadow: 0 0.7rem 0 #000; -moz-box-shadow: 0 0.7rem 0 #000; box-shadow: 0 0.7rem 0 #000; } .btn--nav-main span { display: block; position: absolute; clip: rect( 1px, 1px, 1px, 1px ); width: 1px; height: 1px; margin: -1px; overflow: hidden; } /* ... GitHub Contribute Link ... */ .lnk--contribute { font-size: 1.4rem; line-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */ } /* ... Content ... */ .page { background-color: #fff; position: relative; margin-top: 6.4rem; padding: 6.4rem 0; -webkit-box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 ); -moz-box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 ); box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 ); overflow-y: hidden; } .content { float: left; } .col { float: left; position: relative; min-height: 1px; } .col--start { padding: 0; } .col--end { padding: 0; } /* ... Main Navigation ... */ .nav--main { background-color: #fff; /* needed for menu appearance on mobile below */ /* margin-top: 6.4rem; */ } .nav--main li:not( .is-on ) ul, .trigger--nav-main { display: none; } .nav--main ol, .nav--main ul { padding: 0; } .nav--main ol:first-child { margin: 0; } .nav--main li { padding: 0; list-style: none none; } .nav--main > ol > li { margin-bottom: 0.4rem; } .nav--main a { color: #202122; display: block; padding: 0.8rem 1.2rem; font-size: 1.6rem; text-decoration: none; -webkit-transition: background-color 250ms, color 250ms, padding 250ms; -moz-transition: background-color 250ms, color 250ms, padding 250ms; transition: background-color 250ms, color 250ms, padding 250ms; } .nav--main a:hover, .nav--main a:focus { background-color: #f8f9fa; color: #000; } .nav--main .is-on > a { background-color: #eaf3ff; color: #36c; /* border-left: 2px solid var( --color-primary ); */ -moz-border-radius: 2px; border-radius: 2px; font-weight: 600; cursor: default; } .nav__sub-items { margin-top: 1.2rem; margin-bottom: 1em; /* FIXME: replace with rem and mt */ } .nav__sub-items > .nav__sub-item { margin-left: 3.6rem; } .nav--main .nav__sub-items ul { margin: 0; } .nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */ color: #54595d; border-left: 1px solid #eaecf0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; padding-left: 1.6rem; font-size: 1.4rem; -webkit-transition: background-color 250ms, color 250ms; -moz-transition: background-color 250ms, color 250ms; transition: background-color 250ms, color 250ms; } .nav--main .nav__sub-item.is-on > a { background-color: #fff; color: #000; border-left-color: #000; font-weight: 600; } .nav--main .nav__sub-item .nav__sub-item a { padding-left: 3.6rem; } /* ::: Content ::: */ .page__parent-title { color: #72777d; margin-top: -2.8rem; } .page__title { margin-top: -0.8rem; } .page__parent-title + .page__title { margin-top: -0.4rem; } .page__tagline { margin-top: 1.2rem; font-size: 2rem; font-style: italic; font-weight: 100; } /* Remove, doesn't provide good styling .page__lead { font-size: 1.8rem; } */ .figures--full { background-color: #f8f9fa; } .figure__caption, .heading__description { color: #72777d; clear: both; display: block; font-size: 1.3rem; } .figure__caption { padding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */ font-style: italic; } .figure__caption:empty { display: none; } .heading__description { float: right; margin-top: -1.9rem; } .heading__description + * { clear: both; } /* ... “Do” & “Don't” figures ... */ .figures-do-dont { margin-top: 1.6rem; } .figures-do-dont .figure { background-color: #eaecf0; -moz-border-radius-topleft: 2px; border-top-left-radius: 2px; -moz-border-radius-topright: 2px; border-top-right-radius: 2px; } .figures-do-dont .figure--dont { border-left: 1px solid #fff; } .figures-do-dont .figure__caption { background-color: #fff; display: block; border-top-width: 0.8rem; border-top-style: solid; padding-right: 0.8em; } .figure--do .figure__caption, .do { border-top-color: #00af89; } .figure--dont .figure__caption, .dont { border-top-color: #d33; } .do, .dont { font-style: normal; font-weight: 600; } .do:before, .dont:before { display: inline-block; margin-right: 0.4rem; padding-top: 0.4rem; font-size: 2.1rem; line-height: 1rem; vertical-align: top; } .do { color: #14866d; } .do:before { content: '✓'; } .dont { color: #d33; } .dont:before { content: '×'; } /* ... Color ... */ .color-palette { margin: 2.4rem 0 0; padding: 0; } .color-palette + .color-palette { margin-top: 0; } .color { color: #000; list-style: none none; display: block; float: left; position: relative; width: 61.8%; height: 16rem; margin-bottom: 3.2rem; padding: 1.2rem; border: 1px solid #fff; -moz-border-radius: 2px; border-radius: 2px; font-size: 1.4rem; } .color--dark, .color__wcag-level span { color: #fff; } .color--dark .color__wcag-level span { color: #000; } .color-palette .color:first-child { margin-top: 0.4rem; } .color-palette--overview .color { width: 6.4rem; height: 6.2rem; margin-top: 0.8rem; margin-right: 1.2rem; margin-bottom: 2.4rem; -moz-border-radius: 3.2rem; border-radius: 3.2rem; cursor: default; } .color-palette--overview .color:first-child { margin-top: 0.8rem; } .color-palette--overview .color--emphasized { width: 7.2rem; height: 7rem; margin-top: 0; -moz-border-radius: 7.2rem; border-radius: 7.2rem; padding-top: 2rem; } .color-palette--base .color { margin-right: 1.35rem; } .color-section .color .color-code--hsb { -webkit-transition: opacity 250ms; -moz-transition: opacity 250ms; transition: opacity 250ms; } .color-section .color:hover .color-code--hsb { opacity: 1; } .color__name { display: block; position: absolute; bottom: 1.2rem; left: 1.2rem; font-size: 3.2rem; font-weight: 100; } .color-palette--overview .color__name { position: relative; bottom: auto; left: auto; padding-top: 1.2rem; font-size: 2.4rem; line-height: 1; } .color__type, .color-code.color-code--rgb, .color-palette--overview .color__name, .color-palette--overview .color-code { display: none; } .color-code { background-color: inherit; display: block; padding: 0; font-family: -apple-system , 'BlinkMacSystemFont' , 'Segoe UI' , 'Roboto' , 'Lato' , 'Helvetica' , 'Arial' , sans-serif; } .color-code--hsb { opacity: 0; } @supports ( --css: variables ) { .color-hint { white-space: nowrap; } .color-hint:before { content: ''; background-color: var( --color-hint ); display: inline-block; width: 1.2rem; height: 1.2rem; margin: 0 0.4rem 0.3rem 0.2rem; -moz-border-radius: 50%; border-radius: 50%; vertical-align: text-bottom; cursor: help; } .color-hint--base100:before { border: 1px solid #a2a9b1; } } /* ... Icon ... */ .icon { display: inline-block; width: 2rem; height: 2rem; margin: 0 0.2rem; vertical-align: text-bottom; } .icon--indicator { width: 1.2rem; height: 1.2rem; margin-bottom: 0.2rem; } .icon--intermediate { width: 1.6rem; height: 1.6rem; margin-bottom: 0.2rem; } /* ... Components ... */ /* .page--components h2 { border-bottom: 0; padding-bottom: 0; } */ .components__designing { position: relative; } .components__designing:after { content: ''; background: url( ../../img/components/legend_16-8.svg ) no-repeat; position: absolute; bottom: 0; right: 6.4rem; width: 13.2rem; height: 6.4rem; } .page--components-messages .components__intro { max-width: 700px; margin-left: auto; margin-right: auto; } /* ... Resources ... */ .resources-table { display: table; width: 100%; margin-top: 2.4rem; border-collapse: collapse; } .resources-table__head, .resources-table__body { display: table-row; border-bottom: 1px solid #a2a9b1; } .resources-table__head { background-color: #eaecf0; } .resources-table__head h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; font-size: 2.1rem; font-weight: 400; } .resources-table__cell { display: table-cell; padding: 1.6rem 1.6rem 1.6rem 0; } .resources-table__head .resources-table__cell:first-child { padding-left: 1.6rem; } .lnk-resource { white-space: nowrap; } /* ::: Footer ::: */ .footer { color: #202122; padding: 2.4rem 0; font-size: 1.3rem; } .footer__list { padding: 0; } .footer__list:first-child { margin: 0; } .footer__list:after { content: ' '; display: block; clear: both; } .footer__list li { list-style: none none; display: block; padding: 0.8rem 0 0; } .footer__list li:first-child { padding-top: 0; } .footer__list + p { margin-top: 1.2rem; } .footer__list--connect a { font-weight: 600; } .lnk--wikimedia-project { display: inline-block; padding: 0.4rem 0; text-transform: uppercase; } /* ::: Page-specific Styles ::: */ /* ... Homepage ... */ .page--home .page__title { border: 0; padding: 0; } /* ... “Design principles – Accessibility” ... */ .page--design-principles-accessibility .nav--main .is-on > a { cursor: pointer; } .page--design-principles-accessibility h3 { padding-right: 15%; } /* ... “Typography” ... */ .page--visual-style-typography .figures-do-dont .figure__contents { padding: 4.2rem 3.6rem; } .figures-do-dont--contrast .figure--dont { color: #a2a9b1; } /* ... Typography Styles ... */ .typography-styles dt { display: inline-block; color: #72777d; min-width: 10rem; margin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */ font-size: 1.3rem; font-weight: 600; vertical-align: top; } .typography-styles .typography-styles__code { margin-bottom: 0; } .typography-styles dd { display: inline; } .typography-styles dd > * { display: inline-block; margin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */ } .typography-styles .figure__caption { padding-top: 0; /* Remove `padding` from elements like figure caption */ } .typography-styles dd:after { content: '\A'; white-space: pre; } .typography-styles + hr { margin-top: 4rem; margin-bottom: 4rem; } /* ... “Icons” ... */ .page--visual-style-icons img { /* FIXME: generalize image styles */ background-color: #eaecf0; /* FIXME: var; */ padding: 2.4rem; } /* ::: Dynamic content ::: */ .fonts-loaded cite, .fonts-loaded .site__title, .fonts-loaded .color-code { font-family: -apple-system , 'BlinkMacSystemFont' , 'Segoe UI' , 'Roboto' , 'Lato' , 'Helvetica' , 'Arial' , sans-serif; } /* ::: Text Block-Level Elements ::: */ .fonts-loaded .page__title, .fonts-loaded blockquote, .fonts-loaded .typography-styles h1 { font-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */ } /* ::: Media Queries ::: */ /* ... Smartphone only ... */ @media ( max-width: 767px ) { .nav--main { position: absolute; top: -3.2rem; left: -1.6rem; right: -1.6rem; padding-bottom: 1.6rem; -webkit-box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); -moz-box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */ z-index: 1; -webkit-transform: translateY( -200% ); -moz-transform: translateY( -200% ); -ms-transform: translateY( -200% ); transform: translateY( -200% ); -webkit-transition: left 250ms, right 250ms, -webkit-transform 250ms; transition: left 250ms, right 250ms, -webkit-transform 250ms; -moz-transition: left 250ms, right 250ms, transform 250ms, -moz-transform 250ms; transition: left 250ms, right 250ms, transform 250ms; transition: left 250ms, right 250ms, transform 250ms, -webkit-transform 250ms, -moz-transform 250ms; } .trigger--nav-main:checked + .nav--main { -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); transform: translateY( 0 ); } .page__title { margin-top: -0.4rem; font-size: 2.8rem; } .typography-styles dt { display: block; margin-left: 0; } /* ... Components ... */ .page--components .components__states { margin-left: 0; } /* ... Resources ... */ .resources-table, .resources-table__head, .resources-table__body, .resources-table__cell { display: block; } .resources-table__head { margin-left: -1.6rem; margin-right: -1.6rem; } .resources-table__head .resources-table__cell:empty { display: none; } .resources-table__body { padding-left: 0; } .resources-table__cell { padding-top: 0.8rem; padding-bottom: 0.8rem; } } /* ... Smartphone portrait ... */ @media ( min-width: 240px ) { .content-box, .site__title a, .nav--main a { -webkit-transition-property: background-color, padding; -moz-transition-property: background-color, padding; transition-property: background-color, padding; -webkit-transition-duration: 250ms; -moz-transition-duration: 250ms; transition-duration: 250ms; } .site__title { margin-left: 4.2rem; } .site__title a { padding-left: 0; } .lnk--contribute span { display: none; } .nav--main a { padding-left: 1.6rem; padding-right: 1.6rem; } .col--start, .col--end { width: 100%; } .figure--full, .resources-table__head { margin-left: -1.6rem; margin-right: -1.6rem; } .figure--full .figure__caption { margin-left: 1.6rem; margin-right: 1.6rem; } .figure--this-is-for-everyone img, .figure--trustworthy-yet-joyful img { width: 100%; max-width: 568px; margin-left: auto; margin-right: auto; } .figure--illustrations-header img { width: 100%; } .figure--illustrations-header + .figure--illustrations-header, .figure--illustrations-header + .figure--illustrations-header img { margin-top: 0; } .color { width: 61.8%; } .color-palette--base .color:nth-child( 3n+4 ) { clear: both; } .color-palette--base .color { margin-right: 1.6rem; } .color-palette--overview.color-palette--base .color--emphasized { margin-right: 1.1rem; margin-left: -0.2rem; } .page--components figure { margin-left: 4.2rem; } } /* ... Smartphone+ portrait ... */ @media ( min-width: 414px ) { .content-box { padding-left: 3.2rem; padding-right: 3.2rem; } .nav--main { left: -3.2rem; right: -3.2rem; } .nav--main a { padding-left: 3.2rem; padding-right: 3.2rem; } .figure--full, .resources-table__head { margin-left: -3.2rem; margin-right: -3.2rem; } .figure--full .figure__caption { margin-left: 3.2rem; margin-right: 3.2rem; } .resources-table__head .resources-table__cell:first-child { padding-left: 3.2rem; padding-right: 3.2rem; } .footer__list li { display: list-item; float: left; padding: 0 0.8rem 0 0; } .footer__list li:after { content: '\2022'; /* bullet dot: '•' */ color: #72777d; padding: 0 0 0 0.8rem; font-weight: 100; } .footer__list li:last-child:after { content: ''; padding: 0; } .color { width: 16rem; margin-right: 2.4rem; } } /* ... Smartphone landscape ... */ @media ( min-width: 568px ) { .lnk--contribute { display: block; position: absolute; bottom: 1.5rem; /* Not on 8px base due to `line-height` setting */ right: 3.2rem; text-align: right; } .lnk--contribute span { display: inline; opacity: 0; -webkit-transition: opacity 250ms; -moz-transition: opacity 250ms; transition: opacity 250ms; } .figures-do-dont .figure { max-width: 61.8%; } .figure--this-is-for-everyone img, .figure--trustworthy-yet-joyful img { max-width: none; } .figure--illustrations-header { float: left; width: 44.4%; } .figure--illustrations-header + .figure--illustrations-header { width: 55.55%; margin-top: 0.8rem; } .figure--illustrations-header + .figure--illustrations-header img { margin-top: 1.6rem; } } /* ... Tablet ... */ @media ( min-width: 768px ) { img { -moz-border-radius: 2px; border-radius: 2px; } .content-box { width: 100%; max-width: 960px; } .btn--nav-main { display: none; } .site__title { float: left; margin-left: 0; } .site__title a, .nav--main a { padding-left: 1.6rem; padding-right: 1.6rem; } .lnk--contribute span { display: inline; opacity: 1; } .col--start { width: 20.8rem; z-index: 1; -webkit-transition: width 250ms; -moz-transition: width 250ms; transition: width 250ms; } .col--end { margin-left: -20.8rem; padding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */ } .nav--main { left: auto; right: auto; } .figure--full, .figure--full .figure__caption { margin-left: 0; margin-right: 0; } .figures-do-dont .figure { float: left; width: 50%; } .color-palette--base .color:nth-child( 3n+4 ) { clear: unset; } /* ... “Illustrations” ... */ .illustrations-case-study img { float: left; width: 33.33%; } .page--components figure { margin-left: 6.4rem; } } /* ... Tablet+ / Netbook ... */ @media ( min-width: 992px ) { .content-box { width: 100%; max-width: 1140px; } .site__title a, .nav--main a { padding-left: 3.2rem; padding-right: 3.2rem; } .col--start { width: 24rem; } .col--end { margin-left: -24rem; padding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */ } .color-palette--overview:first-child { margin-top: 2.4rem; } .color { margin-right: 2.4rem; } .color-palette--base .color { margin-right: 1.35rem; } .color-palette--overview.color-palette--base .color--emphasized { margin-right: 1.35rem; margin-left: 0; } .color-palette--overview.color-palette--red:before, .color-palette--overview.color-palette--red:after, .color-palette--overview.color-palette--green:before, .color-palette--overview.color-palette--green:after { content: ''; display: none; } .color-palette--overview.color-palette--red:after, .color-palette--overview.color-palette--green:after, .color-section .color:nth-child( 3n+4 ) { clear: both; } /* ... Resources ... */ .resources-table__body .resources-table__cell { -webkit-transition: background-color 250ms; -moz-transition: background-color 250ms; transition: background-color 250ms; } .resources-table__body:hover .resources-table__cell { background-color: #f8f9fa; } .resources-table__head .resources-table__cell:first-child, .resources-table__body .resources-table__cell:first-child { padding-left: 1.6rem; } } @media ( min-width: 1200px ) { .content-box { width: 1140px; } .col--start { width: 25.6rem; } .col--end { margin-left: -25.6rem; padding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */ } } diff --git a/css/build/wmui-style-guide.min.css b/css/build/wmui-style-guide.min.css index bd81ce4..1694598 100644 --- a/css/build/wmui-style-guide.min.css +++ b/css/build/wmui-style-guide.min.css @@ -1,2 +1,2 @@ -/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}@font-face{font-family:Charter;src:url(../../fonts/Charter_regular.woff2) format("woff2"),url(../../fonts/Charter_regular.woff) format("woff");font-style:normal;font-weight:400;text-rendering:optimizeLegibility}@font-face{font-family:Charter;src:url(../../fonts/Charter_bold.woff2) format("woff2"),url(../../fonts/Charter_bold.woff) format("woff");font-style:normal;font-weight:700;text-rendering:optimizeLegibility}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background-color:#eaecf0;color:#202122;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6}h1,h2,h3,h4,h5,h6{margin:3.2rem 0 0;line-height:1.25;-webkit-transition:font-size .25s,font-weight .25s;-moz-transition:font-size .25s,font-weight .25s;transition:font-size .25s,font-weight .25s}h2,h3,h4,h5{font-weight:600}.page__title,h1{font-family:Georgia,serif;font-size:3.2rem;font-weight:400}h2{border-bottom:3px solid #eaecf0;padding-bottom:2px;font-size:2.4rem}h2+h3{margin-top:1.6rem}h3{font-size:2rem}h4{font-size:1.8rem}h5,h6{font-size:1.6rem}h6{font-weight:400}blockquote{border-left:3px solid #c8ccd1;margin:1.6rem 0 0;padding:0 3.2rem;font-family:Georgia,serif;font-size:2rem;font-style:italic;line-height:1.5}blockquote cite{display:block;margin-top:.8rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.4rem;font-style:normal}blockquote cite:before{content:"— "}.mw-code,code,pre{font-family:Menlo,Consolas,Liberation Mono,Courier New,monospace}hr{background:#eaecf0;display:block;height:.8rem;border:0;margin:8rem 0}p{margin:3.2rem 0 0;line-height:1.5}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,p+p,p:first-child,ul+p{margin:.8rem 0 0}blockquote+p{margin-top:1.6rem}.mw-code,pre{background-color:#f8f9fa;color:#000;border:1px solid #a2a9b1;padding:1.2rem 2rem;font-size:1.4rem;white-space:pre-wrap}ol,ul{margin:.8rem 0;padding:0 0 0 1.8rem}.content li{margin-top:.4rem}.content li:first-child{margin-top:0}figure{margin:.8rem 0 0}img{display:block;max-width:100%;margin:1.6rem 0 0}.page--components figure{margin-left:6.4rem;padding-top:.8rem}.page--components figure img{margin-top:.8rem}a{color:#36c;text-decoration:none}a:hover{text-decoration:underline}a:active{color:#2a4b8d}b,strong{font-weight:600}code{background-color:#f8f9fa;display:inline-block;padding:.2rem .4rem;font-size:1.4rem}small{font-size:1.3rem}sub,sup{font-size:1.1rem}.is-aural{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden}.is-aural.is-focusable:active,.is-aural.is-focusable:focus{position:static;clip:auto;width:auto;height:auto;margin:0;text-decoration:underline;overflow:visible}.clearfix:after,.clearfix:before,.color-palette:after,.color-palette:before,.content-box:after,.content-box:before,.content__illustration-style .figure--full:after,.content__illustration-style .figure--full:before,.figures-do-dont:after,.figures-do-dont:before,.page:after,.page:before{content:" ";display:table}.clearfix:after,.color-palette:after,.content-box:after,.content__illustration-style .figure--full:after,.figures-do-dont:after,.page:after{clear:both}.is-complementary,.is-subtle{color:#72777d}.is-complementary{font-size:1.4rem}::-webkit-input-placeholder{color:#72777d;opacity:1}:-moz-placeholder,::-moz-placeholder{color:#72777d;opacity:1}:-ms-input-placeholder{color:#72777d;opacity:1}::-ms-input-placeholder{color:#72777d;opacity:1}.is-placeholder,::placeholder{color:#72777d;opacity:1}.content-box{position:relative;margin-right:auto;margin-left:auto;padding-left:1.6rem;padding-right:1.6rem}.header{position:fixed;top:0;left:0;right:0;min-height:6.4rem;line-height:6.4rem}.site__title{color:#202122;margin-top:0;height:6.4rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;letter-spacing:.5px}.site__title a{color:inherit;display:inline-block;padding:1.2rem 3.2rem 0;-webkit-transition:color .25s;-moz-transition:color .25s;transition:color .25s}.site__title a:hover{color:#000;text-decoration:none}.site__org{display:block}.site__project{font-weight:600}.btn--nav-main{position:absolute;top:1.2rem;width:4.2rem;height:4.2rem;cursor:pointer}.btn--nav-main i{display:block;height:4.2rem;-webkit-transition:color .25s,-webkit-box-shadow .25s;transition:color .25s,-webkit-box-shadow .25s;-moz-transition:color .25s,box-shadow .25s,-moz-box-shadow .25s;transition:color .25s,box-shadow .25s;transition:color .25s,box-shadow .25s,-webkit-box-shadow .25s,-moz-box-shadow .25s}.btn--nav-main i:after,.btn--nav-main i:before{content:"";background-color:#54595d;width:2rem;height:2px;position:absolute;top:.4rem;left:0}.btn--nav-main i:after{top:1.1rem;-webkit-box-shadow:0 .7rem 0 #54595d;-moz-box-shadow:0 .7rem 0 #54595d;box-shadow:0 .7rem 0 #54595d}.btn--nav-main i:hover:after,.btn--nav-main i:hover:before{background-color:#000}.btn--nav-main i:hover:after{-webkit-box-shadow:0 .7rem 0 #000;-moz-box-shadow:0 .7rem 0 #000;box-shadow:0 .7rem 0 #000}.btn--nav-main span{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;overflow:hidden}.lnk--contribute{font-size:1.4rem;line-height:1.4rem}.page{background-color:#fff;position:relative;margin-top:6.4rem;padding:6.4rem 0;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);box-shadow:0 1px 4px 0 rgba(0,0,0,.25);overflow-y:hidden}.col,.content{float:left}.col{position:relative;min-height:1px}.col--end,.col--start{padding:0}.nav--main{background-color:#fff}.nav--main li:not(.is-on) ul,.trigger--nav-main{display:none}.nav--main ol,.nav--main ul{padding:0}.nav--main ol:first-child{margin:0}.nav--main li{padding:0;list-style:none none}.nav--main>ol>li{margin-bottom:.4rem}.nav--main a{color:#202122;display:block;padding:.8rem 1.2rem;font-size:1.6rem;text-decoration:none;-webkit-transition:background-color .25s,color .25s,padding .25s;-moz-transition:background-color .25s,color .25s,padding .25s;transition:background-color .25s,color .25s,padding .25s}.nav--main a:focus,.nav--main a:hover{background-color:#f8f9fa;color:#000}.nav--main .is-on>a{background-color:#eaf3ff;color:#36c;-moz-border-radius:2px;border-radius:2px;font-weight:600;cursor:default}.nav__sub-items{margin-top:1.2rem;margin-bottom:1em}.nav__sub-items>.nav__sub-item{margin-left:3.6rem}.nav--main .nav__sub-items ul{margin:0}.nav--main .nav__sub-items a{color:#54595d;border-left:1px solid #eaecf0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;padding-left:1.6rem;font-size:1.4rem;-webkit-transition:background-color .25s,color .25s;-moz-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.nav--main .nav__sub-item.is-on>a{background-color:#fff;color:#000;border-left-color:#000;font-weight:600}.nav--main .nav__sub-item .nav__sub-item a{padding-left:3.6rem}.page__parent-title{color:#72777d;margin-top:-2.8rem}.page__title{margin-top:-.8rem}.page__parent-title+.page__title{margin-top:-.4rem}.page__tagline{margin-top:1.2rem;font-size:2rem;font-style:italic;font-weight:100}.figures--full{background-color:#f8f9fa}.figure__caption,.heading__description{color:#72777d;clear:both;display:block;font-size:1.3rem}.figure__caption{padding-top:.8rem;font-style:italic}.figure__caption:empty{display:none}.heading__description{float:right;margin-top:-1.9rem}.heading__description+*{clear:both}.figures-do-dont{margin-top:1.6rem}.figures-do-dont .figure{background-color:#eaecf0;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px}.figures-do-dont .figure--dont{border-left:1px solid #fff}.figures-do-dont .figure__caption{background-color:#fff;display:block;border-top-width:.8rem;border-top-style:solid;padding-right:.8em}.do,.figure--do .figure__caption{border-top-color:#00af89}.dont,.figure--dont .figure__caption{border-top-color:#d33}.do,.dont{font-style:normal;font-weight:600}.do:before,.dont:before{display:inline-block;margin-right:.4rem;padding-top:.4rem;font-size:2.1rem;line-height:1rem;vertical-align:top}.do{color:#14866d}.do:before{content:"✓"}.dont{color:#d33}.dont:before{content:"×"}.color-palette{margin:2.4rem 0 0;padding:0}.color-palette+.color-palette{margin-top:0}.color{color:#000;list-style:none none;display:block;float:left;position:relative;width:61.8%;height:16rem;margin-bottom:3.2rem;padding:1.2rem;border:1px solid #fff;-moz-border-radius:2px;border-radius:2px;font-size:1.4rem}.color--dark,.color__wcag-level span{color:#fff}.color--dark .color__wcag-level span{color:#000}.color-palette .color:first-child{margin-top:.4rem}.color-palette--overview .color{width:6.4rem;height:6.2rem;margin-top:.8rem;margin-right:1.2rem;margin-bottom:2.4rem;-moz-border-radius:3.2rem;border-radius:3.2rem;cursor:default}.color-palette--overview .color:first-child{margin-top:.8rem}.color-palette--overview .color--emphasized{width:7.2rem;height:7rem;margin-top:0;-moz-border-radius:7.2rem;border-radius:7.2rem;padding-top:2rem}.color-palette--base .color{margin-right:1.35rem}.color-section .color .color-code--hsb{-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.color-section .color:hover .color-code--hsb{opacity:1}.color__name{display:block;position:absolute;bottom:1.2rem;left:1.2rem;font-size:3.2rem;font-weight:100}.color-palette--overview .color__name{position:relative;bottom:auto;left:auto;padding-top:1.2rem;font-size:2.4rem;line-height:1}.color-code.color-code--rgb,.color-palette--overview .color-code,.color-palette--overview .color__name,.color__type{display:none}.color-code{background-color:inherit;display:block;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.color-code--hsb{opacity:0}@supports (--css:variables){.color-hint{white-space:nowrap}.color-hint:before{content:"";background-color:var(--color-hint);display:inline-block;width:1.2rem;height:1.2rem;margin:0 .4rem .3rem .2rem;-moz-border-radius:50%;border-radius:50%;vertical-align:text-bottom;cursor:help}.color-hint--base100:before{border:1px solid #a2a9b1}}.icon{display:inline-block;width:2rem;height:2rem;margin:0 .2rem;vertical-align:text-bottom}.icon--indicator{width:1.2rem;height:1.2rem;margin-bottom:.2rem}.icon--intermediate{width:1.6rem;height:1.6rem;margin-bottom:.2rem}.components__designing{position:relative}.components__designing:after{content:"";background:url(../../img/components/legend_16-8.svg) no-repeat;position:absolute;bottom:0;right:6.4rem;width:13.2rem;height:6.4rem}.page--components-messages .components__intro{max-width:700px;margin-left:auto;margin-right:auto}.resources-table{display:table;width:100%;margin-top:2.4rem;border-collapse:collapse}.resources-table__body,.resources-table__head{display:table-row;border-bottom:1px solid #a2a9b1}.resources-table__head{background-color:#eaecf0}.resources-table__head h2{margin-top:0;border-bottom:0;padding-bottom:0;font-size:2.1rem;font-weight:400}.resources-table__cell{display:table-cell;padding:1.6rem 1.6rem 1.6rem 0}.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}.lnk-resource{white-space:nowrap}.footer{color:#202122;padding:2.4rem 0;font-size:1.3rem}.footer__list{padding:0}.footer__list:first-child{margin:0}.footer__list:after{content:" ";display:block;clear:both}.footer__list li{list-style:none none;display:block;padding:.8rem 0 0}.footer__list li:first-child{padding-top:0}.footer__list+p{margin-top:1.2rem}.footer__list--connect a{font-weight:600}.lnk--wikimedia-project{display:inline-block;padding:.4rem 0;text-transform:uppercase}.page--home .page__title{border:0;padding:0}.page--design-principles-accessibility .nav--main .is-on>a{cursor:pointer}.page--design-principles-accessibility h3{padding-right:15%}.page--visual-style-typography .figures-do-dont .figure__contents{padding:4.2rem 3.6rem}.figures-do-dont--contrast .figure--dont{color:#a2a9b1}.typography-styles dt{display:inline-block;color:#72777d;min-width:10rem;margin:0 0 3.2rem 1.6rem;font-size:1.3rem;font-weight:600;vertical-align:top}.typography-styles .typography-styles__code{margin-bottom:0}.typography-styles dd{display:inline}.typography-styles dd>*{display:inline-block;margin-top:0}.typography-styles .figure__caption{padding-top:0}.typography-styles dd:after{content:"\A";white-space:pre}.typography-styles+hr{margin-top:4rem;margin-bottom:4rem}.page--visual-style-icons img{background-color:#eaecf0;padding:2.4rem}.fonts-loaded .color-code,.fonts-loaded .site__title,.fonts-loaded cite{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.fonts-loaded .page__title,.fonts-loaded .typography-styles h1,.fonts-loaded blockquote{font-family:Charter,Georgia,serif}@media (max-width:767px){.nav--main{position:absolute;top:-3.2rem;left:-1.6rem;right:-1.6rem;padding-bottom:1.6rem;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);box-shadow:0 2px 2px 0 rgba(0,0,0,.25);z-index:1;-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,-webkit-transform .25s;-moz-transition:left .25s,right .25s,transform .25s,-moz-transform .25s;transition:left .25s,right .25s,transform .25s;transition:left .25s,right .25s,transform .25s,-webkit-transform .25s,-moz-transform .25s}.trigger--nav-main:checked+.nav--main{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.page__title{margin-top:-.4rem;font-size:2.8rem}.typography-styles dt{display:block;margin-left:0}.page--components .components__states{margin-left:0}.resources-table,.resources-table__body,.resources-table__cell,.resources-table__head{display:block}.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.resources-table__head .resources-table__cell:empty{display:none}.resources-table__body{padding-left:0}.resources-table__cell{padding-top:.8rem;padding-bottom:.8rem}}@media (min-width:240px){.content-box,.nav--main a,.site__title a{-webkit-transition-property:background-color,padding;-moz-transition-property:background-color,padding;transition-property:background-color,padding;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;transition-duration:.25s}.site__title{margin-left:4.2rem}.site__title a{padding-left:0}.lnk--contribute span{display:none}.nav--main a{padding-left:1.6rem;padding-right:1.6rem}.col--end,.col--start{width:100%}.figure--full,.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.figure--full .figure__caption{margin-left:1.6rem;margin-right:1.6rem}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{width:100%;max-width:568px;margin-left:auto;margin-right:auto}.figure--illustrations-header img{width:100%}.figure--illustrations-header+.figure--illustrations-header,.figure--illustrations-header+.figure--illustrations-header img{margin-top:0}.color{width:61.8%}.color-palette--base .color:nth-child(3n+4){clear:both}.color-palette--base .color{margin-right:1.6rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.1rem;margin-left:-.2rem}.page--components figure{margin-left:4.2rem}}@media (min-width:414px){.content-box{padding-left:3.2rem;padding-right:3.2rem}.nav--main{left:-3.2rem;right:-3.2rem}.nav--main a{padding-left:3.2rem;padding-right:3.2rem}.figure--full,.resources-table__head{margin-left:-3.2rem;margin-right:-3.2rem}.figure--full .figure__caption{margin-left:3.2rem;margin-right:3.2rem}.resources-table__head .resources-table__cell:first-child{padding-left:3.2rem;padding-right:3.2rem}.footer__list li{display:list-item;float:left;padding:0 .8rem 0 0}.footer__list li:after{content:"\2022";color:#72777d;padding:0 0 0 .8rem;font-weight:100}.footer__list li:last-child:after{content:"";padding:0}.color{width:16rem;margin-right:2.4rem}}@media (min-width:568px){.lnk--contribute{display:block;position:absolute;bottom:1.5rem;right:3.2rem;text-align:right}.lnk--contribute span{display:inline;opacity:0;-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.figures-do-dont .figure{max-width:61.8%}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{max-width:none}.figure--illustrations-header{float:left;width:44.4%}.figure--illustrations-header+.figure--illustrations-header{width:55.55%;margin-top:.8rem}.figure--illustrations-header+.figure--illustrations-header img{margin-top:1.6rem}}@media (min-width:768px){img{-moz-border-radius:2px;border-radius:2px}.content-box{width:100%;max-width:960px}.btn--nav-main{display:none}.site__title{float:left;margin-left:0}.nav--main a,.site__title a{padding-left:1.6rem;padding-right:1.6rem}.lnk--contribute span{display:inline;opacity:1}.col--start{width:20.8rem;z-index:1;-webkit-transition:width .25s;-moz-transition:width .25s;transition:width .25s}.col--end{margin-left:-20.8rem;padding-left:24rem}.nav--main{left:auto;right:auto}.figure--full,.figure--full .figure__caption{margin-left:0;margin-right:0}.figures-do-dont .figure{float:left;width:50%}.color-palette--base .color:nth-child(3n+4){clear:unset}.illustrations-case-study img{float:left;width:33.33%}.page--components figure{margin-left:6.4rem}}@media (min-width:992px){.content-box{width:100%;max-width:1140px}.nav--main a,.site__title a{padding-left:3.2rem;padding-right:3.2rem}.col--start{width:24rem}.col--end{margin-left:-24rem;padding-left:27.2rem}.color-palette--overview:first-child{margin-top:2.4rem}.color{margin-right:2.4rem}.color-palette--base .color{margin-right:1.35rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.35rem;margin-left:0}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--green:before,.color-palette--overview.color-palette--red:after,.color-palette--overview.color-palette--red:before{content:"";display:none}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--red:after,.color-section .color:nth-child(3n+4){clear:both}.resources-table__body .resources-table__cell{-webkit-transition:background-color .25s;-moz-transition:background-color .25s;transition:background-color .25s}.resources-table__body:hover .resources-table__cell{background-color:#f8f9fa}.resources-table__body .resources-table__cell:first-child,.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}}@media (min-width:1200px){.content-box{width:1140px}.col--start{width:25.6rem}.col--end{margin-left:-25.6rem;padding-left:28.8rem}} +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}@font-face{font-family:Charter;src:url(../../fonts/Charter_regular.woff2) format("woff2"),url(../../fonts/Charter_regular.woff) format("woff");font-style:normal;font-weight:400;text-rendering:optimizeLegibility}@font-face{font-family:Charter;src:url(../../fonts/Charter_bold.woff2) format("woff2"),url(../../fonts/Charter_bold.woff) format("woff");font-style:normal;font-weight:700;text-rendering:optimizeLegibility}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background-color:#eaecf0;color:#202122;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6}h1,h2,h3,h4,h5,h6{margin:3.2rem 0 0;line-height:1.25;-webkit-transition:font-size .25s,font-weight .25s;-moz-transition:font-size .25s,font-weight .25s;transition:font-size .25s,font-weight .25s}h2,h3,h4,h5{font-weight:600}.page__title,h1{font-family:Georgia,serif;font-size:3.2rem;font-weight:400}h2{border-bottom:3px solid #eaecf0;padding-bottom:2px;font-size:2.4rem}h2+h3{margin-top:1.6rem}h3{font-size:2rem}h4{font-size:1.8rem}h5,h6{font-size:1.6rem}h6{font-weight:400}blockquote{border-left:3px solid #c8ccd1;margin:1.6rem 0 0;padding:0 3.2rem;font-family:Georgia,serif;font-size:2rem;font-style:italic;line-height:1.5}blockquote cite{display:block;margin-top:.8rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.4rem;font-style:normal}blockquote cite:before{content:"— "}.mw-code,code,pre{font-family:Menlo,Consolas,Liberation Mono,Courier New,monospace}hr{background:#eaecf0;display:block;height:.8rem;border:0;margin:8rem 0}p{margin:3.2rem 0 0;line-height:1.5}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,p+p,p:first-child,ul+p{margin:.8rem 0 0}blockquote+p{margin-top:1.6rem}.mw-code,pre{background-color:#f8f9fa;color:#000;border:1px solid #a2a9b1;padding:1.2rem 2rem;font-size:1.4rem;white-space:pre-wrap}ol,ul{margin:.8rem 0;padding:0 0 0 1.8rem}.content li{margin-top:.4rem}.content li:first-child{margin-top:0}figure{margin:.8rem 0 0}img{display:block;max-width:100%;margin:1.6rem 0 0}.page--components figure{margin-left:6.4rem;padding-top:.8rem}.page--components figure img{margin-top:.8rem}a{color:#36c;text-decoration:none}a:hover{text-decoration:underline}a:active{color:#2a4b8d}b,strong{font-weight:600}code{background-color:#f8f9fa;display:inline-block;padding:.2rem .4rem;font-size:1.4rem}small{font-size:1.3rem}sub,sup{font-size:1.1rem}.is-aural{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden}.is-aural.is-focusable:active,.is-aural.is-focusable:focus{position:static;clip:auto;width:auto;height:auto;margin:0;text-decoration:underline;overflow:visible}.clearfix:after,.clearfix:before,.color-palette:after,.color-palette:before,.content-box:after,.content-box:before,.content__illustration-style .figure--full:after,.content__illustration-style .figure--full:before,.figures-do-dont:after,.figures-do-dont:before,.page:after,.page:before{content:" ";display:table}.clearfix:after,.color-palette:after,.content-box:after,.content__illustration-style .figure--full:after,.figures-do-dont:after,.page:after{clear:both}:focus{outline-color:#36c}.is-complementary,.is-subtle{color:#72777d}.is-complementary{font-size:1.4rem}::-webkit-input-placeholder{color:#72777d;opacity:1}:-moz-placeholder,::-moz-placeholder{color:#72777d;opacity:1}:-ms-input-placeholder{color:#72777d;opacity:1}::-ms-input-placeholder{color:#72777d;opacity:1}.is-placeholder,::placeholder{color:#72777d;opacity:1}.content-box{position:relative;margin-right:auto;margin-left:auto;padding-left:1.6rem;padding-right:1.6rem}.header{position:fixed;top:0;left:0;right:0;min-height:6.4rem;line-height:6.4rem}.site__title{color:#202122;margin-top:0;height:6.4rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;letter-spacing:.5px}.site__title a{color:inherit;display:inline-block;padding:1.2rem 3.2rem 0;-webkit-transition:color .25s;-moz-transition:color .25s;transition:color .25s}.site__title a:hover{color:#000;text-decoration:none}.site__org{display:block}.site__project{font-weight:600}.btn--nav-main{position:absolute;top:1.2rem;width:4.2rem;height:4.2rem;cursor:pointer}.btn--nav-main i{display:block;height:4.2rem;-webkit-transition:color .25s,-webkit-box-shadow .25s;transition:color .25s,-webkit-box-shadow .25s;-moz-transition:color .25s,box-shadow .25s,-moz-box-shadow .25s;transition:color .25s,box-shadow .25s;transition:color .25s,box-shadow .25s,-webkit-box-shadow .25s,-moz-box-shadow .25s}.btn--nav-main i:after,.btn--nav-main i:before{content:"";background-color:#54595d;width:2rem;height:2px;position:absolute;top:.4rem;left:0}.btn--nav-main i:after{top:1.1rem;-webkit-box-shadow:0 .7rem 0 #54595d;-moz-box-shadow:0 .7rem 0 #54595d;box-shadow:0 .7rem 0 #54595d}.btn--nav-main i:hover:after,.btn--nav-main i:hover:before{background-color:#000}.btn--nav-main i:hover:after{-webkit-box-shadow:0 .7rem 0 #000;-moz-box-shadow:0 .7rem 0 #000;box-shadow:0 .7rem 0 #000}.btn--nav-main span{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;overflow:hidden}.lnk--contribute{font-size:1.4rem;line-height:1.4rem}.page{background-color:#fff;position:relative;margin-top:6.4rem;padding:6.4rem 0;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);box-shadow:0 1px 4px 0 rgba(0,0,0,.25);overflow-y:hidden}.col,.content{float:left}.col{position:relative;min-height:1px}.col--end,.col--start{padding:0}.nav--main{background-color:#fff}.nav--main li:not(.is-on) ul,.trigger--nav-main{display:none}.nav--main ol,.nav--main ul{padding:0}.nav--main ol:first-child{margin:0}.nav--main li{padding:0;list-style:none none}.nav--main>ol>li{margin-bottom:.4rem}.nav--main a{color:#202122;display:block;padding:.8rem 1.2rem;font-size:1.6rem;text-decoration:none;-webkit-transition:background-color .25s,color .25s,padding .25s;-moz-transition:background-color .25s,color .25s,padding .25s;transition:background-color .25s,color .25s,padding .25s}.nav--main a:focus,.nav--main a:hover{background-color:#f8f9fa;color:#000}.nav--main .is-on>a{background-color:#eaf3ff;color:#36c;-moz-border-radius:2px;border-radius:2px;font-weight:600;cursor:default}.nav__sub-items{margin-top:1.2rem;margin-bottom:1em}.nav__sub-items>.nav__sub-item{margin-left:3.6rem}.nav--main .nav__sub-items ul{margin:0}.nav--main .nav__sub-items a{color:#54595d;border-left:1px solid #eaecf0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;padding-left:1.6rem;font-size:1.4rem;-webkit-transition:background-color .25s,color .25s;-moz-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.nav--main .nav__sub-item.is-on>a{background-color:#fff;color:#000;border-left-color:#000;font-weight:600}.nav--main .nav__sub-item .nav__sub-item a{padding-left:3.6rem}.page__parent-title{color:#72777d;margin-top:-2.8rem}.page__title{margin-top:-.8rem}.page__parent-title+.page__title{margin-top:-.4rem}.page__tagline{margin-top:1.2rem;font-size:2rem;font-style:italic;font-weight:100}.figures--full{background-color:#f8f9fa}.figure__caption,.heading__description{color:#72777d;clear:both;display:block;font-size:1.3rem}.figure__caption{padding-top:.8rem;font-style:italic}.figure__caption:empty{display:none}.heading__description{float:right;margin-top:-1.9rem}.heading__description+*{clear:both}.figures-do-dont{margin-top:1.6rem}.figures-do-dont .figure{background-color:#eaecf0;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px}.figures-do-dont .figure--dont{border-left:1px solid #fff}.figures-do-dont .figure__caption{background-color:#fff;display:block;border-top-width:.8rem;border-top-style:solid;padding-right:.8em}.do,.figure--do .figure__caption{border-top-color:#00af89}.dont,.figure--dont .figure__caption{border-top-color:#d33}.do,.dont{font-style:normal;font-weight:600}.do:before,.dont:before{display:inline-block;margin-right:.4rem;padding-top:.4rem;font-size:2.1rem;line-height:1rem;vertical-align:top}.do{color:#14866d}.do:before{content:"✓"}.dont{color:#d33}.dont:before{content:"×"}.color-palette{margin:2.4rem 0 0;padding:0}.color-palette+.color-palette{margin-top:0}.color{color:#000;list-style:none none;display:block;float:left;position:relative;width:61.8%;height:16rem;margin-bottom:3.2rem;padding:1.2rem;border:1px solid #fff;-moz-border-radius:2px;border-radius:2px;font-size:1.4rem}.color--dark,.color__wcag-level span{color:#fff}.color--dark .color__wcag-level span{color:#000}.color-palette .color:first-child{margin-top:.4rem}.color-palette--overview .color{width:6.4rem;height:6.2rem;margin-top:.8rem;margin-right:1.2rem;margin-bottom:2.4rem;-moz-border-radius:3.2rem;border-radius:3.2rem;cursor:default}.color-palette--overview .color:first-child{margin-top:.8rem}.color-palette--overview .color--emphasized{width:7.2rem;height:7rem;margin-top:0;-moz-border-radius:7.2rem;border-radius:7.2rem;padding-top:2rem}.color-palette--base .color{margin-right:1.35rem}.color-section .color .color-code--hsb{-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.color-section .color:hover .color-code--hsb{opacity:1}.color__name{display:block;position:absolute;bottom:1.2rem;left:1.2rem;font-size:3.2rem;font-weight:100}.color-palette--overview .color__name{position:relative;bottom:auto;left:auto;padding-top:1.2rem;font-size:2.4rem;line-height:1}.color-code.color-code--rgb,.color-palette--overview .color-code,.color-palette--overview .color__name,.color__type{display:none}.color-code{background-color:inherit;display:block;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.color-code--hsb{opacity:0}@supports (--css:variables){.color-hint{white-space:nowrap}.color-hint:before{content:"";background-color:var(--color-hint);display:inline-block;width:1.2rem;height:1.2rem;margin:0 .4rem .3rem .2rem;-moz-border-radius:50%;border-radius:50%;vertical-align:text-bottom;cursor:help}.color-hint--base100:before{border:1px solid #a2a9b1}}.icon{display:inline-block;width:2rem;height:2rem;margin:0 .2rem;vertical-align:text-bottom}.icon--indicator{width:1.2rem;height:1.2rem;margin-bottom:.2rem}.icon--intermediate{width:1.6rem;height:1.6rem;margin-bottom:.2rem}.components__designing{position:relative}.components__designing:after{content:"";background:url(../../img/components/legend_16-8.svg) no-repeat;position:absolute;bottom:0;right:6.4rem;width:13.2rem;height:6.4rem}.page--components-messages .components__intro{max-width:700px;margin-left:auto;margin-right:auto}.resources-table{display:table;width:100%;margin-top:2.4rem;border-collapse:collapse}.resources-table__body,.resources-table__head{display:table-row;border-bottom:1px solid #a2a9b1}.resources-table__head{background-color:#eaecf0}.resources-table__head h2{margin-top:0;border-bottom:0;padding-bottom:0;font-size:2.1rem;font-weight:400}.resources-table__cell{display:table-cell;padding:1.6rem 1.6rem 1.6rem 0}.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}.lnk-resource{white-space:nowrap}.footer{color:#202122;padding:2.4rem 0;font-size:1.3rem}.footer__list{padding:0}.footer__list:first-child{margin:0}.footer__list:after{content:" ";display:block;clear:both}.footer__list li{list-style:none none;display:block;padding:.8rem 0 0}.footer__list li:first-child{padding-top:0}.footer__list+p{margin-top:1.2rem}.footer__list--connect a{font-weight:600}.lnk--wikimedia-project{display:inline-block;padding:.4rem 0;text-transform:uppercase}.page--home .page__title{border:0;padding:0}.page--design-principles-accessibility .nav--main .is-on>a{cursor:pointer}.page--design-principles-accessibility h3{padding-right:15%}.page--visual-style-typography .figures-do-dont .figure__contents{padding:4.2rem 3.6rem}.figures-do-dont--contrast .figure--dont{color:#a2a9b1}.typography-styles dt{display:inline-block;color:#72777d;min-width:10rem;margin:0 0 3.2rem 1.6rem;font-size:1.3rem;font-weight:600;vertical-align:top}.typography-styles .typography-styles__code{margin-bottom:0}.typography-styles dd{display:inline}.typography-styles dd>*{display:inline-block;margin-top:0}.typography-styles .figure__caption{padding-top:0}.typography-styles dd:after{content:"\A";white-space:pre}.typography-styles+hr{margin-top:4rem;margin-bottom:4rem}.page--visual-style-icons img{background-color:#eaecf0;padding:2.4rem}.fonts-loaded .color-code,.fonts-loaded .site__title,.fonts-loaded cite{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.fonts-loaded .page__title,.fonts-loaded .typography-styles h1,.fonts-loaded blockquote{font-family:Charter,Georgia,serif}@media (max-width:767px){.nav--main{position:absolute;top:-3.2rem;left:-1.6rem;right:-1.6rem;padding-bottom:1.6rem;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);box-shadow:0 2px 2px 0 rgba(0,0,0,.25);z-index:1;-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,-webkit-transform .25s;-moz-transition:left .25s,right .25s,transform .25s,-moz-transform .25s;transition:left .25s,right .25s,transform .25s;transition:left .25s,right .25s,transform .25s,-webkit-transform .25s,-moz-transform .25s}.trigger--nav-main:checked+.nav--main{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.page__title{margin-top:-.4rem;font-size:2.8rem}.typography-styles dt{display:block;margin-left:0}.page--components .components__states{margin-left:0}.resources-table,.resources-table__body,.resources-table__cell,.resources-table__head{display:block}.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.resources-table__head .resources-table__cell:empty{display:none}.resources-table__body{padding-left:0}.resources-table__cell{padding-top:.8rem;padding-bottom:.8rem}}@media (min-width:240px){.content-box,.nav--main a,.site__title a{-webkit-transition-property:background-color,padding;-moz-transition-property:background-color,padding;transition-property:background-color,padding;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;transition-duration:.25s}.site__title{margin-left:4.2rem}.site__title a{padding-left:0}.lnk--contribute span{display:none}.nav--main a{padding-left:1.6rem;padding-right:1.6rem}.col--end,.col--start{width:100%}.figure--full,.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.figure--full .figure__caption{margin-left:1.6rem;margin-right:1.6rem}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{width:100%;max-width:568px;margin-left:auto;margin-right:auto}.figure--illustrations-header img{width:100%}.figure--illustrations-header+.figure--illustrations-header,.figure--illustrations-header+.figure--illustrations-header img{margin-top:0}.color{width:61.8%}.color-palette--base .color:nth-child(3n+4){clear:both}.color-palette--base .color{margin-right:1.6rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.1rem;margin-left:-.2rem}.page--components figure{margin-left:4.2rem}}@media (min-width:414px){.content-box{padding-left:3.2rem;padding-right:3.2rem}.nav--main{left:-3.2rem;right:-3.2rem}.nav--main a{padding-left:3.2rem;padding-right:3.2rem}.figure--full,.resources-table__head{margin-left:-3.2rem;margin-right:-3.2rem}.figure--full .figure__caption{margin-left:3.2rem;margin-right:3.2rem}.resources-table__head .resources-table__cell:first-child{padding-left:3.2rem;padding-right:3.2rem}.footer__list li{display:list-item;float:left;padding:0 .8rem 0 0}.footer__list li:after{content:"\2022";color:#72777d;padding:0 0 0 .8rem;font-weight:100}.footer__list li:last-child:after{content:"";padding:0}.color{width:16rem;margin-right:2.4rem}}@media (min-width:568px){.lnk--contribute{display:block;position:absolute;bottom:1.5rem;right:3.2rem;text-align:right}.lnk--contribute span{display:inline;opacity:0;-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.figures-do-dont .figure{max-width:61.8%}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{max-width:none}.figure--illustrations-header{float:left;width:44.4%}.figure--illustrations-header+.figure--illustrations-header{width:55.55%;margin-top:.8rem}.figure--illustrations-header+.figure--illustrations-header img{margin-top:1.6rem}}@media (min-width:768px){img{-moz-border-radius:2px;border-radius:2px}.content-box{width:100%;max-width:960px}.btn--nav-main{display:none}.site__title{float:left;margin-left:0}.nav--main a,.site__title a{padding-left:1.6rem;padding-right:1.6rem}.lnk--contribute span{display:inline;opacity:1}.col--start{width:20.8rem;z-index:1;-webkit-transition:width .25s;-moz-transition:width .25s;transition:width .25s}.col--end{margin-left:-20.8rem;padding-left:24rem}.nav--main{left:auto;right:auto}.figure--full,.figure--full .figure__caption{margin-left:0;margin-right:0}.figures-do-dont .figure{float:left;width:50%}.color-palette--base .color:nth-child(3n+4){clear:unset}.illustrations-case-study img{float:left;width:33.33%}.page--components figure{margin-left:6.4rem}}@media (min-width:992px){.content-box{width:100%;max-width:1140px}.nav--main a,.site__title a{padding-left:3.2rem;padding-right:3.2rem}.col--start{width:24rem}.col--end{margin-left:-24rem;padding-left:27.2rem}.color-palette--overview:first-child{margin-top:2.4rem}.color{margin-right:2.4rem}.color-palette--base .color{margin-right:1.35rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.35rem;margin-left:0}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--green:before,.color-palette--overview.color-palette--red:after,.color-palette--overview.color-palette--red:before{content:"";display:none}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--red:after,.color-section .color:nth-child(3n+4){clear:both}.resources-table__body .resources-table__cell{-webkit-transition:background-color .25s;-moz-transition:background-color .25s;transition:background-color .25s}.resources-table__body:hover .resources-table__cell{background-color:#f8f9fa}.resources-table__body .resources-table__cell:first-child,.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}}@media (min-width:1200px){.content-box{width:1140px}.col--start{width:25.6rem}.col--end{margin-left:-25.6rem;padding-left:28.8rem}} /*# sourceMappingURL=wmui-style-guide.min.css.map */ \ No newline at end of file diff --git a/css/build/wmui-style-guide.min.css.map b/css/build/wmui-style-guide.min.css.map index 276a213..24bc037 100644 --- a/css/build/wmui-style-guide.min.css.map +++ b/css/build/wmui-style-guide.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../node_modules/normalize.css/normalize.css","../partials/fonts.css","../wmui-style-guide.dev.css"],"names":[],"mappings":"AAAA,4EAA4E,AAW5E,KACE,iBAAkB,AAClB,0BAA2B,AAC3B,6BAA+B,CAChC,AAiBD,wCAME,aAAe,CAChB,AAOD,GACE,cAAe,AACf,cAAiB,CAClB,AAUD,uBAGE,aAAe,CAChB,AAMD,OACE,eAAiB,CAClB,AAOD,GACE,+BAAwB,AAAxB,4BAAwB,AAAxB,uBAAwB,AACxB,SAAU,AACV,gBAAkB,CACnB,AAOD,IACE,gCAAkC,AAClC,aAAe,CAChB,AAUD,EACE,+BAA8B,AAC9B,oCAAsC,CACvC,AAOD,YACE,mBAAoB,AACpB,0BAA2B,AAC3B,yCAAkC,AAAlC,sCAAkC,AAAlC,gCAAkC,CACnC,AAMD,SAEE,oBAAqB,AASrB,kBAAoB,CARrB,AAgBD,cAGE,gCAAkC,AAClC,aAAe,CAChB,AAMD,IACE,iBAAmB,CACpB,AAMD,KACE,sBAAuB,AACvB,UAAY,CACb,AAMD,MACE,aAAe,CAChB,AAOD,QAEE,cAAe,AACf,cAAe,AACf,kBAAmB,AACnB,uBAAyB,CAC1B,AAED,IACE,aAAgB,CACjB,AAED,IACE,SAAY,CACb,AASD,YAEE,oBAAsB,CACvB,AAMD,sBACE,aAAc,AACd,QAAU,CACX,AAMD,IACE,iBAAmB,CACpB,AAMD,eACE,eAAiB,CAClB,AAUD,sCAKE,uBAAwB,AACxB,eAAgB,AAChB,iBAAkB,AAClB,QAAU,CACX,AAOD,aAEE,gBAAkB,CACnB,AAOD,cAEE,mBAAqB,CACtB,AAQD,qDAIE,yBAA2B,CAC5B,AAMD,wHAIE,kBAAmB,AACnB,SAAW,CACZ,AAMD,4GAIE,6BAA+B,CAChC,AAMD,SACE,0BAA+B,CAChC,AASD,OACE,8BAAuB,AAAvB,2BAAuB,AAAvB,sBAAuB,AACvB,cAAe,AACf,cAAe,AACf,eAAgB,AAChB,UAAW,AACX,kBAAoB,CACrB,AAOD,SACE,qBAAsB,AACtB,uBAAyB,CAC1B,AAMD,SACE,aAAe,CAChB,AAOD,6BAEE,8BAAuB,AAAvB,2BAAuB,AAAvB,sBAAuB,AACvB,SAAW,CACZ,AAMD,kFAEE,WAAa,CACd,AAOD,cACE,6BAA8B,AAC9B,mBAAqB,CACtB,AAMD,qFAEE,uBAAyB,CAC1B,AAOD,6BACE,0BAA2B,AAC3B,YAAc,CACf,AAUD,aAEE,aAAe,CAChB,AAMD,QACE,iBAAmB,CACpB,AASD,OACE,oBAAsB,CACvB,AAiBD,kBACE,YAAc,CACf,AC9bD,WACC,oBAAuB,AACvB,gHAC6D,AAC7D,kBAAmB,AACnB,gBAAiB,AACjB,iCAAmC,CACnC,AAED,WACC,oBAAuB,AACvB,0GAC0D,AAC1D,kBAAmB,AACnB,gBAAiB,AACjB,iCAAmC,CACnC,ACQD,EACC,8BAAuB,AAAvB,2BAAuB,AAAvB,qBAAuB,CACvB,AAED,KACC,eAAiB,CACjB,AAED,KACC,yBAA6C,AAC7C,cAA2B,AAC3B,SAAU,AACV,6FAA8C,AAC9C,iBAAkB,AAClB,eAAuC,CACvC,AAID,kBAMC,kBAAmB,AACnB,iBAAkB,AAClB,mDAAmG,AAAnG,gDAAmG,AAAnG,0CAAmG,CACnG,AAED,YAIC,eAAuC,CACvC,AAED,gBAEC,0BAAkD,AAClD,iBAAkB,AAClB,eAAuC,CACvC,AAED,GACC,gCAAsG,AACtG,mBAAoB,AACpB,gBAAkB,CAClB,AAGD,MACC,iBAAmB,CACnB,AAED,GACC,cAAgB,CAChB,AAED,GACC,gBAAkB,CAClB,AAMD,MAHC,gBAAkB,CAMlB,AAHD,GAEC,eAAoB,CACpB,AAGD,WACC,8BAAkD,AAClD,kBAAmB,AACnB,iBAAkB,AAClB,0BAAkD,AAClD,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACjB,AAED,gBACC,cAAe,AACf,iBAAmB,AACnB,6FAA8C,AAC9C,iBAAkB,AAClB,iBAAmB,CACnB,AAEA,uBACC,YAAc,CACd,AAEF,kBAGC,gEAA4C,CAC5C,AAED,GACC,mBAAyC,AACzC,cAAe,AACf,aAAe,AACf,SAAU,AACV,aAAe,CACf,AAED,EACC,kBAAmB,AACnB,eAAiB,CACjB,AAEA,qDASC,gBAAmB,CACnB,AAED,aACC,iBAAmB,CACnB,AAEF,aAEC,yBAAiD,AACjD,WAAuC,AACvC,yBAA6B,AAC7B,oBAAqB,AACrB,iBAAkB,AAClB,oBAAsB,CACtB,AAGD,MAEC,eAAiB,AACjB,oBAAsB,CACtB,AAED,YACC,gBAAmB,CACnB,AAEA,wBACC,YAAc,CACd,AAGF,OACC,gBAAmB,CACnB,AAED,IACC,cAAe,AACf,eAAgB,AAChB,iBAAmB,CACnB,AAED,yBACC,mBAAoB,AACpB,iBAAoB,CACpB,AAED,6BACC,gBAAmB,CACnB,AAGD,EACC,WAA8B,AAC9B,oBAAsB,CACtB,AAEA,QACC,yBAA2B,CAC3B,AAED,SACC,aAAsC,CACtC,AAEF,SAEC,eAAuC,CACvC,AAED,KACC,yBAAiD,AACjD,qBAAsB,AACtB,oBAAuB,AACvB,gBAAkB,CAClB,AAED,MACC,gBAAkB,CAClB,AAED,QAEC,gBAAkB,CAClB,AAID,UACC,cAAe,AACf,kBAAmB,AACnB,2BAAiC,AACjC,UAAW,AACX,WAAY,AACZ,YAAa,AACb,SAAU,AACV,UAAW,AACX,eAAiB,CACjB,AAEA,2DAEC,gBAAiB,AACjB,UAAW,AACX,WAAY,AACZ,YAAa,AACb,SAAU,AACV,0BAA2B,AAC3B,gBAAkB,CAClB,AAEF,8RAYC,YAAa,AACb,aAAe,CACf,AAED,4IAMC,UAAY,CACZ,AAGD,6BAEC,aAAmC,CACnC,AAED,kBACC,gBAAkB,CAClB,AAED,4BAEC,cAAkC,AAClC,SAAW,CACX,AAJD,qCAEC,cAAkC,AAClC,SAAW,CACX,AAJD,uBAEC,cAAkC,AAClC,SAAW,CACX,AAJD,wBAEC,cAAkC,AAClC,SAAW,CACX,AAJD,8BAEC,cAAkC,AAClC,SAAW,CACX,AAED,aACC,kBAAmB,AACnB,kBAAmB,AACnB,iBAAkB,AAClB,oBAAqB,AACrB,oBAAsB,CACtB,AAID,QACC,eAAgB,AAChB,MAAO,AACP,OAAQ,AACR,QAAS,AACT,kBAAmB,AACnB,kBAAoB,CACpB,AAEA,aACC,cAAkC,AAClC,aAAc,AACd,cAAe,AACf,6FAA8C,AAC9C,iBAAkB,AAClB,gBAAuC,AACvC,mBAAsB,CACtB,AAEA,eACC,cAAe,AACf,qBAAsB,AACtB,wBAAyB,AACzB,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,qBACC,WAAiC,AACjC,oBAAsB,CACtB,AAED,WACC,aAAe,CACf,AAED,eACC,eAAuC,CACvC,AAGF,eACC,kBAAmB,AACnB,WAAY,AACZ,aAAc,AACd,cAAe,AACf,cAAgB,CAChB,AAGD,iBACC,cAAe,AACf,cAAe,AACf,sDAA8F,AAA9F,8CAA8F,AAA9F,gEAA8F,AAA9F,sCAA8F,AAA9F,kFAA8F,CAC9F,AAED,+CAEC,WAAY,AACZ,yBAA6C,AAC7C,WAAY,AACZ,WAAY,AACZ,kBAAmB,AACnB,UAAY,AACZ,MAAQ,CACR,AAED,uBACC,WAAY,AACZ,qCAAkD,AAAlD,kCAAkD,AAAlD,4BAAkD,CAClD,AAED,2DAEC,qBAA4C,CAC5C,AAED,6BACC,kCAAiD,AAAjD,+BAAiD,AAAjD,yBAAiD,CACjD,AAED,oBACC,cAAe,AACf,kBAAmB,AACnB,2BAAiC,AACjC,UAAW,AACX,WAAY,AACZ,YAAa,AACb,eAAiB,CACjB,AAGD,iBACC,iBAAkB,AAClB,kBAAoB,CACpB,AAIF,MACC,sBAAiD,AACjD,kBAAmB,AACnB,kBAAmB,AACnB,iBAAkB,AAClB,+CAA8C,AAA9C,4CAA8C,AAA9C,uCAA8C,AAC9C,iBAAmB,CACnB,AAMD,cAHC,UAAY,CAOZ,AAJD,KAEC,kBAAmB,AACnB,cAAgB,CAChB,AAMA,sBACC,SAAW,CACX,AAGF,WACC,qBAAiD,CAEjD,AAED,gDAEC,YAAc,CACd,AAED,4BAEC,SAAW,CACX,AAED,0BACC,QAAU,CACV,AAED,cACC,UAAW,AACX,oBAAsB,CACtB,AAED,iBACC,mBAAsB,CACtB,AAED,aACC,cAA2B,AAC3B,cAAe,AACf,qBAAuB,AACvB,iBAAkB,AAClB,qBAAsB,AACtB,iEAA6I,AAA7I,8DAA6I,AAA7I,wDAA6I,CAC7I,AAED,sCAEC,yBAAiD,AACjD,UAAuC,CACvC,AAED,oBACC,yBAAoD,AACpD,WAA8B,AAE9B,uBAA2C,AAA3C,kBAA2C,AAC3C,gBAAuC,AACvC,cAAgB,CAChB,AAED,gBACC,kBAAmB,AACnB,iBAAmB,CACnB,AAED,+BACC,kBAAoB,CACpB,AAED,8BACC,QAAU,CACV,AAED,6BACC,cAAkC,AAClC,8BAAyE,AACtE,+BAA2E,AAA3E,0BAA2E,AAC9E,oBAAqB,AACrB,iBAAkB,AAClB,oDAAoG,AAApG,iDAAoG,AAApG,2CAAoG,CACpG,AAED,kCACC,sBAAiD,AACjD,WAAmC,AACnC,uBAA6C,AAC7C,eAAuC,CACvC,AAED,2CACC,mBAAqB,CACrB,AAID,oBACC,cAAmC,AACnC,kBAAoB,CACpB,AAED,aACC,iBAAoB,CACpB,AAED,iCACC,iBAAoB,CACpB,AAED,eACC,kBAAmB,AACnB,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACjB,AAQD,eACC,wBAA6C,CAC7C,AAED,uCAEC,cAAmC,AACnC,WAAY,AACZ,cAAe,AACf,gBAAkB,CAClB,AAED,iBACC,kBAAoB,AACpB,iBAAmB,CACnB,AAEA,uBACC,YAAc,CACd,AAEF,sBACC,YAAa,AACb,kBAAoB,CACpB,AAEA,wBACC,UAAY,CACZ,AAGF,iBACC,iBAAmB,CACnB,AAED,yBACC,yBAA6C,AAC7C,+BAAoD,AAApD,2BAAoD,AACpD,gCAAqD,AAArD,2BAAqD,CACrD,AAED,+BACC,0BAA4E,CAC5E,AAED,kCACC,sBAAgD,AAChD,cAAe,AACf,uBAAyB,AACzB,uBAAwB,AACxB,kBAAqB,CACrB,AAED,iCAEC,wBAA2C,CAC3C,AAED,qCAEC,qBAA6C,CAC7C,AAED,UAEC,kBAAmB,AACnB,eAAuC,CACvC,AAEA,wBAEC,qBAAsB,AACtB,mBAAqB,AACrB,kBAAoB,AACpB,iBAAkB,AAClB,iBAAkB,AAClB,kBAAoB,CACpB,AAEF,IACC,aAA8B,CAC9B,AAEA,WACC,WAAa,CACb,AAEF,MACC,UAAkC,CAClC,AAEA,aACC,WAAa,CACb,AAIF,eACC,kBAAmB,AACnB,SAAW,CACX,AAED,8BACC,YAAc,CACd,AAED,OACC,WAAuC,AACvC,qBAAsB,AACtB,cAAe,AACf,WAAY,AACZ,kBAAmB,AACnB,YAAa,AACb,aAAc,AACd,qBAAsB,AACtB,eAAgB,AAChB,sBAAiG,AACjG,uBAA2C,AAA3C,kBAA2C,AAC3C,gBAAkB,CAClB,AAEA,qCAEC,UAAqC,CACrC,AAED,qCACC,UAAuC,CACvC,AAED,kCACC,gBAAmB,CACnB,AAED,gCACC,aAAc,AACd,cAAe,AACf,iBAAmB,AACnB,oBAAqB,AACrB,qBAAsB,AACtB,0BAAsB,AAAtB,qBAAsB,AACtB,cAAgB,CAChB,AAED,4CACC,gBAAmB,CACnB,AAED,4CACC,aAAc,AACd,YAAa,AACb,aAAc,AACd,0BAAsB,AAAtB,qBAAsB,AACtB,gBAAkB,CAClB,AAED,4BACC,oBAAsB,CACtB,AAED,uCACC,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAEA,6CACC,SAAW,CACX,AAEF,aACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,YAAa,AACb,iBAAkB,AAClB,eAA6C,CAC7C,AAEA,sCACC,kBAAmB,AACnB,YAAa,AACb,UAAW,AACX,mBAAoB,AACpB,iBAAkB,AAClB,aAAe,CACf,AAED,oHAIC,YAAc,CACd,AAEF,YACC,yBAA0B,AAC1B,cAAe,AACf,UAAW,AACX,4FAA8C,CAC9C,AAEA,iBACC,SAAW,CACX,AAEH,4BACC,YACC,kBAAoB,CACpB,AAED,mBACC,WAAY,AACZ,mCAAsC,AACtC,qBAAsB,AACtB,aAAc,AACd,cAAe,AACf,2BAA+B,AAC/B,uBAAmB,AAAnB,kBAAmB,AACnB,2BAA4B,AAC5B,WAAa,CACb,AAED,4BACC,wBAA6B,CAC7B,CACD,AAID,MACC,qBAAsB,AACtB,WAAY,AACZ,YAAa,AACb,eAAiB,AACjB,0BAA4B,CAC5B,AAEA,iBACC,aAAc,AACd,cAAe,AACf,mBAAsB,CACtB,AAED,oBACC,aAAc,AACd,cAAe,AACf,mBAAsB,CACtB,AAUF,uBACC,iBAAmB,CACnB,AAED,6BACC,WAAY,AACZ,+DAAkE,AAClE,kBAAmB,AACnB,SAAU,AACV,aAAc,AACd,cAAe,AACf,aAAe,CACf,AAED,8CACC,gBAAiB,AACjB,iBAAkB,AAClB,iBAAmB,CACnB,AAGD,iBACC,cAAe,AACf,WAAY,AACZ,kBAAmB,AACnB,wBAA0B,CAC1B,AAED,8CAEC,kBAAmB,AACnB,+BAAiC,CACjC,AAED,uBACC,wBAA0B,CAC1B,AAEA,0BACC,aAAc,AACd,gBAAiB,AACjB,iBAAkB,AAClB,iBAAkB,AAClB,eAAuC,CACvC,AAEF,uBACC,mBAAoB,AACpB,8BAAgC,CAChC,AAEA,0DACC,mBAAqB,CACrB,AAEF,cACC,kBAAoB,CACpB,AAGD,QACC,cAA2B,AAC3B,iBAAkB,AAClB,gBAAkB,CAClB,AAED,cACC,SAAW,CACX,AAEA,0BACC,QAAU,CACV,AAED,oBACC,YAAa,AACb,cAAe,AACf,UAAY,CACZ,AAED,iBACC,qBAAsB,AACtB,cAAe,AACf,iBAAoB,CACpB,AAED,6BACC,aAAe,CACf,AAED,gBACC,iBAAmB,CACnB,AAED,yBACC,eAAuC,CACvC,AAEF,wBACC,qBAAsB,AACtB,gBAAkB,AAClB,wBAA0B,CAC1B,AAKD,yBACC,SAAU,AACV,SAAW,CACX,AAGD,2DACC,cAAgB,CAChB,AAED,0CACC,iBAAmB,CACnB,AAGD,kEACC,qBAAuB,CACvB,AAED,yCACC,aAAkC,CAClC,AAID,sBACC,qBAAsB,AACtB,cAAmC,AACnC,gBAAiB,AACjB,yBAA0B,AAC1B,iBAAkB,AAClB,gBAAuC,AACvC,kBAAoB,CACpB,AAED,4CACC,eAAiB,CACjB,AAED,sBACC,cAAgB,CAChB,AAED,wBACC,qBAAsB,AACtB,YAAc,CACd,AAED,oCACC,aAAe,CACf,AAED,4BACK,aAAc,AACd,eAAiB,CACrB,AAED,sBACC,gBAAiB,AACjB,kBAAoB,CACpB,AAGD,8BACC,yBAA6C,AAC7C,cAAgB,CAChB,AAID,wEAGC,4FAA8C,CAC9C,AAGD,wFAGC,iCAAuC,CACvC,AAKD,yBACC,WACC,kBAAmB,AACnB,YAAa,AACb,aAAc,AACd,cAAe,AACf,sBAAuB,AACvB,+CAA8C,AAA9C,4CAA8C,AAA9C,uCAA8C,AAC9C,UAAW,AACX,oCAA+B,AAA/B,iCAA+B,AAA/B,gCAA+B,AAA/B,4BAA+B,AAC/B,+DAAmI,AAAnI,uDAAmI,AAAnI,wEAAmI,AAAnI,+CAAmI,AAAnI,yFAAmI,CACnI,AAED,sCACC,gCAA2B,AAA3B,6BAA2B,AAA3B,4BAA2B,AAA3B,uBAA2B,CAC3B,AAED,aACC,kBAAoB,AACpB,gBAAkB,CAClB,AAED,sBACC,cAAe,AACf,aAAe,CACf,AAGD,sCACC,aAAe,CACf,AAGD,sFAIC,aAAe,CACf,AAED,uBACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,oDACC,YAAc,CACd,AAED,uBACC,cAAgB,CAChB,AAED,uBACC,kBAAoB,AACpB,oBAAuB,CACvB,CACD,AAGD,yBACC,yCAGC,qDAA+C,AAA/C,kDAA+C,AAA/C,6CAA+C,AAC/C,iCAAqD,AAArD,8BAAqD,AAArD,wBAAqD,CACrD,AAED,aACC,kBAAoB,CACpB,AAEA,eACC,cAAgB,CAChB,AAEF,sBACC,YAAc,CACd,AAED,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,sBAEC,UAAY,CACZ,AAED,qCAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,+BACC,mBAAoB,AACpB,mBAAqB,CACrB,AAED,sEAEC,WAAY,AACZ,gBAAiB,AACjB,iBAAkB,AAClB,iBAAmB,CACnB,AAED,kCACC,UAAY,CACZ,AAED,4HAEC,YAAc,CACd,AAED,OACC,WAAa,CACb,AAED,4CACC,UAAY,CACZ,AAED,4BACC,mBAAqB,CACrB,AAED,gEACC,oBAAqB,AACrB,kBAAqB,CACrB,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,WACC,aAAc,AACd,aAAe,CACf,AAEA,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,qCAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,+BACC,mBAAoB,AACpB,mBAAqB,CACrB,AAED,0DACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,iBACC,kBAAmB,AACnB,WAAY,AACZ,mBAAsB,CACtB,AAED,uBACC,gBAAiB,AACjB,cAAmC,AACnC,oBAAsB,AACtB,eAAiB,CACjB,AAED,kCACC,WAAY,AACZ,SAAW,CACX,AAED,OACC,YAAa,AACb,mBAAqB,CACrB,CACD,AAGD,yBACC,iBACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,aAAc,AACd,gBAAkB,CAClB,AAED,sBACC,eAAgB,AAChB,UAAW,AACX,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAED,yBACC,eAAiB,CACjB,AAED,sEAEC,cAAgB,CAChB,AAED,8BACC,WAAY,AACZ,WAAa,CACb,AAED,4DACC,aAAc,AACd,gBAAmB,CACnB,AAED,gEACC,iBAAmB,CACnB,CACD,AAGD,yBACC,IACC,uBAAmB,AAAnB,iBAAmB,CACnB,AAED,aACC,WAAY,AACZ,eAAiB,CACjB,AAED,eACC,YAAc,CACd,AAED,aACC,WAAY,AACZ,aAAe,CACf,AAEA,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,sBACC,eAAgB,AAChB,SAAW,CACX,AAED,YACC,cAAe,AACf,UAAW,AACX,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,UACC,qBAAsB,AACtB,kBAAoB,CACpB,AAED,WACC,UAAW,AACX,UAAY,CACZ,AAED,6CAEC,cAAe,AACf,cAAgB,CAChB,AAED,yBACC,WAAY,AACZ,SAAW,CACX,AAED,4CACC,WAAa,CACb,AAGD,8BACC,WAAY,AACZ,YAAc,CACd,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,WAAY,AACZ,gBAA4C,CAC5C,AAED,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,YACC,WAAa,CACb,AAED,UACC,mBAAoB,AACpB,oBAAsB,CACtB,AAED,qCACC,iBAAmB,CACnB,AAED,OACC,mBAAqB,CACrB,AAEA,4BACC,oBAAsB,CACtB,AAED,gEACC,qBAAsB,AACtB,aAAe,CACf,AAEF,8MAIC,WAAY,AACZ,YAAc,CACd,AAED,4IAGC,UAAY,CACZ,AAGD,8CACC,yCAA6D,AAA7D,sCAA6D,AAA7D,gCAA6D,CAC7D,AAEA,oDACC,wBAA0B,CAC1B,AAED,oHAEC,mBAAqB,CACrB,CACF,AAED,0BACC,aACC,YAAwC,CACxC,AAED,YACC,aAAe,CACf,AAED,UACC,qBAAsB,AACtB,oBAAsB,CACtB,CACD","file":"wmui-style-guide.min.css","sourcesContent":["/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n background-color: transparent; /* 1 */\n -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: sans-serif; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n display: inline-block; /* 1 */\n vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n display: none;\n}\n","@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_regular.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */\n}\n\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_bold.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n\n/*\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility;\n}\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n*/\n","/* ::: Vendor Imports ::: */\n/* Load files from 'node_modules' folders with postCSS-import plugin.\n * Modules specified in package.json file */\n@import 'wikimedia-ui-base/wikimedia-ui-base.css';\n@import 'normalize.css';\n\n/* ::: Local Imports ::: */\n@import 'partials/fonts.css';\n\n:root {\n\t--background-color-hr: var( --wmui-color-base80 );\n\t--width-site: 960px;\n\t--width-site-desktop-wide: 1140px;\n\t--border-color-heading: var( --wmui-color-base80 );\n\t--border-width-heading: 3px;\n\t/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */\n\t--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */\n\t--font-weight-base: 400;\n\t/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.\n\t Helvetica and Arial fallback gracefully to `700`, see T246791. */\n\t--font-weight-bold: 600;\n\t--font-weight-ultralight: 100;\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\tfont-size: 62.5%;\n}\n\nbody {\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tcolor: var( --color-base );\n\tmargin: 0;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.6rem;\n\tline-height: var( --line-height-base );\n}\n\n/* ::: Text Block-Level Elements ::: */\n/* ... Headings ... */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.25;\n\ttransition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );\n}\n\nh2,\nh3,\nh4,\nh5 {\n\tfont-weight: var( --font-weight-bold );\n}\n\nh1,\n.page__title {\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 3.2rem;\n\tfont-weight: var( --font-weight-base );\n}\n\nh2 {\n\tborder-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );\n\tpadding-bottom: 2px;\n\tfont-size: 2.4rem;\n}\n\n/* Reduce top margin when introductory headlines are following each other. */\nh2 + h3 {\n\tmargin-top: 1.6rem;\n}\n\nh3 {\n\tfont-size: 2rem;\n}\n\nh4 {\n\tfont-size: 1.8rem;\n}\n\nh5 {\n\tfont-size: 1.6rem;\n}\n\nh6 {\n\tfont-size: 1.6rem;\n\tfont-weight: normal;\n}\n\n/* ... Other Block-Level Elements ... */\nblockquote {\n\tborder-left: 3px solid var( --wmui-color-base70 ); /* FIXME: var */\n\tmargin: 1.6rem 0 0;\n\tpadding: 0 3.2rem;\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tline-height: 1.5;\n}\n\nblockquote cite {\n\tdisplay: block;\n\tmargin-top: 0.8rem;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.4rem;\n\tfont-style: normal;\n}\n\n\tblockquote cite:before {\n\t\tcontent: '— ';\n\t}\n\ncode,\npre,\n.mw-code {\n\tfont-family: var( --font-family-monospace );\n}\n\nhr {\n\tbackground: var( --background-color-hr );\n\tdisplay: block;\n\theight: 0.8rem;\n\tborder: 0;\n\tmargin: 8rem 0;\n}\n\np {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.5;\n}\n\n\th1 + p,\n\th2 + p,\n\th3 + p,\n\th4 + p,\n\th5 + p,\n\th6 + p,\n\tp + p,\n\tul + p,\n\tp:first-child {\n\t\tmargin: 0.8rem 0 0;\n\t}\n\n\tblockquote + p {\n\t\tmargin-top: 1.6rem;\n\t}\n\npre,\n.mw-code {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n\tborder: var( --border-base );\n\tpadding: 1.2rem 2rem;\n\tfont-size: 1.4rem;\n\twhite-space: pre-wrap;\n}\n\n/* ... Lists ... */\nol,\nul {\n\tmargin: 0.8rem 0;\n\tpadding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */\n}\n\n.content li {\n\tmargin-top: 0.4rem;\n}\n\n\t.content li:first-child {\n\t\tmargin-top: 0;\n\t}\n\n/* ... Images & Figures ... */\nfigure {\n\tmargin: 0.8rem 0 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n\tmargin: 1.6rem 0 0;\n}\n\n.page--components figure {\n\tmargin-left: 6.4rem;\n\tpadding-top: 0.8rem;\n}\n\n.page--components figure img {\n\tmargin-top: 0.8rem;\n}\n\n/* ::: Inline Elements ::: */\na {\n\tcolor: var( --color-primary );\n\ttext-decoration: none;\n}\n\n\ta:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\ta:active {\n\t\tcolor: var( --color-primary--active );\n\t}\n\nb,\nstrong {\n\tfont-weight: var( --font-weight-bold );\n}\n\ncode {\n\tbackground-color: var( --background-color-code );\n\tdisplay: inline-block;\n\tpadding: 0.2rem 0.4rem;\n\tfont-size: 1.4rem;\n}\n\nsmall {\n\tfont-size: 1.3rem;\n}\n\nsub,\nsup {\n\tfont-size: 1.1rem;\n}\n\n/* ::: General Classes ::: */\n/* ::: Text for Screen Readers only ::: */\n.is-aural {\n\tdisplay: block;\n\tposition: absolute;\n\tclip: rect( 1px, 1px, 1px, 1px );\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\toverflow: hidden;\n}\n\n\t.is-aural.is-focusable:active,\n\t.is-aural.is-focusable:focus {\n\t\tposition: static;\n\t\tclip: auto;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\toverflow: visible;\n\t}\n\n.clearfix:before,\n.clearfix:after,\n.page:before,\n.page:after,\n.content-box:before,\n.content-box:after,\n.color-palette:before,\n.color-palette:after,\n.figures-do-dont:before,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:before,\n.content__illustration-style .figure--full:after {\n\tcontent: ' ';\n\tdisplay: table;\n}\n\n.clearfix:after,\n.page:after,\n.content-box:after,\n.color-palette:after,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:after {\n\tclear: both;\n}\n\n/* ::: Text-formatting ::: */\n.is-complementary,\n.is-subtle {\n\tcolor: var( --color-base--subtle );\n}\n\n.is-complementary {\n\tfont-size: 1.4rem;\n}\n\n::placeholder,\n.is-placeholder {\n\tcolor: var( --color-placeholder );\n\topacity: 1;\n}\n\n.content-box {\n\tposition: relative;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tpadding-left: 1.6rem; /* FIXME: var( --grid-padding ); */\n\tpadding-right: 1.6rem;\n}\n\n\n/* ::: Structure ::: */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmin-height: 6.4rem;\n\tline-height: 6.4rem;\n}\n\n\t.site__title {\n\t\tcolor: var( --wmui-color-base10 );\n\t\tmargin-top: 0;\n\t\theight: 6.4rem;\n\t\tfont-family: var( --font-family-system-sans );\n\t\tfont-size: 1.6rem;\n\t\tfont-weight: var( --font-weight-base );\n\t\tletter-spacing: 0.5px;\n\t}\n\n\t\t.site__title a {\n\t\t\tcolor: inherit;\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 1.2rem 3.2rem 0;\n\t\t\ttransition: color var( --transition-ease-medium );\n\t\t}\n\n\t\t.site__title a:hover {\n\t\t\tcolor: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t.site__org {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.site__project {\n\t\t\tfont-weight: var( --font-weight-bold );\n\t\t}\n\n\t/* ... Navigation button ... */\n\t.btn--nav-main {\n\t\tposition: absolute;\n\t\ttop: 1.2rem;\n\t\twidth: 4.2rem;\n\t\theight: 4.2rem;\n\t\tcursor: pointer;\n\t}\n\n\t/* Fake hamburger icon */\n\t.btn--nav-main i {\n\t\tdisplay: block;\n\t\theight: 4.2rem;\n\t\ttransition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );\n\t}\n\n\t.btn--nav-main i:before,\n\t.btn--nav-main i:after {\n\t\tcontent: '';\n\t\tbackground-color: var( --wmui-color-base20 );\n\t\twidth: 2rem;\n\t\theight: 2px;\n\t\tposition: absolute;\n\t\ttop: 0.4rem;\n\t\tleft: 0;\n\t}\n\n\t.btn--nav-main i:after {\n\t\ttop: 1.1rem;\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base20 );\n\t}\n\n\t.btn--nav-main i:hover:before,\n\t.btn--nav-main i:hover:after {\n\t\tbackground-color: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t}\n\n\t.btn--nav-main i:hover:after {\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base0 );\n\t}\n\n\t.btn--nav-main span {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tclip: rect( 1px, 1px, 1px, 1px );\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t}\n\n\t/* ... GitHub Contribute Link ... */\n\t.lnk--contribute {\n\t\tfont-size: 1.4rem;\n\t\tline-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */\n\t}\n\n\n/* ... Content ... */\n.page {\n\tbackground-color: var( --background-color-base );\n\tposition: relative;\n\tmargin-top: 6.4rem;\n\tpadding: 6.4rem 0;\n\tbox-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );\n\toverflow-y: hidden;\n}\n\n.content {\n\tfloat: left;\n}\n\n.col {\n\tfloat: left;\n\tposition: relative;\n\tmin-height: 1px;\n}\n\n\t.col--start {\n\t\tpadding: 0;\n\t}\n\n\t.col--end {\n\t\tpadding: 0;\n\t}\n\n/* ... Main Navigation ... */\n.nav--main {\n\tbackground-color: var( --background-color-base ); /* needed for menu appearance on mobile below */\n\t/* margin-top: 6.4rem; */\n}\n\n.nav--main li:not( .is-on ) ul,\n.trigger--nav-main {\n\tdisplay: none;\n}\n\n.nav--main ol,\n.nav--main ul {\n\tpadding: 0;\n}\n\n.nav--main ol:first-child {\n\tmargin: 0;\n}\n\n.nav--main li {\n\tpadding: 0;\n\tlist-style: none none;\n}\n\n.nav--main > ol > li {\n\tmargin-bottom: 0.4rem;\n}\n\n.nav--main a {\n\tcolor: var( --color-base );\n\tdisplay: block;\n\tpadding: 0.8rem 1.2rem;\n\tfont-size: 1.6rem;\n\ttext-decoration: none;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );\n}\n\n.nav--main a:hover,\n.nav--main a:focus {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n}\n\n.nav--main .is-on > a {\n\tbackground-color: var( --background-color-primary );\n\tcolor: var( --color-primary );\n\t/* border-left: 2px solid var( --color-primary ); */\n\tborder-radius: var( --border-radius-base );\n\tfont-weight: var( --font-weight-bold );\n\tcursor: default;\n}\n\n.nav__sub-items {\n\tmargin-top: 1.2rem;\n\tmargin-bottom: 1em; /* FIXME: replace with rem and mt */\n}\n\n.nav__sub-items > .nav__sub-item {\n\tmargin-left: 3.6rem;\n}\n\n.nav--main .nav__sub-items ul {\n\tmargin: 0;\n}\n\n.nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */\n\tcolor: var( --wmui-color-base20 );\n\tborder-left: var( --border-width-base ) solid var( --wmui-color-base80 );\n border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;\n\tpadding-left: 1.6rem;\n\tfont-size: 1.4rem;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );\n}\n\n.nav--main .nav__sub-item.is-on > a {\n\tbackground-color: var( --background-color-base );\n\tcolor: var( --color-base--active );\n\tborder-left-color: var( --wmui-color-base0 );\n\tfont-weight: var( --font-weight-bold );\n}\n\n.nav--main .nav__sub-item .nav__sub-item a {\n\tpadding-left: 3.6rem;\n}\n\n\n/* ::: Content ::: */\n.page__parent-title {\n\tcolor: var( --color-base--subtle );\n\tmargin-top: -2.8rem;\n}\n\n.page__title {\n\tmargin-top: -0.8rem;\n}\n\n.page__parent-title + .page__title {\n\tmargin-top: -0.4rem;\n}\n\n.page__tagline {\n\tmargin-top: 1.2rem;\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tfont-weight: 100;\n}\n\n/* Remove, doesn't provide good styling\n.page__lead {\n\tfont-size: 1.8rem;\n}\n*/\n\n.figures--full {\n\tbackground-color: var( --wmui-color-base90 );\n}\n\n.figure__caption,\n.heading__description {\n\tcolor: var( --color-base--subtle );\n\tclear: both;\n\tdisplay: block;\n\tfont-size: 1.3rem;\n}\n\n.figure__caption {\n\tpadding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */\n\tfont-style: italic;\n}\n\n\t.figure__caption:empty {\n\t\tdisplay: none;\n\t}\n\n.heading__description {\n\tfloat: right;\n\tmargin-top: -1.9rem;\n}\n\n\t.heading__description + * {\n\t\tclear: both;\n\t}\n\n/* ... “Do” & “Don't” figures ... */\n.figures-do-dont {\n\tmargin-top: 1.6rem;\n}\n\n.figures-do-dont .figure {\n\tbackground-color: var( --wmui-color-base80 );\n\tborder-top-left-radius: var( --border-radius-base );\n\tborder-top-right-radius: var( --border-radius-base );\n}\n\n.figures-do-dont .figure--dont {\n\tborder-left: var( --border-width-base ) solid var( --color-base--inverted );\n}\n\n.figures-do-dont .figure__caption {\n\tbackground-color: var( --color-base--inverted );\n\tdisplay: block;\n\tborder-top-width: 0.8rem;\n\tborder-top-style: solid;\n\tpadding-right: 0.8em;\n}\n\n.figure--do .figure__caption,\n.do {\n\tborder-top-color: var( --color-secondary );\n}\n\n.figure--dont .figure__caption,\n.dont {\n\tborder-top-color: var( --color-destructive );\n}\n\n.do,\n.dont {\n\tfont-style: normal;\n\tfont-weight: var( --font-weight-bold );\n}\n\n\t.do:before,\n\t.dont:before {\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.4rem;\n\t\tpadding-top: 0.4rem;\n\t\tfont-size: 2.1rem;\n\t\tline-height: 1rem;\n\t\tvertical-align: top;\n\t}\n\n.do {\n\tcolor: var( --color-success );\n}\n\n\t.do:before {\n\t\tcontent: '✓';\n\t}\n\n.dont {\n\tcolor: var( --color-destructive );\n}\n\n\t.dont:before {\n\t\tcontent: '×';\n\t}\n\n\n/* ... Color ... */\n.color-palette {\n\tmargin: 2.4rem 0 0;\n\tpadding: 0;\n}\n\n.color-palette + .color-palette {\n\tmargin-top: 0;\n}\n\n.color {\n\tcolor: var( --color-base--emphasized );\n\tlist-style: none none;\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 61.8%;\n\theight: 16rem;\n\tmargin-bottom: 3.2rem;\n\tpadding: 1.2rem;\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );\n\tborder-radius: var( --border-radius-base );\n\tfont-size: 1.4rem;\n}\n\n\t.color--dark,\n\t.color__wcag-level span {\n\t\tcolor: var( --color-base--inverted );\n\t}\n\n\t.color--dark .color__wcag-level span {\n\t\tcolor: var( --color-base--emphasized );\n\t}\n\n\t.color-palette .color:first-child {\n\t\tmargin-top: 0.4rem;\n\t}\n\n\t.color-palette--overview .color {\n\t\twidth: 6.4rem;\n\t\theight: 6.2rem;\n\t\tmargin-top: 0.8rem;\n\t\tmargin-right: 1.2rem;\n\t\tmargin-bottom: 2.4rem;\n\t\tborder-radius: 3.2rem;\n\t\tcursor: default;\n\t}\n\n\t.color-palette--overview .color:first-child {\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.color-palette--overview .color--emphasized {\n\t\twidth: 7.2rem;\n\t\theight: 7rem;\n\t\tmargin-top: 0;\n\t\tborder-radius: 7.2rem;\n\t\tpadding-top: 2rem;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.35rem;\n\t}\n\n\t.color-section .color .color-code--hsb {\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t\t.color-section .color:hover .color-code--hsb {\n\t\t\topacity: 1;\n\t\t}\n\n\t.color__name {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.2rem;\n\t\tleft: 1.2rem;\n\t\tfont-size: 3.2rem;\n\t\tfont-weight: var( --font-weight-ultralight );\n\t}\n\n\t\t.color-palette--overview .color__name {\n\t\t\tposition: relative;\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\tpadding-top: 1.2rem;\n\t\t\tfont-size: 2.4rem;\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t.color__type,\n\t\t.color-code.color-code--rgb,\n\t\t.color-palette--overview .color__name,\n\t\t.color-palette--overview .color-code {\n\t\t\tdisplay: none;\n\t\t}\n\n\t.color-code {\n\t\tbackground-color: inherit;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\tfont-family: var( --font-family-system-sans );\n\t}\n\n\t\t.color-code--hsb {\n\t\t\topacity: 0;\n\t\t}\n\n@supports ( --css: variables ) {\n\t.color-hint {\n\t\twhite-space: nowrap;\n\t}\n\n\t.color-hint:before {\n\t\tcontent: '';\n\t\tbackground-color: var( --color-hint );\n\t\tdisplay: inline-block;\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin: 0 0.4rem 0.3rem 0.2rem;\n\t\tborder-radius: 50%;\n\t\tvertical-align: text-bottom;\n\t\tcursor: help;\n\t}\n\n\t.color-hint--base100:before {\n\t\tborder: var( --border-base );\n\t}\n}\n\n\n/* ... Icon ... */\n.icon {\n\tdisplay: inline-block;\n\twidth: 2rem;\n\theight: 2rem;\n\tmargin: 0 0.2rem;\n\tvertical-align: text-bottom;\n}\n\n\t.icon--indicator {\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\t.icon--intermediate {\n\t\twidth: 1.6rem;\n\t\theight: 1.6rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\n/* ... Components ... */\n/*\n.page--components h2 {\n\tborder-bottom: 0;\n\tpadding-bottom: 0;\n}\n*/\n.components__designing {\n\tposition: relative;\n}\n\n.components__designing:after {\n\tcontent: '';\n\tbackground: url( ../../img/components/legend_16-8.svg ) no-repeat;\n\tposition: absolute;\n\tbottom: 0;\n\tright: 6.4rem;\n\twidth: 13.2rem;\n\theight: 6.4rem;\n}\n\n.page--components-messages .components__intro {\n\tmax-width: 700px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n/* ... Resources ... */\n.resources-table {\n\tdisplay: table;\n\twidth: 100%;\n\tmargin-top: 2.4rem;\n\tborder-collapse: collapse;\n}\n\n.resources-table__head,\n.resources-table__body {\n\tdisplay: table-row;\n\tborder-bottom: 1px solid #a2a9b1;\n}\n\n.resources-table__head {\n\tbackground-color: #eaecf0;\n}\n\n\t.resources-table__head h2 {\n\t\tmargin-top: 0;\n\t\tborder-bottom: 0;\n\t\tpadding-bottom: 0;\n\t\tfont-size: 2.1rem;\n\t\tfont-weight: var( --font-weight-base );\n\t}\n\n.resources-table__cell {\n\tdisplay: table-cell;\n\tpadding: 1.6rem 1.6rem 1.6rem 0;\n}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 1.6rem;\n\t}\n\n.lnk-resource {\n\twhite-space: nowrap;\n}\n\n/* ::: Footer ::: */\n.footer {\n\tcolor: var( --color-base );\n\tpadding: 2.4rem 0;\n\tfont-size: 1.3rem;\n}\n\n.footer__list {\n\tpadding: 0;\n}\n\n\t.footer__list:first-child {\n\t\tmargin: 0;\n\t}\n\n\t.footer__list:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\tclear: both;\n\t}\n\n\t.footer__list li {\n\t\tlist-style: none none;\n\t\tdisplay: block;\n\t\tpadding: 0.8rem 0 0;\n\t}\n\n\t.footer__list li:first-child {\n\t\tpadding-top: 0;\n\t}\n\n\t.footer__list + p {\n\t\tmargin-top: 1.2rem;\n\t}\n\n\t.footer__list--connect a {\n\t\tfont-weight: var( --font-weight-bold );\n\t}\n\n.lnk--wikimedia-project {\n\tdisplay: inline-block;\n\tpadding: 0.4rem 0;\n\ttext-transform: uppercase;\n}\n\n\n/* ::: Page-specific Styles ::: */\n/* ... Homepage ... */\n.page--home .page__title {\n\tborder: 0;\n\tpadding: 0;\n}\n\n/* ... “Design principles – Accessibility” ... */\n.page--design-principles-accessibility .nav--main .is-on > a {\n\tcursor: pointer;\n}\n\n.page--design-principles-accessibility h3 {\n\tpadding-right: 15%;\n}\n\n/* ... “Typography” ... */\n.page--visual-style-typography .figures-do-dont .figure__contents {\n\tpadding: 4.2rem 3.6rem;\n}\n\n.figures-do-dont--contrast .figure--dont {\n\tcolor: var( --wmui-color-base50 );\n}\n\n/* ... Typography Styles ... */\n\n.typography-styles dt {\n\tdisplay: inline-block;\n\tcolor: var( --color-base--subtle );\n\tmin-width: 10rem;\n\tmargin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */\n\tfont-size: 1.3rem;\n\tfont-weight: var( --font-weight-bold );\n\tvertical-align: top;\n}\n\n.typography-styles .typography-styles__code {\n\tmargin-bottom: 0;\n}\n\n.typography-styles dd {\n\tdisplay: inline;\n}\n\n.typography-styles dd > * {\n\tdisplay: inline-block;\n\tmargin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */\n}\n\n.typography-styles .figure__caption {\n\tpadding-top: 0; /* Remove `padding` from elements like figure caption */\n}\n\n.typography-styles dd:after {\n content: '\\A';\n white-space: pre;\n}\n\n.typography-styles + hr {\n\tmargin-top: 4rem;\n\tmargin-bottom: 4rem;\n}\n\n/* ... “Icons” ... */\n.page--visual-style-icons img { /* FIXME: generalize image styles */\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tpadding: 2.4rem;\n}\n\n\n/* ::: Dynamic content ::: */\n.fonts-loaded cite,\n.fonts-loaded .site__title,\n.fonts-loaded .color-code {\n\tfont-family: var( --font-family-system-sans );\n}\n\n/* ::: Text Block-Level Elements ::: */\n.fonts-loaded .page__title,\n.fonts-loaded blockquote,\n.fonts-loaded .typography-styles h1 {\n\tfont-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */\n}\n\n\n/* ::: Media Queries ::: */\n/* ... Smartphone only ... */\n@media ( max-width: 767px ) {\n\t.nav--main {\n\t\tposition: absolute;\n\t\ttop: -3.2rem;\n\t\tleft: -1.6rem;\n\t\tright: -1.6rem;\n\t\tpadding-bottom: 1.6rem;\n\t\tbox-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */\n\t\tz-index: 1;\n\t\ttransform: translateY( -200% );\n\t\ttransition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );\n\t}\n\n\t.trigger--nav-main:checked + .nav--main {\n\t\ttransform: translateY( 0 );\n\t}\n\n\t.page__title {\n\t\tmargin-top: -0.4rem;\n\t\tfont-size: 2.8rem;\n\t}\n\n\t.typography-styles dt {\n\t\tdisplay: block;\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Components ... */\n\t.page--components .components__states {\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table,\n\t.resources-table__head,\n\t.resources-table__body,\n\t.resources-table__cell {\n\t\tdisplay: block;\n\t}\n\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:empty {\n\t\tdisplay: none;\n\t}\n\n\t.resources-table__body {\n\t\tpadding-left: 0;\n\t}\n\n\t.resources-table__cell {\n\t\tpadding-top: 0.8rem;\n\t\tpadding-bottom: 0.8rem;\n\t}\n}\n\n/* ... Smartphone portrait ... */\n@media ( min-width: 240px ) {\n\t.content-box,\n\t.site__title a,\n\t.nav--main a {\n\t\ttransition-property: background-color, padding;\n\t\ttransition-duration: var( --transition-ease-medium );\n\t}\n\n\t.site__title {\n\t\tmargin-left: 4.2rem;\n\t}\n\n\t\t.site__title a {\n\t\t\tpadding-left: 0;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: none;\n\t}\n\n\t.nav--main a {\n\t\tpadding-left: 1.6rem;\n\t\tpadding-right: 1.6rem;\n\t}\n\n\t.col--start,\n\t.col--end {\n\t\twidth: 100%;\n\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 1.6rem;\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\twidth: 100%;\n\t\tmax-width: 568px;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.figure--illustrations-header img {\n\t\twidth: 100%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header,\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 0;\n\t}\n\n\t.color {\n\t\twidth: 61.8%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\tmargin-right: 1.1rem;\n\t\tmargin-left: -0.2rem;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 4.2rem;\n\t}\n}\n\n/* ... Smartphone+ portrait ... */\n@media ( min-width: 414px ) {\n\t.content-box {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.nav--main {\n\t\tleft: -3.2rem;\n\t\tright: -3.2rem;\n\t}\n\n\t\t.nav--main a {\n\t\t\tpadding-left: 3.2rem;\n\t\t\tpadding-right: 3.2rem;\n\t\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -3.2rem;\n\t\tmargin-right: -3.2rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 3.2rem;\n\t\tmargin-right: 3.2rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.footer__list li {\n\t\tdisplay: list-item;\n\t\tfloat: left;\n\t\tpadding: 0 0.8rem 0 0;\n\t}\n\n\t.footer__list li:after {\n\t\tcontent: '\\2022'; /* bullet dot: '•' */\n\t\tcolor: var( --color-base--subtle );\n\t\tpadding: 0 0 0 0.8rem;\n\t\tfont-weight: 100;\n\t}\n\n\t.footer__list li:last-child:after {\n\t\tcontent: '';\n\t\tpadding: 0;\n\t}\n\n\t.color {\n\t\twidth: 16rem;\n\t\tmargin-right: 2.4rem;\n\t}\n}\n\n/* ... Smartphone landscape ... */\n@media ( min-width: 568px ) {\n\t.lnk--contribute {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.5rem; /* Not on 8px base due to `line-height` setting */\n\t\tright: 3.2rem;\n\t\ttext-align: right;\n\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 0;\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t.figures-do-dont .figure {\n\t\tmax-width: 61.8%;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\tmax-width: none;\n\t}\n\n\t.figure--illustrations-header {\n\t\tfloat: left;\n\t\twidth: 44.4%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header {\n\t\twidth: 55.55%;\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 1.6rem;\n\t}\n}\n\n/* ... Tablet ... */\n@media ( min-width: 768px ) {\n\timg {\n\t\tborder-radius: 2px;\n\t}\n\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t}\n\n\t.btn--nav-main {\n\t\tdisplay: none;\n\t}\n\n\t.site__title {\n\t\tfloat: left;\n\t\tmargin-left: 0;\n\t}\n\n\t\t.site__title a,\n\t\t.nav--main a {\n\t\t\tpadding-left: 1.6rem;\n\t\t\tpadding-right: 1.6rem;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 1;\n\t}\n\n\t.col--start {\n\t\twidth: 20.8rem;\n\t\tz-index: 1;\n\t\ttransition: width var( --transition-ease-medium );\n\t}\n\n\t.col--end {\n\t\tmargin-left: -20.8rem;\n\t\tpadding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */\n\t}\n\n\t.nav--main {\n\t\tleft: auto;\n\t\tright: auto;\n\t}\n\n\t.figure--full,\n\t.figure--full .figure__caption {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t.figures-do-dont .figure {\n\t\tfloat: left;\n\t\twidth: 50%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: unset;\n\t}\n\n\t/* ... “Illustrations” ... */\n\t.illustrations-case-study img {\n\t\tfloat: left;\n\t\twidth: 33.33%;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 6.4rem;\n\t}\n}\n\n/* ... Tablet+ / Netbook ... */\n@media ( min-width: 992px ) {\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: var( --width-site-desktop-wide );\n\t}\n\n\t.site__title a,\n\t.nav--main a {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.col--start {\n\t\twidth: 24rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -24rem;\n\t\tpadding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */\n\t}\n\n\t.color-palette--overview:first-child {\n\t\tmargin-top: 2.4rem;\n\t}\n\n\t.color {\n\t\tmargin-right: 2.4rem;\n\t}\n\n\t\t.color-palette--base .color {\n\t\t\tmargin-right: 1.35rem;\n\t\t}\n\n\t\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\t\tmargin-right: 1.35rem;\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t.color-palette--overview.color-palette--red:before,\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:before,\n\t.color-palette--overview.color-palette--green:after {\n\t\tcontent: '';\n\t\tdisplay: none;\n\t}\n\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:after,\n\t.color-section .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table__body .resources-table__cell {\n\t\ttransition: background-color var( --transition-ease-medium );\n\t}\n\n\t\t.resources-table__body:hover .resources-table__cell {\n\t\t\tbackground-color: #f8f9fa;\n\t\t}\n\n\t\t.resources-table__head .resources-table__cell:first-child,\n\t\t.resources-table__body .resources-table__cell:first-child {\n\t\t\tpadding-left: 1.6rem;\n\t\t}\n}\n\n@media ( min-width: 1200px ) {\n\t.content-box {\n\t\twidth: var( --width-site-desktop-wide );\n\t}\n\n\t.col--start {\n\t\twidth: 25.6rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -25.6rem;\n\t\tpadding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */\n\t}\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../node_modules/normalize.css/normalize.css","../partials/fonts.css","../wmui-style-guide.dev.css"],"names":[],"mappings":"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Y,AACZ,mBAAsB,CACtB,AAED,uBACC,gBAAiB,AACjB,cAAmC,AACnC,oBAAsB,AACtB,eAAiB,CACjB,AAED,kCACC,WAAY,AACZ,SAAW,CACX,AAED,OACC,YAAa,AACb,mBAAqB,CACrB,CACD,AAGD,yBACC,iBACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,aAAc,AACd,gBAAkB,CAClB,AAED,sBACC,eAAgB,AAChB,UAAW,AACX,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAED,yBACC,eAAiB,CACjB,AAED,sEAEC,cAAgB,CAChB,AAED,8BACC,WAAY,AACZ,WAAa,CACb,AAED,4DACC,aAAc,AACd,gBAAmB,CACnB,AAED,gEACC,iBAAmB,CACnB,CACD,AAGD,yBACC,IACC,uBAAmB,AAAnB,iBAAmB,CACnB,AAED,aACC,WAAY,AACZ,eAAiB,CACjB,AAED,eACC,YAAc,CACd,AAED,aACC,WAAY,AACZ,aAAe,CACf,AAEA,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,sBACC,eAAgB,AAChB,SAAW,CACX,AAED,YACC,cAAe,AACf,UAAW,AACX,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,UACC,qBAAsB,AACtB,kBAAoB,CACpB,AAED,WACC,UAAW,AACX,UAAY,CACZ,AAED,6CAEC,cAAe,AACf,cAAgB,CAChB,AAED,yBACC,WAAY,AACZ,SAAW,CACX,AAED,4CACC,WAAa,CACb,AAGD,8BACC,WAAY,AACZ,YAAc,CACd,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,WAAY,AACZ,gBAA4C,CAC5C,AAED,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,YACC,WAAa,CACb,AAED,UACC,mBAAoB,AACpB,oBAAsB,CACtB,AAED,qCACC,iBAAmB,CACnB,AAED,OACC,mBAAqB,CACrB,AAEA,4BACC,oBAAsB,CACtB,AAED,gEACC,qBAAsB,AACtB,aAAe,CACf,AAEF,8MAIC,WAAY,AACZ,YAAc,CACd,AAED,4IAGC,UAAY,CACZ,AAGD,8CACC,yCAA6D,AAA7D,sCAA6D,AAA7D,gCAA6D,CAC7D,AAEA,oDACC,wBAA0B,CAC1B,AAED,oHAEC,mBAAqB,CACrB,CACF,AAED,0BACC,aACC,YAAwC,CACxC,AAED,YACC,aAAe,CACf,AAED,UACC,qBAAsB,AACtB,oBAAsB,CACtB,CACD","file":"wmui-style-guide.min.css","sourcesContent":["/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n background-color: transparent; /* 1 */\n -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: sans-serif; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n display: inline-block; /* 1 */\n vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n display: none;\n}\n","@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_regular.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */\n}\n\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_bold.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n\n/*\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility;\n}\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n*/\n","/* ::: Vendor Imports ::: */\n/* Load files from 'node_modules' folders with postCSS-import plugin.\n * Modules specified in package.json file */\n@import 'wikimedia-ui-base/wikimedia-ui-base.css';\n@import 'normalize.css';\n\n/* ::: Local Imports ::: */\n@import 'partials/fonts.css';\n\n:root {\n\t--background-color-hr: var( --wmui-color-base80 );\n\t--width-site: 960px;\n\t--width-site-desktop-wide: 1140px;\n\t--border-color-heading: var( --wmui-color-base80 );\n\t--border-width-heading: 3px;\n\t--outline-color-base--focus: var( --color-primary--focus );\n\t/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */\n\t--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */\n\t--font-weight-base: 400;\n\t/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.\n\t Helvetica and Arial fallback gracefully to `700`, see T246791. */\n\t--font-weight-bold: 600;\n\t--font-weight-ultralight: 100;\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\tfont-size: 62.5%;\n}\n\nbody {\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tcolor: var( --color-base );\n\tmargin: 0;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.6rem;\n\tline-height: var( --line-height-base );\n}\n\n/* ::: Text Block-Level Elements ::: */\n/* ... Headings ... */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.25;\n\ttransition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );\n}\n\nh2,\nh3,\nh4,\nh5 {\n\tfont-weight: var( --font-weight-bold );\n}\n\nh1,\n.page__title {\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 3.2rem;\n\tfont-weight: var( --font-weight-base );\n}\n\nh2 {\n\tborder-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );\n\tpadding-bottom: 2px;\n\tfont-size: 2.4rem;\n}\n\n/* Reduce top margin when introductory headlines are following each other. */\nh2 + h3 {\n\tmargin-top: 1.6rem;\n}\n\nh3 {\n\tfont-size: 2rem;\n}\n\nh4 {\n\tfont-size: 1.8rem;\n}\n\nh5 {\n\tfont-size: 1.6rem;\n}\n\nh6 {\n\tfont-size: 1.6rem;\n\tfont-weight: normal;\n}\n\n/* ... Other Block-Level Elements ... */\nblockquote {\n\tborder-left: 3px solid var( --wmui-color-base70 ); /* FIXME: var */\n\tmargin: 1.6rem 0 0;\n\tpadding: 0 3.2rem;\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tline-height: 1.5;\n}\n\nblockquote cite {\n\tdisplay: block;\n\tmargin-top: 0.8rem;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.4rem;\n\tfont-style: normal;\n}\n\n\tblockquote cite:before {\n\t\tcontent: '— ';\n\t}\n\ncode,\npre,\n.mw-code {\n\tfont-family: var( --font-family-monospace );\n}\n\nhr {\n\tbackground: var( --background-color-hr );\n\tdisplay: block;\n\theight: 0.8rem;\n\tborder: 0;\n\tmargin: 8rem 0;\n}\n\np {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.5;\n}\n\n\th1 + p,\n\th2 + p,\n\th3 + p,\n\th4 + p,\n\th5 + p,\n\th6 + p,\n\tp + p,\n\tul + p,\n\tp:first-child {\n\t\tmargin: 0.8rem 0 0;\n\t}\n\n\tblockquote + p {\n\t\tmargin-top: 1.6rem;\n\t}\n\npre,\n.mw-code {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n\tborder: var( --border-base );\n\tpadding: 1.2rem 2rem;\n\tfont-size: 1.4rem;\n\twhite-space: pre-wrap;\n}\n\n/* ... Lists ... */\nol,\nul {\n\tmargin: 0.8rem 0;\n\tpadding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */\n}\n\n.content li {\n\tmargin-top: 0.4rem;\n}\n\n\t.content li:first-child {\n\t\tmargin-top: 0;\n\t}\n\n/* ... Images & Figures ... */\nfigure {\n\tmargin: 0.8rem 0 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n\tmargin: 1.6rem 0 0;\n}\n\n.page--components figure {\n\tmargin-left: 6.4rem;\n\tpadding-top: 0.8rem;\n}\n\n.page--components figure img {\n\tmargin-top: 0.8rem;\n}\n\n/* ::: Inline Elements ::: */\na {\n\tcolor: var( --color-primary );\n\ttext-decoration: none;\n}\n\n\ta:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\ta:active {\n\t\tcolor: var( --color-primary--active );\n\t}\n\nb,\nstrong {\n\tfont-weight: var( --font-weight-bold );\n}\n\ncode {\n\tbackground-color: var( --background-color-code );\n\tdisplay: inline-block;\n\tpadding: 0.2rem 0.4rem;\n\tfont-size: 1.4rem;\n}\n\nsmall {\n\tfont-size: 1.3rem;\n}\n\nsub,\nsup {\n\tfont-size: 1.1rem;\n}\n\n/* ::: General Classes ::: */\n/* ::: Text for Screen Readers only ::: */\n.is-aural {\n\tdisplay: block;\n\tposition: absolute;\n\tclip: rect( 1px, 1px, 1px, 1px );\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\toverflow: hidden;\n}\n\n\t.is-aural.is-focusable:active,\n\t.is-aural.is-focusable:focus {\n\t\tposition: static;\n\t\tclip: auto;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\toverflow: visible;\n\t}\n\n.clearfix:before,\n.clearfix:after,\n.page:before,\n.page:after,\n.content-box:before,\n.content-box:after,\n.color-palette:before,\n.color-palette:after,\n.figures-do-dont:before,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:before,\n.content__illustration-style .figure--full:after {\n\tcontent: ' ';\n\tdisplay: table;\n}\n\n.clearfix:after,\n.page:after,\n.content-box:after,\n.color-palette:after,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:after {\n\tclear: both;\n}\n\n/* ::: Text-formatting ::: */\n/* Support Blink based browsers. */\n/* They use `outline` for focus styles, we're only amending the color here, see T245887. */\n:focus {\n\toutline-color: var( --outline-color-base--focus );\n}\n\n.is-complementary,\n.is-subtle {\n\tcolor: var( --color-base--subtle );\n}\n\n.is-complementary {\n\tfont-size: 1.4rem;\n}\n\n::placeholder,\n.is-placeholder {\n\tcolor: var( --color-placeholder );\n\topacity: 1;\n}\n\n.content-box {\n\tposition: relative;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tpadding-left: 1.6rem; /* FIXME: var( --grid-padding ); */\n\tpadding-right: 1.6rem;\n}\n\n\n/* ::: Structure ::: */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmin-height: 6.4rem;\n\tline-height: 6.4rem;\n}\n\n\t.site__title {\n\t\tcolor: var( --wmui-color-base10 );\n\t\tmargin-top: 0;\n\t\theight: 6.4rem;\n\t\tfont-family: var( --font-family-system-sans );\n\t\tfont-size: 1.6rem;\n\t\tfont-weight: var( --font-weight-base );\n\t\tletter-spacing: 0.5px;\n\t}\n\n\t\t.site__title a {\n\t\t\tcolor: inherit;\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 1.2rem 3.2rem 0;\n\t\t\ttransition: color var( --transition-ease-medium );\n\t\t}\n\n\t\t.site__title a:hover {\n\t\t\tcolor: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t.site__org {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.site__project {\n\t\t\tfont-weight: var( --font-weight-bold );\n\t\t}\n\n\t/* ... Navigation button ... */\n\t.btn--nav-main {\n\t\tposition: absolute;\n\t\ttop: 1.2rem;\n\t\twidth: 4.2rem;\n\t\theight: 4.2rem;\n\t\tcursor: pointer;\n\t}\n\n\t/* Fake hamburger icon */\n\t.btn--nav-main i {\n\t\tdisplay: block;\n\t\theight: 4.2rem;\n\t\ttransition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );\n\t}\n\n\t.btn--nav-main i:before,\n\t.btn--nav-main i:after {\n\t\tcontent: '';\n\t\tbackground-color: var( --wmui-color-base20 );\n\t\twidth: 2rem;\n\t\theight: 2px;\n\t\tposition: absolute;\n\t\ttop: 0.4rem;\n\t\tleft: 0;\n\t}\n\n\t.btn--nav-main i:after {\n\t\ttop: 1.1rem;\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base20 );\n\t}\n\n\t.btn--nav-main i:hover:before,\n\t.btn--nav-main i:hover:after {\n\t\tbackground-color: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t}\n\n\t.btn--nav-main i:hover:after {\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base0 );\n\t}\n\n\t.btn--nav-main span {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tclip: rect( 1px, 1px, 1px, 1px );\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t}\n\n\t/* ... GitHub Contribute Link ... */\n\t.lnk--contribute {\n\t\tfont-size: 1.4rem;\n\t\tline-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */\n\t}\n\n\n/* ... Content ... */\n.page {\n\tbackground-color: var( --background-color-base );\n\tposition: relative;\n\tmargin-top: 6.4rem;\n\tpadding: 6.4rem 0;\n\tbox-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );\n\toverflow-y: hidden;\n}\n\n.content {\n\tfloat: left;\n}\n\n.col {\n\tfloat: left;\n\tposition: relative;\n\tmin-height: 1px;\n}\n\n\t.col--start {\n\t\tpadding: 0;\n\t}\n\n\t.col--end {\n\t\tpadding: 0;\n\t}\n\n/* ... Main Navigation ... */\n.nav--main {\n\tbackground-color: var( --background-color-base ); /* needed for menu appearance on mobile below */\n\t/* margin-top: 6.4rem; */\n}\n\n.nav--main li:not( .is-on ) ul,\n.trigger--nav-main {\n\tdisplay: none;\n}\n\n.nav--main ol,\n.nav--main ul {\n\tpadding: 0;\n}\n\n.nav--main ol:first-child {\n\tmargin: 0;\n}\n\n.nav--main li {\n\tpadding: 0;\n\tlist-style: none none;\n}\n\n.nav--main > ol > li {\n\tmargin-bottom: 0.4rem;\n}\n\n.nav--main a {\n\tcolor: var( --color-base );\n\tdisplay: block;\n\tpadding: 0.8rem 1.2rem;\n\tfont-size: 1.6rem;\n\ttext-decoration: none;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );\n}\n\n.nav--main a:hover,\n.nav--main a:focus {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n}\n\n.nav--main .is-on > a {\n\tbackground-color: var( --background-color-primary );\n\tcolor: var( --color-primary );\n\t/* border-left: 2px solid var( --color-primary ); */\n\tborder-radius: var( --border-radius-base );\n\tfont-weight: var( --font-weight-bold );\n\tcursor: default;\n}\n\n.nav__sub-items {\n\tmargin-top: 1.2rem;\n\tmargin-bottom: 1em; /* FIXME: replace with rem and mt */\n}\n\n.nav__sub-items > .nav__sub-item {\n\tmargin-left: 3.6rem;\n}\n\n.nav--main .nav__sub-items ul {\n\tmargin: 0;\n}\n\n.nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */\n\tcolor: var( --wmui-color-base20 );\n\tborder-left: var( --border-width-base ) solid var( --wmui-color-base80 );\n border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;\n\tpadding-left: 1.6rem;\n\tfont-size: 1.4rem;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );\n}\n\n.nav--main .nav__sub-item.is-on > a {\n\tbackground-color: var( --background-color-base );\n\tcolor: var( --color-base--active );\n\tborder-left-color: var( --wmui-color-base0 );\n\tfont-weight: var( --font-weight-bold );\n}\n\n.nav--main .nav__sub-item .nav__sub-item a {\n\tpadding-left: 3.6rem;\n}\n\n\n/* ::: Content ::: */\n.page__parent-title {\n\tcolor: var( --color-base--subtle );\n\tmargin-top: -2.8rem;\n}\n\n.page__title {\n\tmargin-top: -0.8rem;\n}\n\n.page__parent-title + .page__title {\n\tmargin-top: -0.4rem;\n}\n\n.page__tagline {\n\tmargin-top: 1.2rem;\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tfont-weight: 100;\n}\n\n/* Remove, doesn't provide good styling\n.page__lead {\n\tfont-size: 1.8rem;\n}\n*/\n\n.figures--full {\n\tbackground-color: var( --wmui-color-base90 );\n}\n\n.figure__caption,\n.heading__description {\n\tcolor: var( --color-base--subtle );\n\tclear: both;\n\tdisplay: block;\n\tfont-size: 1.3rem;\n}\n\n.figure__caption {\n\tpadding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */\n\tfont-style: italic;\n}\n\n\t.figure__caption:empty {\n\t\tdisplay: none;\n\t}\n\n.heading__description {\n\tfloat: right;\n\tmargin-top: -1.9rem;\n}\n\n\t.heading__description + * {\n\t\tclear: both;\n\t}\n\n/* ... “Do” & “Don't” figures ... */\n.figures-do-dont {\n\tmargin-top: 1.6rem;\n}\n\n.figures-do-dont .figure {\n\tbackground-color: var( --wmui-color-base80 );\n\tborder-top-left-radius: var( --border-radius-base );\n\tborder-top-right-radius: var( --border-radius-base );\n}\n\n.figures-do-dont .figure--dont {\n\tborder-left: var( --border-width-base ) solid var( --color-base--inverted );\n}\n\n.figures-do-dont .figure__caption {\n\tbackground-color: var( --color-base--inverted );\n\tdisplay: block;\n\tborder-top-width: 0.8rem;\n\tborder-top-style: solid;\n\tpadding-right: 0.8em;\n}\n\n.figure--do .figure__caption,\n.do {\n\tborder-top-color: var( --color-secondary );\n}\n\n.figure--dont .figure__caption,\n.dont {\n\tborder-top-color: var( --color-destructive );\n}\n\n.do,\n.dont {\n\tfont-style: normal;\n\tfont-weight: var( --font-weight-bold );\n}\n\n\t.do:before,\n\t.dont:before {\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.4rem;\n\t\tpadding-top: 0.4rem;\n\t\tfont-size: 2.1rem;\n\t\tline-height: 1rem;\n\t\tvertical-align: top;\n\t}\n\n.do {\n\tcolor: var( --color-success );\n}\n\n\t.do:before {\n\t\tcontent: '✓';\n\t}\n\n.dont {\n\tcolor: var( --color-destructive );\n}\n\n\t.dont:before {\n\t\tcontent: '×';\n\t}\n\n\n/* ... Color ... */\n.color-palette {\n\tmargin: 2.4rem 0 0;\n\tpadding: 0;\n}\n\n.color-palette + .color-palette {\n\tmargin-top: 0;\n}\n\n.color {\n\tcolor: var( --color-base--emphasized );\n\tlist-style: none none;\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 61.8%;\n\theight: 16rem;\n\tmargin-bottom: 3.2rem;\n\tpadding: 1.2rem;\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );\n\tborder-radius: var( --border-radius-base );\n\tfont-size: 1.4rem;\n}\n\n\t.color--dark,\n\t.color__wcag-level span {\n\t\tcolor: var( --color-base--inverted );\n\t}\n\n\t.color--dark .color__wcag-level span {\n\t\tcolor: var( --color-base--emphasized );\n\t}\n\n\t.color-palette .color:first-child {\n\t\tmargin-top: 0.4rem;\n\t}\n\n\t.color-palette--overview .color {\n\t\twidth: 6.4rem;\n\t\theight: 6.2rem;\n\t\tmargin-top: 0.8rem;\n\t\tmargin-right: 1.2rem;\n\t\tmargin-bottom: 2.4rem;\n\t\tborder-radius: 3.2rem;\n\t\tcursor: default;\n\t}\n\n\t.color-palette--overview .color:first-child {\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.color-palette--overview .color--emphasized {\n\t\twidth: 7.2rem;\n\t\theight: 7rem;\n\t\tmargin-top: 0;\n\t\tborder-radius: 7.2rem;\n\t\tpadding-top: 2rem;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.35rem;\n\t}\n\n\t.color-section .color .color-code--hsb {\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t\t.color-section .color:hover .color-code--hsb {\n\t\t\topacity: 1;\n\t\t}\n\n\t.color__name {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.2rem;\n\t\tleft: 1.2rem;\n\t\tfont-size: 3.2rem;\n\t\tfont-weight: var( --font-weight-ultralight );\n\t}\n\n\t\t.color-palette--overview .color__name {\n\t\t\tposition: relative;\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\tpadding-top: 1.2rem;\n\t\t\tfont-size: 2.4rem;\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t.color__type,\n\t\t.color-code.color-code--rgb,\n\t\t.color-palette--overview .color__name,\n\t\t.color-palette--overview .color-code {\n\t\t\tdisplay: none;\n\t\t}\n\n\t.color-code {\n\t\tbackground-color: inherit;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\tfont-family: var( --font-family-system-sans );\n\t}\n\n\t\t.color-code--hsb {\n\t\t\topacity: 0;\n\t\t}\n\n@supports ( --css: variables ) {\n\t.color-hint {\n\t\twhite-space: nowrap;\n\t}\n\n\t.color-hint:before {\n\t\tcontent: '';\n\t\tbackground-color: var( --color-hint );\n\t\tdisplay: inline-block;\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin: 0 0.4rem 0.3rem 0.2rem;\n\t\tborder-radius: 50%;\n\t\tvertical-align: text-bottom;\n\t\tcursor: help;\n\t}\n\n\t.color-hint--base100:before {\n\t\tborder: var( --border-base );\n\t}\n}\n\n\n/* ... Icon ... */\n.icon {\n\tdisplay: inline-block;\n\twidth: 2rem;\n\theight: 2rem;\n\tmargin: 0 0.2rem;\n\tvertical-align: text-bottom;\n}\n\n\t.icon--indicator {\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\t.icon--intermediate {\n\t\twidth: 1.6rem;\n\t\theight: 1.6rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\n/* ... Components ... */\n/*\n.page--components h2 {\n\tborder-bottom: 0;\n\tpadding-bottom: 0;\n}\n*/\n.components__designing {\n\tposition: relative;\n}\n\n.components__designing:after {\n\tcontent: '';\n\tbackground: url( ../../img/components/legend_16-8.svg ) no-repeat;\n\tposition: absolute;\n\tbottom: 0;\n\tright: 6.4rem;\n\twidth: 13.2rem;\n\theight: 6.4rem;\n}\n\n.page--components-messages .components__intro {\n\tmax-width: 700px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n/* ... Resources ... */\n.resources-table {\n\tdisplay: table;\n\twidth: 100%;\n\tmargin-top: 2.4rem;\n\tborder-collapse: collapse;\n}\n\n.resources-table__head,\n.resources-table__body {\n\tdisplay: table-row;\n\tborder-bottom: 1px solid #a2a9b1;\n}\n\n.resources-table__head {\n\tbackground-color: #eaecf0;\n}\n\n\t.resources-table__head h2 {\n\t\tmargin-top: 0;\n\t\tborder-bottom: 0;\n\t\tpadding-bottom: 0;\n\t\tfont-size: 2.1rem;\n\t\tfont-weight: var( --font-weight-base );\n\t}\n\n.resources-table__cell {\n\tdisplay: table-cell;\n\tpadding: 1.6rem 1.6rem 1.6rem 0;\n}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 1.6rem;\n\t}\n\n.lnk-resource {\n\twhite-space: nowrap;\n}\n\n/* ::: Footer ::: */\n.footer {\n\tcolor: var( --color-base );\n\tpadding: 2.4rem 0;\n\tfont-size: 1.3rem;\n}\n\n.footer__list {\n\tpadding: 0;\n}\n\n\t.footer__list:first-child {\n\t\tmargin: 0;\n\t}\n\n\t.footer__list:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\tclear: both;\n\t}\n\n\t.footer__list li {\n\t\tlist-style: none none;\n\t\tdisplay: block;\n\t\tpadding: 0.8rem 0 0;\n\t}\n\n\t.footer__list li:first-child {\n\t\tpadding-top: 0;\n\t}\n\n\t.footer__list + p {\n\t\tmargin-top: 1.2rem;\n\t}\n\n\t.footer__list--connect a {\n\t\tfont-weight: var( --font-weight-bold );\n\t}\n\n.lnk--wikimedia-project {\n\tdisplay: inline-block;\n\tpadding: 0.4rem 0;\n\ttext-transform: uppercase;\n}\n\n\n/* ::: Page-specific Styles ::: */\n/* ... Homepage ... */\n.page--home .page__title {\n\tborder: 0;\n\tpadding: 0;\n}\n\n/* ... “Design principles – Accessibility” ... */\n.page--design-principles-accessibility .nav--main .is-on > a {\n\tcursor: pointer;\n}\n\n.page--design-principles-accessibility h3 {\n\tpadding-right: 15%;\n}\n\n/* ... “Typography” ... */\n.page--visual-style-typography .figures-do-dont .figure__contents {\n\tpadding: 4.2rem 3.6rem;\n}\n\n.figures-do-dont--contrast .figure--dont {\n\tcolor: var( --wmui-color-base50 );\n}\n\n/* ... Typography Styles ... */\n\n.typography-styles dt {\n\tdisplay: inline-block;\n\tcolor: var( --color-base--subtle );\n\tmin-width: 10rem;\n\tmargin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */\n\tfont-size: 1.3rem;\n\tfont-weight: var( --font-weight-bold );\n\tvertical-align: top;\n}\n\n.typography-styles .typography-styles__code {\n\tmargin-bottom: 0;\n}\n\n.typography-styles dd {\n\tdisplay: inline;\n}\n\n.typography-styles dd > * {\n\tdisplay: inline-block;\n\tmargin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */\n}\n\n.typography-styles .figure__caption {\n\tpadding-top: 0; /* Remove `padding` from elements like figure caption */\n}\n\n.typography-styles dd:after {\n content: '\\A';\n white-space: pre;\n}\n\n.typography-styles + hr {\n\tmargin-top: 4rem;\n\tmargin-bottom: 4rem;\n}\n\n/* ... “Icons” ... */\n.page--visual-style-icons img { /* FIXME: generalize image styles */\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tpadding: 2.4rem;\n}\n\n\n/* ::: Dynamic content ::: */\n.fonts-loaded cite,\n.fonts-loaded .site__title,\n.fonts-loaded .color-code {\n\tfont-family: var( --font-family-system-sans );\n}\n\n/* ::: Text Block-Level Elements ::: */\n.fonts-loaded .page__title,\n.fonts-loaded blockquote,\n.fonts-loaded .typography-styles h1 {\n\tfont-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */\n}\n\n\n/* ::: Media Queries ::: */\n/* ... Smartphone only ... */\n@media ( max-width: 767px ) {\n\t.nav--main {\n\t\tposition: absolute;\n\t\ttop: -3.2rem;\n\t\tleft: -1.6rem;\n\t\tright: -1.6rem;\n\t\tpadding-bottom: 1.6rem;\n\t\tbox-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */\n\t\tz-index: 1;\n\t\ttransform: translateY( -200% );\n\t\ttransition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );\n\t}\n\n\t.trigger--nav-main:checked + .nav--main {\n\t\ttransform: translateY( 0 );\n\t}\n\n\t.page__title {\n\t\tmargin-top: -0.4rem;\n\t\tfont-size: 2.8rem;\n\t}\n\n\t.typography-styles dt {\n\t\tdisplay: block;\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Components ... */\n\t.page--components .components__states {\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table,\n\t.resources-table__head,\n\t.resources-table__body,\n\t.resources-table__cell {\n\t\tdisplay: block;\n\t}\n\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:empty {\n\t\tdisplay: none;\n\t}\n\n\t.resources-table__body {\n\t\tpadding-left: 0;\n\t}\n\n\t.resources-table__cell {\n\t\tpadding-top: 0.8rem;\n\t\tpadding-bottom: 0.8rem;\n\t}\n}\n\n/* ... Smartphone portrait ... */\n@media ( min-width: 240px ) {\n\t.content-box,\n\t.site__title a,\n\t.nav--main a {\n\t\ttransition-property: background-color, padding;\n\t\ttransition-duration: var( --transition-ease-medium );\n\t}\n\n\t.site__title {\n\t\tmargin-left: 4.2rem;\n\t}\n\n\t\t.site__title a {\n\t\t\tpadding-left: 0;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: none;\n\t}\n\n\t.nav--main a {\n\t\tpadding-left: 1.6rem;\n\t\tpadding-right: 1.6rem;\n\t}\n\n\t.col--start,\n\t.col--end {\n\t\twidth: 100%;\n\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 1.6rem;\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\twidth: 100%;\n\t\tmax-width: 568px;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.figure--illustrations-header img {\n\t\twidth: 100%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header,\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 0;\n\t}\n\n\t.color {\n\t\twidth: 61.8%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\tmargin-right: 1.1rem;\n\t\tmargin-left: -0.2rem;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 4.2rem;\n\t}\n}\n\n/* ... Smartphone+ portrait ... */\n@media ( min-width: 414px ) {\n\t.content-box {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.nav--main {\n\t\tleft: -3.2rem;\n\t\tright: -3.2rem;\n\t}\n\n\t\t.nav--main a {\n\t\t\tpadding-left: 3.2rem;\n\t\t\tpadding-right: 3.2rem;\n\t\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -3.2rem;\n\t\tmargin-right: -3.2rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 3.2rem;\n\t\tmargin-right: 3.2rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.footer__list li {\n\t\tdisplay: list-item;\n\t\tfloat: left;\n\t\tpadding: 0 0.8rem 0 0;\n\t}\n\n\t.footer__list li:after {\n\t\tcontent: '\\2022'; /* bullet dot: '•' */\n\t\tcolor: var( --color-base--subtle );\n\t\tpadding: 0 0 0 0.8rem;\n\t\tfont-weight: 100;\n\t}\n\n\t.footer__list li:last-child:after {\n\t\tcontent: '';\n\t\tpadding: 0;\n\t}\n\n\t.color {\n\t\twidth: 16rem;\n\t\tmargin-right: 2.4rem;\n\t}\n}\n\n/* ... Smartphone landscape ... */\n@media ( min-width: 568px ) {\n\t.lnk--contribute {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.5rem; /* Not on 8px base due to `line-height` setting */\n\t\tright: 3.2rem;\n\t\ttext-align: right;\n\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 0;\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t.figures-do-dont .figure {\n\t\tmax-width: 61.8%;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\tmax-width: none;\n\t}\n\n\t.figure--illustrations-header {\n\t\tfloat: left;\n\t\twidth: 44.4%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header {\n\t\twidth: 55.55%;\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 1.6rem;\n\t}\n}\n\n/* ... Tablet ... */\n@media ( min-width: 768px ) {\n\timg {\n\t\tborder-radius: 2px;\n\t}\n\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t}\n\n\t.btn--nav-main {\n\t\tdisplay: none;\n\t}\n\n\t.site__title {\n\t\tfloat: left;\n\t\tmargin-left: 0;\n\t}\n\n\t\t.site__title a,\n\t\t.nav--main a {\n\t\t\tpadding-left: 1.6rem;\n\t\t\tpadding-right: 1.6rem;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 1;\n\t}\n\n\t.col--start {\n\t\twidth: 20.8rem;\n\t\tz-index: 1;\n\t\ttransition: width var( --transition-ease-medium );\n\t}\n\n\t.col--end {\n\t\tmargin-left: -20.8rem;\n\t\tpadding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */\n\t}\n\n\t.nav--main {\n\t\tleft: auto;\n\t\tright: auto;\n\t}\n\n\t.figure--full,\n\t.figure--full .figure__caption {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t.figures-do-dont .figure {\n\t\tfloat: left;\n\t\twidth: 50%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: unset;\n\t}\n\n\t/* ... “Illustrations” ... */\n\t.illustrations-case-study img {\n\t\tfloat: left;\n\t\twidth: 33.33%;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 6.4rem;\n\t}\n}\n\n/* ... Tablet+ / Netbook ... */\n@media ( min-width: 992px ) {\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: var( --width-site-desktop-wide );\n\t}\n\n\t.site__title a,\n\t.nav--main a {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.col--start {\n\t\twidth: 24rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -24rem;\n\t\tpadding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */\n\t}\n\n\t.color-palette--overview:first-child {\n\t\tmargin-top: 2.4rem;\n\t}\n\n\t.color {\n\t\tmargin-right: 2.4rem;\n\t}\n\n\t\t.color-palette--base .color {\n\t\t\tmargin-right: 1.35rem;\n\t\t}\n\n\t\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\t\tmargin-right: 1.35rem;\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t.color-palette--overview.color-palette--red:before,\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:before,\n\t.color-palette--overview.color-palette--green:after {\n\t\tcontent: '';\n\t\tdisplay: none;\n\t}\n\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:after,\n\t.color-section .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table__body .resources-table__cell {\n\t\ttransition: background-color var( --transition-ease-medium );\n\t}\n\n\t\t.resources-table__body:hover .resources-table__cell {\n\t\t\tbackground-color: #f8f9fa;\n\t\t}\n\n\t\t.resources-table__head .resources-table__cell:first-child,\n\t\t.resources-table__body .resources-table__cell:first-child {\n\t\t\tpadding-left: 1.6rem;\n\t\t}\n}\n\n@media ( min-width: 1200px ) {\n\t.content-box {\n\t\twidth: var( --width-site-desktop-wide );\n\t}\n\n\t.col--start {\n\t\twidth: 25.6rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -25.6rem;\n\t\tpadding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */\n\t}\n}\n"]} \ No newline at end of file diff --git a/css/wmui-style-guide.dev.css b/css/wmui-style-guide.dev.css index 7d1556b..c719dc7 100644 --- a/css/wmui-style-guide.dev.css +++ b/css/wmui-style-guide.dev.css @@ -1,1390 +1,1397 @@ /* ::: Vendor Imports ::: */ /* Load files from 'node_modules' folders with postCSS-import plugin. * Modules specified in package.json file */ @import 'wikimedia-ui-base/wikimedia-ui-base.css'; @import 'normalize.css'; /* ::: Local Imports ::: */ @import 'partials/fonts.css'; :root { --background-color-hr: var( --wmui-color-base80 ); --width-site: 960px; --width-site-desktop-wide: 1140px; --border-color-heading: var( --wmui-color-base80 ); --border-width-heading: 3px; + --outline-color-base--focus: var( --color-primary--focus ); /* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */ --font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */ --font-weight-base: 400; /* Setting bold to `600` as our stack works better with it, only Lato is on the edge. Helvetica and Arial fallback gracefully to `700`, see T246791. */ --font-weight-bold: 600; --font-weight-ultralight: 100; } * { box-sizing: border-box; } html { font-size: 62.5%; } body { background-color: var( --wmui-color-base80 ); /* FIXME: var; */ color: var( --color-base ); margin: 0; font-family: var( --font-family-system-sans ); font-size: 1.6rem; line-height: var( --line-height-base ); } /* ::: Text Block-Level Elements ::: */ /* ... Headings ... */ h1, h2, h3, h4, h5, h6 { margin: 3.2rem 0 0; line-height: 1.25; transition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium ); } h2, h3, h4, h5 { font-weight: var( --font-weight-bold ); } h1, .page__title { font-family: var( --font-family-serif--fallback ); /* Fallback */ font-size: 3.2rem; font-weight: var( --font-weight-base ); } h2 { border-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading ); padding-bottom: 2px; font-size: 2.4rem; } /* Reduce top margin when introductory headlines are following each other. */ h2 + h3 { margin-top: 1.6rem; } h3 { font-size: 2rem; } h4 { font-size: 1.8rem; } h5 { font-size: 1.6rem; } h6 { font-size: 1.6rem; font-weight: normal; } /* ... Other Block-Level Elements ... */ blockquote { border-left: 3px solid var( --wmui-color-base70 ); /* FIXME: var */ margin: 1.6rem 0 0; padding: 0 3.2rem; font-family: var( --font-family-serif--fallback ); /* Fallback */ font-size: 2rem; font-style: italic; line-height: 1.5; } blockquote cite { display: block; margin-top: 0.8rem; font-family: var( --font-family-system-sans ); font-size: 1.4rem; font-style: normal; } blockquote cite:before { content: '— '; } code, pre, .mw-code { font-family: var( --font-family-monospace ); } hr { background: var( --background-color-hr ); display: block; height: 0.8rem; border: 0; margin: 8rem 0; } p { margin: 3.2rem 0 0; line-height: 1.5; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, p + p, ul + p, p:first-child { margin: 0.8rem 0 0; } blockquote + p { margin-top: 1.6rem; } pre, .mw-code { background-color: var( --background-color-code ); color: var( --color-base--emphasized ); border: var( --border-base ); padding: 1.2rem 2rem; font-size: 1.4rem; white-space: pre-wrap; } /* ... Lists ... */ ol, ul { margin: 0.8rem 0; padding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */ } .content li { margin-top: 0.4rem; } .content li:first-child { margin-top: 0; } /* ... Images & Figures ... */ figure { margin: 0.8rem 0 0; } img { display: block; max-width: 100%; margin: 1.6rem 0 0; } .page--components figure { margin-left: 6.4rem; padding-top: 0.8rem; } .page--components figure img { margin-top: 0.8rem; } /* ::: Inline Elements ::: */ a { color: var( --color-primary ); text-decoration: none; } a:hover { text-decoration: underline; } a:active { color: var( --color-primary--active ); } b, strong { font-weight: var( --font-weight-bold ); } code { background-color: var( --background-color-code ); display: inline-block; padding: 0.2rem 0.4rem; font-size: 1.4rem; } small { font-size: 1.3rem; } sub, sup { font-size: 1.1rem; } /* ::: General Classes ::: */ /* ::: Text for Screen Readers only ::: */ .is-aural { display: block; position: absolute; clip: rect( 1px, 1px, 1px, 1px ); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; } .is-aural.is-focusable:active, .is-aural.is-focusable:focus { position: static; clip: auto; width: auto; height: auto; margin: 0; text-decoration: underline; overflow: visible; } .clearfix:before, .clearfix:after, .page:before, .page:after, .content-box:before, .content-box:after, .color-palette:before, .color-palette:after, .figures-do-dont:before, .figures-do-dont:after, .content__illustration-style .figure--full:before, .content__illustration-style .figure--full:after { content: ' '; display: table; } .clearfix:after, .page:after, .content-box:after, .color-palette:after, .figures-do-dont:after, .content__illustration-style .figure--full:after { clear: both; } /* ::: Text-formatting ::: */ +/* Support Blink based browsers. */ +/* They use `outline` for focus styles, we're only amending the color here, see T245887. */ +:focus { + outline-color: var( --outline-color-base--focus ); +} + .is-complementary, .is-subtle { color: var( --color-base--subtle ); } .is-complementary { font-size: 1.4rem; } ::placeholder, .is-placeholder { color: var( --color-placeholder ); opacity: 1; } .content-box { position: relative; margin-right: auto; margin-left: auto; padding-left: 1.6rem; /* FIXME: var( --grid-padding ); */ padding-right: 1.6rem; } /* ::: Structure ::: */ .header { position: fixed; top: 0; left: 0; right: 0; min-height: 6.4rem; line-height: 6.4rem; } .site__title { color: var( --wmui-color-base10 ); margin-top: 0; height: 6.4rem; font-family: var( --font-family-system-sans ); font-size: 1.6rem; font-weight: var( --font-weight-base ); letter-spacing: 0.5px; } .site__title a { color: inherit; display: inline-block; padding: 1.2rem 3.2rem 0; transition: color var( --transition-ease-medium ); } .site__title a:hover { color: var( --wmui-color-base0 ); /* --color-base-emphasized */ text-decoration: none; } .site__org { display: block; } .site__project { font-weight: var( --font-weight-bold ); } /* ... Navigation button ... */ .btn--nav-main { position: absolute; top: 1.2rem; width: 4.2rem; height: 4.2rem; cursor: pointer; } /* Fake hamburger icon */ .btn--nav-main i { display: block; height: 4.2rem; transition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium ); } .btn--nav-main i:before, .btn--nav-main i:after { content: ''; background-color: var( --wmui-color-base20 ); width: 2rem; height: 2px; position: absolute; top: 0.4rem; left: 0; } .btn--nav-main i:after { top: 1.1rem; box-shadow: 0 0.7rem 0 var( --wmui-color-base20 ); } .btn--nav-main i:hover:before, .btn--nav-main i:hover:after { background-color: var( --wmui-color-base0 ); /* --color-base-emphasized */ } .btn--nav-main i:hover:after { box-shadow: 0 0.7rem 0 var( --wmui-color-base0 ); } .btn--nav-main span { display: block; position: absolute; clip: rect( 1px, 1px, 1px, 1px ); width: 1px; height: 1px; margin: -1px; overflow: hidden; } /* ... GitHub Contribute Link ... */ .lnk--contribute { font-size: 1.4rem; line-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */ } /* ... Content ... */ .page { background-color: var( --background-color-base ); position: relative; margin-top: 6.4rem; padding: 6.4rem 0; box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 ); overflow-y: hidden; } .content { float: left; } .col { float: left; position: relative; min-height: 1px; } .col--start { padding: 0; } .col--end { padding: 0; } /* ... Main Navigation ... */ .nav--main { background-color: var( --background-color-base ); /* needed for menu appearance on mobile below */ /* margin-top: 6.4rem; */ } .nav--main li:not( .is-on ) ul, .trigger--nav-main { display: none; } .nav--main ol, .nav--main ul { padding: 0; } .nav--main ol:first-child { margin: 0; } .nav--main li { padding: 0; list-style: none none; } .nav--main > ol > li { margin-bottom: 0.4rem; } .nav--main a { color: var( --color-base ); display: block; padding: 0.8rem 1.2rem; font-size: 1.6rem; text-decoration: none; transition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium ); } .nav--main a:hover, .nav--main a:focus { background-color: var( --background-color-code ); color: var( --color-base--emphasized ); } .nav--main .is-on > a { background-color: var( --background-color-primary ); color: var( --color-primary ); /* border-left: 2px solid var( --color-primary ); */ border-radius: var( --border-radius-base ); font-weight: var( --font-weight-bold ); cursor: default; } .nav__sub-items { margin-top: 1.2rem; margin-bottom: 1em; /* FIXME: replace with rem and mt */ } .nav__sub-items > .nav__sub-item { margin-left: 3.6rem; } .nav--main .nav__sub-items ul { margin: 0; } .nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */ color: var( --wmui-color-base20 ); border-left: var( --border-width-base ) solid var( --wmui-color-base80 ); border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0; padding-left: 1.6rem; font-size: 1.4rem; transition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ); } .nav--main .nav__sub-item.is-on > a { background-color: var( --background-color-base ); color: var( --color-base--active ); border-left-color: var( --wmui-color-base0 ); font-weight: var( --font-weight-bold ); } .nav--main .nav__sub-item .nav__sub-item a { padding-left: 3.6rem; } /* ::: Content ::: */ .page__parent-title { color: var( --color-base--subtle ); margin-top: -2.8rem; } .page__title { margin-top: -0.8rem; } .page__parent-title + .page__title { margin-top: -0.4rem; } .page__tagline { margin-top: 1.2rem; font-size: 2rem; font-style: italic; font-weight: 100; } /* Remove, doesn't provide good styling .page__lead { font-size: 1.8rem; } */ .figures--full { background-color: var( --wmui-color-base90 ); } .figure__caption, .heading__description { color: var( --color-base--subtle ); clear: both; display: block; font-size: 1.3rem; } .figure__caption { padding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */ font-style: italic; } .figure__caption:empty { display: none; } .heading__description { float: right; margin-top: -1.9rem; } .heading__description + * { clear: both; } /* ... “Do” & “Don't” figures ... */ .figures-do-dont { margin-top: 1.6rem; } .figures-do-dont .figure { background-color: var( --wmui-color-base80 ); border-top-left-radius: var( --border-radius-base ); border-top-right-radius: var( --border-radius-base ); } .figures-do-dont .figure--dont { border-left: var( --border-width-base ) solid var( --color-base--inverted ); } .figures-do-dont .figure__caption { background-color: var( --color-base--inverted ); display: block; border-top-width: 0.8rem; border-top-style: solid; padding-right: 0.8em; } .figure--do .figure__caption, .do { border-top-color: var( --color-secondary ); } .figure--dont .figure__caption, .dont { border-top-color: var( --color-destructive ); } .do, .dont { font-style: normal; font-weight: var( --font-weight-bold ); } .do:before, .dont:before { display: inline-block; margin-right: 0.4rem; padding-top: 0.4rem; font-size: 2.1rem; line-height: 1rem; vertical-align: top; } .do { color: var( --color-success ); } .do:before { content: '✓'; } .dont { color: var( --color-destructive ); } .dont:before { content: '×'; } /* ... Color ... */ .color-palette { margin: 2.4rem 0 0; padding: 0; } .color-palette + .color-palette { margin-top: 0; } .color { color: var( --color-base--emphasized ); list-style: none none; display: block; float: left; position: relative; width: 61.8%; height: 16rem; margin-bottom: 3.2rem; padding: 1.2rem; border: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus ); border-radius: var( --border-radius-base ); font-size: 1.4rem; } .color--dark, .color__wcag-level span { color: var( --color-base--inverted ); } .color--dark .color__wcag-level span { color: var( --color-base--emphasized ); } .color-palette .color:first-child { margin-top: 0.4rem; } .color-palette--overview .color { width: 6.4rem; height: 6.2rem; margin-top: 0.8rem; margin-right: 1.2rem; margin-bottom: 2.4rem; border-radius: 3.2rem; cursor: default; } .color-palette--overview .color:first-child { margin-top: 0.8rem; } .color-palette--overview .color--emphasized { width: 7.2rem; height: 7rem; margin-top: 0; border-radius: 7.2rem; padding-top: 2rem; } .color-palette--base .color { margin-right: 1.35rem; } .color-section .color .color-code--hsb { transition: opacity var( --transition-ease-medium ); } .color-section .color:hover .color-code--hsb { opacity: 1; } .color__name { display: block; position: absolute; bottom: 1.2rem; left: 1.2rem; font-size: 3.2rem; font-weight: var( --font-weight-ultralight ); } .color-palette--overview .color__name { position: relative; bottom: auto; left: auto; padding-top: 1.2rem; font-size: 2.4rem; line-height: 1; } .color__type, .color-code.color-code--rgb, .color-palette--overview .color__name, .color-palette--overview .color-code { display: none; } .color-code { background-color: inherit; display: block; padding: 0; font-family: var( --font-family-system-sans ); } .color-code--hsb { opacity: 0; } @supports ( --css: variables ) { .color-hint { white-space: nowrap; } .color-hint:before { content: ''; background-color: var( --color-hint ); display: inline-block; width: 1.2rem; height: 1.2rem; margin: 0 0.4rem 0.3rem 0.2rem; border-radius: 50%; vertical-align: text-bottom; cursor: help; } .color-hint--base100:before { border: var( --border-base ); } } /* ... Icon ... */ .icon { display: inline-block; width: 2rem; height: 2rem; margin: 0 0.2rem; vertical-align: text-bottom; } .icon--indicator { width: 1.2rem; height: 1.2rem; margin-bottom: 0.2rem; } .icon--intermediate { width: 1.6rem; height: 1.6rem; margin-bottom: 0.2rem; } /* ... Components ... */ /* .page--components h2 { border-bottom: 0; padding-bottom: 0; } */ .components__designing { position: relative; } .components__designing:after { content: ''; background: url( ../../img/components/legend_16-8.svg ) no-repeat; position: absolute; bottom: 0; right: 6.4rem; width: 13.2rem; height: 6.4rem; } .page--components-messages .components__intro { max-width: 700px; margin-left: auto; margin-right: auto; } /* ... Resources ... */ .resources-table { display: table; width: 100%; margin-top: 2.4rem; border-collapse: collapse; } .resources-table__head, .resources-table__body { display: table-row; border-bottom: 1px solid #a2a9b1; } .resources-table__head { background-color: #eaecf0; } .resources-table__head h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; font-size: 2.1rem; font-weight: var( --font-weight-base ); } .resources-table__cell { display: table-cell; padding: 1.6rem 1.6rem 1.6rem 0; } .resources-table__head .resources-table__cell:first-child { padding-left: 1.6rem; } .lnk-resource { white-space: nowrap; } /* ::: Footer ::: */ .footer { color: var( --color-base ); padding: 2.4rem 0; font-size: 1.3rem; } .footer__list { padding: 0; } .footer__list:first-child { margin: 0; } .footer__list:after { content: ' '; display: block; clear: both; } .footer__list li { list-style: none none; display: block; padding: 0.8rem 0 0; } .footer__list li:first-child { padding-top: 0; } .footer__list + p { margin-top: 1.2rem; } .footer__list--connect a { font-weight: var( --font-weight-bold ); } .lnk--wikimedia-project { display: inline-block; padding: 0.4rem 0; text-transform: uppercase; } /* ::: Page-specific Styles ::: */ /* ... Homepage ... */ .page--home .page__title { border: 0; padding: 0; } /* ... “Design principles – Accessibility” ... */ .page--design-principles-accessibility .nav--main .is-on > a { cursor: pointer; } .page--design-principles-accessibility h3 { padding-right: 15%; } /* ... “Typography” ... */ .page--visual-style-typography .figures-do-dont .figure__contents { padding: 4.2rem 3.6rem; } .figures-do-dont--contrast .figure--dont { color: var( --wmui-color-base50 ); } /* ... Typography Styles ... */ .typography-styles dt { display: inline-block; color: var( --color-base--subtle ); min-width: 10rem; margin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */ font-size: 1.3rem; font-weight: var( --font-weight-bold ); vertical-align: top; } .typography-styles .typography-styles__code { margin-bottom: 0; } .typography-styles dd { display: inline; } .typography-styles dd > * { display: inline-block; margin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */ } .typography-styles .figure__caption { padding-top: 0; /* Remove `padding` from elements like figure caption */ } .typography-styles dd:after { content: '\A'; white-space: pre; } .typography-styles + hr { margin-top: 4rem; margin-bottom: 4rem; } /* ... “Icons” ... */ .page--visual-style-icons img { /* FIXME: generalize image styles */ background-color: var( --wmui-color-base80 ); /* FIXME: var; */ padding: 2.4rem; } /* ::: Dynamic content ::: */ .fonts-loaded cite, .fonts-loaded .site__title, .fonts-loaded .color-code { font-family: var( --font-family-system-sans ); } /* ::: Text Block-Level Elements ::: */ .fonts-loaded .page__title, .fonts-loaded blockquote, .fonts-loaded .typography-styles h1 { font-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */ } /* ::: Media Queries ::: */ /* ... Smartphone only ... */ @media ( max-width: 767px ) { .nav--main { position: absolute; top: -3.2rem; left: -1.6rem; right: -1.6rem; padding-bottom: 1.6rem; box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */ z-index: 1; transform: translateY( -200% ); transition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium ); } .trigger--nav-main:checked + .nav--main { transform: translateY( 0 ); } .page__title { margin-top: -0.4rem; font-size: 2.8rem; } .typography-styles dt { display: block; margin-left: 0; } /* ... Components ... */ .page--components .components__states { margin-left: 0; } /* ... Resources ... */ .resources-table, .resources-table__head, .resources-table__body, .resources-table__cell { display: block; } .resources-table__head { margin-left: -1.6rem; margin-right: -1.6rem; } .resources-table__head .resources-table__cell:empty { display: none; } .resources-table__body { padding-left: 0; } .resources-table__cell { padding-top: 0.8rem; padding-bottom: 0.8rem; } } /* ... Smartphone portrait ... */ @media ( min-width: 240px ) { .content-box, .site__title a, .nav--main a { transition-property: background-color, padding; transition-duration: var( --transition-ease-medium ); } .site__title { margin-left: 4.2rem; } .site__title a { padding-left: 0; } .lnk--contribute span { display: none; } .nav--main a { padding-left: 1.6rem; padding-right: 1.6rem; } .col--start, .col--end { width: 100%; } .figure--full, .resources-table__head { margin-left: -1.6rem; margin-right: -1.6rem; } .figure--full .figure__caption { margin-left: 1.6rem; margin-right: 1.6rem; } .figure--this-is-for-everyone img, .figure--trustworthy-yet-joyful img { width: 100%; max-width: 568px; margin-left: auto; margin-right: auto; } .figure--illustrations-header img { width: 100%; } .figure--illustrations-header + .figure--illustrations-header, .figure--illustrations-header + .figure--illustrations-header img { margin-top: 0; } .color { width: 61.8%; } .color-palette--base .color:nth-child( 3n+4 ) { clear: both; } .color-palette--base .color { margin-right: 1.6rem; } .color-palette--overview.color-palette--base .color--emphasized { margin-right: 1.1rem; margin-left: -0.2rem; } .page--components figure { margin-left: 4.2rem; } } /* ... Smartphone+ portrait ... */ @media ( min-width: 414px ) { .content-box { padding-left: 3.2rem; padding-right: 3.2rem; } .nav--main { left: -3.2rem; right: -3.2rem; } .nav--main a { padding-left: 3.2rem; padding-right: 3.2rem; } .figure--full, .resources-table__head { margin-left: -3.2rem; margin-right: -3.2rem; } .figure--full .figure__caption { margin-left: 3.2rem; margin-right: 3.2rem; } .resources-table__head .resources-table__cell:first-child { padding-left: 3.2rem; padding-right: 3.2rem; } .footer__list li { display: list-item; float: left; padding: 0 0.8rem 0 0; } .footer__list li:after { content: '\2022'; /* bullet dot: '•' */ color: var( --color-base--subtle ); padding: 0 0 0 0.8rem; font-weight: 100; } .footer__list li:last-child:after { content: ''; padding: 0; } .color { width: 16rem; margin-right: 2.4rem; } } /* ... Smartphone landscape ... */ @media ( min-width: 568px ) { .lnk--contribute { display: block; position: absolute; bottom: 1.5rem; /* Not on 8px base due to `line-height` setting */ right: 3.2rem; text-align: right; } .lnk--contribute span { display: inline; opacity: 0; transition: opacity var( --transition-ease-medium ); } .figures-do-dont .figure { max-width: 61.8%; } .figure--this-is-for-everyone img, .figure--trustworthy-yet-joyful img { max-width: none; } .figure--illustrations-header { float: left; width: 44.4%; } .figure--illustrations-header + .figure--illustrations-header { width: 55.55%; margin-top: 0.8rem; } .figure--illustrations-header + .figure--illustrations-header img { margin-top: 1.6rem; } } /* ... Tablet ... */ @media ( min-width: 768px ) { img { border-radius: 2px; } .content-box { width: 100%; max-width: 960px; } .btn--nav-main { display: none; } .site__title { float: left; margin-left: 0; } .site__title a, .nav--main a { padding-left: 1.6rem; padding-right: 1.6rem; } .lnk--contribute span { display: inline; opacity: 1; } .col--start { width: 20.8rem; z-index: 1; transition: width var( --transition-ease-medium ); } .col--end { margin-left: -20.8rem; padding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */ } .nav--main { left: auto; right: auto; } .figure--full, .figure--full .figure__caption { margin-left: 0; margin-right: 0; } .figures-do-dont .figure { float: left; width: 50%; } .color-palette--base .color:nth-child( 3n+4 ) { clear: unset; } /* ... “Illustrations” ... */ .illustrations-case-study img { float: left; width: 33.33%; } .page--components figure { margin-left: 6.4rem; } } /* ... Tablet+ / Netbook ... */ @media ( min-width: 992px ) { .content-box { width: 100%; max-width: var( --width-site-desktop-wide ); } .site__title a, .nav--main a { padding-left: 3.2rem; padding-right: 3.2rem; } .col--start { width: 24rem; } .col--end { margin-left: -24rem; padding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */ } .color-palette--overview:first-child { margin-top: 2.4rem; } .color { margin-right: 2.4rem; } .color-palette--base .color { margin-right: 1.35rem; } .color-palette--overview.color-palette--base .color--emphasized { margin-right: 1.35rem; margin-left: 0; } .color-palette--overview.color-palette--red:before, .color-palette--overview.color-palette--red:after, .color-palette--overview.color-palette--green:before, .color-palette--overview.color-palette--green:after { content: ''; display: none; } .color-palette--overview.color-palette--red:after, .color-palette--overview.color-palette--green:after, .color-section .color:nth-child( 3n+4 ) { clear: both; } /* ... Resources ... */ .resources-table__body .resources-table__cell { transition: background-color var( --transition-ease-medium ); } .resources-table__body:hover .resources-table__cell { background-color: #f8f9fa; } .resources-table__head .resources-table__cell:first-child, .resources-table__body .resources-table__cell:first-child { padding-left: 1.6rem; } } @media ( min-width: 1200px ) { .content-box { width: var( --width-site-desktop-wide ); } .col--start { width: 25.6rem; } .col--end { margin-left: -25.6rem; padding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */ } } diff --git a/img/components/links_states.svg b/img/components/links_states.svg index 8020d3b..101e37a 100644 --- a/img/components/links_states.svg +++ b/img/components/links_states.svg @@ -1,99 +1,104 @@ links_states - - Normal Hover Active Focus Visited - - - - - Neutral point of view - - + + + + + Neutral point of view + + + - - - - - Neutral point of view - - + + + + Neutral point of view + + + - - - - Neutral point of view - - - - + + + + Neutral point of view + + + + + + + Neutral point of view + + + + + Neutral point of view - - - - Neutral point of view + + Normal Hover Active Focus Visited diff --git a/js/wikimedia-design-style-guide.concat.js b/js/wikimedia-design-style-guide.concat.js index 9363d4d..98a4f4e 100644 --- a/js/wikimedia-design-style-guide.concat.js +++ b/js/wikimedia-design-style-guide.concat.js @@ -1,29 +1,29 @@ /* eslint-disable vars-on-top, one-var */ ( function () { if ( document.head && 'Promise' in window ) { var html = document.documentElement; if ( sessionStorage.getItem( 'fontsLoaded' ) ) { html.classList.add( 'fonts-loaded' ); } else { var script = document.createElement( 'script' ); // Use absolute path to address root files and /components/ directory ones. script.src = '/style-guide/js/vendor/fontfaceobserver/fontfaceobserver.standalone.js'; script.onload = function () { var serif = new FontFaceObserver( 'Charter' ); /* eslint-disable-line no-undef */ Promise.all( [ /* eslint-disable-line no-undef */ serif.load() ] ).then( function () { html.classList.add( 'fonts-loaded' ); sessionStorage.setItem( 'fontsLoaded', 1 ); } ); }; document.head.appendChild( script ); } } }() ); -//# sourceMappingURL=wikimedia-design-style-guide.concat.js.map.json +//# sourceMappingURL=wikimedia-design-style-guide.concat.js.map.json \ No newline at end of file diff --git a/resources/WikimediaUI-components_overview.png b/resources/WikimediaUI-components_overview.png index 2f7c670..4b29e1f 100644 Binary files a/resources/WikimediaUI-components_overview.png and b/resources/WikimediaUI-components_overview.png differ diff --git a/resources/WikimediaUI-components_overview.sketch b/resources/WikimediaUI-components_overview.sketch index 5d444a6..dcd8995 100644 Binary files a/resources/WikimediaUI-components_overview.sketch and b/resources/WikimediaUI-components_overview.sketch differ diff --git a/resources/WikimediaUI-components_overview.svg b/resources/WikimediaUI-components_overview.svg index 7e936e4..a906bfa 100644 --- a/resources/WikimediaUI-components_overview.svg +++ b/resources/WikimediaUI-components_overview.svg @@ -1,5523 +1,5548 @@ WikimediaUI-components_overview - - + + - - + - + - - - - - - - - + + + + + + - - - - - - - + + + + - - + + - - - + + - - + + - - - + + + - - + + - - + + - - + + - - + + - - - - - + + + + + + + + + + + - + - + - + - + - - - - + + + - - - - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - + - - - - - - - - - + + + - - - - - - - - - - + - - - - + + + + + - + - - - - + + + + + - + - + - + - + + + + + + + + + + + + + - - - - + + + + + - + - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - + - + - - - - - - - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - - - + + + + - + + + + + + + + + + - + - - - - - - - - - - - - - + - - - - - - - + - + - + - - - - - - - + - + - + - - - - - - - + - - - - - - - - - + + + + + + + + + + + - + - - - - - - - + - - - - - - - - - - - - + - + - + - - - - - - - + - + - + - - - - - - - + - - - + + + + + + - - - - - - - - - - + + + - + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + #6b4ba1 Visited link color #ff4242 #447ff5 Hover color on primary (progressive) buttons Hover color on primary (destructive) buttons #404244 `lighten( #202122, 13% )` #6c7378 `lighten( #54595d, 10% )` Emphasized copy color Active button/widgets text MODIFIER COLORS #ac6600 RGB 172, 102, 0 HSB 36, 100%, 67% AA #fc3 RGB 255, 204, 51 HSB 45, 80%, 100% AAA #fef6e7 RGB 254, 246, 231 HSB 39, 9%, 100% AAA Yellow50 Yellow30 Green50 Green30 #00af89 RGB 0, 175, 137 HSB 167,100%,69% AA #d5fdf4 RGB 213, 253, 244 HSB 167, 16%, 99% AAA Yellow90 Green90 #14866d RGB 20, 134, 109 HSB 167, 85%, 53% AA Secondary link highlight Positive messages Warning messages COLOR PALETTE BASE COLORS ACCENT COLORS Primary buttons Links Page accents Focus outlines Active buttons Active links Accent30 Progressive #36c RGB 51, 102, 204 HSB 220, 75%, 80% AA #eaf3ff RGB 234, 243, 255 HSB 214, 8%, 100% AAA Base100 #fee7e6 RGB 255, 231, 230 HSB 2, 10%, 100% AAA Destructive #d33 RGB 221, 51, 51 HSB 360, 77%, 87% AA AA #b32424 RGB 135, 54, 54 HSB 360, 60%, 53% AAA #2a4b8d RGB 42, 75, 141 HSB 220, 70%, 55% AAA Destructive actions – Buttons and Links Alerts Destructive active buttons and links Hovered buttons Active menu items backgrounds Base background Highlight from grey Disabled text input background #fff RGB 255, 255, 255 HSB 0, 0%, 100% AAA Accent90 Accent50 Red90 Red50 Red30 Base90 Base80 Base70 Base50 Base30 Base20 Base10 Base0 Button/3D widget background #f8f9fa RGB 248, 249, 250 HSB 210, 1%, 98% AAA #eaecf0 RGB 234, 236, 240 HSB 220, 3%, 94% AAA #c8ccd1 RGB 200, 204, 209 HSB 213, 4%, 82% AAA #a2a9b1 RGB 162, 169, 177 HSB 212, 8%, 69% AAA #72777d RGB 114, 119, 125 HSB 210, 9%, 49% AA AA #54595d RGB 84, 89, 93 HSB 207, 10%, 36% AAA #202122 RGB 32, 33, 34 HSB 210, 6%, 13% AAA #000 RGB 0, 0, 0 HSB 0, 0%, 0% AAA Disabled button/3D widget background Highlighted border Disabled elements text Placeholder text Active border Copy color Buttons/widgets text Descriptive text on Base90 background Hover color on normal buttons Emphasized secondary text at level AAA need WCAG 2.0 conformance level: (with white/black) SUPPLEMENTARY COLORS BACKGROUND COLORS Layer 1: #f8f9fa Layer 2: #fff Layer 3: #eaecf0 Layer 4: #c8ccd1 Re-enter password Multiline inline message without rich text. Only sentences, which bring clarity on what's happening to the user. Multiline block message with rich text like links to Nas , who • will rule the World and • free all his sons 24 scale-independent pixels (1.5 em) 20 sp (1.25 em) 16 sp (1 em) 12 sp (0.75 em) 8 sp (0.5 em) `font-size: 1em` `font-size: 1em` `font-weight: bold` A neutral message which informs about general higher priority notices to the user. Stay neutral! A neutral message which informs about general higher priority notices to the user. Stay neutral! A success message which means the user did everything right and should know about it. Yay! A success message which means the user did everything right and should know about it. Yay! A warning which is not stopping whatever the user just did, but needs to clear up why things might not work as expected. A warning which is not stopping whatever the user just did, but needs to clear up why things might not work as expected. An error which means it's potentially stopping whatever the user just did and will give them a clear message what is wrong. Re-enter password An error which means it's potentially stopping whatever the user just did and providing them a clear message on what's wrong. There's also an explanatory link . Sizes Notice Success Warning Error MESSAGES Select a file Option 1 Re-enter password Password on general purpose - - + + Vannevar Bush Username CheckboxMultiSelect label Option with a really long label Radio button with really long label Neutral point Neutral point Call to action The document containing a hyperlink is known as its source document. For example, in an online reference work such as Wikipedia, many words and terms in the text are hyperlinked to definitions of those terms. Hyperlinks are often used to implement reference mechanisms, such as tables of contents, footnotes, bibliographies, indexes, letters, and glossaries. `margin-bottom: 1.25em` between widgets with labels `margin-bottom: 1.5em` between widgets without labels EXAMPLE FORM 2 WAYS OF CHOOSING DATE 1. Starting the process from scratch. Choosing YYYY, MM, DD Step 1: Choosing year Step 2: Choosing month Step 3: Choosing day Clicking on year in the field to change year Clicking on month in the field to change month Clicking on day in the field to change day 2. Clicking on YYYY, MM, or DD to alter a specific part of the date. S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 Tue 14 Nov 2013 January 01 February 02 March 03 April 04 May 05 June 06 January 01 February 02 March 03 April 04 May 05 June 06 July 07 August 08 September 09 October 10 November 11 December 12 July 07 August 08 September 09 October 10 November 11 December 12 YYYY-MM-DD Tue 14 Nov 2013 November 2013 2013 2013 S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 YYYY-MM-DD November 2013 1986 1987 1988 1989 1990 1991 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2010 2011 2012 2013 2014 2015 YYYY-MM-DD Tue 14 Nov 2013 DATE PICKER Normal Disabled Text field Interaction Calendar Expanded Calendar interaction Tue Nov 5, 2013 Tue Nov 5, 2013 Tue Nov 5, 2013 Tue Nov 5, 2013 Tue Nov 5, 2013 5 5 5 Tue Nov 5, 2013 Tue Nov 5, 2013 • Clicking on back button takes users to the “Year” selection view. • Scrolling up / clicking “up” button reveal the previous month. • Scrolling down / clicking “down” button reveals the following month. • When user starts typing a number, it changes the numbers within highlighted area • Clicking on back button takes users to the “Year” selection view. • Scrolling up / clicking “up” button reveal the previous set of years. • Scrolling down / clicking “down” button reveal the following set of years. • When user starts typing a number, it changes the numbers within highlighted area Once user selects a new month / day / year, the area highlighted will grow in size and back in place as if making one pulse. The highlight with more contrast and flash When we decide to have users start from scratch in selecting a day in a year, start from the “Year” selection view, followed by “Month” and then “Day.” 48 sp (3 em) height “Currently selected” style 5 Current day Hover state style Placeholder icon for navigate to today’s day When menu is expanded, clicking on the month / day / year, takes user to the month / day / year selection view. The month / day / year will be highlighted. User will be able to type an input like a text field or choose from the selection below. CHANGING “MONTH” GOING BACK TO CHANGE “MONTH” AFTER A SELECTION STARTING FROM SCRATCH GOING BACK TO CHANGE “YEAR” CHANGING “DAY” CHANGING “YEAR” January 01 February 02 March 03 April 04 May 05 June 06 July 07 August 08 September 09 October 10 November 11 December 12 Tue Nov 5, 2013 2013 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 Tue Nov 5, 2015 Select a date Hover Active Focus Hover Active Focus Calendar Expanded User will be able to press ↑ to enter previous year, ↓ to enter year after User will also be able to type the year manually. ↑ to enter previous month if cursor is over “Nov”, ↓ to enter day after if cursor is over “5” User will also be able to type the month and day manually. Placeholder icon for calendar January 01 February 02 March 03 April 04 May 05 June 06 July 07 August 08 September 09 October 10 November 11 December 12 Tue Nov 14, 2013 2013 S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 Tue Nov 14, 2013 November 2013 S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 Tue Nov 5, 2013 November 2013 S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 Tue Nov 5, 2013 November 2013 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 Tue Nov 14, 2013 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 Tue Nov 5, 2013 Button Primary… Button Primary… Button Primary… Button Primary… Option 1 Option 2 Option 3 Option “Currently selected” style Option 1 Normal Legend Hover Active Focus 8 sp (0.5 em) 42 sp height TOOLBAR Island country of Japan Japan is an island country in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian continent and stretches from the Sea of Okhotsk in the north to the East China Sea and the Philippine Sea in the south. The kanji that make up Japan's name mean "sun origin", and it is often called the "Land of the Rising Sun". Japan is a stratovolcanic archipelago consisting of about 6,852 islands. The four largest are Honshu, Hokkaido, Kyushu, and Shikoku, which make up about ninety-seven percent of Japan's land area and often are referred to as home islands. The country is divided into 47 prefectures in eight regions, with Hokkaido being the northernmost prefecture and Okinawa being the southernmost one. The population of 127 million is the world's tenth largest. Japanese make up 98.5% of Japan's total population. About 13.8 million people live in Tokyo, the capital of Japan. The Greater Tokyo Area is the most populous metropolitan area in the world with over 38 million people. Find a number of Popup variants and language specific alterations at https://doc.wikimedia.org/Popups/master/js/ui/ POPUP Normal Hover Active Focus Expanded Menu Disabled Placeholder User input Placeholder Placeholder Placeholder Label Placeholder Option 1 Option 2 COMBOBOX INPUT FIELD BUTTON + DROPDOWN Normal Hover Active Expanded Menu Disabled Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Original file 601 x 601 px jpg Small 601 x 601 px jpg Download original file 601 x 601 px jpg Original file 601 x 601 px jpg Download original file 601 x 601 px jpg Small 601 x 601 px jpg Original file 601 x 601 px jpg Small 601 x 601 px jpg Download original file 601 x 601 px jpg Normal Hover Active Expanded Menu Focus Disabled Option 1 Option 2 Option 3 20 sp x 20 sp icon vertical-align: middle ICON DROPDOWN Normal Hover Active Expanded Menu Focus Disabled - - + + Neutral Neutral Neutral Neutral Neutral Neutral Neutral Neutral 2 - - + + Neutral Neutral Neutral 2 - - + + Neutral Neutral Neutral 2 LINK DROPDOWN Item 1 selected Item 2 Item 1 Select an item Select an item Item 1 selected Item 2 Item 1 Select an item Select an item Label Normal Hover Active & Focus Expanded Menu & Focus Disabled DROPDOWN Select a file Select a file Label Select a file Normal Disabled FILE INPUT FIELD 100 - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + + + 100 - - + + - - + + - - + + - - + + Normal Disabled NUMBER INPUT FIELD Disabled textarea - - + + Normal Disabled TEXTAREA Normal Hover Focus & Active Password ****** - + Password PASSWORD INPUT FIELD Normal Hover Focus & Active Disabled Search - - + + - - + + Entering search terms - - + + - - + + - + Search - - + + - - + + Search - - + + - - + + SEARCH INPUT FIELD Placeholder text - + Placeholder - - + + - - + + - - + + - - + + Label Your input Providing input - - + + Your input - - + + Normal Hover Active & Focus Disabled TEXT INPUT FIELDS Option with a really long label today Second option Option 1 Option 2 Normal Hover Active Focus Disabled Minimum 16 sp (1 em) margin - + - + - + - + Option 1 Label for binary selection `vertical-align: middle` one-liner text - + - + - + - - + + - + - + - - + + Selected TOGGLE SWITCH Option 2 Option 1 Radio group label Option with a really long label today Option title Neutral point Neutral point Neutral point Normal Hover Active Focus Disabled Selected Neutral point Neutral point Radio label touch area features `width: 2em;` `height: 2em;` - + Neutral point Neutral point Neutral point Neutral point Neutral point Option with a really long label today Option title `vertical-align: middle` - + - + - - + + - + - + - - + + RADIO BUTTON Indeterminate – some children selected - - + + - - + + Unselected Selected Neutral point INTEDERMINATE Normal Hover Active Focus Disabled Selected Option 2 Option 1 Neutral point Neutral point Neutral point Neutral point Neutral point Neutral point - + Neutral point Neutral point Neutral point Neutral point Checkbox label - + Option with a really long label today Option title `vertical-align: middle` touch area features `width: 2em;` `height: 2em;` - + - + - - + + - + - + - - + + Option with a really long label today Option 2 CHECKBOX Normal Highlighted Highlighted positive Neutral point Neutral point Neutral point TEXT HIGHLIGHT - - - Normal Hover Active Focus Visited - - - Normal Hover Active Focus Visited + + + UNDERLINED LINK - - - UNDERLINED LINK - - - - + + - - - + + + + + Neutral point of view - + + + + + + Neutral point of view + + + - - - - + + + + Neutral point of view + + + + + + Neutral point of view - + - - - - Neutral point of view - - - - - + + Neutral point of view + - - - - Neutral point of view - - - - - Neutral point of view + + Normal Hover Active Focus Visited - - - - - - Neutral point of view + + + UNDERLINED LINK - + + + - - - + + + + + Neutral point of view + + + + + + + + Neutral point of view + + + + + + + + Neutral point of view + + + + + + + Neutral point of view + + + + + + Neutral point of view - - - - - Neutral point of view - - - - - - Neutral point of view + + Normal Hover Active Focus Visited - - + - + - + - + LINK Other Pages More Talk More Pages Other Talk More Pages Other More More Pages Pages Other Other Talk Talk Talk More Pages Other Talk - + - + - - + + Disabled Focus Selected Active Hover Normal BUTTON GROUP Normal Hover Active Focus Disabled 20 sp x 20 sp icon `vertical align: middle` 44 sp minimum width touch target, 32 sp height ICON Button ICON + TEXT Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Neutral Neutral Neutral Neutral Neutral - + - + - - + + Normal Hover Active Focus Disabled BUTTONS QUIET - - + + - - + + Toggle Toggle - - + + - - + + Normal Selected TOGGLE BUTTONS ICON + TEXT Normal Hover Active Focus Disabled Primary Button Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Button Button Normal Normal Normal Normal Normal - + - + - - + + BUTTONS NORMAL + PRIMARY SPECIFICATIONS SPECIFICATIONS LEGEND Text Icon Button frame 16 sp / 1 em 12 sp / 1.25 em 8 sp / 0.5 em 4 sp / 0.25 em 24 sp / 1.5 em 32 scale-independent pixels / 2 em All single buttons, icons, text field have a min. of 44 scale- independent pixels (sp) width. All single buttons have a max. of 280 sp width. If >280 sp text wraps to the next line. Checkbox group label Option 2