ustyle 1.8.7 → 1.10.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (125) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/dist/ustyle-content.css +1 -1
  4. data/dist/ustyle-icons.css +1 -1
  5. data/dist/ustyle-latest.css +1 -1
  6. data/dist/ustyle.json +1 -1
  7. data/lib/ustyle/version.rb +1 -1
  8. data/package.json +2 -2
  9. data/styleguide/assets/sass/main.scss +1 -21
  10. data/styleguide/assets/sass/modules/_logo.scss +133 -9
  11. data/styleguide/content/brand/index.md +1 -1
  12. data/styleguide/content/brand/logo.tpl +207 -49
  13. data/styleguide/content/pattern-library/grid.tpl +6 -6
  14. data/styleguide/content/pattern-library/index.tpl +4 -4
  15. data/styleguide/partials/_header.tpl +32 -0
  16. data/vendor/assets/images/icons/uswitch.svg +1 -1
  17. data/vendor/assets/stylesheets/ustyle/articles/_base.scss +1 -1
  18. data/vendor/assets/stylesheets/ustyle/articles/_guide.scss +1 -1
  19. data/vendor/assets/stylesheets/ustyle/articles/_more.scss +1 -1
  20. data/vendor/assets/stylesheets/ustyle/articles/_related.scss +2 -2
  21. data/vendor/assets/stylesheets/ustyle/basics/_typography.scss +4 -4
  22. data/vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss +1 -3
  23. data/vendor/assets/stylesheets/ustyle/basics/variables/_icons.scss +8 -20
  24. data/vendor/assets/stylesheets/ustyle/components/_button.scss +12 -12
  25. data/vendor/assets/stylesheets/ustyle/components/_cta.scss +1 -1
  26. data/vendor/assets/stylesheets/ustyle/components/_featured.scss +4 -4
  27. data/vendor/assets/stylesheets/ustyle/components/_links.scss +5 -5
  28. data/vendor/assets/stylesheets/ustyle/components/_lists-li.scss +4 -2
  29. data/vendor/assets/stylesheets/ustyle/components/_lists.scss +1 -1
  30. data/vendor/assets/stylesheets/ustyle/components/_tooltip.scss +1 -1
  31. data/vendor/assets/stylesheets/ustyle/components/_usp.scss +11 -11
  32. data/vendor/assets/stylesheets/ustyle/forms/_fields.scss +3 -3
  33. data/vendor/assets/stylesheets/ustyle/forms/_input-group.scss +3 -3
  34. data/vendor/assets/stylesheets/ustyle/forms/_input.scss +5 -5
  35. data/vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss +1 -1
  36. data/vendor/assets/stylesheets/ustyle/forms/_select.scss +4 -4
  37. data/vendor/assets/stylesheets/ustyle/forms/_textarea.scss +2 -2
  38. data/vendor/assets/stylesheets/ustyle/forms/_toggle.scss +3 -3
  39. data/vendor/assets/stylesheets/ustyle/forms/_validation.scss +2 -2
  40. data/vendor/assets/stylesheets/ustyle/icons/_base.scss +0 -20
  41. data/vendor/assets/stylesheets/ustyle/icons/_svg.scss +9 -5
  42. data/vendor/assets/stylesheets/ustyle/utilities/_general.scss +9 -9
  43. data/vendor/assets/stylesheets/ustyle/utilities/_images.scss +4 -4
  44. data/vendor/assets/stylesheets/ustyle/utilities/_spacing.scss +28 -28
  45. metadata +2 -82
  46. data/vendor/assets/images/icons/16px/angry.png +0 -0
  47. data/vendor/assets/images/icons/16px/apple.png +0 -0
  48. data/vendor/assets/images/icons/16px/arrow-up-left.png +0 -0
  49. data/vendor/assets/images/icons/16px/barchart.png +0 -0
  50. data/vendor/assets/images/icons/16px/blackberry.png +0 -0
  51. data/vendor/assets/images/icons/16px/controller.png +0 -0
  52. data/vendor/assets/images/icons/16px/desktop.png +0 -0
  53. data/vendor/assets/images/icons/16px/doc.png +0 -0
  54. data/vendor/assets/images/icons/16px/happy.png +0 -0
  55. data/vendor/assets/images/icons/16px/laptop.png +0 -0
  56. data/vendor/assets/images/icons/16px/magnify-out.png +0 -0
  57. data/vendor/assets/images/icons/16px/neutral.png +0 -0
  58. data/vendor/assets/images/icons/16px/power.png +0 -0
  59. data/vendor/assets/images/icons/16px/question.png +0 -0
  60. data/vendor/assets/images/icons/16px/sad.png +0 -0
  61. data/vendor/assets/images/icons/16px/tablet.png +0 -0
  62. data/vendor/assets/images/icons/16px/warning.png +0 -0
  63. data/vendor/assets/images/icons/16px/windows.png +0 -0
  64. data/vendor/assets/images/icons/16px/wondering.png +0 -0
  65. data/vendor/assets/images/icons/16px/world.png +0 -0
  66. data/vendor/assets/images/icons/32px/angry.png +0 -0
  67. data/vendor/assets/images/icons/32px/apple.png +0 -0
  68. data/vendor/assets/images/icons/32px/arrow-up-left.png +0 -0
  69. data/vendor/assets/images/icons/32px/barchart.png +0 -0
  70. data/vendor/assets/images/icons/32px/blackberry.png +0 -0
  71. data/vendor/assets/images/icons/32px/controller.png +0 -0
  72. data/vendor/assets/images/icons/32px/desktop.png +0 -0
  73. data/vendor/assets/images/icons/32px/doc.png +0 -0
  74. data/vendor/assets/images/icons/32px/happy.png +0 -0
  75. data/vendor/assets/images/icons/32px/laptop.png +0 -0
  76. data/vendor/assets/images/icons/32px/magnify-out.png +0 -0
  77. data/vendor/assets/images/icons/32px/neutral.png +0 -0
  78. data/vendor/assets/images/icons/32px/power.png +0 -0
  79. data/vendor/assets/images/icons/32px/question.png +0 -0
  80. data/vendor/assets/images/icons/32px/sad.png +0 -0
  81. data/vendor/assets/images/icons/32px/tablet.png +0 -0
  82. data/vendor/assets/images/icons/32px/warning.png +0 -0
  83. data/vendor/assets/images/icons/32px/windows.png +0 -0
  84. data/vendor/assets/images/icons/32px/wondering.png +0 -0
  85. data/vendor/assets/images/icons/32px/world.png +0 -0
  86. data/vendor/assets/images/icons/64px/angry.png +0 -0
  87. data/vendor/assets/images/icons/64px/apple.png +0 -0
  88. data/vendor/assets/images/icons/64px/arrow-up-left.png +0 -0
  89. data/vendor/assets/images/icons/64px/barchart.png +0 -0
  90. data/vendor/assets/images/icons/64px/blackberry.png +0 -0
  91. data/vendor/assets/images/icons/64px/controller.png +0 -0
  92. data/vendor/assets/images/icons/64px/desktop.png +0 -0
  93. data/vendor/assets/images/icons/64px/doc.png +0 -0
  94. data/vendor/assets/images/icons/64px/happy.png +0 -0
  95. data/vendor/assets/images/icons/64px/laptop.png +0 -0
  96. data/vendor/assets/images/icons/64px/magnify-out.png +0 -0
  97. data/vendor/assets/images/icons/64px/neutral.png +0 -0
  98. data/vendor/assets/images/icons/64px/power.png +0 -0
  99. data/vendor/assets/images/icons/64px/question.png +0 -0
  100. data/vendor/assets/images/icons/64px/sad.png +0 -0
  101. data/vendor/assets/images/icons/64px/tablet.png +0 -0
  102. data/vendor/assets/images/icons/64px/warning.png +0 -0
  103. data/vendor/assets/images/icons/64px/windows.png +0 -0
  104. data/vendor/assets/images/icons/64px/wondering.png +0 -0
  105. data/vendor/assets/images/icons/64px/world.png +0 -0
  106. data/vendor/assets/images/icons/angry.svg +0 -1
  107. data/vendor/assets/images/icons/apple.svg +0 -1
  108. data/vendor/assets/images/icons/arrow-up-left.svg +0 -1
  109. data/vendor/assets/images/icons/barchart.svg +0 -1
  110. data/vendor/assets/images/icons/blackberry.svg +0 -1
  111. data/vendor/assets/images/icons/controller.svg +0 -1
  112. data/vendor/assets/images/icons/desktop.svg +0 -1
  113. data/vendor/assets/images/icons/doc.svg +0 -1
  114. data/vendor/assets/images/icons/happy.svg +0 -1
  115. data/vendor/assets/images/icons/laptop.svg +0 -1
  116. data/vendor/assets/images/icons/magnify-out.svg +0 -1
  117. data/vendor/assets/images/icons/neutral.svg +0 -1
  118. data/vendor/assets/images/icons/power.svg +0 -1
  119. data/vendor/assets/images/icons/question.svg +0 -1
  120. data/vendor/assets/images/icons/sad.svg +0 -1
  121. data/vendor/assets/images/icons/tablet.svg +0 -1
  122. data/vendor/assets/images/icons/warning.svg +0 -1
  123. data/vendor/assets/images/icons/windows.svg +0 -1
  124. data/vendor/assets/images/icons/wondering.svg +0 -1
  125. data/vendor/assets/images/icons/world.svg +0 -1
@@ -4,4 +4,36 @@
4
4
  uStyle
5
5
  </a>
6
6
  <a class="version" href="https://github.com/uswitch/ustyle/releases/tag/v{{project.version}}">v{{project.version}}</a>
7
+ <svg class="logo__svg--hidden" xmlns="http://www.w3.org/2000/svg">
8
+ <symbol viewBox="0 0 100 100" id="uicon-logo-icon">
9
+ <title>logo-icon</title><path d="M26.9 51.662V12.174H.9v38.771c0 24.61 20.095 46.167 44.695 46.896 13.28.393 25.36-4.881 34.012-13.584C55.435 96.47 26.9 78.67 26.9 51.662z"/><path d="M80.9 2.138L62.733 22.174H67.9v29.378c0 13.905-13.365 24.176-26.722 19.468C58.871 92.463 93.9 79.992
10
+ 93.9 52.023V22.174h5.2L80.9 2.138z"/></symbol>
11
+ <symbol viewBox="0 0 276 64" id="uicon-logo-small">
12
+ <title>logo-small</title>
13
+ <path d="M126.4 30.198c7.366 1.542 12.7 4.554 12.7 11.9 0 14.392-26.962 17.714-30.9-.5l6.5-3.3c2.337 13.174 17 10.584 17 4 0-9.031-21.8-3.134-21.8-18.1 0-7.129 6.539-10.6 13.7-10.6 7.4 0 12.3 3.3 14.8 10l-5.8 3.4c-3.022-8.689-11.392-7.304-13.8-5.9-2.502 1.668-4.384 6.921 7.6 9.1zM164.4 25.798l4.9 18.5 4.5-18.5h6.8l-7.7 27.6h-6.8l-5-18.9-5.1 18.9h-6.8l-7.7-27.6h6.8l4.5 18.5 4.9-18.5h6.7zM185.1 53.398v-27.6h7.1v27.6h-7.1zM197.1 31.498v-5.7h4.2v-7.4h7v7.4h6v5.7h-6v12.5c0 3.65 2.521 4.537 5.8 3.6l.7 5.8c-3.717 1.327-13.5 2.387-13.5-7.9v-14h-4.2zM239.2 42.498l5.7 3.7c-4.859 9.904-17.173 9.809-23.3 3.9-8.049-7.762-4.282-25 10.4-25 5.483 0 10.565 2.375 12.7 7.5l-5.8 3.8c-3.452-7.643-14.2-5.67-14.2 3.3 0 8.306 8.37 9.425 11.7 6.7 1-.9 2-2.2 2.8-3.9zM275.6 34.798v18.6h-7v-15.9c0-7.019-7.634-7.057-10.4-3.6-2.456 2.645-1.9 4.895-1.9 19.6h-7v-39h7v15.7c5.119-7.912 19.3-7.012 19.3 4.6z"/>
14
+ <circle cx="188.5" cy="17.798" r="4"/>
15
+ <path d="M77.8 42.898v-17.1h7v15.5c0 4.2 1.9 6.3 5.6 6.3 4.184 0 6.4-3.501 6.4-7.6v-14.2h7v27.6h-7v-3.8c-4.505 8.061-19 5.517-19-6.7z"/><path d="M17 34.2V8H0v25.6c0 26.622 32.502 39.889 51.402 21.1C35.893 62.409 17.546 51.556 17 34.2z"/>
16
+ <path d="M51.5.3L37.738 15H43v19.3c0 8.307-8.053 15.305-17.607 12.4C37.082 60.497 60 52.572 60 34.3V15h5.464L51.5.3z"/>
17
+ </symbol>
18
+ <symbol viewBox="0 0 82 92" id="uicon-logo-vertical-small">
19
+ <title>logo-vertical-small</title>
20
+ <path d="M17.25 81.2c2.148 1.432 8.2.773 8.2 5.9 0 6.331-11.276 6.919-12.7-.2l2.7-1.3c.5 2.5 1.8 3.8 4 3.8 1.542 0 3-.669 3-2.2 0-1.768-2.055-2.205-3.9-2.6-7.412-1.482-6.479-9.3.6-9.3 3.1 0 5.1 1.4 6.1 4.1l-2.4 1.4c-.6-1.9-1.9-2.8-3.8-2.8-3.187 0-3.239 2.241-1.8 3.2zM35.95 80.3l2 7.6 1.8-7.6h2.8l-3.2 11.4h-2.8l-2.1-7.8-2.1 7.8h-2.8l-3.2-11.4h2.8l1.8 7.6 2-7.6h3zM44.45 91.7V80.3h2.9v11.4h-2.9zM49.35 82.7v-2.3h1.7v-3.1h2.9v3.1h2.5v2.3h-2.5c0 5.453-.429 6.8 1.5 6.8.3 0 .7 0 1-.1l.3 2.4c-.6.2-1.2.3-1.9.3-4.399 0-3.6-3.423-3.6-9.3h-1.9v-.1zM66.75 87.2l2.3 1.5c-2.036 4.071-6.806 4.161-9.6 1.6-2.278-2.278-2.295-6.305 0-8.6 2.775-2.775 8.011-2.072 9.4 1.4l-2.4 1.6c-.6-1.3-1.6-1.9-2.9-1.9-4.987 0-2.855 8.913 2 6 .5-.3.8-.9 1.2-1.6zM81.75 84v7.7h-2.9c0-6.191.755-9-2.3-9-1.808 0-2.8 1.584-2.8 3.2v5.8h-2.9v-16h2.9v6.5c2.243-3.49 8-2.48 8 1.8zM47.45 77c0 2.114-3.2 2.116-3.2 0 0-2.114 3.2-2.116 3.2 0zM.25 80.4h2.9v6.4c0 3.082 2.981 3.162 4.2 1.7.904-1.085.7-1.783.7-8.2h2.9v11.4h-2.9v-1.6c-1.328 2.324-4.65 2.55-6.6.6-1.546-1.546-1.2-3.235-1.2-10.3z"/>
21
+ <path d="M27.25 34.6V9h-17v25.137c0 27.112 32.045 40.867 51.4 21.863-15.497 7.748-34.4-3.393-34.4-21.4z"/>
22
+ <path d="M61.75.2L48.05 15h5.2v19.4c0 8.307-7.958 15.305-17.4 12.4 11.532 13.774 33.546 6.132 34.4-11.3V15h5.4L61.75.2z"/>
23
+ </symbol>
24
+ <symbol viewBox="0 0 150 165" id="uicon-logo-vertical">
25
+ <title>logo-vertical</title>
26
+ <path d="M51 60.6V12H20v47.3c0 49.216 59.329 73.789 93.894 39C85.72 112.718 51.945 92.531 51 60.6z"/>
27
+ <path d="M114.55 0L92.82 24H99v35.7c0 16.738-16.596 28.262-31.997 22.7C87.942 107.544 128.296 93.807 130 61.5V24h6.18L114.55 0z"/>
28
+ <path d="M29.716 142.138c0 6.551 16.696 2.08 16.696 13.703 0 11.223-20.631 13.294-23.364-.368l4.883-2.468c.84 4.673 3.36 7.035 7.455 7.035 2.893 0 5.513-1.331 5.513-3.99 0-6.866-16.486-2.356-16.486-13.756 0-5.456 4.821-8.085 10.343-8.085 5.618 0 9.345 2.52 11.183 7.56l-4.358 2.573c-1.155-3.465-3.518-5.25-6.93-5.25-2.257.001-4.935.78-4.935 3.046zm35.965 1.26l3.728 14.018 3.36-14.018h5.145l-5.828 20.896h-5.145l-3.833-14.386-3.885 14.386h-5.145l-5.828-20.896h5.145l3.36 14.018 3.728-14.018h5.198zm15.698 20.896v-20.896h5.355v20.896h-5.355zm9.083-16.591v-4.305h3.203v-5.618h5.303v5.618h4.568v4.305h-4.568v9.503c0 2.772 1.824 3.397 4.463 2.678l.473 4.358c-3.514 1.171-10.238 1.328-10.238-6.038v-10.501h-3.204zm31.922 8.348l4.305 2.783c-1.995 3.99-5.25 5.985-9.818 5.985-14.77 0-14.651-22.051-.053-22.051 4.26 0 8.045 1.763 9.608 5.67l-4.358 2.888c-2.741-5.873-10.816-4.21-10.816 2.468.001 6.596 8.038 8.703 11.132 2.257zm27.616-5.88v14.123h-5.303c0-13.158.323-13.803-1.103-15.331-2.104-2.255-8.243-1.558-8.243 4.725v10.606h-5.303v-29.506h5.303v11.918c4.008-6.137 14.649-5.153 14.649 3.465zM86.944 137.308c0 3.955-5.985 3.959-5.985 0 0-3.955 5.985-3.959 5.985 0zM0 143.398h5.303v11.761c0 3.203 1.418 4.778 4.253 4.778 3.107 0 4.83-2.556 4.83-5.775v-10.763h5.303v20.896h-5.303v-2.888C11.063 167.436 0 165.628 0 156.366"/>
29
+ </symbol>
30
+ <symbol viewBox="0 0 395 90" id="uicon-logo">
31
+ <title>logo</title>
32
+ <path d="M165.9 32.9c0 12.477 31.8 3.962 31.8 26.1 0 21.377-39.296 25.32-44.5-.7l9.3-4.7c1.6 8.9 6.4 13.4 14.2 13.4 5.51 0 10.5-2.536 10.5-7.6 0-10.251-17.499-6.79-26.7-15.1-3.2-2.8-4.7-6.5-4.7-11.1 0-10.393 9.181-15.4 19.7-15.4 10.7 0 17.8 4.8 21.3 14.4l-8.3 4.9c-2.2-6.6-6.7-10-13.2-10-4.301 0-9.4 1.485-9.4 5.8zm68.5 2.4l7.1 26.7 6.4-26.7h9.8l-11.1 39.8h-9.8l-7.3-27.4-7.4 27.4h-9.8l-11.1-39.8h9.8l6.4 26.7 7.1-26.7h9.9zm29.9 39.8V35.3h10.2v39.8h-10.2zm17.3-31.6v-8.2h6.1V24.6h10.1v10.7h8.7v8.2h-8.7v18.1c0 5.28 3.474 6.471 8.5 5.1l.9 8.3c-6.694 2.231-19.5 2.53-19.5-11.5v-20h-6.1zm60.8 15.9l8.2 5.3c-3.8 7.6-10 11.4-18.7 11.4-28.132 0-27.906-42-.1-42 8.113 0 15.323 3.359 18.3 10.8l-8.3 5.5c-5.22-11.186-20.6-8.019-20.6 4.7 0 11.691 11.601 13.774 16.9 9.8 1.7-1.2 3.1-3 4.3-5.5zM395 48.2v26.9h-10.1c0-25.062.616-26.29-2.1-29.2-4.008-4.294-15.7-2.968-15.7 9v20.2H357V18.9h10.1v22.7c7.633-11.688 27.9-9.813 27.9 6.6z"/>
33
+ <circle cx="269.2" cy="23.7" r="5.7"/>
34
+ <path d="M109.3 60V35.3h10.1v22.4c0 6.1 2.7 9.1 8.1 9.1 5.917 0 9.2-4.869 9.2-11V35.3h10.1v39.8h-10.1v-5.5c-6.328 11.484-27.4 8.041-27.4-9.6z"/>
35
+ <path d="M24.4 47.7v-38H0v37c0 38.509 46.725 57.775 73.9 30.6-22.32 11.16-48.688-4.7-49.5-29.6z"/>
36
+ <path d="M74.3 0l-17 18.8h4.9v28c0 13.107-13.176 22.193-25.1 17.8 16.21 19.706 48.297 8.966 49.5-16.3V18.9h4.9L74.3 0z"/>
37
+ </symbol>
38
+ </svg>
7
39
  </header>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="288" viewBox="0 0 32 288"><path d="M29.9 19.33c-.04-1.43 0-19.326 0-19.326h-9.04v18.72c0 .728.052 1.61-.33 2.404-.17.357-.407.696-.786 1l3.097 1.683c.11-.4.3-.76.57-1.09l.71.51c-.36.48-.55.97-.55 1.46 0 .55.29.87.64.87h.02c.416 0 .6-.24.84-1.27.28-1.132.68-1.713 1.57-1.713h.017c1 0 1.598.79 1.598 1.914 0 .818-.28 1.59-.854 2.233l-.67-.566c.443-.512.695-1.032.695-1.69 0-.58-.275-.95-.673-.95h-.01c-.38 0-.59.215-.82 1.21-.274 1.14-.61 1.78-1.597 1.78h-.02c-.763 0-1.33-.53-1.5-1.316l-1.825 2.23c.315 1.44.954 1.83.954 1.83l9.99-.006c-1.25-.934-1.885-5.82-2-9.9zM22.58 5.46h2.164c-.375-.26-.704-.636-.704-1.263 0-.91.612-1.438 1.545-1.438h2.578v.92h-2.295c-.627 0-.987.31-.987.86 0 .53.38.91 1.01.91h2.28v.92h-5.59v-.92zm.925 10.224h-.88v-.994h.88v.994zm4.69 2.875l-2.762.9 2.76.91v.82l-4.07 1.31v-.95l2.77-.81-2.785-.9v-.8l2.785-.896-2.77-.827v-.93l4.07 1.32v.836zm-4.07-2.92v-.93h4.04v.92h-4.04zm2.922-2.4H24.92v.51h-.796v-.51h-1.11v-.93h1.11v-1.08h.796v1.08h1.982c.36 0 .505-.187.505-.5 0-.21-.046-.39-.138-.58h.75c.13.23.2.48.2.832 0 .68-.3 1.16-1.19 1.16zm-.88-2.54h-.015c-1.147 0-2.112-.89-2.112-2.11 0-.76.283-1.23.696-1.62l.62.58c-.3.285-.505.583-.505 1.04 0 .675.59 1.17 1.29 1.17h.02c.72 0 1.3-.495 1.3-1.207 0-.44-.2-.76-.495-1.05l.55-.56c.445.4.76.865.76 1.653 0 1.2-.942 2.09-2.09 2.09zm-12.22 9.21l.73 3.61s-.53.064-.707.073c-3.788.19-5.162-2.42-5.162-6.83V.003H0v18.08c0 7.97 3.153 11.906 10.03 11.906 2.196 0 4.032-.38 5.63-1.18l.596 3.19 6.133-7.49-8.45-4.6z" fill="#fff"/><path d="M29.9 83.33c-.04-1.43 0-19.326 0-19.326h-9.04v18.72c0 .728.052 1.61-.33 2.404-.17.357-.407.696-.786 1l3.097 1.683c.11-.4.3-.76.57-1.09l.71.51c-.36.48-.55.97-.55 1.46 0 .55.29.87.64.87h.02c.416 0 .6-.24.84-1.27.28-1.132.68-1.713 1.57-1.713h.017c1 0 1.598.79 1.598 1.914 0 .818-.28 1.59-.854 2.233l-.67-.566c.443-.512.695-1.032.695-1.69 0-.58-.275-.95-.673-.95h-.01c-.38 0-.59.215-.82 1.21-.274 1.14-.61 1.78-1.597 1.78h-.02c-.763 0-1.33-.53-1.5-1.316l-1.825 2.23c.315 1.44.954 1.83.954 1.83l9.99-.006c-1.25-.934-1.885-5.82-2-9.9zm-7.32-13.87h2.164c-.375-.26-.704-.636-.704-1.263 0-.91.612-1.438 1.545-1.438h2.578v.92h-2.295c-.627 0-.987.31-.987.86 0 .53.38.91 1.01.91h2.28v.92h-5.59v-.928zm.925 10.224h-.88v-.994h.88v.994zm4.69 2.875l-2.762.9 2.76.91v.82l-4.07 1.31v-.95l2.77-.81-2.785-.9v-.8l2.785-.896-2.77-.827v-.93l4.07 1.32v.836zm-4.07-2.92v-.93h4.04v.92h-4.04zm2.922-2.4H24.92v.51h-.796v-.51h-1.11v-.93h1.11v-1.08h.796v1.08h1.982c.36 0 .505-.187.505-.5 0-.21-.046-.39-.138-.58h.75c.13.23.2.48.2.832 0 .68-.3 1.16-1.19 1.16zm-.88-2.54h-.015c-1.147 0-2.112-.89-2.112-2.11 0-.76.283-1.23.696-1.62l.62.58c-.3.285-.505.583-.505 1.04 0 .675.59 1.17 1.29 1.17h.02c.72 0 1.3-.495 1.3-1.207 0-.44-.2-.76-.495-1.05l.55-.56c.445.4.76.865.76 1.653 0 1.2-.942 2.09-2.09 2.09zm-12.22 9.21l.73 3.61s-.53.064-.707.073c-3.788.19-5.162-2.42-5.162-6.83V64H0v18.08c0 7.97 3.153 11.905 10.03 11.905 2.196 0 4.032-.378 5.63-1.18l.596 3.19 6.133-7.485-8.45-4.6z" fill="#333"/><path d="M29.9 147.33c-.04-1.43 0-19.326 0-19.326h-9.04v18.72c0 .728.052 1.61-.33 2.404-.17.357-.407.696-.786 1l3.097 1.683c.11-.4.3-.76.57-1.09l.71.51c-.36.48-.55.97-.55 1.46 0 .55.29.87.64.87h.02c.416 0 .6-.24.84-1.27.28-1.132.68-1.713 1.57-1.713h.017c1 0 1.598.79 1.598 1.914 0 .818-.28 1.59-.854 2.233l-.67-.566c.443-.512.695-1.032.695-1.69 0-.58-.275-.95-.673-.95h-.01c-.38 0-.59.215-.82 1.21-.274 1.14-.61 1.78-1.597 1.78h-.02c-.763 0-1.33-.53-1.5-1.316l-1.825 2.23c.315 1.44.954 1.83.954 1.83l9.99-.006c-1.25-.934-1.885-5.82-2-9.9zm-7.32-13.87h2.164c-.375-.26-.704-.636-.704-1.263 0-.91.612-1.438 1.545-1.438h2.578v.92h-2.295c-.627 0-.987.31-.987.86 0 .53.38.91 1.01.91h2.28v.92h-5.59v-.928zm.925 10.224h-.88v-.995h.88v.99zm4.69 2.875l-2.762.9 2.76.91v.82l-4.07 1.31v-.95l2.77-.81-2.785-.9v-.8l2.785-.896-2.77-.827v-.936l4.07 1.325v.834zm-4.07-2.92v-.93h4.04v.92h-4.04zm2.922-2.4H24.92v.51h-.796v-.51h-1.11v-.93h1.11v-1.09h.796v1.08h1.982c.36 0 .505-.184.505-.497 0-.21-.046-.39-.138-.577h.75c.13.23.2.48.2.833 0 .68-.3 1.162-1.19 1.162zm-.88-2.54h-.015c-1.147 0-2.112-.89-2.112-2.11 0-.76.283-1.23.696-1.62l.62.58c-.3.285-.505.583-.505 1.04 0 .675.59 1.17 1.29 1.17h.02c.72 0 1.3-.495 1.3-1.207 0-.44-.2-.76-.495-1.05l.55-.56c.445.4.76.865.76 1.653 0 1.2-.942 2.09-2.09 2.09zm-12.22 9.21l.73 3.61s-.53.064-.707.073c-3.788.19-5.162-2.42-5.162-6.83V128H0v18.08c0 7.97 3.153 11.905 10.03 11.905 2.196 0 4.032-.374 5.63-1.176l.596 3.19 6.133-7.49-8.45-4.6z" fill="#97999A"/><path d="M29.9 211.33c-.04-1.43 0-19.326 0-19.326h-9.04v18.72c0 .728.052 1.61-.33 2.404-.17.357-.407.696-.786 1l3.097 1.683c.11-.4.3-.76.57-1.09l.71.51c-.36.48-.55.97-.55 1.46 0 .55.29.87.64.87h.02c.416 0 .6-.24.84-1.27.28-1.132.68-1.713 1.57-1.713h.017c1 0 1.598.79 1.598 1.914 0 .818-.28 1.59-.854 2.233l-.67-.566c.443-.512.695-1.032.695-1.69 0-.58-.275-.95-.673-.95h-.01c-.38 0-.59.215-.82 1.21-.274 1.14-.61 1.78-1.597 1.78h-.02c-.763 0-1.33-.53-1.5-1.316l-1.825 2.23c.315 1.44.954 1.83.954 1.83l9.99-.006c-1.25-.934-1.885-5.82-2-9.9zm-7.32-13.87h2.164c-.375-.26-.704-.636-.704-1.263 0-.91.612-1.438 1.545-1.438h2.578v.92h-2.295c-.627 0-.987.31-.987.86 0 .53.38.91 1.01.91h2.28v.92h-5.59v-.928zm.925 10.224h-.88v-.995h.88v.99zm4.69 2.875l-2.762.9 2.76.91v.82l-4.07 1.31v-.95l2.77-.81-2.785-.9v-.8l2.785-.896-2.77-.827v-.936l4.07 1.325v.834zm-4.07-2.92v-.93h4.04v.92h-4.04zm2.922-2.4H24.92v.51h-.796v-.51h-1.11v-.93h1.11v-1.09h.796v1.08h1.982c.36 0 .505-.184.505-.497 0-.21-.046-.39-.138-.577h.75c.13.23.2.48.2.833 0 .68-.3 1.162-1.19 1.162zm-.88-2.54h-.015c-1.147 0-2.112-.89-2.112-2.11 0-.76.283-1.23.696-1.62l.62.58c-.3.285-.505.583-.505 1.04 0 .675.59 1.17 1.29 1.17h.02c.72 0 1.3-.495 1.3-1.207 0-.44-.2-.76-.495-1.05l.55-.56c.445.4.76.865.76 1.653 0 1.2-.942 2.09-2.09 2.09zm-12.22 9.21l.73 3.61s-.53.064-.707.073c-3.788.19-5.162-2.42-5.162-6.83V192H0v18.08c0 7.97 3.153 11.905 10.03 11.905 2.196 0 4.032-.374 5.63-1.176l.596 3.19 6.133-7.49-8.45-4.6z" fill="#008FE9"/><path d="M29.9 275.33c-.04-1.43 0-19.326 0-19.326h-9.04v18.72c0 .728.052 1.61-.33 2.404-.17.357-.407.696-.786 1l3.097 1.683c.11-.4.3-.76.57-1.09l.71.51c-.36.48-.55.97-.55 1.46 0 .55.29.87.64.87h.02c.416 0 .6-.24.84-1.27.28-1.132.68-1.713 1.57-1.713h.017c1 0 1.598.79 1.598 1.914 0 .818-.28 1.59-.854 2.233l-.67-.566c.443-.512.695-1.032.695-1.69 0-.58-.275-.95-.673-.95h-.01c-.38 0-.59.215-.82 1.21-.274 1.14-.61 1.78-1.597 1.78h-.02c-.763 0-1.33-.53-1.5-1.316l-1.825 2.23c.315 1.44.954 1.83.954 1.83l9.99-.006c-1.25-.934-1.885-5.82-2-9.9zm-7.32-13.87h2.164c-.375-.26-.704-.636-.704-1.263 0-.91.612-1.438 1.545-1.438h2.578v.92h-2.295c-.627 0-.987.31-.987.86 0 .53.38.91 1.01.91h2.28v.92h-5.59v-.928zm.925 10.224h-.88v-.995h.88v.99zm4.69 2.875l-2.762.9 2.76.91v.82l-4.07 1.31v-.95l2.77-.81-2.785-.9v-.8l2.785-.896-2.77-.827v-.936l4.07 1.325v.834zm-4.07-2.92v-.93h4.04v.92h-4.04zm2.922-2.4H24.92v.51h-.796v-.51h-1.11v-.93h1.11v-1.09h.796v1.08h1.982c.36 0 .505-.184.505-.497 0-.21-.046-.39-.138-.577h.75c.13.23.2.48.2.833 0 .68-.3 1.162-1.19 1.162zm-.88-2.54h-.015c-1.147 0-2.112-.89-2.112-2.11 0-.76.283-1.23.696-1.62l.62.58c-.3.285-.505.583-.505 1.04 0 .675.59 1.17 1.29 1.17h.02c.72 0 1.3-.495 1.3-1.207 0-.44-.2-.76-.495-1.05l.55-.56c.445.4.76.865.76 1.653 0 1.2-.942 2.09-2.09 2.09zm-12.22 9.21l.73 3.61s-.53.064-.707.073c-3.788.19-5.162-2.42-5.162-6.83V256H0v18.08c0 7.97 3.153 11.905 10.03 11.905 2.196 0 4.032-.374 5.63-1.176l.596 3.19 6.133-7.49-8.45-4.6z" fill="#174695"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="288" viewBox="0 0 32 288"><g fill="#002396"><path d="M8.273 273.123v-12.807h-8.31v12.514c0 13.013 15.888 19.498 25.126 10.314-7.581 3.768-16.549-1.537-16.816-10.021z"/><path d="M25.137 256.552l-6.727 7.186h2.572v9.434c0 4.061-3.936 7.481-8.607 6.061 5.714 6.744 16.917 2.87 16.917-6.061v-9.434h2.671l-6.826-7.186z"/></g><g fill="#008FE9"><path d="M8.273 209.123v-12.807h-8.31v12.514c0 13.013 15.888 19.498 25.126 10.314-7.581 3.768-16.549-1.537-16.816-10.021z"/><path d="M25.137 192.552l-6.727 7.186h2.572v9.434c0 4.061-3.936 7.481-8.607 6.061 5.714 6.744 16.917 2.87 16.917-6.061v-9.434h2.671l-6.826-7.186z"/></g><g fill="#97999A"><path d="M8.31 145.123v-12.807H0v12.514c0 13.013 15.888 19.498 25.126 10.314-7.581 3.768-16.549-1.536-16.816-10.021z"/><path d="M25.174 128.553l-6.727 7.186h2.572v9.434c0 4.061-3.936 7.481-8.607 6.061 5.714 6.744 16.917 2.87 16.917-6.061v-9.434H32l-6.826-7.186z"/></g><g fill="#333"><path d="M8.31 81.123V68.316H0V80.83c0 13.013 15.888 19.498 25.126 10.314-7.581 3.768-16.549-1.536-16.816-10.021z"/><path d="M25.174 64.553l-6.727 7.186h2.572v9.434c0 4.061-3.936 7.481-8.607 6.061 5.714 6.744 16.917 2.87 16.917-6.061v-9.434H32l-6.826-7.186z"/></g><g fill="#FFF"><path d="M8.31 17.123V4.316H0V16.83c0 13.013 15.888 19.498 25.126 10.314-7.581 3.768-16.549-1.536-16.816-10.021z"/><path d="M25.174.553l-6.727 7.186h2.572v9.434c0 4.061-3.936 7.481-8.607 6.061 5.714 6.744 16.917 2.87 16.917-6.061V7.738H32L25.174.553z"/></g></svg>
@@ -20,7 +20,7 @@
20
20
  // </div>
21
21
  // </div>
22
22
  // <div class='us-col-md-4 us-tablet--block'>
23
- // <img class='us-img--full us-article__image' src='http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg' />
23
+ // <img class='us-img--full us-article__image' src='http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />
24
24
  // </div>
25
25
  // </a>
26
26
  // </div>
@@ -9,7 +9,7 @@
9
9
  // <div class='us-guide-item us-col-md-4'>
10
10
  // <a class='us-guide-item-link' href='#'>
11
11
  // <div class='us-guide-item-image-container'>
12
- // <div class='us-guide-item-image background' style='background-image: url(http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg)'></div>
12
+ // <div class='us-guide-item-image background' style='background-image: url(http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>
13
13
  // </div>
14
14
  // <div class='us-guide-item-content'>
15
15
  // <h4 class='us-guide-item-title'>Car insurance guides</h4>
@@ -2,7 +2,7 @@
2
2
  // @name More article
3
3
  //
4
4
  // @description
5
- // If the article listing has more in a category, we use this to let a user navigate to that category
5
+ // If the article listing has more in a category, we use this to let a user navigate to that category.
6
6
  //
7
7
  // @markup
8
8
  // <div class='us-more-item us-col-md-4'>
@@ -1,8 +1,8 @@
1
1
  // @page Pattern Library/Articles
2
2
  // @name Related items
3
- //
3
+ //
4
4
  // @description
5
- // Related lists used for content sidebars
5
+ // Related lists used for content sidebars.
6
6
  //
7
7
  // @markup
8
8
  // <ul class="us-related us-list--reset">
@@ -4,7 +4,7 @@
4
4
  //
5
5
  // @description
6
6
  // The default heading styling across all uSwitch pages.
7
- // We allow extending the sizes of these headings with `%heading-{$i}` so that we don't repeat similar font sizes across the site
7
+ // We allow extending the sizes of these headings with `%heading-{$i}` so that we don't repeat similar font sizes across the site.
8
8
  //
9
9
  // @markup
10
10
  // <h1>Heading 1</h1>
@@ -48,7 +48,7 @@
48
48
  // @description
49
49
  // Default paragraph styling with a margin bottom.
50
50
  //
51
- // @state .us-standfirst - Used for heros and introductory paragraphs
51
+ // @state .us-standfirst - Used for heros and introductory paragraphs.
52
52
  //
53
53
  // @markup
54
54
  // <p class="{$modifiers}">
@@ -70,7 +70,7 @@
70
70
  // @name Lists
71
71
  //
72
72
  // @description
73
- // Normal list styling
73
+ // Normal list styling.
74
74
  //
75
75
  // @markup
76
76
  // <ul>
@@ -93,7 +93,7 @@
93
93
  // @name Blockquote
94
94
  //
95
95
  // @description
96
- // Default blockquote
96
+ // Default blockquote.
97
97
  //
98
98
  // @markup
99
99
  // <blockquote>
@@ -15,7 +15,7 @@
15
15
  // @variable c-green - Action buttons, USPs
16
16
 
17
17
  $c-navy: #1c1f4e;
18
- $c-blue: #174695;
18
+ $c-blue: #002396;
19
19
  $c-typecyan: #008fe9;
20
20
  $c-cyan: #99e2ff;
21
21
  $c-typegrey: #2f353a;
@@ -69,5 +69,3 @@ $c-green-lightest: #adebc5;
69
69
  $c-yellow-lightest: #ffedab;
70
70
  $c-orange-lightest: #f9c9ac;
71
71
  $c-purple-lightest: #d7bbe2;
72
-
73
-
@@ -5,14 +5,9 @@
5
5
  $icons: (
6
6
  alarm
7
7
  android
8
- angry
9
- apple
10
8
  arrow-circle
11
- arrow-up-left
12
9
  arrow-up
13
10
  arrow-down
14
- barchart
15
- blackberry
16
11
  book
17
12
  bookmark
18
13
  breadcrumb
@@ -26,8 +21,6 @@ $icons: (
26
21
  cog
27
22
  credit-card
28
23
  cross
29
- desktop
30
- doc
31
24
  dual-fuel
32
25
  electric-light
33
26
  envelope
@@ -42,23 +35,19 @@ $icons: (
42
35
  google
43
36
  google-brand
44
37
  graph-up
45
- happy
46
38
  home
47
39
  hot
48
40
  info
49
41
  kettle
50
42
  key
51
- laptop
52
43
  lock
53
44
  magnify-in
54
- magnify-out
55
45
  magnify
56
46
  menu
57
47
  message
58
48
  mobile
59
49
  monthly-dd
60
50
  network
61
- neutral
62
51
  no-exit
63
52
  pdf
64
53
  pencil
@@ -68,18 +57,15 @@ $icons: (
68
57
  piggy-bank
69
58
  pin
70
59
  pound-note
71
- power
72
60
  present
73
61
  print
74
62
  quarterly-dd
75
63
  question-circle
76
- question
77
64
  quote
78
65
  recycle
79
66
  remove
80
67
  renewable
81
68
  results
82
- sad
83
69
  save
84
70
  share
85
71
  sim
@@ -92,7 +78,6 @@ $icons: (
92
78
  star
93
79
  starline-half
94
80
  starline
95
- tablet
96
81
  talk
97
82
  tick-circle
98
83
  tick
@@ -102,15 +87,10 @@ $icons: (
102
87
  uswitch
103
88
  variable
104
89
  warning-circle
105
- warning
106
90
  wifi
107
91
  wiki
108
- windows
109
- wondering
110
- world
111
92
  xml
112
93
  play
113
- controller
114
94
  pound-circle
115
95
  ) !default;
116
96
 
@@ -137,6 +117,14 @@ $base-icon-path: "icons/" !default;
137
117
 
138
118
  $svg-first: true !default;
139
119
 
120
+ /// Sets if we inline the icons (HTTP/1.1 performance recommended) or load in the URLs of them
121
+ /// for HTTP/2
122
+ ///
123
+ /// @group Icons
124
+ /// @type Bool
125
+
126
+ $svg-inline: true !default;
127
+
140
128
  /// Default support class fir SVG support. An SVG detection system is needed for this to
141
129
  /// be implemented. Feature detection like modernizr will do the trick.
142
130
  ///
@@ -2,19 +2,19 @@
2
2
  // @name Buttons
3
3
  //
4
4
  // @description
5
- // Our buttons used across the site. The states give different use cases. Both `<a>` and `<button>` tags are supported. Please use `role='button'` when using in a `<a>` tag.
5
+ // Our buttons used across the site. The states give different use cases. Both `<a>` and `<button>` tags are supported. Please use `role='button'` when using an `<a>` tag.
6
6
  //
7
- // @state .us-btn--primary - Used a save/update button
8
- // @state .us-btn--action - Navigational button
9
- // @state .us-btn--secondary - Secondary
10
- // @state .us-btn--hero - Navy outline used for buttons on hero banners
11
- // @state .us-btn--reversed - White outline for dark backgrounds
12
- // @state .us-btn--large - Larger button for heros
13
- // @state .us-btn--small - Smaller button for mobile tables
14
- // @state .us-btn--blocked - Full width button
15
- // @state .us-btn--link - link style button
16
- // @state .us-btn--stronger - Emphasis button
17
- // @state .us-btn--disabled - Disabled styling (can also be styled with :disabled)
7
+ // @state .us-btn--primary - Used as a save/update button.
8
+ // @state .us-btn--action - Navigational button.
9
+ // @state .us-btn--secondary - Secondary.
10
+ // @state .us-btn--hero - Navy outline used for buttons on hero banners.
11
+ // @state .us-btn--reversed - White outline for dark backgrounds.
12
+ // @state .us-btn--large - Larger button for heros.
13
+ // @state .us-btn--small - Smaller button for mobile tables.
14
+ // @state .us-btn--blocked - Full width button.
15
+ // @state .us-btn--link - link style button.
16
+ // @state .us-btn--stronger - Emphasis button.
17
+ // @state .us-btn--disabled - Disabled styling (can also be styled with :disabled).
18
18
  //
19
19
  // @markup
20
20
  // <a href="#" class="us-btn {$modifiers}" role="button">Link Button</a>
@@ -2,7 +2,7 @@
2
2
  // @name CTAs
3
3
  //
4
4
  // @description
5
- // Used within guide and news articles, these CTAs are intended to not interupt the content but to integrate in more subtle means.
5
+ // Used within guide and news articles, these CTAs (Calls to Action) are intended to not interupt the content but to integrate in more subtle means.
6
6
  //
7
7
  // @markup
8
8
  // <section class="us-cta cta cta-column">
@@ -2,8 +2,8 @@
2
2
  // @name Featured deal
3
3
  //
4
4
  // @description
5
- // The `.us-featured` is mostly composed by smaller components, the components can be shuffled around inside of a grid to create the needed variants.
6
- // This featured deal won't make any assumptions around the media queries, it's up to you, to deal with it. As you can see on the examples.
5
+ // The `.us-featured` is mostly composed of smaller components, the components can be shuffled around inside of a grid to create the needed variants.
6
+ // This featured deal won't make any assumptions around the media queries, it's up to you to deal with it.
7
7
  //
8
8
  // @markup
9
9
  //<div class="us-container">
@@ -22,7 +22,7 @@
22
22
  // </div>
23
23
  // </div>
24
24
  // <div class="us-desktop--hidden us-padding-top us-col-xsm-4 us-mobile-block">
25
- // <img class="us-img--full" src="http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg" width="200">
25
+ // <img class="us-img--full" src="http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg" width="200">
26
26
  // </div>
27
27
  // <div class="us-col-xsm-7 us-col-lg-8 us-col-sm-5">
28
28
  // <ul>
@@ -50,7 +50,7 @@
50
50
  // </div>
51
51
  // </div>
52
52
  // <div class="us-col-xsm-3 us-col-lg-4 us-tablet--block">
53
- // <img class="us-img--full us-desktop--block" src="http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg" width="200">
53
+ // <img class="us-img--full us-desktop--block" src="http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg" width="200">
54
54
  // <button class="margin-top margin-bottom us-btn us-btn--primary us-btn us-btn--blocked">See deal</button>
55
55
  // <div class="us-icon--before us-icon--small--before us-icon--typegrey--before us-icon--clock--before us-align--center">
56
56
  // <strong>3 days left</strong>
@@ -1,11 +1,11 @@
1
1
  // @page Pattern Library/Components
2
2
  // @name Anchor links
3
- //
4
- // @description
5
- // Anchor tag styling, with and without a border
6
3
  //
7
- // @state .us-link - Adds a border bottom to the link
8
- // @state .us-link--light - Changes the link colors to white for when links are placed on dark backgrounds
4
+ // @description
5
+ // Anchor tag styling, with and without a border.
6
+ //
7
+ // @state .us-link - Adds a border bottom to the link.
8
+ // @state .us-link--light - Changes the link colours to white for when links are placed on dark backgrounds.
9
9
  //
10
10
  // @markup
11
11
  // <a href="#" class="{$modifiers}">Link</a>
@@ -4,7 +4,7 @@
4
4
  // @description
5
5
  // Our default numbered list styling.
6
6
  //
7
- // @state .us-custom-list-alt - allows us to use the lists on hero/blue backgrounds.
7
+ // @state .us-custom-list-alt - Allows us to use the lists on hero/blue backgrounds.
8
8
  //
9
9
  // @markup
10
10
  // <ul class='us-numbered-list {$modifiers}'>
@@ -62,7 +62,9 @@
62
62
  // @name Ticked list
63
63
  //
64
64
  // @description
65
- // Our default ticked list styling. `.us-custom-list-alt` allows us to use the lists on hero/blue backgrounds.
65
+ // Our default ticked list styling.
66
+ //
67
+ // @state .us-custom-list-alt - Allows us to use the lists on hero/blue backgrounds.
66
68
  //
67
69
  // @markup
68
70
  // <ul class='us-ticked-list'>
@@ -1,6 +1,6 @@
1
1
  // @page Pattern Library/Components
2
2
  // @name Link lists
3
- //
3
+ //
4
4
  // @description
5
5
  // The default list styling for lists that have anchors to take you to other pages.
6
6
  //
@@ -2,7 +2,7 @@
2
2
  // @name Tooltip
3
3
  //
4
4
  // @description
5
- // `.us-tooltip` can be applied to any parent, and by hovering it, it will toggle the visibility of `.us-tooltip__note`. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.
5
+ // `.us-tooltip` can be applied to any parent, and by hovering over it, it will toggle the visibility of `.us-tooltip__note`. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.
6
6
  //
7
7
  // @state .us-tooltip--top
8
8
  // @state .us-tooltip--bottom
@@ -1,20 +1,20 @@
1
1
  // @page Pattern Library/Components
2
2
  // @name USPs
3
3
  //
4
- // @description
4
+ // @description
5
5
  // USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.
6
6
  // General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).
7
7
  //
8
- // @state .us-usp--blue - uSwitch related
9
- // @state .us-usp--orange - Rewards (money/points)
10
- // @state .us-usp--purple - Gifts eg. free TV
11
- // @state .us-usp--yellow - Vouchers
12
- // @state .us-usp--typecyan - Micro persuasions eg. most popular, half price
13
- // @state .us-usp--green - Renewable and environmentally friendly
14
- // @state .us-usp--navy - Generic vertical specific USP
15
- // @state .us-usp--cyan - Generic vertical specific USP
16
- // @state .us-usp--typegrey - Generic vertical specific USP
17
- // @state .us-usp--red - Generic vertical specific USP
8
+ // @state .us-usp--blue - uSwitch related.
9
+ // @state .us-usp--orange - Rewards (money/points).
10
+ // @state .us-usp--purple - Gifts eg. free TV.
11
+ // @state .us-usp--yellow - Vouchers.
12
+ // @state .us-usp--typecyan - Micro persuasions eg. most popular, half price.
13
+ // @state .us-usp--green - Renewable and environmentally friendly.
14
+ // @state .us-usp--navy - Generic vertical specific USP.
15
+ // @state .us-usp--cyan - Generic vertical specific USP.
16
+ // @state .us-usp--typegrey - Generic vertical specific USP.
17
+ // @state .us-usp--red - Generic vertical specific USP.
18
18
  //
19
19
  // @markup
20
20
  // <div class='us-usp {$modifiers}'>Shortened USP</div>
@@ -7,8 +7,8 @@
7
7
  // #### Best practices
8
8
  // * For text inputs that are optional, add "(optional)" to the `placeholder` attribute for the input. Not highlighting required fields makes the form look less intimidating.
9
9
  //
10
- // @state .us-field--blocked - Blocked label styling
11
- // @state .us-field--inline - Inline label styling
10
+ // @state .us-field--blocked - Blocked label styling.
11
+ // @state .us-field--inline - Inline label styling.
12
12
  //
13
13
  // @markup
14
14
  // <div class="us-field {$modifiers}">
@@ -63,7 +63,7 @@ $label-inline-breakpoint: tablet !default;
63
63
  }
64
64
 
65
65
  // The toggle field is for radios and checkboxes. It sits within the .us-field to allow
66
- // styling for labels of radio/checboxes
66
+ // styling for labels of radio/checkboxes
67
67
  .us-field-toggle {
68
68
  label {
69
69
  @include normal-font;
@@ -2,10 +2,10 @@
2
2
  // @name Input group
3
3
  //
4
4
  // @description
5
- // Inputs groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input
5
+ // Input groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input.
6
6
  //
7
- // @state .us-input-group--disabled - Disabled state for input groups
8
- // @state .us-input-group--blocked - Fluid style
7
+ // @state .us-input-group--disabled - Disabled state for input groups.
8
+ // @state .us-input-group--blocked - Fluid style.
9
9
  //
10
10
  // @markup
11
11
  // <div class="us-input-group us-margin-bottom {$modifiers}">
@@ -8,11 +8,11 @@
8
8
  // * Specifying an appropriate [type attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-type) (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.
9
9
  // * Where appropriate use the [autocomplete attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-autocomplete) to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.
10
10
  //
11
- // @state .us-form-input--large - Larger input style
12
- // @state .us-form-input--blocked - Fluid input style
13
- // @state .us-form-input--error - Visual feedback for when the input has an error
14
- // @state .us-form-input--success - Visual feedback for when success needs to be communicated to the user
15
- // @state .us-form-input--disabled - Inactive state for form inputs that can't be interacted with
11
+ // @state .us-form-input--large - Larger input style.
12
+ // @state .us-form-input--blocked - Fluid input style.
13
+ // @state .us-form-input--error - Visual feedback for when the input has an error.
14
+ // @state .us-form-input--success - Visual feedback for when success needs to be communicated to the user.
15
+ // @state .us-form-input--disabled - Inactive state for form inputs that can't be interacted with.
16
16
  //
17
17
  // @markup
18
18
  // <input class="us-form-input {$modifiers}" type="text" placeholder="Placeholder">
@@ -12,7 +12,7 @@
12
12
  // * Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.
13
13
  // * Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.
14
14
  //
15
- // @state us-form-input--disabled - Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with
15
+ // @state us-form-input--disabled - Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with.
16
16
  //
17
17
  // @markup
18
18
  // <div class="us-field us-field--blocked">
@@ -2,16 +2,16 @@
2
2
  // @name Selects
3
3
  //
4
4
  // @description
5
- // Select boxes allow users to choose and option or options from a list of options.
5
+ // Select boxes allow users to choose an option or options from a list of options.
6
6
  //
7
7
  // #### Best practices
8
8
  // * Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.
9
9
  // * It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.
10
10
  //
11
11
  // @state .us-form-select--multiple - Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size="" attribute set to anything higher than 1.
12
- // @state .us-form-select--blocked - Fluid style
13
- // @state .us-form-select--error - Visual feedback for when the input has an error
14
- // @state .us-form-select--success - Visual feedback for when success needs to be communicated to the user
12
+ // @state .us-form-select--blocked - Fluid style.
13
+ // @state .us-form-select--error - Visual feedback for when the input has an error.
14
+ // @state .us-form-select--success - Visual feedback for when success needs to be communicated to the user.
15
15
  // @state .us-form-select--disabled - Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.
16
16
  //
17
17
  // @markup
@@ -5,8 +5,8 @@
5
5
  // Our standard textarea styling across the website.
6
6
  //
7
7
  //
8
- // @state .us-form-textarea--blocked - Fluid textarea style
9
- // @state .us-form-textarea--disabled - Inactive state for textareas that can't be interacted with
8
+ // @state .us-form-textarea--blocked - Fluid textarea style.
9
+ // @state .us-form-textarea--disabled - Inactive state for textareas that can't be interacted with.
10
10
  //
11
11
  // @markup
12
12
  // <textarea class="us-form-textarea {$modifiers}"></textarea>
@@ -2,15 +2,15 @@
2
2
  // @name Toggle
3
3
  //
4
4
  // @description
5
- // Toggle buttons provide and alternative way of displaying radio groups with a small number of options to a user.
5
+ // Toggle buttons provide an alternative way of displaying radio groups with a small number of options to a user.
6
6
  // IE8 support is included with `radioToggle.js` which sets a `.checked` class on the radio button when clicked.
7
7
  //
8
8
  // #### Best practices
9
- // * Use as an alternation to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).
9
+ // * Use as an alternative to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).
10
10
  // * For forms that have many short radio group questions in them, toggle buttons provide a better experience for quickly selecting answers on both desktop and mobile due to larger visible click areas for each option.
11
11
  // * Limit the number of options in the toggle group to 3.
12
12
  //
13
- // @state .us-toggle__btn--disabled - Visual styling for toggle buttons that can't be interacted with
13
+ // @state .us-toggle__btn--disabled - Visual styling for toggle buttons that can't be interacted with.
14
14
  //
15
15
  // @javascript
16
16
  // var radioToggle = new RadioToggle({
@@ -8,8 +8,8 @@
8
8
  // * For inputs that have a label above them, place the validation message between the input and the label.
9
9
  // * Use success validation messages only when it makes sense to contextually. For example, they can help to reassure users about the data they entered when multiple criteria need to be satisfied, e.g. password fields.
10
10
  //
11
- // @state .us-validation--error - Error styling for incorrect data on forms
12
- // @state .us-validation--success - Success styling for correct forms
11
+ // @state .us-validation--error - Error styling for incorrect data on forms.
12
+ // @state .us-validation--success - Success styling for correct forms.
13
13
  //
14
14
  // @markup
15
15
  // <div class="us-field">