styles.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881
  1. /* fonts */
  2. @font-face {
  3. font-family: 'Miriam Libre';
  4. src: url('fonts/miriamlibre-bold.woff2') format('woff2'), url('fonts/miriamlibre-bold.woff') format('woff');
  5. font-weight: bold;
  6. font-style: normal;
  7. }
  8. *,
  9. *::before,
  10. *::after {
  11. font-family: inherit;
  12. color: inherit;
  13. margin: 0;
  14. padding: 0;
  15. box-sizing: border-box;
  16. }
  17. html {
  18. font-size: calc(1em + 0.33vw);
  19. font-family: PT Sans, sans-serif;
  20. line-height: 1.5;
  21. color: #111;
  22. }
  23. * + * {
  24. margin-top: 2.25rem;
  25. }
  26. br,
  27. dt,
  28. dd,
  29. th,
  30. td,
  31. option,
  32. [hidden] + *,
  33. li + li,
  34. body,
  35. .main-and-footer {
  36. margin-top: 0;
  37. }
  38. p + p {
  39. margin-top: 0.75rem;
  40. }
  41. a {
  42. text-decoration: none;
  43. border-bottom: 1px solid;
  44. }
  45. abbr {
  46. text-decoration: none;
  47. cursor: help;
  48. border-bottom: 1px dashed;
  49. }
  50. img {
  51. max-width: 100%;
  52. }
  53. p img {
  54. margin: 0.75rem 0;
  55. }
  56. figure p img {
  57. margin: 0;
  58. }
  59. :focus:not([tabindex="-1"]),
  60. [data-expands]:focus svg,
  61. .patterns a:focus .text {
  62. outline: 3px solid #ccc;
  63. outline-offset: 2px;
  64. }
  65. /* fix for IE :( */
  66. [tabindex="-1"]:focus,
  67. div:not([tabindex]):focus {
  68. outline: none;
  69. }
  70. /* skip link */
  71. [href="#main"] {
  72. display: block;
  73. width: 100%;
  74. padding: 0.75rem;
  75. color: #fff;
  76. background: #000;
  77. position: absolute;
  78. top: -3rem;
  79. text-align: center;
  80. z-index: 1;
  81. }
  82. [href="#main"]:focus {
  83. top: 0;
  84. outline: none;
  85. }
  86. /* text styles */
  87. h1,
  88. h2,
  89. h3,
  90. h4 {
  91. font-family: Miriam Libre, serif;
  92. line-height: 1.125;
  93. }
  94. h1 {
  95. font-size: 2rem;
  96. }
  97. h2 {
  98. font-size: 1.66rem;
  99. }
  100. h3 {
  101. font-size: 1.25rem;
  102. }
  103. h4,
  104. h5 {
  105. font-size: 1rem;
  106. font-family: PT Sans, sans-serif;
  107. }
  108. h5 {
  109. font-size: 0.85rem;
  110. text-transform: uppercase;
  111. }
  112. kbd {
  113. line-height: 1;
  114. font-size: 0.66rem;
  115. padding: 0.1rem 0.33rem;
  116. border-radius: 0.25rem;
  117. border: 2px solid;
  118. box-shadow: 0.125rem 0.125rem 0 #111;
  119. vertical-align: 0.33em;
  120. }
  121. pre,
  122. .file-tree {
  123. overflow-x: auto;
  124. padding: 1.5rem;
  125. border: 1px solid;
  126. }
  127. code {
  128. font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  129. font-size: 0.85em;
  130. }
  131. .cmd {
  132. padding: 0.75rem;
  133. background: #111;
  134. }
  135. .cmd code {
  136. color: #fff;
  137. white-space: nowrap;
  138. }
  139. .cmd code::before {
  140. content: '$';
  141. font-weight: bold;
  142. padding-right: 0.25em;
  143. }
  144. /* Lists */
  145. main ul,
  146. main ol {
  147. margin-left: 2.25rem;
  148. }
  149. main li + li {
  150. margin-top: 0.5rem;
  151. }
  152. main ul ul {
  153. margin-top: 0;
  154. }
  155. /* Buttons */
  156. button {
  157. font-size: 1.25rem;
  158. font-family: inherit;
  159. font-weight: inherit;
  160. background: #111;
  161. color: #fff;
  162. padding: 0.75rem;
  163. border: 0;
  164. }
  165. [data-launch] {
  166. font-size: 0.75rem;
  167. display: block;
  168. margin-top: 0;
  169. padding: 0.5rem;
  170. width: 100%;
  171. }
  172. /* Tables */
  173. table {
  174. text-align: left;
  175. table-layout: fixed;
  176. width: 100%;
  177. border-collapse: collapse;
  178. }
  179. th,
  180. td {
  181. border: 2px solid;
  182. padding: 0.5rem;
  183. line-height: 1.25;
  184. margin: 0;
  185. }
  186. th {
  187. font-weight: bold;
  188. }
  189. th:empty {
  190. border: 0;
  191. }
  192. /* Tested using... table */
  193. .tested {
  194. text-align: center;
  195. }
  196. .tested td {
  197. vertical-align: top;
  198. overflow: hidden;
  199. }
  200. .tested th {
  201. background-color: #111;
  202. border-color: #111;
  203. color: #fff;
  204. }
  205. .tested img {
  206. max-width: 3rem;
  207. }
  208. .tested span {
  209. display: block;
  210. margin: 0;
  211. }
  212. .tested .additional {
  213. font-size: 0.85rem;
  214. }
  215. caption {
  216. font-size: 1.125rem;
  217. padding-bottom: 0.25rem;
  218. font-style: italic;
  219. }
  220. /* Page structure */
  221. .wrapper {
  222. position: relative;
  223. margin-top: 0;
  224. overflow-x: hidden;
  225. }
  226. .intro-and-nav {
  227. font-size: 0.85rem;
  228. width: 15rem;
  229. height: 100vh;
  230. position: fixed;
  231. top: 0;
  232. left: 0;
  233. border-right: 2px solid;
  234. }
  235. .intro-and-nav > div {
  236. padding: 2.25rem;
  237. display: flex;
  238. flex-direction: column;
  239. height: 100%;
  240. }
  241. .logo {
  242. border: 0;
  243. }
  244. .logo img {
  245. width: 100%;
  246. max-width: 12rem;
  247. }
  248. .library-desc {
  249. font-style: italic;
  250. margin-top: 0.5rem;
  251. margin-left: auto;
  252. margin-right: auto;
  253. max-width: 30rem;
  254. }
  255. .main-and-footer {
  256. margin-left: 15rem;
  257. }
  258. .main-and-footer > div {
  259. max-width: 40rem;
  260. margin: 0 auto;
  261. padding: 2.25rem;
  262. }
  263. [role="contentinfo"] {
  264. font-size: 0.85rem;
  265. margin-top: 4rem;
  266. text-align: center;
  267. }
  268. /* Patterns navigation */
  269. .patterns {
  270. overflow: auto;
  271. margin-top: 1.5rem;
  272. }
  273. .patterns * {
  274. margin-top: 0;
  275. }
  276. .patterns h3 {
  277. font-size: 1rem;
  278. }
  279. .patterns h3 + ul {
  280. margin-top: 0.75rem;
  281. }
  282. .patterns li {
  283. line-height: 1.125;
  284. list-style: none;
  285. }
  286. .patterns li + li {
  287. margin-top: 0.75rem;
  288. }
  289. .patterns ul ul {
  290. margin-left: 0.75rem;
  291. }
  292. .pattern a {
  293. border: 0;
  294. display: flex;
  295. flex-wrap: nowrap;
  296. align-items: baseline;
  297. font-weight: bold;
  298. }
  299. .pattern a:focus {
  300. outline: none;
  301. }
  302. .pattern span {
  303. margin-left: 0.125rem;
  304. }
  305. .pattern [aria-current] {
  306. background-color: #111;
  307. background-image: url(images/arrow_effect.svg);
  308. background-position: right center;
  309. background-size: 125%;
  310. background-repeat: no-repeat;
  311. color: #fff;
  312. padding: 0.5em 1em 0.5em;
  313. }
  314. /* menu button */
  315. #menu-button {
  316. display: none;
  317. width: 100%;
  318. text-align: center;
  319. }
  320. #menu-button:focus {
  321. outline: none;
  322. box-shadow: inset 0 0 0 0.25rem #ccc;
  323. }
  324. /* Tables of contents */
  325. .toc {
  326. font-size: 0.85rem;
  327. border: 1px solid;
  328. padding: 1.5rem;
  329. }
  330. .toc h2 {
  331. font-size: 1rem;
  332. }
  333. .toc ol {
  334. margin-left: 0.75rem;
  335. margin-top: 0.5rem;
  336. }
  337. /* Pattern lists */
  338. .patterns-list {
  339. list-style: none;
  340. margin-left: 0;
  341. }
  342. .patterns-list h2 {
  343. font-size: 1.25rem;
  344. }
  345. .patterns-list li + li {
  346. margin-top: 1rem;
  347. padding-top: 1rem;
  348. border-top: 2px solid;
  349. }
  350. .patterns-list a {
  351. border: 0;
  352. }
  353. /* Tags */
  354. .tags {
  355. margin-top: 0;
  356. font-size: 0.85rem;
  357. }
  358. .tags * {
  359. display: inline;
  360. margin: 0;
  361. }
  362. .tags strong {
  363. margin-right: 0.25rem;
  364. }
  365. .tags li {
  366. white-space: nowrap;
  367. margin: 0 0.25rem 0 0;
  368. }
  369. /* Notes and warnings */
  370. .note {
  371. border-left: 0.5rem solid;
  372. font-size: 0.85rem;
  373. }
  374. .note svg {
  375. height: 2.25rem;
  376. width: auto;
  377. }
  378. .note > div {
  379. margin-left: 0.75rem;
  380. }
  381. .note > div > img:first-child {
  382. height: 1.5rem;
  383. }
  384. .note > div >:first-child + * {
  385. margin-top: 0;
  386. }
  387. .note.warning {
  388. border-left: 0;
  389. background-image: url(images/stripe.svg);
  390. background-size: 0.5rem auto;
  391. background-repeat: repeat-y;
  392. }
  393. .note.warning > div {
  394. margin-left: 1.25rem;
  395. }
  396. /* Tick lists */
  397. .ticks li {
  398. list-style: none;
  399. position: relative;
  400. }
  401. .ticks li::before {
  402. content: '';
  403. display: inline-block;
  404. width: 1rem;
  405. height: 1rem;
  406. margin-right: 0.25rem;
  407. background-image: url(images/icon-tick.svg);
  408. background-size: 100% auto;
  409. position: absolute;
  410. left: -1.25rem;
  411. top: 0.25rem;
  412. }
  413. /* Figures */
  414. figure {
  415. text-align: center;
  416. }
  417. figcaption {
  418. font-size: 0.85rem;
  419. font-style: italic;
  420. margin-top: 0.5rem;
  421. }
  422. main {
  423. display: block;
  424. counter-reset: fig;
  425. min-height: 100vh;
  426. }
  427. figcaption::before {
  428. counter-increment: fig;
  429. content: 'Figure ' counter(fig) ':\0020';
  430. font-weight: bold;
  431. }
  432. /* Code blocks */
  433. pre[class*=language-] {
  434. background: none;
  435. margin-top: 2.25rem;
  436. margin-bottom: 0;
  437. overflow-y: hidden;
  438. overflow-x: auto;
  439. }
  440. code[class*="language-"], pre[class*="language-"] {
  441. text-shadow: none;
  442. }
  443. pre[class*=language-][data-line] {
  444. padding: 1em 0 0 2.25rem;
  445. }
  446. pre[class*=language-] code * {
  447. margin-top: 0 !important;
  448. }
  449. [data-codeblock-shortcode] {
  450. display: block;
  451. margin-top: -1rem;
  452. }
  453. .token.property,
  454. .token.tag,
  455. .token.boolean,
  456. .token.number,
  457. .token.constant,
  458. .token.symbol,
  459. .token.deleted {
  460. color: #888;
  461. }
  462. .token.selector,
  463. .token.attr-name,
  464. .token.string,
  465. .token.char,
  466. .token.builtin,
  467. .token.inserted {
  468. color: #111;
  469. }
  470. .token.operator,
  471. .token.entity,
  472. .token.url,
  473. .language-css .token.string,
  474. .style .token.string {
  475. color: #333;
  476. background: none;
  477. }
  478. .token.atrule,
  479. .token.attr-value,
  480. .token.keyword {
  481. color: #666;
  482. }
  483. .token.function {
  484. color: #888;
  485. }
  486. .line-numbers code {
  487. padding-left: 3rem;
  488. margin-top: -1rem;
  489. overflow-x: auto;
  490. overflow-y: hidden;
  491. }
  492. .line-numbers {
  493. padding: 1.5rem !important;
  494. }
  495. .line-numbers .line-numbers-rows {
  496. margin-left: 2.25rem;
  497. left: -3.5em;
  498. top: 1.25rem;
  499. color: #111;
  500. border-color: #111;
  501. }
  502. .line-numbers-rows > span:before {
  503. color: inherit;
  504. }
  505. /* file tree lists */
  506. .file-tree {
  507. overflow-x: auto;
  508. }
  509. .file-tree ul {
  510. font-family: Courier, monospace;
  511. margin: 0;
  512. padding: 0;
  513. padding-left: 3rem;
  514. list-style: none;
  515. line-height: 1.25;
  516. position: relative;
  517. }
  518. .file-tree > ul {
  519. padding-left: 0;
  520. overflow-x: auto;
  521. overflow-y: hidden;
  522. }
  523. .file-tree li {
  524. background: #fff;
  525. position: relative;
  526. white-space: nowrap;
  527. }
  528. .file-tree li + li {
  529. margin-top: 0;
  530. }
  531. .file-tree li:not(:last-child) > ul::before {
  532. content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020';
  533. position: absolute;
  534. left: 0;
  535. top: 0;
  536. bottom: 0;
  537. width: 1em;
  538. white-space: normal;
  539. }
  540. .file-tree li::before {
  541. content: '\251C\2500\2500\0020';
  542. }
  543. .file-tree li:last-child::before {
  544. content: '\2514\2500\2500\0020';
  545. }
  546. /* Expandable sections */
  547. .expandable-section {
  548. border-top: 1px solid;
  549. border-bottom: 1px solid;
  550. padding: 0.75rem 0;
  551. }
  552. [id^="js-expandable-"] {
  553. margin: 0;
  554. padding: 1.5rem 0 0.75rem;
  555. }
  556. @media screen {
  557. .expandable-section + .expandable-section {
  558. margin-top: 0;
  559. border-top: 0;
  560. }
  561. }
  562. [data-expands] {
  563. text-align: left;
  564. color: #111;
  565. border: 0;
  566. background: none;
  567. width: 100%;
  568. padding: 0;
  569. margin: 0;
  570. display: flex;
  571. align-items: center;
  572. justify-content: space-between;
  573. cursor: pointer;
  574. }
  575. [data-expands] svg {
  576. margin-top: 0;
  577. width: 1em;
  578. height: 1em;
  579. }
  580. [data-expands][aria-expanded="true"] svg .up-strut {
  581. display: none;
  582. }
  583. [data-expands]:focus {
  584. outline: none;
  585. }
  586. p:empty {
  587. display: none;
  588. }
  589. *:not(p) + p:empty + p {
  590. margin-top: 2.25rem;
  591. }
  592. /* WCAG and principles */
  593. .wcag ul li {
  594. font-size: 0.85em;
  595. }
  596. .principles p {
  597. font-size: 0.85rem;
  598. margin-top: 0.75rem;
  599. }
  600. .principles.with-desc > li + li,
  601. .wcag.with-desc > li + li {
  602. border-top: 1px solid;
  603. margin-top: 0.75rem;
  604. padding-top: 0.75rem;
  605. }
  606. /* Site errors */
  607. .site-error {
  608. padding: 1.5rem;
  609. background: #efefef;
  610. }
  611. .site-error strong {
  612. color: #C83737;
  613. }
  614. /* SVG icons */
  615. a svg,
  616. button svg,
  617. h1 svg {
  618. height: 0.75em;
  619. width: auto;
  620. margin-right: 0.25em;
  621. }
  622. h1 svg,
  623. li > svg,
  624. h2 a svg {
  625. height: 1em;
  626. vertical-align: middle;
  627. }
  628. h1 svg {
  629. margin-right: 0;
  630. }
  631. .print {
  632. white-space: nowrap;
  633. }
  634. .svg-outer {
  635. width: 0.75em;
  636. display: inline-block;
  637. vertical-align: middle;
  638. }
  639. /* Color palettes */
  640. .colors {
  641. display: flex;
  642. height: 5rem;
  643. margin: -0.25rem;
  644. list-style: none;
  645. flex-wrap: nowrap;
  646. }
  647. .colors li {
  648. margin: 0.25rem;
  649. flex: 1 0 auto;
  650. position: relative;
  651. }
  652. .colors span {
  653. line-height: 1;
  654. background-color: #111;
  655. color: #fff;
  656. font-size: 0.75rem;
  657. padding: 0.25rem;
  658. position: absolute;
  659. bottom: 0.25rem;
  660. right: 0.25rem;
  661. }
  662. /* cross references */
  663. .pattern-link {
  664. font-weight: bold;
  665. }
  666. /* inline demos */
  667. [id^="js-demo-"] {
  668. all: initial;
  669. display: block;
  670. }
  671. /* Section links */
  672. .h2-container {
  673. position: relative;
  674. font-size: 1.66rem;
  675. }
  676. .h2-container a {
  677. position: absolute;
  678. margin-top: 0;
  679. top: 0;
  680. line-height: 1;
  681. left: -1em;
  682. border: 0;
  683. }
  684. /* Single page layout */
  685. .wrapper.print-version .main-and-footer {
  686. margin-left: 0;
  687. }
  688. .wrapper.print-version .intro-and-nav {
  689. position: static;
  690. border: 0;
  691. width: auto;
  692. text-align: center;
  693. display: flex;
  694. align-items: center;
  695. justify-content: center;
  696. }
  697. .wrapper.print-version main {
  698. min-height: 0;
  699. }
  700. .wrapper.print-version .library-desc {
  701. font-size: 1rem;
  702. }
  703. .wrapper.print-version .intro-and-nav > div {
  704. height: auto;
  705. }
  706. .wrapper.print-version #patterns-list {
  707. margin-left: 0;
  708. margin-top: 1.5rem;
  709. display: block;
  710. }
  711. .wrapper.print-version .toc {
  712. font-size: 1rem;
  713. }
  714. .wrapper.print-version .toc h2 {
  715. font-size: 1.66rem;
  716. }
  717. .wrapper.print-version #patterns-list h3 {
  718. font-size: 1.25rem;
  719. }
  720. .wrapper.print-version .patterns {
  721. margin-top: 0;
  722. }
  723. .pattern-section:not(:last-child) {
  724. padding-bottom: 2.25rem;
  725. border-bottom: 2px solid;
  726. }
  727. .pattern-section h1 {
  728. padding: 0 !important;
  729. }
  730. @media screen and (max-width: 45em) {
  731. [role="banner"] {
  732. position: static;
  733. width: auto;
  734. height: auto;
  735. }
  736. .intro {
  737. text-align: center;
  738. }
  739. .intro-and-nav > div {
  740. padding: 1.5rem;
  741. }
  742. .main-and-footer {
  743. margin: 0;
  744. }
  745. .patterns h3 {
  746. font-size: 1.125rem;
  747. border-top: 4px solid;
  748. border-bottom: 4px solid;
  749. padding: 0.75rem 0;
  750. }
  751. .patterns li:not(.pattern) {
  752. margin-top: 0;
  753. }
  754. .patterns ul ul {
  755. margin: 0;
  756. }
  757. .patterns li {
  758. margin-top: 0;
  759. }
  760. .pattern {
  761. font-size: 1rem;
  762. }
  763. .pattern a {
  764. padding: 0.75rem 0;
  765. }
  766. .pattern [aria-current] {
  767. background-image: none;
  768. }
  769. .pattern + .pattern {
  770. border-top: 1px solid;
  771. margin-top: 0;
  772. }
  773. #menu-button {
  774. display: block;
  775. }
  776. #patterns-list {
  777. display: none;
  778. }
  779. .toc-link {
  780. display: none;
  781. }
  782. [aria-expanded="true"] + #patterns-list {
  783. display: block;
  784. }
  785. code {
  786. word-break: break-all;
  787. }
  788. .tested th,
  789. .tested td {
  790. display: block;
  791. }
  792. .tested td + td {
  793. border-top: 0;
  794. }
  795. }
  796. @media print {
  797. .wrapper:not(.print-version) .intro-and-nav,
  798. .wrapper:not(.print-version) [role="contentinfo"] {
  799. display: none;
  800. }
  801. .main-and-footer {
  802. margin-left: 0;
  803. }
  804. a {
  805. border: 0;
  806. }
  807. main a::after {
  808. content: " (" attr(href) ")";
  809. word-break: break-word;
  810. }
  811. main nav a::after {
  812. content: '';
  813. }
  814. .cmd code {
  815. background: #fff;
  816. color: #111;
  817. }
  818. pre code {
  819. white-space: pre-wrap !important;
  820. }
  821. .line-numbers .line-numbers-rows {
  822. display: none;
  823. }
  824. .line-numbers code {
  825. padding-left: 0;
  826. }
  827. .expandable-section {
  828. border: 0;
  829. padding: 0;
  830. }
  831. .expandable-section + p {
  832. margin-top: 0.75rem;
  833. }
  834. [id^="js-expandable-"] {
  835. display: block;
  836. }
  837. [data-expands] svg {
  838. display: none;
  839. }
  840. main *:not(.with-desc) {
  841. page-break-inside: avoid;
  842. }
  843. .note.warning {
  844. border-left: 0.5rem solid;
  845. background: none;
  846. }
  847. }
  848. @media (-ms-high-contrast: active) {
  849. img[src*=".svg"] {
  850. filter: invert(100%);
  851. background: #fff;
  852. }
  853. }